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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md +5 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.jsx +57 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.md +4 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.jsx +62 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_multi.jsx +82 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_multi.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.jsx +66 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions_rails.html.erb +137 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions_rails.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header_rails.html.erb +40 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header_rails.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md +5 -1
- 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
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md +3 -2
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +9 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +6 -2
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.html.erb +5 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_grayscale.jsx +16 -0
- data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_avatar/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +2 -48
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_rails.md +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb +2 -2
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones.html.erb +22 -1
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line.html.erb +55 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_line_rails.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_drop_zones_rails.md +5 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners.jsx +59 -0
- data/app/pb_kits/playbook/pb_draggable/docs/_draggable_event_listeners_react.md +1 -0
- data/app/pb_kits/playbook/pb_draggable/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_draggable/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb +31 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.md +5 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +5 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx +56 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.md +3 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx +58 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.md +3 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb +20 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.html.erb +19 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.md +3 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb +20 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.jsx +57 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.html.erb +50 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.jsx +105 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.html.erb +22 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx +67 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +28 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +17 -64
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +58 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/{_dropdown_with_autocomplete_and_custom_display.jsx → _dropdown_with_autocomplete_with_subcomponents.jsx} +11 -25
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +11 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +33 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md +3 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +61 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.md +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +52 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.md +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +18 -5
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +7 -2
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_alignment.html.erb +27 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_default.html.erb +7 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_orientation.html.erb +12 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/_empty_state_size.html.erb +23 -0
- data/app/pb_kits/playbook/pb_empty_state/docs/example.yml +5 -1
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.html.erb +1 -0
- data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.jsx +41 -0
- data/app/pb_kits/playbook/pb_file_upload/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_file_upload/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
- data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.html.erb +9 -0
- data/app/pb_kits/playbook/pb_message/docs/_message_grayscale.jsx +21 -0
- data/app/pb_kits/playbook/pb_message/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_message/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md +2 -0
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md +3 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +11 -11
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_vertical_dynamic_multi_directional.jsx +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.html.erb +4 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.jsx +15 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_exclude_countries.md +1 -0
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_only_countries.jsx +1 -1
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +4 -3
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.html.erb +12 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.jsx +31 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.md +1 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_select/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_custom_click.jsx +7 -7
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.html.erb +1 -1
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb +5 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.html.erb +8 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.jsx +23 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.md +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.html.erb +6 -0
- data/app/pb_kits/playbook/pb_user/docs/_user_grayscale.jsx +16 -0
- data/app/pb_kits/playbook/pb_user/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_user/docs/index.js +1 -0
- data/dist/playbook-doc.js +2 -2
- metadata +72 -15
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +0 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +0 -79
- data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +0 -53
- data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +0 -7
- data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +0 -1
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows_react.md → _advanced_table_selectable_rows.md} +0 -0
- /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
- /data/app/pb_kits/playbook/pb_advanced_table/docs/{_advanced_table_selectable_rows.html.erb → _advanced_table_selectable_rows_rails.html.erb} +0 -0
- /data/app/pb_kits/playbook/pb_draggable/docs/{_draggable_drop_zones_line.md → _draggable_drop_zones_line_react.md} +0 -0
- /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: "
|
13
|
-
value: "
|
14
|
-
|
15
|
-
|
16
|
-
id: "
|
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: "
|
21
|
-
value: "
|
22
|
-
|
23
|
-
|
24
|
-
id: "
|
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: "
|
29
|
-
value: "
|
30
|
-
|
31
|
-
|
32
|
-
id: "
|
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
|
}
|
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb
ADDED
@@ -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
|
1
|
+
import React from 'react'
|
2
2
|
|
3
|
-
import Dropdown from '
|
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
|
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
|
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.
|
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("
|
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.
|
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
|