playbook_ui_docs 14.22.0.pre.rc.4 → 14.22.0.pre.rc.5
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_advanced_table/docs/_advanced_table_row_styling.jsx +64 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_row_styling.md +7 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
- 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 +1 -1
- metadata +12 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: a97c273eb67dd22ce9351cc164bd0c6ba4f15f8ccaa0b3634aa5bea0972faaff
|
|
4
|
+
data.tar.gz: 41fc920a61adbd19d9458e5a05106908ec6e64fef24c206cb65da3588c065212
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 251107401872bb1fa0756bef356de4b23b1728e0ca1ae8e57714135533ef32a252ebcaead6c329a77073a50f5b8199fb0527ac6b83b0d9f631e0f253d9f2c094
|
|
7
|
+
data.tar.gz: 404bb81493b772574ff81aafafbb8ccd708f6eff3de8c1fb79f445cab1d152c33bf80f8a42ae1c058fd1b5914f35944703c8bf15e504d1439d1f2e275afffadd
|
|
@@ -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.
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import AdvancedTable from '../_advanced_table'
|
|
3
|
+
import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
|
|
4
|
+
import { colors } from "playbook-ui"
|
|
5
|
+
|
|
6
|
+
const AdvancedTableRowStyling = (props) => {
|
|
7
|
+
const columnDefinitions = [
|
|
8
|
+
{
|
|
9
|
+
accessor: "year",
|
|
10
|
+
label: "Year",
|
|
11
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
accessor: "newEnrollments",
|
|
15
|
+
label: "New Enrollments",
|
|
16
|
+
},
|
|
17
|
+
{
|
|
18
|
+
accessor: "scheduledMeetings",
|
|
19
|
+
label: "Scheduled Meetings",
|
|
20
|
+
},
|
|
21
|
+
{
|
|
22
|
+
accessor: "attendanceRate",
|
|
23
|
+
label: "Attendance Rate",
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
accessor: "completedClasses",
|
|
27
|
+
label: "Completed Classes",
|
|
28
|
+
},
|
|
29
|
+
{
|
|
30
|
+
accessor: "classCompletionRate",
|
|
31
|
+
label: "Class Completion Rate",
|
|
32
|
+
},
|
|
33
|
+
{
|
|
34
|
+
accessor: "graduatedStudents",
|
|
35
|
+
label: "Graduated Students",
|
|
36
|
+
},
|
|
37
|
+
]
|
|
38
|
+
|
|
39
|
+
const rowStyling = [
|
|
40
|
+
{
|
|
41
|
+
rowId: "1",
|
|
42
|
+
backgroundColor: colors.warning,
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
rowId: "8",
|
|
46
|
+
backgroundColor: colors.category_1,
|
|
47
|
+
fontColor: colors.white,
|
|
48
|
+
expandButtonColor: colors.white,
|
|
49
|
+
},
|
|
50
|
+
];
|
|
51
|
+
|
|
52
|
+
return (
|
|
53
|
+
<div>
|
|
54
|
+
<AdvancedTable
|
|
55
|
+
columnDefinitions={columnDefinitions}
|
|
56
|
+
rowStyling={rowStyling}
|
|
57
|
+
tableData={MOCK_DATA}
|
|
58
|
+
{...props}
|
|
59
|
+
/>
|
|
60
|
+
</div>
|
|
61
|
+
)
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
export default AdvancedTableRowStyling
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
The `rowStyling` prop can be used in conjunction with row ids to control certain styling options on individual rows. Currently, `rowStyling` gives you 3 optional controls:
|
|
2
|
+
|
|
3
|
+
- `backgroundColor` : use this to control the background color of the row
|
|
4
|
+
- `fontColor`: use this to control font color for each row if needed, for example if using a darker background color.
|
|
5
|
+
- `expandButtonColor`: use this to control the color of the expand icon if needed, for example if using a darker background color.
|
|
6
|
+
|
|
7
|
+
**NOTE:** Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function.
|
|
@@ -59,6 +59,7 @@ examples:
|
|
|
59
59
|
- advanced_table_column_visibility_multi: Column Visibility Control with Multi-Header Columns
|
|
60
60
|
- advanced_table_pinned_rows: Pinned Rows
|
|
61
61
|
- advanced_table_scrollbar_none: Advanced Table Scrollbar None
|
|
62
|
+
- advanced_table_row_styling: Row Styling
|
|
62
63
|
- advanced_table_column_styling: Column Styling
|
|
63
64
|
- advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
|
|
64
65
|
- advanced_table_infinite_scroll: Infinite Scroll
|
|
@@ -34,6 +34,7 @@ export { default as AdvancedTableColumnVisibilityMulti } from './_advanced_table
|
|
|
34
34
|
export { default as AdvancedTableColumnVisibilityWithState } from './_advanced_table_column_visibility_with_state.jsx'
|
|
35
35
|
export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_rows.jsx'
|
|
36
36
|
export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'
|
|
37
|
+
export { default as AdvancedTableRowStyling } from './_advanced_table_row_styling.jsx'
|
|
37
38
|
export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
|
|
38
39
|
export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
|
|
39
40
|
export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
|
|
@@ -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"
|