playbook_ui 14.18.0 → 14.19.0.pre.alpha.PLAY21297675

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 (217) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +0 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx +11 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/TableActionBar.tsx +148 -15
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +20 -3
  6. data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts +23 -13
  7. data/app/pb_kits/playbook/pb_advanced_table/Utilities/VisibilityTree.ts +47 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +313 -21
  9. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +12 -3
  10. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb +6 -1
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md +0 -6
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.jsx +80 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color.md +3 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.html.erb +58 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_border_color_rails.md +3 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.jsx +57 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.md +4 -0
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.jsx +62 -0
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.md +1 -0
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_multi.jsx +82 -0
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_multi.md +1 -0
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.jsx +65 -0
  23. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.md +1 -0
  24. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md +5 -1
  25. data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_no_subrows.jsx → _advanced_table_selectable_rows_no_subrows_react.jsx} +2 -2
  26. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md +3 -2
  27. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +10 -5
  28. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +7 -2
  29. data/app/pb_kits/playbook/pb_advanced_table/flat_advanced_table.js +106 -0
  30. data/app/pb_kits/playbook/pb_advanced_table/index.js +228 -11
  31. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/advanced_table_sticky_mixin.scss +1 -0
  32. data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +9 -1
  33. data/app/pb_kits/playbook/pb_advanced_table/table_header.rb +0 -3
  34. data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +1 -2
  35. data/app/pb_kits/playbook/pb_avatar/_avatar.scss +4 -0
  36. data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +3 -0
  37. data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +3 -3
  38. data/app/pb_kits/playbook/pb_avatar/avatar.rb +2 -0
  39. data/app/pb_kits/playbook/pb_avatar/avatar.test.js +18 -0
  40. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.html.erb +5 -0
  41. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.jsx +16 -0
  42. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -0
  43. data/app/pb_kits/playbook/pb_avatar/docs/index.js +1 -0
  44. data/app/pb_kits/playbook/pb_card/card.html.erb +1 -1
  45. data/app/pb_kits/playbook/pb_card/card.rb +12 -0
  46. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +1 -1
  47. data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +2 -2
  48. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +53 -0
  49. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +2 -2
  50. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +1 -1
  51. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +1 -1
  52. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +1 -1
  53. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb +1 -1
  54. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +1 -1
  55. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +1 -1
  56. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +1 -1
  57. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +1 -1
  58. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
  59. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +2 -2
  60. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
  61. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
  62. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +1 -1
  63. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +1 -1
  64. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -3
  65. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
  66. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +12 -0
  67. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +12 -0
  68. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +50 -1
  69. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +2 -2
  70. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +4 -1
  71. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +4 -0
  72. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  73. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +5 -1
  74. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +34 -0
  75. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +14 -0
  76. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +20 -0
  77. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +14 -0
  78. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  79. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  80. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +10 -0
  81. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +64 -0
  82. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors.html.erb +55 -0
  83. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_colors_rails.md +1 -0
  84. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.html.erb +55 -0
  85. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_rails.md +5 -0
  86. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_rails.md +5 -0
  87. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx +59 -0
  88. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md +1 -0
  89. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +4 -1
  90. data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
  91. data/app/pb_kits/playbook/pb_draggable/draggable.rb +9 -1
  92. data/app/pb_kits/playbook/pb_draggable/draggable_container.rb +11 -1
  93. data/app/pb_kits/playbook/pb_draggable/draggable_item.rb +11 -1
  94. data/app/pb_kits/playbook/pb_draggable/index.js +141 -142
  95. data/app/pb_kits/playbook/pb_draggable/subcomponents/DraggableItem.tsx +33 -5
  96. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +5 -0
  97. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +5 -16
  98. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +5 -2
  99. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -1
  100. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +28 -0
  101. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +17 -64
  102. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +58 -0
  103. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_autocomplete_and_custom_display.jsx → _dropdown_with_autocomplete_with_subcomponents.jsx} +11 -25
  104. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md +1 -0
  105. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.md +1 -0
  106. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +61 -0
  107. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md +2 -0
  108. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +52 -0
  109. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.md +2 -0
  110. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +7 -4
  111. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -2
  112. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +2 -2
  113. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +4 -0
  114. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +45 -1
  115. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +10 -0
  116. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +3 -0
  117. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +12 -2
  118. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb +3 -1
  119. data/app/pb_kits/playbook/pb_dropdown/index.js +57 -0
  120. data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js +26 -0
  121. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +3 -4
  122. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +4 -4
  123. data/app/pb_kits/playbook/pb_empty_state/_empty_state.scss +8 -1
  124. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.html.erb +27 -0
  125. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb +7 -0
  126. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb +12 -0
  127. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb +23 -0
  128. data/app/pb_kits/playbook/pb_empty_state/docs/example.yml +5 -1
  129. data/app/pb_kits/playbook/pb_empty_state/empty_state.html.erb +19 -0
  130. data/app/pb_kits/playbook/pb_empty_state/empty_state.rb +123 -0
  131. data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.html.erb +41 -0
  132. data/app/pb_kits/playbook/pb_filter/docs/_filter_within_turbo_frames.md +1 -0
  133. data/app/pb_kits/playbook/pb_filter/docs/example.yml +1 -0
  134. data/app/pb_kits/playbook/pb_form_group/_error_state_mixin.scss +22 -18
  135. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +0 -1
  136. data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +3 -1
  137. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.jsx +52 -0
  138. data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_pb_styles.md +1 -0
  139. data/app/pb_kits/playbook/pb_line_graph/docs/example.yml +1 -0
  140. data/app/pb_kits/playbook/pb_line_graph/docs/index.js +1 -0
  141. data/app/pb_kits/playbook/pb_line_graph/lineGraphTheme.ts +110 -0
  142. data/app/pb_kits/playbook/pb_message/_message.tsx +3 -0
  143. data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.html.erb +9 -0
  144. data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.jsx +21 -0
  145. data/app/pb_kits/playbook/pb_message/docs/example.yml +2 -0
  146. data/app/pb_kits/playbook/pb_message/docs/index.js +1 -0
  147. data/app/pb_kits/playbook/pb_message/message.html.erb +2 -1
  148. data/app/pb_kits/playbook/pb_message/message.rb +1 -0
  149. data/app/pb_kits/playbook/pb_overlay/_overlay.scss +2 -1
  150. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +1 -1
  151. data/app/pb_kits/playbook/pb_overlay/subcomponents/_overlay_token.tsx +5 -4
  152. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +13 -0
  153. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +3 -1
  154. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.html.erb +10 -0
  155. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.jsx +20 -0
  156. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_country_search.md +1 -0
  157. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +8 -1
  158. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +2 -0
  159. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
  160. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +3 -0
  161. data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +19 -0
  162. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.html.erb +46 -0
  163. data/app/pb_kits/playbook/pb_popover/docs/_popover_append_to.md +1 -0
  164. data/app/pb_kits/playbook/pb_popover/docs/example.yml +1 -0
  165. data/app/pb_kits/playbook/pb_popover/index.ts +13 -1
  166. data/app/pb_kits/playbook/pb_popover/popover.rb +2 -0
  167. data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +2 -2
  168. data/app/pb_kits/playbook/pb_select/_select.scss +10 -0
  169. data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +1 -1
  170. data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +7 -2
  171. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +7 -7
  172. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +5 -5
  173. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +1 -1
  174. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +9 -1
  175. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +5 -1
  176. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +7 -1
  177. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb +8 -1
  178. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +6 -2
  179. data/app/pb_kits/playbook/pb_user/_user.tsx +3 -0
  180. data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.html.erb +6 -0
  181. data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.jsx +16 -0
  182. data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
  183. data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
  184. data/app/pb_kits/playbook/pb_user/user.html.erb +2 -1
  185. data/app/pb_kits/playbook/pb_user/user.rb +1 -0
  186. data/dist/chunks/_typeahead-BPSIWtFT.js +22 -0
  187. data/dist/chunks/_weekday_stacked-BeuPAmxG.js +45 -0
  188. data/dist/chunks/lazysizes-B7xYodB-.js +1 -0
  189. data/dist/chunks/lib-B20MXZcW.js +29 -0
  190. data/dist/chunks/{pb_form_validation-BRjyJrKh.js → pb_form_validation-WWvUXPKD.js} +1 -1
  191. data/dist/chunks/vendor.js +1 -1
  192. data/dist/menu.yml +6 -14
  193. data/dist/playbook-doc.js +2 -2
  194. data/dist/playbook-rails-react-bindings.js +1 -1
  195. data/dist/playbook-rails.js +1 -1
  196. data/dist/playbook.css +1 -1
  197. data/lib/playbook/version.rb +2 -2
  198. metadata +75 -24
  199. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +0 -1
  200. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +0 -79
  201. data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.scss +0 -3
  202. data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx +0 -72
  203. data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +0 -53
  204. data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +0 -7
  205. data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +0 -1
  206. data/app/pb_kits/playbook/pb_gantt_chart/gantt_chart.test.jsx +0 -19
  207. data/dist/chunks/_typeahead-C_FX7o_S.js +0 -22
  208. data/dist/chunks/_weekday_stacked-B4RLTeDo.js +0 -45
  209. data/dist/chunks/lazysizes-DHz07jlL.js +0 -1
  210. data/dist/chunks/lib-ySl8uEpT.js +0 -29
  211. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_react.md → _advanced_table_selectable_rows.md} +0 -0
  212. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_no_subrows.html.erb → _advanced_table_selectable_rows_no_subrows_rails.html.erb} +0 -0
  213. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows.html.erb → _advanced_table_selectable_rows_rails.html.erb} +0 -0
  214. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_colors.md → _draggable_drop_zones_colors_react.md} +0 -0
  215. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_line.md → _draggable_drop_zones_line_react.md} +0 -0
  216. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones.md → _draggable_drop_zones_react.md} +0 -0
  217. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_event_listeners.md → _draggable_event_listeners_rails.md} +0 -0
@@ -8,7 +8,7 @@
8
8
  align: "center",
9
9
  border_radius:"lg",
10
10
  classname: object.trigger_wrapper_classes,
11
- cursor: "pointer",
11
+ cursor: object.autocomplete ? "text" : "pointer",
12
12
  justify: "between",
13
13
  padding_x:"sm",
14
14
  padding_y:"xs",
@@ -24,7 +24,17 @@
24
24
  <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
25
25
  <% end %>
26
26
  <% else %>
27
- <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
27
+ <% if object.autocomplete %>
28
+ <input
29
+ data-dropdown-autocomplete
30
+ class="dropdown_input"
31
+ type="text"
32
+ placeholder="<%= object.placeholder || 'Select…' %>"
33
+ autocomplete="off"
34
+ />
35
+ <% else %>
36
+ <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
37
+ <% end %>
28
38
  <% end %>
29
39
  <% end %>
30
40
  <% end %>
@@ -9,6 +9,8 @@ module Playbook
9
9
  default: ""
10
10
  prop :placeholder, type: Playbook::Props::String
11
11
  prop :custom_display
12
+ prop :autocomplete, type: Playbook::Props::Boolean,
13
+ default: false
12
14
 
13
15
  def data
14
16
  Hash(prop(:data)).merge(dropdown_trigger: true, dropdown_placeholder: default_display_placeholder)
@@ -23,7 +25,7 @@ module Playbook
23
25
  end
24
26
 
25
27
  def trigger_wrapper_classes
26
- generate_classname("dropdown_trigger_wrapper", "select_only")
28
+ generate_classname("dropdown_trigger_wrapper", ("select_only" unless autocomplete))
27
29
  end
28
30
  end
29
31
  end
@@ -11,6 +11,8 @@ const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
11
11
  const DROPDOWN_TRIGGER_DISPLAY = "#dropdown_trigger_display";
12
12
  const DROPDOWN_PLACEHOLDER = "[data-dropdown-placeholder]";
13
13
  const DROPDOWN_INPUT = "#dropdown-selected-option";
14
+ const SEARCH_INPUT_SELECTOR = "[data-dropdown-autocomplete]";
15
+ const SEARCH_BAR_SELECTOR = "[data-dropdown-search]";
14
16
 
15
17
  export default class PbDropdown extends PbEnhancedElement {
16
18
  static get selector() {
@@ -25,9 +27,11 @@ export default class PbDropdown extends PbEnhancedElement {
25
27
  this.keyboardHandler = new PbDropdownKeyboard(this);
26
28
  this.setDefaultValue();
27
29
  this.bindEventListeners();
30
+ this.bindSearchInput();
28
31
  this.updateArrowDisplay(false);
29
32
  this.handleFormValidation();
30
33
  this.handleFormReset();
34
+ this.bindSearchBar();
31
35
  }
32
36
 
33
37
  bindEventListeners() {
@@ -45,6 +49,53 @@ export default class PbDropdown extends PbEnhancedElement {
45
49
  );
46
50
  }
47
51
 
52
+ bindSearchBar() {
53
+ this.searchBar = this.element.querySelector(SEARCH_BAR_SELECTOR);
54
+ if (!this.searchBar) return;
55
+
56
+ this.searchBar.addEventListener("input", (e) =>
57
+ this.handleSearch(e.target.value)
58
+ );
59
+ }
60
+
61
+ bindSearchInput() {
62
+ this.searchInput = this.element.querySelector(SEARCH_INPUT_SELECTOR);
63
+ if (!this.searchInput) return;
64
+
65
+ // Focus the input when anyone clicks the wrapper
66
+ this.element
67
+ .querySelector(TRIGGER_SELECTOR)
68
+ ?.addEventListener("click", () => this.searchInput.focus());
69
+
70
+ // Live filter
71
+ this.searchInput.addEventListener("input", (e) =>
72
+ this.handleSearch(e.target.value)
73
+ );
74
+ }
75
+
76
+ handleSearch(term = "") {
77
+ const lcTerm = term.toLowerCase();
78
+ this.element.querySelectorAll(OPTION_SELECTOR).forEach((opt) => {
79
+ const label = JSON.parse(opt.dataset.dropdownOptionLabel).label
80
+ .toString()
81
+ .toLowerCase();
82
+
83
+ // hide or show option
84
+ const match = label.includes(lcTerm);
85
+ opt.style.display = match ? "" : "none";
86
+ });
87
+
88
+ if (this.target.classList.contains("open")) {
89
+ const el = this.target;
90
+ el.style.height = "auto";
91
+ requestAnimationFrame(() => {
92
+ const newHeight = el.scrollHeight + "px";
93
+ el.offsetHeight; // force reflow
94
+ el.style.height = newHeight;
95
+ });
96
+ }
97
+ }
98
+
48
99
  handleOptionClick(event) {
49
100
  const option = event.target.closest(OPTION_SELECTOR);
50
101
  const hiddenInput = this.element.querySelector(DROPDOWN_INPUT);
@@ -59,6 +110,7 @@ export default class PbDropdown extends PbEnhancedElement {
59
110
  }
60
111
 
61
112
  handleDocumentClick(event) {
113
+ if (event.target.closest(SEARCH_BAR_SELECTOR)) return;
62
114
  if (this.isClickOutside(event) && this.target.classList.contains("open")) {
63
115
  this.hideElement(this.target);
64
116
  this.updateArrowDisplay(false);
@@ -99,6 +151,11 @@ export default class PbDropdown extends PbEnhancedElement {
99
151
  }
100
152
  }
101
153
 
154
+ const autocompleteInput = this.element.querySelector(SEARCH_INPUT_SELECTOR);
155
+ if (autocompleteInput){
156
+ autocompleteInput.value = JSON.parse(value).label;
157
+ }
158
+
102
159
  const customTrigger = this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);
103
160
  if (customTrigger) {
104
161
  if (this.target.classList.contains("open")) {
@@ -1,4 +1,6 @@
1
1
  const OPTION_SELECTOR = "[data-dropdown-option-label]";
2
+ const SEARCH_INPUT_SELECTOR = "[data-dropdown-autocomplete]";
3
+
2
4
  export class PbDropdownKeyboard {
3
5
  constructor(dropdown) {
4
6
  this.dropdown = dropdown;
@@ -7,6 +9,9 @@ export class PbDropdownKeyboard {
7
9
  this.dropdownElement.querySelectorAll(OPTION_SELECTOR)
8
10
  );
9
11
  this.focusedOptionIndex = -1;
12
+ this.searchInput = this.dropdownElement.querySelector(
13
+ SEARCH_INPUT_SELECTOR
14
+ );
10
15
  this.init();
11
16
  }
12
17
 
@@ -15,6 +20,18 @@ export class PbDropdownKeyboard {
15
20
  "keydown",
16
21
  this.handleKeyDown.bind(this)
17
22
  );
23
+ if (this.searchInput) {
24
+ this.searchInput.addEventListener("input", () =>
25
+ this.openDropdownIfClosed()
26
+ );
27
+ }
28
+ }
29
+
30
+ openDropdownIfClosed() {
31
+ if (!this.dropdown.target.classList.contains("open")) {
32
+ this.dropdown.showElement(this.dropdown.target);
33
+ this.dropdown.updateArrowDisplay(true);
34
+ }
18
35
  }
19
36
 
20
37
  handleKeyDown(event) {
@@ -50,6 +67,15 @@ export class PbDropdownKeyboard {
50
67
  this.dropdown.updateArrowDisplay(false);
51
68
  this.resetFocus();
52
69
  break;
70
+ case "Backspace":
71
+ if (this.searchInput) {
72
+ setTimeout(() => {
73
+ if (this.searchInput.value.trim() === "") {
74
+ this.dropdown.resetDropdownValue();
75
+ }
76
+ }, 0);
77
+ }
78
+ break;
53
79
  default:
54
80
  break;
55
81
  }
@@ -6,7 +6,7 @@ import {
6
6
  buildDataProps,
7
7
  buildHtmlProps
8
8
  } from "../../utilities/props";
9
- import { globalProps } from "../../utilities/globalProps";
9
+ import { globalProps, GlobalProps } from "../../utilities/globalProps";
10
10
 
11
11
  import DropdownContext from "../context";
12
12
 
@@ -24,7 +24,7 @@ type DropdownContainerProps = {
24
24
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
25
25
  id?: string;
26
26
  searchbar?: boolean;
27
- };
27
+ } & GlobalProps;
28
28
 
29
29
  const DropdownContainer = (props: DropdownContainerProps) => {
30
30
  const {
@@ -46,7 +46,6 @@ const DropdownContainer = (props: DropdownContainerProps) => {
46
46
  inputRef,
47
47
  isDropDownClosed,
48
48
  setFocusedOptionIndex,
49
- triggerRef
50
49
  } = useContext(DropdownContext);
51
50
 
52
51
  const ariaProps = buildAriaProps(aria);
@@ -67,7 +66,7 @@ const DropdownContainer = (props: DropdownContainerProps) => {
67
66
  id={id}
68
67
  onMouseEnter={() => setFocusedOptionIndex(-1)}
69
68
  ref={dropdownContainerRef}
70
- style={triggerRef ? {} : { position: "absolute"}}
69
+ style={{ position: "absolute"}}
71
70
  >
72
71
  {searchbar && (
73
72
  <TextInput dark={dark}
@@ -53,7 +53,6 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
53
53
  selected,
54
54
  setIsInputFocused,
55
55
  toggleDropdown,
56
- triggerRef,
57
56
  } = useContext(DropdownContext);
58
57
 
59
58
  const handleKeyDown = useHandleOnKeyDown();
@@ -99,7 +98,6 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
99
98
  id={id}
100
99
  >
101
100
  {
102
- !triggerRef && (
103
101
  children ? (
104
102
  <div
105
103
  onClick={() => toggleDropdown()}
@@ -147,7 +145,10 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
147
145
  <input
148
146
  className="dropdown_input"
149
147
  onChange={handleChange}
150
- onClick={() => toggleDropdown()}
148
+ onClick={(e) => {
149
+ e.stopPropagation();// keep the wrapper’s handler from firing
150
+ toggleDropdown();
151
+ }}
151
152
  onFocus={() => setIsInputFocused(true)}
152
153
  onKeyDown={handleKeyDown}
153
154
  placeholder={
@@ -181,7 +182,6 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
181
182
  </Flex>
182
183
  </>
183
184
  )
184
- )
185
185
  }
186
186
  </div>
187
187
  );
@@ -1,4 +1,5 @@
1
1
  .pb_empty_state_kit {
2
+ max-width: 100%;
2
3
 
3
4
  .sm-state-vertical {
4
5
  width: 150px;
@@ -35,4 +36,10 @@
35
36
  }
36
37
  }
37
38
 
38
- }
39
+ &.dark {
40
+ [class*="pb_title_kit"],
41
+ [class*="pb_body_kit"],
42
+ [class*="pb_detail_kit"],
43
+ [class*="pb_button_kit_link"]:hover { color: $white; }
44
+ }
45
+ }
@@ -0,0 +1,27 @@
1
+ <%= pb_rails("flex", props: {align: "center", spacing: "evenly", wrap: true}) do %>
2
+ <%= pb_rails("empty_state", props: {
3
+ description: "Body text goes into detail with possible steps for user to take",
4
+ header: "Title Explains",
5
+ image: "default",
6
+ primary_button: "Next Action",
7
+ primary_button_url: "#primary_button_url",
8
+ alignment: "left",
9
+ }) %>
10
+
11
+ <%= pb_rails("empty_state", props: {
12
+ description: "Body text goes into detail with possible steps for user to take",
13
+ header: "Title Explains",
14
+ image: "default",
15
+ primary_button: "Next Action",
16
+ primary_button_url: "#primary_button_url",
17
+ }) %>
18
+
19
+ <%= pb_rails("empty_state", props: {
20
+ description: "Body text goes into detail with possible steps for user to take",
21
+ header: "Title Explains",
22
+ image: "default",
23
+ primary_button: "Next Action",
24
+ primary_button_url: "#primary_button_url",
25
+ alignment: "right",
26
+ }) %>
27
+ <% end %>
@@ -0,0 +1,7 @@
1
+ <%= pb_rails("flex", props: {align: "center", justify: "center"}) do %>
2
+ <%= pb_rails("empty_state", props: {
3
+ description: "Body text goes into detail with possible steps for user to take",
4
+ header: "Title Explains",
5
+ image: "default",
6
+ }) %>
7
+ <% end %>
@@ -0,0 +1,12 @@
1
+ <%= pb_rails("flex", props: {align: "center", justify: "center", wrap: true}) do %>
2
+ <%= pb_rails("empty_state", props: {
3
+ description: "Body text goes into detail with possible steps for user to take",
4
+ header: "Title Explains",
5
+ image: "default",
6
+ orientation:"horizontal",
7
+ alignment: "left",
8
+ size: "lg",
9
+ primary_button: "Next Action",
10
+ primary_button_url: "#primary_button_url",
11
+ }) %>
12
+ <% end %>
@@ -0,0 +1,23 @@
1
+ <%= pb_rails("flex", props: {align: "center", spacing: "evenly", wrap: true}) do %>
2
+ <%= pb_rails("empty_state", props: {
3
+ description: "Body text goes into detail with possible steps for user to take",
4
+ header: "Title Explains",
5
+ image: "default",
6
+ primary_button: "Next Action",
7
+ primary_button_url: "#primary_button_url",
8
+ link_button: "Alt Action",
9
+ link_button_url: "#link_button_url",
10
+ size: "sm",
11
+ }) %>
12
+
13
+ <%= pb_rails("empty_state", props: {
14
+ description: "Body text goes into detail with possible steps for user to take",
15
+ header: "Title Explains",
16
+ image: "default",
17
+ primary_button: "Next Action",
18
+ primary_button_url: "#primary_button_url",
19
+ link_button: "Alt Action",
20
+ link_button_url: "#link_button_url",
21
+ size: "lg",
22
+ }) %>
23
+ <% end %>
@@ -1,5 +1,9 @@
1
1
  examples:
2
-
2
+ rails:
3
+ - empty_state_default: Default
4
+ - empty_state_size: Size
5
+ - empty_state_orientation: Orientation
6
+ - empty_state_alignment: Alignment
3
7
 
4
8
  react:
5
9
  - empty_state_default: Default
@@ -0,0 +1,19 @@
1
+ <%= pb_content_tag do %>
2
+ <%= pb_rails("flex", props: { align: flex_align, orientation: config[:flex_direction], padding_left: padding_size, padding_right: padding_size, vertical: "center", classname: config[:scss_class], max_width: "100%" }) do %>
3
+ <%= pb_rails("image", props: { url: image == "default" ? default_image_data_uri : image, alt: "Empty State Image", html_options: { width: config[:image_width], height: "auto", alignment: "start" } }) %>
4
+ <%= pb_rails("flex/flex_item") do %>
5
+ <%= pb_rails("title", props: { text: object.header, size: config[:title_size], padding_bottom: config[:title_padding], text_align: alignment }) %>
6
+ <% if size == "sm" %>
7
+ <%= pb_rails("detail", props: { text: object.description, padding_bottom: config[:description_pad], text_align: alignment }) %>
8
+ <% else %>
9
+ <%= pb_rails("body", props: { text: object.description, padding_bottom: config[:description_pad], text_align: alignment }) %>
10
+ <% end %>
11
+ <% if primary_button.present? %>
12
+ <%= pb_rails("button", props: { text: primary_button, variant: "primary", width: "100%", size: config[:button_size], link: primary_button_url, margin_bottom: config[:button_margin] }) %>
13
+ <% end %>
14
+ <% if link_button.present? %>
15
+ <%= pb_rails("button", props: { text: link_button, variant: "link", size: config[:button_size], link: link_button_url, width: "100%" }) %>
16
+ <% end %>
17
+ <% end %>
18
+ <% end %>
19
+ <% end %>
@@ -0,0 +1,123 @@
1
+ # frozen_string_literal: true
2
+
3
+ module Playbook
4
+ module PbEmptyState
5
+ class EmptyState < Playbook::KitBase
6
+ prop :alignment, type: Playbook::Props::Enum,
7
+ values: %w[center left right],
8
+ default: "center"
9
+ prop :description
10
+ prop :header
11
+ prop :image
12
+ prop :link_button
13
+ prop :link_button_url
14
+ prop :orientation, type: Playbook::Props::Enum,
15
+ values: %w[horizontal vertical],
16
+ default: "vertical"
17
+ prop :primary_button
18
+ prop :primary_button_url
19
+ prop :size, type: Playbook::Props::Enum,
20
+ values: %w[sm md lg],
21
+ default: "md"
22
+
23
+ SIZE_CONFIGS = {
24
+ sm: {
25
+ vertical: {
26
+ image_width: "100px",
27
+ title_size: 4,
28
+ title_padding: "xxs",
29
+ description_pad: "sm",
30
+ button_size: "sm",
31
+ button_margin: "xs",
32
+ scss_class: "sm-state-vertical",
33
+ flex_direction: "column",
34
+ },
35
+ horizontal: {
36
+ image_width: "100px",
37
+ title_size: 4,
38
+ title_padding: "xxs",
39
+ description_pad: "sm",
40
+ button_size: "sm",
41
+ button_margin: "xs",
42
+ scss_class: "sm-state-horizontal",
43
+ flex_direction: "row",
44
+ },
45
+ },
46
+ md: {
47
+ vertical: {
48
+ image_width: "140px",
49
+ title_size: 3,
50
+ title_padding: "xs",
51
+ description_pad: "md",
52
+ button_size: "md",
53
+ button_margin: "sm",
54
+ scss_class: "md-state-vertical",
55
+ flex_direction: "column",
56
+ },
57
+ horizontal: {
58
+ image_width: "140px",
59
+ title_size: 3,
60
+ title_padding: "xs",
61
+ description_pad: "md",
62
+ button_size: "md",
63
+ button_margin: "sm",
64
+ scss_class: "md-state-horizontal",
65
+ flex_direction: "row",
66
+ },
67
+ },
68
+ lg: {
69
+ vertical: {
70
+ image_width: "100%",
71
+ title_size: 1,
72
+ title_padding: "sm",
73
+ description_pad: "lg",
74
+ button_size: "md",
75
+ button_margin: "md",
76
+ scss_class: "lg-state-vertical",
77
+ flex_direction: "column",
78
+ },
79
+ horizontal: {
80
+ image_width: "100%",
81
+ title_size: 2,
82
+ title_padding: "sm",
83
+ description_pad: "lg",
84
+ button_size: "md",
85
+ button_margin: "md",
86
+ scss_class: "lg-state-horizontal",
87
+ flex_direction: "row",
88
+ },
89
+ },
90
+ }.freeze
91
+
92
+ def classname
93
+ generate_classname("pb_empty_state_kit")
94
+ end
95
+
96
+ def config
97
+ SIZE_CONFIGS[size.to_sym][orientation.to_sym]
98
+ end
99
+
100
+ def default_image_data_uri
101
+ svg_path = __dir__.then { |d| File.join(d, "docs", "default_image", "computer_fly_no_branding.svg") }
102
+ svg = File.read(svg_path)
103
+ encoded = ERB::Util.url_encode(svg)
104
+ "data:image/svg+xml,#{encoded}"
105
+ end
106
+
107
+ def padding_size
108
+ size == "sm" ? "xs" : "xl"
109
+ end
110
+
111
+ def flex_align
112
+ case alignment
113
+ when "left"
114
+ "start"
115
+ when "right"
116
+ "end"
117
+ else
118
+ "center"
119
+ end
120
+ end
121
+ end
122
+ end
123
+ end
@@ -0,0 +1,41 @@
1
+ <%=
2
+ pb_rails("filter", props: {
3
+ id: "filter_within_trubo_frames",
4
+ position: "top",
5
+ filters: [
6
+ { name: "name", value: "John Wick" },
7
+ { name: "city", value: "San Francisco"}
8
+ ],
9
+ sort_menu: [
10
+ { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
11
+ { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
12
+ { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
13
+ ],
14
+ template: "default",
15
+ results: 1,
16
+ popover_props: { append_to: "parent" },
17
+ }) do
18
+ %>
19
+ <%
20
+ example_collection = [
21
+ OpenStruct.new(name: "USA", value: 1),
22
+ OpenStruct.new(name: "Canada", value: 2),
23
+ OpenStruct.new(name: "Brazil", value: 3),
24
+ OpenStruct.new(name: "Philippines", value: 4),
25
+ OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
26
+ ]
27
+ %>
28
+ <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
29
+ <%= form.text_field :example_text_field, props: { label: true } %>
30
+ <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
31
+
32
+ <%= form.actions do |action| %>
33
+ <%= action.submit props: {
34
+ text: "Apply",
35
+ data: {
36
+ disable_with: "pb_rails('icon', props: { icon: 'spinner', spin: true, fixed_width: true })Searching...".html_safe
37
+ },}%>
38
+ <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
39
+ <% end %>
40
+ <% end %>
41
+ <% end %>
@@ -0,0 +1 @@
1
+ By default, the filter popover attaches to the `<body>`. To attach it elsewhere, like inside a Turbo Frame, pass the `append_to` prop through `popover_props`. Set it to `"parent"` to place the tooltip inside its parent element, or pass any CSS selector (`#id` or `.class`) to specify a custom container.
@@ -11,6 +11,7 @@ examples:
11
11
  - filter_max_height: Max Height for Popover Inside of Filter
12
12
  - filter_placement: Filter Placement
13
13
  - filter_popover_props: Popover Props
14
+ - filter_within_turbo_frames: Within Turbo Frames
14
15
 
15
16
  react:
16
17
  - filter_default: Default
@@ -23,35 +23,39 @@
23
23
  @mixin error-state-right-side-select-kit {
24
24
  &:has(.pb_text_input_kit:not(.error)):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper.error),
25
25
  &:has(.pb_text_input_kit.error):has(.pb_text_input_kit_label):has(.pb_select_kit_wrapper) {
26
- align-items: flex-start;
27
-
28
- .pb_select_kit_wrapper {
29
- padding-top: $space_md;
30
- margin-top: 2px;
26
+ &:not(:has(.pb_phone_number_input)) {
27
+ align-items: flex-start;
31
28
 
32
- .pb_select_kit_caret {
29
+ .pb_select_kit_wrapper {
33
30
  padding-top: $space_md;
31
+ margin-top: 2px;
32
+
33
+ .pb_select_kit_caret {
34
+ padding-top: $space_md;
35
+ }
34
36
  }
35
- }
36
37
 
37
- .pb_select_kit_wrapper.error {
38
- padding-top: $space_md;
39
- margin-top: 2px;
38
+ .pb_select_kit_wrapper.error {
39
+ padding-top: $space_md;
40
+ margin-top: 2px;
40
41
 
41
- .pb_select_kit_caret {
42
- padding-top: $space_xl;
42
+ .pb_select_kit_caret {
43
+ padding-top: $space_xl;
44
+ }
43
45
  }
44
46
  }
45
47
  }
46
48
  }
47
49
 
48
50
  @mixin error-state-left-side-select-kit {
49
- &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_phone_number_input):has(.pb_text_input_kit.error) {
50
- align-items: flex-start;
51
+ &:has(.pb_select_kit_label):has(.pb_select_kit_wrapper):has(.pb_text_input_kit.error) {
52
+ &:not(:has(.pb_phone_number_input)) {
53
+ align-items: flex-start;
51
54
 
52
- .pb_text_input_kit.error {
53
- padding-top: $space_md;
54
- margin-top: 2px;
55
+ .pb_text_input_kit.error {
56
+ padding-top: $space_md;
57
+ margin-top: 2px;
58
+ }
55
59
  }
56
60
  }
57
- }
61
+ }
@@ -11,7 +11,6 @@ SolidGauge(Highcharts);
11
11
  const data = [{ name: "Name", y: 45 }]
12
12
 
13
13
  const baseOptions = {
14
- title: { text: "" },
15
14
  series: [{ data: data }],
16
15
  };
17
16
 
@@ -2,6 +2,7 @@ import colors from '../tokens/exports/_colors.module.scss'
2
2
  import typography from '../tokens/exports/_typography.module.scss'
3
3
 
4
4
  const gaugeTheme = {
5
+ title: { text: "" },
5
6
  chart: {
6
7
  type: "solidgauge",
7
8
  events: {
@@ -77,7 +78,8 @@ const gaugeTheme = {
77
78
  y: -26,
78
79
  },
79
80
  },
80
- }
81
+ },
82
+ credits: { enabled: false }
81
83
  }
82
84
 
83
85
  export default gaugeTheme;