playbook_ui_docs 14.21.2.pre.alpha.PLAY2179playbookiconsupdate8389 → 14.21.2.pre.alpha.PLAY2233removetreemapchart8408
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_pinned_rows.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_react.md +5 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx +7 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_rails.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx +7 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +7 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx +19 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx +19 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display_rails.html.erb +10 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_rails.html.erb +10 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb +10 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.jsx +20 -11
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.jsx +8 -8
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.html.erb +10 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_default.jsx +23 -14
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_separators_hidden.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure_rails.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subtle_variant.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb +4 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.jsx +4 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +4 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +4 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.html.erb +52 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options.jsx +99 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_rails.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_icon_options_react.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options_rails.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.html.erb +28 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx +47 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_rails.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger_rails.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +6 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search.jsx +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_search_rails.html.erb +3 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +3 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.html.erb +8 -8
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_rails.md +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb +12 -12
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md +2 -2
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.html.erb +12 -12
- data/app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_rails.md +2 -2
- data/dist/playbook-doc.js +2 -2
- metadata +9 -19
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_description.md +0 -5
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb +0 -37
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx +0 -48
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.md +0 -2
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.html.erb +0 -37
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.jsx +0 -47
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_default.md +0 -3
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.html.erb +0 -79
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.jsx +0 -90
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_drillable.md +0 -1
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.html.erb +0 -54
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.jsx +0 -65
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_grouped_data.md +0 -3
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.html.erb +0 -37
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx +0 -48
- data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.md +0 -3
- data/app/pb_kits/playbook/pb_treemap_chart/docs/example.yml +0 -15
- data/app/pb_kits/playbook/pb_treemap_chart/docs/index.js +0 -5
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1d6ffee58a23d0ee74eff57325c42b7f61446c3118db4d88c5d2c5f0f96263d2
|
|
4
|
+
data.tar.gz: aabd65fce57bce582f7d260e7bb8c8cdb81ae268396052c8823afb918189535b
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 32d6cb9afe465ea7f778c20b040446e19cdf5d2733678f15e3ae3379424347798eb1e8ab31a5f8a1d4f8dcfa88c787c7b898e826d2bf62a7871883635a214a20
|
|
7
|
+
data.tar.gz: 628dae2e73a93e944d4c5b1d66547d6b16535d0adda20fe4f75a7a10dbf9ed9176240e19875bb9263a496dcaae40f299ab06c424e726447c1ae9b6ebd0c22288
|
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and
|
|
1
|
+
Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.
|
|
2
2
|
|
|
3
|
-
**NOTE:**
|
|
3
|
+
**NOTE:**
|
|
4
4
|
- Sticky header required: Pinned rows must be used with `sticky: true` via `tableProps` (works with both responsive and non-responsive tables)
|
|
5
|
-
- Row ids required:
|
|
5
|
+
- Row ids required: Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function.
|
|
6
|
+
- `pinnedRows` takes an array of row ids to the `top` property as shown in the code snippet below.
|
|
7
|
+
- For expandable rows, use the parent id in `pinnedRows`, all its children will automatically be pinned with it. If id for a child is passed in without parent being pinned, nothing will be pinned.
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<%
|
|
2
2
|
options = [
|
|
3
|
-
{ label: 'United States', value: '
|
|
4
|
-
{ label: 'Canada', value: '
|
|
5
|
-
{ label: 'Pakistan', value: '
|
|
3
|
+
{ label: 'United States', value: 'unitedStates', id: 'us' },
|
|
4
|
+
{ label: 'Canada', value: 'canada', id: 'ca' },
|
|
5
|
+
{ label: 'Pakistan', value: 'pakistan', id: 'pk' },
|
|
6
6
|
]
|
|
7
7
|
|
|
8
8
|
%>
|
|
@@ -5,17 +5,20 @@ const DropdownBlankSelection = (props) => {
|
|
|
5
5
|
const options = [
|
|
6
6
|
{
|
|
7
7
|
label: "United States",
|
|
8
|
-
value: "
|
|
8
|
+
value: "unitedStates",
|
|
9
|
+
id: "us"
|
|
9
10
|
},
|
|
10
11
|
{
|
|
11
12
|
label: "Canada",
|
|
12
|
-
value: "
|
|
13
|
+
value: "canada",
|
|
14
|
+
id: "ca"
|
|
13
15
|
},
|
|
14
16
|
{
|
|
15
17
|
label: "Pakistan",
|
|
16
|
-
value: "
|
|
18
|
+
value: "pakistan",
|
|
19
|
+
id: "pk"
|
|
17
20
|
}
|
|
18
|
-
];
|
|
21
|
+
];
|
|
19
22
|
|
|
20
23
|
return (
|
|
21
24
|
<>
|
|
@@ -6,15 +6,18 @@ import Dropdown from '../../pb_dropdown/_dropdown'
|
|
|
6
6
|
const options = [
|
|
7
7
|
{
|
|
8
8
|
label: "United States",
|
|
9
|
-
value: "
|
|
9
|
+
value: "unitedStates",
|
|
10
|
+
id: "us"
|
|
10
11
|
},
|
|
11
12
|
{
|
|
12
13
|
label: "Canada",
|
|
13
|
-
value: "
|
|
14
|
+
value: "canada",
|
|
15
|
+
id: "ca"
|
|
14
16
|
},
|
|
15
17
|
{
|
|
16
18
|
label: "Pakistan",
|
|
17
|
-
value: "
|
|
19
|
+
value: "pakistan",
|
|
20
|
+
id: "pk"
|
|
18
21
|
}
|
|
19
22
|
]
|
|
20
23
|
|
|
@@ -6,15 +6,18 @@ const DropdownDefault = (props) => {
|
|
|
6
6
|
const options = [
|
|
7
7
|
{
|
|
8
8
|
label: "United States",
|
|
9
|
-
value: "
|
|
9
|
+
value: "unitedStates",
|
|
10
|
+
id: "us"
|
|
10
11
|
},
|
|
11
12
|
{
|
|
12
13
|
label: "Canada",
|
|
13
|
-
value: "
|
|
14
|
+
value: "canada",
|
|
15
|
+
id: "ca"
|
|
14
16
|
},
|
|
15
17
|
{
|
|
16
18
|
label: "Pakistan",
|
|
17
|
-
value: "
|
|
19
|
+
value: "pakistan",
|
|
20
|
+
id: "pk"
|
|
18
21
|
}
|
|
19
22
|
];
|
|
20
23
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<%
|
|
2
2
|
options = [
|
|
3
|
-
{ label: 'United States', value: '
|
|
4
|
-
{ label: 'Canada', value: '
|
|
5
|
-
{ label: 'Pakistan', value: '
|
|
3
|
+
{ label: 'United States', value: 'unitedStates', id: 'us' },
|
|
4
|
+
{ label: 'Canada', value: 'canada', id: 'ca' },
|
|
5
|
+
{ label: 'Pakistan', value: 'pakistan', id: 'pk' },
|
|
6
6
|
]
|
|
7
7
|
|
|
8
8
|
%>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<%
|
|
2
2
|
options = [
|
|
3
|
-
{ label: 'United States', value: '
|
|
4
|
-
{ label: 'Canada', value: '
|
|
5
|
-
{ label: 'Pakistan', value: '
|
|
3
|
+
{ label: 'United States', value: 'unitedStates', id: 'us' },
|
|
4
|
+
{ label: 'Canada', value: 'canada', id: 'ca' },
|
|
5
|
+
{ label: 'Pakistan', value: 'pakistan', id: 'pk' },
|
|
6
6
|
]
|
|
7
7
|
|
|
8
8
|
%>
|
|
@@ -5,17 +5,20 @@ const DropdownDefaultValue = (props) => {
|
|
|
5
5
|
const options = [
|
|
6
6
|
{
|
|
7
7
|
label: "United States",
|
|
8
|
-
value: "
|
|
8
|
+
value: "unitedStates",
|
|
9
|
+
id: "us"
|
|
9
10
|
},
|
|
10
11
|
{
|
|
11
12
|
label: "Canada",
|
|
12
|
-
value: "
|
|
13
|
+
value: "canada",
|
|
14
|
+
id: "ca"
|
|
13
15
|
},
|
|
14
16
|
{
|
|
15
17
|
label: "Pakistan",
|
|
16
|
-
value: "
|
|
18
|
+
value: "pakistan",
|
|
19
|
+
id: "pk"
|
|
17
20
|
}
|
|
18
|
-
];
|
|
21
|
+
];
|
|
19
22
|
|
|
20
23
|
return (
|
|
21
24
|
<>
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<%
|
|
2
2
|
options = [
|
|
3
|
-
{ label: 'United States', value: '
|
|
4
|
-
{ label: 'Canada', value: '
|
|
5
|
-
{ label: 'Pakistan', value: '
|
|
3
|
+
{ label: 'United States', value: 'unitedStates', id: 'us' },
|
|
4
|
+
{ label: 'Canada', value: 'canada', id: 'ca' },
|
|
5
|
+
{ label: 'Pakistan', value: 'pakistan', id: 'pk' },
|
|
6
6
|
]
|
|
7
7
|
%>
|
|
8
8
|
|
|
@@ -10,17 +10,20 @@ const DropdownError = (props) => {
|
|
|
10
10
|
const options = [
|
|
11
11
|
{
|
|
12
12
|
label: "United States",
|
|
13
|
-
value: "
|
|
13
|
+
value: "unitedStates",
|
|
14
|
+
id: "us"
|
|
14
15
|
},
|
|
15
16
|
{
|
|
16
17
|
label: "Canada",
|
|
17
|
-
value: "
|
|
18
|
+
value: "canada",
|
|
19
|
+
id: "ca"
|
|
18
20
|
},
|
|
19
21
|
{
|
|
20
22
|
label: "Pakistan",
|
|
21
|
-
value: "
|
|
23
|
+
value: "pakistan",
|
|
24
|
+
id: "pk"
|
|
22
25
|
}
|
|
23
|
-
]
|
|
26
|
+
];
|
|
24
27
|
|
|
25
28
|
return (
|
|
26
29
|
<>
|
|
@@ -6,39 +6,48 @@ const DropdownMultiSelect = (props) => {
|
|
|
6
6
|
const options = [
|
|
7
7
|
{
|
|
8
8
|
label: "United States",
|
|
9
|
-
value: "
|
|
9
|
+
value: "unitedStates",
|
|
10
|
+
id: "us"
|
|
10
11
|
},
|
|
11
12
|
{
|
|
12
|
-
|
|
13
|
-
|
|
13
|
+
label: "United Kingdom",
|
|
14
|
+
value: "unitedKingdom",
|
|
15
|
+
id: "gb"
|
|
14
16
|
},
|
|
15
17
|
{
|
|
16
18
|
label: "Canada",
|
|
17
|
-
value: "
|
|
19
|
+
value: "canada",
|
|
20
|
+
id: "ca"
|
|
18
21
|
},
|
|
19
22
|
{
|
|
20
23
|
label: "Pakistan",
|
|
21
|
-
value: "
|
|
24
|
+
value: "pakistan",
|
|
25
|
+
id: "pk"
|
|
22
26
|
},
|
|
23
27
|
{
|
|
24
28
|
label: "India",
|
|
25
|
-
value: "
|
|
29
|
+
value: "india",
|
|
30
|
+
id: "in"
|
|
26
31
|
},
|
|
27
32
|
{
|
|
28
33
|
label: "Australia",
|
|
29
|
-
value: "
|
|
34
|
+
value: "australia",
|
|
35
|
+
id: "au"
|
|
30
36
|
},
|
|
31
37
|
{
|
|
32
38
|
label: "New Zealand",
|
|
33
|
-
value: "
|
|
39
|
+
value: "new Zealand",
|
|
40
|
+
id: "nz"
|
|
34
41
|
},
|
|
35
42
|
{
|
|
36
43
|
label: "Italy",
|
|
37
|
-
value: "
|
|
44
|
+
value: "italy",
|
|
45
|
+
id: "it"
|
|
38
46
|
},
|
|
39
47
|
{
|
|
40
48
|
label: "Spain",
|
|
41
|
-
value: "
|
|
49
|
+
value: "spain",
|
|
50
|
+
id: "es"
|
|
42
51
|
}
|
|
43
52
|
];
|
|
44
53
|
|
|
@@ -6,39 +6,48 @@ const DropdownMultiSelectDisplay = (props) => {
|
|
|
6
6
|
const options = [
|
|
7
7
|
{
|
|
8
8
|
label: "United States",
|
|
9
|
-
value: "
|
|
9
|
+
value: "unitedStates",
|
|
10
|
+
id: "us"
|
|
10
11
|
},
|
|
11
12
|
{
|
|
12
|
-
|
|
13
|
-
|
|
13
|
+
label: "United Kingdom",
|
|
14
|
+
value: "unitedKingdom",
|
|
15
|
+
id: "gb"
|
|
14
16
|
},
|
|
15
17
|
{
|
|
16
18
|
label: "Canada",
|
|
17
|
-
value: "
|
|
19
|
+
value: "canada",
|
|
20
|
+
id: "ca"
|
|
18
21
|
},
|
|
19
22
|
{
|
|
20
23
|
label: "Pakistan",
|
|
21
|
-
value: "
|
|
24
|
+
value: "pakistan",
|
|
25
|
+
id: "pk"
|
|
22
26
|
},
|
|
23
27
|
{
|
|
24
28
|
label: "India",
|
|
25
|
-
value: "
|
|
29
|
+
value: "india",
|
|
30
|
+
id: "in"
|
|
26
31
|
},
|
|
27
32
|
{
|
|
28
33
|
label: "Australia",
|
|
29
|
-
value: "
|
|
34
|
+
value: "australia",
|
|
35
|
+
id: "au"
|
|
30
36
|
},
|
|
31
37
|
{
|
|
32
38
|
label: "New Zealand",
|
|
33
|
-
value: "
|
|
39
|
+
value: "new Zealand",
|
|
40
|
+
id: "nz"
|
|
34
41
|
},
|
|
35
42
|
{
|
|
36
43
|
label: "Italy",
|
|
37
|
-
value: "
|
|
44
|
+
value: "italy",
|
|
45
|
+
id: "it"
|
|
38
46
|
},
|
|
39
47
|
{
|
|
40
48
|
label: "Spain",
|
|
41
|
-
value: "
|
|
49
|
+
value: "spain",
|
|
50
|
+
id: "es"
|
|
42
51
|
}
|
|
43
52
|
];
|
|
44
53
|
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
<%
|
|
2
2
|
options = [
|
|
3
|
-
{ label: 'United States', value: '
|
|
4
|
-
{ label: 'Canada', value: '
|
|
5
|
-
{ label: 'Pakistan', value: '
|
|
6
|
-
{ label: 'India', value: '
|
|
7
|
-
{ label: 'United Kingdom', value: '
|
|
8
|
-
{ label: 'Australia', value: '
|
|
9
|
-
{ label: 'New Zealand', value: '
|
|
10
|
-
{ label: 'Germany', value: '
|
|
11
|
-
{ label: 'France', value: '
|
|
12
|
-
{ label: 'Italy', value: '
|
|
3
|
+
{ label: 'United States', value: 'unitedsStates', 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: 'unitedKingdom', id: 'uk' },
|
|
8
|
+
{ label: 'Australia', value: 'australia', id: 'au' },
|
|
9
|
+
{ label: 'New Zealand', value: 'newZealand', id: 'nz' },
|
|
10
|
+
{ label: 'Germany', value: 'germany', id: 'de' },
|
|
11
|
+
{ label: 'France', value: 'france', id: 'fr' },
|
|
12
|
+
{ label: 'Italy', value: 'italy', id: 'it' },
|
|
13
13
|
]
|
|
14
14
|
%>
|
|
15
15
|
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
<%
|
|
2
2
|
options = [
|
|
3
|
-
{ label: 'United States', value: '
|
|
4
|
-
{ label: 'Canada', value: '
|
|
5
|
-
{ label: 'Pakistan', value: '
|
|
6
|
-
{ label: 'India', value: '
|
|
7
|
-
{ label: 'United Kingdom', value: '
|
|
8
|
-
{ label: 'Australia', value: '
|
|
9
|
-
{ label: 'New Zealand', value: '
|
|
10
|
-
{ label: 'Germany', value: '
|
|
11
|
-
{ label: 'France', value: '
|
|
12
|
-
{ label: 'Italy', value: '
|
|
3
|
+
{ label: 'United States', value: 'unitedsStates', 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: 'unitedKingdom', id: 'uk' },
|
|
8
|
+
{ label: 'Australia', value: 'australia', id: 'au' },
|
|
9
|
+
{ label: 'New Zealand', value: 'newZealand', id: 'nz' },
|
|
10
|
+
{ label: 'Germany', value: 'germany', id: 'de' },
|
|
11
|
+
{ label: 'France', value: 'france', id: 'fr' },
|
|
12
|
+
{ label: 'Italy', value: 'italy', id: 'it' },
|
|
13
13
|
]
|
|
14
14
|
%>
|
|
15
15
|
|
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_autocomplete.html.erb
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
<%
|
|
2
2
|
options = [
|
|
3
|
-
{ label: 'United States', value: '
|
|
4
|
-
{ label: 'Canada', value: '
|
|
5
|
-
{ label: 'Pakistan', value: '
|
|
6
|
-
{ label: 'India', value: '
|
|
7
|
-
{ label: 'United Kingdom', value: '
|
|
8
|
-
{ label: 'Australia', value: '
|
|
9
|
-
{ label: 'New Zealand', value: '
|
|
10
|
-
{ label: 'Germany', value: '
|
|
11
|
-
{ label: 'France', value: '
|
|
12
|
-
{ label: 'Italy', value: '
|
|
3
|
+
{ label: 'United States', value: 'unitedsStates', 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: 'unitedKingdom', id: 'uk' },
|
|
8
|
+
{ label: 'Australia', value: 'australia', id: 'au' },
|
|
9
|
+
{ label: 'New Zealand', value: 'newZealand', id: 'nz' },
|
|
10
|
+
{ label: 'Germany', value: 'germany', id: 'de' },
|
|
11
|
+
{ label: 'France', value: 'france', id: 'fr' },
|
|
12
|
+
{ label: 'Italy', value: 'italy', id: 'it' },
|
|
13
13
|
]
|
|
14
14
|
%>
|
|
15
15
|
|
|
@@ -6,41 +6,50 @@ const DropdownMultiSelectWithAutocomplete = (props) => {
|
|
|
6
6
|
const options = [
|
|
7
7
|
{
|
|
8
8
|
label: "United States",
|
|
9
|
-
value: "
|
|
9
|
+
value: "unitedStates",
|
|
10
|
+
id: "us"
|
|
10
11
|
},
|
|
11
12
|
{
|
|
12
|
-
|
|
13
|
-
|
|
13
|
+
label: "United Kingdom",
|
|
14
|
+
value: "unitedKingdom",
|
|
15
|
+
id: "gb"
|
|
14
16
|
},
|
|
15
17
|
{
|
|
16
18
|
label: "Canada",
|
|
17
|
-
value: "
|
|
19
|
+
value: "canada",
|
|
20
|
+
id: "ca"
|
|
18
21
|
},
|
|
19
22
|
{
|
|
20
23
|
label: "Pakistan",
|
|
21
|
-
value: "
|
|
24
|
+
value: "pakistan",
|
|
25
|
+
id: "pk"
|
|
22
26
|
},
|
|
23
27
|
{
|
|
24
28
|
label: "India",
|
|
25
|
-
value: "
|
|
29
|
+
value: "india",
|
|
30
|
+
id: "in"
|
|
26
31
|
},
|
|
27
32
|
{
|
|
28
33
|
label: "Australia",
|
|
29
|
-
value: "
|
|
34
|
+
value: "australia",
|
|
35
|
+
id: "au"
|
|
30
36
|
},
|
|
31
37
|
{
|
|
32
38
|
label: "New Zealand",
|
|
33
|
-
value: "
|
|
39
|
+
value: "new Zealand",
|
|
40
|
+
id: "nz"
|
|
34
41
|
},
|
|
35
42
|
{
|
|
36
43
|
label: "Italy",
|
|
37
|
-
value: "
|
|
44
|
+
value: "italy",
|
|
45
|
+
id: "it"
|
|
38
46
|
},
|
|
39
47
|
{
|
|
40
48
|
label: "Spain",
|
|
41
|
-
value: "
|
|
49
|
+
value: "spain",
|
|
50
|
+
id: "es"
|
|
42
51
|
}
|
|
43
|
-
];
|
|
52
|
+
];
|
|
44
53
|
|
|
45
54
|
return (
|
|
46
55
|
<div>
|
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_with_custom_options.html.erb
CHANGED
|
@@ -2,21 +2,21 @@
|
|
|
2
2
|
options = [
|
|
3
3
|
{
|
|
4
4
|
label: "United States",
|
|
5
|
-
value: "
|
|
5
|
+
value: "unitedsStates",
|
|
6
6
|
areaCode: "+1",
|
|
7
7
|
icon: "🇺🇸",
|
|
8
8
|
id: "us"
|
|
9
9
|
},
|
|
10
10
|
{
|
|
11
11
|
label: "Canada",
|
|
12
|
-
value: "
|
|
12
|
+
value: "canada",
|
|
13
13
|
areaCode: "+1",
|
|
14
14
|
icon: "🇨🇦",
|
|
15
15
|
id: "ca"
|
|
16
16
|
},
|
|
17
17
|
{
|
|
18
18
|
label: "Pakistan",
|
|
19
|
-
value: "
|
|
19
|
+
value: "pakistan",
|
|
20
20
|
areaCode: "+92",
|
|
21
21
|
icon: "🇵🇰",
|
|
22
22
|
id: "pk"
|
|
@@ -10,56 +10,56 @@ const DropdownMultiSelectWithCustomOptions = (props) => {
|
|
|
10
10
|
const options = [
|
|
11
11
|
{
|
|
12
12
|
label: "United States",
|
|
13
|
-
value: "
|
|
13
|
+
value: "unitedStates",
|
|
14
14
|
areaCode: "+1",
|
|
15
15
|
icon: "🇺🇸",
|
|
16
16
|
id: "United-states"
|
|
17
17
|
},
|
|
18
18
|
{
|
|
19
19
|
label: "Canada",
|
|
20
|
-
value: "
|
|
20
|
+
value: "canada",
|
|
21
21
|
areaCode: "+1",
|
|
22
22
|
icon: "🇨🇦",
|
|
23
23
|
id: "canada"
|
|
24
24
|
},
|
|
25
25
|
{
|
|
26
26
|
label: "Pakistan",
|
|
27
|
-
value: "
|
|
27
|
+
value: "pakistan",
|
|
28
28
|
areaCode: "+92",
|
|
29
29
|
icon: "🇵🇰",
|
|
30
30
|
id: "pakistan"
|
|
31
31
|
},
|
|
32
32
|
{
|
|
33
33
|
label: "India",
|
|
34
|
-
value: "
|
|
34
|
+
value: "india",
|
|
35
35
|
areaCode: "+91",
|
|
36
36
|
icon: "🇮🇳",
|
|
37
37
|
id: "india"
|
|
38
38
|
},
|
|
39
39
|
{
|
|
40
40
|
label: "Australia",
|
|
41
|
-
value: "
|
|
41
|
+
value: "australia",
|
|
42
42
|
areaCode: "+61",
|
|
43
43
|
icon: "🇦🇺",
|
|
44
44
|
id: "australia"
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
label: "New Zealand",
|
|
48
|
-
value: "
|
|
48
|
+
value: "newZealand",
|
|
49
49
|
areaCode: "+64",
|
|
50
50
|
icon: "🇳🇿",
|
|
51
51
|
id: "new-zealand"
|
|
52
52
|
},
|
|
53
53
|
{
|
|
54
54
|
label: "Italy",
|
|
55
|
-
value: "
|
|
55
|
+
value: "italy",
|
|
56
56
|
areaCode: "+39",
|
|
57
57
|
icon: "🇮🇹",
|
|
58
58
|
id: "italy"
|
|
59
59
|
},
|
|
60
60
|
{
|
|
61
61
|
label: "Spain",
|
|
62
|
-
value: "
|
|
62
|
+
value: "spain",
|
|
63
63
|
areaCode: "+34",
|
|
64
64
|
icon: "🇪🇸",
|
|
65
65
|
id: "spain"
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
<%
|
|
2
2
|
options = [
|
|
3
|
-
{ label: 'United States', value: '
|
|
4
|
-
{ label: 'Canada', value: '
|
|
5
|
-
{ label: 'Pakistan', value: '
|
|
6
|
-
{ label: 'India', value: '
|
|
7
|
-
{ label: 'United Kingdom', value: '
|
|
8
|
-
{ label: 'Australia', value: '
|
|
9
|
-
{ label: 'New Zealand', value: '
|
|
10
|
-
{ label: 'Germany', value: '
|
|
11
|
-
{ label: 'France', value: '
|
|
12
|
-
{ label: 'Italy', value: '
|
|
3
|
+
{ label: 'United States', value: 'unitedsStates', 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: 'unitedKingdom', id: 'uk' },
|
|
8
|
+
{ label: 'Australia', value: 'australia', id: 'au' },
|
|
9
|
+
{ label: 'New Zealand', value: 'newZealand', id: 'nz' },
|
|
10
|
+
{ label: 'Germany', value: 'germany', id: 'de' },
|
|
11
|
+
{ label: 'France', value: 'france', id: 'fr' },
|
|
12
|
+
{ label: 'Italy', value: 'italy', id: 'it' },
|
|
13
13
|
]
|
|
14
14
|
%>
|
|
15
15
|
|