playbook_ui_docs 14.11.1.pre.alpha.pbntr703collapsiblerowsrails5536 → 14.11.1.pre.alpha.play1724darkmodeauditmap5409

Sign up to get free protection for your applications and to get access to all the features.
Files changed (29) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md +2 -2
  3. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +1 -1
  4. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb +9 -3
  5. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +0 -1
  6. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.md +1 -1
  7. data/app/pb_kits/playbook/pb_map/docs/_map_default.jsx +4 -4
  8. data/app/pb_kits/playbook/pb_map/docs/_map_with_custom_button.jsx +7 -7
  9. data/app/pb_kits/playbook/pb_map/docs/_map_with_plugin.jsx +5 -5
  10. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +1 -3
  11. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +0 -1
  12. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +3 -8
  13. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md +2 -2
  14. data/app/pb_kits/playbook/pb_table/docs/example.yml +0 -3
  15. data/dist/playbook-doc.js +1 -1
  16. metadata +3 -15
  17. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md +0 -5
  18. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.html.erb +0 -38
  19. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md +0 -3
  20. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.html.erb +0 -15
  21. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx +0 -24
  22. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.md +0 -1
  23. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.html.erb +0 -74
  24. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_rails.md +0 -3
  25. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.html.erb +0 -74
  26. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_rails.md +0 -3
  27. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible.html.erb +0 -47
  28. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_rails.md +0 -2
  29. /data/app/pb_kits/playbook/pb_table/docs/{_table_with_collapsible_react.md → _table_with_collapsible.md} +0 -0
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: a0fcf72f15fec611ffdef65c393b28b96345892a8987de757593f0664c7d38da
4
- data.tar.gz: 0a48735df26cbec4df95d2c1086ee5a0a8daefe077dc2990a13cdf6c9d4900a1
3
+ metadata.gz: 0f7564002e6529ec57b2c1462db23d0b56d5481c2026903ec1a3ebe6a8917c75
4
+ data.tar.gz: ea7eb1e6013521abe71e061c9bcbc846cd359c33a90d1dbcb4f0f949d3ec2815
5
5
  SHA512:
6
- metadata.gz: b6a84dbf9b1ef53e79ee628d152cf34b42f634ae9165395cded05afbbea8be88834edb16f1b87e4a3d4c9a0e3ba545c9e5da4d4a2b97381a8ee168718de5ab60
7
- data.tar.gz: cac4d03797b8f9df6088c01d93e7983cb75ef2010ab6a847e09c804d6384e1d0d8865d3d8298ec7ca0545fea4fca2464ec8b4a8f353b5c217baa744e273ae8a5
6
+ metadata.gz: ce29ec0962c98baed17d1fad42859ba2e40203d9bee9c2b1dcc639c4f2e095f40e38ec83675996ad3e8e44389c1c0ec80f179e94d18bb1c5f6534bc781836e8f
7
+ data.tar.gz: eb522058dbf4f427638257ed8ce836fe814655eb52fadad93e7429bec7e5224cb03bd00552285eefdc76058302d8391710d8c8a28e0458de787393b8c75aaeb7
@@ -1,3 +1,3 @@
1
- `sortControl` is an optional prop that can be used to gain greater control over the sort state of the Advanced Table. Tanstack handles sort itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the sort state so it persists on page reload, set an initial sort state, etc.
1
+ `sortControl` is an optional prop that can be used to gain greater control over the sort state of the Advanced Table. Tanstack handles sort itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the sort state so it persists on page reload, set an initial sort state, etc.
2
2
 
3
- The sort state must be an object with a single key/value pair, with the key being "desc" and the value being a boolean. The default for sort direction is `desc: true`.
3
+ The sort state must be an object with a single key/value pair, with the key being "desc" and the value being a boolean. The default for sort directino is `desc: true`.
@@ -2,4 +2,4 @@ The `defaultDate`/`default_date` prop has a null or empty string value by defaul
2
2
 
3
3
  If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor). See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
4
4
 
5
- You can leverage the `defaultDate`/`default_date` prop with custom logic in your filter or controller files where the determination of the default value changes based on user interaction. The page can load with an initial default date picker value or placeholder text, then after filter submission save the submitted values as the "new default" (via state or params).
5
+
@@ -6,8 +6,14 @@
6
6
 
7
7
  ] %>
8
8
 
9
- <%= pb_rails("list", props: { enable_drag: true, items: initial_items }) do %>
10
- <% initial_items.each do |item| %>
11
- <%= pb_rails("list/item", props:{drag_id: item[:id]}) do %><%= item[:name] %><% end %>
9
+ <%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
10
+ <%= pb_rails("draggable/draggable_container") do %>
11
+ <%= pb_rails("list", props: {ordered: false}) do %>
12
+ <% initial_items.each do |item| %>
13
+ <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
14
+ <%= pb_rails("list/item") do %><%= item[:name] %><% end %>
15
+ <% end %>
16
+ <% end %>
17
+ <% end %>
12
18
  <% end %>
13
19
  <% end %>
@@ -11,7 +11,6 @@ examples:
11
11
  rails:
12
12
  - draggable_default_rails: Default
13
13
  - draggable_with_list_rails: Draggable with List Kit
14
- - draggable_with_selectable_list_rails: Draggable with SelectableList Kit
15
14
  - draggable_with_cards_rails: Draggable with Cards
16
15
 
17
16
 
@@ -1 +1 @@
1
- For the `subtle` variant, it is recommended that you set the `Separators` prop to `false` to remove the separator lines between the options for a cleaner look.
1
+ For the `subtle` variant, it is recommended that you set the `Separators` prop to `false` to remove the separator lines between the options for a more cleaner look.
@@ -25,12 +25,12 @@ const MapDefault = (props) => {
25
25
  new maplibregl.Marker({
26
26
  color: mapTheme.marker,
27
27
  }).setLngLat(defaultPosition)
28
- .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
28
+ .setPopup(new maplibregl.Popup({closeButton: false}).setHTML('Hello World!')) // add popup
29
29
  .addTo(map);
30
30
 
31
31
  // disable map zoom when using scroll
32
32
  map.scrollZoom.disable();
33
-
33
+
34
34
  //add attributioncontrols
35
35
  map.addControl(new maplibregl.AttributionControl({
36
36
  compact: true
@@ -49,7 +49,7 @@ const MapDefault = (props) => {
49
49
 
50
50
  }, [])
51
51
 
52
- return (
52
+ return (
53
53
  <Map flyTo
54
54
  flyToClick={()=> {handleFlyTo(mapInstance)}}
55
55
  zoomBtns
@@ -63,7 +63,7 @@ return (
63
63
  position: 'absolute',
64
64
  left: 0,
65
65
  right: 0,
66
- top: 0,
66
+ top: 0,
67
67
  bottom: 0,
68
68
  }}
69
69
  />
@@ -25,12 +25,12 @@ const MapWithCustomButton = (props) => {
25
25
  new maplibregl.Marker({
26
26
  color: mapTheme.marker,
27
27
  }).setLngLat(defaultPosition)
28
- .setPopup(new maplibregl.Popup({closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
28
+ .setPopup(new maplibregl.Popup({closeButton: false}).setHTML('Hello World!')) // add popup
29
29
  .addTo(map);
30
30
 
31
31
  // disable map zoom when using scroll
32
32
  map.scrollZoom.disable();
33
-
33
+
34
34
  //add attributioncontrols
35
35
  map.addControl(new maplibregl.AttributionControl({
36
36
  compact: true
@@ -49,8 +49,8 @@ const MapWithCustomButton = (props) => {
49
49
 
50
50
  }, [])
51
51
 
52
- return (
53
- <Map
52
+ return (
53
+ <Map
54
54
  {...props}
55
55
  >
56
56
  <Map.Controls flyTo
@@ -59,10 +59,10 @@ return (
59
59
  zoomInClick={() => {handleZoomIn(mapInstance)}}
60
60
  zoomOutClick={()=> {handleZoomOut(mapInstance)}}
61
61
  >
62
- <MapCustomButton icon="home"
62
+ <MapCustomButton icon="home"
63
63
  onClick={() => alert("button clicked!")}
64
64
  />
65
- <MapCustomButton icon="search"
65
+ <MapCustomButton icon="search"
66
66
  onClick={() => alert("button clicked!")}
67
67
  />
68
68
  </Map.Controls>
@@ -72,7 +72,7 @@ return (
72
72
  position: 'absolute',
73
73
  left: 0,
74
74
  right: 0,
75
- top: 0,
75
+ top: 0,
76
76
  bottom: 0,
77
77
  }}
78
78
  />
@@ -25,7 +25,7 @@ const MapWithPlugin = (props) => {
25
25
  new maplibregl.Marker({
26
26
  color: mapTheme.marker,
27
27
  }).setLngLat(defaultPosition)
28
- .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML(`<h4 class="pb_title_kit_size_4">Hello World!</h4>`)) // add popup
28
+ .setPopup(new maplibregl.Popup({className: 'map_popup', closeButton: false}).setHTML('Hello World!')) // add popup
29
29
  .addTo(map);
30
30
 
31
31
  //add maplibre default zoom controls
@@ -48,7 +48,7 @@ const MapWithPlugin = (props) => {
48
48
  map.addControl(new maplibregl.AttributionControl({
49
49
  compact: true
50
50
  }));
51
-
51
+
52
52
  //set map instance
53
53
  setMapInstance(map)
54
54
  }
@@ -62,8 +62,8 @@ const MapWithPlugin = (props) => {
62
62
  }, [])
63
63
 
64
64
 
65
-
66
- return (
65
+
66
+ return (
67
67
  <Map flyTo
68
68
  flyToClick={()=> {handleFlyTo(mapInstance)}}
69
69
  zoomBtns
@@ -77,7 +77,7 @@ return (
77
77
  position: 'absolute',
78
78
  left: 0,
79
79
  right: 0,
80
- top: 0,
80
+ top: 0,
81
81
  bottom: 0,
82
82
  }}
83
83
  />
@@ -8,12 +8,10 @@ examples:
8
8
  - phone_number_input_validation: Form Validation
9
9
  - phone_number_input_clear_field: Clearing the Input Field
10
10
  - phone_number_input_access_input_element: Accessing the Input Element
11
- - phone_number_input_format: Format as You Type
12
11
 
13
12
  rails:
14
13
  - phone_number_input_default: Default
15
14
  - phone_number_input_preferred_countries: Preferred Countries
16
15
  - phone_number_input_initial_country: Initial Country
17
16
  - phone_number_input_only_countries: Limited Countries
18
- - phone_number_input_validation: Form Validation
19
- - phone_number_input_format: Format as You Type
17
+ - phone_number_input_validation: Form Validation
@@ -5,4 +5,3 @@ export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_
5
5
  export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'
6
6
  export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
7
7
  export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
8
- export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
@@ -29,7 +29,6 @@ const RadioChildren = (props) => {
29
29
  marginBottom="none"
30
30
  minWidth="xs"
31
31
  options={options}
32
- {...props}
33
32
  />
34
33
  </Radio>
35
34
  <Radio
@@ -41,11 +40,10 @@ const RadioChildren = (props) => {
41
40
  value="Typeahead"
42
41
  {...props}
43
42
  >
44
- <Typeahead
43
+ <Typeahead
45
44
  marginBottom="none"
46
45
  minWidth="xs"
47
46
  options={options}
48
- {...props}
49
47
  />
50
48
  </Radio>
51
49
  <Radio
@@ -56,12 +54,9 @@ const RadioChildren = (props) => {
56
54
  value="Typography"
57
55
  {...props}
58
56
  >
59
- <Title
60
- text="Custom Typography"
61
- {...props}
62
- />
57
+ <Title text="Custom Typography" />
63
58
  </Radio>
64
59
  </div>
65
60
  )
66
61
  }
67
- export default RadioChildren
62
+ export default RadioChildren
@@ -1,3 +1,3 @@
1
- The `sticky_left_column` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
1
+ The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
2
2
 
3
- Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `sticky_left_column`.
3
+ Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `stickyLeftColumn`.
@@ -5,8 +5,6 @@ examples:
5
5
  - table_lg: Large
6
6
  - table_sticky: Sticky Header
7
7
  - table_sticky_left_columns: Sticky Left Column
8
- - table_sticky_right_columns: Sticky Right Column
9
- - table_sticky_columns: Sticky Left and Right Columns
10
8
  - table_header: Table Header
11
9
  - table_alignment_row_rails: Row Alignment
12
10
  - table_alignment_column_rails: Cell Alignment
@@ -30,7 +28,6 @@ examples:
30
28
  - table_with_subcomponents_rails: Table with Sub Components (Table Elements)
31
29
  - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
32
30
  - table_outer_padding: Outer Padding
33
- - table_with_collapsible: Table with Collapsible
34
31
 
35
32
  react:
36
33
  - table_sm: Small