playbook_ui_docs 16.8.0.pre.alpha.PLAY296916758 → 16.8.0.pre.alpha.PLAY298516633

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.
Files changed (21) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +4 -12
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +0 -4
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +2 -16
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +0 -4
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb +2 -16
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx +5 -12
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +0 -4
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +3 -5
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -2
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -1
  12. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.jsx +2 -2
  13. data/app/pb_kits/playbook/pb_table/docs/_table_sticky.html.erb +83 -85
  14. data/app/pb_kits/playbook/pb_table/docs/_table_sticky.jsx +86 -88
  15. data/app/pb_kits/playbook/pb_table/docs/_table_sticky.md +1 -3
  16. data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_external_filter_rails.md +1 -1
  17. metadata +2 -6
  18. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.html.erb +0 -62
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.md +0 -7
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_scroll_limitation.jsx +0 -68
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_scroll_limitation.md +0 -7
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 2743c713db8e6d3af75222f5619faf1b347765cf4542389fbe6a49613077b9a2
4
- data.tar.gz: f8d687bf91edbc49088911fda1c85eee1b1a35a9271b7a5a739693e197f43b53
3
+ metadata.gz: 61e47263eb6dc07c6ac88435210875da3c125ea9bc6c5124d755edb6ffdfb38e
4
+ data.tar.gz: 3ac9eb3f3770a590998067e2def766aac7029ba8b171817b18976f66ba75464a
5
5
  SHA512:
6
- metadata.gz: 2fdbe3198ddc31c6f69bfaf7e6f3b7e5b6338c4fe8135dbb0082f35b8c62ab0082a19defec7081648efbfbf2173386090f7f398c7fbe9b40b11e0e39a20d83cc
7
- data.tar.gz: 25f0d57ae65a91b9cfa8aebc814ef25c6d9ca98ae15d09a764efb7147c276df6c98f91306bd4a3b1c65bf6534b7c166fc4f3cbc5dd9038e085dc6a0f4978128a
6
+ metadata.gz: 52377ddb11908ab01ee65de83a2b6cd8d72049f35ed14497684f252caa3657552677b3624ec5b7afae8b9732e5972d2650f60e54e6331d2d49624eea06115e8e
7
+ data.tar.gz: 532305ddba8b90942b147c65755588b3b11ef275232fa2b8a1973204926428907d66f3ac910caff51cfb0d474c636da8f853051fbab65e115348c9117a2263cf
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx CHANGED
@@ -1,21 +1,13 @@
1
1
  import React from "react"
2
2
  import AdvancedTable from '../../pb_advanced_table/_advanced_table'
3
-
4
- const tableData = Array.from({ length: 15 }, (_, index) => ({
5
- year: String(2020 + index),
6
- newEnrollments: String(20 + index),
7
- scheduledMeetings: String(10 + index),
8
- attendanceRate: `${50 + index}%`,
9
- completedClasses: String(3 + index),
10
- classCompletionRate: `${30 + index}%`,
11
- graduatedStudents: String(19 + index),
12
- }))
3
+ import MOCK_DATA from "./advanced_table_mock_data.json"
13
4
 
14
5
  const AdvancedTableStickyHeader = (props) => {
15
6
  const columnDefinitions = [
16
7
  {
17
8
  accessor: "year",
18
9
  label: "Year",
10
+ cellAccessors: ["quarter", "month", "day"],
19
11
  },
20
12
  {
21
13
  accessor: "newEnrollments",
@@ -48,11 +40,11 @@ const AdvancedTableStickyHeader = (props) => {
48
40
  }
49
41
 
50
42
  return (
51
- <div style={{ maxHeight: "320px", overflowY: "auto" }}>
43
+ <div>
52
44
  <AdvancedTable
53
45
  columnDefinitions={columnDefinitions}
54
46
  responsive="none"
55
- tableData={tableData}
47
+ tableData={MOCK_DATA}
56
48
  tableProps={tableProps}
57
49
  {...props}
58
50
  />
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md CHANGED
@@ -1,7 +1,3 @@
1
1
  The `TableProps` prop can also be used to render a sticky header for the Advanced Table.
2
2
 
3
- This doc example uses a scroll container with flat rows so sticky behavior is visible in the docs without expanding subrows. Scroll inside the preview to see the header stick.
4
-
5
- This example builds flat table data inline for the docs preview. For typical `tableData` setup, see [Default (Required Props)](/kits/advanced_table/default/react#advanced_table_default).
6
-
7
3
  This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "Sticky Header for Responsive Table" doc example below.
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb CHANGED
@@ -2,6 +2,7 @@
2
2
  {
3
3
  accessor: "year",
4
4
  label: "Year",
5
+ cellAccessors: ["quarter", "month", "day"],
5
6
  },
6
7
  {
7
8
  accessor: "newEnrollments",
@@ -29,19 +30,4 @@
29
30
  }
30
31
  ] %>
31
32
 
32
- <% table_data = 15.times.map do |index|
33
- {
34
- year: (2020 + index).to_s,
35
- id: (2020 + index).to_s,
36
- newEnrollments: (20 + index).to_s,
37
- scheduledMeetings: (10 + index).to_s,
38
- attendanceRate: "#{50 + index}%",
39
- completedClasses: (3 + index).to_s,
40
- classCompletionRate: "#{30 + index}%",
41
- graduatedStudents: (19 + index).to_s,
42
- }
43
- end %>
44
-
45
- <div style="max-height: 320px; overflow-y: auto;">
46
- <%= pb_rails("advanced_table", props: { id: "sticky_header_table", table_data: table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>
47
- </div>
33
+ <%= pb_rails("advanced_table", props: { id: "sticky_header_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md CHANGED
@@ -1,7 +1,3 @@
1
1
  The `table_props` prop can also be used to render a sticky header for the Advanced Table.
2
2
 
3
- This doc example uses a scroll container with flat rows so sticky behavior is visible in the docs without expanding subrows. Scroll inside the preview to see the header stick.
4
-
5
- This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
6
-
7
3
  This doc example showcases how to set a sticky header for a nonresponsive table (see the `responsive` prop set to "none"). To achieve sticky header AND responsive functionality, see the "[Sticky Header for Responsive Table](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header-for-responsive-table)" doc example below.
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb CHANGED
@@ -2,6 +2,7 @@
2
2
  {
3
3
  accessor: "year",
4
4
  label: "Year",
5
+ cellAccessors: ["quarter", "month", "day"],
5
6
  },
6
7
  {
7
8
  accessor: "newEnrollments",
@@ -29,19 +30,4 @@
29
30
  }
30
31
  ] %>
31
32
 
32
- <% table_data = 15.times.map do |index|
33
- {
34
- year: (2020 + index).to_s,
35
- id: (2020 + index).to_s,
36
- newEnrollments: (20 + index).to_s,
37
- scheduledMeetings: (10 + index).to_s,
38
- attendanceRate: "#{50 + index}%",
39
- completedClasses: (3 + index).to_s,
40
- classCompletionRate: "#{30 + index}%",
41
- graduatedStudents: (19 + index).to_s,
42
- }
43
- end %>
44
-
45
- <div style="max-height: 320px; overflow-y: auto;">
46
- <%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: table_data, column_definitions: column_definitions, table_props: { sticky: true }}) %>
47
- </div>
33
+ <%= pb_rails("advanced_table", props: { id: "table_props_sticky_table", table_data: @table_data, column_definitions: column_definitions, max_height: "xs", table_props: { sticky: true }}) %>
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx CHANGED
@@ -1,21 +1,13 @@
1
1
  import React from "react"
2
2
  import AdvancedTable from '../../pb_advanced_table/_advanced_table'
3
-
4
- const tableData = Array.from({ length: 15 }, (_, index) => ({
5
- year: String(2020 + index),
6
- newEnrollments: String(20 + index),
7
- scheduledMeetings: String(10 + index),
8
- attendanceRate: `${50 + index}%`,
9
- completedClasses: String(3 + index),
10
- classCompletionRate: `${30 + index}%`,
11
- graduatedStudents: String(19 + index),
12
- }))
3
+ import MOCK_DATA from "./advanced_table_mock_data.json"
13
4
 
14
5
  const AdvancedTableTablePropsStickyHeader = (props) => {
15
6
  const columnDefinitions = [
16
7
  {
17
8
  accessor: "year",
18
9
  label: "Year",
10
+ cellAccessors: ["quarter", "month", "day"],
19
11
  },
20
12
  {
21
13
  accessor: "newEnrollments",
@@ -48,10 +40,11 @@ const AdvancedTableTablePropsStickyHeader = (props) => {
48
40
  }
49
41
 
50
42
  return (
51
- <div style={{ maxHeight: "320px", overflowY: "auto" }}>
43
+ <div>
52
44
  <AdvancedTable
53
45
  columnDefinitions={columnDefinitions}
54
- tableData={tableData}
46
+ maxHeight="xs"
47
+ tableData={MOCK_DATA}
55
48
  tableProps={tableProps}
56
49
  {...props}
57
50
  />
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md CHANGED
@@ -2,10 +2,6 @@ Create a sticky header that works for responsive Advanced Tables by setting `sti
2
2
 
3
3
  **NOTE**: This behavior requires a `max_height` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
4
4
 
5
- Scroll inside the table preview to see the header stick.
6
-
7
- This example builds flat table data inline for the docs preview. For typical `table_data` setup, see [Default (Required Props)](/kits/advanced_table/default/rails#advanced_table_beta).
8
-
9
5
  Expand the table above to see this in action.
10
6
 
11
7
  A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table#sticky-header) doc example above.
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md CHANGED
@@ -1,9 +1,7 @@
1
- Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and wrapping the table in a scroll container (or using `maxHeight`).
1
+ Create a sticky header that works for responsive Advanced Tables by setting `sticky: true` via `tableProps` and giving the AdvancedTable a `maxHeight` using our [Max Height](https://playbook.powerapp.cloud/global_props/max_height) global prop.
2
2
 
3
- **NOTE**: The header is sticky within the table scroll area. The live example uses flat rows so you can scroll inside the preview without expanding subrows.
3
+ **NOTE**: This behavior requires a `maxHeight` to work. The header is sticky within the table container, allowing for it to work along with the first column stickiness of a responsive table on smaller screen sizes.
4
4
 
5
- This example builds flat table data inline for the docs preview. For typical `tableData` setup, see [Default (Required Props)](/kits/advanced_table/default/react#advanced_table_default).
6
-
7
- Expand the table above to see responsive behavior in action.
5
+ Expand the table above to see this in action.
8
6
 
9
7
  A sticky header on a nonresponsive table is demonstrated in the ["Sticky Header"](https://playbook.powerapp.cloud/kits/advanced_table/react#sticky-header) doc example above.
data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml CHANGED
@@ -3,7 +3,6 @@ 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_enable_toggle_expansion_rails: Enable Toggle Expansion
7
6
  - advanced_table_collapsible_trail_rails: Collapsible Trail
8
7
  - advanced_table_table_props: Table Props
9
8
  - advanced_table_sticky_header_rails: Sticky Header
@@ -53,7 +52,6 @@ examples:
53
52
  - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
54
53
  - advanced_table_sticky_columns: Sticky Columns
55
54
  - advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
56
- - advanced_table_sticky_scroll_limitation: Sticky Header and Column Scroll Limitation
57
55
  - advanced_table_responsive: Responsive Tables
58
56
  - advanced_table_custom_cell: Custom Components for Cells
59
57
  - advanced_table_with_custom_header: Custom Header Cell
data/app/pb_kits/playbook/pb_advanced_table/docs/index.js CHANGED
@@ -27,7 +27,6 @@ export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen
27
27
  export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
28
28
  export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
29
29
  export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
30
- export { default as AdvancedTableStickyScrollLimitation } from './_advanced_table_sticky_scroll_limitation.jsx'
31
30
  export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
32
31
  export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
33
32
  export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'
data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.jsx CHANGED
@@ -36,10 +36,10 @@ const DatePickerDialogSubmission = () => {
36
36
  <Dialog.Body>
37
37
  <DatePicker
38
38
  defaultDate={dateFixed || undefined}
39
- key={"fixed-" + pickerInstance}
39
+ key={`fixed-${pickerInstance}`}
40
40
  label="Date"
41
41
  onChange={(dateStr) => setDateFixed(dateStr || "")}
42
- pickerId={"datePickerFixed-" + pickerInstance}
42
+ pickerId={`datePickerFixed-${pickerInstance}`}
43
43
  staticPosition={false}
44
44
  />
45
45
  </Dialog.Body>
data/app/pb_kits/playbook/pb_table/docs/_table_sticky.html.erb CHANGED
@@ -1,85 +1,83 @@
1
- <div style="max-height: 320px; overflow-y: auto;">
2
- <%= pb_rails("table", props: { sticky: true }) do %>
3
- <thead>
4
- <tr>
5
- <th>Column 1</th>
6
- <th>Column 2</th>
7
- <th>Column 3</th>
8
- <th>Column 4</th>
9
- <th>Column 5</th>
10
- </tr>
11
- </thead>
12
- <tbody>
13
- <tr>
14
- <td>Value 1</td>
15
- <td>Value 2</td>
16
- <td>Value 3</td>
17
- <td>Value 4</td>
18
- <td>Value 5</td>
19
- </tr>
20
- <tr>
21
- <td>Value 1</td>
22
- <td>Value 2</td>
23
- <td>Value 3</td>
24
- <td>Value 4</td>
25
- <td>Value 5</td>
26
- </tr>
27
- <tr>
28
- <td>Value 1</td>
29
- <td>Value 2</td>
30
- <td>Value 3</td>
31
- <td>Value 4</td>
32
- <td>Value 5</td>
33
- </tr>
34
- <tr>
35
- <td>Value 1</td>
36
- <td>Value 2</td>
37
- <td>Value 3</td>
38
- <td>Value 4</td>
39
- <td>Value 5</td>
40
- </tr>
41
- <tr>
42
- <td>Value 1</td>
43
- <td>Value 2</td>
44
- <td>Value 3</td>
45
- <td>Value 4</td>
46
- <td>Value 5</td>
47
- </tr>
48
- <tr>
49
- <td>Value 1</td>
50
- <td>Value 2</td>
51
- <td>Value 3</td>
52
- <td>Value 4</td>
53
- <td>Value 5</td>
54
- </tr>
55
- <tr>
56
- <td>Value 1</td>
57
- <td>Value 2</td>
58
- <td>Value 3</td>
59
- <td>Value 4</td>
60
- <td>Value 5</td>
61
- </tr>
62
- <tr>
63
- <td>Value 1</td>
64
- <td>Value 2</td>
65
- <td>Value 3</td>
66
- <td>Value 4</td>
67
- <td>Value 5</td>
68
- </tr>
69
- <tr>
70
- <td>Value 1</td>
71
- <td>Value 2</td>
72
- <td>Value 3</td>
73
- <td>Value 4</td>
74
- <td>Value 5</td>
75
- </tr>
76
- <tr>
77
- <td>Value 1</td>
78
- <td>Value 2</td>
79
- <td>Value 3</td>
80
- <td>Value 4</td>
81
- <td>Value 5</td>
82
- </tr>
83
- </tbody>
84
- <% end %>
85
- </div>
1
+ <%= pb_rails("table", props: { sticky: true }) do %>
2
+ <thead>
3
+ <tr>
4
+ <th>Column 1</th>
5
+ <th>Column 2</th>
6
+ <th>Column 3</th>
7
+ <th>Column 4</th>
8
+ <th>Column 5</th>
9
+ </tr>
10
+ </thead>
11
+ <tbody>
12
+ <tr>
13
+ <td>Value 1</td>
14
+ <td>Value 2</td>
15
+ <td>Value 3</td>
16
+ <td>Value 4</td>
17
+ <td>Value 5</td>
18
+ </tr>
19
+ <tr>
20
+ <td>Value 1</td>
21
+ <td>Value 2</td>
22
+ <td>Value 3</td>
23
+ <td>Value 4</td>
24
+ <td>Value 5</td>
25
+ </tr>
26
+ <tr>
27
+ <td>Value 1</td>
28
+ <td>Value 2</td>
29
+ <td>Value 3</td>
30
+ <td>Value 4</td>
31
+ <td>Value 5</td>
32
+ </tr>
33
+ <tr>
34
+ <td>Value 1</td>
35
+ <td>Value 2</td>
36
+ <td>Value 3</td>
37
+ <td>Value 4</td>
38
+ <td>Value 5</td>
39
+ </tr>
40
+ <tr>
41
+ <td>Value 1</td>
42
+ <td>Value 2</td>
43
+ <td>Value 3</td>
44
+ <td>Value 4</td>
45
+ <td>Value 5</td>
46
+ </tr>
47
+ <tr>
48
+ <td>Value 1</td>
49
+ <td>Value 2</td>
50
+ <td>Value 3</td>
51
+ <td>Value 4</td>
52
+ <td>Value 5</td>
53
+ </tr>
54
+ <tr>
55
+ <td>Value 1</td>
56
+ <td>Value 2</td>
57
+ <td>Value 3</td>
58
+ <td>Value 4</td>
59
+ <td>Value 5</td>
60
+ </tr>
61
+ <tr>
62
+ <td>Value 1</td>
63
+ <td>Value 2</td>
64
+ <td>Value 3</td>
65
+ <td>Value 4</td>
66
+ <td>Value 5</td>
67
+ </tr>
68
+ <tr>
69
+ <td>Value 1</td>
70
+ <td>Value 2</td>
71
+ <td>Value 3</td>
72
+ <td>Value 4</td>
73
+ <td>Value 5</td>
74
+ </tr>
75
+ <tr>
76
+ <td>Value 1</td>
77
+ <td>Value 2</td>
78
+ <td>Value 3</td>
79
+ <td>Value 4</td>
80
+ <td>Value 5</td>
81
+ </tr>
82
+ </tbody>
83
+ <% end %>
data/app/pb_kits/playbook/pb_table/docs/_table_sticky.jsx CHANGED
@@ -3,94 +3,92 @@ import React from "react"
3
3
  import Table from "../_table"
4
4
 
5
5
  const TableSticky = (props) => (
6
- <div style={{ maxHeight: "320px", overflowY: "auto" }}>
7
- <Table
8
- sticky
9
- {...props}
10
- >
11
- <thead>
12
- <tr>
13
- <th>{'Column 1'}</th>
14
- <th>{'Column 2'}</th>
15
- <th>{'Column 3'}</th>
16
- <th>{'Column 4'}</th>
17
- <th>{'Column 5'}</th>
18
- </tr>
19
- </thead>
20
- <tbody>
21
- <tr>
22
- <td>{'Value 1'}</td>
23
- <td>{'Value 2'}</td>
24
- <td>{'Value 3'}</td>
25
- <td>{'Value 4'}</td>
26
- <td>{'Value 5'}</td>
27
- </tr>
28
- <tr>
29
- <td>{'Value 1'}</td>
30
- <td>{'Value 2'}</td>
31
- <td>{'Value 3'}</td>
32
- <td>{'Value 4'}</td>
33
- <td>{'Value 5'}</td>
34
- </tr>
35
- <tr>
36
- <td>{'Value 1'}</td>
37
- <td>{'Value 2'}</td>
38
- <td>{'Value 3'}</td>
39
- <td>{'Value 4'}</td>
40
- <td>{'Value 5'}</td>
41
- </tr>
42
- <tr>
43
- <td>{'Value 1'}</td>
44
- <td>{'Value 2'}</td>
45
- <td>{'Value 3'}</td>
46
- <td>{'Value 4'}</td>
47
- <td>{'Value 5'}</td>
48
- </tr>
49
- <tr>
50
- <td>{'Value 1'}</td>
51
- <td>{'Value 2'}</td>
52
- <td>{'Value 3'}</td>
53
- <td>{'Value 4'}</td>
54
- <td>{'Value 5'}</td>
55
- </tr>
56
- <tr>
57
- <td>{'Value 1'}</td>
58
- <td>{'Value 2'}</td>
59
- <td>{'Value 3'}</td>
60
- <td>{'Value 4'}</td>
61
- <td>{'Value 5'}</td>
62
- </tr>
63
- <tr>
64
- <td>{'Value 1'}</td>
65
- <td>{'Value 2'}</td>
66
- <td>{'Value 3'}</td>
67
- <td>{'Value 4'}</td>
68
- <td>{'Value 5'}</td>
69
- </tr>
70
- <tr>
71
- <td>{'Value 1'}</td>
72
- <td>{'Value 2'}</td>
73
- <td>{'Value 3'}</td>
74
- <td>{'Value 4'}</td>
75
- <td>{'Value 5'}</td>
76
- </tr>
77
- <tr>
78
- <td>{'Value 1'}</td>
79
- <td>{'Value 2'}</td>
80
- <td>{'Value 3'}</td>
81
- <td>{'Value 4'}</td>
82
- <td>{'Value 5'}</td>
83
- </tr>
84
- <tr>
85
- <td>{'Value 1'}</td>
86
- <td>{'Value 2'}</td>
87
- <td>{'Value 3'}</td>
88
- <td>{'Value 4'}</td>
89
- <td>{'Value 5'}</td>
90
- </tr>
91
- </tbody>
92
- </Table>
93
- </div>
6
+ <Table
7
+ sticky
8
+ {...props}
9
+ >
10
+ <thead>
11
+ <tr>
12
+ <th>{'Column 1'}</th>
13
+ <th>{'Column 2'}</th>
14
+ <th>{'Column 3'}</th>
15
+ <th>{'Column 4'}</th>
16
+ <th>{'Column 5'}</th>
17
+ </tr>
18
+ </thead>
19
+ <tbody>
20
+ <tr>
21
+ <td>{'Value 1'}</td>
22
+ <td>{'Value 2'}</td>
23
+ <td>{'Value 3'}</td>
24
+ <td>{'Value 4'}</td>
25
+ <td>{'Value 5'}</td>
26
+ </tr>
27
+ <tr>
28
+ <td>{'Value 1'}</td>
29
+ <td>{'Value 2'}</td>
30
+ <td>{'Value 3'}</td>
31
+ <td>{'Value 4'}</td>
32
+ <td>{'Value 5'}</td>
33
+ </tr>
34
+ <tr>
35
+ <td>{'Value 1'}</td>
36
+ <td>{'Value 2'}</td>
37
+ <td>{'Value 3'}</td>
38
+ <td>{'Value 4'}</td>
39
+ <td>{'Value 5'}</td>
40
+ </tr>
41
+ <tr>
42
+ <td>{'Value 1'}</td>
43
+ <td>{'Value 2'}</td>
44
+ <td>{'Value 3'}</td>
45
+ <td>{'Value 4'}</td>
46
+ <td>{'Value 5'}</td>
47
+ </tr>
48
+ <tr>
49
+ <td>{'Value 1'}</td>
50
+ <td>{'Value 2'}</td>
51
+ <td>{'Value 3'}</td>
52
+ <td>{'Value 4'}</td>
53
+ <td>{'Value 5'}</td>
54
+ </tr>
55
+ <tr>
56
+ <td>{'Value 1'}</td>
57
+ <td>{'Value 2'}</td>
58
+ <td>{'Value 3'}</td>
59
+ <td>{'Value 4'}</td>
60
+ <td>{'Value 5'}</td>
61
+ </tr>
62
+ <tr>
63
+ <td>{'Value 1'}</td>
64
+ <td>{'Value 2'}</td>
65
+ <td>{'Value 3'}</td>
66
+ <td>{'Value 4'}</td>
67
+ <td>{'Value 5'}</td>
68
+ </tr>
69
+ <tr>
70
+ <td>{'Value 1'}</td>
71
+ <td>{'Value 2'}</td>
72
+ <td>{'Value 3'}</td>
73
+ <td>{'Value 4'}</td>
74
+ <td>{'Value 5'}</td>
75
+ </tr>
76
+ <tr>
77
+ <td>{'Value 1'}</td>
78
+ <td>{'Value 2'}</td>
79
+ <td>{'Value 3'}</td>
80
+ <td>{'Value 4'}</td>
81
+ <td>{'Value 5'}</td>
82
+ </tr>
83
+ <tr>
84
+ <td>{'Value 1'}</td>
85
+ <td>{'Value 2'}</td>
86
+ <td>{'Value 3'}</td>
87
+ <td>{'Value 4'}</td>
88
+ <td>{'Value 5'}</td>
89
+ </tr>
90
+ </tbody>
91
+ </Table>
94
92
  )
95
93
 
96
94
  export default TableSticky
data/app/pb_kits/playbook/pb_table/docs/_table_sticky.md CHANGED
@@ -2,9 +2,7 @@ React: Use `sticky` on a table to allow the table header to be fixed in place wh
2
2
 
3
3
  Rails: Pass `sticky: true` to props.
4
4
 
5
- The live example uses a scroll container so sticky behavior is visible in the docs. Scroll inside the preview to see it.
6
-
7
- If the table header is not sticking in the right place you will need to pass an inline `top` style to the `thead`. This is often needed when a parent adds padding above the table.
5
+ If the table header is not sticking in the right place you will need to pass a inline `top` style to the `thead`.
8
6
  React Example: `<thead style={{ top: "-16px" }}>`
9
7
  Rails Example: `<thead style="top: -16px">`
10
8
 
data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_external_filter_rails.md CHANGED
@@ -36,4 +36,4 @@ When `filter` is present, `filter_content` and `filter_props` are ignored.
36
36
  <% end %>
37
37
  ```
38
38
 
39
- For Nitro apps that use a shared search/filter pattern, reference the [example on Alpha](https://github.com/powerhome/nitro-web/pull/56859/changes/aa2afcdc97d39d74beb65cf53eb3bb2517eb2181) for implementation details.
39
+ For Nitro apps that use a shared search/filter pattern, reference the example on Alpha for implementation details.
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.8.0.pre.alpha.PLAY296916758
4
+ version: 16.8.0.pre.alpha.PLAY298516633
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-06-01 00:00:00.000000000 Z
12
+ date: 2026-05-27 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -94,8 +94,6 @@ files:
94
94
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_sort.md
95
95
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
96
96
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
97
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.html.erb
98
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.md
99
97
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx
100
98
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md
101
99
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
@@ -177,8 +175,6 @@ files:
177
175
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md
178
176
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb
179
177
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md
180
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_scroll_limitation.jsx
181
- - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_scroll_limitation.md
182
178
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx
183
179
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md
184
180
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.html.erb DELETED
@@ -1,62 +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", "Month", "Day"]
35
- %>
36
-
37
- <%= pb_rails("title", props: { size: 4, text: "Normal Structure", margin_bottom: "sm" }) %>
38
-
39
- <%= pb_rails("advanced_table", props: {
40
- id: "enable-toggle-expansion-normal",
41
- table_data: @table_data,
42
- column_definitions: column_definitions,
43
- enable_toggle_expansion: "all"
44
- }) %>
45
-
46
- <%= pb_rails("title", props: { size: 4, text: "Subcomponent Structure", margin_top: "lg", margin_bottom: "sm" }) %>
47
-
48
- <%= pb_rails("advanced_table", props: { id: "enable-toggle-expansion-subcomponents" }) do %>
49
- <%= pb_rails("advanced_table/table_header", props: {
50
- table_id: "enable-toggle-expansion-subcomponents",
51
- table_data: @table_data,
52
- column_definitions: column_definitions,
53
- enable_toggle_expansion: "all"
54
- }) %>
55
- <%= pb_rails("advanced_table/table_body", props: {
56
- table_id: "enable-toggle-expansion-subcomponents",
57
- table_data: @table_data,
58
- column_definitions: column_definitions,
59
- subrow_headers: subrow_headers,
60
- enable_toggle_expansion: "all"
61
- }) %>
62
- <% end %>
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.md DELETED
@@ -1,7 +0,0 @@
1
- `enable_toggle_expansion` controls where AdvancedTable renders toggle-all expansion controls. It accepts `"header"`, `"all"`, or `"none"` and defaults to `"header"`.
2
-
3
- When using the normal Rails structure, pass `enable_toggle_expansion` to `advanced_table`. The parent kit renders its own `table_header` and `table_body`, so the prop is passed down automatically.
4
-
5
- When using the Rails subcomponent structure, pass `enable_toggle_expansion` directly to the subcomponents that need it. `advanced_table/table_header` uses it for the table header toggle-all button. **NOTE**: you must pass `table_data` to `advanced_table/table_header` as well so it can detect whether expandable rows exist. `advanced_table/table_body` uses it for nested subrow header toggle controls, such as when `subrow_headers` is present.
6
-
7
- Use `"all"` when you want toggle-all controls in both the table header and subrow headers. Use `"header"` when you only want the table header toggle-all control. Use `"none"` to suppress the header toggle-all control.
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_scroll_limitation.jsx DELETED
@@ -1,68 +0,0 @@
1
- import React from "react"
2
- import AdvancedTable from "../../pb_advanced_table/_advanced_table"
3
- import Title from "../../pb_title/_title"
4
-
5
- const COLUMN_COUNT = 10
6
- const ROW_COUNT = 40
7
-
8
- const columnDefinitions = [
9
- {
10
- accessor: "region",
11
- label: "Region",
12
- id: "region",
13
- columnStyling: { minWidth: 160 },
14
- },
15
- ...Array.from({ length: COLUMN_COUNT }, (_, index) => ({
16
- accessor: `metric${index + 1}`,
17
- label: `Metric ${index + 1}`,
18
- id: `metric${index + 1}`,
19
- columnStyling: { minWidth: 180 },
20
- })),
21
- ]
22
-
23
- const tableData = Array.from({ length: ROW_COUNT }, (_, row) => ({
24
- region: `Region ${row + 1}`,
25
- ...Object.fromEntries(
26
- Array.from({ length: COLUMN_COUNT }, (_, col) => [
27
- `metric${col + 1}`,
28
- String((row + 1) * (col + 1)),
29
- ])
30
- ),
31
- }))
32
-
33
- const tableProps = { sticky: true }
34
-
35
- const AdvancedTableStickyScrollLimitation = (props) => (
36
- <div>
37
- <Title
38
- size={4}
39
- text="Without maxHeight"
40
- {...props}
41
- />
42
- <AdvancedTable
43
- columnDefinitions={columnDefinitions}
44
- responsive="none"
45
- stickyLeftColumn={["region"]}
46
- tableData={tableData}
47
- tableProps={tableProps}
48
- {...props}
49
- />
50
- <Title
51
- paddingTop="sm"
52
- size={4}
53
- text="With maxHeight"
54
- {...props}
55
- />
56
- <AdvancedTable
57
- columnDefinitions={columnDefinitions}
58
- maxHeight="sm"
59
- responsive="none"
60
- stickyLeftColumn={["region"]}
61
- tableData={tableData}
62
- tableProps={tableProps}
63
- {...props}
64
- />
65
- </div>
66
- )
67
-
68
- export default AdvancedTableStickyScrollLimitation
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_scroll_limitation.md DELETED
@@ -1,7 +0,0 @@
1
- `stickyLeftColumn` adds horizontal overflow to the table wrapper. Without `maxHeight`, the page scrolls vertically while the table scrolls horizontally — two scroll containers.
2
-
3
- Sticky columns work in that setup, but the sticky header cannot stick to the page. Scroll down on the page, then scroll the first table horizontally to see the conflict.
4
-
5
- The second table uses `maxHeight` so both axes share one scroll container. The header sticks to the top of the table box instead of the page.
6
-
7
- For a typical implementation with subrows, see [Sticky Columns with Sticky Header](#sticky-columns-with-sticky-header).