playbook_ui_docs 16.11.0.pre.alpha.PLAY3102dropdownautocomppletedefaultcombo18007 → 16.11.0.pre.alpha.PLAY308717843
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_rails.html.erb +5 -5
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.md +3 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.json +1 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.overrides.json +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_playground.json +0 -1
- data/app/pb_kits/playbook/pb_pill/docs/_playground.json +0 -11
- data/app/pb_kits/playbook/pb_pill/docs/_playground.overrides.json +1 -11
- data/app/pb_kits/playbook/pb_pill/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_pill/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_playground.json +0 -1
- metadata +2 -20
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell.jsx +0 -69
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell.md +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell_rails.html.erb +0 -49
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell_rails.md +0 -3
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_both_rails.html.erb +0 -57
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_both_rails.md +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_bottom_rails.html.erb +0 -57
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_bottom_rails.md +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers.html.erb +0 -40
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers.jsx +0 -55
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers_rails.md +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers_react.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_grouped_options.html.erb +0 -67
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_grouped_options.jsx +0 -95
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_grouped_options.md +0 -1
- data/app/pb_kits/playbook/pb_pill/docs/_pill_size.html.erb +0 -1
- data/app/pb_kits/playbook/pb_pill/docs/_pill_size.jsx +0 -16
- data/app/pb_kits/playbook/pb_pill/docs/_pill_size.md +0 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 16199fa35aee34255b80731ea475a79cf2f90da42bafda7149d371ef09416cda
|
|
4
|
+
data.tar.gz: 8aa699eedd584c848e70b2923a84f77cdb42108a41df9c7c7417fb7e897b13a7
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 5e7b655a96cad1bc78d3d9e50399490c8d5fc85a6faba248d0ffe14209c4754a7ec87de163e09f103b0a211e303ca86abe937bf01b47a946dbd2978fd66a722d
|
|
7
|
+
data.tar.gz: f72cd77a3beb55030c1710e728f3313e7cff7f4d3f2d7f412f26f9f6d5ef4786508eedd30e849e903f0d3d11cf8ac1b2bb6b88aa1b256965f8a71741dc2a1baf
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
label: "Year",
|
|
20
20
|
cellAccessors: ["quarter", "month", "day"],
|
|
21
21
|
sort_menu: [
|
|
22
|
-
{ item: "Year", link: "?sort=year_asc#
|
|
23
|
-
{ item: "Year", link: "?sort=year_desc#
|
|
22
|
+
{ item: "Year", link: "?sort=year_asc#pinned_rows_table", active: params["sort"] == "year_asc", direction: "asc" },
|
|
23
|
+
{ item: "Year", link: "?sort=year_desc#pinned_rows_table", active: params["sort"] == "year_desc", direction: "desc" }
|
|
24
24
|
],
|
|
25
25
|
},
|
|
26
26
|
{
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
|
|
52
52
|
<% pinned_rows = { top: ["8"] } %>
|
|
53
53
|
|
|
54
|
-
<%= pb_rails("advanced_table", props: { id: "
|
|
55
|
-
<%= pb_rails("advanced_table/table_header", props: { table_id: "
|
|
56
|
-
<%= pb_rails("advanced_table/table_body", props: { table_id: "
|
|
54
|
+
<%= pb_rails("advanced_table", props: { id: "pinned_rows_table", table_data: @table_data_with_id, column_definitions: column_definitions, max_height: "xs", pinned_rows: pinned_rows, responsive: "none", table_props: { sticky: true }}) do %>
|
|
55
|
+
<%= pb_rails("advanced_table/table_header", props: { table_id: "pinned_rows_table", column_definitions: column_definitions }) %>
|
|
56
|
+
<%= pb_rails("advanced_table/table_body", props: { table_id: "pinned_rows_table", table_data: @table_data_with_id, column_definitions: column_definitions, pinned_rows: pinned_rows }) %>
|
|
57
57
|
<% end %>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
Use the `pinned_rows` prop to pin specific rows to the top
|
|
1
|
+
Use the `pinned_rows` 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
3
|
**NOTE:**
|
|
4
4
|
- Sticky header required: Pinned rows must be used with `sticky: true` via `table_props` (works with both responsive and non-responsive tables)
|
|
5
5
|
- Row ids required: Each object within the `table_data` array must contain a unique `id` in order to attach an id to all Rows for this to function.
|
|
6
|
-
- `pinned_rows` takes a hash with a `top`
|
|
7
|
-
- For expandable rows, use the parent id in `pinned_rows[:top]
|
|
6
|
+
- `pinned_rows` takes a hash with a `top` key containing an array of row ids, as shown in the code snippet below.
|
|
7
|
+
- For expandable rows, use the parent id in `pinned_rows[:top]`; all its children will automatically be pinned with it. If a child id is passed without the parent being pinned, nothing will be pinned.
|
|
@@ -9,7 +9,6 @@
|
|
|
9
9
|
"defaults": {
|
|
10
10
|
"columnGroupBorderColor": "none",
|
|
11
11
|
"enableToggleExpansion": "header",
|
|
12
|
-
"fullWidthCell": false,
|
|
13
12
|
"inlineRowLoading": false,
|
|
14
13
|
"loading": false,
|
|
15
14
|
"responsive": "scroll",
|
|
@@ -93,8 +92,7 @@
|
|
|
93
92
|
"name": "Column Configuration",
|
|
94
93
|
"props": [
|
|
95
94
|
"columnVisibilityControl",
|
|
96
|
-
"columnGroupBorderColor"
|
|
97
|
-
"fullWidthCell"
|
|
95
|
+
"columnGroupBorderColor"
|
|
98
96
|
]
|
|
99
97
|
},
|
|
100
98
|
{
|
|
@@ -3,19 +3,15 @@ examples:
|
|
|
3
3
|
- advanced_table_beta: Default (Required Props)
|
|
4
4
|
- advanced_table_loading: Loading State
|
|
5
5
|
- advanced_table_beta_subrow_headers: SubRow Headers
|
|
6
|
-
- advanced_table_skipping_subrow_headers: Skipping Subrow Headers
|
|
7
6
|
- advanced_table_enable_toggle_expansion_rails: Enable Toggle Expansion
|
|
8
7
|
- advanced_table_collapsible_trail_rails: Collapsible Trail
|
|
9
8
|
- advanced_table_table_props: Table Props
|
|
10
9
|
- advanced_table_sticky_header_rails: Sticky Header
|
|
11
10
|
- advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
|
|
12
|
-
- advanced_table_pinned_rows_rails: Pinned Rows
|
|
13
|
-
- advanced_table_pinned_rows_bottom_rails: Pinned Rows (Bottom)
|
|
14
|
-
- advanced_table_pinned_rows_both_rails: Pinned Rows (Both)
|
|
11
|
+
- advanced_table_pinned_rows_rails: Pinned Rows
|
|
15
12
|
- advanced_table_beta_sort: Enable Sorting
|
|
16
13
|
- advanced_table_responsive: Responsive Tables
|
|
17
14
|
- advanced_table_custom_cell_rails: Custom Components for Cells
|
|
18
|
-
- advanced_table_full_width_cell_rails: Full Width Cell
|
|
19
15
|
- advanced_table_with_custom_header_rails: Custom Header Cell
|
|
20
16
|
- advanced_table_with_custom_header_multi_header_rails: Custom Header with Multiple Headers
|
|
21
17
|
- advanced_table_column_headers: Multi-Header Columns
|
|
@@ -50,7 +46,6 @@ examples:
|
|
|
50
46
|
- advanced_table_expanded_control: Expanded Control
|
|
51
47
|
- advanced_table_expand_by_depth: Expand by Depth
|
|
52
48
|
- advanced_table_subrow_headers: SubRow Headers
|
|
53
|
-
- advanced_table_skipping_subrow_headers: Skipping Subrow Headers
|
|
54
49
|
- advanced_table_cascade_collapse: Cascade Collapse
|
|
55
50
|
- advanced_table_collapsible_trail: Collapsible Trail
|
|
56
51
|
- advanced_table_table_options: Table Options
|
|
@@ -62,7 +57,6 @@ examples:
|
|
|
62
57
|
- advanced_table_sticky_scroll_limitation: Sticky Header and Column Scroll Limitation
|
|
63
58
|
- advanced_table_responsive: Responsive Tables
|
|
64
59
|
- advanced_table_custom_cell: Custom Components for Cells
|
|
65
|
-
- advanced_table_full_width_cell: Full Width Cell
|
|
66
60
|
- advanced_table_with_custom_header: Custom Header Cell
|
|
67
61
|
- advanced_table_with_custom_header_multi_header: Custom Header with Multiple Headers
|
|
68
62
|
- advanced_table_pagination: Pagination
|
|
@@ -10,7 +10,6 @@ export { default as AdvancedTableTableProps } from './_advanced_table_table_prop
|
|
|
10
10
|
export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
|
|
11
11
|
export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
|
|
12
12
|
export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'
|
|
13
|
-
export { default as AdvancedTableFullWidthCell } from './_advanced_table_full_width_cell.jsx'
|
|
14
13
|
export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
|
|
15
14
|
export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
|
|
16
15
|
export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
|
|
@@ -54,6 +53,5 @@ export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advance
|
|
|
54
53
|
export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
|
|
55
54
|
export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
|
|
56
55
|
export { default as AdvancedTableSortParentOnly } from './_advanced_table_sort_parent_only.jsx'
|
|
57
|
-
export { default as AdvancedTableSkippingSubrowHeaders } from './_advanced_table_skipping_subrow_headers.jsx'
|
|
58
56
|
export { default as AdvancedTablePinnedRowsBottom } from './_advanced_table_pinned_rows_bottom.jsx'
|
|
59
57
|
export { default as AdvancedTablePinnedRowsBoth } from './_advanced_table_pinned_rows_both.jsx'
|
|
@@ -36,7 +36,6 @@ examples:
|
|
|
36
36
|
- dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
|
|
37
37
|
- dropdown_required_indicator: Required Indicator
|
|
38
38
|
- dropdown_disabled: Disabled Input
|
|
39
|
-
- dropdown_grouped_options: Grouped Options
|
|
40
39
|
- dropdown_custom_event_type: Custom Event Type
|
|
41
40
|
|
|
42
41
|
react:
|
|
@@ -78,4 +77,3 @@ examples:
|
|
|
78
77
|
- dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
|
|
79
78
|
- dropdown_required_indicator: Required Indicator
|
|
80
79
|
- dropdown_disabled: Disabled Input
|
|
81
|
-
- dropdown_grouped_options: Grouped Options
|
|
@@ -36,4 +36,3 @@ export { default as DropdownRequiredIndicator } from "./_dropdown_required_indic
|
|
|
36
36
|
export { default as DropdownDisabledOption } from "./_dropdown_disabled_option.jsx";
|
|
37
37
|
export { default as DropdownCustomDisplayDisabledOption } from "./_dropdown_custom_display_disabled_option.jsx";
|
|
38
38
|
export { default as DropdownDisabled } from "./_dropdown_disabled.jsx";
|
|
39
|
-
export { default as DropdownGroupedOptions } from "./_dropdown_grouped_options.jsx";
|
|
@@ -24,7 +24,6 @@
|
|
|
24
24
|
"name": "Appearance",
|
|
25
25
|
"props": [
|
|
26
26
|
"variant",
|
|
27
|
-
"size",
|
|
28
27
|
"textTransform"
|
|
29
28
|
]
|
|
30
29
|
}
|
|
@@ -48,16 +47,6 @@
|
|
|
48
47
|
},
|
|
49
48
|
"children": ""
|
|
50
49
|
},
|
|
51
|
-
{
|
|
52
|
-
"name": "Small",
|
|
53
|
-
"props": {
|
|
54
|
-
"text": "small",
|
|
55
|
-
"size": "sm",
|
|
56
|
-
"variant": "neutral",
|
|
57
|
-
"textTransform": "lowercase"
|
|
58
|
-
},
|
|
59
|
-
"children": ""
|
|
60
|
-
},
|
|
61
50
|
{
|
|
62
51
|
"name": "Preserve Casing",
|
|
63
52
|
"props": {
|
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
},
|
|
12
12
|
{
|
|
13
13
|
"name": "Appearance",
|
|
14
|
-
"props": ["variant", "
|
|
14
|
+
"props": ["variant", "textTransform"]
|
|
15
15
|
}
|
|
16
16
|
],
|
|
17
17
|
"presets": [
|
|
@@ -33,16 +33,6 @@
|
|
|
33
33
|
},
|
|
34
34
|
"children": ""
|
|
35
35
|
},
|
|
36
|
-
{
|
|
37
|
-
"name": "Small",
|
|
38
|
-
"props": {
|
|
39
|
-
"text": "small",
|
|
40
|
-
"size": "sm",
|
|
41
|
-
"variant": "neutral",
|
|
42
|
-
"textTransform": "lowercase"
|
|
43
|
-
},
|
|
44
|
-
"children": ""
|
|
45
|
-
},
|
|
46
36
|
{
|
|
47
37
|
"name": "Preserve Casing",
|
|
48
38
|
"props": {
|
|
@@ -3,7 +3,6 @@ examples:
|
|
|
3
3
|
rails:
|
|
4
4
|
- pill_default: Default
|
|
5
5
|
- pill_variants: Variants
|
|
6
|
-
- pill_size: Size
|
|
7
6
|
- pill_example: Example
|
|
8
7
|
|
|
9
8
|
|
|
@@ -11,7 +10,6 @@ examples:
|
|
|
11
10
|
react:
|
|
12
11
|
- pill_default: Default
|
|
13
12
|
- pill_variants: Variants
|
|
14
|
-
- pill_size: Size
|
|
15
13
|
- pill_example: Example
|
|
16
14
|
|
|
17
15
|
swift:
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui_docs
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 16.11.0.pre.alpha.
|
|
4
|
+
version: 16.11.0.pre.alpha.PLAY308717843
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2026-07-
|
|
12
|
+
date: 2026-07-21 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -102,10 +102,6 @@ files:
|
|
|
102
102
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md
|
|
103
103
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
|
|
104
104
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
|
|
105
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell.jsx
|
|
106
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell.md
|
|
107
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell_rails.html.erb
|
|
108
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell_rails.md
|
|
109
105
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_grouped_headers_composition.jsx
|
|
110
106
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_grouped_headers_composition.md
|
|
111
107
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx
|
|
@@ -136,12 +132,8 @@ files:
|
|
|
136
132
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.md
|
|
137
133
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx
|
|
138
134
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_both.jsx
|
|
139
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_both_rails.html.erb
|
|
140
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_both_rails.md
|
|
141
135
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_both_react.md
|
|
142
136
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_bottom.jsx
|
|
143
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_bottom_rails.html.erb
|
|
144
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_bottom_rails.md
|
|
145
137
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_bottom_react.md
|
|
146
138
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.html.erb
|
|
147
139
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_rails.md
|
|
@@ -171,10 +163,6 @@ files:
|
|
|
171
163
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_react.md
|
|
172
164
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.html.erb
|
|
173
165
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md
|
|
174
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers.html.erb
|
|
175
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers.jsx
|
|
176
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers_rails.md
|
|
177
|
-
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers_react.md
|
|
178
166
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx
|
|
179
167
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md
|
|
180
168
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx
|
|
@@ -982,9 +970,6 @@ files:
|
|
|
982
970
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.md
|
|
983
971
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb
|
|
984
972
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx
|
|
985
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_grouped_options.html.erb
|
|
986
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_grouped_options.jsx
|
|
987
|
-
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_grouped_options.md
|
|
988
973
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx
|
|
989
974
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.md
|
|
990
975
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx
|
|
@@ -2078,9 +2063,6 @@ files:
|
|
|
2078
2063
|
- app/pb_kits/playbook/pb_pill/docs/_pill_example.jsx
|
|
2079
2064
|
- app/pb_kits/playbook/pb_pill/docs/_pill_example.md
|
|
2080
2065
|
- app/pb_kits/playbook/pb_pill/docs/_pill_props_swift.md
|
|
2081
|
-
- app/pb_kits/playbook/pb_pill/docs/_pill_size.html.erb
|
|
2082
|
-
- app/pb_kits/playbook/pb_pill/docs/_pill_size.jsx
|
|
2083
|
-
- app/pb_kits/playbook/pb_pill/docs/_pill_size.md
|
|
2084
2066
|
- app/pb_kits/playbook/pb_pill/docs/_pill_variants.html.erb
|
|
2085
2067
|
- app/pb_kits/playbook/pb_pill/docs/_pill_variants.jsx
|
|
2086
2068
|
- app/pb_kits/playbook/pb_pill/docs/_pill_variants_swift.md
|
|
@@ -1,69 +0,0 @@
|
|
|
1
|
-
import React from "react"
|
|
2
|
-
import AdvancedTable from '../../pb_advanced_table/_advanced_table'
|
|
3
|
-
import Flex from "../../pb_flex/_flex"
|
|
4
|
-
import Badge from "../../pb_badge/_badge"
|
|
5
|
-
import Title from "../../pb_title/_title"
|
|
6
|
-
import MOCK_DATA from "./advanced_table_mock_data.json"
|
|
7
|
-
|
|
8
|
-
const AdvancedTableFullWidthCell = (props) => {
|
|
9
|
-
const columnDefinitions = [
|
|
10
|
-
{
|
|
11
|
-
accessor: "year",
|
|
12
|
-
label: "Year",
|
|
13
|
-
cellAccessors: ["quarter", "month", "day"],
|
|
14
|
-
customRenderer: (row, value) => (
|
|
15
|
-
<Flex justify="between">
|
|
16
|
-
<Title size={4}
|
|
17
|
-
text={value}
|
|
18
|
-
/>
|
|
19
|
-
<Badge dark
|
|
20
|
-
marginLeft="xxs"
|
|
21
|
-
text={row.original.newEnrollments > 20 ? "High" : "Low"}
|
|
22
|
-
variant="neutral"
|
|
23
|
-
/>
|
|
24
|
-
</Flex>
|
|
25
|
-
),
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
accessor: "newEnrollments",
|
|
29
|
-
label: "New Enrollments",
|
|
30
|
-
},
|
|
31
|
-
{
|
|
32
|
-
accessor: "scheduledMeetings",
|
|
33
|
-
label: "Scheduled Meetings",
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
accessor: "attendanceRate",
|
|
37
|
-
label: "Attendance Rate",
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
accessor: "completedClasses",
|
|
41
|
-
label: "Completed Classes",
|
|
42
|
-
},
|
|
43
|
-
{
|
|
44
|
-
accessor: "classCompletionRate",
|
|
45
|
-
label: "Class Completion Rate",
|
|
46
|
-
},
|
|
47
|
-
{
|
|
48
|
-
accessor: "graduatedStudents",
|
|
49
|
-
label: "Graduated Students",
|
|
50
|
-
},
|
|
51
|
-
]
|
|
52
|
-
|
|
53
|
-
return (
|
|
54
|
-
<div>
|
|
55
|
-
<AdvancedTable
|
|
56
|
-
columnDefinitions={columnDefinitions}
|
|
57
|
-
enableToggleExpansion="all"
|
|
58
|
-
fullWidthCell
|
|
59
|
-
tableData={MOCK_DATA}
|
|
60
|
-
{...props}
|
|
61
|
-
>
|
|
62
|
-
<AdvancedTable.Header enableSorting />
|
|
63
|
-
<AdvancedTable.Body />
|
|
64
|
-
</AdvancedTable>
|
|
65
|
-
</div>
|
|
66
|
-
)
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
export default AdvancedTableFullWidthCell
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
`fullWidthCell` is an optional boolean prop that defaults to `false`. When set to `true`, the first column's cell content takes up the full available width of the cell.
|
|
2
|
-
|
|
3
|
-
This is especially useful with custom cell renderers that need horizontal space — for example, a `Flex` with `justify="between"` that places content on both the left and right edges of the cell.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell_rails.html.erb
DELETED
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
<%
|
|
2
|
-
column_definitions = [
|
|
3
|
-
{
|
|
4
|
-
accessor: "year",
|
|
5
|
-
label: "Year",
|
|
6
|
-
cellAccessors: ["quarter", "month", "day"],
|
|
7
|
-
custom_renderer: ->(row, value) {
|
|
8
|
-
capture do
|
|
9
|
-
pb_rails("flex", props: { justify: "between" }) do
|
|
10
|
-
pb_rails("title", props: { text: value, size: 4 }) +
|
|
11
|
-
pb_rails("badge", props: { dark: true, margin_left: "xxs", text: row[:newEnrollments].to_i > 20 ? "High" : "Low", variant: "neutral" })
|
|
12
|
-
end
|
|
13
|
-
end
|
|
14
|
-
}
|
|
15
|
-
},
|
|
16
|
-
{
|
|
17
|
-
accessor: "newEnrollments",
|
|
18
|
-
label: "New Enrollments",
|
|
19
|
-
},
|
|
20
|
-
{
|
|
21
|
-
accessor: "scheduledMeetings",
|
|
22
|
-
label: "Scheduled Meetings",
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
accessor: "attendanceRate",
|
|
26
|
-
label: "Attendance Rate",
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
accessor: "completedClasses",
|
|
30
|
-
label: "Completed Classes",
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
accessor: "classCompletionRate",
|
|
34
|
-
label: "Class Completion Rate",
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
accessor: "graduatedStudents",
|
|
38
|
-
label: "Graduated Students",
|
|
39
|
-
}
|
|
40
|
-
]
|
|
41
|
-
%>
|
|
42
|
-
|
|
43
|
-
<%= pb_rails("advanced_table", props: {
|
|
44
|
-
id: "full_width_cell",
|
|
45
|
-
table_data: @table_data,
|
|
46
|
-
column_definitions: column_definitions,
|
|
47
|
-
enable_toggle_expansion: "all",
|
|
48
|
-
full_width_cell: true
|
|
49
|
-
}) %>
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
`full_width_cell` is an optional boolean prop that defaults to `false`. When set to `true`, the first column's cell content takes up the full available width of the cell.
|
|
2
|
-
|
|
3
|
-
This is especially useful with custom cell renderers that need horizontal space — for example, a `Flex` with `justify: "between"` that places content on both the left and right edges of the cell.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_both_rails.html.erb
DELETED
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
<%# Example sort method for demonstration purposes %>
|
|
2
|
-
<% if params["sort"] %>
|
|
3
|
-
<% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
|
|
4
|
-
<% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
|
|
5
|
-
<% @table_data_with_id.sort! do |a, b|
|
|
6
|
-
value_a = a[sort_param] || a[sort_param.to_sym]
|
|
7
|
-
value_b = b[sort_param] || b[sort_param.to_sym]
|
|
8
|
-
|
|
9
|
-
value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
|
|
10
|
-
value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
|
|
11
|
-
|
|
12
|
-
sort_direction * (value_a <=> value_b)
|
|
13
|
-
end %>
|
|
14
|
-
<% end %>
|
|
15
|
-
|
|
16
|
-
<% column_definitions = [
|
|
17
|
-
{
|
|
18
|
-
accessor: "year",
|
|
19
|
-
label: "Year",
|
|
20
|
-
cellAccessors: ["quarter", "month", "day"],
|
|
21
|
-
sort_menu: [
|
|
22
|
-
{ item: "Year", link: "?sort=year_asc#pinned_rows_both_table", active: params["sort"] == "year_asc", direction: "asc" },
|
|
23
|
-
{ item: "Year", link: "?sort=year_desc#pinned_rows_both_table", active: params["sort"] == "year_desc", direction: "desc" }
|
|
24
|
-
],
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
accessor: "newEnrollments",
|
|
28
|
-
label: "New Enrollments",
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
accessor: "scheduledMeetings",
|
|
32
|
-
label: "Scheduled Meetings",
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
accessor: "attendanceRate",
|
|
36
|
-
label: "Attendance Rate",
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
accessor: "completedClasses",
|
|
40
|
-
label: "Completed Classes",
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
accessor: "classCompletionRate",
|
|
44
|
-
label: "Class Completion Rate",
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
accessor: "graduatedStudents",
|
|
48
|
-
label: "Graduated Students",
|
|
49
|
-
}
|
|
50
|
-
] %>
|
|
51
|
-
|
|
52
|
-
<% pinned_rows = { top: ["8"], bottom: ["1"] } %>
|
|
53
|
-
|
|
54
|
-
<%= pb_rails("advanced_table", props: { id: "pinned_rows_both_table", table_data: @table_data_with_id, column_definitions: column_definitions, max_height: "xs", pinned_rows: pinned_rows, responsive: "none", table_props: { sticky: true }}) do %>
|
|
55
|
-
<%= pb_rails("advanced_table/table_header", props: { table_id: "pinned_rows_both_table", column_definitions: column_definitions }) %>
|
|
56
|
-
<%= pb_rails("advanced_table/table_body", props: { table_id: "pinned_rows_both_table", table_data: @table_data_with_id, column_definitions: column_definitions, pinned_rows: pinned_rows }) %>
|
|
57
|
-
<% end %>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
This code snippet demonstrates `pinned_rows` taking a hash with an array of row ids to both the `top` and `bottom` keys.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_bottom_rails.html.erb
DELETED
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
<%# Example sort method for demonstration purposes %>
|
|
2
|
-
<% if params["sort"] %>
|
|
3
|
-
<% sort_param = params["sort"].gsub(/_(asc|desc)\z/, "") %>
|
|
4
|
-
<% sort_direction = params["sort"].end_with?("_asc") ? 1 : -1 %>
|
|
5
|
-
<% @table_data_with_id.sort! do |a, b|
|
|
6
|
-
value_a = a[sort_param] || a[sort_param.to_sym]
|
|
7
|
-
value_b = b[sort_param] || b[sort_param.to_sym]
|
|
8
|
-
|
|
9
|
-
value_a = value_a.to_i if value_a.is_a?(String) && value_a.match?(/^\d+$/)
|
|
10
|
-
value_b = value_b.to_i if value_b.is_a?(String) && value_b.match?(/^\d+$/)
|
|
11
|
-
|
|
12
|
-
sort_direction * (value_a <=> value_b)
|
|
13
|
-
end %>
|
|
14
|
-
<% end %>
|
|
15
|
-
|
|
16
|
-
<% column_definitions = [
|
|
17
|
-
{
|
|
18
|
-
accessor: "year",
|
|
19
|
-
label: "Year",
|
|
20
|
-
cellAccessors: ["quarter", "month", "day"],
|
|
21
|
-
sort_menu: [
|
|
22
|
-
{ item: "Year", link: "?sort=year_asc#pinned_rows_bottom_table", active: params["sort"] == "year_asc", direction: "asc" },
|
|
23
|
-
{ item: "Year", link: "?sort=year_desc#pinned_rows_bottom_table", active: params["sort"] == "year_desc", direction: "desc" }
|
|
24
|
-
],
|
|
25
|
-
},
|
|
26
|
-
{
|
|
27
|
-
accessor: "newEnrollments",
|
|
28
|
-
label: "New Enrollments",
|
|
29
|
-
},
|
|
30
|
-
{
|
|
31
|
-
accessor: "scheduledMeetings",
|
|
32
|
-
label: "Scheduled Meetings",
|
|
33
|
-
},
|
|
34
|
-
{
|
|
35
|
-
accessor: "attendanceRate",
|
|
36
|
-
label: "Attendance Rate",
|
|
37
|
-
},
|
|
38
|
-
{
|
|
39
|
-
accessor: "completedClasses",
|
|
40
|
-
label: "Completed Classes",
|
|
41
|
-
},
|
|
42
|
-
{
|
|
43
|
-
accessor: "classCompletionRate",
|
|
44
|
-
label: "Class Completion Rate",
|
|
45
|
-
},
|
|
46
|
-
{
|
|
47
|
-
accessor: "graduatedStudents",
|
|
48
|
-
label: "Graduated Students",
|
|
49
|
-
}
|
|
50
|
-
] %>
|
|
51
|
-
|
|
52
|
-
<% pinned_rows = { bottom: ["8"] } %>
|
|
53
|
-
|
|
54
|
-
<%= pb_rails("advanced_table", props: { id: "pinned_rows_bottom_table", table_data: @table_data_with_id, column_definitions: column_definitions, max_height: "xs", pinned_rows: pinned_rows, responsive: "none", table_props: { sticky: true }}) do %>
|
|
55
|
-
<%= pb_rails("advanced_table/table_header", props: { table_id: "pinned_rows_bottom_table", column_definitions: column_definitions }) %>
|
|
56
|
-
<%= pb_rails("advanced_table/table_body", props: { table_id: "pinned_rows_bottom_table", table_data: @table_data_with_id, column_definitions: column_definitions, pinned_rows: pinned_rows }) %>
|
|
57
|
-
<% end %>
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_bottom_rails.md
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
This code snippet demonstrates `pinned_rows` taking a hash with an array of row ids to the `bottom` key.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers.html.erb
DELETED
|
@@ -1,40 +0,0 @@
|
|
|
1
|
-
<%
|
|
2
|
-
column_definitions = [
|
|
3
|
-
{
|
|
4
|
-
accessor: "year",
|
|
5
|
-
label: "Year",
|
|
6
|
-
cellAccessors: ["quarter", "month", "day"],
|
|
7
|
-
},
|
|
8
|
-
{
|
|
9
|
-
accessor: "newEnrollments",
|
|
10
|
-
label: "New Enrollments",
|
|
11
|
-
},
|
|
12
|
-
{
|
|
13
|
-
accessor: "scheduledMeetings",
|
|
14
|
-
label: "Scheduled Meetings",
|
|
15
|
-
},
|
|
16
|
-
{
|
|
17
|
-
accessor: "attendanceRate",
|
|
18
|
-
label: "Attendance Rate",
|
|
19
|
-
},
|
|
20
|
-
{
|
|
21
|
-
accessor: "completedClasses",
|
|
22
|
-
label: "Completed Classes",
|
|
23
|
-
},
|
|
24
|
-
{
|
|
25
|
-
accessor: "classCompletionRate",
|
|
26
|
-
label: "Class Completion Rate",
|
|
27
|
-
},
|
|
28
|
-
{
|
|
29
|
-
accessor: "graduatedStudents",
|
|
30
|
-
label: "Graduated Students",
|
|
31
|
-
}
|
|
32
|
-
]
|
|
33
|
-
|
|
34
|
-
subrow_headers = ["Quarter", "", "Day"]
|
|
35
|
-
%>
|
|
36
|
-
|
|
37
|
-
<%= pb_rails("advanced_table", props: { id: "skipping-subrow-headers", table_data: @table_data, column_definitions: column_definitions }) do %>
|
|
38
|
-
<%= pb_rails("advanced_table/table_header", props: { table_id: "skipping-subrow-headers", column_definitions: column_definitions }) %>
|
|
39
|
-
<%= pb_rails("advanced_table/table_body", props: { table_id: "skipping-subrow-headers", table_data: @table_data, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all" }) %>
|
|
40
|
-
<% end %>
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers.jsx
DELETED
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import AdvancedTable from '../../pb_advanced_table/_advanced_table'
|
|
3
|
-
import MOCK_DATA from "./advanced_table_mock_data.json"
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
const AdvancedTableSkippingSubrowHeaders = (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 subRowHeaders = ["Quarter", "", "Day"]
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
return (
|
|
43
|
-
<div>
|
|
44
|
-
<AdvancedTable
|
|
45
|
-
columnDefinitions={columnDefinitions}
|
|
46
|
-
tableData={MOCK_DATA}
|
|
47
|
-
{...props}
|
|
48
|
-
>
|
|
49
|
-
<AdvancedTable.Header />
|
|
50
|
-
<AdvancedTable.Body subRowHeaders={subRowHeaders}/>
|
|
51
|
-
</AdvancedTable>
|
|
52
|
-
</div>
|
|
53
|
-
);
|
|
54
|
-
};
|
|
55
|
-
export default AdvancedTableSkippingSubrowHeaders;
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers_rails.md
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Pass an empty string at any index in `sub_row_headers` to skip the rendering of a subrow header while still nesting the data under it.
|
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers_react.md
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Pass an empty string at any index in `subRowHeaders` to skip the rendering of a subrow header while still nesting the data under it.
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
<%
|
|
2
|
-
sections = [
|
|
3
|
-
{
|
|
4
|
-
title: "Profile",
|
|
5
|
-
items: [
|
|
6
|
-
{ label: "View Profile", value: "profile", id: "profile" },
|
|
7
|
-
{ label: "Account Settings", value: "settings", id: "settings" },
|
|
8
|
-
],
|
|
9
|
-
},
|
|
10
|
-
{
|
|
11
|
-
title: "Workspace",
|
|
12
|
-
items: [
|
|
13
|
-
{ label: "Projects", value: "projects", id: "projects" },
|
|
14
|
-
{ label: "Billing", value: "billing", id: "billing" },
|
|
15
|
-
],
|
|
16
|
-
},
|
|
17
|
-
{
|
|
18
|
-
title: "Support",
|
|
19
|
-
items: [
|
|
20
|
-
{ label: "Help Center", value: "help", id: "help" },
|
|
21
|
-
{ label: "Contact Support", value: "contact", id: "contact" },
|
|
22
|
-
],
|
|
23
|
-
},
|
|
24
|
-
]
|
|
25
|
-
|
|
26
|
-
options = sections.flat_map { |section| section[:items] }
|
|
27
|
-
%>
|
|
28
|
-
|
|
29
|
-
<%= pb_rails("dropdown", props: { label: "Grouped Options", margin_bottom: "md", options: options }) do %>
|
|
30
|
-
<%= pb_rails("dropdown/dropdown_trigger") %>
|
|
31
|
-
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
32
|
-
<% sections.each do |section| %>
|
|
33
|
-
|
|
34
|
-
<%= pb_rails("caption", props: {
|
|
35
|
-
text: section[:title],
|
|
36
|
-
color: "light",
|
|
37
|
-
padding_x: "xs",
|
|
38
|
-
padding_y: "xs"
|
|
39
|
-
}) %>
|
|
40
|
-
|
|
41
|
-
<%= pb_rails("section_separator") %>
|
|
42
|
-
|
|
43
|
-
<% section[:items].each do |option| %>
|
|
44
|
-
<%= pb_rails("dropdown/dropdown_option", props: { option: option }) %>
|
|
45
|
-
<% end %>
|
|
46
|
-
|
|
47
|
-
<% end %>
|
|
48
|
-
<% end %>
|
|
49
|
-
<% end %>
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
<%= pb_rails("dropdown", props: { label: "Grouped Options Minimalist", options: options, separators: false }) do %>
|
|
53
|
-
<%= pb_rails("dropdown/dropdown_trigger") %>
|
|
54
|
-
<%= pb_rails("dropdown/dropdown_container") do %>
|
|
55
|
-
<% sections.each do |section| %>
|
|
56
|
-
|
|
57
|
-
<%= pb_rails("section_separator", props: { padding_y: "xs" }) do %>
|
|
58
|
-
<%= pb_rails("caption", props: { text: section[:title], padding_x: "xs" }) %>
|
|
59
|
-
<% end %>
|
|
60
|
-
|
|
61
|
-
<% section[:items].each do |option| %>
|
|
62
|
-
<%= pb_rails("dropdown/dropdown_option", props: { option: option }) %>
|
|
63
|
-
<% end %>
|
|
64
|
-
|
|
65
|
-
<% end %>
|
|
66
|
-
<% end %>
|
|
67
|
-
<% end %>
|
|
@@ -1,95 +0,0 @@
|
|
|
1
|
-
import React from 'react'
|
|
2
|
-
import Dropdown from '../_dropdown'
|
|
3
|
-
import Caption from '../../pb_caption/_caption'
|
|
4
|
-
import SectionSeparator from '../../pb_section_separator/_section_separator'
|
|
5
|
-
|
|
6
|
-
const DropdownGroupedOptions = (props) => {
|
|
7
|
-
|
|
8
|
-
const sections = [
|
|
9
|
-
{
|
|
10
|
-
title: "Profile",
|
|
11
|
-
items: [
|
|
12
|
-
{ label: "View Profile", value: "profile", id: "profile" },
|
|
13
|
-
{ label: "Account Settings", value: "settings", id: "settings" },
|
|
14
|
-
],
|
|
15
|
-
},
|
|
16
|
-
{
|
|
17
|
-
title: "Workspace",
|
|
18
|
-
items: [
|
|
19
|
-
{ label: "Projects", value: "projects", id: "projects" },
|
|
20
|
-
{ label: "Billing", value: "billing", id: "billing" },
|
|
21
|
-
],
|
|
22
|
-
},
|
|
23
|
-
{
|
|
24
|
-
title: "Support",
|
|
25
|
-
items: [
|
|
26
|
-
{ label: "Help Center", value: "help", id: "help" },
|
|
27
|
-
{ label: "Contact Support", value: "support", id: "support" },
|
|
28
|
-
],
|
|
29
|
-
},
|
|
30
|
-
]
|
|
31
|
-
const options = sections.flatMap((section) => section.items)
|
|
32
|
-
|
|
33
|
-
return (
|
|
34
|
-
<div>
|
|
35
|
-
<Dropdown
|
|
36
|
-
label="Grouped Options"
|
|
37
|
-
marginBottom="md"
|
|
38
|
-
options={options}
|
|
39
|
-
{...props}
|
|
40
|
-
>
|
|
41
|
-
<Dropdown.Trigger />
|
|
42
|
-
<Dropdown.Container>
|
|
43
|
-
{sections.map((section) => (
|
|
44
|
-
<React.Fragment key={section.title}>
|
|
45
|
-
<Caption
|
|
46
|
-
color="light"
|
|
47
|
-
padding="xs"
|
|
48
|
-
>
|
|
49
|
-
{section.title}
|
|
50
|
-
</Caption>
|
|
51
|
-
<SectionSeparator />
|
|
52
|
-
|
|
53
|
-
{section.items.map((option) => (
|
|
54
|
-
<Dropdown.Option
|
|
55
|
-
key={option.id}
|
|
56
|
-
option={option}
|
|
57
|
-
/>
|
|
58
|
-
))}
|
|
59
|
-
</React.Fragment>
|
|
60
|
-
))}
|
|
61
|
-
</Dropdown.Container>
|
|
62
|
-
</Dropdown>
|
|
63
|
-
<Dropdown
|
|
64
|
-
label="Grouped Options Minimalist"
|
|
65
|
-
options={options}
|
|
66
|
-
separators={false}
|
|
67
|
-
{...props}
|
|
68
|
-
>
|
|
69
|
-
<Dropdown.Trigger />
|
|
70
|
-
<Dropdown.Container>
|
|
71
|
-
{sections.map((section) => (
|
|
72
|
-
<React.Fragment key={section.title}>
|
|
73
|
-
<SectionSeparator
|
|
74
|
-
paddingY="xs"
|
|
75
|
-
>
|
|
76
|
-
<Caption paddingX="xs">
|
|
77
|
-
{section.title}
|
|
78
|
-
</Caption>
|
|
79
|
-
</SectionSeparator>
|
|
80
|
-
|
|
81
|
-
{section.items.map((option) => (
|
|
82
|
-
<Dropdown.Option
|
|
83
|
-
key={option.id}
|
|
84
|
-
option={option}
|
|
85
|
-
/>
|
|
86
|
-
))}
|
|
87
|
-
</React.Fragment>
|
|
88
|
-
))}
|
|
89
|
-
</Dropdown.Container>
|
|
90
|
-
</Dropdown>
|
|
91
|
-
</div>
|
|
92
|
-
)
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
export default DropdownGroupedOptions
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Customize the Dropdown Container to organize options into distinct, labeled sections.
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<%= pb_rails("pill", props: { size: "sm", text: "Small" }) %>
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Set pill size to small with `size: "sm"` / `size="sm"`.
|