playbook_ui 16.7.0.pre.alpha.play295616404 → 16.7.0.pre.alpha.tablewidths16407

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2a3ea779e1668ef98a029660f1c4160ad2767ccaa2c0755c217065376a77331a
-  data.tar.gz: 8712a84644138ca7cdb591be50afd392117c67c035cfcab5f27470a195fc91a4
+  metadata.gz: 8da495f79107327990243768d12d0c686b02cd3c9139be2021b1a2502ac1091b
+  data.tar.gz: b87d04b9c001d89e1f25889e19ec812d5e882eb04b06df284bcb3feb963567ce
 SHA512:
-  metadata.gz: 0a6a14cac81c31a48708557878f64531909a6c813d8a410a50d9dc465d250fc4b1274bdeea3770309a5a19ef99b5d04bad0bcd2b336f421e6c780cf313cd513d
-  data.tar.gz: ffcc469fd3ae5913bcf8da44b9856925ea1b72f56002cd868fc010380f5801f1a2c32e9c8aac1b28972a2cdfe8b375a1a59bf103870051f7a5182c881eb70e9e
+  metadata.gz: 6b65bd11a250d2eb7de7f99b7e9c1209ef8d425244886afb6dfc744866172989ba223a981d78b92621f880c46fdb2ee3a3167776204754a430a847f1198ea71f
+  data.tar.gz: 91f38760a01e16eaaf16db868791168edbe57581cd05057e443ac3eeaffef513ebbc37451c716d65bb0591bfa0ebd022dc019c88d9cc15f62c74f5e5a78dfb25

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -5,6 +5,7 @@ import { flexRender, Row, Cell } from "@tanstack/react-table"
 import { GenericObject } from "../../types"
 import { isChrome } from "../Utilities/BrowserCheck"
 import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
+import { playbookColumnLayoutStylesFromMeta } from "../Utilities/ColumnLayoutHelper"
 import { getRowColorClass, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
@@ -94,6 +95,7 @@ const TableCellRenderer = ({
               )}
               key={`${cell.id}-data`}
               style={{
+                ...playbookColumnLayoutStylesFromMeta(column.columnDef),
                 left: isPinnedLeft
                   ? i === 1 // Accounting for set min-width for first column
                     ? '180px'

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -16,6 +16,7 @@ import { SortIconButton } from "./SortIconButton"
 import { ToggleIconButton } from "./ToggleIconButton"
 import { displayIcon } from "../Utilities/IconHelpers"
 import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
+import { playbookColumnLayoutStylesFromMeta } from "../Utilities/ColumnLayoutHelper"
 import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers"
 
 import { isChrome } from "../Utilities/BrowserCheck"
@@ -198,6 +199,7 @@ const isToggleExpansionEnabled =
         id={cellId}
         key={`${header?.id}-header`}
         style={{
+          ...playbookColumnLayoutStylesFromMeta(header?.column?.columnDef),
           backgroundColor: headerBackgroundColor,
           color: headerFontColor,
           left: isPinnedLeft

data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx

@@ -19,6 +19,7 @@ import { LoadingCell } from "../Components/LoadingCell"
 import { renderCollapsibleTrail } from "../Components/CollapsibleTrail"
 
 import AdvancedTableContext from "../Context/AdvancedTableContext"
+import { playbookColumnLayoutStylesFromMeta } from "../Utilities/ColumnLayoutHelper"
 
 type VirtualizedTableViewProps = {
   collapsibleTrail?: boolean
@@ -224,7 +225,10 @@ export const VirtualizedTableView = ({
                         isLastCell && 'last-cell',
                       )}
                       key={`${cell.id}-data`}
-                      style={{ width: cellWidth }}
+                      style={{
+                        ...playbookColumnLayoutStylesFromMeta(cell.column.columnDef),
+                        width: cellWidth,
+                      }}
                   >
                     {collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
                     <span id={`${cell.id}-span`}>

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableState.ts

@@ -12,6 +12,10 @@ import {
 import { GenericObject } from "../../types";
 import { createColumnHelper } from "@tanstack/react-table";
 import { createCellFunction } from "../Utilities/CellRendererUtils";
+import {
+  buildPlaybookColumnLayoutStyles,
+  buildTanStackSizingFromColumn,
+} from "../Utilities/ColumnLayoutHelper";
 import { getParentOnlySortedRowModel } from "../Utilities/RowModelUtils";
 
 interface UseTableStateProps {
@@ -105,11 +109,31 @@ export function useTableState({
           columns: buildColumns(column.columns, false),
         };
       }
+      const tanStackSizing = buildTanStackSizingFromColumn(column);
+      const layoutStyles = buildPlaybookColumnLayoutStyles(column, tanStackSizing);
+      const userMeta =
+        column.meta &&
+        typeof column.meta === "object" &&
+        !Array.isArray(column.meta)
+          ? column.meta
+          : {};
+      const hasLayoutStyles =
+        layoutStyles.width !== undefined ||
+        layoutStyles.minWidth !== undefined ||
+        layoutStyles.maxWidth !== undefined;
+
       // Define the base column structure
       const columnStructure = {
         ...columnHelper.accessor(column.accessor, {
           header: column.header ?? column.label ?? "",
           enableSorting: isFirstColumn || column.enableSort === true,
+          ...tanStackSizing,
+          meta: {
+            ...userMeta,
+            ...(hasLayoutStyles
+              ? { playbookColumnLayoutStyles: layoutStyles }
+              : {}),
+          },
         }),
       };
 

data/app/pb_kits/playbook/pb_advanced_table/Utilities/ColumnLayoutHelper.ts

@@ -0,0 +1,123 @@
+import type { CSSProperties } from "react"
+
+import { GenericObject } from "../../types"
+
+/**
+ * Converts a Playbook column width value to a CSS length string.
+ * Numbers are treated as pixels; strings are passed through (e.g. `"12rem"`, `"200px"`).
+ */
+export function cssLength(
+  value: number | string | undefined | null
+): string | undefined {
+  if (value === undefined || value === null || value === "") return undefined
+  if (typeof value === "number" && Number.isFinite(value)) return `${value}px`
+  return String(value)
+}
+
+const columnStylingKeys = (column: GenericObject) =>
+  (column.columnStyling || column.column_styling || {}) as GenericObject
+
+function readStylingLength(
+  styling: GenericObject,
+  camel: string,
+  snake?: string
+): string | number | undefined {
+  if (snake) return styling[camel] ?? styling[snake]
+  return styling[camel] as string | number | undefined
+}
+
+/**
+ * TanStack Table v8 `ColumnDef` sizing fields we forward from each `columnDefinitions` entry.
+ * See AdvancedTable kit docs for precedence with `columnStyling` width keys.
+ */
+export const PLAYBOOK_FORWARDED_COLUMN_DEF_SIZING_KEYS = [
+  "size",
+  "minSize",
+  "maxSize",
+] as const
+
+export type PlaybookForwardedColumnSizing = Partial<
+  Record<(typeof PLAYBOOK_FORWARDED_COLUMN_DEF_SIZING_KEYS)[number], number>
+>
+
+export function buildTanStackSizingFromColumn(
+  column: GenericObject
+): PlaybookForwardedColumnSizing {
+  const out: PlaybookForwardedColumnSizing = {}
+  PLAYBOOK_FORWARDED_COLUMN_DEF_SIZING_KEYS.forEach((key) => {
+    const v = column[key]
+    if (typeof v === "number" && Number.isFinite(v)) out[key] = v
+  })
+
+  const styling = columnStylingKeys(column)
+
+  if (out.size === undefined && readStylingLength(styling, "width") !== undefined) {
+    const w = readStylingLength(styling, "width")
+    if (typeof w === "number" && Number.isFinite(w)) out.size = w
+  }
+  if (out.minSize === undefined && readStylingLength(styling, "minWidth", "min_width") !== undefined) {
+    const w = readStylingLength(styling, "minWidth", "min_width")
+    if (typeof w === "number" && Number.isFinite(w)) out.minSize = w
+  }
+  if (out.maxSize === undefined && readStylingLength(styling, "maxWidth", "max_width") !== undefined) {
+    const w = readStylingLength(styling, "maxWidth", "max_width")
+    if (typeof w === "number" && Number.isFinite(w)) out.maxSize = w
+  }
+
+  return out
+}
+
+/**
+ * Inline width styles for `<th>` / `<td>` so `table-layout: fixed` tables keep stable
+ * columns when row content changes (e.g. expand/collapse). Values mirror TanStack sizing
+ * and/or `columnStyling` width keys; string values in `columnStyling` win over numeric
+ * TanStack fields when both describe the same axis.
+ */
+export function buildPlaybookColumnLayoutStyles(
+  column: GenericObject,
+  tanStackSizing: PlaybookForwardedColumnSizing
+): CSSProperties {
+  const styling = columnStylingKeys(column)
+  const styles: CSSProperties = {}
+
+  const widthFromStyling = cssLength(
+    readStylingLength(styling, "width") as string | number | undefined
+  )
+  const minFromStyling = cssLength(
+    readStylingLength(styling, "minWidth", "min_width") as string | number | undefined
+  )
+  const maxFromStyling = cssLength(
+    readStylingLength(styling, "maxWidth", "max_width") as string | number | undefined
+  )
+
+  const widthFromTanStack =
+    tanStackSizing.size !== undefined
+      ? cssLength(tanStackSizing.size)
+      : undefined
+  const minFromTanStack =
+    tanStackSizing.minSize !== undefined
+      ? cssLength(tanStackSizing.minSize)
+      : undefined
+  const maxFromTanStack =
+    tanStackSizing.maxSize !== undefined
+      ? cssLength(tanStackSizing.maxSize)
+      : undefined
+
+  if (widthFromStyling !== undefined) styles.width = widthFromStyling
+  else if (widthFromTanStack !== undefined) styles.width = widthFromTanStack
+
+  if (minFromStyling !== undefined) styles.minWidth = minFromStyling
+  else if (minFromTanStack !== undefined) styles.minWidth = minFromTanStack
+
+  if (maxFromStyling !== undefined) styles.maxWidth = maxFromStyling
+  else if (maxFromTanStack !== undefined) styles.maxWidth = maxFromTanStack
+
+  return styles
+}
+
+export function playbookColumnLayoutStylesFromMeta(
+  columnDef: GenericObject | undefined
+): CSSProperties {
+  const meta = columnDef?.meta as GenericObject | undefined
+  return (meta?.playbookColumnLayoutStyles || {}) as CSSProperties
+}

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -774,6 +774,82 @@ test("columnStyling.cellPadding sets cell padding", () => {
   expect(firstEnrollmentCell).toHaveClass('p_none')
 });
 
+test("columnStyling minWidth, width, and maxWidth apply to header and body cells", () => {
+  const styledColumnDefs = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      columnStyling: { minWidth: 240, width: 260, maxWidth: 400 },
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+  ];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={styledColumnDefs}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const yearHeader = screen.getByText("Year").closest("th");
+  expect(yearHeader).toHaveStyle({ minWidth: "240px", width: "260px", maxWidth: "400px" });
+
+  const yearCell = screen.getAllByText("2021")[0].closest("td");
+  expect(yearCell).toHaveStyle({ minWidth: "240px", width: "260px", maxWidth: "400px" });
+});
+
+test("columnDefinitions size, minSize, and maxSize apply layout styles", () => {
+  const styledColumnDefs = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+      size: 180,
+      minSize: 160,
+      maxSize: 320,
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+  ];
+
+  render(
+    <AdvancedTable
+        columnDefinitions={styledColumnDefs}
+        data={{ testid: testId }}
+        tableData={MOCK_DATA}
+    />
+  );
+
+  const enrollmentsHeader = screen.getByText("New Enrollments").closest("th");
+  expect(enrollmentsHeader).toHaveStyle({
+    width: "180px",
+    minWidth: "160px",
+    maxWidth: "320px",
+  });
+
+  const enrollmentsCell = screen.getAllByText("20")[0].closest("td");
+  expect(enrollmentsCell).toHaveStyle({
+    width: "180px",
+    minWidth: "160px",
+    maxWidth: "320px",
+  });
+});
+
 test("columnStyling.fontColor sets cell font color", () => {
   const styledColumnDefs = [
     {

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

@@ -10,6 +10,8 @@ const AdvancedTableColumnStyling = (props) => {
       accessor: "year",
       label: "Year",
       cellAccessors: ["quarter", "month", "day"],
+      // Keeps the hierarchy column narrow and stable when rows expand (see kit docs).
+      columnStyling: { minWidth: 108, width: 124, maxWidth: 168 },
     },
     {
       accessor: "newEnrollments",

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

@@ -6,4 +6,14 @@ The `columnStyling` prop is an optional item that can be used within `columnDefi
 
 3) `fontColor`: This will allow you to control the font color for a given column.
 
+4) **Column width (layout stability)** — optional keys on `columnStyling` (numbers are treated as **pixels**; you may also use CSS length strings such as `"12rem"` or `"200px"`):
+
+- `minWidth`: minimum width for the column’s header and body cells (helps prevent horizontal “jump” when row content or expansion depth changes on tables using fixed layout).
+- `width`: preferred column width.
+- `maxWidth`: maximum column width.
+
+The live example below narrows the **Year** column (`minWidth` / `width` / `maxWidth`) so the first column stays compact while leaving room for expand and sort controls.
+
+The same sizing can be expressed with TanStack `ColumnDef` fields on each column definition object (merged into the underlying table model): `size` (width), `minSize`, and `maxSize` (numbers, pixels). If both are present for the same axis, **`columnStyling` string values take precedence**; otherwise `columnStyling` numeric/string values override TanStack numbers when only one source sets that axis. **Grouped columns:** apply width controls on **leaf** column definitions (the columns that have an `accessor`).
+
 `columnStyling` can be used within the columnDefinition of all the columns or some of them, as shown. Each column has its own individual control in this way. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.json

@@ -313,7 +313,7 @@
     },
     "column_styling_info": {
       "presetName": "Column Styling",
-      "message": "This sample uses columnStyling on column definitions. You can style headers and cells for the whole table or per column.",
+      "message": "This sample uses columnStyling on column definitions. The Year column uses minWidth, width, and maxWidth for a compact, stable first column; other columns show background colors on headers and cells.",
       "type": "info"
     }
   },
@@ -2628,7 +2628,12 @@
               "quarter",
               "month",
               "day"
-            ]
+            ],
+            "columnStyling": {
+              "minWidth": 108,
+              "width": 124,
+              "maxWidth": 168
+            }
           },
           {
             "accessor": "newEnrollments",

data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.overrides.json

@@ -371,7 +371,7 @@
     },
     "column_styling_info": {
       "presetName": "Column Styling",
-      "message": "This sample uses columnStyling on column definitions. You can style headers and cells for the whole table or per column.",
+      "message": "This sample uses columnStyling on column definitions. The Year column uses minWidth, width, and maxWidth for a compact, stable first column; other columns show background colors on headers and cells.",
       "type": "info"
     }
   }

data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_column_definitions_styling.json

@@ -2,7 +2,12 @@
   {
     "accessor": "year",
     "label": "Year",
-    "cellAccessors": ["quarter", "month", "day"]
+    "cellAccessors": ["quarter", "month", "day"],
+    "columnStyling": {
+      "minWidth": 108,
+      "width": 124,
+      "maxWidth": 168
+    }
   },
   {
     "accessor": "newEnrollments",

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

@@ -1,4 +1,4 @@
-import React, { ReactSVGElement, useEffect } from 'react'
+import React, { ReactSVGElement } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
@@ -116,44 +116,6 @@ const sizeMap = {
 declare global {
   // eslint-disable-next-line no-var
   var PB_ICONS: {[key: string]: React.FunctionComponent<any>}
-  interface Window {
-    PB_ICON_FA_FALLBACK_DEBUG?: boolean
-    PB_ICON_FA_FALLBACKS?: {
-      icons: { [key: string]: number },
-      entries: Array<{ icon: string, fontStyle: string }>
-    }
-  }
-}
-
-const isFaFallbackDebugEnabled = (): boolean => {
-  if (typeof window !== 'undefined' && window.PB_ICON_FA_FALLBACK_DEBUG) return true
-  if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') return true
-
-  return false
-}
-
-const faFallbackDataProps = (icon: string) => (
-  isFaFallbackDebugEnabled()
-    ? {
-      'data-pb-icon-fa-fallback': 'true',
-      'data-pb-icon-fa-fallback-icon': icon,
-    }
-    : {}
-)
-
-const recordFaFallback = (icon: string, fontStyle: string): void => {
-  if (!isFaFallbackDebugEnabled() || typeof window === 'undefined') return
-
-  window.PB_ICON_FA_FALLBACKS ||= { icons: {}, entries: [] }
-  window.PB_ICON_FA_FALLBACKS.icons[icon] = (window.PB_ICON_FA_FALLBACKS.icons[icon] || 0) + 1
-  window.PB_ICON_FA_FALLBACKS.entries.push({ icon, fontStyle })
-  window.dispatchEvent(new CustomEvent('pb:icon-fa-fallback', {
-    detail: {
-      icon,
-      fontStyle,
-      count: window.PB_ICON_FA_FALLBACKS.icons[icon],
-    },
-  }))
 }
 
 const Icon = (props: IconProps) => {
@@ -206,11 +168,6 @@ const Icon = (props: IconProps) => {
   }
 
   const isFA = !iconElement && !customIcon 
-  const iconName = icon as string
-
-  useEffect(() => {
-    if (isFA) recordFaFallback(iconName, fontStyle)
-  }, [fontStyle, iconName, isFA])
 
   let classes = classnames(
     (!iconElement && !customIcon) ? 'pb_icon_kit' : '',
@@ -306,7 +263,6 @@ const Icon = (props: IconProps) => {
               {...ariaProps}
               {...dataProps}
               {...htmlProps}
-              {...faFallbackDataProps(iconName)}
               className={classes}
               id={id}
           />

data/app/pb_kits/playbook/pb_icon/icon.html.erb

@@ -5,7 +5,7 @@
     <%= object.icon.html_safe %>
   </span>
 <% else %>
-  <%= pb_content_tag(:i, data: object.data.merge(object.fa_fallback_data)) do %>
+  <%= pb_content_tag(:i) do %>
   <% end %>
   <%= content_tag(:span, nil,
       aria: { label: "#{object.icon} icon" }.merge(object.aria),

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -48,21 +48,6 @@ module Playbook
         emoji_regex.match?(icon)
       end
 
-      def fa_fallback_debug_enabled?
-        return false if Rails.env.production? && ENV["PB_ICON_FA_FALLBACK_DEBUG"] != "true"
-
-        Rails.env.development? || Rails.env.test? || ENV["PB_ICON_FA_FALLBACK_DEBUG"] == "true"
-      end
-
-      def fa_fallback_data
-        return {} unless fa_fallback_debug_enabled?
-
-        {
-          pb_icon_fa_fallback: true,
-          pb_icon_fa_fallback_icon: icon,
-        }
-      end
-
       def classname
         generate_classname(
           "pb_icon_kit",

data/app/pb_kits/playbook/pb_icon/icon.test.js

@@ -6,11 +6,6 @@ import Icon from './_icon'
 const testId = "icon-kit"
 
 describe("Icon Kit", () => {
-    beforeEach(() => {
-        delete window.PB_ICON_FA_FALLBACKS
-        delete window.PB_ICON_FA_FALLBACK_DEBUG
-    })
-
     test("renders Icon classname", () => {
         render(
             <Icon
@@ -170,50 +165,4 @@ describe("Icon Kit", () => {
         expect(kit).toHaveClass("color_primary")
     })
 
-    test("marks Font Awesome fallback icons for runtime auditing", () => {
-        render(
-            <Icon
-                data={{ testid: testId }}
-                icon="not-a-playbook-icon"
-            />
-        )
-
-        const kit = screen.getByTestId(testId)
-        expect(kit).toHaveAttribute("data-pb-icon-fa-fallback", "true")
-        expect(kit).toHaveAttribute("data-pb-icon-fa-fallback-icon", "not-a-playbook-icon")
-        expect(window.PB_ICON_FA_FALLBACKS.icons["not-a-playbook-icon"]).toEqual(1)
-        expect(window.PB_ICON_FA_FALLBACKS.entries).toContainEqual({
-            icon: "not-a-playbook-icon",
-            fontStyle: "far",
-        })
-    })
-
-    test("groups duplicate Font Awesome fallback icons in the runtime collection", () => {
-        render(
-            <>
-                <Icon icon="repeated-fallback-icon" />
-                <Icon icon="repeated-fallback-icon" />
-            </>
-        )
-
-        expect(window.PB_ICON_FA_FALLBACKS.icons["repeated-fallback-icon"]).toEqual(2)
-    })
-
-    test("emits a Font Awesome fallback event with the icon name and count", () => {
-        const fallbackListener = jest.fn()
-        window.addEventListener("pb:icon-fa-fallback", fallbackListener)
-
-        render(<Icon icon="event-fallback-icon" />)
-
-        expect(fallbackListener).toHaveBeenCalledWith(expect.objectContaining({
-            detail: {
-                icon: "event-fallback-icon",
-                fontStyle: "far",
-                count: 1,
-            },
-        }))
-
-        window.removeEventListener("pb:icon-fa-fallback", fallbackListener)
-    })
-
-})
+})