playbook_ui_docs 16.9.0.pre.rc.3 → 16.9.0.pre.rc.4

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_enable_toggle_expansion_rails.html.erb +62 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.md +7 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.jsx +12 -4
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md +4 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb +16 -2
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md +4 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.html.erb +16 -2
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx +12 -5
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md +4 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_react.md +5 -3
  12. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
  13. data/app/pb_kits/playbook/pb_table/docs/_table_sticky.html.erb +85 -83
  14. data/app/pb_kits/playbook/pb_table/docs/_table_sticky.jsx +88 -86
  15. data/app/pb_kits/playbook/pb_table/docs/_table_sticky.md +3 -1
  16. data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default.md +3 -1
  17. data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.html.erb +24 -0
  18. data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler_rails.md +6 -0
  19. data/app/pb_kits/playbook/pb_time_picker/docs/example.yml +1 -0
  20. metadata +7 -3
  21. /data/app/pb_kits/playbook/pb_time_picker/docs/{_time_picker_on_handler.md → _time_picker_on_handler_react.md} +0 -0
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 0c4926f8f92b152b64e4d26cd5a503beb4e1b6f06652b791c26a9c58df77f361
4
- data.tar.gz: 44ac225e3eddc055c4a287f7bd7ad7ce7f8602cb312e83d291f444a5fe8d6fce
3
+ metadata.gz: cb48cf31e233934f87076985ccdce5bb0bcbdeee4e266dcfd37c49eb7c7f0b1f
4
+ data.tar.gz: 0a5dab303a2064f08806b6fd579c42f77ed8f7dbca69088efd0dcf2cf0ae2027
5
5
  SHA512:
6
- metadata.gz: 4ee7242da1614707a9cf79bd49a872f0ce613d65282138c1ae357bee38b660b20bbe4af2a427317c65f130fa52c5d26813584e9bd1aed57f96ddd58e50de47fa
7
- data.tar.gz: 83e536093e3cc266eed5c1252d325cdc61bd488d5bf5743e7372296acc5e1390132639555b6f28850be80daab7336f8bd8dffd5f57609308ac55ab00c2aa36b6
6
+ metadata.gz: a254cba19da949ac8d8e7eebd6ed68829effe32bc0c03227ead362520fce767661d5f63d5cf5eaa93e9b4ffef2ea30062bd770442b7b5e87ddda32177cf39dfb
7
+ data.tar.gz: bc605d1d4b3f809fd1964d7c9312da25c7f1c38f021e0f639b73ffcd676405392540e3dc5c854808d78229d4003b2fef2ab57638c377078b043b551e5687e96e
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_enable_toggle_expansion_rails.html.erb ADDED
@@ -0,0 +1,62 @@
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 ADDED
@@ -0,0 +1,7 @@
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_header.jsx CHANGED
@@ -1,13 +1,21 @@
1
1
  import React from "react"
2
2
  import AdvancedTable from '../../pb_advanced_table/_advanced_table'
3
- import MOCK_DATA from "./advanced_table_mock_data.json"
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
+ }))
4
13
 
5
14
  const AdvancedTableStickyHeader = (props) => {
6
15
  const columnDefinitions = [
7
16
  {
8
17
  accessor: "year",
9
18
  label: "Year",
10
- cellAccessors: ["quarter", "month", "day"],
11
19
  },
12
20
  {
13
21
  accessor: "newEnrollments",
@@ -40,11 +48,11 @@ const AdvancedTableStickyHeader = (props) => {
40
48
  }
41
49
 
42
50
  return (
43
- <div>
51
+ <div style={{ maxHeight: "320px", overflowY: "auto" }}>
44
52
  <AdvancedTable
45
53
  columnDefinitions={columnDefinitions}
46
54
  responsive="none"
47
- tableData={MOCK_DATA}
55
+ tableData={tableData}
48
56
  tableProps={tableProps}
49
57
  {...props}
50
58
  />
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md CHANGED
@@ -1,3 +1,7 @@
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
+
3
7
  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,7 +2,6 @@
2
2
  {
3
3
  accessor: "year",
4
4
  label: "Year",
5
- cellAccessors: ["quarter", "month", "day"],
6
5
  },
7
6
  {
8
7
  accessor: "newEnrollments",
@@ -30,4 +29,19 @@
30
29
  }
31
30
  ] %>
32
31
 
33
- <%= pb_rails("advanced_table", props: { id: "sticky_header_table", table_data: @table_data, column_definitions: column_definitions, responsive: "none", table_props: { sticky: true }}) %>
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>
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md CHANGED
@@ -1,3 +1,7 @@
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
+
3
7
  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,7 +2,6 @@
2
2
  {
3
3
  accessor: "year",
4
4
  label: "Year",
5
- cellAccessors: ["quarter", "month", "day"],
6
5
  },
7
6
  {
8
7
  accessor: "newEnrollments",
@@ -30,4 +29,19 @@
30
29
  }
31
30
  ] %>
32
31
 
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 }}) %>
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>
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx CHANGED
@@ -1,13 +1,21 @@
1
1
  import React from "react"
2
2
  import AdvancedTable from '../../pb_advanced_table/_advanced_table'
3
- import MOCK_DATA from "./advanced_table_mock_data.json"
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
+ }))
4
13
 
5
14
  const AdvancedTableTablePropsStickyHeader = (props) => {
6
15
  const columnDefinitions = [
7
16
  {
8
17
  accessor: "year",
9
18
  label: "Year",
10
- cellAccessors: ["quarter", "month", "day"],
11
19
  },
12
20
  {
13
21
  accessor: "newEnrollments",
@@ -40,11 +48,10 @@ const AdvancedTableTablePropsStickyHeader = (props) => {
40
48
  }
41
49
 
42
50
  return (
43
- <div>
51
+ <div style={{ maxHeight: "320px", overflowY: "auto" }}>
44
52
  <AdvancedTable
45
53
  columnDefinitions={columnDefinitions}
46
- maxHeight="xs"
47
- tableData={MOCK_DATA}
54
+ tableData={tableData}
48
55
  tableProps={tableProps}
49
56
  {...props}
50
57
  />
data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header_rails.md CHANGED
@@ -2,6 +2,10 @@ 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
+
5
9
  Expand the table above to see this in action.
6
10
 
7
11
  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,7 +1,9 @@
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.
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`).
2
2
 
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.
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.
4
4
 
5
- Expand the table above to see this in action.
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.
6
8
 
7
9
  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,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_enable_toggle_expansion_rails: Enable Toggle Expansion
6
7
  - advanced_table_collapsible_trail_rails: Collapsible Trail
7
8
  - advanced_table_table_props: Table Props
8
9
  - advanced_table_sticky_header_rails: Sticky Header
data/app/pb_kits/playbook/pb_table/docs/_table_sticky.html.erb CHANGED
@@ -1,83 +1,85 @@
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 %>
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>
data/app/pb_kits/playbook/pb_table/docs/_table_sticky.jsx CHANGED
@@ -3,92 +3,94 @@ import React from "react"
3
3
  import Table from "../_table"
4
4
 
5
5
  const TableSticky = (props) => (
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>
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>
92
94
  )
93
95
 
94
96
  export default TableSticky
data/app/pb_kits/playbook/pb_table/docs/_table_sticky.md CHANGED
@@ -2,7 +2,9 @@ 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
- If the table header is not sticking in the right place you will need to pass a inline `top` style to the `thead`.
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.
6
8
  React Example: `<thead style={{ top: "-16px" }}>`
7
9
  Rails Example: `<thead style="top: -16px">`
8
10
 
data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_default.md CHANGED
@@ -1 +1,3 @@
1
- Use the Time Picker for time-only selection. For date and time selection, use the [DatePicker with Time Selection Enabled](https://playbook.powerapp.cloud/kits/date_picker/react#time-selection) instead.
1
+ Use the Time Picker for time-only selection. For date and time selection, use the [DatePicker with Time Selection Enabled](https://playbook.powerapp.cloud/kits/date_picker/react#time-selection) instead.
2
+
3
+ `id` is a **required prop** to instantiate the Time Picker. The presence of a unique `id` for each Time Picker on a page also associates the label with the input, providing the ability to focus the Time Picker by clicking the label.
data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.html.erb ADDED
@@ -0,0 +1,24 @@
1
+ <%= pb_rails("flex", props: { margin_bottom: "sm", orientation: "column" }) do %>
2
+ <%= pb_rails("body", props: { id: "time-picker-on-change-output", text: "" }) %>
3
+ <%= pb_rails("body", props: { id: "time-picker-on-close-output", text: "" }) %>
4
+ <% end %>
5
+
6
+ <%= pb_rails("time_picker", props: { id: "time-picker-on-handler" }) %>
7
+
8
+ <script>
9
+ (function() {
10
+ var picker = document.getElementById("time-picker-on-handler");
11
+ var changeOutput = document.getElementById("time-picker-on-change-output");
12
+ var closeOutput = document.getElementById("time-picker-on-close-output");
13
+
14
+ if (!picker) return;
15
+
16
+ picker.addEventListener("pb-time-picker-change", function(event) {
17
+ changeOutput.textContent = "onChange: " + (event.detail.time || "");
18
+ });
19
+
20
+ picker.addEventListener("pb-time-picker-close", function(event) {
21
+ closeOutput.textContent = "onClose: " + (event.detail.time || "");
22
+ });
23
+ })();
24
+ </script>
data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler_rails.md ADDED
@@ -0,0 +1,6 @@
1
+ Demonstrates listening for Time Picker custom events on the Rails enhanced element. Attach listeners to the picker root element (the element with `data-pb-time-picker`).
2
+
3
+ | Event | When it fires | `event.detail` |
4
+ | --- | --- | --- |
5
+ | `pb-time-picker-change` | Hour, minute, or period changes while the dropdown is open | `{ time: string }` — 24-hour `HH:MM` value, or `""` when cleared |
6
+ | `pb-time-picker-close` | Dropdown closes with a valid selection | `{ time: string }` — 24-hour `HH:MM` value |
data/app/pb_kits/playbook/pb_time_picker/docs/example.yml CHANGED
@@ -11,6 +11,7 @@ examples:
11
11
  - time_picker_disabled: Disabled
12
12
  - time_picker_required_indicator: Required Indicator
13
13
  - time_picker_input_options: Input Options
14
+ - time_picker_on_handler: onChange & onClose Handlers
14
15
 
15
16
 
16
17
  react:
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.9.0.pre.rc.3
4
+ version: 16.9.0.pre.rc.4
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-05-28 00:00:00.000000000 Z
12
+ date: 2026-06-02 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -94,6 +94,8 @@ 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
97
99
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx
98
100
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md
99
101
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx
@@ -2627,8 +2629,10 @@ files:
2627
2629
  - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.html.erb
2628
2630
  - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.jsx
2629
2631
  - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.md
2632
+ - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.html.erb
2630
2633
  - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.jsx
2631
- - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.md
2634
+ - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler_rails.md
2635
+ - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler_react.md
2632
2636
  - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.html.erb
2633
2637
  - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.jsx
2634
2638
  - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.md