playbook_ui 16.1.0.pre.alpha.play277814027 → 16.1.0.pre.rc.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (178) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +2 -12
  3. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +2 -2
  4. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +0 -4
  5. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +0 -33
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md +2 -2
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -2
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -2
  9. data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +1 -51
  10. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +1 -1
  11. data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +0 -34
  12. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -1
  13. data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +0 -19
  14. data/app/pb_kits/playbook/pb_background/docs/example.yml +0 -1
  15. data/app/pb_kits/playbook/pb_background/docs/index.js +0 -1
  16. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +5 -14
  17. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +6 -8
  18. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +0 -6
  19. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +2 -37
  20. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -6
  21. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -4
  22. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +2 -2
  23. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +0 -6
  24. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +0 -94
  25. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +1 -5
  26. data/app/pb_kits/playbook/pb_dropdown/index.js +4 -59
  27. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +0 -3
  28. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +1 -2
  29. data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.tsx +1 -1
  30. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +2 -2
  31. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +9 -16
  32. data/app/pb_kits/playbook/pb_filter/filter.rb +2 -2
  33. data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb +1 -5
  34. data/app/pb_kits/playbook/pb_form/pb_form_validation.js +2 -9
  35. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +5 -5
  36. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +4 -4
  37. data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +0 -4
  38. data/app/pb_kits/playbook/pb_icon/icon.rb +1 -6
  39. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +33 -35
  40. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -1
  41. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx +1 -1
  42. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md +1 -1
  43. data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +0 -1
  44. data/app/pb_kits/playbook/pb_multiple_users/multiple_users.html.erb +7 -51
  45. data/app/pb_kits/playbook/pb_multiple_users/multiple_users.rb +0 -1
  46. data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +5 -20
  47. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx +0 -1
  48. data/app/pb_kits/playbook/pb_passphrase/docs/example.yml +0 -2
  49. data/app/pb_kits/playbook/pb_passphrase/docs/index.js +0 -1
  50. data/app/pb_kits/playbook/pb_passphrase/passphrase.rb +0 -2
  51. data/app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx +1 -30
  52. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +0 -3
  53. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +0 -2
  54. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +0 -1
  55. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +0 -3
  56. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +3 -34
  57. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +6 -33
  58. data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +0 -3
  59. data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +0 -2
  60. data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb +0 -5
  61. data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js +18 -33
  62. data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +11 -39
  63. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb +3 -3
  64. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx +0 -3
  65. data/app/pb_kits/playbook/pb_textarea/docs/example.yml +1 -4
  66. data/app/pb_kits/playbook/pb_textarea/docs/index.js +0 -1
  67. data/app/pb_kits/playbook/pb_textarea/index.ts +5 -12
  68. data/app/pb_kits/playbook/pb_textarea/textarea.html.erb +14 -30
  69. data/app/pb_kits/playbook/pb_textarea/textarea.rb +0 -36
  70. data/app/pb_kits/playbook/pb_textarea/textarea.test.js +1 -18
  71. data/app/pb_kits/playbook/pb_time_picker/_time_picker.tsx +11 -97
  72. data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.jsx +2 -5
  73. data/app/pb_kits/playbook/pb_time_picker/docs/example.yml +0 -2
  74. data/app/pb_kits/playbook/pb_time_picker/docs/index.js +0 -1
  75. data/app/pb_kits/playbook/pb_time_picker/time_picker.rb +0 -3
  76. data/app/pb_kits/playbook/pb_time_picker/time_picker.test.jsx +1 -47
  77. data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +1 -24
  78. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +1 -2
  79. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +1 -4
  80. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.html.erb +1 -1
  81. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.jsx +1 -1
  82. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +0 -4
  83. data/dist/chunks/{_pb_line_graph-BgKF_zz1.js → _pb_line_graph-hxi01lk7.js} +1 -1
  84. data/dist/chunks/_typeahead-BgLnlhzP.js +1 -0
  85. data/dist/chunks/{globalProps-BhVYCqRf.js → globalProps-DgYwLYNx.js} +1 -1
  86. data/dist/chunks/{lib-DD34ZrWL.js → lib-NLxTo8OB.js} +1 -1
  87. data/dist/chunks/vendor.js +3 -3
  88. data/dist/menu.yml +2 -2
  89. data/dist/playbook-rails-react-bindings.js +1 -1
  90. data/dist/playbook-rails.js +1 -1
  91. data/dist/playbook.css +1 -1
  92. data/lib/playbook/align_content.rb +3 -13
  93. data/lib/playbook/align_items.rb +3 -13
  94. data/lib/playbook/align_self.rb +3 -13
  95. data/lib/playbook/display.rb +0 -5
  96. data/lib/playbook/flex.rb +3 -13
  97. data/lib/playbook/flex_direction.rb +3 -13
  98. data/lib/playbook/flex_grow.rb +3 -13
  99. data/lib/playbook/flex_shrink.rb +3 -13
  100. data/lib/playbook/flex_wrap.rb +3 -13
  101. data/lib/playbook/forms/builder/phone_number_field.rb +0 -9
  102. data/lib/playbook/justify_content.rb +3 -13
  103. data/lib/playbook/justify_self.rb +3 -13
  104. data/lib/playbook/order.rb +3 -13
  105. data/lib/playbook/spacing.rb +9 -39
  106. data/lib/playbook/text_align.rb +3 -13
  107. data/lib/playbook/truncate.rb +1 -1
  108. data/lib/playbook/version.rb +2 -2
  109. data/lib/playbook/vertical_align.rb +3 -13
  110. data/lib/playbook/z_index.rb +0 -5
  111. metadata +6 -72
  112. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.jsx +0 -71
  113. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.md +0 -4
  114. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.html.erb +0 -64
  115. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.md +0 -18
  116. data/app/pb_kits/playbook/pb_background/docs/_background_responsive.jsx +0 -30
  117. data/app/pb_kits/playbook/pb_background/docs/_background_responsive.md +0 -1
  118. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md +0 -1
  119. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_rails.md +0 -3
  120. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_react.md +0 -3
  121. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.html.erb +0 -52
  122. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.jsx +0 -72
  123. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.md +0 -5
  124. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height.jsx +0 -33
  125. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.html.erb +0 -20
  126. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.md +0 -8
  127. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_react.md +0 -8
  128. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.html.erb +0 -9
  129. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.jsx +0 -33
  130. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.md +0 -3
  131. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.html.erb +0 -74
  132. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.jsx +0 -87
  133. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.md +0 -3
  134. data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.html.erb +0 -30
  135. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.html.erb +0 -7
  136. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.jsx +0 -24
  137. data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.md +0 -3
  138. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.html.erb +0 -5
  139. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.jsx +0 -14
  140. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.md +0 -3
  141. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx +0 -35
  142. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.md +0 -3
  143. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb +0 -10
  144. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx +0 -21
  145. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md +0 -3
  146. data/app/pb_kits/playbook/pb_table/docs/_sections.yml +0 -68
  147. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md +0 -1
  148. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.html.erb +0 -39
  149. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.md +0 -3
  150. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.html.erb +0 -5
  151. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.jsx +0 -25
  152. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.md +0 -3
  153. data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.html.erb +0 -6
  154. data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.jsx +0 -16
  155. data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.md +0 -3
  156. data/app/pb_kits/playbook/utilities/test/globalProps/borderRadius.test.js +0 -33
  157. data/app/pb_kits/playbook/utilities/test/globalProps/bottom.test.js +0 -60
  158. data/app/pb_kits/playbook/utilities/test/globalProps/cursor.test.js +0 -42
  159. data/app/pb_kits/playbook/utilities/test/globalProps/dark.test.js +0 -33
  160. data/app/pb_kits/playbook/utilities/test/globalProps/gap.test.js +0 -87
  161. data/app/pb_kits/playbook/utilities/test/globalProps/globalProps.integration.test.js +0 -936
  162. data/app/pb_kits/playbook/utilities/test/globalProps/height.test.js +0 -68
  163. data/app/pb_kits/playbook/utilities/test/globalProps/htmlOptions.test.js +0 -510
  164. data/app/pb_kits/playbook/utilities/test/globalProps/left.test.js +0 -60
  165. data/app/pb_kits/playbook/utilities/test/globalProps/lineHeight.test.js +0 -33
  166. data/app/pb_kits/playbook/utilities/test/globalProps/margin.test.js +0 -95
  167. data/app/pb_kits/playbook/utilities/test/globalProps/numberSpacing.test.js +0 -33
  168. data/app/pb_kits/playbook/utilities/test/globalProps/overflow.test.js +0 -68
  169. data/app/pb_kits/playbook/utilities/test/globalProps/padding.test.js +0 -95
  170. data/app/pb_kits/playbook/utilities/test/globalProps/position.test.js +0 -33
  171. data/app/pb_kits/playbook/utilities/test/globalProps/right.test.js +0 -60
  172. data/app/pb_kits/playbook/utilities/test/globalProps/shadow.test.js +0 -33
  173. data/app/pb_kits/playbook/utilities/test/globalProps/textAlign.test.js +0 -41
  174. data/app/pb_kits/playbook/utilities/test/globalProps/top.test.js +0 -60
  175. data/app/pb_kits/playbook/utilities/test/globalProps/verticalAlign.test.js +0 -40
  176. data/app/pb_kits/playbook/utilities/test/globalProps/width.test.js +0 -66
  177. data/app/pb_kits/playbook/utilities/test/globalProps/zIndex.test.js +0 -50
  178. data/dist/chunks/_typeahead-CWA5wlah.js +0 -1
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 16.1.0.pre.alpha.play277814027
4
+ version: 16.1.0.pre.rc.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2026-01-30 00:00:00.000000000 Z
12
+ date: 2026-01-12 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -304,8 +304,6 @@ files:
304
304
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md
305
305
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background.jsx
306
306
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background.md
307
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.jsx
308
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_custom.md
309
307
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.jsx
310
308
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_background_multi.md
311
309
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx
@@ -342,8 +340,6 @@ files:
342
340
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md
343
341
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx
344
342
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.md
345
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.html.erb
346
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading_rails.md
347
343
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.html.erb
348
344
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx
349
345
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading_rails.md
@@ -500,8 +496,6 @@ files:
500
496
  - app/pb_kits/playbook/pb_background/docs/_background_light.md
501
497
  - app/pb_kits/playbook/pb_background/docs/_background_overlay.jsx
502
498
  - app/pb_kits/playbook/pb_background/docs/_background_overlay.md
503
- - app/pb_kits/playbook/pb_background/docs/_background_responsive.jsx
504
- - app/pb_kits/playbook/pb_background/docs/_background_responsive.md
505
499
  - app/pb_kits/playbook/pb_background/docs/_background_size.html.erb
506
500
  - app/pb_kits/playbook/pb_background/docs/_background_size.jsx
507
501
  - app/pb_kits/playbook/pb_background/docs/_background_size.md
@@ -957,7 +951,6 @@ files:
957
951
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb
958
952
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
959
953
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
960
- - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md
961
954
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
962
955
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
963
956
  - app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md
@@ -1313,8 +1306,6 @@ files:
1313
1306
  - app/pb_kits/playbook/pb_dropdown/context/index.tsx
1314
1307
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb
1315
1308
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx
1316
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_rails.md
1317
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection_react.md
1318
1309
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx
1319
1310
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md
1320
1311
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx
@@ -1376,13 +1367,6 @@ files:
1376
1367
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb
1377
1368
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.jsx
1378
1369
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md
1379
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.html.erb
1380
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.jsx
1381
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_clearable.md
1382
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height.jsx
1383
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.html.erb
1384
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.md
1385
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_react.md
1386
1370
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options.jsx
1387
1371
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md
1388
1372
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
@@ -1413,9 +1397,6 @@ files:
1413
1397
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb
1414
1398
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx
1415
1399
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md
1416
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.html.erb
1417
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.jsx
1418
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_placeholder.md
1419
1400
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx
1420
1401
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md
1421
1402
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb
@@ -2111,9 +2092,6 @@ files:
2111
2092
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.md
2112
2093
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb
2113
2094
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx
2114
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.html.erb
2115
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.jsx
2116
- - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_input_display.md
2117
2095
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb
2118
2096
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx
2119
2097
  - app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx
@@ -2165,7 +2143,6 @@ files:
2165
2143
  - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.jsx
2166
2144
  - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size.md
2167
2145
  - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md
2168
- - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.html.erb
2169
2146
  - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx
2170
2147
  - app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md
2171
2148
  - app/pb_kits/playbook/pb_multiple_users/docs/example.yml
@@ -2367,9 +2344,6 @@ files:
2367
2344
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.html.erb
2368
2345
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx
2369
2346
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.md
2370
- - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.html.erb
2371
- - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.jsx
2372
- - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_required_indicator.md
2373
2347
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.html.erb
2374
2348
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.jsx
2375
2349
  - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_strength_change.md
@@ -2572,9 +2546,6 @@ files:
2572
2546
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.html.erb
2573
2547
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.jsx
2574
2548
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_preferred_countries.md
2575
- - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.html.erb
2576
- - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.jsx
2577
- - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_required_indicator.md
2578
2549
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.html.erb
2579
2550
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.jsx
2580
2551
  - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_strict_mode.md
@@ -2763,8 +2734,6 @@ files:
2763
2734
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.jsx
2764
2735
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_min_height.md
2765
2736
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx
2766
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.jsx
2767
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_required_indicator.md
2768
2737
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_simple.jsx
2769
2738
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.jsx
2770
2739
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_sticky.md
@@ -2782,9 +2751,6 @@ files:
2782
2751
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_more_extensions.md
2783
2752
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb
2784
2753
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx
2785
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.html.erb
2786
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.jsx
2787
- - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_required_indicator.md
2788
2754
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb
2789
2755
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx
2790
2756
  - app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.html.erb
@@ -3064,7 +3030,6 @@ files:
3064
3030
  - app/pb_kits/playbook/pb_table/_table.scss
3065
3031
  - app/pb_kits/playbook/pb_table/_table.tsx
3066
3032
  - app/pb_kits/playbook/pb_table/docs/_description.md
3067
- - app/pb_kits/playbook/pb_table/docs/_sections.yml
3068
3033
  - app/pb_kits/playbook/pb_table/docs/_table_action_middle.html.erb
3069
3034
  - app/pb_kits/playbook/pb_table/docs/_table_action_middle.jsx
3070
3035
  - app/pb_kits/playbook/pb_table/docs/_table_action_middle.md
@@ -3310,7 +3275,6 @@ files:
3310
3275
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.jsx
3311
3276
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb
3312
3277
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx
3313
- - app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md
3314
3278
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_default_swift.md
3315
3279
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.html.erb
3316
3280
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_emoji_mask.jsx
@@ -3321,12 +3285,7 @@ files:
3321
3285
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_error_swift.md
3322
3286
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.html.erb
3323
3287
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.jsx
3324
- - app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.html.erb
3325
- - app/pb_kits/playbook/pb_textarea/docs/_textarea_input_options.md
3326
3288
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_props_swift.md
3327
- - app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.html.erb
3328
- - app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.jsx
3329
- - app/pb_kits/playbook/pb_textarea/docs/_textarea_required_indicator.md
3330
3289
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.html.erb
3331
3290
  - app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx
3332
3291
  - app/pb_kits/playbook/pb_textarea/docs/example.yml
@@ -3381,9 +3340,6 @@ files:
3381
3340
  - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.md
3382
3341
  - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.jsx
3383
3342
  - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.md
3384
- - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.html.erb
3385
- - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.jsx
3386
- - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.md
3387
3343
  - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.html.erb
3388
3344
  - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.jsx
3389
3345
  - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_timezone.md
@@ -3847,48 +3803,26 @@ files:
3847
3803
  - app/pb_kits/playbook/utilities/test/globalProps/alignContent.test.js
3848
3804
  - app/pb_kits/playbook/utilities/test/globalProps/alignItems.test.js
3849
3805
  - app/pb_kits/playbook/utilities/test/globalProps/alignSelf.test.js
3850
- - app/pb_kits/playbook/utilities/test/globalProps/borderRadius.test.js
3851
- - app/pb_kits/playbook/utilities/test/globalProps/bottom.test.js
3852
- - app/pb_kits/playbook/utilities/test/globalProps/cursor.test.js
3853
- - app/pb_kits/playbook/utilities/test/globalProps/dark.test.js
3854
3806
  - app/pb_kits/playbook/utilities/test/globalProps/display.test.js
3855
3807
  - app/pb_kits/playbook/utilities/test/globalProps/flex.test.js
3856
3808
  - app/pb_kits/playbook/utilities/test/globalProps/flexDirection.test.js
3857
3809
  - app/pb_kits/playbook/utilities/test/globalProps/flexGrow.test.js
3858
3810
  - app/pb_kits/playbook/utilities/test/globalProps/flexShrink.test.js
3859
3811
  - app/pb_kits/playbook/utilities/test/globalProps/flexWrap.test.js
3860
- - app/pb_kits/playbook/utilities/test/globalProps/gap.test.js
3861
- - app/pb_kits/playbook/utilities/test/globalProps/globalProps.integration.test.js
3862
3812
  - app/pb_kits/playbook/utilities/test/globalProps/globalPropsTestHelper.js
3863
- - app/pb_kits/playbook/utilities/test/globalProps/height.test.js
3864
3813
  - app/pb_kits/playbook/utilities/test/globalProps/hover.test.js
3865
- - app/pb_kits/playbook/utilities/test/globalProps/htmlOptions.test.js
3866
3814
  - app/pb_kits/playbook/utilities/test/globalProps/justifyContent.test.js
3867
3815
  - app/pb_kits/playbook/utilities/test/globalProps/justifySelf.test.js
3868
- - app/pb_kits/playbook/utilities/test/globalProps/left.test.js
3869
- - app/pb_kits/playbook/utilities/test/globalProps/lineHeight.test.js
3870
- - app/pb_kits/playbook/utilities/test/globalProps/margin.test.js
3871
- - app/pb_kits/playbook/utilities/test/globalProps/numberSpacing.test.js
3872
3816
  - app/pb_kits/playbook/utilities/test/globalProps/order.test.js
3873
- - app/pb_kits/playbook/utilities/test/globalProps/overflow.test.js
3874
- - app/pb_kits/playbook/utilities/test/globalProps/padding.test.js
3875
- - app/pb_kits/playbook/utilities/test/globalProps/position.test.js
3876
- - app/pb_kits/playbook/utilities/test/globalProps/right.test.js
3877
- - app/pb_kits/playbook/utilities/test/globalProps/shadow.test.js
3878
- - app/pb_kits/playbook/utilities/test/globalProps/textAlign.test.js
3879
- - app/pb_kits/playbook/utilities/test/globalProps/top.test.js
3880
3817
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
3881
- - app/pb_kits/playbook/utilities/test/globalProps/verticalAlign.test.js
3882
- - app/pb_kits/playbook/utilities/test/globalProps/width.test.js
3883
- - app/pb_kits/playbook/utilities/test/globalProps/zIndex.test.js
3884
3818
  - app/pb_kits/playbook/utilities/text.ts
3885
3819
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
3886
- - dist/chunks/_pb_line_graph-BgKF_zz1.js
3887
- - dist/chunks/_typeahead-CWA5wlah.js
3820
+ - dist/chunks/_pb_line_graph-hxi01lk7.js
3821
+ - dist/chunks/_typeahead-BgLnlhzP.js
3888
3822
  - dist/chunks/componentRegistry-DzmmLR2x.js
3889
- - dist/chunks/globalProps-BhVYCqRf.js
3823
+ - dist/chunks/globalProps-DgYwLYNx.js
3890
3824
  - dist/chunks/lazysizes-B7xYodB-.js
3891
- - dist/chunks/lib-DD34ZrWL.js
3825
+ - dist/chunks/lib-NLxTo8OB.js
3892
3826
  - dist/chunks/vendor.js
3893
3827
  - dist/menu.yml
3894
3828
  - dist/playbook-rails-react-bindings.js
@@ -1,71 +0,0 @@
1
- import React from "react"
2
- import AdvancedTable from '../_advanced_table'
3
- import colors from '../../tokens/exports/_colors.module.scss'
4
- import MOCK_DATA from "./advanced_table_mock_data.json"
5
- import Flex from '../../pb_flex/_flex'
6
- import Title from '../../pb_title/_title'
7
- import Body from '../../pb_body/_body'
8
-
9
-
10
- const AdvancedTableColumnStylingBackgroundCustom = (props) => {
11
- const columnDefinitions = [
12
- {
13
- accessor: "year",
14
- label: "Year",
15
- cellAccessors: ["quarter", "month", "day"],
16
- customRenderer: (row, value) => (
17
- <Flex flexDirection="column">
18
- <Title size={4}
19
- text={value}
20
- />
21
- <Body text="lorem ipsum" />
22
- <Body text="lorem ipsum" />
23
- </Flex>
24
- ),
25
- },
26
- {
27
- accessor: "newEnrollments",
28
- label: "New Enrollments",
29
- columnStyling:{
30
- cellBackgroundColor: (row) => row.original.newEnrollments > 15 ? colors.success_subtle : colors.error_subtle,
31
- fontColor: (row) => row.original.newEnrollments > 15 ? colors.success : colors.error,
32
- },
33
- },
34
- {
35
- accessor: "scheduledMeetings",
36
- label: "Scheduled Meetings",
37
- columnStyling:{
38
- cellBackgroundColor: (row) => row.original.scheduledMeetings >= 15 ? colors.info_subtle : colors.warning_subtle
39
- },
40
- },
41
- {
42
- accessor: "attendanceRate",
43
- label: "Attendance Rate",
44
- columnStyling:{cellBackgroundColor: colors.info, headerBackgroundColor: colors.info, fontColor: colors.white, headerFontColor: colors.white},
45
- },
46
- {
47
- accessor: "completedClasses",
48
- label: "Completed Classes",
49
- },
50
- {
51
- accessor: "classCompletionRate",
52
- label: "Class Completion Rate",
53
- },
54
- {
55
- accessor: "graduatedStudents",
56
- label: "Graduated Students",
57
- },
58
- ]
59
-
60
- return (
61
- <div>
62
- <AdvancedTable
63
- columnDefinitions={columnDefinitions}
64
- tableData={MOCK_DATA}
65
- {...props}
66
- />
67
- </div>
68
- )
69
- }
70
-
71
- export default AdvancedTableColumnStylingBackgroundCustom
@@ -1,4 +0,0 @@
1
- `cellBackgroundColor` and `fontColor` can also accept functions for conditional styling based on row data. The function receives the row object and returns a color value.
2
-
3
- See the code snippet below for more details.
4
-
@@ -1,64 +0,0 @@
1
- <% column_definitions = [
2
- {
3
- accessor: "year",
4
- label: "Year",
5
- cellAccessors: ["quarter", "month", "day"],
6
- },
7
- {
8
- accessor: "newEnrollments",
9
- label: "New Enrollments",
10
- },
11
- {
12
- accessor: "scheduledMeetings",
13
- label: "Scheduled Meetings",
14
- },
15
- {
16
- accessor: "attendanceRate",
17
- label: "Attendance Rate",
18
- },
19
- {
20
- accessor: "completedClasses",
21
- label: "Completed Classes",
22
- },
23
- {
24
- accessor: "classCompletionRate",
25
- label: "Class Completion Rate",
26
- },
27
- {
28
- accessor: "graduatedStudents",
29
- label: "Graduated Students",
30
- }
31
- ] %>
32
-
33
- <%= pb_rails("caption", props: { text: "Inline Row Loading - Demonstrated in Row 1 (Rows 2 and 3 have data)" }) %>
34
-
35
- <%= pb_rails("advanced_table", props: {
36
- id: "inline-loading-table-1",
37
- table_data: @table_data_inline_loading,
38
- column_definitions: column_definitions,
39
- enable_toggle_expansion: "all",
40
- inline_row_loading: true,
41
- margin_bottom: "md"
42
- }) %>
43
-
44
- <%= pb_rails("caption", props: { text: "Inline Row Loading with No Subrow Data - All Rows Display Inline Row Loading and the Toggle All Button is not rendered" }) %>
45
-
46
- <%= pb_rails("advanced_table", props: {
47
- id: "inline-loading-table-2",
48
- table_data: @table_data_inline_loading_empty_children,
49
- column_definitions: column_definitions,
50
- enable_toggle_expansion: "all",
51
- inline_row_loading: true,
52
- margin_bottom: "md"
53
- }) %>
54
-
55
- <%= pb_rails("caption", props: { text: "Inline Row Loading and Persist Toggle Expansion Button with No Subrow Data - All Rows Display Inline Row Loading and the Toggle All Button is rendered" }) %>
56
-
57
- <%= pb_rails("advanced_table", props: {
58
- id: "inline-loading-table-3",
59
- table_data: @table_data_inline_loading_empty_children,
60
- column_definitions: column_definitions,
61
- enable_toggle_expansion: "all",
62
- inline_row_loading: true,
63
- persist_toggle_expansion_button: true
64
- }) %>
@@ -1,18 +0,0 @@
1
- ### inline_row_loading
2
- By default, the kit assumes that the initial dataset is complete, rendering expansion controls only when children are present. If, however, you want to implement lazy-loading patterns where children are fetched only when a parent is expanded, use the `inline_row_loading` prop.
3
-
4
- When `inline_row_loading` is set to `true`:
5
- - Expansion controls are rendered for rows with empty `children` arrays (you must pass `children: []` to any row that will have children loaded later)
6
- - When such a row is expanded, an inline loading indicator appears until the child data is loaded
7
- - This enables lazy-loading patterns without one-off hacks
8
-
9
- In the first table above, row "2021" has an empty `children` array. Click to expand it and see the inline loading state. Rows 2 and 3 have actual child data.
10
-
11
- This prop is set to `false` by default.
12
-
13
- ### persist_toggle_expansion_button
14
- The `persist_toggle_expansion_button` is a boolean prop that renders the toggle-all icon in the top left header cell for complex datasets with empty `children` arrays and advanced querying logic explained in the preceding doc example. Your logic may require an additional query helper file to update data specifically from requerying via toggle all buttons.
15
-
16
- In the second and third Advanced Tables in this code example, all 3 rows have empty children arrays. The second Advanced Table demonstrates that the toggle all button does not render (prior to an initial row expansion) without `persist_toggle_expansion_button` in place. The third Advanced Table shows the toggle all button due to `persist_toggle_expansion_button`.
17
-
18
- This prop is set to `false` by default and should only be used in conjunction with `inline_row_loading`.
@@ -1,30 +0,0 @@
1
- import React from 'react'
2
- import Background from '../../pb_background/_background'
3
-
4
- const BackgroundResponsive = (props) => (
5
- <>
6
- <Background
7
- alt="colorful background"
8
- backgroundColor={{ xs: "primary", sm: "warning", md: "success", lg: "error", xl: "category_1" }}
9
- className="background lazyload"
10
- padding="xl"
11
- {...props}
12
- />
13
- <br/>
14
- <Background
15
- alt="colorful background"
16
- className="background lazyload"
17
- imageUrl={{
18
- xs: "https://unsplash.it/500/400/?image=633",
19
- sm: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80",
20
- md: "https://unsplash.it/500/400/?image=633",
21
- lg: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80",
22
- xl: "https://unsplash.it/500/400/?image=633"
23
- }}
24
- padding="xl"
25
- {...props}
26
- />
27
- </>
28
- )
29
-
30
- export default BackgroundResponsive
@@ -1 +0,0 @@
1
- The `backgroundColor`, `backgroundSize`, `backgroundPosition`, `backgroundRepeat`, and `imageUrl` props support responsive sizes. To use them, pass an object to the prop containing your values relative to responsive break points. To test this here, resize your browser window to responsively change these Backgrounds' `backgroundColor` and `imageUrl`.
@@ -1 +0,0 @@
1
- `pickerId`/`picker_id` is a **required prop** to instantiate the Date Picker. The presence of `pickerId`/`picker_id` in your Date Picker also associates the label with the input, providing the ability to focus the Date Picker by clicking the label.
@@ -1,3 +0,0 @@
1
- The `blank_selection` prop adds a blank option at the top of the dropdown options list. This allows users to explicitly clear their selection by choosing the blank option.
2
-
3
- The blank selection option appears as the first item in the dropdown and has an empty value (`id: ""`, `value: ""`). When selected, it effectively clears the dropdown selection.
@@ -1,3 +0,0 @@
1
- The `blankSelection` prop adds a blank option at the top of the dropdown options list. This allows users to explicitly clear their selection by choosing the blank option.
2
-
3
- The blank selection option appears as the first item in the dropdown and has an empty value (`id: ""`, `value: ""`). When selected, it effectively clears the dropdown selection.
@@ -1,52 +0,0 @@
1
- <%
2
- options = [
3
- { label: 'United States', value: 'unitedStates', id: 'us' },
4
- { label: 'Canada', value: 'canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'pakistan', id: 'pk' },
6
- ]
7
- %>
8
-
9
- <%= pb_rails("dropdown", props: {
10
- id: "date-range-quickpick-reset-closeable",
11
- label: "Quick Pick",
12
- variant: "quickpick",
13
- clearable: false
14
- }) %>
15
-
16
- <%= pb_rails("button", props: {
17
- margin_y: "md",
18
- text: "Reset",
19
- html_options: {
20
- onclick: "handleReset()"
21
- }
22
- }) %>
23
-
24
- <%= pb_rails("dropdown", props: {
25
- id: "closeable-default",
26
- options: options,
27
- clearable: false,
28
- default_value: options.last,
29
- margin_bottom: "md",
30
- label: "Default"
31
- }) %>
32
-
33
- <%= pb_rails("dropdown", props: {
34
- id: "closeable-subtle",
35
- options: options,
36
- clearable: false,
37
- default_value: options.second,
38
- variant: "subtle",
39
- separators: false,
40
- label: "Subtle"
41
- }) %>
42
-
43
- <script>
44
- function handleReset() {
45
- const dropdown = document.querySelector("#date-range-quickpick-reset-closeable[data-pb-dropdown]");
46
- const instance = dropdown?._pbDropdownInstance;
47
-
48
- if (instance) {
49
- instance.clearSelection();
50
- }
51
- }
52
- </script>
@@ -1,72 +0,0 @@
1
- import React, { useRef } from 'react'
2
-
3
- import Button from '../../pb_button/_button'
4
- import Dropdown from '../../pb_dropdown/_dropdown'
5
-
6
- const DropdownWithClearable = (props) => {
7
- const dropdownRef = useRef(null)
8
-
9
- const options = [
10
- {
11
- label: "United States",
12
- value: "unitedStates",
13
- id: "us"
14
- },
15
- {
16
- label: "Canada",
17
- value: "canada",
18
- id: "ca"
19
- },
20
- {
21
- label: "Pakistan",
22
- value: "pakistan",
23
- id: "pk"
24
- }
25
- ]
26
-
27
- const handleReset = () => {
28
- if (dropdownRef.current) {
29
- dropdownRef.current.clearSelected()
30
- }
31
- }
32
-
33
- return (
34
- <>
35
- <Dropdown
36
- clearable={false}
37
- label="Quick Pick"
38
- onSelect={() => {}}
39
- ref={dropdownRef}
40
- variant="quickpick"
41
- {...props}
42
- />
43
- <Button
44
- marginY="md"
45
- onClick={handleReset}
46
- text="Reset"
47
- />
48
-
49
- <Dropdown
50
- clearable={false}
51
- defaultValue={options[options.length - 1]}
52
- label="Default"
53
- marginBottom="md"
54
- options={options}
55
- variant="default"
56
- {...props}
57
- />
58
-
59
- <Dropdown
60
- clearable={false}
61
- defaultValue={options[1]}
62
- label="Subtle"
63
- options={options}
64
- separators={false}
65
- variant="subtle"
66
- {...props}
67
- />
68
- </>
69
- )
70
- }
71
-
72
- export default DropdownWithClearable
@@ -1,5 +0,0 @@
1
- The `clearable` prop controls whether the clear (X) button appears in the dropdown. When set to `false`, the clear button is hidden.
2
-
3
- This is useful in two scenarios:
4
- 1. When you have a separate "Reset" or "Defaults" button that handles clearing the selection (as shown in the Quick Pick example)
5
- 2. When you don't want to provide any way to clear the selection (as shown in the Default and Subtle examples)
@@ -1,33 +0,0 @@
1
- import React from 'react'
2
- import Dropdown from '../../pb_dropdown/_dropdown'
3
-
4
- const DropdownWithConstrainHeight = (props) => {
5
- // Create a long list of options to demonstrate height constraint
6
- const options = Array.from({ length: 30 }, (_, i) => ({
7
- label: `Option ${i + 1}`,
8
- value: `option_${i + 1}`,
9
- id: `opt_${i + 1}`
10
- }))
11
-
12
- return (
13
- <>
14
- <Dropdown
15
- data={{ testid: "dropdown-no-constrain" }}
16
- label="Without Constrain Height (Default)"
17
- marginBottom="md"
18
- options={options}
19
- {...props}
20
- />
21
-
22
- <Dropdown
23
- constrainHeight
24
- data={{ testid: "dropdown-constrain" }}
25
- label="With Constrain Height"
26
- options={options}
27
- {...props}
28
- />
29
- </>
30
- )
31
- }
32
-
33
- export default DropdownWithConstrainHeight
@@ -1,20 +0,0 @@
1
- <%
2
- # Create a long list of options to demonstrate height constraint
3
- options = (1..30).map do |i|
4
- { label: "Option #{i}", value: "option_#{i}", id: "opt_#{i}" }
5
- end
6
- %>
7
-
8
- <%= pb_rails("dropdown", props: {
9
- id: "dropdown-no-constrain",
10
- options: options,
11
- label: "Without Constrain Height (Default)",
12
- margin_bottom: "md"
13
- }) %>
14
-
15
- <%= pb_rails("dropdown", props: {
16
- id: "dropdown-constrain",
17
- options: options,
18
- constrain_height: true,
19
- label: "With Constrain Height"
20
- }) %>
@@ -1,8 +0,0 @@
1
- The `constrain_height` prop limits the dropdown container height to 18em and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.
2
-
3
- When `constrain_height` is `true`, the dropdown will:
4
- - Have a maximum height of 18em
5
- - Show a scrollbar when content exceeds the max height
6
- - Prevent the dropdown from extending beyond the viewport
7
-
8
- This is particularly useful for dropdowns with many options, such as long lists or quickpick variants with many date range options.
@@ -1,8 +0,0 @@
1
- The `constrainHeight` prop limits the dropdown container height to 18em and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.
2
-
3
- When `constrainHeight` is `true`, the dropdown will:
4
- - Have a maximum height of 18em
5
- - Show a scrollbar when content exceeds the max height
6
- - Prevent the dropdown from extending beyond the viewport
7
-
8
- This is particularly useful for dropdowns with many options, such as long lists or quickpick variants with many date range options.