playbook_ui_docs 16.7.0 → 16.8.0.pre.alpha.PLAY2935formbuilderrequiredindicatorbug16780

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

@@ -34,11 +34,6 @@
         "columnDefinitionsFile": "advanced_table_column_definitions_standard.json",
         "tableDataFile": "advanced_table_mock_data_no_subrows.json"
       },
-      "pagination": {
-        "label": "Pagination Example",
-        "columnDefinitionsFile": "advanced_table_column_definitions_standard.json",
-        "tableDataFile": "advanced_table_pagination_mock_data.json"
-      },
       "with_ids": {
         "label": "Data with row IDs",
         "columnDefinitionsFile": "advanced_table_column_definitions_standard.json",
@@ -80,15 +75,15 @@
     "sortControl",
     "fullScreenControl",
     "expandedControl",
-    "allowFullScreen"
+    "allowFullScreen",
+    "pagination",
+    "paginationProps"
   ],
   "requiredProps": {
     "columnDefinitionsFile": "advanced_table_column_definitions_standard.json",
     "tableDataFile": "advanced_table_mock_data.json"
   },
   "propSyncOnEnable": {
-    "pagination": { "dataPreset": "pagination" },
-    "paginationProps": { "dataPreset": "pagination" },
     "inlineRowLoading": { "dataPreset": "inline_loading" },
     "selectableRows": { "dataPreset": "with_ids" },
     "onRowSelectionChange": { "dataPreset": "with_ids" },
@@ -144,10 +139,8 @@
       ]
     },
     {
-      "name": "Pagination & Loading",
+      "name": "Loading",
       "props": [
-        "pagination",
-        "paginationProps",
         "loading",
         "inlineRowLoading",
         "initialLoadingRowsCount"
@@ -215,12 +208,6 @@
         "enableSorting": true
       }
     },
-    {
-      "name": "With Pagination",
-      "props": {
-        "pagination": true
-      }
-    },
     {
       "name": "Selectable Rows",
       "props": {
@@ -260,11 +247,6 @@
     }
   ],
   "conditionals": {
-    "paginationProps": {
-      "requires": {
-        "pagination": true
-      }
-    },
     "initialLoadingRowsCount": {
       "requires": {
         "loading": true
@@ -350,13 +332,6 @@
       "message": "Header sorting UI is only applied in \"Subcomponent Structure\" mode (explicit Header and Body). For sorting by column, pass columnDefinitions with enableSort: true to the columnDefinitions array. Click 'sorting by column' to see an example.",
       "type": "info"
     },
-    "pagination_info": {
-      "when": {
-        "pagination": true
-      },
-      "message": "Use paginationProps to customize page size and appearance.",
-      "type": "info"
-    },
     "selectable_info": {
       "when": {
         "selectableRows": true
@@ -396,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

@@ -3,6 +3,7 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_loading: Loading State
   - advanced_table_beta_subrow_headers: SubRow Headers
+  - advanced_table_enable_toggle_expansion_rails: Enable Toggle Expansion
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_table_props: Table Props
   - advanced_table_sticky_header_rails: Sticky Header
@@ -52,6 +53,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 +82,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/docs/_playground.json

@@ -1,5 +1,5 @@
 {
-  "template": "<Date{{props}} />",
+  "template": "<FormattedDate{{props}} />",
   "propTargets": {},
   "defaults": {
     "alignment": "left",
@@ -11,7 +11,7 @@
   },
   "groups": [
     {
-      "name": "Content",
+      "name": "Date Config",
       "props": [
         "value",
         "showDayOfWeek",
@@ -32,21 +32,20 @@
     {
       "name": "Default",
       "props": {
-        "value": "2026-04-09T15:30:00.000Z"
+        "value": "2026-04-09"
       }
     },
     {
-      "name": "Large & centered",
+      "name": "centered",
       "props": {
-        "value": "2026-04-09T15:30:00.000Z",
-        "size": "lg",
+        "value": "2026-04-09",
         "alignment": "center"
       }
     },
     {
       "name": "Small with weekday",
       "props": {
-        "value": "2026-06-18T10:00:00.000Z",
+        "value": "2026-06-18",
         "size": "sm",
         "showDayOfWeek": true
       }
@@ -54,20 +53,17 @@
     {
       "name": "With icon & year",
       "props": {
-        "value": "2024-11-02T09:00:00.000Z",
+        "value": "2024-11-02",
         "showIcon": true,
         "showCurrentYear": true
       }
-    },
-    {
-      "name": "Unstyled",
-      "props": {
-        "value": "2026-04-09T15:30:00.000Z",
-        "unstyled": true,
-        "showDayOfWeek": true
-      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "message": "Use as FormattedDate to avoid naming collisions with global Date object",
+      "type": "info"
+    }
+  }
 }

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

@@ -1,7 +1,8 @@
 {
+  "template": "<FormattedDate{{props}} />",
   "groups": [
     {
-      "name": "Content",
+      "name": "Date Config",
       "props": ["value", "showDayOfWeek", "showCurrentYear", "showIcon"]
     },
     {
@@ -13,21 +14,20 @@
     {
       "name": "Default",
       "props": {
-        "value": "2026-04-09T15:30:00.000Z"
+        "value": "2026-04-09"
       }
     },
     {
-      "name": "Large & centered",
+      "name": "centered",
       "props": {
-        "value": "2026-04-09T15:30:00.000Z",
-        "size": "lg",
+        "value": "2026-04-09",
         "alignment": "center"
       }
     },
     {
       "name": "Small with weekday",
       "props": {
-        "value": "2026-06-18T10:00:00.000Z",
+        "value": "2026-06-18",
         "size": "sm",
         "showDayOfWeek": true
       }
@@ -35,20 +35,17 @@
     {
       "name": "With icon & year",
       "props": {
-        "value": "2024-11-02T09:00:00.000Z",
+        "value": "2024-11-02",
         "showIcon": true,
         "showCurrentYear": true
       }
-    },
-    {
-      "name": "Unstyled",
-      "props": {
-        "value": "2026-04-09T15:30:00.000Z",
-        "unstyled": true,
-        "showDayOfWeek": true
-      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "message": "Use as FormattedDate to avoid naming collisions with global Date object",
+      "type": "info"
+    }
+  }
 }

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

@@ -1,6 +1,4 @@
 <%= pb_rails("date_picker", props: {
-  classname: "inline-date-picker",
-  hide_icon: true,
   inline: true,
   picker_id: "date-picker-inline"
 }) %>

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

@@ -6,8 +6,6 @@ const DatePickerInline = (props) => {
   return (
     <div>
       <DatePicker
-          className="inline-date-picker"
-          hideIcon
           inLine
           pickerId="date-picker-inline"
           {...props}

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

@@ -1,5 +1,5 @@
 {
-  "template": "<DatePicker{{props}} />",
+  "template": "<DatePicker {{props}} />",
   "propTargets": {},
   "defaults": {
     "allowInput": false,
@@ -19,11 +19,23 @@
     "controlsStartId": "",
     "controlsEndId": "",
     "syncStartWith": "",
-    "syncEndWith": ""
+    "syncEndWith": "",
+    "customQuickPickDates": {
+      "override": false,
+      "dates": []
+    },
+    "pickerId": "playground-date-picker",
+    "disableDate": [],
+    "disableRange": [],
+    "disableWeekdays": [],
+    "yearRange": [
+      1900,
+      2100
+    ]
   },
   "groups": [
     {
-      "name": "Content",
+      "name": "Date Picker Config",
       "props": [
         "label",
         "placeholder",
@@ -36,11 +48,18 @@
     {
       "name": "Appearance",
       "props": [
+        "dark",
         "hideIcon",
         "hideLabel",
-        "inLine",
-        "staticPosition",
-        "selectionType"
+        "inLine"
+      ]
+    },
+    {
+      "name": "Quick pick",
+      "props": [
+        "selectionType",
+        "customQuickPickDates",
+        "thisRangesEndToday"
       ]
     },
     {
@@ -69,20 +88,12 @@
     {
       "name": "Advanced",
       "props": [
-        "customQuickPickDates",
-        "positionElement",
-        "scrollContainer",
         "inputValue",
         "inputOnChange",
         "inputAria",
         "inputData",
         "type",
-        "timeFormat",
-        "thisRangesEndToday",
-        "controlsStartId",
-        "controlsEndId",
-        "syncStartWith",
-        "syncEndWith"
+        "timeFormat"
       ]
     }
   ],
@@ -93,20 +104,57 @@
         "name": "event_date",
         "pickerId": "playground-date-picker",
         "label": "Event date",
-        "placeholder": "Select date",
-        "defaultDate": "04/09/2026",
-        "format": "m/d/Y"
+        "placeholder": "Select date"
       }
     },
     {
-      "name": "Inline calendar",
+      "name": "Inline",
       "props": {
         "name": "inline_date",
         "pickerId": "playground-date-inline",
         "label": "Inline",
-        "defaultDate": "04/09/2026",
-        "inLine": true,
-        "staticPosition": true
+        "inLine": true
+      }
+    },
+    {
+      "name": "Quick pick",
+      "props": {
+        "name": "quickpick_range",
+        "pickerId": "playground-quickpick",
+        "label": "Date range",
+        "placeholder": "mm/dd/yyyy to mm/dd/yyyy",
+        "allowInput": true,
+        "selectionType": "quickpick"
+      }
+    },
+    {
+      "name": "Quick pick with Custom Dates",
+      "props": {
+        "name": "quickpick_range",
+        "pickerId": "playground-quickpick",
+        "label": "Date range",
+        "placeholder": "mm/dd/yyyy to mm/dd/yyyy",
+        "allowInput": true,
+        "selectionType": "quickpick",
+        "customQuickPickDates": {
+          "override": false,
+          "dates": [
+            {
+              "label": "Last 15 months",
+              "value": {
+                "timePeriod": "months",
+                "amount": 15
+              }
+            },
+            {
+              "label": "First week of June 2022",
+              "value": [
+                "06/01/2022",
+                "06/07/2022"
+              ]
+            }
+          ]
+        }
       }
     },
     {
@@ -115,7 +163,6 @@
         "name": "starts_at",
         "pickerId": "playground-datetime",
         "label": "Starts at",
-        "defaultDate": "04/09/2026",
         "enableTime": true,
         "format": "m/d/Y H:i"
       }
@@ -126,8 +173,7 @@
         "name": "typed_date",
         "pickerId": "playground-allow-input",
         "label": "Start date",
-        "allowInput": true,
-        "defaultDate": "04/09/2026"
+        "allowInput": true
       }
     },
     {
@@ -136,8 +182,25 @@
         "name": "month_only",
         "pickerId": "playground-month",
         "label": "Month",
-        "selectionType": "month",
-        "defaultDate": "04/01/2026"
+        "selectionType": "month"
+      }
+    },
+    {
+      "name": "Week picker",
+      "props": {
+        "name": "week_only",
+        "pickerId": "playground-week",
+        "label": "Week",
+        "selectionType": "week"
+      }
+    },
+    {
+      "name": "Dark",
+      "props": {
+        "name": "dark_picker",
+        "pickerId": "playground-dark",
+        "label": "Event date",
+        "dark": true
       }
     },
     {
@@ -146,7 +209,6 @@
         "name": "bounded",
         "pickerId": "playground-bounded",
         "label": "Within range",
-        "defaultDate": "04/09/2026",
         "minDate": "01/01/2026",
         "maxDate": "12/31/2026"
       }
@@ -157,22 +219,54 @@
         "name": "invalid_date",
         "pickerId": "playground-error",
         "label": "Due date",
-        "error": "Please choose a valid date",
-        "defaultDate": ""
+        "error": "Please choose a valid date"
+      }
+    }
+  ],
+  "conditionals": {
+    "customQuickPickDates": {
+      "requires": {
+        "selectionType": "quickpick"
       }
     },
-    {
-      "name": "Minimal chrome",
-      "props": {
-        "name": "compact_date",
-        "pickerId": "playground-minimal",
-        "label": "",
-        "hideLabel": true,
-        "hideIcon": true,
-        "defaultDate": "04/09/2026"
+    "thisRangesEndToday": {
+      "requires": {
+        "selectionType": "quickpick"
       }
     }
-  ],
-  "conditionals": {},
-  "hints": {}
+  },
+  "hints": {
+    "pickerId": {
+      "message": "The pickerId is used to identify the date picker in the DOM. It is required and must be unique.",
+      "type": "info"
+    },
+    "defaultDate": {
+      "when": {
+        "defaultDate": "04/09/2026"
+      },
+      "message": "The default date is the date that will be selected when the date picker is first rendered. It is required and must be a valid date.",
+      "type": "info"
+    },
+    "quickPick": {
+      "when": {
+        "selectionType": "quickpick"
+      },
+      "message": "Quick pick shows preset ranges (relative periods or explicit date pairs). Use thisRangesEndToday when the plugin should treat ranges as ending today.",
+      "type": "info"
+    },
+    "customQuickPickDates": {
+      "presetName": "Quick pick with Custom Dates",
+      "message": "Custom quick pick dates are used to override the default quick pick dates. It must be an object with a dates array.",
+      "type": "info"
+    }
+  },
+  "hiddenProps": [
+    "staticPosition",
+    "scrollContainer",
+    "controlsStartId",
+    "controlsEndId",
+    "syncStartWith",
+    "syncEndWith",
+    "positionElement"
+  ]
 }