playbook_ui_docs 13.24.0 → 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_bar_graph/docs/_bar_graph_negative_numbers.html.erb +23 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_negative_numbers.jsx +35 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.html.erb +26 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.jsx +36 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_secondary_y_axis.md +3 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.html.erb +22 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.jsx +34 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_stacked.md +1 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_bar_graph/docs/index.js +3 -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/docs/example.yml +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 +32 -0
- 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 +104 -0
- 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 +63 -0
- 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 +77 -0
- 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 +23 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +11 -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/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx +51 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
- data/dist/menu.yml +5 -1
- data/dist/playbook-doc.js +10 -10
- metadata +56 -6
- /data/app/pb_kits/playbook/pb_dialog/docs/{_dialog_props_table.md → _dialog_props_swift.md} +0 -0
@@ -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.
|
@@ -0,0 +1,23 @@
|
|
1
|
+
examples:
|
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
|
+
|
11
|
+
react:
|
12
|
+
- dropdown_default: Default
|
13
|
+
- dropdown_subcomponent_structure: Subcomponent Structure
|
14
|
+
- dropdown_with_label: With Label
|
15
|
+
- dropdown_with_custom_options: Custom Options
|
16
|
+
- dropdown_with_custom_display: Custom Display
|
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
|
23
|
+
|
@@ -0,0 +1,11 @@
|
|
1
|
+
export { default as DropdownDefault } from './_dropdown_default.jsx'
|
2
|
+
export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_display.jsx'
|
3
|
+
export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_options.jsx'
|
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'
|
@@ -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
|
)
|
@@ -0,0 +1,26 @@
|
|
1
|
+
<%= pb_rails("flex", props: {orientation: "column"}) do %>
|
2
|
+
<%= pb_rails("flex/flex_item") do %>
|
3
|
+
<%= pb_rails("radio", props: {
|
4
|
+
text: "Disabled unselected",
|
5
|
+
input_options: {
|
6
|
+
tabindex: 0,
|
7
|
+
disabled: true,
|
8
|
+
},
|
9
|
+
margin_bottom: "xs",
|
10
|
+
name: "DisabledGroup",
|
11
|
+
value: "Disabled unselected",
|
12
|
+
}) %>
|
13
|
+
<% end %>
|
14
|
+
<%= pb_rails("flex/flex_item") do %>
|
15
|
+
<%= pb_rails("radio", props: {
|
16
|
+
text: "Disabled selected",
|
17
|
+
input_options: {
|
18
|
+
tabindex: 0,
|
19
|
+
disabled: true,
|
20
|
+
},
|
21
|
+
checked: true,
|
22
|
+
name: "DisabledGroup",
|
23
|
+
value: "Disabled selected"
|
24
|
+
}) %>
|
25
|
+
<% end %>
|
26
|
+
<% end %>
|
@@ -0,0 +1,31 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import Radio from '../_radio'
|
4
|
+
|
5
|
+
const RadioDisabled = (props) => {
|
6
|
+
const ref = React.createRef()
|
7
|
+
|
8
|
+
return (
|
9
|
+
<div style={{ display: "flex", flexDirection: "column" }}>
|
10
|
+
<Radio
|
11
|
+
disabled
|
12
|
+
label="Disabled unselected"
|
13
|
+
marginBottom="xs"
|
14
|
+
name="DisabledGroup"
|
15
|
+
ref={ref}
|
16
|
+
tabIndex={0}
|
17
|
+
value="Disabled unselected"
|
18
|
+
{...props}
|
19
|
+
/>
|
20
|
+
<Radio
|
21
|
+
checked
|
22
|
+
disabled
|
23
|
+
label="Disabled selected"
|
24
|
+
name="DisabledGroup"
|
25
|
+
value="Disabled selected"
|
26
|
+
{...props}
|
27
|
+
/>
|
28
|
+
</div>
|
29
|
+
)
|
30
|
+
}
|
31
|
+
export default RadioDisabled
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { Radio } from '../..'
|
3
3
|
|
4
|
-
const RadioError = () => {
|
4
|
+
const RadioError = (props) => {
|
5
5
|
return (
|
6
6
|
<div>
|
7
7
|
<Radio
|
@@ -9,6 +9,7 @@ const RadioError = () => {
|
|
9
9
|
label="Power"
|
10
10
|
name="Group2"
|
11
11
|
value="Power"
|
12
|
+
{...props}
|
12
13
|
/>
|
13
14
|
</div>
|
14
15
|
)
|
@@ -6,12 +6,14 @@ examples:
|
|
6
6
|
- radio_error: With Error
|
7
7
|
- radio_options: With Options
|
8
8
|
- radio_alignment: Alignment
|
9
|
+
- radio_disabled: Disabled
|
9
10
|
|
10
11
|
react:
|
11
12
|
- radio_default: Default
|
12
13
|
- radio_custom: Custom
|
13
14
|
- radio_error: With Error
|
14
15
|
- radio_alignment: Alignment
|
16
|
+
- radio_disabled: Disabled
|
15
17
|
|
16
18
|
swift:
|
17
19
|
- radio_default_swift: Default
|
@@ -2,3 +2,4 @@ export { default as RadioDefault } from './_radio_default.jsx'
|
|
2
2
|
export { default as RadioCustom } from './_radio_custom.jsx'
|
3
3
|
export { default as RadioError } from './_radio_error.jsx'
|
4
4
|
export { default as RadioAlignment } from './_radio_alignment.jsx'
|
5
|
+
export { default as RadioDisabled } from './_radio_disabled.jsx'
|
@@ -0,0 +1,51 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
|
3
|
+
import {
|
4
|
+
Button,
|
5
|
+
} from '../..'
|
6
|
+
|
7
|
+
import Typeahead from '../_typeahead'
|
8
|
+
|
9
|
+
const options = [
|
10
|
+
{ label: 'Orange', value: '#FFA500' },
|
11
|
+
{ label: 'Red', value: '#FF0000' },
|
12
|
+
{ label: 'Green', value: '#00FF00' },
|
13
|
+
{ label: 'Blue', value: '#0000FF' },
|
14
|
+
{ label: 'Amaranth', value: '#9F2B68' },
|
15
|
+
{ label: 'Key Lime', value: '#DAF7A6' },
|
16
|
+
{ label: 'Turquois', value: '#00FFD0' },
|
17
|
+
]
|
18
|
+
|
19
|
+
const TypeaheadCustomMenuList = (props) => {
|
20
|
+
const defaultColorOptions = options.slice(0, 3)
|
21
|
+
const [colorOptions, setColorOptions] = useState(defaultColorOptions)
|
22
|
+
|
23
|
+
const moreToLoad = colorOptions.length == defaultColorOptions.length
|
24
|
+
const loadColors = moreToLoad ? () => setColorOptions(options) : () => setColorOptions(defaultColorOptions)
|
25
|
+
|
26
|
+
const menuListProps = {
|
27
|
+
footer: (<Button
|
28
|
+
margin="sm"
|
29
|
+
onClick={loadColors}
|
30
|
+
text={`Load ${moreToLoad ? "More" : "Less"}`}
|
31
|
+
/>)
|
32
|
+
}
|
33
|
+
|
34
|
+
const MenuList = (props) => (
|
35
|
+
<Typeahead.MenuList
|
36
|
+
{...menuListProps}
|
37
|
+
{...props}
|
38
|
+
/>
|
39
|
+
)
|
40
|
+
|
41
|
+
return (
|
42
|
+
<Typeahead
|
43
|
+
components={{ MenuList }}
|
44
|
+
label="Colors"
|
45
|
+
options={colorOptions}
|
46
|
+
{...props}
|
47
|
+
/>
|
48
|
+
)
|
49
|
+
}
|
50
|
+
|
51
|
+
export default TypeaheadCustomMenuList
|
@@ -9,3 +9,4 @@ export { default as TypeaheadMultiKit } from './_typeahead_multi_kit.jsx'
|
|
9
9
|
export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
|
10
10
|
export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
|
11
11
|
export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
|
12
|
+
export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'
|
data/dist/menu.yml
CHANGED
@@ -254,6 +254,10 @@ kits:
|
|
254
254
|
platforms: *web
|
255
255
|
description: Playbook's date picker is built using flatpickr, a vanilla js library. Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below.
|
256
256
|
status: "stable"
|
257
|
+
- name: dropdown
|
258
|
+
platforms: *react_only
|
259
|
+
description: ""
|
260
|
+
status: "beta"
|
257
261
|
- name: "multi_level_select"
|
258
262
|
platforms: *web
|
259
263
|
description: The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user.
|
@@ -460,4 +464,4 @@ kits:
|
|
460
464
|
- name: "user"
|
461
465
|
platforms: *web
|
462
466
|
description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
|
463
|
-
status: "stable"
|
467
|
+
status: "stable"
|