playbook_ui_docs 16.12.0.pre.rc.0 → 16.12.0.pre.rc.2
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_full_width_cell.jsx +69 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell_rails.html.erb +49 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell_rails.md +3 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers.html.erb +40 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers.jsx +55 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers_rails.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers_react.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.json +3 -1
- 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 +4 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_grouped_options.html.erb +67 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_grouped_options.jsx +95 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_grouped_options.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_playground.json +3 -0
- data/app/pb_kits/playbook/pb_table/docs/_playground.overrides.json +3 -0
- metadata +13 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: fe76af5f2d2cd729737f5a914361eeacebe347097be1cdb7baf3136702872204
|
|
4
|
+
data.tar.gz: 4810d801306ef272aee1eecba863b8897d5c79bb05b1df7dfdf388448bafb64f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 72f6aa5b3823a373916b9aaeae945c70d0b4f70a94f5543e758651ebb76664e3fb4e3224e0ee538cd73e6a72d11e662028452eb0384a4d05acb35b67ac1c196f
|
|
7
|
+
data.tar.gz: 5add70e732bbff11a096491486fcabccbe9ec3705d99e096fcf55c566e43c02726943af4e4ad4a588d52bc4cd9d1354b4291b377a1e171183dcf48e291a053a9
|
|
@@ -0,0 +1,69 @@
|
|
|
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
|
|
@@ -0,0 +1,3 @@
|
|
|
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
ADDED
|
@@ -0,0 +1,49 @@
|
|
|
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
|
+
}) %>
|
|
@@ -0,0 +1,3 @@
|
|
|
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_skipping_subrow_headers.html.erb
ADDED
|
@@ -0,0 +1,40 @@
|
|
|
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 %>
|
|
@@ -0,0 +1,55 @@
|
|
|
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
ADDED
|
@@ -0,0 +1 @@
|
|
|
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
ADDED
|
@@ -0,0 +1 @@
|
|
|
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.
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
"defaults": {
|
|
10
10
|
"columnGroupBorderColor": "none",
|
|
11
11
|
"enableToggleExpansion": "header",
|
|
12
|
+
"fullWidthCell": false,
|
|
12
13
|
"inlineRowLoading": false,
|
|
13
14
|
"loading": false,
|
|
14
15
|
"responsive": "scroll",
|
|
@@ -92,7 +93,8 @@
|
|
|
92
93
|
"name": "Column Configuration",
|
|
93
94
|
"props": [
|
|
94
95
|
"columnVisibilityControl",
|
|
95
|
-
"columnGroupBorderColor"
|
|
96
|
+
"columnGroupBorderColor",
|
|
97
|
+
"fullWidthCell"
|
|
96
98
|
]
|
|
97
99
|
},
|
|
98
100
|
{
|
|
@@ -3,6 +3,7 @@ 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
|
|
6
7
|
- advanced_table_enable_toggle_expansion_rails: Enable Toggle Expansion
|
|
7
8
|
- advanced_table_collapsible_trail_rails: Collapsible Trail
|
|
8
9
|
- advanced_table_table_props: Table Props
|
|
@@ -12,6 +13,7 @@ examples:
|
|
|
12
13
|
- advanced_table_beta_sort: Enable Sorting
|
|
13
14
|
- advanced_table_responsive: Responsive Tables
|
|
14
15
|
- advanced_table_custom_cell_rails: Custom Components for Cells
|
|
16
|
+
- advanced_table_full_width_cell_rails: Full Width Cell
|
|
15
17
|
- advanced_table_with_custom_header_rails: Custom Header Cell
|
|
16
18
|
- advanced_table_with_custom_header_multi_header_rails: Custom Header with Multiple Headers
|
|
17
19
|
- advanced_table_column_headers: Multi-Header Columns
|
|
@@ -45,6 +47,7 @@ examples:
|
|
|
45
47
|
- advanced_table_expanded_control: Expanded Control
|
|
46
48
|
- advanced_table_expand_by_depth: Expand by Depth
|
|
47
49
|
- advanced_table_subrow_headers: SubRow Headers
|
|
50
|
+
- advanced_table_skipping_subrow_headers: Skipping Subrow Headers
|
|
48
51
|
- advanced_table_cascade_collapse: Cascade Collapse
|
|
49
52
|
- advanced_table_collapsible_trail: Collapsible Trail
|
|
50
53
|
- advanced_table_table_options: Table Options
|
|
@@ -56,6 +59,7 @@ examples:
|
|
|
56
59
|
- advanced_table_sticky_scroll_limitation: Sticky Header and Column Scroll Limitation
|
|
57
60
|
- advanced_table_responsive: Responsive Tables
|
|
58
61
|
- advanced_table_custom_cell: Custom Components for Cells
|
|
62
|
+
- advanced_table_full_width_cell: Full Width Cell
|
|
59
63
|
- advanced_table_with_custom_header: Custom Header Cell
|
|
60
64
|
- advanced_table_with_custom_header_multi_header: Custom Header with Multiple Headers
|
|
61
65
|
- advanced_table_pagination: Pagination
|
|
@@ -10,6 +10,7 @@ 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'
|
|
13
14
|
export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
|
|
14
15
|
export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
|
|
15
16
|
export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
|
|
@@ -53,5 +54,6 @@ export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advance
|
|
|
53
54
|
export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
|
|
54
55
|
export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
|
|
55
56
|
export { default as AdvancedTableSortParentOnly } from './_advanced_table_sort_parent_only.jsx'
|
|
57
|
+
export { default as AdvancedTableSkippingSubrowHeaders } from './_advanced_table_skipping_subrow_headers.jsx'
|
|
56
58
|
export { default as AdvancedTablePinnedRowsBottom } from './_advanced_table_pinned_rows_bottom.jsx'
|
|
57
59
|
export { default as AdvancedTablePinnedRowsBoth } from './_advanced_table_pinned_rows_both.jsx'
|
|
@@ -0,0 +1,67 @@
|
|
|
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 %>
|
|
@@ -0,0 +1,95 @@
|
|
|
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
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Customize the Dropdown Container to organize options into distinct, labeled sections.
|
|
@@ -36,6 +36,7 @@ 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
|
|
39
40
|
- dropdown_custom_event_type: Custom Event Type
|
|
40
41
|
|
|
41
42
|
react:
|
|
@@ -77,3 +78,4 @@ examples:
|
|
|
77
78
|
- dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
|
|
78
79
|
- dropdown_required_indicator: Required Indicator
|
|
79
80
|
- dropdown_disabled: Disabled Input
|
|
81
|
+
- dropdown_grouped_options: Grouped Options
|
|
@@ -36,3 +36,4 @@ 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";
|
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.12.0.pre.rc.
|
|
4
|
+
version: 16.12.0.pre.rc.2
|
|
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-22 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -100,6 +100,10 @@ files:
|
|
|
100
100
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md
|
|
101
101
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
|
|
102
102
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.md
|
|
103
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell.jsx
|
|
104
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell.md
|
|
105
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell_rails.html.erb
|
|
106
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_full_width_cell_rails.md
|
|
103
107
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_grouped_headers_composition.jsx
|
|
104
108
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_grouped_headers_composition.md
|
|
105
109
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx
|
|
@@ -161,6 +165,10 @@ files:
|
|
|
161
165
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_react.md
|
|
162
166
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.html.erb
|
|
163
167
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md
|
|
168
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers.html.erb
|
|
169
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers.jsx
|
|
170
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers_rails.md
|
|
171
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_skipping_subrow_headers_react.md
|
|
164
172
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx
|
|
165
173
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md
|
|
166
174
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx
|
|
@@ -968,6 +976,9 @@ files:
|
|
|
968
976
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.md
|
|
969
977
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.html.erb
|
|
970
978
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx
|
|
979
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_grouped_options.html.erb
|
|
980
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_grouped_options.jsx
|
|
981
|
+
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_grouped_options.md
|
|
971
982
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.jsx
|
|
972
983
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select.md
|
|
973
984
|
- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_multi_select_display.jsx
|