playbook_ui_docs 13.25.0 → 13.26.0.pre.alpha.jasoncypretpatch12820
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.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_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_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_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_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_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_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/dist/app/components/playbook/pb_docs/advanced_table_mock_data.json +278 -0
- data/dist/menu.yml +1 -1
- data/dist/playbook-doc.js +9 -9
- metadata +51 -8
- data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +0 -1
@@ -0,0 +1,9 @@
|
|
1
|
+
### Props
|
2
|
+
| Name | Type | Description | Default | Values |
|
3
|
+
| --- | ----------- | --------- | --------- | --------- |
|
4
|
+
| **startDate** | `Date()` | Takes a string value to set the starting date range value | `Date()` | |
|
5
|
+
| **endDate** | `Date()` | Takes a string value to set the ending date range value | `Date()` | |
|
6
|
+
| **startAlignment** | `Alignment` | Changes the alignment of the starting date | `.leading` | `.leading` `.trailing` |
|
7
|
+
| **endAlignment** | `Alignment` | Changes the alignment of the ending date | `.leading` | `.leading` `.trailing` |
|
8
|
+
| **startVariant** | `PBDate.Variant` | Changes the style of the starting date | `.short(showIcon: false)` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
|
9
|
+
| **endVariant** | `PBDate.Variant` | Changes the style of the ending date | `.short(showIcon: false)` | `.short(showIcon: false)` `.dayDate` `.standard` `.withIcon(isStandard: true)` `withIcon(isStandard: false)` |
|
@@ -1,31 +1,20 @@
|
|
1
|
-
import React
|
1
|
+
import React from 'react'
|
2
2
|
import { Dropdown } from '../../'
|
3
3
|
|
4
4
|
const DropdownDefault = (props) => {
|
5
|
-
// eslint-disable-next-line no-unused-vars
|
6
|
-
const [selectedOption, setSelectedOption] = useState();
|
7
5
|
|
8
6
|
const options = [
|
9
7
|
{
|
10
8
|
label: "United States",
|
11
9
|
value: "United States",
|
12
|
-
areaCode: "+1",
|
13
|
-
icon: "🇺🇸",
|
14
|
-
id: "United-states"
|
15
10
|
},
|
16
11
|
{
|
17
|
-
label: "
|
18
|
-
value: "
|
19
|
-
areaCode: "+380",
|
20
|
-
icon: "🇺🇦",
|
21
|
-
id: "ukraine"
|
12
|
+
label: "Canada",
|
13
|
+
value: "Canada",
|
22
14
|
},
|
23
15
|
{
|
24
16
|
label: "Pakistan",
|
25
17
|
value: "Pakistan",
|
26
|
-
areaCode: "+92",
|
27
|
-
icon: "🇵🇰",
|
28
|
-
id: "pakistan"
|
29
18
|
}
|
30
19
|
];
|
31
20
|
|
@@ -33,16 +22,9 @@ const [selectedOption, setSelectedOption] = useState();
|
|
33
22
|
return (
|
34
23
|
<div>
|
35
24
|
<Dropdown
|
36
|
-
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
|
37
25
|
options={options}
|
38
26
|
{...props}
|
39
|
-
|
40
|
-
{options.map((option) => (
|
41
|
-
<Dropdown.Option key={option.id}
|
42
|
-
option={option}
|
43
|
-
/>
|
44
|
-
))}
|
45
|
-
</Dropdown>
|
27
|
+
/>
|
46
28
|
</div>
|
47
29
|
)
|
48
30
|
}
|
@@ -0,0 +1 @@
|
|
1
|
+
The Dropdown kit accepts an `options` array and renders each object from that array as a selectable option within a dropdown container. `options` is a required prop and must be an array of objects. Each object can contain as many key/value pairs as needed but MUST contain 'label' and 'value' as the only required items within each object.
|
@@ -0,0 +1,17 @@
|
|
1
|
+
<%
|
2
|
+
options = [
|
3
|
+
{ label: 'United States', value: 'United States' },
|
4
|
+
{ label: 'Canada', value: 'Canada' },
|
5
|
+
{ label: 'Pakistan', value: 'Pakistan' },
|
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}) %>
|
15
|
+
<% end %>
|
16
|
+
<% end %>
|
17
|
+
<% end %>
|
@@ -0,0 +1,42 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Dropdown } from '../..'
|
3
|
+
|
4
|
+
const DropdownSubcomponentStructure = (props) => {
|
5
|
+
|
6
|
+
|
7
|
+
const options = [
|
8
|
+
{
|
9
|
+
label: "United States",
|
10
|
+
value: "United States",
|
11
|
+
},
|
12
|
+
{
|
13
|
+
label: "Canada",
|
14
|
+
value: "Canada",
|
15
|
+
},
|
16
|
+
{
|
17
|
+
label: "Pakistan",
|
18
|
+
value: "Pakistan",
|
19
|
+
}
|
20
|
+
];
|
21
|
+
|
22
|
+
|
23
|
+
return (
|
24
|
+
<div>
|
25
|
+
<Dropdown
|
26
|
+
options={options}
|
27
|
+
{...props}
|
28
|
+
>
|
29
|
+
<Dropdown.Trigger/>
|
30
|
+
<Dropdown.Container>
|
31
|
+
{options.map((option) => (
|
32
|
+
<Dropdown.Option key={option.id}
|
33
|
+
option={option}
|
34
|
+
/>
|
35
|
+
))}
|
36
|
+
</Dropdown.Container>
|
37
|
+
</Dropdown>
|
38
|
+
</div>
|
39
|
+
)
|
40
|
+
}
|
41
|
+
|
42
|
+
export default DropdownSubcomponentStructure
|
@@ -0,0 +1,7 @@
|
|
1
|
+
The dropdown comes with the following subcomponents that can be used to achieve various levels of customization:
|
2
|
+
|
3
|
+
`Dropdown. Trigger` / `dropdown/dropdown_trigger`
|
4
|
+
`Dropdown.Container`/ `dropdown/dropdown_container`
|
5
|
+
`Dropdown.Option` / `dropdown/dropdown_option`
|
6
|
+
|
7
|
+
See the code snippet below for a visual on how to use the kit with subcomponents. Each subcomponent allows for GlobalProps in addition to any subcomponent specfic props.
|
@@ -0,0 +1,84 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Dropdown, User, Badge, FlexItem } from '../..'
|
3
|
+
|
4
|
+
const DropdownWithAutocomplete = (props) => {
|
5
|
+
|
6
|
+
const options = [
|
7
|
+
{
|
8
|
+
label: "Jasper Furniss",
|
9
|
+
value: "Jasper Furniss",
|
10
|
+
territory: "PHL",
|
11
|
+
title: "Senior UX Engineer",
|
12
|
+
id: "jasper-furniss",
|
13
|
+
status: "Offline"
|
14
|
+
},
|
15
|
+
{
|
16
|
+
label: "Ramon Ruiz",
|
17
|
+
value: "Ramon Ruiz",
|
18
|
+
territory: "PHL",
|
19
|
+
title: "Senior UX Designer",
|
20
|
+
id: "ramon-ruiz",
|
21
|
+
status: "Away"
|
22
|
+
},
|
23
|
+
{
|
24
|
+
label: "Jason Cypret",
|
25
|
+
value: "Jason Cypret",
|
26
|
+
territory: "PHL",
|
27
|
+
title: "VP of User Experience",
|
28
|
+
id: "jason-cypret",
|
29
|
+
status: "Online"
|
30
|
+
},
|
31
|
+
{
|
32
|
+
label: "Courtney Long",
|
33
|
+
value: "Courtney Long",
|
34
|
+
territory: "PHL",
|
35
|
+
title: "UX Design Mentor",
|
36
|
+
id: "courtney-long",
|
37
|
+
status: "Online"
|
38
|
+
}
|
39
|
+
];
|
40
|
+
|
41
|
+
|
42
|
+
return (
|
43
|
+
<div>
|
44
|
+
<Dropdown autocomplete
|
45
|
+
options={options}
|
46
|
+
{...props}
|
47
|
+
>
|
48
|
+
{options.map((option) => (
|
49
|
+
<Dropdown.Option key={option.id}
|
50
|
+
option={option}
|
51
|
+
>
|
52
|
+
<>
|
53
|
+
<FlexItem>
|
54
|
+
<User
|
55
|
+
align="left"
|
56
|
+
avatar
|
57
|
+
name={option.label}
|
58
|
+
orientation="horizontal"
|
59
|
+
territory={option.territory}
|
60
|
+
title={option.title}
|
61
|
+
/>
|
62
|
+
</FlexItem>
|
63
|
+
<FlexItem>
|
64
|
+
<Badge
|
65
|
+
rounded
|
66
|
+
text={option.status}
|
67
|
+
variant={`${
|
68
|
+
option.status === "Offline"
|
69
|
+
? "neutral"
|
70
|
+
: option.status === "Online"
|
71
|
+
? "success"
|
72
|
+
: "warning"
|
73
|
+
}`}
|
74
|
+
/>
|
75
|
+
</FlexItem>
|
76
|
+
</>
|
77
|
+
</Dropdown.Option>
|
78
|
+
))}
|
79
|
+
</Dropdown>
|
80
|
+
</div>
|
81
|
+
)
|
82
|
+
}
|
83
|
+
|
84
|
+
export default DropdownWithAutocomplete
|
@@ -0,0 +1 @@
|
|
1
|
+
The `autocomplete` prop can be used to add autocomplete or typeahead functionality to the Dropdown's default Trigger. This prop is set to 'false' by default.
|
@@ -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: "United-states"
|
9
|
+
},
|
10
|
+
{
|
11
|
+
label: "Canada",
|
12
|
+
value: "Canada",
|
13
|
+
areaCode: "+1",
|
14
|
+
icon: "🇨🇦",
|
15
|
+
id: "canada"
|
16
|
+
},
|
17
|
+
{
|
18
|
+
label: "Pakistan",
|
19
|
+
value: "Pakistan",
|
20
|
+
areaCode: "+92",
|
21
|
+
icon: "🇵🇰",
|
22
|
+
id: "pakistan"
|
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' },
|
4
|
+
{ label: 'Canada', value: 'Canada' },
|
5
|
+
{ label: 'Pakistan', value: 'Pakistan' },
|
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: "United-states"
|
9
|
+
},
|
10
|
+
{
|
11
|
+
label: "Canada",
|
12
|
+
value: "Canada",
|
13
|
+
areaCode: "+1",
|
14
|
+
icon: "🇨🇦",
|
15
|
+
id: "canada"
|
16
|
+
},
|
17
|
+
{
|
18
|
+
label: "Pakistan",
|
19
|
+
value: "Pakistan",
|
20
|
+
areaCode: "+92",
|
21
|
+
icon: "🇵🇰",
|
22
|
+
id: "pakistan"
|
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",
|