playbook_ui_docs 16.3.0 → 16.4.0.pre.rc.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_cascade_collapse.jsx +50 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_cascade_collapse.md +1 -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 +2 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props.jsx +152 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props.md +17 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props_rails.html.erb +121 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props_rails.md +17 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_table/docs/index.js +1 -0
- metadata +8 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: c69067952622a729cd224b0c69b24345590aad62c803f4015d616087ffc0b008
|
|
4
|
+
data.tar.gz: aa4a7f9d3dcdbbb23166f94672fd694e64c7abd2ec4087bdb8012f9a4e0f0a42
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: d531b8aa52ec3b1fde7f2418cb0319822b3ac0fecf2e78f00b1c44d5176fb291dbbe9c567a120b1f02761d95881b14be94e4855b4a46554b3fa6ce996ad508b3
|
|
7
|
+
data.tar.gz: 446b83fd441e3b2f932f24df65c4f62ba911289f6c48457a3bca24f25f0c2c1b2b8a478fd4251badc9a48f1bfff97d8d60cd3086f66cdb254e98daf29ca71303
|
|
@@ -0,0 +1,50 @@
|
|
|
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
|
+
const AdvancedTableCascadeCollapse = (props) => {
|
|
6
|
+
const columnDefinitions = [
|
|
7
|
+
{
|
|
8
|
+
accessor: "year",
|
|
9
|
+
label: "Year",
|
|
10
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
accessor: "newEnrollments",
|
|
14
|
+
label: "New Enrollments",
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
accessor: "scheduledMeetings",
|
|
18
|
+
label: "Scheduled Meetings",
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
accessor: "attendanceRate",
|
|
22
|
+
label: "Attendance Rate",
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
accessor: "completedClasses",
|
|
26
|
+
label: "Completed Classes",
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
accessor: "classCompletionRate",
|
|
30
|
+
label: "Class Completion Rate",
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
accessor: "graduatedStudents",
|
|
34
|
+
label: "Graduated Students",
|
|
35
|
+
},
|
|
36
|
+
]
|
|
37
|
+
|
|
38
|
+
return (
|
|
39
|
+
<div>
|
|
40
|
+
<AdvancedTable
|
|
41
|
+
cascadeCollapse
|
|
42
|
+
columnDefinitions={columnDefinitions}
|
|
43
|
+
tableData={MOCK_DATA}
|
|
44
|
+
{...props}
|
|
45
|
+
/>
|
|
46
|
+
</div>
|
|
47
|
+
)
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
export default AdvancedTableCascadeCollapse
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
`cascadeCollapse` is an optional prop that is set to 'false' by default. If set to 'true', collapsing any parent row itself or by using the toggle exapansion buttons in any header or subheader row also collapses all descendants and clears their expansion state. Re-expanding then shows only direct children until the user expands deeper levels again.
|
|
@@ -42,6 +42,7 @@ examples:
|
|
|
42
42
|
- advanced_table_expanded_control: Expanded Control
|
|
43
43
|
- advanced_table_expand_by_depth: Expand by Depth
|
|
44
44
|
- advanced_table_subrow_headers: SubRow Headers
|
|
45
|
+
- advanced_table_cascade_collapse: Cascade Collapse
|
|
45
46
|
- advanced_table_collapsible_trail: Collapsible Trail
|
|
46
47
|
- advanced_table_table_options: Table Options
|
|
47
48
|
- advanced_table_table_props: Table Props
|
|
@@ -48,4 +48,5 @@ export { default as AdvancedTablePaddingControl } from './_advanced_table_paddin
|
|
|
48
48
|
export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
|
|
49
49
|
export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
|
|
50
50
|
export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
|
|
51
|
-
export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
|
|
51
|
+
export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
|
|
52
|
+
export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
|
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
import React, { useState } from "react"
|
|
2
|
+
import { Button, Date as DateKit, DatePicker, Dropdown, Select, Table, TextInput, Typeahead, Flex } from "playbook-ui"
|
|
3
|
+
|
|
4
|
+
// Mock Data for Table
|
|
5
|
+
const users = [
|
|
6
|
+
{ id: 1, name: "Jennifer", title: "Associate Scrum Master", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-01" },
|
|
7
|
+
{ id: 2, name: "Nick", title: "UX Engineer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-02" },
|
|
8
|
+
{ id: 3, name: "Nida", title: "Senior UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-03" },
|
|
9
|
+
{ id: 4, name: "Justin", title: "Director of User Experience Engineering", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-04" },
|
|
10
|
+
{ id: 5, name: "Edward", title: "UX Designer II", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-05" },
|
|
11
|
+
{ id: 6, name: "Elisa", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-06" },
|
|
12
|
+
{ id: 7, name: "Gary", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-07" },
|
|
13
|
+
{ id: 8, name: "Barkley", title: "Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-08" },
|
|
14
|
+
{ id: 9, name: "Aaron", title: "Associate Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", startDate: "2025-01-09" },
|
|
15
|
+
]
|
|
16
|
+
|
|
17
|
+
const TableWithFilterWithCardTitleProps = () => {
|
|
18
|
+
const [territory, setTerritory] = useState("")
|
|
19
|
+
|
|
20
|
+
// --------Filter content example ------
|
|
21
|
+
const filterContent = ({ closePopover }) => (
|
|
22
|
+
<>
|
|
23
|
+
<TextInput
|
|
24
|
+
label="Territory ID"
|
|
25
|
+
onChange={event => setTerritory(event.target.value)}
|
|
26
|
+
value={territory}
|
|
27
|
+
/>
|
|
28
|
+
|
|
29
|
+
<Typeahead
|
|
30
|
+
label="Title"
|
|
31
|
+
options={[
|
|
32
|
+
{ key: "senior-ux-engineer", label: "Senior UX Engineer", value: "senior-ux-engineer" },
|
|
33
|
+
{ key: "ux-engineer", label: "UX Engineer", value: "ux-engineer" },
|
|
34
|
+
{ key: "ux-designer", label: "UX Designer", value: "ux-designer" }
|
|
35
|
+
]}
|
|
36
|
+
/>
|
|
37
|
+
|
|
38
|
+
<Select
|
|
39
|
+
blankSelection="All Departments"
|
|
40
|
+
label="Department"
|
|
41
|
+
options={[
|
|
42
|
+
{ value: "Business Technology", label: "Business Technology", key: "business-technology" },
|
|
43
|
+
{ value: "Customer Development", label: "Customer Development", key: "customer-development" },
|
|
44
|
+
{ value: "Talent Acquisition", label: "Talent Acquisition", key: "talent-acquisition" }
|
|
45
|
+
]}
|
|
46
|
+
/>
|
|
47
|
+
|
|
48
|
+
<Dropdown
|
|
49
|
+
label="Branch"
|
|
50
|
+
options={[
|
|
51
|
+
{ key: "Philadelphia", label: "Philadelphia", value: "philadelphia" },
|
|
52
|
+
{ key: "New York", label: "New York", value: "new-york" },
|
|
53
|
+
{ key: "Austin", label: "Austin", value: "austin" }
|
|
54
|
+
]}
|
|
55
|
+
/>
|
|
56
|
+
|
|
57
|
+
<DatePicker
|
|
58
|
+
label="Start Date"
|
|
59
|
+
paddingY="sm"
|
|
60
|
+
pickerId="startedOn"
|
|
61
|
+
/>
|
|
62
|
+
<Flex spacing="between">
|
|
63
|
+
<Button
|
|
64
|
+
onClick={() => {
|
|
65
|
+
alert("No filtering functionality - just a pattern demo!")
|
|
66
|
+
closePopover()
|
|
67
|
+
}}
|
|
68
|
+
text="Filter"
|
|
69
|
+
/>
|
|
70
|
+
<Button
|
|
71
|
+
text="Defaults"
|
|
72
|
+
variant="secondary"
|
|
73
|
+
/>
|
|
74
|
+
</Flex>
|
|
75
|
+
</>
|
|
76
|
+
)
|
|
77
|
+
// -------End Filter content example ------
|
|
78
|
+
|
|
79
|
+
return (
|
|
80
|
+
<Table
|
|
81
|
+
cardProps={{marginX: {
|
|
82
|
+
xs: "sm",
|
|
83
|
+
sm: "sm",
|
|
84
|
+
md: "xl",
|
|
85
|
+
lg: "xl",
|
|
86
|
+
xl: "xl",
|
|
87
|
+
default: "xl",
|
|
88
|
+
}}}
|
|
89
|
+
filterContent={filterContent}
|
|
90
|
+
filterProps={{
|
|
91
|
+
results: 50,
|
|
92
|
+
sortOptions: {
|
|
93
|
+
territory_id: "Territory ID",
|
|
94
|
+
first_name: "Name",
|
|
95
|
+
started_on: "Start Date",
|
|
96
|
+
department_name: "Department",
|
|
97
|
+
title_name: "Title",
|
|
98
|
+
branch_branch_name: "Branch",
|
|
99
|
+
},
|
|
100
|
+
sortValue: [{ name: 'started_on', dir: 'asc' }],
|
|
101
|
+
}}
|
|
102
|
+
title="Table Title Here"
|
|
103
|
+
titleProps={{
|
|
104
|
+
paddingLeft:{
|
|
105
|
+
xs: "sm",
|
|
106
|
+
sm: "sm",
|
|
107
|
+
md: "xl",
|
|
108
|
+
lg: "xl",
|
|
109
|
+
xl: "xl",
|
|
110
|
+
default: "xl",
|
|
111
|
+
}
|
|
112
|
+
}}
|
|
113
|
+
variant="withFilter"
|
|
114
|
+
>
|
|
115
|
+
<Table.Head>
|
|
116
|
+
<Table.Row>
|
|
117
|
+
<Table.Header>{'Territory ID'}</Table.Header>
|
|
118
|
+
<Table.Header>{'Name'}</Table.Header>
|
|
119
|
+
<Table.Header>{'Title'}</Table.Header>
|
|
120
|
+
<Table.Header>{'Department'}</Table.Header>
|
|
121
|
+
<Table.Header>{'Branch'}</Table.Header>
|
|
122
|
+
<Table.Header textAlign="right">{'Start Date'}</Table.Header>
|
|
123
|
+
</Table.Row>
|
|
124
|
+
</Table.Head>
|
|
125
|
+
<Table.Body>
|
|
126
|
+
{users.map((user) => (
|
|
127
|
+
<Table.Row key={user.id}>
|
|
128
|
+
<Table.Cell
|
|
129
|
+
marginX={{ xs: "sm" }}
|
|
130
|
+
numberSpacing="tabular"
|
|
131
|
+
>
|
|
132
|
+
{user.id}
|
|
133
|
+
</Table.Cell>
|
|
134
|
+
<Table.Cell marginX={{ xs: "sm" }}>{user.name}</Table.Cell>
|
|
135
|
+
<Table.Cell marginX={{ xs: "sm" }}>{user.title}</Table.Cell>
|
|
136
|
+
<Table.Cell marginX={{ xs: "sm" }}>{user.department}</Table.Cell>
|
|
137
|
+
<Table.Cell marginX={{ xs: "sm" }}>{user.branch}</Table.Cell>
|
|
138
|
+
<Table.Cell marginX={{ xs: "sm" }}>
|
|
139
|
+
<DateKit
|
|
140
|
+
alignment="right"
|
|
141
|
+
showCurrentYear
|
|
142
|
+
value={user.startDate}
|
|
143
|
+
/>
|
|
144
|
+
</Table.Cell>
|
|
145
|
+
</Table.Row>
|
|
146
|
+
))}
|
|
147
|
+
</Table.Body>
|
|
148
|
+
</Table>
|
|
149
|
+
)
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
export default TableWithFilterWithCardTitleProps
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
The `withFilter` variant also offers 2 additional optional props:
|
|
2
|
+
|
|
3
|
+
`cardProps`: An object containing Card-specific props.
|
|
4
|
+
`titleProps`: An object containing Title-specific props.
|
|
5
|
+
|
|
6
|
+
#### Default Card Props
|
|
7
|
+
|
|
8
|
+
The Table kit automatically sets these Card defaults (which you can override via `cardProps`):
|
|
9
|
+
|
|
10
|
+
- `padding="none"`
|
|
11
|
+
|
|
12
|
+
#### Default Title Props
|
|
13
|
+
|
|
14
|
+
The Table kit automatically sets these Title defaults (which you can override via `titleProps`):
|
|
15
|
+
|
|
16
|
+
- `size={3}`
|
|
17
|
+
- `paddingY="md"`
|
data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props_rails.html.erb
ADDED
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
<% users = [
|
|
2
|
+
{ id: 1, name: "Jennifer", title: "Associate Scrum Master", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 1) },
|
|
3
|
+
{ id: 2, name: "Nick", title: "UX Engineer II", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 2) },
|
|
4
|
+
{ id: 3, name: "Nida", title: "Senior UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 3) },
|
|
5
|
+
{ id: 4, name: "Justin", title: "Director of User Experience Engineering", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 4) },
|
|
6
|
+
{ id: 5, name: "Edward", title: "UX Designer II", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 5) },
|
|
7
|
+
{ id: 6, name: "Elisa", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 6) },
|
|
8
|
+
{ id: 7, name: "Gary", title: "UX Engineer", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 7) },
|
|
9
|
+
{ id: 8, name: "Barkley", title: "Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 8) },
|
|
10
|
+
{ id: 9, name: "Aaron", title: "Associate Nitro Quality Ninja", department: "Business Technology", branch: "Philadelphia", start_date: Date.new(2025, 1, 9) },
|
|
11
|
+
] %>
|
|
12
|
+
|
|
13
|
+
<% filter_content =
|
|
14
|
+
pb_rails("text_input", props: {
|
|
15
|
+
label: "Territory ID",
|
|
16
|
+
placeholder: "Enter Territory ID"
|
|
17
|
+
}) +
|
|
18
|
+
pb_rails("typeahead", props: {
|
|
19
|
+
label: "Title",
|
|
20
|
+
options: [
|
|
21
|
+
{ label: "Senior UX Engineer", value: "senior-ux-engineer" },
|
|
22
|
+
{ label: "UX Engineer", value: "ux-engineer" },
|
|
23
|
+
{ label: "UX Designer", value: "ux-designer" }
|
|
24
|
+
]
|
|
25
|
+
}) +
|
|
26
|
+
pb_rails("select", props: {
|
|
27
|
+
blank_selection: "All Departments",
|
|
28
|
+
label: "Department",
|
|
29
|
+
options: [
|
|
30
|
+
{ value: "Business Technology", text: "Business Technology" },
|
|
31
|
+
{ value: "Customer Development", text: "Customer Development" },
|
|
32
|
+
{ value: "Talent Acquisition", text: "Talent Acquisition" }
|
|
33
|
+
]
|
|
34
|
+
}) +
|
|
35
|
+
pb_rails("dropdown", props: {
|
|
36
|
+
label: "Branch",
|
|
37
|
+
options: [
|
|
38
|
+
{ label: "Philadelphia", value: "philadelphia" },
|
|
39
|
+
{ label: "New York", value: "new-york" },
|
|
40
|
+
{ label: "Austin", value: "austin" }
|
|
41
|
+
]
|
|
42
|
+
}) +
|
|
43
|
+
pb_rails("date_picker", props: {
|
|
44
|
+
label: "Start Date",
|
|
45
|
+
padding_y: "sm",
|
|
46
|
+
picker_id: "startedOn"
|
|
47
|
+
}) +
|
|
48
|
+
pb_rails("flex", props: { spacing: "between" }) do
|
|
49
|
+
pb_rails("button", props: {
|
|
50
|
+
text: "Filter",
|
|
51
|
+
}) +
|
|
52
|
+
pb_rails("button", props: {
|
|
53
|
+
text: "Defaults",
|
|
54
|
+
variant: "secondary"
|
|
55
|
+
})
|
|
56
|
+
end
|
|
57
|
+
%>
|
|
58
|
+
|
|
59
|
+
<%= pb_rails("table", props: {
|
|
60
|
+
card_props: {
|
|
61
|
+
margin_x: {
|
|
62
|
+
xs: "sm",
|
|
63
|
+
sm: "sm",
|
|
64
|
+
md: "xl",
|
|
65
|
+
lg: "xl",
|
|
66
|
+
xl: "xl",
|
|
67
|
+
default: "xl",
|
|
68
|
+
}
|
|
69
|
+
},
|
|
70
|
+
variant: "with_filter",
|
|
71
|
+
title: "Table Title Here",
|
|
72
|
+
title_props: {
|
|
73
|
+
padding_left:{
|
|
74
|
+
xs: "sm",
|
|
75
|
+
sm: "sm",
|
|
76
|
+
md: "xl",
|
|
77
|
+
lg: "xl",
|
|
78
|
+
xl: "xl",
|
|
79
|
+
default: "xl",
|
|
80
|
+
}
|
|
81
|
+
},
|
|
82
|
+
filter_content: filter_content,
|
|
83
|
+
filter_props: {
|
|
84
|
+
id: "user-table-filters-1",
|
|
85
|
+
results: 9,
|
|
86
|
+
sort_menu: [
|
|
87
|
+
{ item: "Start Date", link: "?q[sorts]=started_on+asc", active: true, direction: "asc" },
|
|
88
|
+
{ item: "First Name", link: "?q[sorts]=name+asc", active: false },
|
|
89
|
+
{ item: "Title", link: "?q[sorts]=title+asc", active: false },
|
|
90
|
+
{ item: "Department", link: "?q[sorts]=department+asc", active: false },
|
|
91
|
+
{ item: "Branch", link: "?q[sorts]=branch+asc", active: false },
|
|
92
|
+
{ item: "Territory ID", link: "?q[sorts]=territory_id+asc", active: false },
|
|
93
|
+
],
|
|
94
|
+
}
|
|
95
|
+
}) do %>
|
|
96
|
+
<%= pb_rails("table/table_head") do %>
|
|
97
|
+
<%= pb_rails("table/table_row") do %>
|
|
98
|
+
<%= pb_rails("table/table_header", props: { text: "Territory ID" }) %>
|
|
99
|
+
<%= pb_rails("table/table_header", props: { text: "Name" }) %>
|
|
100
|
+
<%= pb_rails("table/table_header", props: { text: "Title" }) %>
|
|
101
|
+
<%= pb_rails("table/table_header", props: { text: "Department" }) %>
|
|
102
|
+
<%= pb_rails("table/table_header", props: { text: "Branch" }) %>
|
|
103
|
+
<%= pb_rails("table/table_header", props: { text: "Start Date", text_align: "right" }) %>
|
|
104
|
+
<% end %>
|
|
105
|
+
<% end %>
|
|
106
|
+
|
|
107
|
+
<%= pb_rails("table/table_body") do %>
|
|
108
|
+
<% users.each do |user| %>
|
|
109
|
+
<%= pb_rails("table/table_row") do %>
|
|
110
|
+
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" }, number_spacing: "tabular" }) { user[:id].to_s } %>
|
|
111
|
+
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:name] } %>
|
|
112
|
+
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:title] } %>
|
|
113
|
+
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:department] } %>
|
|
114
|
+
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) { user[:branch] } %>
|
|
115
|
+
<%= pb_rails("table/table_cell", props: { margin_x: { xs: "sm" } }) do %>
|
|
116
|
+
<%= pb_rails("date", props: {alignment: "right", date: user[:start_date].to_s, show_current_year: true } ) %>
|
|
117
|
+
<% end %>
|
|
118
|
+
<% end %>
|
|
119
|
+
<% end %>
|
|
120
|
+
<% end %>
|
|
121
|
+
<% end %>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
The `with_filter` variant also offers 2 additional optional props:
|
|
2
|
+
|
|
3
|
+
`card_props`: An object containing Card-specific props.
|
|
4
|
+
`title_props`: An object containing Title-specific props.
|
|
5
|
+
|
|
6
|
+
#### Default Card Props
|
|
7
|
+
|
|
8
|
+
The Table kit automatically sets these Card defaults (which you can override via `card_props`):
|
|
9
|
+
|
|
10
|
+
- `padding:"none"`
|
|
11
|
+
|
|
12
|
+
#### Default Title Props
|
|
13
|
+
|
|
14
|
+
The Table kit automatically sets these Title defaults (which you can override via `title_props`):
|
|
15
|
+
|
|
16
|
+
- `size:3`
|
|
17
|
+
- `paddingY:"md"`
|
|
@@ -42,6 +42,7 @@ examples:
|
|
|
42
42
|
- table_with_header_style_floating: Header Style Floating
|
|
43
43
|
- table_with_filter_variant_rails: Variant with Filter
|
|
44
44
|
- table_with_filter_variant_with_pagination_rails: Variant with Filter and Pagination
|
|
45
|
+
- table_with_filter_with_card_title_props_rails: Variant with Filter (with Card and Title Props)
|
|
45
46
|
|
|
46
47
|
react:
|
|
47
48
|
- table_sm: Small
|
|
@@ -85,3 +86,4 @@ examples:
|
|
|
85
86
|
- table_with_header_style_floating: Header Style Floating
|
|
86
87
|
- table_with_filter_variant: Variant with Filter
|
|
87
88
|
- table_with_filter_variant_with_pagination: Variant with Filter and Pagination
|
|
89
|
+
- table_with_filter_with_card_title_props: Variant with Filter (with Card and Title Props)
|
|
@@ -40,3 +40,4 @@ export { default as TableWithHeaderStyleBorderless } from './_table_with_header_
|
|
|
40
40
|
export { default as TableWithHeaderStyleFloating } from './_table_with_header_style_floating.jsx'
|
|
41
41
|
export { default as TableWithFilterVariant } from './_table_with_filter_variant.jsx'
|
|
42
42
|
export { default as TableWithFilterVariantWithPagination } from './_table_with_filter_variant_with_pagination.jsx'
|
|
43
|
+
export { default as TableWithFilterWithCardTitleProps } from './_table_with_filter_with_card_title_props.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.
|
|
4
|
+
version: 16.4.0.pre.rc.0
|
|
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-02
|
|
12
|
+
date: 2026-03-02 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -43,6 +43,8 @@ files:
|
|
|
43
43
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.md
|
|
44
44
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.html.erb
|
|
45
45
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_subrow_headers.md
|
|
46
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_cascade_collapse.jsx
|
|
47
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_cascade_collapse.md
|
|
46
48
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx
|
|
47
49
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.md
|
|
48
50
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail_rails.html.erb
|
|
@@ -2309,6 +2311,10 @@ files:
|
|
|
2309
2311
|
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination.md
|
|
2310
2312
|
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.html.erb
|
|
2311
2313
|
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_with_pagination_rails.md
|
|
2314
|
+
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props.jsx
|
|
2315
|
+
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props.md
|
|
2316
|
+
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props_rails.html.erb
|
|
2317
|
+
- app/pb_kits/playbook/pb_table/docs/_table_with_filter_with_card_title_props_rails.md
|
|
2312
2318
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb
|
|
2313
2319
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.jsx
|
|
2314
2320
|
- app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md
|