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

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 (155) 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_default_rails.html.erb +31 -0
  37. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.md +5 -0
  38. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +5 -2
  39. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx +56 -0
  40. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.md +3 -0
  41. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx +58 -0
  42. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.md +3 -0
  43. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb +20 -0
  44. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.md +1 -0
  45. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.html.erb +19 -0
  46. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.md +3 -0
  47. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb +20 -0
  48. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.jsx +57 -0
  49. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.md +1 -0
  50. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.html.erb +50 -0
  51. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.jsx +105 -0
  52. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.html.erb +22 -0
  53. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx +67 -0
  54. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +28 -0
  55. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +17 -64
  56. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +58 -0
  57. data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_autocomplete_and_custom_display.jsx → _dropdown_with_autocomplete_with_subcomponents.jsx} +11 -25
  58. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md +1 -0
  59. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +11 -0
  60. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +1 -1
  61. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +33 -2
  62. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md +3 -1
  63. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.md +1 -0
  64. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +61 -0
  65. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md +2 -0
  66. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +52 -0
  67. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.md +2 -0
  68. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +18 -5
  69. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +7 -2
  70. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.html.erb +27 -0
  71. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb +7 -0
  72. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb +12 -0
  73. data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb +23 -0
  74. data/app/pb_kits/playbook/pb_empty_state/docs/example.yml +5 -1
  75. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.html.erb +1 -0
  76. data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.jsx +41 -0
  77. data/app/pb_kits/playbook/pb_file_upload/docs/example.yml +2 -0
  78. data/app/pb_kits/playbook/pb_file_upload/docs/index.js +1 -0
  79. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
  80. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
  81. data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.html.erb +9 -0
  82. data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.jsx +21 -0
  83. data/app/pb_kits/playbook/pb_message/docs/example.yml +2 -0
  84. data/app/pb_kits/playbook/pb_message/docs/index.js +1 -0
  85. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb +11 -11
  86. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx +11 -11
  87. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +11 -11
  88. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +11 -11
  89. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb +11 -11
  90. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.jsx +11 -11
  91. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.html.erb +11 -11
  92. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.jsx +11 -11
  93. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.html.erb +11 -11
  94. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.jsx +11 -11
  95. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.html.erb +11 -11
  96. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.jsx +11 -11
  97. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.html.erb +11 -11
  98. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.jsx +11 -11
  99. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb +11 -11
  100. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx +11 -11
  101. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb +11 -11
  102. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx +11 -11
  103. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx +11 -11
  104. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +11 -11
  105. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +11 -11
  106. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx +11 -11
  107. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.html.erb +11 -11
  108. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md +2 -0
  109. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.jsx +11 -11
  110. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md +3 -1
  111. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb +22 -22
  112. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx +22 -22
  113. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb +22 -22
  114. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx +22 -22
  115. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +11 -11
  116. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +11 -11
  117. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +11 -11
  118. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +1 -1
  119. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.html.erb +4 -0
  120. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.jsx +15 -0
  121. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.md +1 -0
  122. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx +1 -1
  123. data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +4 -3
  124. data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
  125. data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.html.erb +12 -0
  126. data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.jsx +31 -0
  127. data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.md +1 -0
  128. data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +1 -1
  129. data/app/pb_kits/playbook/pb_select/docs/example.yml +2 -0
  130. data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
  131. data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +7 -7
  132. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +1 -1
  133. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +5 -1
  134. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb +8 -1
  135. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.jsx +23 -0
  136. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.md +1 -0
  137. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
  138. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  139. data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.html.erb +6 -0
  140. data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.jsx +16 -0
  141. data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
  142. data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
  143. data/dist/playbook-doc.js +2 -2
  144. metadata +72 -15
  145. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +0 -10
  146. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +0 -1
  147. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +0 -79
  148. data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +0 -53
  149. data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +0 -7
  150. data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +0 -1
  151. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_react.md → _advanced_table_selectable_rows.md} +0 -0
  152. /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
  153. /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows.html.erb → _advanced_table_selectable_rows_rails.html.erb} +0 -0
  154. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_line.md → _draggable_drop_zones_line_react.md} +0 -0
  155. /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_event_listeners.md → _draggable_event_listeners_rails.md} +0 -0
@@ -0,0 +1,105 @@
1
+ import React from 'react'
2
+ import Dropdown from '../../pb_dropdown/_dropdown'
3
+ import Body from '../../pb_body/_body'
4
+ import Flex from '../../pb_flex/_flex'
5
+ import FlexItem from '../../pb_flex/_flex_item'
6
+ import Icon from '../../pb_icon/_icon'
7
+
8
+ const DropdownMultiSelectWithCustomOptions = (props) => {
9
+
10
+ const options = [
11
+ {
12
+ label: "United States",
13
+ value: "United States",
14
+ areaCode: "+1",
15
+ icon: "🇺🇸",
16
+ id: "United-states"
17
+ },
18
+ {
19
+ label: "Canada",
20
+ value: "Canada",
21
+ areaCode: "+1",
22
+ icon: "🇨🇦",
23
+ id: "canada"
24
+ },
25
+ {
26
+ label: "Pakistan",
27
+ value: "Pakistan",
28
+ areaCode: "+92",
29
+ icon: "🇵🇰",
30
+ id: "pakistan"
31
+ },
32
+ {
33
+ label: "India",
34
+ value: "India",
35
+ areaCode: "+91",
36
+ icon: "🇮🇳",
37
+ id: "india"
38
+ },
39
+ {
40
+ label: "Australia",
41
+ value: "Australia",
42
+ areaCode: "+61",
43
+ icon: "🇦🇺",
44
+ id: "australia"
45
+ },
46
+ {
47
+ label: "New Zealand",
48
+ value: "New Zealand",
49
+ areaCode: "+64",
50
+ icon: "🇳🇿",
51
+ id: "new-zealand"
52
+ },
53
+ {
54
+ label: "Italy",
55
+ value: "Italy",
56
+ areaCode: "+39",
57
+ icon: "🇮🇹",
58
+ id: "italy"
59
+ },
60
+ {
61
+ label: "Spain",
62
+ value: "Spain",
63
+ areaCode: "+34",
64
+ icon: "🇪🇸",
65
+ id: "spain"
66
+ }
67
+ ];
68
+
69
+ return (
70
+ <div>
71
+ <Dropdown
72
+ multiSelect
73
+ options={options}
74
+ {...props}
75
+ >
76
+ {options.map((option) => (
77
+ <Dropdown.Option key={option.id}
78
+ option={option}
79
+ >
80
+ <Flex
81
+ align="center"
82
+ justify="between"
83
+ >
84
+ <FlexItem>
85
+ <Flex>
86
+ <Icon icon={option.icon}
87
+ paddingRight="xs"
88
+ />
89
+ <Body text={option.label} />
90
+ </Flex>
91
+ </FlexItem>
92
+ <FlexItem>
93
+ <Body color="light"
94
+ text={option.areaCode}
95
+ />
96
+ </FlexItem>
97
+ </Flex>
98
+ </Dropdown.Option>
99
+ ))}
100
+ </Dropdown>
101
+ </div>
102
+ )
103
+ }
104
+
105
+ export default DropdownMultiSelectWithCustomOptions
@@ -0,0 +1,22 @@
1
+ <%
2
+ options = [
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
+ { label: 'India', value: 'India', id: 'in' },
7
+ { label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
8
+ { label: 'Australia', value: 'Australia', id: 'au' },
9
+ { label: 'New Zealand', value: 'New Zealand', id: 'nz' },
10
+ { label: 'Germany', value: 'Germany', id: 'de' },
11
+ { label: 'France', value: 'France', id: 'fr' },
12
+ { label: 'Italy', value: 'Italy', id: 'it' },
13
+ ]
14
+ %>
15
+
16
+ <%
17
+ default_value = [
18
+ { label: 'United States', value: 'United States', id: 'us' },
19
+ { label: 'Canada', value: 'Canada', id: 'ca' },
20
+ ]
21
+ %>
22
+ <%= pb_rails("dropdown", props: {options: options, multi_select: true, default_value: default_value}) %>
@@ -0,0 +1,67 @@
1
+ import React from "react";
2
+ import Dropdown from "../../pb_dropdown/_dropdown";
3
+
4
+ const DropdownMultiSelectWithDefault = (props) => {
5
+ const options = [
6
+ {
7
+ label: "United States",
8
+ value: "United States",
9
+ },
10
+ {
11
+ label: "United Kingdom",
12
+ value: "United Kingdom",
13
+ },
14
+ {
15
+ label: "Canada",
16
+ value: "Canada",
17
+ },
18
+ {
19
+ label: "Pakistan",
20
+ value: "Pakistan",
21
+ },
22
+ {
23
+ label: "India",
24
+ value: "India",
25
+ },
26
+ {
27
+ label: "Australia",
28
+ value: "Australia",
29
+ },
30
+ {
31
+ label: "New Zealand",
32
+ value: "New Zealand",
33
+ },
34
+ {
35
+ label: "Italy",
36
+ value: "Italy",
37
+ },
38
+ {
39
+ label: "Spain",
40
+ value: "Spain",
41
+ },
42
+ ];
43
+
44
+ const defaultSelectedOptions = [
45
+ {
46
+ label: "United States",
47
+ value: "United States",
48
+ },
49
+ {
50
+ label: "Italy",
51
+ value: "Italy",
52
+ },
53
+ ];
54
+
55
+ return (
56
+ <div>
57
+ <Dropdown
58
+ defaultValue={defaultSelectedOptions}
59
+ multiSelect
60
+ options={options}
61
+ {...props}
62
+ />
63
+ </div>
64
+ );
65
+ };
66
+
67
+ export default DropdownMultiSelectWithDefault;
@@ -0,0 +1,28 @@
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, autocomplete: true}) %>
@@ -1,86 +1,39 @@
1
1
  import React from 'react'
2
2
 
3
3
  import Dropdown from '../../pb_dropdown/_dropdown'
4
- import Badge from '../../pb_badge/_badge'
5
- import FlexItem from '../../pb_flex/_flex_item'
6
- import User from '../../pb_user/_user'
7
4
 
8
5
  const DropdownWithAutocomplete = (props) => {
9
6
 
10
7
  const options = [
11
8
  {
12
- label: "Jasper Furniss",
13
- value: "Jasper Furniss",
14
- territory: "PHL",
15
- title: "Lead UX Engineer",
16
- id: "jasper-furniss",
17
- status: "Offline"
9
+ label: "United States",
10
+ value: "United States",
11
+ areaCode: "+1",
12
+ icon: "🇺🇸",
13
+ id: "us"
18
14
  },
19
15
  {
20
- label: "Ramon Ruiz",
21
- value: "Ramon Ruiz",
22
- territory: "PHL",
23
- title: "Senior UX Designer",
24
- id: "ramon-ruiz",
25
- status: "Away"
16
+ label: "United Kingdom",
17
+ value: "United Kingdom",
18
+ areaCode: "+44",
19
+ icon: "🇬🇧",
20
+ id: "gb"
26
21
  },
27
22
  {
28
- label: "Carlos Lima",
29
- value: "Carlos Lima",
30
- territory: "PHL",
31
- title: "Nitro Developer",
32
- id: "carlos-lima",
33
- status: "Online"
34
- },
35
- {
36
- label: "Courtney Long",
37
- value: "Courtney Long",
38
- territory: "PHL",
39
- title: "Lead UX Designer",
40
- id: "courtney-long",
41
- status: "Online"
23
+ label: "Pakistan",
24
+ value: "Pakistan",
25
+ areaCode: "+92",
26
+ icon: "🇵🇰",
27
+ id: "pk"
42
28
  }
43
- ];
44
-
29
+ ]
45
30
 
46
31
  return (
47
32
  <div>
48
33
  <Dropdown autocomplete
49
34
  options={options}
50
35
  {...props}
51
- >
52
- {options.map((option) => (
53
- <Dropdown.Option key={option.id}
54
- option={option}
55
- >
56
- <>
57
- <FlexItem>
58
- <User
59
- align="left"
60
- avatar
61
- name={option.label}
62
- orientation="horizontal"
63
- territory={option.territory}
64
- title={option.title}
65
- />
66
- </FlexItem>
67
- <FlexItem>
68
- <Badge
69
- rounded
70
- text={option.status}
71
- variant={`${
72
- option.status === "Offline"
73
- ? "neutral"
74
- : option.status === "Online"
75
- ? "success"
76
- : "warning"
77
- }`}
78
- />
79
- </FlexItem>
80
- </>
81
- </Dropdown.Option>
82
- ))}
83
- </Dropdown>
36
+ />
84
37
  </div>
85
38
  )
86
39
  }
@@ -0,0 +1,58 @@
1
+ <%
2
+ options = [
3
+ {
4
+ label: "Jasper Furniss",
5
+ value: "Jasper Furniss",
6
+ territory: "PHL",
7
+ title: "Lead UX Engineer",
8
+ id: "jasper-furniss",
9
+ status: "Offline"
10
+ },
11
+ {
12
+ label: "Ramon Ruiz",
13
+ value: "Ramon Ruiz",
14
+ territory: "PHL",
15
+ title: "Senior UX Designer",
16
+ id: "ramon-ruiz",
17
+ status: "Away"
18
+ },
19
+ {
20
+ label: "Carlos Lima",
21
+ value: "Carlos Lima",
22
+ territory: "PHL",
23
+ title: "Nitro Developer",
24
+ id: "carlos-lima",
25
+ status: "Online"
26
+ },
27
+ {
28
+ label: "Courtney Long",
29
+ value: "Courtney Long",
30
+ territory: "PHL",
31
+ title: "Lead UX Designer",
32
+ id: "courtney-long",
33
+ status: "Online"
34
+ }
35
+ ];
36
+
37
+ %>
38
+
39
+ <%= pb_rails("dropdown", props: {options: options}) do %>
40
+ <%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Search...", autocomplete: true}) %>
41
+ <%= pb_rails("dropdown/dropdown_container") do %>
42
+ <% options.each do |option| %>
43
+ <%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
44
+ <%= pb_rails("flex", props: {
45
+ align: "center",
46
+ justify: "between",
47
+ }) do %>
48
+ <%= pb_rails("flex/flex_item") do %>
49
+ <%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
50
+ <% end %>
51
+ <%= pb_rails("flex/flex_item") do %>
52
+ <%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
53
+ <% end %>
54
+ <% end %>
55
+ <% end %>
56
+ <% end %>
57
+ <% end %>
58
+ <% end %>
@@ -1,15 +1,13 @@
1
- import React, { useState } from 'react'
1
+ import React from 'react'
2
2
 
3
- import Dropdown from '../../pb_dropdown/_dropdown'
3
+ import Dropdown from '../_dropdown'
4
4
  import Badge from '../../pb_badge/_badge'
5
+ import Flex from '../../pb_flex/_flex'
5
6
  import FlexItem from '../../pb_flex/_flex_item'
6
- import Avatar from '../../pb_avatar/_avatar'
7
7
  import User from '../../pb_user/_user'
8
8
 
9
9
 
10
- const DropdownWithAutocompleteAndCustomDisplay = (props) => {
11
- const [selectedOption, setSelectedOption] = useState();
12
-
10
+ const DropdownWithAutocompleteWithSubcomponents = (props) => {
13
11
  const options = [
14
12
  {
15
13
  label: "Jasper Furniss",
@@ -45,34 +43,21 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
45
43
  }
46
44
  ];
47
45
 
48
- const CustomDisplay = () => {
49
- return (
50
- <>
51
- {
52
- selectedOption && (
53
- <Avatar
54
- name={selectedOption.label}
55
- size="xs"
56
- />
57
- )
58
- }
59
- </>
60
- )
61
- };
62
46
 
63
47
  return (
64
48
  <div>
65
49
  <Dropdown autocomplete
66
- onSelect={(selectedItem) => setSelectedOption(selectedItem)}
67
50
  options={options}
68
51
  {...props}
69
52
  >
70
- <Dropdown.Trigger customDisplay={<CustomDisplay/>} />
71
53
  {options.map((option) => (
72
54
  <Dropdown.Option key={option.id}
73
55
  option={option}
74
56
  >
75
- <>
57
+ <Flex
58
+ align="center"
59
+ justify="between"
60
+ >
76
61
  <FlexItem>
77
62
  <User
78
63
  align="left"
@@ -85,6 +70,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
85
70
  </FlexItem>
86
71
  <FlexItem>
87
72
  <Badge
73
+ dark
88
74
  rounded
89
75
  text={option.status}
90
76
  variant={`${
@@ -96,7 +82,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
96
82
  }`}
97
83
  />
98
84
  </FlexItem>
99
- </>
85
+ </Flex>
100
86
  </Dropdown.Option>
101
87
  ))}
102
88
  </Dropdown>
@@ -104,4 +90,4 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
104
90
  )
105
91
  }
106
92
 
107
- export default DropdownWithAutocompleteAndCustomDisplay
93
+ export default DropdownWithAutocompleteWithSubcomponents
@@ -0,0 +1 @@
1
+ `autocomplete` prop can also be used in conjunction with the subcomponent structure.
@@ -6,6 +6,7 @@ import Flex from '../../pb_flex/_flex'
6
6
  import FlexItem from '../../pb_flex/_flex_item'
7
7
  import Avatar from '../../pb_avatar/_avatar'
8
8
  import User from '../../pb_user/_user'
9
+ import Body from '../../pb_body/_body'
9
10
 
10
11
  const DropdownWithCustomDisplay = (props) => {
11
12
  const [selectedOption, setSelectedOption] = useState();
@@ -50,10 +51,20 @@ const DropdownWithCustomDisplay = (props) => {
50
51
  <>
51
52
  {
52
53
  selectedOption && (
54
+ <Flex align="center">
53
55
  <Avatar
54
56
  name={selectedOption.label}
55
57
  size="xs"
56
58
  />
59
+ <Body
60
+ marginX="xs"
61
+ text={selectedOption.label}
62
+ />
63
+ <Badge
64
+ text={selectedOption.status}
65
+ variant={selectedOption.status == "Offline" ? "neutral" : selectedOption.status == "Online" ? "success" : "warning"}
66
+ />
67
+ </Flex>
57
68
  )
58
69
  }
59
70
  </>
@@ -1,4 +1,4 @@
1
- Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. The component passed to customDisplay will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
1
+ Optionally utilize `customDisplay` on the `Dropdown.Trigger` subcomponent to customize its content after an option is selected. Pass in any combination of kits to create a custom display. When a user clicks on an option, the kits passed into `customDisplay` will display as the selected option.
2
2
 
3
3
  The `placeholder` prop can also be used to customize the placeholder text for the default `Dropdown.Trigger`.
4
4
 
@@ -38,7 +38,11 @@
38
38
 
39
39
  <%
40
40
  custom_display = capture do
41
- pb_rails("avatar", props: { name: "Courtney Long", size: "xs" })
41
+ pb_rails("flex", props: { align: "center" }) do
42
+ concat(pb_rails("avatar", props: { name: "", size: "xs", id: "dropdown-avatar" }))
43
+ concat(pb_rails("body", props: { text: "", size: "xs", margin_x: "xs", id: "dropdown-avatar-name" }))
44
+ concat(pb_rails("badge", props: { text: "", id: "dropdown-avatar-status" }))
45
+ end
42
46
  end
43
47
  %>
44
48
 
@@ -62,4 +66,31 @@
62
66
  <% end %>
63
67
  <% end %>
64
68
  <% end %>
65
- <% end %>
69
+ <% end %>
70
+
71
+
72
+ <script>
73
+ document.addEventListener("pb:dropdown:selected", (e) => {
74
+ const option = e.detail;
75
+ const dropdown = e.target;
76
+
77
+ const display = dropdown.querySelector("#dropdown_trigger_custom_display");
78
+ if (!display) return;
79
+
80
+ const nameEl = display.querySelector("#dropdown-avatar-name");
81
+ if (nameEl) nameEl.textContent = option.label;
82
+
83
+ const avatarEl = display.querySelector("#dropdown-avatar").querySelector(".avatar_wrapper");
84
+ const initials = (option.label[0] + option.label.split(" ").pop()[0]).toUpperCase();
85
+ if (avatarEl) {
86
+ avatarEl.dataset.name = option.label;
87
+ avatarEl.setAttribute("data-initials", initials);
88
+ }
89
+ const badgeEl = display.querySelector("#dropdown-avatar-status");
90
+ const variant = option.status === "Online" ? "success" : option.status === "Offline" ? "neutral" : "warning";
91
+ if (badgeEl) {
92
+ badgeEl.querySelector("span").textContent = option.status;
93
+ badgeEl.className = 'pb_badge_kit_' + variant;
94
+ }
95
+ });
96
+ </script>
@@ -1,4 +1,6 @@
1
- Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. The component passed to custom_display will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
1
+ Optionally utilize `custom_display` on the `dropdown/dropdown_trigger` subcomponent to customize its content after an option is selected. Pass in any combination of kits to create a custom display. When a user clicks on an option, the kits passed into `custom_display` will display as the selected option.
2
+
3
+ Make use of a script to help set the custom_display with the correct value. By using the pb:dropdown:selected event listener, you can target the kits with a querySelector and update them dynamically with the values needed to match the selected option. Make sure to add an ID to the kits being passed in.
2
4
 
3
5
  The `placeholder` prop can also be used to customize the placeholder text for the default `dropdown/dropdown_trigger`.
4
6
 
@@ -0,0 +1 @@
1
+ The `useDropdown` hook can also be used to toggle the dropdown open and closed using an external control. To do so, you must manage state with the custom hook, pass the `dropdown:'pb-dropdown-trigger'` data attribute to the external control and use the `isClosed` prop as shown.
@@ -0,0 +1,61 @@
1
+ import React, { useState } from 'react'
2
+ import Dropdown from '../../pb_dropdown/_dropdown'
3
+ import IconCircle from '../../pb_icon_circle/_icon_circle';
4
+
5
+ const DropdownWithSearch = (props) => {
6
+ const [selectedOption, setSelectedOption] = useState();
7
+
8
+ const options = [
9
+ {
10
+ label: "United States",
11
+ value: "United States",
12
+ icon: "🇺🇸",
13
+ id: "United-states"
14
+
15
+ },
16
+ {
17
+ label: "United Kingdom",
18
+ value: "United Kingdom",
19
+ icon: "🇬🇧",
20
+ id: "united-kingdom"
21
+ },
22
+ {
23
+ label: "Pakistan",
24
+ value: "Pakistan",
25
+ icon: "🇵🇰",
26
+ id: "pakistan"
27
+ }
28
+ ];
29
+
30
+
31
+ return (
32
+ <div>
33
+ <Dropdown
34
+ onSelect={(selectedItem) => setSelectedOption(selectedItem)}
35
+ options={options}
36
+ {...props}
37
+ >
38
+ <Dropdown.Trigger>
39
+ <div key={selectedOption ? selectedOption.icon : "flag"}>
40
+ <IconCircle
41
+ cursor="pointer"
42
+ icon={selectedOption ? selectedOption.icon : "flag"}
43
+ variant="royal"
44
+ />
45
+ </div>
46
+ </Dropdown.Trigger>
47
+ <Dropdown.Container maxWidth="xs"
48
+ searchbar
49
+ >
50
+ {options.map((option) => (
51
+ <Dropdown.Option key={option.id}
52
+ option={option}
53
+ />
54
+ ))}
55
+ </Dropdown.Container>
56
+ </Dropdown>
57
+ </div>
58
+ )
59
+ }
60
+
61
+ export default DropdownWithSearch
@@ -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.