playbook_ui_docs 13.25.0.pre.alpha.PBNTR272Dropdownkitv42769 → 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812
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_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_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_dropdown/docs/_dropdown_default.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +1 -7
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -1
- 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 +2 -5
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +1 -2
- 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 +1 -1
- 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_options.html.erb +45 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -1
- 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_trigger.html.erb +47 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +1 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +1 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +10 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -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_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/playbook-doc.js +6 -6
- metadata +18 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 133ebab77004aba4159126433c309713947db70bca683826c662c96a120aa070
|
|
4
|
+
data.tar.gz: bdd52471d072f9dceb69d08e32ac91ee869bad6d2980542a08a44cf4418ecb34
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 295d43d1813478690c1fd083359013a0207ae5fb2c79f2f702d139a3b781719eaa1b9d836940d478377971556325fa1d39560d417f61c6f5379e3d77640b531b
|
|
7
|
+
data.tar.gz: 76f1fa54e955307ed54c87ad0062f4fcb2698508da6b166c117d20e81ee883fa13bd5ceb0f6d8814b30e04d05c154d77c73486e12a0d01fbd5fd5b23093422d8
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<%= pb_rails("flex", props: {orientation: "column"}) do %>
|
|
2
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
3
|
+
<%= pb_rails("checkbox" , props: {
|
|
4
|
+
input_options: { tabindex: 0 },
|
|
5
|
+
margin_bottom: "xs",
|
|
6
|
+
text: "Disabled unchecked",
|
|
7
|
+
value: "checkbox-value",
|
|
8
|
+
disabled: true,
|
|
9
|
+
name: "checkbox-name"
|
|
10
|
+
}) %>
|
|
11
|
+
<% end %>
|
|
12
|
+
<%= pb_rails("flex/flex_item") do %>
|
|
13
|
+
<%= pb_rails("checkbox" , props: {
|
|
14
|
+
input_options: { tabindex: 0 },
|
|
15
|
+
text: "Disabled checked",
|
|
16
|
+
value: "checkbox-value",
|
|
17
|
+
disabled: true,
|
|
18
|
+
checked: true,
|
|
19
|
+
name: "checkbox-name"
|
|
20
|
+
}) %>
|
|
21
|
+
<% end %>
|
|
22
|
+
<% end %>
|
|
23
|
+
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import Checkbox from '../_checkbox'
|
|
4
|
+
|
|
5
|
+
const CheckboxDisabled = (props) => {
|
|
6
|
+
return (
|
|
7
|
+
<div style={{ display: "flex", flexDirection: "column" }}>
|
|
8
|
+
<Checkbox
|
|
9
|
+
disabled
|
|
10
|
+
marginBottom="xs"
|
|
11
|
+
name="default name"
|
|
12
|
+
tabIndex={0}
|
|
13
|
+
text="Disabled unchecked"
|
|
14
|
+
value="default value"
|
|
15
|
+
{...props}
|
|
16
|
+
/>
|
|
17
|
+
<Checkbox
|
|
18
|
+
checked
|
|
19
|
+
disabled
|
|
20
|
+
name="checkbox-name"
|
|
21
|
+
text="Disabled checked"
|
|
22
|
+
value="check-box value"
|
|
23
|
+
{...props}
|
|
24
|
+
/>
|
|
25
|
+
</div>
|
|
26
|
+
)
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
export default CheckboxDisabled
|
|
@@ -6,6 +6,7 @@ examples:
|
|
|
6
6
|
- checkbox_error: Default w/ Error
|
|
7
7
|
- checkbox_options: Checkbox w/ Options
|
|
8
8
|
- checkbox_indeterminate: Indeterminate Checkbox
|
|
9
|
+
- checkbox_disabled: Disabled Checkbox
|
|
9
10
|
|
|
10
11
|
react:
|
|
11
12
|
- checkbox_default: Default
|
|
@@ -13,6 +14,7 @@ examples:
|
|
|
13
14
|
- checkbox_custom: Custom Checkbox
|
|
14
15
|
- checkbox_error: Default w/ Error
|
|
15
16
|
- checkbox_indeterminate: Indeterminate Checkbox
|
|
17
|
+
- checkbox_disabled: Disabled Checkbox
|
|
16
18
|
|
|
17
19
|
swift:
|
|
18
20
|
- checkbox_default_swift: Default
|
|
@@ -3,3 +3,4 @@ export { default as CheckboxCustom } from './_checkbox_custom.jsx'
|
|
|
3
3
|
export { default as CheckboxError } from './_checkbox_error.jsx'
|
|
4
4
|
export { default as CheckboxChecked } from './_checkbox_checked.jsx'
|
|
5
5
|
export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
|
|
6
|
+
export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'
|
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
Your change handler function has access to two arguments: `dateStr` and `selectedDates`.
|
|
2
2
|
|
|
3
|
-
The first, `dateStr`, is a string of the chosen date. The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
|
|
3
|
+
The first, `dateStr`, is a string of the chosen date. The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
|
|
4
|
+
|
|
5
|
+
NOTE: On Change does not account for manual input by users, so if your date picker sets `allowInput`, you should use the `onClose` method instead.
|
|
@@ -1,3 +1,5 @@
|
|
|
1
1
|
The `onClose` handler function has access to two arguments: `dateStr` and `selectedDates`.
|
|
2
2
|
|
|
3
|
-
The first, `dateStr`, is a string of the chosen date. The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
|
|
3
|
+
The first, `dateStr`, is a string of the chosen date. The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
|
|
4
|
+
|
|
5
|
+
NOTE: `onClose` is the ideal handler function to use when `allowInput` is enabled.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
Because the Quick Pick variant has `allowInput` set to `true` by default, use the `onClose` handler function to access the startDate and endDate values. See the `onClose` example for details.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
`options`
|
|
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', 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}) %>
|
|
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.
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react'
|
|
2
2
|
import { Dropdown, User, Badge, FlexItem } from '../..'
|
|
3
3
|
|
|
4
4
|
const DropdownWithAutocomplete = (props) => {
|
|
5
|
-
// eslint-disable-next-line no-unused-vars
|
|
6
|
-
const [selectedOption, setSelectedOption] = useState();
|
|
7
5
|
|
|
8
6
|
const options = [
|
|
9
7
|
{
|
|
@@ -18,7 +16,7 @@ const DropdownWithAutocomplete = (props) => {
|
|
|
18
16
|
label: "Ramon Ruiz",
|
|
19
17
|
value: "Ramon Ruiz",
|
|
20
18
|
territory: "PHL",
|
|
21
|
-
title: "Senior UX
|
|
19
|
+
title: "Senior UX Designer",
|
|
22
20
|
id: "ramon-ruiz",
|
|
23
21
|
status: "Away"
|
|
24
22
|
},
|
|
@@ -44,7 +42,6 @@ const DropdownWithAutocomplete = (props) => {
|
|
|
44
42
|
return (
|
|
45
43
|
<div>
|
|
46
44
|
<Dropdown autocomplete
|
|
47
|
-
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
|
|
48
45
|
options={options}
|
|
49
46
|
{...props}
|
|
50
47
|
>
|
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx
CHANGED
|
@@ -2,7 +2,6 @@ import React, { useState } from 'react'
|
|
|
2
2
|
import { Dropdown, User, Badge, FlexItem, Avatar } from '../..'
|
|
3
3
|
|
|
4
4
|
const DropdownWithAutocompleteAndCustomDisplay = (props) => {
|
|
5
|
-
// eslint-disable-next-line no-unused-vars
|
|
6
5
|
const [selectedOption, setSelectedOption] = useState();
|
|
7
6
|
|
|
8
7
|
const options = [
|
|
@@ -18,7 +17,7 @@ const DropdownWithAutocompleteAndCustomDisplay = (props) => {
|
|
|
18
17
|
label: "Ramon Ruiz",
|
|
19
18
|
value: "Ramon Ruiz",
|
|
20
19
|
territory: "PHL",
|
|
21
|
-
title: "Senior UX
|
|
20
|
+
title: "Senior UX Designer",
|
|
22
21
|
id: "ramon-ruiz",
|
|
23
22
|
status: "Away"
|
|
24
23
|
},
|
|
@@ -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 %>
|
|
@@ -2,4 +2,4 @@ The `customDisplay` prop can be used to customize the display of the selected it
|
|
|
2
2
|
|
|
3
3
|
The `placeholder` prop can also be used to customize the placeholder text for the default Trigger.
|
|
4
4
|
|
|
5
|
-
The `onSelect` prop is a function that gives the dev one argument: the selected option. In this example we are using the
|
|
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 +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
|
|
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,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 %>
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react'
|
|
2
2
|
import { Dropdown, useDropdown, Button } from '../../'
|
|
3
3
|
|
|
4
4
|
const DropdownWithExternalControl = (props) => {
|
|
5
|
-
// eslint-disable-next-line no-unused-vars
|
|
6
|
-
const [selectedOption, setSelectedOption] = useState();
|
|
7
5
|
const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
|
|
8
6
|
|
|
9
7
|
const options = [
|
|
@@ -45,7 +43,6 @@ const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
|
|
|
45
43
|
|
|
46
44
|
<Dropdown
|
|
47
45
|
isClosed={isDropDownClosed}
|
|
48
|
-
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
|
|
49
46
|
options={options}
|
|
50
47
|
{...props}
|
|
51
48
|
>
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useRef } from 'react'
|
|
2
2
|
import { Dropdown, useDropdown, CircleIconButton, Icon, Body, FlexItem, Flex } from '../..'
|
|
3
3
|
|
|
4
4
|
const DropdownWithHook = (props) => {
|
|
5
|
-
// eslint-disable-next-line no-unused-vars
|
|
6
|
-
const [selectedOption, setSelectedOption] = useState();
|
|
7
5
|
const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
|
|
8
6
|
const buttonRef = useRef(null);
|
|
9
7
|
|
|
@@ -41,7 +39,6 @@ const buttonRef = useRef(null);
|
|
|
41
39
|
/>
|
|
42
40
|
<Dropdown
|
|
43
41
|
isClosed={isDropDownClosed}
|
|
44
|
-
onSelect={(selectedItem) => setSelectedOption(selectedItem)}
|
|
45
42
|
options={options}
|
|
46
43
|
triggerRef={buttonRef}
|
|
47
44
|
{...props}
|
|
@@ -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"}) %>
|
|
@@ -1,8 +1,16 @@
|
|
|
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
|
|
6
14
|
- dropdown_with_label: With Label
|
|
7
15
|
- dropdown_with_custom_options: Custom Options
|
|
8
16
|
- dropdown_with_custom_display: Custom Display
|
|
@@ -8,3 +8,4 @@ export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_pa
|
|
|
8
8
|
export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
|
|
9
9
|
export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
|
|
10
10
|
export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
|
|
11
|
+
export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import { Flex, ProgressSimple } from '../..'
|
|
3
|
+
|
|
4
|
+
const ProgressSimpleFlex = () => {
|
|
5
|
+
return (
|
|
6
|
+
<Flex>
|
|
7
|
+
<ProgressSimple
|
|
8
|
+
align="left"
|
|
9
|
+
flex="1"
|
|
10
|
+
percent={68}
|
|
11
|
+
/>
|
|
12
|
+
</Flex>
|
|
13
|
+
)
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export default ProgressSimpleFlex
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
When rendering a Progress Simple through within a Flex container, you must pass `flex="1"` to the kit itself so that it fills the available space
|
|
@@ -3,6 +3,7 @@ examples:
|
|
|
3
3
|
rails:
|
|
4
4
|
- progress_simple_default: Default
|
|
5
5
|
- progress_simple_value: Setting Values
|
|
6
|
+
- progress_simple_flex: Within a Flex
|
|
6
7
|
- progress_simple_width: Progress Bar Width
|
|
7
8
|
- progress_simple_variants: Variants
|
|
8
9
|
- progress_simple_muted: Muted
|
|
@@ -12,6 +13,7 @@ examples:
|
|
|
12
13
|
react:
|
|
13
14
|
- progress_simple_default: Default
|
|
14
15
|
- progress_simple_value: Setting Values
|
|
16
|
+
- progress_simple_flex: Within a Flex
|
|
15
17
|
- progress_simple_width: Progress Bar Width
|
|
16
18
|
- progress_simple_variants: Variants
|
|
17
19
|
- progress_simple_muted: Muted
|
|
@@ -2,6 +2,7 @@ export { default as ProgressSimpleAlign } from './_progress_simple_align.jsx'
|
|
|
2
2
|
export { default as ProgressSimpleDefault } from './_progress_simple_default.jsx'
|
|
3
3
|
export { default as ProgressSimpleMuted } from './_progress_simple_muted.jsx'
|
|
4
4
|
export { default as ProgressSimpleValue } from './_progress_simple_value.jsx'
|
|
5
|
+
export { default as ProgressSimpleFlex } from './_progress_simple_flex.jsx'
|
|
5
6
|
export { default as ProgressSimpleWidth } from './_progress_simple_width.jsx'
|
|
6
7
|
export { default as ProgressSimpleVariants } from './_progress_simple_variants.jsx'
|
|
7
8
|
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import { Flex, Radio } from '../../'
|
|
3
3
|
|
|
4
|
-
const RadioAlignment = () => {
|
|
4
|
+
const RadioAlignment = (props) => {
|
|
5
5
|
return (
|
|
6
6
|
<Flex>
|
|
7
7
|
<Radio
|
|
@@ -11,6 +11,7 @@ const RadioAlignment = () => {
|
|
|
11
11
|
name="Group2"
|
|
12
12
|
tabIndex={0}
|
|
13
13
|
value="Power"
|
|
14
|
+
{...props}
|
|
14
15
|
/>
|
|
15
16
|
<br />
|
|
16
17
|
<Radio
|
|
@@ -20,6 +21,7 @@ const RadioAlignment = () => {
|
|
|
20
21
|
marginRight="sm"
|
|
21
22
|
name="Group2"
|
|
22
23
|
value="Nitro"
|
|
24
|
+
{...props}
|
|
23
25
|
/>
|
|
24
26
|
<br />
|
|
25
27
|
<Radio
|
|
@@ -28,6 +30,7 @@ const RadioAlignment = () => {
|
|
|
28
30
|
label="Google"
|
|
29
31
|
name="Group2"
|
|
30
32
|
value="Google"
|
|
33
|
+
{...props}
|
|
31
34
|
/>
|
|
32
35
|
</Flex>
|
|
33
36
|
)
|
|
@@ -2,7 +2,7 @@ import React from 'react'
|
|
|
2
2
|
|
|
3
3
|
import Radio from '../_radio'
|
|
4
4
|
|
|
5
|
-
const RadioDefault = () => {
|
|
5
|
+
const RadioDefault = (props) => {
|
|
6
6
|
const ref = React.createRef()
|
|
7
7
|
|
|
8
8
|
return (
|
|
@@ -13,6 +13,7 @@ const RadioDefault = () => {
|
|
|
13
13
|
ref={ref}
|
|
14
14
|
tabIndex={0}
|
|
15
15
|
value="Power"
|
|
16
|
+
{...props}
|
|
16
17
|
/>
|
|
17
18
|
<br />
|
|
18
19
|
<Radio
|
|
@@ -20,6 +21,7 @@ const RadioDefault = () => {
|
|
|
20
21
|
label="Nitro"
|
|
21
22
|
name="Group2"
|
|
22
23
|
value="Nitro"
|
|
24
|
+
{...props}
|
|
23
25
|
/>
|
|
24
26
|
<br />
|
|
25
27
|
<Radio
|
|
@@ -27,6 +29,7 @@ const RadioDefault = () => {
|
|
|
27
29
|
label="Google"
|
|
28
30
|
name="Group2"
|
|
29
31
|
value="Google"
|
|
32
|
+
{...props}
|
|
30
33
|
/>
|
|
31
34
|
</div>
|
|
32
35
|
)
|