playbook_ui_docs 14.20.0.pre.alpha.revert4637revert4621PLAY2033atactionbarrails7855 → 14.20.0.pre.rc.0
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.md +2 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.jsx +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_with_state.md +1 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +10 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +0 -11
- 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_display_rails.html.erb +2 -33
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.md +1 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +1 -11
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +0 -5
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +0 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_default.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options_parent_default.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_error.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_label.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_react_hook.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_return_all_selected.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.html.erb +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.md +0 -2
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids_react.md +1 -3
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.html.erb +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single.jsx +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.html.erb +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_children_only.jsx +22 -22
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +11 -11
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_form.html.erb +11 -11
- data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/index.js +0 -1
- data/dist/playbook-doc.js +2 -2
- metadata +3 -25
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions_rails.html.erb +0 -137
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions_rails.md +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header_rails.html.erb +0 -40
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header_rails.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb +0 -31
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.md +0 -5
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx +0 -56
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.md +0 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx +0 -58
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.md +0 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb +0 -20
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.html.erb +0 -19
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.md +0 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb +0 -20
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.jsx +0 -57
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.html.erb +0 -50
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.jsx +0 -105
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.html.erb +0 -22
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx +0 -67
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.jsx +0 -23
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.md +0 -1
@@ -1,105 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
import Dropdown from '../../pb_dropdown/_dropdown'
|
3
|
-
import Body from '../../pb_body/_body'
|
4
|
-
import Flex from '../../pb_flex/_flex'
|
5
|
-
import FlexItem from '../../pb_flex/_flex_item'
|
6
|
-
import Icon from '../../pb_icon/_icon'
|
7
|
-
|
8
|
-
const DropdownMultiSelectWithCustomOptions = (props) => {
|
9
|
-
|
10
|
-
const options = [
|
11
|
-
{
|
12
|
-
label: "United States",
|
13
|
-
value: "United States",
|
14
|
-
areaCode: "+1",
|
15
|
-
icon: "🇺🇸",
|
16
|
-
id: "United-states"
|
17
|
-
},
|
18
|
-
{
|
19
|
-
label: "Canada",
|
20
|
-
value: "Canada",
|
21
|
-
areaCode: "+1",
|
22
|
-
icon: "🇨🇦",
|
23
|
-
id: "canada"
|
24
|
-
},
|
25
|
-
{
|
26
|
-
label: "Pakistan",
|
27
|
-
value: "Pakistan",
|
28
|
-
areaCode: "+92",
|
29
|
-
icon: "🇵🇰",
|
30
|
-
id: "pakistan"
|
31
|
-
},
|
32
|
-
{
|
33
|
-
label: "India",
|
34
|
-
value: "India",
|
35
|
-
areaCode: "+91",
|
36
|
-
icon: "🇮🇳",
|
37
|
-
id: "india"
|
38
|
-
},
|
39
|
-
{
|
40
|
-
label: "Australia",
|
41
|
-
value: "Australia",
|
42
|
-
areaCode: "+61",
|
43
|
-
icon: "🇦🇺",
|
44
|
-
id: "australia"
|
45
|
-
},
|
46
|
-
{
|
47
|
-
label: "New Zealand",
|
48
|
-
value: "New Zealand",
|
49
|
-
areaCode: "+64",
|
50
|
-
icon: "🇳🇿",
|
51
|
-
id: "new-zealand"
|
52
|
-
},
|
53
|
-
{
|
54
|
-
label: "Italy",
|
55
|
-
value: "Italy",
|
56
|
-
areaCode: "+39",
|
57
|
-
icon: "🇮🇹",
|
58
|
-
id: "italy"
|
59
|
-
},
|
60
|
-
{
|
61
|
-
label: "Spain",
|
62
|
-
value: "Spain",
|
63
|
-
areaCode: "+34",
|
64
|
-
icon: "🇪🇸",
|
65
|
-
id: "spain"
|
66
|
-
}
|
67
|
-
];
|
68
|
-
|
69
|
-
return (
|
70
|
-
<div>
|
71
|
-
<Dropdown
|
72
|
-
multiSelect
|
73
|
-
options={options}
|
74
|
-
{...props}
|
75
|
-
>
|
76
|
-
{options.map((option) => (
|
77
|
-
<Dropdown.Option key={option.id}
|
78
|
-
option={option}
|
79
|
-
>
|
80
|
-
<Flex
|
81
|
-
align="center"
|
82
|
-
justify="between"
|
83
|
-
>
|
84
|
-
<FlexItem>
|
85
|
-
<Flex>
|
86
|
-
<Icon icon={option.icon}
|
87
|
-
paddingRight="xs"
|
88
|
-
/>
|
89
|
-
<Body text={option.label} />
|
90
|
-
</Flex>
|
91
|
-
</FlexItem>
|
92
|
-
<FlexItem>
|
93
|
-
<Body color="light"
|
94
|
-
text={option.areaCode}
|
95
|
-
/>
|
96
|
-
</FlexItem>
|
97
|
-
</Flex>
|
98
|
-
</Dropdown.Option>
|
99
|
-
))}
|
100
|
-
</Dropdown>
|
101
|
-
</div>
|
102
|
-
)
|
103
|
-
}
|
104
|
-
|
105
|
-
export default DropdownMultiSelectWithCustomOptions
|
@@ -1,22 +0,0 @@
|
|
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
|
-
{ label: 'India', value: 'India', id: 'in' },
|
7
|
-
{ label: 'United Kingdom', value: 'United Kingdom', id: 'uk' },
|
8
|
-
{ label: 'Australia', value: 'Australia', id: 'au' },
|
9
|
-
{ label: 'New Zealand', value: 'New Zealand', id: 'nz' },
|
10
|
-
{ label: 'Germany', value: 'Germany', id: 'de' },
|
11
|
-
{ label: 'France', value: 'France', id: 'fr' },
|
12
|
-
{ label: 'Italy', value: 'Italy', id: 'it' },
|
13
|
-
]
|
14
|
-
%>
|
15
|
-
|
16
|
-
<%
|
17
|
-
default_value = [
|
18
|
-
{ label: 'United States', value: 'United States', id: 'us' },
|
19
|
-
{ label: 'Canada', value: 'Canada', id: 'ca' },
|
20
|
-
]
|
21
|
-
%>
|
22
|
-
<%= pb_rails("dropdown", props: {options: options, multi_select: true, default_value: default_value}) %>
|
@@ -1,67 +0,0 @@
|
|
1
|
-
import React from "react";
|
2
|
-
import Dropdown from "../../pb_dropdown/_dropdown";
|
3
|
-
|
4
|
-
const DropdownMultiSelectWithDefault = (props) => {
|
5
|
-
const options = [
|
6
|
-
{
|
7
|
-
label: "United States",
|
8
|
-
value: "United States",
|
9
|
-
},
|
10
|
-
{
|
11
|
-
label: "United Kingdom",
|
12
|
-
value: "United Kingdom",
|
13
|
-
},
|
14
|
-
{
|
15
|
-
label: "Canada",
|
16
|
-
value: "Canada",
|
17
|
-
},
|
18
|
-
{
|
19
|
-
label: "Pakistan",
|
20
|
-
value: "Pakistan",
|
21
|
-
},
|
22
|
-
{
|
23
|
-
label: "India",
|
24
|
-
value: "India",
|
25
|
-
},
|
26
|
-
{
|
27
|
-
label: "Australia",
|
28
|
-
value: "Australia",
|
29
|
-
},
|
30
|
-
{
|
31
|
-
label: "New Zealand",
|
32
|
-
value: "New Zealand",
|
33
|
-
},
|
34
|
-
{
|
35
|
-
label: "Italy",
|
36
|
-
value: "Italy",
|
37
|
-
},
|
38
|
-
{
|
39
|
-
label: "Spain",
|
40
|
-
value: "Spain",
|
41
|
-
},
|
42
|
-
];
|
43
|
-
|
44
|
-
const defaultSelectedOptions = [
|
45
|
-
{
|
46
|
-
label: "United States",
|
47
|
-
value: "United States",
|
48
|
-
},
|
49
|
-
{
|
50
|
-
label: "Italy",
|
51
|
-
value: "Italy",
|
52
|
-
},
|
53
|
-
];
|
54
|
-
|
55
|
-
return (
|
56
|
-
<div>
|
57
|
-
<Dropdown
|
58
|
-
defaultValue={defaultSelectedOptions}
|
59
|
-
multiSelect
|
60
|
-
options={options}
|
61
|
-
{...props}
|
62
|
-
/>
|
63
|
-
</div>
|
64
|
-
);
|
65
|
-
};
|
66
|
-
|
67
|
-
export default DropdownMultiSelectWithDefault;
|
@@ -1,23 +0,0 @@
|
|
1
|
-
import React from 'react'
|
2
|
-
|
3
|
-
import Typeahead from '../_typeahead'
|
4
|
-
|
5
|
-
const options = [
|
6
|
-
{ label: 'Orange', value: '#FFA500' },
|
7
|
-
{ label: 'Red', value: '#FF0000' },
|
8
|
-
{ label: 'Green', value: '#00FF00' },
|
9
|
-
{ label: 'Blue', value: '#0000FF' },
|
10
|
-
]
|
11
|
-
|
12
|
-
const TypeaheadPreserveInput = (props) => {
|
13
|
-
return (
|
14
|
-
<Typeahead
|
15
|
-
label="Colors"
|
16
|
-
options={options}
|
17
|
-
preserveSearchInput
|
18
|
-
{...props}
|
19
|
-
/>
|
20
|
-
)
|
21
|
-
}
|
22
|
-
|
23
|
-
export default TypeaheadPreserveInput
|
@@ -1 +0,0 @@
|
|
1
|
-
By default, text is not preserved in the typeahead kit when you click off of the input field. You can utilize the `preserveSearchInput` prop in order to prevent text from being cleared when the field loses focus
|