playbook_ui_docs 13.25.0.pre.alpha.PBNTR272Dropdownkitv42769 → 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812
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/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
|
)
|