playbook_ui 13.25.0 → 13.26.0.pre.alpha.PBNTR291Dropdownrailsv22840
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/index.js +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +14 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb +33 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.md +24 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_advanced_table/index.js +78 -0
- data/app/pb_kits/playbook/pb_advanced_table/table_body.rb +4 -2
- data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +3 -2
- data/app/pb_kits/playbook/pb_avatar/Utilities/GetPlacementPropsHelper.tsx +44 -0
- data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +86 -21
- data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +26 -3
- data/app/pb_kits/playbook/pb_avatar/avatar.rb +41 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb +71 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +77 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb +71 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +77 -0
- data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +20 -0
- data/app/pb_kits/playbook/pb_avatar/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_avatar/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +1 -1
- data/app/pb_kits/playbook/pb_body/_body.tsx +1 -1
- data/app/pb_kits/playbook/pb_button/_button.scss +1 -1
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +49 -0
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +3 -0
- data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +2 -1
- data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js +14 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.html.erb +23 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.jsx +29 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_alignment_swift.md +43 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_props_swift.md +12 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_size_swift.md +31 -0
- data/app/pb_kits/playbook/pb_currency/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md +3 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md +3 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
- data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default_swift.md +14 -0
- data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_props_swift.md +9 -0
- data/app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_dialog/_dialog.scss +4 -2
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +102 -35
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +95 -26
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +4 -22
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb +17 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +42 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +7 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +84 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +101 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb +60 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +6 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +5 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb +45 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +6 -9
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +17 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +48 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb +47 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +5 -5
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +59 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +72 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +39 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +16 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +7 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +26 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +20 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +200 -10
- data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +21 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +19 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb +27 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown_option.rb +22 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +43 -0
- data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb +30 -0
- data/app/pb_kits/playbook/pb_dropdown/hooks/useDropdown.tsx +2 -2
- data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx +14 -9
- data/app/pb_kits/playbook/pb_dropdown/index.js +153 -0
- data/app/pb_kits/playbook/pb_dropdown/keyboard_accessibility.js +77 -0
- data/app/pb_kits/playbook/pb_dropdown/scss_partials/_dropdown_animation.scss +18 -0
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +22 -8
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +60 -31
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +130 -68
- data/app/pb_kits/playbook/pb_dropdown/utilities/clickOutsideHelper.tsx +41 -0
- data/app/pb_kits/playbook/pb_dropdown/utilities/index.ts +2 -0
- data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx +9 -7
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +3 -1
- data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.html.erb +13 -0
- data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_custom.jsx +26 -0
- data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.html.erb → _loading_inline_default.html.erb} +2 -2
- data/app/pb_kits/playbook/pb_loading_inline/docs/{_loading_inline_light.jsx → _loading_inline_default.jsx} +2 -2
- data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml +4 -2
- data/app/pb_kits/playbook/pb_loading_inline/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +1 -1
- data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb +1 -0
- data/app/pb_kits/playbook/pb_loading_inline/loading_inline.test.js +14 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.html.erb +3 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx +16 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.md +1 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb +1 -1
- data/app/pb_kits/playbook/pb_radio/_radio.scss +35 -0
- data/app/pb_kits/playbook/pb_radio/_radio.tsx +3 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx +4 -1
- data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx +4 -1
- data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.html.erb +26 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.jsx +31 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx +2 -1
- data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_radio/radio.rb +5 -0
- data/app/pb_kits/playbook/pb_radio/radio.test.js +17 -0
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss +6 -2
- data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss +11 -1
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +1 -1
- data/app/pb_kits/playbook/playbook-rails.js +6 -0
- data/dist/menu.yml +1 -1
- data/dist/playbook-rails.js +6 -6
- data/lib/playbook/version.rb +2 -2
- metadata +65 -8
- data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +0 -1
@@ -0,0 +1,101 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
import { Dropdown, User, Badge, FlexItem, Avatar } from '../..'
|
3
|
+
|
4
|
+
const DropdownWithAutocompleteAndCustomDisplay = (props) => {
|
5
|
+
const [selectedOption, setSelectedOption] = useState();
|
6
|
+
|
7
|
+
const options = [
|
8
|
+
{
|
9
|
+
label: "Jasper Furniss",
|
10
|
+
value: "Jasper Furniss",
|
11
|
+
territory: "PHL",
|
12
|
+
title: "Senior UX Engineer",
|
13
|
+
id: "jasper-furniss",
|
14
|
+
status: "Offline"
|
15
|
+
},
|
16
|
+
{
|
17
|
+
label: "Ramon Ruiz",
|
18
|
+
value: "Ramon Ruiz",
|
19
|
+
territory: "PHL",
|
20
|
+
title: "Senior UX Designer",
|
21
|
+
id: "ramon-ruiz",
|
22
|
+
status: "Away"
|
23
|
+
},
|
24
|
+
{
|
25
|
+
label: "Jason Cypret",
|
26
|
+
value: "Jason Cypret",
|
27
|
+
territory: "PHL",
|
28
|
+
title: "VP of User Experience",
|
29
|
+
id: "jason-cypret",
|
30
|
+
status: "Online"
|
31
|
+
},
|
32
|
+
{
|
33
|
+
label: "Courtney Long",
|
34
|
+
value: "Courtney Long",
|
35
|
+
territory: "PHL",
|
36
|
+
title: "UX Design Mentor",
|
37
|
+
id: "courtney-long",
|
38
|
+
status: "Online"
|
39
|
+
}
|
40
|
+
];
|
41
|
+
|
42
|
+
const CustomDisplay = () => {
|
43
|
+
return (
|
44
|
+
<>
|
45
|
+
{
|
46
|
+
selectedOption && (
|
47
|
+
<Avatar
|
48
|
+
name={selectedOption.label}
|
49
|
+
size="xs"
|
50
|
+
/>
|
51
|
+
)
|
52
|
+
}
|
53
|
+
</>
|
54
|
+
)
|
55
|
+
};
|
56
|
+
|
57
|
+
return (
|
58
|
+
<div>
|
59
|
+
<Dropdown autocomplete
|
60
|
+
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
|
61
|
+
options={options}
|
62
|
+
{...props}
|
63
|
+
>
|
64
|
+
<Dropdown.Trigger customDisplay={<CustomDisplay/>} />
|
65
|
+
{options.map((option) => (
|
66
|
+
<Dropdown.Option key={option.id}
|
67
|
+
option={option}
|
68
|
+
>
|
69
|
+
<>
|
70
|
+
<FlexItem>
|
71
|
+
<User
|
72
|
+
align="left"
|
73
|
+
avatar
|
74
|
+
name={option.label}
|
75
|
+
orientation="horizontal"
|
76
|
+
territory={option.territory}
|
77
|
+
title={option.title}
|
78
|
+
/>
|
79
|
+
</FlexItem>
|
80
|
+
<FlexItem>
|
81
|
+
<Badge
|
82
|
+
rounded
|
83
|
+
text={option.status}
|
84
|
+
variant={`${
|
85
|
+
option.status === "Offline"
|
86
|
+
? "neutral"
|
87
|
+
: option.status === "Online"
|
88
|
+
? "success"
|
89
|
+
: "warning"
|
90
|
+
}`}
|
91
|
+
/>
|
92
|
+
</FlexItem>
|
93
|
+
</>
|
94
|
+
</Dropdown.Option>
|
95
|
+
))}
|
96
|
+
</Dropdown>
|
97
|
+
</div>
|
98
|
+
)
|
99
|
+
}
|
100
|
+
|
101
|
+
export default DropdownWithAutocompleteAndCustomDisplay
|
@@ -0,0 +1 @@
|
|
1
|
+
`autocomplete` prop can also be used in conjunction with the `customDisplay` prop.
|
@@ -0,0 +1,60 @@
|
|
1
|
+
<%
|
2
|
+
options = [
|
3
|
+
{
|
4
|
+
label: "Jasper Furniss",
|
5
|
+
value: "Jasper Furniss",
|
6
|
+
territory: "PHL",
|
7
|
+
title: "Senior 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: "Jason Cypret",
|
21
|
+
value: "Jason Cypret",
|
22
|
+
territory: "PHL",
|
23
|
+
title: "VP of User Experience",
|
24
|
+
id: "jason-cypret",
|
25
|
+
status: "Online"
|
26
|
+
},
|
27
|
+
{
|
28
|
+
label: "Courtney Long",
|
29
|
+
value: "Courtney Long",
|
30
|
+
territory: "PHL",
|
31
|
+
title: "UX Design Mentor",
|
32
|
+
id: "courtney-long",
|
33
|
+
status: "Online"
|
34
|
+
}
|
35
|
+
]
|
36
|
+
|
37
|
+
%>
|
38
|
+
|
39
|
+
<%
|
40
|
+
custom_display = capture do
|
41
|
+
pb_rails("avatar", props: { name: "Courtney Long", size: "xs" })
|
42
|
+
end
|
43
|
+
%>
|
44
|
+
|
45
|
+
|
46
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
47
|
+
<%= pb_rails("dropdown/dropdown_trigger", props: {placeholder: "Select a User", custom_display: custom_display}) %>
|
48
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
49
|
+
<% options.each do |option| %>
|
50
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
|
51
|
+
<%= pb_rails("flex/flex_item") do %>
|
52
|
+
<%= pb_rails("user", props: {name: option[:label], align:"left", avatar: true, orientation:"horizontal", territory:option[:territory], title: option[:title]}) %>
|
53
|
+
<% end %>
|
54
|
+
<%= pb_rails("flex/flex_item") do %>
|
55
|
+
<%= pb_rails("badge", props: {rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
|
56
|
+
<% end %>
|
57
|
+
<% end %>
|
58
|
+
<% end %>
|
59
|
+
<% end %>
|
60
|
+
<% end %>
|
@@ -17,7 +17,7 @@ const DropdownWithCustomDisplay = (props) => {
|
|
17
17
|
label: "Ramon Ruiz",
|
18
18
|
value: "Ramon Ruiz",
|
19
19
|
territory: "PHL",
|
20
|
-
title: "Senior UX
|
20
|
+
title: "Senior UX Designer",
|
21
21
|
id: "ramon-ruiz",
|
22
22
|
status: "Away"
|
23
23
|
},
|
@@ -39,7 +39,7 @@ const DropdownWithCustomDisplay = (props) => {
|
|
39
39
|
}
|
40
40
|
];
|
41
41
|
|
42
|
-
const
|
42
|
+
const CustomDisplay = () => {
|
43
43
|
return (
|
44
44
|
<>
|
45
45
|
{
|
@@ -62,7 +62,9 @@ const DropdownWithCustomDisplay = (props) => {
|
|
62
62
|
options={options}
|
63
63
|
{...props}
|
64
64
|
>
|
65
|
-
<Dropdown.Trigger customDisplay={
|
65
|
+
<Dropdown.Trigger customDisplay={<CustomDisplay/>}
|
66
|
+
placeholder="Select a User"
|
67
|
+
/>
|
66
68
|
{options.map((option) => (
|
67
69
|
<Dropdown.Option key={option.id}
|
68
70
|
option={option}
|
@@ -79,7 +81,7 @@ const DropdownWithCustomDisplay = (props) => {
|
|
79
81
|
/>
|
80
82
|
</FlexItem>
|
81
83
|
<FlexItem>
|
82
|
-
<Badge
|
84
|
+
<Badge dark
|
83
85
|
rounded
|
84
86
|
text={option.status}
|
85
87
|
variant={`${
|
@@ -0,0 +1,5 @@
|
|
1
|
+
The `customDisplay` prop can be used to customize the display of the selected item by allowing devs to pass in a component that will be rendered to the left of the default text-based display. In this example the Avatar kit is being used.
|
2
|
+
|
3
|
+
The `placeholder` prop can also be used to customize the placeholder text for the default Trigger.
|
4
|
+
|
5
|
+
The `onSelect` prop is a function that gives the dev one argument: the selected option. In this example we are using the `onSelect` to set a state with the selected option and using it to customize the `customDisplay`.
|
@@ -0,0 +1,45 @@
|
|
1
|
+
<%
|
2
|
+
options = [
|
3
|
+
{
|
4
|
+
label: "United States",
|
5
|
+
value: "United States",
|
6
|
+
areaCode: "+1",
|
7
|
+
icon: "🇺🇸",
|
8
|
+
id: "us"
|
9
|
+
},
|
10
|
+
{
|
11
|
+
label: "Canada",
|
12
|
+
value: "Canada",
|
13
|
+
areaCode: "+1",
|
14
|
+
icon: "🇨🇦",
|
15
|
+
id: "ca"
|
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") %>
|
30
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
31
|
+
<% options.each do |option| %>
|
32
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
|
33
|
+
<%= pb_rails("flex/flex_item") do %>
|
34
|
+
<%= pb_rails("flex") do %>
|
35
|
+
<%= pb_rails("icon", props: {icon: option[:icon]}) %>
|
36
|
+
<%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
|
37
|
+
<% end %>
|
38
|
+
<% end %>
|
39
|
+
<%= pb_rails("flex/flex_item") do %>
|
40
|
+
<%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
|
41
|
+
<% end %>
|
42
|
+
<% end %>
|
43
|
+
<% end %>
|
44
|
+
<% end %>
|
45
|
+
<% end %>
|
@@ -1,9 +1,7 @@
|
|
1
|
-
import React
|
1
|
+
import React from 'react'
|
2
2
|
import { Dropdown, Icon, Body, FlexItem, Flex } from '../..'
|
3
3
|
|
4
4
|
const DropdownWithCustomOptions = (props) => {
|
5
|
-
// eslint-disable-next-line no-unused-vars
|
6
|
-
const [selectedOption, setSelectedOption] = useState();
|
7
5
|
|
8
6
|
const options = [
|
9
7
|
{
|
@@ -14,11 +12,11 @@ const DropdownWithCustomOptions = (props) => {
|
|
14
12
|
id: "United-states"
|
15
13
|
},
|
16
14
|
{
|
17
|
-
label: "
|
18
|
-
value: "
|
19
|
-
areaCode: "+
|
20
|
-
icon: "
|
21
|
-
id: "
|
15
|
+
label: "Canada",
|
16
|
+
value: "Canada",
|
17
|
+
areaCode: "+1",
|
18
|
+
icon: "🇨🇦",
|
19
|
+
id: "canada"
|
22
20
|
},
|
23
21
|
{
|
24
22
|
label: "Pakistan",
|
@@ -33,7 +31,6 @@ const DropdownWithCustomOptions = (props) => {
|
|
33
31
|
return (
|
34
32
|
<div>
|
35
33
|
<Dropdown
|
36
|
-
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
|
37
34
|
options={options}
|
38
35
|
{...props}
|
39
36
|
>
|
@@ -0,0 +1 @@
|
|
1
|
+
The Dropdown also allows for custom options that can be passed in as children to the `Dropdown.Option` subcomponent. If no children are passed to `Dropdown.Option`, the kit will render each option as text within a Body kit by default.
|
@@ -0,0 +1,17 @@
|
|
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
|
+
]
|
7
|
+
|
8
|
+
%>
|
9
|
+
|
10
|
+
<%= pb_rails("dropdown", props: {options: options}) do %>
|
11
|
+
<%= pb_rails("dropdown/dropdown_trigger") %>
|
12
|
+
<%= pb_rails("dropdown/dropdown_container") do %>
|
13
|
+
<% options.each do |option| %>
|
14
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option, padding:"sm"}) %>
|
15
|
+
<% end %>
|
16
|
+
<% end %>
|
17
|
+
<% end %>
|
@@ -0,0 +1,48 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Dropdown } from '../..'
|
3
|
+
|
4
|
+
const DropdownWithCustomPadding = (props) => {
|
5
|
+
|
6
|
+
const options = [
|
7
|
+
{
|
8
|
+
label: "United States",
|
9
|
+
value: "United States",
|
10
|
+
areaCode: "+1",
|
11
|
+
icon: "🇺🇸",
|
12
|
+
id: "United-states"
|
13
|
+
},
|
14
|
+
{
|
15
|
+
label: "Canada",
|
16
|
+
value: "Canada",
|
17
|
+
areaCode: "+1",
|
18
|
+
icon: "🇨🇦",
|
19
|
+
id: "canada"
|
20
|
+
},
|
21
|
+
{
|
22
|
+
label: "Pakistan",
|
23
|
+
value: "Pakistan",
|
24
|
+
areaCode: "+92",
|
25
|
+
icon: "🇵🇰",
|
26
|
+
id: "pakistan"
|
27
|
+
}
|
28
|
+
];
|
29
|
+
|
30
|
+
|
31
|
+
return (
|
32
|
+
<div>
|
33
|
+
<Dropdown
|
34
|
+
options={options}
|
35
|
+
{...props}
|
36
|
+
>
|
37
|
+
{options.map((option) => (
|
38
|
+
<Dropdown.Option key={option.id}
|
39
|
+
option={option}
|
40
|
+
padding="sm"
|
41
|
+
/>
|
42
|
+
))}
|
43
|
+
</Dropdown>
|
44
|
+
</div>
|
45
|
+
)
|
46
|
+
}
|
47
|
+
|
48
|
+
export default DropdownWithCustomPadding
|
@@ -0,0 +1 @@
|
|
1
|
+
By default, the padding on each option in the dropdown is set to `xs`. The `padding` Global Props however can be used to override this default. In this example, we are setting padding to `sm`.
|
@@ -0,0 +1,47 @@
|
|
1
|
+
<%
|
2
|
+
options = [
|
3
|
+
{
|
4
|
+
label: "United States",
|
5
|
+
value: "United States",
|
6
|
+
areaCode: "+1",
|
7
|
+
icon: "🇺🇸",
|
8
|
+
id: "us"
|
9
|
+
},
|
10
|
+
{
|
11
|
+
label: "Canada",
|
12
|
+
value: "Canada",
|
13
|
+
areaCode: "+1",
|
14
|
+
icon: "🇨🇦",
|
15
|
+
id: "ca"
|
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"}) do %>
|
33
|
+
<% options.each do |option| %>
|
34
|
+
<%= pb_rails("dropdown/dropdown_option", props: {option: option}) do %>
|
35
|
+
<%= pb_rails("flex/flex_item") do %>
|
36
|
+
<%= pb_rails("flex") do %>
|
37
|
+
<%= pb_rails("icon", props: {icon: option[:icon]}) %>
|
38
|
+
<%= pb_rails("body", props: {text: option[:label], padding_left:"xs"}) %>
|
39
|
+
<% end %>
|
40
|
+
<% end %>
|
41
|
+
<%= pb_rails("flex/flex_item") do %>
|
42
|
+
<%= pb_rails("body", props: {color:"light", text: option[:areaCode]}) %>
|
43
|
+
<% end %>
|
44
|
+
<% end %>
|
45
|
+
<% end %>
|
46
|
+
<% end %>
|
47
|
+
<% end %>
|
@@ -14,11 +14,11 @@ const [selectedOption, setSelectedOption] = useState();
|
|
14
14
|
id: "United-states"
|
15
15
|
},
|
16
16
|
{
|
17
|
-
label: "
|
18
|
-
value: "
|
19
|
-
areaCode: "+
|
20
|
-
icon: "
|
21
|
-
id: "
|
17
|
+
label: "Canada",
|
18
|
+
value: "Canada",
|
19
|
+
areaCode: "+1",
|
20
|
+
icon: "🇨🇦",
|
21
|
+
id: "canada"
|
22
22
|
},
|
23
23
|
{
|
24
24
|
label: "Pakistan",
|
@@ -0,0 +1 @@
|
|
1
|
+
The Dropdown can also be given a custom Trigger by passing children to the `Dropdown.Trigger` subcomponent as shown in this example. Here we are using the IconCircle kit.
|
@@ -0,0 +1,59 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Dropdown, useDropdown, Button } from '../../'
|
3
|
+
|
4
|
+
const DropdownWithExternalControl = (props) => {
|
5
|
+
const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
|
6
|
+
|
7
|
+
const options = [
|
8
|
+
{
|
9
|
+
label: "United States",
|
10
|
+
value: "United States",
|
11
|
+
areaCode: "+1",
|
12
|
+
icon: "🇺🇸",
|
13
|
+
id: "United-states"
|
14
|
+
},
|
15
|
+
{
|
16
|
+
label: "Canada",
|
17
|
+
value: "Canada",
|
18
|
+
areaCode: "+1",
|
19
|
+
icon: "🇨🇦",
|
20
|
+
id: "canada"
|
21
|
+
},
|
22
|
+
{
|
23
|
+
label: "Pakistan",
|
24
|
+
value: "Pakistan",
|
25
|
+
areaCode: "+92",
|
26
|
+
icon: "🇵🇰",
|
27
|
+
id: "pakistan"
|
28
|
+
}
|
29
|
+
];
|
30
|
+
|
31
|
+
return (
|
32
|
+
<div>
|
33
|
+
<Button
|
34
|
+
data={{dropdown:'pb-dropdown-trigger'}}
|
35
|
+
marginBottom='sm'
|
36
|
+
onClick={() => setIsDropdownClosed(!isDropDownClosed)}
|
37
|
+
padding="none"
|
38
|
+
tabIndex={0}
|
39
|
+
variant="link"
|
40
|
+
>
|
41
|
+
{isDropDownClosed ? "Open Dropdown" : "Close Dropdown"}
|
42
|
+
</Button>
|
43
|
+
|
44
|
+
<Dropdown
|
45
|
+
isClosed={isDropDownClosed}
|
46
|
+
options={options}
|
47
|
+
{...props}
|
48
|
+
>
|
49
|
+
{options.map((option) => (
|
50
|
+
<Dropdown.Option key={option.id}
|
51
|
+
option={option}
|
52
|
+
/>
|
53
|
+
))}
|
54
|
+
</Dropdown>
|
55
|
+
</div>
|
56
|
+
)
|
57
|
+
}
|
58
|
+
|
59
|
+
export default DropdownWithExternalControl
|
@@ -0,0 +1,72 @@
|
|
1
|
+
import React, { useRef } from 'react'
|
2
|
+
import { Dropdown, useDropdown, CircleIconButton, Icon, Body, FlexItem, Flex } from '../..'
|
3
|
+
|
4
|
+
const DropdownWithHook = (props) => {
|
5
|
+
const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
|
6
|
+
const buttonRef = useRef(null);
|
7
|
+
|
8
|
+
const options = [
|
9
|
+
{
|
10
|
+
label: "United States",
|
11
|
+
value: "United States",
|
12
|
+
areaCode: "+1",
|
13
|
+
icon: "🇺🇸",
|
14
|
+
id: "United-states"
|
15
|
+
},
|
16
|
+
{
|
17
|
+
label: "Canada",
|
18
|
+
value: "Canada",
|
19
|
+
areaCode: "+1",
|
20
|
+
icon: "🇨🇦",
|
21
|
+
id: "canada"
|
22
|
+
},
|
23
|
+
{
|
24
|
+
label: "Pakistan",
|
25
|
+
value: "Pakistan",
|
26
|
+
areaCode: "+92",
|
27
|
+
icon: "🇵🇰",
|
28
|
+
id: "pakistan"
|
29
|
+
}
|
30
|
+
];
|
31
|
+
|
32
|
+
return (
|
33
|
+
<div>
|
34
|
+
<CircleIconButton
|
35
|
+
htmlOptions={{ref: buttonRef}}
|
36
|
+
icon={"flag"}
|
37
|
+
onClick={() => setIsDropdownClosed(!isDropDownClosed)}
|
38
|
+
variant="secondary"
|
39
|
+
/>
|
40
|
+
<Dropdown
|
41
|
+
isClosed={isDropDownClosed}
|
42
|
+
options={options}
|
43
|
+
triggerRef={buttonRef}
|
44
|
+
{...props}
|
45
|
+
>
|
46
|
+
{options.map((option) => (
|
47
|
+
<Dropdown.Option key={option.id}
|
48
|
+
option={option}
|
49
|
+
>
|
50
|
+
<>
|
51
|
+
<FlexItem>
|
52
|
+
<Flex paddingRight='md'>
|
53
|
+
<Icon icon={option.icon}
|
54
|
+
paddingRight="xs"
|
55
|
+
/>
|
56
|
+
<Body text={option.label} />
|
57
|
+
</Flex>
|
58
|
+
</FlexItem>
|
59
|
+
<FlexItem>
|
60
|
+
<Body color="light"
|
61
|
+
text={option.areaCode}
|
62
|
+
/>
|
63
|
+
</FlexItem>
|
64
|
+
</>
|
65
|
+
</Dropdown.Option>
|
66
|
+
))}
|
67
|
+
</Dropdown>
|
68
|
+
</div>
|
69
|
+
)
|
70
|
+
}
|
71
|
+
|
72
|
+
export default DropdownWithHook
|
@@ -0,0 +1,10 @@
|
|
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
|
+
]
|
7
|
+
|
8
|
+
%>
|
9
|
+
|
10
|
+
<%= pb_rails("dropdown", props: {options: options, label: "Select a Country"}) %>
|
@@ -0,0 +1,39 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Dropdown } from '../..'
|
3
|
+
|
4
|
+
const DropdownDefault = (props) => {
|
5
|
+
|
6
|
+
const options = [
|
7
|
+
{
|
8
|
+
label: "United States",
|
9
|
+
value: "United States",
|
10
|
+
},
|
11
|
+
{
|
12
|
+
label: "Canada",
|
13
|
+
value: "Canada",
|
14
|
+
},
|
15
|
+
{
|
16
|
+
label: "Pakistan",
|
17
|
+
value: "Pakistan",
|
18
|
+
}
|
19
|
+
];
|
20
|
+
|
21
|
+
|
22
|
+
return (
|
23
|
+
<div>
|
24
|
+
<Dropdown
|
25
|
+
label="Select a Country"
|
26
|
+
options={options}
|
27
|
+
{...props}
|
28
|
+
>
|
29
|
+
{options.map((option) => (
|
30
|
+
<Dropdown.Option key={option.id}
|
31
|
+
option={option}
|
32
|
+
/>
|
33
|
+
))}
|
34
|
+
</Dropdown>
|
35
|
+
</div>
|
36
|
+
)
|
37
|
+
}
|
38
|
+
|
39
|
+
export default DropdownDefault
|
@@ -0,0 +1 @@
|
|
1
|
+
The optional `label` prop takes a string value that if present will render that string as the label for the Dropdown.
|
@@ -1,9 +1,23 @@
|
|
1
1
|
examples:
|
2
|
-
|
3
|
-
|
2
|
+
rails:
|
3
|
+
- dropdown_default: Default
|
4
|
+
- dropdown_subcomponent_structure: Subcomponent Structure
|
5
|
+
- dropdown_with_label: With Label
|
6
|
+
- dropdown_with_custom_options: Custom Options
|
7
|
+
- dropdown_with_custom_display: Custom Display
|
8
|
+
- dropdown_with_custom_trigger: Custom Trigger
|
9
|
+
- dropdown_with_custom_padding: Custom Padding for Dropdown Options
|
10
|
+
|
4
11
|
react:
|
5
12
|
- dropdown_default: Default
|
13
|
+
- dropdown_subcomponent_structure: Subcomponent Structure
|
14
|
+
- dropdown_with_label: With Label
|
6
15
|
- dropdown_with_custom_options: Custom Options
|
7
16
|
- dropdown_with_custom_display: Custom Display
|
8
17
|
- dropdown_with_custom_trigger: Custom Trigger
|
18
|
+
- dropdown_with_custom_padding: Custom Padding for Dropdown Options
|
19
|
+
# - dropdown_with_autocomplete: Autocomplete
|
20
|
+
# - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
|
21
|
+
# - dropdown_with_external_control: useDropdown Hook
|
22
|
+
# - dropdown_with_hook: useDropdown Hook with Any Trigger
|
9
23
|
|
@@ -2,3 +2,10 @@ export { default as DropdownDefault } from './_dropdown_default.jsx'
|
|
2
2
|
export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_display.jsx'
|
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
|
+
export { default as DropdownWithAutocomplete } from './_dropdown_with_autocomplete.jsx'
|
6
|
+
export { default as DropdownWithAutocompleteAndCustomDisplay } from './_dropdown_with_autocomplete_and_custom_display.jsx'
|
7
|
+
export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_padding.jsx'
|
8
|
+
export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
|
9
|
+
export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
|
10
|
+
export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
|
11
|
+
export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'
|