playbook_ui 16.9.0.pre.rc.2 → 16.9.0.pre.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 767e8550794164361093c1a0d6af22791b7a0a1662e680535494704ba4c08210
-  data.tar.gz: 83c41c8410774f11eb7e314e140a25a6b0f016120fa6b5fb73fe3e24af84e376
+  metadata.gz: d9aa05ce18cdb9f381d5d2c4a2e18a63d9513a3641eb081d672d6613cfdbf07b
+  data.tar.gz: 68d67cb7ac4c1af97301482014d063f795ecee5c97f8a3927788edb770e3d8b5
 SHA512:
-  metadata.gz: 8d45b541fb4afce34a9e6c14dc71dff2426a3a802e02ac56fd1923a226abbfd706e1c8ca2ad5f58a35efdc1f370f2d46852f9ee70da3aec57ceb9c1330a87348
-  data.tar.gz: 17987cc62b5d10f84cbacacd4f9759641e6fa0d362131ac373771b9e51e896ade7e5fb70846c969df926564195f5f7da9e1d8d59a1ef752667fcfd6b8bb276cf
+  metadata.gz: 100d25619305677ab8bc5ce3642bca116ae21421224300bc9de0d1deeb0225d2c694ee516e1d18c6fc5a4c7d711538d5e6092e53b4d09857800c15e7084f5096
+  data.tar.gz: 596fd4c60ea8792268c8e64c0a6c598c8e19e6533a8b82d86c41c08d293f8e6885ede170f0418d83c201e97d182104dd246eb226439e1396808d5b9768848b50

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_date_picker/date_picker.html.erb

@@ -79,42 +79,57 @@
 
   <%= javascript_tag do %>
     (function() {
+      const initQuickPickChangeListener = (input) => {
+        if (!<%= object.selection_type == "quickpick" %>) return
+        if (input.dataset.quickpickInitialized) return
+
+        input.dataset.quickpickInitialized = "true"
+        input.addEventListener("change", ({ target }) => {
+          const startDate = document.getElementById("<%= object.start_date_id %>")
+          const endDate = document.getElementById("<%= object.end_date_id %>")
+          const splittedValue = target.value.split(" to ")
+          startDate.value = splittedValue[0]
+          endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
+        })
+      }
+
       const loadDatePicker = () => {
-        const input = document.getElementById("<%= object.picker_id %>");
-        if (input && !input._flatpickr) {
-          datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+        const input = document.getElementById("<%= object.picker_id %>")
+
+        if (!input || input._flatpickr) return true
+        if (typeof window.datePickerHelper !== "function") return false
 
-          if (<%= object.selection_type == "quickpick" %>) {
-            document.getElementById("<%= object.picker_id %>").addEventListener("change", ({ target }) => {
-              const startDate = document.getElementById("<%= object.start_date_id %>")
-              const endDate = document.getElementById("<%= object.end_date_id %>")
-              const splittedValue = target.value.split(" to ")
-              startDate.value = splittedValue[0]
-              endDate.value = splittedValue[1] ? splittedValue[1] : splittedValue[0]
-            })
-          }
+        window.datePickerHelper(<%= object.date_picker_config %>, "<%= object.scroll_container %>")
+        initQuickPickChangeListener(input)
+
+        return true
+      }
+
+      let attempts = 0
+      const retryLoad = () => {
+        if (loadDatePicker()) return
+
+        if (attempts++ < 20) {
+          setTimeout(retryLoad, 100)
         }
       }
 
-      // Try to initialize immediately if DOM is ready
       if (document.readyState === "loading") {
-        window.addEventListener("DOMContentLoaded", loadDatePicker)
+        window.addEventListener("DOMContentLoaded", retryLoad)
       } else {
-        loadDatePicker()
+        retryLoad()
       }
 
       // For dynamically added content (modals, etc.), check again after a brief delay
       setTimeout(() => {
-        const input = document.getElementById("<%= object.picker_id %>");
+        const input = document.getElementById("<%= object.picker_id %>")
         if (input && !input._flatpickr) {
-          loadDatePicker();
+          retryLoad()
         }
-      }, 100);
+      }, 100)
 
       if (<%= !object.custom_event_type.empty? %>) {
-        window.addEventListener("<%= object.custom_event_type %>", () => {
-          loadDatePicker()
-        })
+        window.addEventListener("<%= object.custom_event_type %>", retryLoad)
       }
     })()
   <% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_dialog_submission.jsx

@@ -36,10 +36,10 @@ const DatePickerDialogSubmission = () => {
                 <Dialog.Body>
                     <DatePicker
                         defaultDate={dateFixed || undefined}
-                        key={`fixed-${pickerInstance}`}
+                        key={"fixed-" + pickerInstance}
                         label="Date"
                         onChange={(dateStr) => setDateFixed(dateStr || "")}
-                        pickerId={`datePickerFixed-${pickerInstance}`}
+                        pickerId={"datePickerFixed-" + pickerInstance}
                         staticPosition={false}
                     />
                 </Dialog.Body>

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_icon/docs/example.yml

@@ -8,7 +8,6 @@ examples:
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
-  - icon_fa_kit: Icon with FontAwesome Kit
   - icon_color: Icon Color
 
   react:
@@ -20,7 +19,6 @@ examples:
   - icon_border: Icon Border
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
-  - icon_fa_kit: Icon with FontAwesome Kit
   - icon_color: Icon Color
 
   swift:

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

@@ -6,5 +6,4 @@ export { default as IconPull } from './_icon_pull.jsx'
 export { default as IconBorder } from './_icon_border.jsx'
 export { default as IconSizes } from './_icon_sizes.jsx'
 export { default as IconCustom } from './_icon_custom.jsx'
-export { default as IconFaKit} from './_icon_fa_kit.jsx'
 export { default as IconColor } from './_icon_color.jsx'

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/dist/menu.yml

@@ -80,7 +80,7 @@ kits:
   - name: layout_&_positioning
     description: Scroll, sticky headers/columns, responsive layout, fullscreen modes.
     parent: advanced_table
-    kit_section: ["Sticky Header", "Sticky Header for Responsive Table", "Sticky Columns", "Sticky Columns with Sticky Header", "Responsive Tables", "Fullscreen", "Advanced Table Scrollbar None"]
+    kit_section: ["Sticky Header", "Sticky Header for Responsive Table", "Sticky Columns", "Sticky Columns with Sticky Header", "Sticky Header and Column Scroll Limitation", "Responsive Tables", "Fullscreen", "Advanced Table Scrollbar None"]
     platforms: *1
     status: stable
     icons_used: true