playbook_ui 16.8.0.pre.alpha.PLAY2965datepickerconsoleerrors16591 → 16.8.0.pre.alpha.PLAY2968timepickerrailsenhancedelementrefactor16753

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: cd2ca8297ec9a85d8dab2aecadfe8eac192a7f98f7be17f0a728b3f993f2bb5d
-  data.tar.gz: 823a12f11d4305883854e5cc5919e28178f1cb7548f23c93dfe18f299c0a49c1
+  metadata.gz: 060ae3a63fe3d1a9ec48a8e837b2bd67656bebc1aab597f577b5b04420be096f
+  data.tar.gz: 5382abec9a61fa27ba52c6c999278d12f352713a82570b9344c338324ae39de6
 SHA512:
-  metadata.gz: cb559e089d5ede598740cc35e24fa7a20085d54c829814a855fe4ecbf25e1aa0e5f8a4119a376b185e5ed818360899979a1c03e5f7dc9bc9c593d81074380627
-  data.tar.gz: f7d28f0eb0beb741c5b1053f88f1b35189e4eaa3d3cde39598c3a760cc4ad5c8dd606d302642325fd6451b53d7d6008d1542508c7b305f7b56580432f62b37fb
+  metadata.gz: 798aaeb1ed09746867bc514ebd233a24d7757ef8a6ae3dd9cec9bb776f8763b9beae16253fed175ec400e716cf23acf8973c45e3c6d8c1156115efe63c58292f
+  data.tar.gz: e9eaf46a2fc74f92bdee699e41bedcba1a3127a2c74885d64c59339263995570da59001fd3fa5a5c745d98be133be0cadb090f4cada33d9a108132a3eb32e43f

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_scroll_limitation.jsx

@@ -0,0 +1,68 @@
+import React from "react"
+import AdvancedTable from "../../pb_advanced_table/_advanced_table"
+import Title from "../../pb_title/_title"
+
+const COLUMN_COUNT = 10
+const ROW_COUNT = 40
+
+const columnDefinitions = [
+  {
+    accessor: "region",
+    label: "Region",
+    id: "region",
+    columnStyling: { minWidth: 160 },
+  },
+  ...Array.from({ length: COLUMN_COUNT }, (_, index) => ({
+    accessor: `metric${index + 1}`,
+    label: `Metric ${index + 1}`,
+    id: `metric${index + 1}`,
+    columnStyling: { minWidth: 180 },
+  })),
+]
+
+const tableData = Array.from({ length: ROW_COUNT }, (_, row) => ({
+  region: `Region ${row + 1}`,
+  ...Object.fromEntries(
+    Array.from({ length: COLUMN_COUNT }, (_, col) => [
+      `metric${col + 1}`,
+      String((row + 1) * (col + 1)),
+    ])
+  ),
+}))
+
+const tableProps = { sticky: true }
+
+const AdvancedTableStickyScrollLimitation = (props) => (
+  <div>
+    <Title
+        size={4}
+        text="Without maxHeight"
+        {...props}
+    />
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        responsive="none"
+        stickyLeftColumn={["region"]}
+        tableData={tableData}
+        tableProps={tableProps}
+        {...props}
+    />
+    <Title
+        paddingTop="sm"
+        size={4}
+        text="With maxHeight"
+        {...props}
+    />
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        maxHeight="sm"
+        responsive="none"
+        stickyLeftColumn={["region"]}
+        tableData={tableData}
+        tableProps={tableProps}
+        {...props}
+    />
+  </div>
+)
+
+export default AdvancedTableStickyScrollLimitation

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_scroll_limitation.md

@@ -0,0 +1,7 @@
+`stickyLeftColumn` adds horizontal overflow to the table wrapper. Without `maxHeight`, the page scrolls vertically while the table scrolls horizontally — two scroll containers.
+
+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.
+
+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.
+
+For a typical implementation with subrows, see [Sticky Columns with Sticky Header](#sticky-columns-with-sticky-header).

data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml

@@ -52,6 +52,7 @@ examples:
   - advanced_table_table_props_sticky_header: Sticky Header for Responsive Table
   - advanced_table_sticky_columns: Sticky Columns
   - advanced_table_sticky_columns_and_header: Sticky Columns with Sticky Header
+  - advanced_table_sticky_scroll_limitation: Sticky Header and Column Scroll Limitation
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell: Custom Components for Cells
   - advanced_table_with_custom_header: Custom Header Cell

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -27,6 +27,7 @@ export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
 export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
 export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
+export { default as AdvancedTableStickyScrollLimitation } from './_advanced_table_sticky_scroll_limitation.jsx'
 export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'
 export { default as AdvancedTableColumnBorderColor} from './_advanced_table_column_border_color.jsx'
 export { default as AdvancedTableColumnVisibility } from './_advanced_table_column_visibility.jsx'

data/app/pb_kits/playbook/pb_icon/_icon.scss

@@ -69,9 +69,10 @@ svg {
       transform: scaleX(-1) scaleY(-1);
     }
     &.svg-inline--fa {
+      box-sizing: content-box;
       height: 1em;
       overflow: visible;
-      vertical-align: -.125em
+      vertical-align: -.125em;
     }
     &.svg_inverse {
       color: #fff;

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.html.erb

@@ -0,0 +1,90 @@
+<% data = [
+  {
+    name: "EV",
+    y: 23.9,
+  },
+  {
+    name: "Hybrids",
+    y: 12.6,
+  },
+  {
+    name: "Diesel",
+    y: 37.0,
+  },
+  {
+    name: "Petrol",
+    y: 26.4,
+  },
+] %>
+
+<% total = data.sum { |point| point[:y] } %>
+<% subtitle_rows = data.map { |point| "#{point[:name]}: #{point[:y]}%" }.join("<br>") %>
+
+<% chart_options = {
+  chart: {
+    type: "pie",
+  },
+  accessibility: {
+    point: {
+      valueSuffix: "%",
+    },
+  },
+  title: {
+    text: "2023 Norway car registrations",
+    floating: true,
+    align: "center",
+    verticalAlign: "top",
+    y: 8,
+  },
+  subtitle: {
+    text: "Total<br><strong>#{total.round(1)}</strong><br><br>#{subtitle_rows}",
+    useHTML: true,
+    floating: true,
+    align: "center",
+    verticalAlign: "middle",
+    y: 8,
+    style: {
+      textAlign: "center",
+    },
+  },
+  tooltip: {
+    pointFormat: "{series.name}: <b>{point.percentage:.0f}%</b>",
+  },
+  legend: {
+    enabled: false,
+  },
+  plotOptions: {
+    series: {
+      allowPointSelect: true,
+      cursor: "pointer",
+      borderRadius: 8,
+      dataLabels: [
+        {
+          enabled: true,
+          distance: 20,
+          format: "{point.name}",
+        },
+        {
+          enabled: true,
+          distance: -15,
+          format: "{point.percentage:.0f}%",
+          style: {
+            fontSize: "0.9em",
+          },
+        },
+      ],
+      showInLegend: true,
+    },
+  },
+  series: [
+    {
+      name: "Registrations",
+      colorByPoint: true,
+      center: ["50%", "50%"],
+      innerSize: "75%",
+      data: data,
+    },
+  ],
+} %>
+
+<%= pb_rails("pb_circle_chart", props: { options: chart_options }) %>

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.jsx

@@ -0,0 +1,100 @@
+import React from "react";
+import PbCircleChart from "../_pb_circle_chart";
+
+const data = [
+  {
+    name: "EV",
+    y: 23.9,
+  },
+  {
+    name: "Hybrids",
+    y: 12.6,
+  },
+  {
+    name: "Diesel",
+    y: 37.0,
+  },
+  {
+    name: "Petrol",
+    y: 26.4,
+  },
+];
+
+const total = data.reduce((sum, point) => sum + point.y, 0);
+const subtitleRows = data.map((point) => `${point.name}: ${point.y}%`).join("<br>");
+
+const chartOptions = {
+  chart: {
+    type: "pie",
+  },
+  accessibility: {
+    point: {
+      valueSuffix: "%",
+    },
+  },
+  title: {
+    text: "2023 Norway car registrations",
+    floating: true,
+    align: "center",
+    verticalAlign: "top",
+    y: 8,
+  },
+  subtitle: {
+    text: `Total<br><strong>${total.toFixed(1)}</strong><br><br>${subtitleRows}`,
+    useHTML: true,
+    floating: true,
+    align: "center",
+    verticalAlign: "middle",
+    y: 8,
+    style: {
+      textAlign: "center",
+    },
+  },
+  tooltip: {
+    pointFormat: "{series.name}: <b>{point.percentage:.0f}%</b>",
+  },
+  legend: {
+    enabled: false,
+  },
+  plotOptions: {
+    series: {
+      allowPointSelect: true,
+      cursor: "pointer",
+      borderRadius: 8,
+      dataLabels: [
+        {
+          enabled: true,
+          distance: 20,
+          format: "{point.name}",
+        },
+        {
+          enabled: true,
+          distance: -15,
+          format: "{point.percentage:.0f}%",
+          style: {
+            fontSize: "0.9em",
+          },
+        },
+      ],
+      showInLegend: true,
+    },
+  },
+  series: [
+    {
+      name: "Registrations",
+      colorByPoint: true,
+      center: ["50%", "50%"],
+      innerSize: "75%",
+      data,
+    },
+  ],
+};
+
+const PbCircleChartCenteredData = (props) => (
+  <PbCircleChart
+      options={chartOptions}
+      {...props}
+  />
+);
+
+export default PbCircleChartCenteredData;

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.md

@@ -0,0 +1 @@
+This example shows how to achieve centered data. This data will remain in the center of all screen sizes.

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx

@@ -30,4 +30,4 @@ const PbCircleChartDefault = (props) => (
   </div>
 );
 
-export default PbCircleChartDefault;
+export default PbCircleChartDefault;

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml

@@ -11,6 +11,7 @@ examples:
   - pb_circle_chart_with_title: With Title
   - pb_circle_chart_inner_sizes: Inner Circle Size Options
   - pb_circle_chart_custom_tooltip: Tooltip Customization
+  - pb_circle_chart_centered_data: Centered Data
 
   
   react:
@@ -25,5 +26,6 @@ examples:
   - pb_circle_chart_with_title: With Title
   - pb_circle_chart_inner_sizes: Inner Circle Size Options
   - pb_circle_chart_custom_tooltip: Tooltip Customization
+  - pb_circle_chart_centered_data: Centered Data
   
   

data/app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js

@@ -8,4 +8,5 @@ export { default as PbCircleChartDataWithLegend } from './_pb_circle_chart_data_
 export { default as PbCircleChartDataLegendPosition } from './_pb_circle_chart_data_legend_position.jsx'
 export { default as PbCircleChartWithTitle } from './_pb_circle_chart_with_title.jsx'
 export { default as PbCircleChartInnerSizes } from './_pb_circle_chart_inner_sizes.jsx'
-export { default as PbCircleChartCustomTooltip } from './_pb_circle_chart_custom_tooltip.jsx'
+export { default as PbCircleChartCustomTooltip } from './_pb_circle_chart_custom_tooltip.jsx'
+export { default as PbCircleChartCenteredData } from './_pb_circle_chart_centered_data.jsx'

data/app/pb_kits/playbook/pb_table/docs/_table_with_filter_variant_external_filter_rails.md

@@ -36,4 +36,4 @@ When `filter` is present, `filter_content` and `filter_props` are ignored.
 <% end %>
 ```
 
-For Nitro apps that use a shared search/filter pattern, reference the example on Alpha for implementation details.
+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.

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -100,6 +100,29 @@
         color: $input_text_disabled_dark;
       }
     }
+
+    .text_input_wrapper_add_on {
+      &:has(input:disabled),
+      &:has(.text_input:disabled) {
+        .add-on-card,
+        .add-on-card-dark {
+          border-color: $input_border_disabled_dark;
+          background-color: $input_background_disabled_dark;
+        }
+
+        .add-on-icon {
+          color: $input_text_disabled_dark;
+        }
+
+        .text_input:focus ~ .add-on-card-dark,
+        input:focus ~ .add-on-card-dark {
+          background-color: $input_background_disabled_dark;
+          border-color: $input_border_disabled_dark;
+          border-width: 1px;
+        }
+      }
+    }
+
     &.error {
       .text_input_wrapper {
         // The `:not` here prevents error styling from affecting the country search input in the Phone Number Input Kit.
@@ -192,6 +215,20 @@
       }
     }
   }
+  &:not(.dark) .text_input_wrapper_add_on {
+    &:has(input:disabled),
+    &:has(.text_input:disabled) {
+      .add-on-card {
+        border-color: $input_border_disabled;
+        background-color: $input_background_disabled;
+      }
+
+      .add-on-icon {
+        color: $input_text_disabled;
+      }
+    }
+  }
+
   &.inline {
     .text_input_wrapper input::placeholder,
     .text_input_wrapper .text_input .placeholder {

data/app/pb_kits/playbook/pb_time_picker/_time_picker.scss

@@ -70,15 +70,22 @@
     }
   }
 
-  .text_input_wrapper_add_on .add-on-right .text_input {
+  .text_input_wrapper_add_on .add-on-right .text_input,
+  .text_input_wrapper_add_on input.text_input {
     cursor: pointer;
   }
 
   &.error {
-    .text_input_wrapper_add_on .add-on-card {
+    .text_input_wrapper_add_on .add-on-right .text_input,
+    .text_input_wrapper_add_on input.text_input {
       border-color: $input_border_error;
     }
 
+    .text_input_wrapper_add_on .add-on-right .add-on-card {
+      border: 1px solid $input_border_error;
+      border-left: 0;
+    }
+
     &:focus,
     &:focus-within {
       .text_input_wrapper_add_on .text_input,
@@ -89,6 +96,18 @@
     }
   }
 
+  &.dark.error {
+    .text_input_wrapper_add_on .add-on-right .text_input,
+    .text_input_wrapper_add_on input.text_input {
+      border-color: $input_border_error_dark;
+    }
+
+    .text_input_wrapper_add_on .add-on-right .add-on-card {
+      border: 1px solid $input_border_error_dark;
+      border-left: 0;
+    }
+  }
+
   &.disabled {
     border-color: $input_border_disabled;
     > label {
@@ -266,7 +285,7 @@
           color: $input_border_error;
         }
       }
-      .pb_caption_kit_xs {
+      .pb_time_picker_timezone_text {
         clear: both;
         display: block;
         width: 100%;
@@ -337,6 +356,10 @@
           justify-content: center;
           font-weight: $bolder;
           color: $input_text_active;
+
+          .pb_body_kit {
+            font-weight: $bolder;
+          }
         }
 
         .disabled_meridiem > label,

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("flex", props: { margin_bottom: "sm", orientation: "column" }) do %>
+  <%= pb_rails("body", props: { id: "time-picker-on-change-output", text: "" }) %>
+  <%= pb_rails("body", props: { id: "time-picker-on-close-output", text: "" }) %>
+<% end %>
+
+<%= pb_rails("time_picker", props: { id: "time-picker-on-handler" }) %>
+
+<script>
+  (function() {
+    var picker = document.getElementById("time-picker-on-handler");
+    var changeOutput = document.getElementById("time-picker-on-change-output");
+    var closeOutput = document.getElementById("time-picker-on-close-output");
+
+    if (!picker) return;
+
+    picker.addEventListener("pb-time-picker-change", function(event) {
+      changeOutput.textContent = "onChange: " + (event.detail.time || "");
+    });
+
+    picker.addEventListener("pb-time-picker-close", function(event) {
+      closeOutput.textContent = "onClose: " + (event.detail.time || "");
+    });
+  })();
+</script>

data/app/pb_kits/playbook/pb_time_picker/docs/_time_picker_on_handler_rails.md

@@ -0,0 +1,6 @@
+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`).
+
+| Event | When it fires | `event.detail` |
+| --- | --- | --- |
+| `pb-time-picker-change` | Hour, minute, or period changes while the dropdown is open | `{ time: string }` — 24-hour `HH:MM` value, or `""` when cleared |
+| `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

@@ -11,6 +11,7 @@ examples:
   - time_picker_disabled: Disabled
   - time_picker_required_indicator: Required Indicator
   - time_picker_input_options: Input Options
+  - time_picker_on_handler: onChange & onClose Handlers
   
   
   react: