playbook_ui_docs 16.8.0.pre.alpha.PLAY2965datepickerconsoleerrors16591 → 16.8.0.pre.alpha.PLAY2968timepickerrailsenhancedelementrefactor16753

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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 5fb87324a7ddbdeed93675b7fc96d3a603c7be7db8cb1e25ede224b1c572b915
4
- data.tar.gz: 924b326b803fd1ce1ee2dd4c25adb5bcb3859ff37890490efcb5924132dbb89b
3
+ metadata.gz: 360d56c6cb3e5cf3070fa1cbc71f2558e42f3132dd49c124799e1111b3efedc4
4
+ data.tar.gz: 73b723cb80d5aa34eae3a85a47bce529a4cf0c7f5664be1414a0d61771b039a5
5
5
  SHA512:
6
- metadata.gz: 6aa55230d64fc6ba2cd7057b33058d99e5392a417df159185217b5afba2d1613880a9f7f3bf263b1dd7fa75735235efff8a2f683c06d9b665cab6d657189e5fa
7
- data.tar.gz: c520e68dfa8c89063d3be3170241384609cae594ccd5d5d00aa0544bf3e5362ea77724cf6a7b68d17733d81f7e87394dc3ac3788a4607ec64d705fec788f2e0f
6
+ metadata.gz: 4f3d4e94746411d486a430cbe02acd907e1095a258454f72c4811cc45bc7658b15b831a80508a0a120e161ef6e984f888eddb92e728bc95d773988e0324a3eec
7
+ data.tar.gz: 5b97621f6c9761bbb3d2b4c18f2c52cee4b7960fdf864f61306492f9f9c88e3ec03379670cbd126af7ddd671cdfe5774a06c1098e0b9edebe75a484f317f8275
@@ -0,0 +1,68 @@
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
@@ -0,0 +1,7 @@
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).
@@ -52,6 +52,7 @@ examples:
52
52
  - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
53
53
  - advanced_table_sticky_columns: Sticky Columns
54
54
  - advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
55
+ - advanced_table_sticky_scroll_limitation: Sticky Header and Column Scroll Limitation
55
56
  - advanced_table_responsive: Responsive Tables
56
57
  - advanced_table_custom_cell: Custom Components for Cells
57
58
  - advanced_table_with_custom_header: Custom Header Cell
@@ -27,6 +27,7 @@ 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'
30
31
  export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
31
32
  export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
32
33
  export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'
@@ -0,0 +1,90 @@
1
+ <% data = [
2
+ {
3
+ name: "EV",
4
+ y: 23.9,
5
+ },
6
+ {
7
+ name: "Hybrids",
8
+ y: 12.6,
9
+ },
10
+ {
11
+ name: "Diesel",
12
+ y: 37.0,
13
+ },
14
+ {
15
+ name: "Petrol",
16
+ y: 26.4,
17
+ },
18
+ ] %>
19
+
20
+ <% total = data.sum { |point| point[:y] } %>
21
+ <% subtitle_rows = data.map { |point| "#{point[:name]}: #{point[:y]}%" }.join("<br>") %>
22
+
23
+ <% chart_options = {
24
+ chart: {
25
+ type: "pie",
26
+ },
27
+ accessibility: {
28
+ point: {
29
+ valueSuffix: "%",
30
+ },
31
+ },
32
+ title: {
33
+ text: "2023 Norway car registrations",
34
+ floating: true,
35
+ align: "center",
36
+ verticalAlign: "top",
37
+ y: 8,
38
+ },
39
+ subtitle: {
40
+ text: "Total<br><strong>#{total.round(1)}</strong><br><br>#{subtitle_rows}",
41
+ useHTML: true,
42
+ floating: true,
43
+ align: "center",
44
+ verticalAlign: "middle",
45
+ y: 8,
46
+ style: {
47
+ textAlign: "center",
48
+ },
49
+ },
50
+ tooltip: {
51
+ pointFormat: "{series.name}: <b>{point.percentage:.0f}%</b>",
52
+ },
53
+ legend: {
54
+ enabled: false,
55
+ },
56
+ plotOptions: {
57
+ series: {
58
+ allowPointSelect: true,
59
+ cursor: "pointer",
60
+ borderRadius: 8,
61
+ dataLabels: [
62
+ {
63
+ enabled: true,
64
+ distance: 20,
65
+ format: "{point.name}",
66
+ },
67
+ {
68
+ enabled: true,
69
+ distance: -15,
70
+ format: "{point.percentage:.0f}%",
71
+ style: {
72
+ fontSize: "0.9em",
73
+ },
74
+ },
75
+ ],
76
+ showInLegend: true,
77
+ },
78
+ },
79
+ series: [
80
+ {
81
+ name: "Registrations",
82
+ colorByPoint: true,
83
+ center: ["50%", "50%"],
84
+ innerSize: "75%",
85
+ data: data,
86
+ },
87
+ ],
88
+ } %>
89
+
90
+ <%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>
@@ -0,0 +1,100 @@
1
+ import React from "react";
2
+ import PbCircleChart from "../_pb_circle_chart";
3
+
4
+ const data = [
5
+ {
6
+ name: "EV",
7
+ y: 23.9,
8
+ },
9
+ {
10
+ name: "Hybrids",
11
+ y: 12.6,
12
+ },
13
+ {
14
+ name: "Diesel",
15
+ y: 37.0,
16
+ },
17
+ {
18
+ name: "Petrol",
19
+ y: 26.4,
20
+ },
21
+ ];
22
+
23
+ const total = data.reduce((sum, point) => sum + point.y, 0);
24
+ const subtitleRows = data.map((point) => `${point.name}: ${point.y}%`).join("<br>");
25
+
26
+ const chartOptions = {
27
+ chart: {
28
+ type: "pie",
29
+ },
30
+ accessibility: {
31
+ point: {
32
+ valueSuffix: "%",
33
+ },
34
+ },
35
+ title: {
36
+ text: "2023 Norway car registrations",
37
+ floating: true,
38
+ align: "center",
39
+ verticalAlign: "top",
40
+ y: 8,
41
+ },
42
+ subtitle: {
43
+ text: `Total<br><strong>${total.toFixed(1)}</strong><br><br>${subtitleRows}`,
44
+ useHTML: true,
45
+ floating: true,
46
+ align: "center",
47
+ verticalAlign: "middle",
48
+ y: 8,
49
+ style: {
50
+ textAlign: "center",
51
+ },
52
+ },
53
+ tooltip: {
54
+ pointFormat: "{series.name}: <b>{point.percentage:.0f}%</b>",
55
+ },
56
+ legend: {
57
+ enabled: false,
58
+ },
59
+ plotOptions: {
60
+ series: {
61
+ allowPointSelect: true,
62
+ cursor: "pointer",
63
+ borderRadius: 8,
64
+ dataLabels: [
65
+ {
66
+ enabled: true,
67
+ distance: 20,
68
+ format: "{point.name}",
69
+ },
70
+ {
71
+ enabled: true,
72
+ distance: -15,
73
+ format: "{point.percentage:.0f}%",
74
+ style: {
75
+ fontSize: "0.9em",
76
+ },
77
+ },
78
+ ],
79
+ showInLegend: true,
80
+ },
81
+ },
82
+ series: [
83
+ {
84
+ name: "Registrations",
85
+ colorByPoint: true,
86
+ center: ["50%", "50%"],
87
+ innerSize: "75%",
88
+ data,
89
+ },
90
+ ],
91
+ };
92
+
93
+ const PbCircleChartCenteredData = (props) => (
94
+ <PbCircleChart
95
+ options={chartOptions}
96
+ {...props}
97
+ />
98
+ );
99
+
100
+ export default PbCircleChartCenteredData;
@@ -0,0 +1 @@
1
+ This example shows how to achieve centered data. This data will remain in the center of all screen sizes.
@@ -30,4 +30,4 @@ const PbCircleChartDefault = (props) => (
30
30
  </div>
31
31
  );
32
32
 
33
- export default PbCircleChartDefault;
33
+ export default PbCircleChartDefault;
@@ -11,6 +11,7 @@ examples:
11
11
  - pb_circle_chart_with_title: With Title
12
12
  - pb_circle_chart_inner_sizes: Inner Circle Size Options
13
13
  - pb_circle_chart_custom_tooltip: Tooltip Customization
14
+ - pb_circle_chart_centered_data: Centered Data
14
15
 
15
16
 
16
17
  react:
@@ -25,5 +26,6 @@ examples:
25
26
  - pb_circle_chart_with_title: With Title
26
27
  - pb_circle_chart_inner_sizes: Inner Circle Size Options
27
28
  - pb_circle_chart_custom_tooltip: Tooltip Customization
29
+ - pb_circle_chart_centered_data: Centered Data
28
30
 
29
31
 
@@ -8,4 +8,5 @@ export { default as PbCircleChartDataWithLegend } from './_pb_circle_chart_data_
8
8
  export { default as PbCircleChartDataLegendPosition } from './_pb_circle_chart_data_legend_position.jsx'
9
9
  export { default as PbCircleChartWithTitle } from './_pb_circle_chart_with_title.jsx'
10
10
  export { default as PbCircleChartInnerSizes } from './_pb_circle_chart_inner_sizes.jsx'
11
- export { default as PbCircleChartCustomTooltip } from './_pb_circle_chart_custom_tooltip.jsx'
11
+ export { default as PbCircleChartCustomTooltip } from './_pb_circle_chart_custom_tooltip.jsx'
12
+ export { default as PbCircleChartCenteredData } from './_pb_circle_chart_centered_data.jsx'
@@ -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 for implementation details.
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.
@@ -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>
@@ -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 |
@@ -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.8.0.pre.alpha.PLAY2965datepickerconsoleerrors16591
4
+ version: 16.8.0.pre.alpha.PLAY2968timepickerrailsenhancedelementrefactor16753
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-26 00:00:00.000000000 Z
12
+ date: 2026-06-01 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: playbook_ui
@@ -175,6 +175,8 @@ files:
175
175
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md
176
176
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb
177
177
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md
178
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_scroll_limitation.jsx
179
+ - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_scroll_limitation.md
178
180
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx
179
181
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md
180
182
  - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx
@@ -1838,6 +1840,9 @@ files:
1838
1840
  - app/pb_kits/playbook/pb_pb_circle_chart/docs/_description.md
1839
1841
  - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb
1840
1842
  - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx
1843
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.html.erb
1844
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.jsx
1845
+ - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.md
1841
1846
  - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb
1842
1847
  - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx
1843
1848
  - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md
@@ -2622,8 +2627,10 @@ files:
2622
2627
  - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.html.erb
2623
2628
  - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.jsx
2624
2629
  - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_min_max_time.md
2630
+ - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.html.erb
2625
2631
  - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.jsx
2626
- - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.md
2632
+ - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler_rails.md
2633
+ - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler_react.md
2627
2634
  - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.html.erb
2628
2635
  - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.jsx
2629
2636
  - app/pb_kits/playbook/pb_time_picker/docs/_time_picker_required_indicator.md