playbook_ui_docs 14.19.0.pre.rc.2 → 14.20.0.pre.alpha.PLAY2127dropdowncloseonselectionpropreact8006

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 (158) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md +5 -7
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.jsx +57 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.md +4 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.jsx +62 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.md +1 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_multi.jsx +82 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_multi.md +1 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.jsx +66 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.md +3 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +1 -1
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions_rails.html.erb +137 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions_rails.md +3 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header_rails.html.erb +40 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header_rails.md +1 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md +5 -1
  17. 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
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md +3 -2
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +9 -3
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +6 -2
  21. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.html.erb +5 -0
  22. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.jsx +16 -0
  23. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -0
  24. data/app/pb_kits/playbook/pb_avatar/docs/index.js +1 -0
  25. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +2 -48
  26. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md +1 -0
  27. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +2 -2
  28. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +22 -1
  29. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.html.erb +55 -0
  30. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_rails.md +5 -0
  31. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_rails.md +5 -0
  32. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx +59 -0
  33. data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md +1 -0
  34. data/app/pb_kits/playbook/pb_draggable/docs/example.yml +2 -0
  35. data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
  36. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_close_on_select.jsx +42 -0
  37. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_close_on_select.md +1 -0
  38. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb +31 -0
  39. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.md +5 -0
  40. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +5 -2
  41. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx +56 -0
  42. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.md +3 -0
  43. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx +58 -0
  44. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.md +3 -0
  45. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb +20 -0
  46. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.md +1 -0
  47. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.html.erb +19 -0
  48. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.md +3 -0
  49. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb +20 -0
  50. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.jsx +57 -0
  51. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.md +1 -0
  52. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.html.erb +50 -0
  53. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.jsx +105 -0
  54. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.html.erb +22 -0
  55. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx +67 -0
  56. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +28 -0
  57. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +17 -64
  58. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +58 -0
  59. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_autocomplete_and_custom_display.jsx → _dropdown_with_autocomplete_with_subcomponents.jsx} +11 -25
  60. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md +1 -0
  61. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +11 -0
  62. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +1 -1
  63. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +33 -2
  64. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md +3 -1
  65. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.md +1 -0
  66. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +61 -0
  67. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md +2 -0
  68. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +52 -0
  69. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.md +2 -0
  70. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +20 -5
  71. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +8 -2
  72. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.html.erb +27 -0
  73. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb +7 -0
  74. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb +12 -0
  75. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb +23 -0
  76. data/app/pb_kits/playbook/pb_empty_state/docs/example.yml +5 -1
  77. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.html.erb +1 -0
  78. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.jsx +41 -0
  79. data/app/pb_kits/playbook/pb_file_upload/docs/example.yml +2 -0
  80. data/app/pb_kits/playbook/pb_file_upload/docs/index.js +1 -0
  81. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
  82. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
  83. data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.html.erb +9 -0
  84. data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.jsx +21 -0
  85. data/app/pb_kits/playbook/pb_message/docs/example.yml +2 -0
  86. data/app/pb_kits/playbook/pb_message/docs/index.js +1 -0
  87. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb +11 -11
  88. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx +11 -11
  89. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +11 -11
  90. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +11 -11
  91. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb +11 -11
  92. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.jsx +11 -11
  93. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.html.erb +11 -11
  94. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.jsx +11 -11
  95. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.html.erb +11 -11
  96. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.jsx +11 -11
  97. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.html.erb +11 -11
  98. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.jsx +11 -11
  99. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.html.erb +11 -11
  100. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.jsx +11 -11
  101. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb +11 -11
  102. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx +11 -11
  103. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb +11 -11
  104. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx +11 -11
  105. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx +11 -11
  106. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +11 -11
  107. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +11 -11
  108. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx +11 -11
  109. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.html.erb +11 -11
  110. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md +2 -0
  111. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.jsx +11 -11
  112. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md +3 -1
  113. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb +22 -22
  114. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx +22 -22
  115. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb +22 -22
  116. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx +22 -22
  117. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +11 -11
  118. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +11 -11
  119. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +11 -11
  120. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +1 -1
  121. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.html.erb +4 -0
  122. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.jsx +15 -0
  123. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.md +1 -0
  124. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx +1 -1
  125. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +4 -3
  126. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
  127. data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.html.erb +12 -0
  128. data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.jsx +31 -0
  129. data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.md +1 -0
  130. data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +1 -1
  131. data/app/pb_kits/playbook/pb_select/docs/example.yml +2 -0
  132. data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
  133. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +7 -7
  134. data/app/pb_kits/playbook/pb_table/docs/_table_with_selectable_rows.html.erb +3 -51
  135. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +1 -1
  136. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +5 -1
  137. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb +8 -1
  138. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.jsx +23 -0
  139. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.md +1 -0
  140. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  141. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  142. data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.html.erb +6 -0
  143. data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.jsx +16 -0
  144. data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
  145. data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
  146. data/dist/playbook-doc.js +2 -2
  147. metadata +74 -15
  148. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +0 -10
  149. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +0 -1
  150. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +0 -79
  151. data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +0 -53
  152. data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +0 -7
  153. data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +0 -1
  154. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_react.md → _advanced_table_selectable_rows.md} +0 -0
  155. /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
  156. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows.html.erb → _advanced_table_selectable_rows_rails.html.erb} +0 -0
  157. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_line.md → _draggable_drop_zones_line_react.md} +0 -0
  158. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_event_listeners.md → _draggable_event_listeners_rails.md} +0 -0
@@ -0,0 +1,2 @@
1
+ The optional `searchbar` boolean prop can also be used on the `Dropdown.Container` to render a searchbar with typeahead functionality within the dropdown itself. This is especially useful when a custom trigger is being used.
2
+ `searchbar` is set to false by default.
@@ -0,0 +1,52 @@
1
+ <%
2
+ options = [
3
+ {
4
+ label: "United States",
5
+ value: "United States",
6
+ areaCode: "+1",
7
+ icon: "🇺🇸",
8
+ id: "us"
9
+ },
10
+ {
11
+ label: "United Kingdom",
12
+ value: "United Kingdom",
13
+ areaCode: "+44",
14
+ icon: "🇬🇧",
15
+ id: "gb"
16
+ },
17
+ {
18
+ label: "Pakistan",
19
+ value: "Pakistan",
20
+ areaCode: "+92",
21
+ icon: "🇵🇰",
22
+ id: "pk"
23
+ }
24
+ ]
25
+
26
+ %>
27
+
28
+ <%= pb_rails("dropdown", props: {options: options}) do %>
29
+ <%= pb_rails("dropdown/dropdown_trigger") do %>
30
+ <%= pb_rails("icon_circle", props: {icon:"flag", cursor: "pointer", variant:"royal"}) %>
31
+ <% end %>
32
+ <%= pb_rails("dropdown/dropdown_container", props:{max_width:"xs", searchbar: true}) do %>
33
+ <% options.each do |option| %>
34
+ <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
35
+ <%= pb_rails("flex", props: {
36
+ align: "center",
37
+ justify: "between",
38
+ }) do %>
39
+ <%= pb_rails("flex/flex_item") do %>
40
+ <%= pb_rails("flex") do %>
41
+ <%= pb_rails("icon", props: {icon: option[:icon]}) %>
42
+ <%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
43
+ <% end %>
44
+ <% end %>
45
+ <%= pb_rails("flex/flex_item") do %>
46
+ <%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
47
+ <% end %>
48
+ <% end %>
49
+ <% end %>
50
+ <% end %>
51
+ <% end %>
52
+ <% end %>
@@ -0,0 +1,2 @@
1
+ The optional `searchbar` boolean prop can also be used on the `dropdown/dropdown_container` to render a searchbar with typeahead functionality within the dropdown itself. This is especially useful when a custom trigger is being used.
2
+ `searchbar` is set to false by default.
@@ -1,34 +1,49 @@
1
1
  examples:
2
2
  rails:
3
- - dropdown_default: Default
3
+ - dropdown_default_rails: Default
4
+ - dropdown_with_autocomplete: Autocomplete
5
+ - dropdown_multi_select_rails: Multi Select
6
+ - dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
7
+ - dropdown_multi_select_display_rails: Multi Select with Form Pill Props
4
8
  - dropdown_subtle_variant: Subtle Variant
5
9
  - dropdown_subcomponent_structure_rails: Subcomponent Structure
10
+ - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
6
11
  - dropdown_with_label: With Label
7
12
  - dropdown_with_custom_options_rails: Custom Options
13
+ - dropdown_multi_select_with_custom_options: Multi Select with Custom Options
8
14
  - dropdown_with_custom_display_rails: Custom Display
9
15
  - dropdown_with_custom_trigger_rails: Custom Trigger
16
+ - dropdown_with_search_rails: Custom Trigger Dropdown with Search
10
17
  - dropdown_with_custom_padding: Custom Option Padding
11
18
  - dropdown_error: Dropdown with Error
12
19
  - dropdown_default_value: Default Value
20
+ - dropdown_multi_select_with_default: Multi Select Default Value
13
21
  - dropdown_blank_selection: Blank Selection
14
22
  - dropdown_separators_hidden: Separators Hidden
15
23
 
16
24
  react:
17
25
  - dropdown_default: Default
26
+ - dropdown_with_autocomplete: Autocomplete
27
+ - dropdown_multi_select: Multi Select
28
+ - dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
29
+ - dropdown_multi_select_display: Multi Select with Form Pill Props
18
30
  - dropdown_subtle_variant: Subtle Variant
19
31
  - dropdown_subcomponent_structure: Subcomponent Structure
32
+ - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
20
33
  - dropdown_with_label: With Label
21
34
  - dropdown_with_custom_options: Custom Options
35
+ - dropdown_multi_select_with_custom_options: Multi Select with Custom Options
22
36
  - dropdown_with_custom_display: Custom Display
23
37
  - dropdown_with_custom_trigger: Custom Trigger
38
+ - dropdown_with_search: Custom Trigger Dropdown with Search
24
39
  - dropdown_with_custom_padding: Custom Option Padding
25
40
  - dropdown_error: Dropdown with Error
26
41
  - dropdown_default_value: Default Value
42
+ - dropdown_multi_select_with_default: Multi Select Default Value
27
43
  - dropdown_blank_selection: Blank Selection
28
44
  - dropdown_clear_selection: Clear Selection
29
45
  - dropdown_separators_hidden: Separators Hidden
30
- # - dropdown_with_autocomplete: Autocomplete
31
- # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
32
- # - dropdown_with_external_control: useDropdown Hook
33
- # - dropdown_with_hook: useDropdown Hook with Any Trigger
46
+ - dropdown_with_external_control: useDropdown Hook
47
+ - dropdown_close_on_select: Close On Selection
48
+
34
49
 
@@ -3,11 +3,10 @@ export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_di
3
3
  export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_options.jsx'
4
4
  export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'
5
5
  export { default as DropdownWithAutocomplete } from './_dropdown_with_autocomplete.jsx'
6
- export { default as DropdownWithAutocompleteAndCustomDisplay } from './_dropdown_with_autocomplete_and_custom_display.jsx'
6
+ export { default as DropdownWithAutocompleteWithSubcomponents } from './_dropdown_with_autocomplete_with_subcomponents.jsx'
7
7
  export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_padding.jsx'
8
8
  export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
9
9
  export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
10
- export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
11
10
  export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'
12
11
  export { default as DropdownError } from './_dropdown_error.jsx'
13
12
  export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
@@ -15,3 +14,10 @@ export { default as DropdownBlankSelection } from './_dropdown_blank_selection.j
15
14
  export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
16
15
  export { default as DropdownSubtleVariant } from './_dropdown_subtle_variant.jsx'
17
16
  export { default as DropdownSeparatorsHidden } from './_dropdown_separators_hidden.jsx'
17
+ export {default as DropdownWithSearch} from './_dropdown_with_search.jsx'
18
+ export { default as DropdownMultiSelect } from './_dropdown_multi_select.jsx'
19
+ export { default as DropdownMultiSelectDisplay } from './_dropdown_multi_select_display.jsx'
20
+ export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_multi_select_with_autocomplete.jsx'
21
+ export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
22
+ export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
23
+ export { default as DropdownCloseOnSelect } from './_dropdown_close_on_select.jsx'
@@ -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 @@
1
+ <%= pb_rails("file_upload", props: {id: "error", error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please upload a valid file")}) %>
@@ -0,0 +1,41 @@
1
+ import React, { useState } from 'react'
2
+ import FileUpload from '../_file_upload'
3
+ import List from '../../pb_list/_list'
4
+ import ListItem from '../../pb_list/_list_item'
5
+ import Icon from '../../pb_icon/_icon'
6
+
7
+ const AcceptedFilesList = ({ files }) => (
8
+ <List>
9
+ {files.map((file) => (
10
+ <ListItem key={file.name}>{file.name}</ListItem>
11
+ ))}
12
+ </List>
13
+ )
14
+
15
+ const FileUploadError = (props) => {
16
+ const [filesToUpload, setFilesToUpload] = useState([])
17
+
18
+ const handleOnFilesAccepted = (files) => {
19
+ setFilesToUpload([...filesToUpload, ...files])
20
+ }
21
+
22
+ const error = (<>
23
+ <Icon icon="warning" /> Please upload a valid file
24
+ </>)
25
+
26
+ return (
27
+ <div>
28
+ <AcceptedFilesList
29
+ files={filesToUpload}
30
+ {...props}
31
+ />
32
+ <FileUpload
33
+ error={error}
34
+ onFilesAccepted={handleOnFilesAccepted}
35
+ {...props}
36
+ />
37
+ </div>
38
+ )
39
+ }
40
+
41
+ export default FileUploadError
@@ -3,6 +3,7 @@ examples:
3
3
  rails:
4
4
  - file_upload_default: File Upload
5
5
  - file_upload_custom: Custom
6
+ - file_upload_error: Error
6
7
 
7
8
  react:
8
9
  - file_upload_default: Default List of files to upload
@@ -10,3 +11,4 @@ examples:
10
11
  - file_upload_custom_message: Add a custom message
11
12
  - file_upload_custom_description: Add your one accepted files description
12
13
  - file_upload_max_size: Set a file size limit
14
+ - file_upload_error: Error
@@ -3,3 +3,4 @@ export { default as FileUploadAccept } from './_file_upload_accept.jsx'
3
3
  export { default as FileUploadCustomMessage } from './_file_upload_custom_message.jsx'
4
4
  export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
5
5
  export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'
6
+ export { default as FileUploadError } from './_file_upload_error.jsx'
@@ -99,6 +99,7 @@
99
99
  <%= form.url_field :example_url_field, props: { label: true } %>
100
100
  <%= form.text_area :example_text_area, props: { label: true } %>
101
101
  <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options } %>
102
+ <%= form.dropdown_field :example_dropdown_multi, props: { label: true, options: example_dropdown_options, multi_select: true } %>
102
103
  <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
103
104
  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
104
105
  <%= form.check_box :example_checkbox,
@@ -98,6 +98,7 @@
98
98
  <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
99
99
  <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
100
100
  <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
101
+ <%= form.dropdown_field :example_dropdown_validation_multi, props: { label: true, options: example_dropdown_options, multi_select: true, required: true } %>
101
102
  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true, validation_message: "Please, select an option." } %>
102
103
  <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
103
104
  <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
@@ -0,0 +1,9 @@
1
+ <%= pb_rails("message", props: {
2
+ label: "Mike Bishop",
3
+ message: "So long, and thanks for all the fish!",
4
+ timestamp: "3 months ago",
5
+ avatar_name: "Mike Bishop",
6
+ avatar_url: "https://randomuser.me/api/portraits/men/50.jpg",
7
+ avatar_status: "offline",
8
+ avatar_grayscale: true,
9
+ }) %>
@@ -0,0 +1,21 @@
1
+ import React from "react"
2
+
3
+ import Message from "../_message"
4
+
5
+ const MessageGrayscale = (props) => {
6
+ return (
7
+ <Message
8
+ avatarGrayscale
9
+ avatarName='Mike Bishop'
10
+ avatarStatus='offline'
11
+ avatarUrl='https://randomuser.me/api/portraits/men/50.jpg'
12
+ borderRadius='rounded'
13
+ label='Mike Bishop'
14
+ message='So long, and thanks for all the fish!'
15
+ timestamp='3 months ago'
16
+ {...props}
17
+ />
18
+ )
19
+ }
20
+
21
+ export default MessageGrayscale
@@ -5,12 +5,14 @@ examples:
5
5
  - message_timestamp: With Timestamp Hover
6
6
  - message_hover: Hover
7
7
  - message_mentions: Mentions
8
+ - message_grayscale: Grayscale Avatar
8
9
 
9
10
  react:
10
11
  - message_default: Default
11
12
  - message_timestamp: With Timestamp Hover
12
13
  - message_hover: Hover
13
14
  - message_mentions: Mentions
15
+ - message_grayscale: Grayscale Avatar
14
16
 
15
17
  swift:
16
18
  - message_default_swift: Default
@@ -2,3 +2,4 @@ export { default as MessageDefault } from './_message_default.jsx'
2
2
  export { default as MessageTimestamp } from './_message_timestamp.jsx'
3
3
  export { default as MessageHover } from './_message_hover.jsx'
4
4
  export { default as MessageMentions } from './_message_mentions.jsx'
5
+ export { default as MessageGrayscale } from './_message_grayscale.jsx'
@@ -1,62 +1,62 @@
1
1
  <% treeData = [{
2
2
  label: "Power Home Remodeling",
3
- value: "Power Home Remodeling",
3
+ value: "powerHomeRemodeling",
4
4
  id: "100",
5
5
  expanded: true,
6
6
  children: [
7
7
  {
8
8
  label: "People",
9
- value: "People",
9
+ value: "people",
10
10
  id: "101",
11
11
  expanded: true,
12
12
  children: [
13
13
  {
14
14
  label: "Talent Acquisition",
15
- value: "Talent Acquisition",
15
+ value: "talentAcquisition",
16
16
  id: "102",
17
17
  },
18
18
  {
19
19
  label: "Business Affairs",
20
- value: "Business Affairs",
20
+ value: "businessAffairs",
21
21
  id: "103",
22
22
  children: [
23
23
  {
24
24
  label: "Initiatives",
25
- value: "Initiatives",
25
+ value: "initiatives",
26
26
  id: "104",
27
27
  },
28
28
  {
29
29
  label: "Learning & Development",
30
- value: "Learning & Development",
30
+ value: "learningAndDevelopment",
31
31
  id: "105",
32
32
  },
33
33
  ],
34
34
  },
35
35
  {
36
36
  label: "People Experience",
37
- value: "People Experience",
37
+ value: "peopleExperience",
38
38
  id: "106",
39
39
  },
40
40
  ],
41
41
  },
42
42
  {
43
43
  label: "Contact Center",
44
- value: "Contact Center",
44
+ value: "contactCenter",
45
45
  id: "107",
46
46
  children: [
47
47
  {
48
48
  label: "Appointment Management",
49
- value: "Appointment Management",
49
+ value: "appointmentManagement",
50
50
  id: "108",
51
51
  },
52
52
  {
53
53
  label: "Customer Service",
54
- value: "Customer Service",
54
+ value: "customerService",
55
55
  id: "109",
56
56
  },
57
57
  {
58
58
  label: "Energy",
59
- value: "Energy",
59
+ value: "energy",
60
60
  id: "110",
61
61
  },
62
62
  ],
@@ -4,63 +4,63 @@ import MultiLevelSelect from "../_multi_level_select";
4
4
  const treeData = [
5
5
  {
6
6
  label: "Power Home Remodeling",
7
- value: "Power Home Remodeling",
7
+ value: "powerHomeRemodeling",
8
8
  id: "powerhome1",
9
9
  expanded: true,
10
10
  children: [
11
11
  {
12
12
  label: "People",
13
- value: "People",
13
+ value: "people",
14
14
  id: "people1",
15
15
  expanded: true,
16
16
  children: [
17
17
  {
18
18
  label: "Talent Acquisition",
19
- value: "Talent Acquisition",
19
+ value: "talentAcquisition",
20
20
  id: "talent1",
21
21
  },
22
22
  {
23
23
  label: "Business Affairs",
24
- value: "Business Affairs",
24
+ value: "businessAffairs",
25
25
  id: "business1",
26
26
  children: [
27
27
  {
28
28
  label: "Initiatives",
29
- value: "Initiatives",
29
+ value: "initiatives",
30
30
  id: "initiative1",
31
31
  },
32
32
  {
33
33
  label: "Learning & Development",
34
- value: "Learning & Development",
34
+ value: "learningAndDevelopment",
35
35
  id: "development1",
36
36
  },
37
37
  ],
38
38
  },
39
39
  {
40
40
  label: "People Experience",
41
- value: "People Experience",
41
+ value: "peopleExperience",
42
42
  id: "experience1",
43
43
  },
44
44
  ],
45
45
  },
46
46
  {
47
47
  label: "Contact Center",
48
- value: "Contact Center",
48
+ value: "contactCenter",
49
49
  id: "contact1",
50
50
  children: [
51
51
  {
52
52
  label: "Appointment Management",
53
- value: "Appointment Management",
53
+ value: "appointmentManagement",
54
54
  id: "appointment1",
55
55
  },
56
56
  {
57
57
  label: "Customer Service",
58
- value: "Customer Service",
58
+ value: "customerService",
59
59
  id: "customer1",
60
60
  },
61
61
  {
62
62
  label: "Energy",
63
- value: "Energy",
63
+ value: "energy",
64
64
  id: "energy1",
65
65
  },
66
66
  ],
@@ -1,62 +1,62 @@
1
1
  <% treeData = [{
2
2
  label: "Power Home Remodeling",
3
- value: "Power Home Remodeling",
3
+ value: "powerHomeRemodeling",
4
4
  id: "100",
5
5
  expanded: true,
6
6
  children: [
7
7
  {
8
8
  label: "People",
9
- value: "People",
9
+ value: "people",
10
10
  id: "101",
11
11
  expanded: true,
12
12
  children: [
13
13
  {
14
14
  label: "Talent Acquisition",
15
- value: "Talent Acquisition",
15
+ value: "talentAcquisition",
16
16
  id: "102",
17
17
  },
18
18
  {
19
19
  label: "Business Affairs",
20
- value: "Business Affairs",
20
+ value: "business Affairs",
21
21
  id: "103",
22
22
  children: [
23
23
  {
24
24
  label: "Initiatives",
25
- value: "Initiatives",
25
+ value: "initiatives",
26
26
  id: "104",
27
27
  },
28
28
  {
29
29
  label: "Learning & Development",
30
- value: "Learning & Development",
30
+ value: "learningAndDevelopment",
31
31
  id: "105",
32
32
  },
33
33
  ],
34
34
  },
35
35
  {
36
36
  label: "People Experience",
37
- value: "People Experience",
37
+ value: "peopleExperience",
38
38
  id: "106",
39
39
  },
40
40
  ],
41
41
  },
42
42
  {
43
43
  label: "Contact Center",
44
- value: "Contact Center",
44
+ value: "contactCenter",
45
45
  id: "107",
46
46
  children: [
47
47
  {
48
48
  label: "Appointment Management",
49
- value: "Appointment Management",
49
+ value: "appointmentManagement",
50
50
  id: "108",
51
51
  },
52
52
  {
53
53
  label: "Customer Service",
54
- value: "Customer Service",
54
+ value: "customerService",
55
55
  id: "109",
56
56
  },
57
57
  {
58
58
  label: "Energy",
59
- value: "Energy",
59
+ value: "energy",
60
60
  id: "110",
61
61
  },
62
62
  ],