playbook_ui_docs 16.9.0.pre.rc.1 → 16.9.0.pre.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fcfc8d92b43de33811bf00bfcd594b41538ee0e8297e3b757b4bbac66e4e1da0
-  data.tar.gz: 1e445fc8b0b1c1feecb2316fa2a00eca4a0bfaa37e353f23bb6b2fd5985b6126
+  metadata.gz: 0c4926f8f92b152b64e4d26cd5a503beb4e1b6f06652b791c26a9c58df77f361
+  data.tar.gz: 44ac225e3eddc055c4a287f7bd7ad7ce7f8602cb312e83d291f444a5fe8d6fce
 SHA512:
-  metadata.gz: 56d58a1ccc17e92bc87774063673f18576cc88b7928d16f8aa306b223d6367991f81a573b32e97fb5594b304680fcb885685298efbbdc17f13b92c2e14572477
-  data.tar.gz: d474af0ef0220a4e061fb461df0e31041118cc22d95ef587e87510521f3dc1b7927fa70087528b0b95bb9bd314a895ab044b162753e7df3fa3af4ce12f7ace94
+  metadata.gz: 4ee7242da1614707a9cf79bd49a872f0ce613d65282138c1ae357bee38b660b20bbe4af2a427317c65f130fa52c5d26813584e9bd1aed57f96ddd58e50de47fa
+  data.tar.gz: 83e536093e3cc266eed5c1252d325cdc61bd488d5bf5743e7372296acc5e1390132639555b6f28850be80daab7336f8bd8dffd5f57609308ac55ab00c2aa36b6

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

@@ -10,6 +10,7 @@ const AdvancedTableColumnStyling = (props) => {
       accessor: "year",
       label: "Year",
       cellAccessors: ["quarter", "month", "day"],
+      columnStyling: { width: 124 },
     },
     {
       accessor: "newEnrollments",

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

@@ -6,4 +6,10 @@ 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: optional keys on `columnStyling` are `minWidth`, `width`, and `maxWidth` (numbers = pixels; CSS strings allowed). This example sets `width` on Year for a fixed hierarchy column (see the width doc for `minWidth` and bands).
+
+Fixed width: pass `width` only (or TanStack `size` only) and Playbook sets min and max to the same value automatically — you do not need all three for an exact width.
+
+See [Column Styling: Width](https://playbook.powerapp.cloud/kits/advanced_table/react#column-styling-width) for the full guide (Playbook ↔ TanStack mapping, floor-only vs bands, and when to use one vs three values).
+
 `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/_advanced_table_column_styling_width.jsx

@@ -0,0 +1,57 @@
+import React from "react"
+import AdvancedTable from "../_advanced_table"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+/**
+ * Kit doc: compares fixed width, floor-only, TanStack band, and min/preferred/max band.
+ */
+const AdvancedTableColumnStylingWidth = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year (fixed)",
+      cellAccessors: ["quarter", "month", "day"],
+      // width alone locks min + max to the same value (128px).
+      columnStyling: { width: 128 },
+    },
+    {
+      accessor: "newEnrollments",
+      label: "Enrollments (floor)",
+      columnStyling: { minWidth: 160 },
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Meetings (TanStack band)",
+      size: 200,
+      minSize: 160,
+      maxSize: 240,
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance (min / pref / max)",
+      columnStyling: { minWidth: 108, width: 124, maxWidth: 168 },
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Completion %",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated",
+    },
+  ]
+
+  return (
+    <AdvancedTable
+        columnDefinitions={columnDefinitions}
+        tableData={MOCK_DATA}
+        {...props}
+    />
+  )
+}
+
+export default AdvancedTableColumnStylingWidth

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

@@ -0,0 +1,66 @@
+AdvancedTable column width is controlled in two equivalent places on each leaf `columnDefinitions` entry. Playbook maps them to inline styles on header and body cells (and forwards numeric values into TanStack Table’s column model).
+
+1) Playbook `columnStyling` and TanStack `ColumnDef` use the same three ideas:
+
+- Preferred / target width: `columnStyling` `width` maps to TanStack `size` on the same column object.
+- Minimum width (floor): `columnStyling` `minWidth` maps to TanStack `minSize`.
+- Maximum width (ceiling): `columnStyling` `maxWidth` maps to TanStack `maxSize`.
+
+Numbers are pixels. You can also pass CSS length strings on `columnStyling` (e.g. `"12rem"`, `"200px"`). TanStack fields accept numbers only.
+
+If both APIs set the same axis, `columnStyling` wins for that axis when Playbook builds cell styles.
+
+2) Fixed width: set `width` only
+
+If you pass only `width` (or only `size`) and do not set `minWidth` / `maxWidth` (or `minSize` / `maxSize`), Playbook treats that as a fixed column: it sets all three to the same value under the hood so you do not have to repeat yourself.
+
+```jsx
+columnStyling: { width: 128 }
+// Applied as width, minWidth, and maxWidth: 128px
+```
+
+```jsx
+size: 200
+// Forwarded as size, minSize, and maxSize: 200
+```
+
+Use this when the column should stay one width (e.g. a hierarchy column with expand controls).
+
+3) Floor only: `minWidth` / `minSize`
+
+Set only a minimum when the column may grow with the table or content but must not shrink below a baseline (common fix for horizontal “jump” when rows expand):
+
+```jsx
+columnStyling: { minWidth: 160 }
+```
+
+4) Flexible band: min + preferred + max
+
+Set two or three values when you want a range. CSS uses preferred `width` clamped between `minWidth` and `maxWidth`:
+
+- `minWidth`: won’t shrink below this.
+- `width`: preferred size when space allows.
+- `maxWidth`: won’t grow above this.
+
+Example from the table below (Attendance): `minWidth: 108`, `width: 124`, `maxWidth: 168` → preferred 124px, allowed between 108 and 168.
+
+You only need all three when you want that band. If min and max are omitted, `width` alone is enough for a fixed column.
+
+5) TanStack band without `columnStyling`
+
+The Meetings column uses only TanStack fields:
+
+```jsx
+{ accessor: "scheduledMeetings", size: 200, minSize: 160, maxSize: 240 }
+```
+
+Playbook applies the same min / preferred / max idea to cell styles. Setting only `size: 200` would lock all three to 200, same as `width: 200` in `columnStyling`.
+
+6) What the example table shows
+
+- Year (fixed): `columnStyling: { width: 128 }` — locked to 128px.
+- Enrollments (floor): `columnStyling: { minWidth: 160 }` — at least 160px; can grow.
+- Meetings (TanStack band): `size` / `minSize` / `maxSize` — preferred 200px, between 160–240.
+- Attendance (min / pref / max): all three in `columnStyling` — preferred 124px, between 108–168.
+
+Grouped columns: put width options on leaf definitions (columns with an `accessor`), not on parent group headers.

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/_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. Year uses width for a fixed hierarchy column; other columns show background colors. See the Column Styling Width doc for minWidth and min/pref/max bands.",
       "type": "info"
     }
   },
@@ -2628,7 +2628,10 @@
               "quarter",
               "month",
               "day"
-            ]
+            ],
+            "columnStyling": {
+              "width": 124
+            }
           },
           {
             "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. Year uses width for a fixed hierarchy column; other columns show background colors. See the Column Styling Width doc for minWidth and min/pref/max bands.",
       "type": "info"
     }
   }

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

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

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
@@ -80,6 +81,7 @@ examples:
   - advanced_table_row_styling: Row Styling
   - advanced_table_padding_control_per_row: Padding Control using Row Styling
   - advanced_table_column_styling: Column Styling
+  - advanced_table_column_styling_width: Column Styling Width
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
   - advanced_table_column_styling_background: Column Styling Background Color
   - advanced_table_column_styling_background_custom: Column Styling Background Color (Custom)

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'
@@ -37,6 +38,7 @@ export { default as AdvancedTablePinnedRows } from './_advanced_table_pinned_row
 export { default as AdvancedTableScrollbarNone} from './_advanced_table_scrollbar_none.jsx'
 export { default as AdvancedTableRowStyling } from './_advanced_table_row_styling.jsx'
 export { default as AdvancedTableColumnStyling } from './_advanced_table_column_styling.jsx'
+export { default as AdvancedTableColumnStylingWidth } from './_advanced_table_column_styling_width.jsx'
 export { default as AdvancedTableColumnStylingColumnHeaders } from './_advanced_table_column_styling_column_headers.jsx'
 export { default as AdvancedTableInfiniteScroll} from './_advanced_table_infinite_scroll.jsx'
 export {default as AdvancedTableWithCustomHeader} from './_advanced_table_with_custom_header.jsx'

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_draggable/docs/_draggable_with_cards_rails.md

@@ -5,3 +5,5 @@ Use the `draggable` kit and manage state as shown.
 `draggable/draggable_container` kit creates the container within which the cards can be dragged and dropped.
 
 The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggable_item` and `drag_id` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `drag_handle` is also available to show the drag handle icon.
+
+On touch devices, drag from the grip handle (no long press). Swiping the card body scrolls as usual. Keep `drag_handle` enabled on mobile. Desktop mouse drag is unchanged.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_react.md

@@ -6,4 +6,5 @@ Use `DraggableProvider` and manage state as shown.
 
 The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggableItem` and `dragId` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `dragHandle` is also available to show the drag handle icon.
 
+On touch devices, drag from the grip handle (no long press). Swiping the card body scrolls as usual. Keep `dragHandle` enabled on mobile. Desktop mouse drag is unchanged.
 

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md

@@ -3,3 +3,5 @@ For a simplified version of the Draggable API for the List kit, you can do the f
 The List kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on List kit with an array of the included items AND `drag_id` prop on ListItems. You will also need to include the `items` prop containing your array of listed items for the Draggable API.
 
 An additional optional boolean prop (set to true by default) of `drag_handle` is also available on ListItem kit to show the drag handle icon.
+
+On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `drag_handle` enabled on mobile. Desktop mouse drag is unchanged.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_react.md

@@ -2,4 +2,6 @@ For a simplified version of the Draggable API for the List kit, you can do the f
 
 Use `DraggableProvider` and manage state as shown.
 
-The List kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on List kit AND `dragId` prop on ListItem. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on List kit to show the drag handle icon.
+The List kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on List kit AND `dragId` prop on ListItem. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on ListItem to show the drag handle icon.
+
+On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `dragHandle` enabled on mobile. Desktop mouse drag is unchanged.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md

@@ -1,3 +1,5 @@
 For a simplified version of the Draggable API for the SelectableList kit, you can do the following:
 
-The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on SelectableList kit AND `drag_id` prop within the SelectableList kit prop. An additional optional boolean prop (set to true by default) of `drag_handle` is also available on SelectableList kit to show the drag handle icon.
+The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on SelectableList kit AND `drag_id` prop within the SelectableList kit prop. An additional optional boolean prop (set to true by default) of `drag_handle` is also available on SelectableList kit to show the drag handle icon.
+
+On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `drag_handle` enabled on mobile. Desktop mouse drag is unchanged.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_react.md

@@ -2,4 +2,6 @@ For a simplified version of the Draggable API for the SelectableList kit, you ca
 
 Use `DraggableProvider` and manage state as shown.
 
-The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on SelectableList kit AND `dragId` prop on SelectableList.Item. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on SelectableList kit to show the drag handle icon.
+The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enableDrag` prop on SelectableList kit AND `dragId` prop on SelectableList.Item. An additional optional boolean prop (set to true by default) of `dragHandle` is also available on SelectableList kit to show the drag handle icon.
+
+On touch devices, drag from the grip handle (no long press). Swiping the rest of the row scrolls as usual. Keep `dragHandle` enabled on mobile. Desktop mouse drag is unchanged.

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.

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.9.0.pre.rc.1
+  version: 16.9.0.pre.rc.3
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2026-05-20 00:00:00.000000000 Z
+date: 2026-05-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui
@@ -76,6 +76,8 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers_rails.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_width.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_width.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_visibility_custom.jsx
@@ -173,6 +175,8 @@ files:
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.html.erb
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_header_rails.md
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_scroll_limitation.jsx
+- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sticky_scroll_limitation.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.md
 - app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx
@@ -1303,9 +1307,6 @@ files:
 - app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb
 - app/pb_kits/playbook/pb_icon/docs/_icon_default.jsx
 - app/pb_kits/playbook/pb_icon/docs/_icon_default_swift.md
-- app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.html.erb
-- app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.jsx
-- app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.md
 - app/pb_kits/playbook/pb_icon/docs/_icon_flip.html.erb
 - app/pb_kits/playbook/pb_icon/docs/_icon_flip.jsx
 - app/pb_kits/playbook/pb_icon/docs/_icon_flip_swift.md
@@ -1839,6 +1840,9 @@ files:
 - app/pb_kits/playbook/pb_pb_circle_chart/docs/_description.md
 - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb
 - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.html.erb
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.jsx
+- app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_centered_data.md
 - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb
 - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx
 - app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md

data/app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.html.erb

@@ -1 +0,0 @@
-<%= pb_rails("icon", props: { icon: "powergon", font_style: "fak", fixed_width: true, size: "5x"  }) %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.jsx

@@ -1,21 +0,0 @@
-import React from 'react'
-
-import Icon from '../_icon'
-
-import '../../../../../../playbook-website/app/javascript/scripts/custom-icons'
-
-const IconFaKit = (props) => {
-  return (
-    <div>
-      <Icon
-          {...props}
-          fixedWidth
-          fontStyle="fak"
-          icon="powergon"
-          size="5x"
-      />
-    </div>
-  )
-}
-
-export default IconFaKit

data/app/pb_kits/playbook/pb_icon/docs/_icon_fa_kit.md

@@ -1,7 +0,0 @@
-Our Icon kit allows integration with [FontAwesome's custom kit](https://fontawesome.com/v6/docs/web/setup/use-kit#contentHeader) functionality out-of-the-box. 
-
-All you need to do is 3 things:
-1) Import your custom-icon.js file as outlined in the FontAwesome docs.
-2) Use our fontStyle prop called "fak" so that our Icon component knows you are using a "fa-kit" icon. 
-3) Pass in your FaKit name as a string to our icon prop (This is the name that you designated when you uploaded the icon on their site).
-