playbook_ui_docs 16.3.0.pre.alpha.PLAY2810toastaddmargin14803 → 16.3.0.pre.alpha.PLAY2814advancedtablesortparentonlyreact14813
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_sort_parent_only.jsx +175 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_parent_only.md +5 -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_fixed_confirmation_toast/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/index.js +1 -2
- metadata +4 -6
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin.html.erb +0 -46
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin.jsx +0 -42
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin_rails.md +0 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin_react.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: 2608ca4453a0721d8b944f174c88fcca82f0e3dad74d230453ca873025d7f35e
|
|
4
|
+
data.tar.gz: 44d1078390aa0f3067f5eada33add6fa7091854e0cabc7c516fc12bb75dc65d4
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: '03890ba9a97934a9d8e6577dc8905d7e6c99a20ae311c33bc0946bf96166499f2eafd184d5a0c1841f52591531cf20f30c74988ca85da693876f0d65bfb797f9'
|
|
7
|
+
data.tar.gz: 6b9b632a48195313cfc1d99d422b645c92882ca0597085c7e450f264829c14e573b32a975b20d45391a12a7376ac65a5a45787f4e3c199042dcab8c9002756f5
|
|
@@ -0,0 +1,175 @@
|
|
|
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
|
+
import Caption from "../../pb_caption/_caption"
|
|
6
|
+
|
|
7
|
+
const sharedColumnDefinitions = [
|
|
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 sortByColumnDefinitions = [
|
|
40
|
+
{
|
|
41
|
+
accessor: "year",
|
|
42
|
+
label: "Year",
|
|
43
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
accessor: "newEnrollments",
|
|
47
|
+
label: "New Enrollments",
|
|
48
|
+
enableSort: true,
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
accessor: "scheduledMeetings",
|
|
52
|
+
label: "Scheduled Meetings",
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
accessor: "attendanceRate",
|
|
56
|
+
label: "Attendance Rate",
|
|
57
|
+
enableSort: true,
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
accessor: "completedClasses",
|
|
61
|
+
label: "Completed Classes",
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
accessor: "classCompletionRate",
|
|
65
|
+
label: "Class Completion Rate",
|
|
66
|
+
},
|
|
67
|
+
{
|
|
68
|
+
accessor: "graduatedStudents",
|
|
69
|
+
label: "Graduated Students",
|
|
70
|
+
},
|
|
71
|
+
]
|
|
72
|
+
|
|
73
|
+
const sortByColumnMultiDefinitions = [
|
|
74
|
+
{
|
|
75
|
+
accessor: "year",
|
|
76
|
+
label: "Year",
|
|
77
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
label: "Enrollment Data",
|
|
81
|
+
columns: [
|
|
82
|
+
{
|
|
83
|
+
label: "Enrollment Stats",
|
|
84
|
+
columns: [
|
|
85
|
+
{
|
|
86
|
+
accessor: "newEnrollments",
|
|
87
|
+
label: "New Enrollments",
|
|
88
|
+
enableSort: true,
|
|
89
|
+
},
|
|
90
|
+
{
|
|
91
|
+
accessor: "scheduledMeetings",
|
|
92
|
+
label: "Scheduled Meetings",
|
|
93
|
+
},
|
|
94
|
+
],
|
|
95
|
+
},
|
|
96
|
+
],
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
label: "Performance Data",
|
|
100
|
+
columns: [
|
|
101
|
+
{
|
|
102
|
+
label: "Completion Metrics",
|
|
103
|
+
columns: [
|
|
104
|
+
{
|
|
105
|
+
accessor: "completedClasses",
|
|
106
|
+
label: "Completed Classes",
|
|
107
|
+
enableSort: true,
|
|
108
|
+
},
|
|
109
|
+
{
|
|
110
|
+
accessor: "classCompletionRate",
|
|
111
|
+
label: "Class Completion Rate",
|
|
112
|
+
},
|
|
113
|
+
],
|
|
114
|
+
},
|
|
115
|
+
{
|
|
116
|
+
label: "Attendance",
|
|
117
|
+
columns: [
|
|
118
|
+
{
|
|
119
|
+
accessor: "attendanceRate",
|
|
120
|
+
label: "Attendance Rate",
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
accessor: "scheduledMeetings",
|
|
124
|
+
label: "Scheduled Meetings",
|
|
125
|
+
},
|
|
126
|
+
],
|
|
127
|
+
},
|
|
128
|
+
],
|
|
129
|
+
},
|
|
130
|
+
]
|
|
131
|
+
|
|
132
|
+
const AdvancedTableSortParentOnly = (props) => {
|
|
133
|
+
return (
|
|
134
|
+
<div>
|
|
135
|
+
<Caption text="Enable Sorting (first column) + sortParentOnly" />
|
|
136
|
+
<AdvancedTable
|
|
137
|
+
columnDefinitions={sharedColumnDefinitions}
|
|
138
|
+
sortParentOnly
|
|
139
|
+
tableData={MOCK_DATA}
|
|
140
|
+
{...props}
|
|
141
|
+
>
|
|
142
|
+
<AdvancedTable.Header enableSorting />
|
|
143
|
+
<AdvancedTable.Body />
|
|
144
|
+
</AdvancedTable>
|
|
145
|
+
<Caption marginTop="md"
|
|
146
|
+
text="Sort by column + sortParentOnly"
|
|
147
|
+
/>
|
|
148
|
+
<AdvancedTable
|
|
149
|
+
columnDefinitions={sortByColumnDefinitions}
|
|
150
|
+
enableSortingRemoval
|
|
151
|
+
sortParentOnly
|
|
152
|
+
tableData={MOCK_DATA}
|
|
153
|
+
{...props}
|
|
154
|
+
>
|
|
155
|
+
<AdvancedTable.Header />
|
|
156
|
+
<AdvancedTable.Body />
|
|
157
|
+
</AdvancedTable>
|
|
158
|
+
<Caption marginTop="md"
|
|
159
|
+
text="Sort by column (multi-column) + sortParentOnly"
|
|
160
|
+
/>
|
|
161
|
+
<AdvancedTable
|
|
162
|
+
columnDefinitions={sortByColumnMultiDefinitions}
|
|
163
|
+
enableSortingRemoval
|
|
164
|
+
sortParentOnly
|
|
165
|
+
tableData={MOCK_DATA}
|
|
166
|
+
{...props}
|
|
167
|
+
>
|
|
168
|
+
<AdvancedTable.Header enableSorting />
|
|
169
|
+
<AdvancedTable.Body />
|
|
170
|
+
</AdvancedTable>
|
|
171
|
+
</div>
|
|
172
|
+
)
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
export default AdvancedTableSortParentOnly
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
The `sortParentOnly` prop is a boolean set to `false` by default. When set to `true`, only parent (depth-0) rows are re-ordered when sorting; children and grandchildren stay grouped under their parent and keep their original order.
|
|
2
|
+
|
|
3
|
+
`sortParentOnly` works with every sorting mode: `enableSorting` on the header, per-column `enableSort: true`, and sortable leaf columns in the multi-header variant. Sort indicators behave as usual.
|
|
4
|
+
|
|
5
|
+
When omitted or `false`, sorting applies to all levels.
|
|
@@ -39,6 +39,7 @@ examples:
|
|
|
39
39
|
- advanced_table_sort_per_column: Enable Sort By Column
|
|
40
40
|
- advanced_table_sort_per_column_for_multi_column: Enable Sort By Column (Multi-Column)
|
|
41
41
|
- advanced_table_custom_sort: Custom Sort
|
|
42
|
+
- advanced_table_sort_parent_only: Sort Parent Only
|
|
42
43
|
- advanced_table_expanded_control: Expanded Control
|
|
43
44
|
- advanced_table_expand_by_depth: Expand by Depth
|
|
44
45
|
- advanced_table_subrow_headers: SubRow Headers
|
|
@@ -49,4 +49,5 @@ export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_
|
|
|
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
51
|
export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
|
|
52
|
-
export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
|
|
52
|
+
export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
|
|
53
|
+
export { default as AdvancedTableSortParentOnly } from './_advanced_table_sort_parent_only.jsx'
|
|
@@ -2,7 +2,6 @@ examples:
|
|
|
2
2
|
|
|
3
3
|
rails:
|
|
4
4
|
- fixed_confirmation_toast_default: Default
|
|
5
|
-
- fixed_confirmation_toast_nav_margin: Nav Margin Top
|
|
6
5
|
- fixed_confirmation_toast_multi_line: Multi Line
|
|
7
6
|
- fixed_confirmation_toast_close: Click to Close
|
|
8
7
|
- fixed_confirmation_toast_positions: Click to Show Positions
|
|
@@ -13,7 +12,6 @@ examples:
|
|
|
13
12
|
|
|
14
13
|
react:
|
|
15
14
|
- fixed_confirmation_toast_default: Default
|
|
16
|
-
- fixed_confirmation_toast_nav_margin: Nav Margin Top
|
|
17
15
|
- fixed_confirmation_toast_multi_line: Multi Line
|
|
18
16
|
- fixed_confirmation_toast_close: Click to Close
|
|
19
17
|
- fixed_confirmation_toast_positions: Click to Show Positions
|
|
@@ -5,5 +5,4 @@ export { default as FixedConfirmationToastPositions } from './_fixed_confirmatio
|
|
|
5
5
|
export { default as FixedConfirmationToastAutoClose } from './_fixed_confirmation_toast_auto_close.jsx'
|
|
6
6
|
export { default as FixedConfirmationToastChildren } from './_fixed_confirmation_toast_children.jsx'
|
|
7
7
|
export { default as FixedConfirmationToastCustomIcon } from './_fixed_confirmation_toast_custom_icon.jsx'
|
|
8
|
-
export { default as FixedConfirmationToastNoIcon } from './_fixed_confirmation_toast_no_icon.jsx'
|
|
9
|
-
export { default as FixedConfirmationToastNavMargin } from './_fixed_confirmation_toast_nav_margin.jsx'
|
|
8
|
+
export { default as FixedConfirmationToastNoIcon } from './_fixed_confirmation_toast_no_icon.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.3.0.pre.alpha.
|
|
4
|
+
version: 16.3.0.pre.alpha.PLAY2814advancedtablesortparentonlyreact14813
|
|
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-03-
|
|
12
|
+
date: 2026-03-06 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: playbook_ui
|
|
@@ -155,6 +155,8 @@ files:
|
|
|
155
155
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md
|
|
156
156
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx
|
|
157
157
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md
|
|
158
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_parent_only.jsx
|
|
159
|
+
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_parent_only.md
|
|
158
160
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column.jsx
|
|
159
161
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column.md
|
|
160
162
|
- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_per_column_for_multi_column.jsx
|
|
@@ -1053,10 +1055,6 @@ files:
|
|
|
1053
1055
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.jsx
|
|
1054
1056
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.md
|
|
1055
1057
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line_swift.md
|
|
1056
|
-
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin.html.erb
|
|
1057
|
-
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin.jsx
|
|
1058
|
-
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin_rails.md
|
|
1059
|
-
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin_react.md
|
|
1060
1058
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.html.erb
|
|
1061
1059
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.jsx
|
|
1062
1060
|
- app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_no_icon.md
|
|
@@ -1,46 +0,0 @@
|
|
|
1
|
-
<%= pb_rails("button", props: { text: "Top Nav Toast", variant: "secondary", data: { toast: "#top-nav" } }) %>
|
|
2
|
-
|
|
3
|
-
<%= pb_rails("fixed_confirmation_toast", props: {
|
|
4
|
-
classname: "top-nav-margin",
|
|
5
|
-
closeable: true,
|
|
6
|
-
id: "top-nav",
|
|
7
|
-
multi_line: true,
|
|
8
|
-
text: "Top nav Margin.",
|
|
9
|
-
status: "tip",
|
|
10
|
-
vertical: "top",
|
|
11
|
-
horizontal: "center",
|
|
12
|
-
nav_margin_top: true
|
|
13
|
-
}) %>
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
<script type="text/javascript">
|
|
18
|
-
const navtoast = document.querySelectorAll(".top-nav-margin")
|
|
19
|
-
const navbutton = document.querySelectorAll("button[data-toast]")
|
|
20
|
-
|
|
21
|
-
const hideNavToast = () => {
|
|
22
|
-
navtoast.forEach((toast) => {
|
|
23
|
-
toast.style.display = "none"
|
|
24
|
-
})
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
// Hide toasts immediately
|
|
28
|
-
hideNavToast()
|
|
29
|
-
|
|
30
|
-
// Handle various page load/restore events
|
|
31
|
-
window.addEventListener('pageshow', hideNavToast)
|
|
32
|
-
document.addEventListener('DOMContentLoaded', hideNavToast)
|
|
33
|
-
document.addEventListener('turbolinks:load', hideNavToast)
|
|
34
|
-
document.addEventListener('turbo:load', hideNavToast)
|
|
35
|
-
|
|
36
|
-
navbutton.forEach((button) => {
|
|
37
|
-
button.onclick = () => {
|
|
38
|
-
hideNavToast()
|
|
39
|
-
let toast = document.querySelector(button.getAttribute("data-toast"))
|
|
40
|
-
|
|
41
|
-
if (toast) {
|
|
42
|
-
toast.style.display = "flex"
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
})
|
|
46
|
-
</script>
|
data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_nav_margin.jsx
DELETED
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import React, { useState } from 'react'
|
|
2
|
-
|
|
3
|
-
import Button from '../../pb_button/_button'
|
|
4
|
-
import FixedConfirmationToast from '../_fixed_confirmation_toast'
|
|
5
|
-
|
|
6
|
-
const FixedConfirmationToastNavMargin = (props) => {
|
|
7
|
-
const [openToast, setOpenToast] = useState(false)
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
const handleClickShort = () => {
|
|
11
|
-
setOpenToast(true)
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
const handleCloseShort = () => {
|
|
15
|
-
setOpenToast(false)
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
return (
|
|
19
|
-
<div>
|
|
20
|
-
<Button
|
|
21
|
-
onClick={handleClickShort}
|
|
22
|
-
text="Top Nav Margin"
|
|
23
|
-
variant="secondary"
|
|
24
|
-
{...props}
|
|
25
|
-
/>
|
|
26
|
-
|
|
27
|
-
<FixedConfirmationToast
|
|
28
|
-
closeable
|
|
29
|
-
horizontal='center'
|
|
30
|
-
navMarginTop
|
|
31
|
-
onClose={handleCloseShort}
|
|
32
|
-
open={openToast}
|
|
33
|
-
status="tip"
|
|
34
|
-
text="Top nav Margin."
|
|
35
|
-
vertical='top'
|
|
36
|
-
{...props}
|
|
37
|
-
/>
|
|
38
|
-
</div>
|
|
39
|
-
)
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
export default FixedConfirmationToastNavMargin
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Use the `nav_margin_top` prop to position the toast lower on the page. This is useful for cases where we want to position the toast below a header or nav.
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
Use the `navMarginTop` prop to position the toast lower on the page. This is useful for cases where we want to position the toast below a header or nav.
|