playbook_ui_docs 16.7.0.pre.alpha.tablewidths16409 → 16.7.0.pre.rc.0

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

@@ -34,6 +34,11 @@
         "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",
@@ -75,15 +80,15 @@
     "sortControl",
     "fullScreenControl",
     "expandedControl",
-    "allowFullScreen",
-    "pagination",
-    "paginationProps"
+    "allowFullScreen"
   ],
   "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" },
@@ -139,8 +144,10 @@
       ]
     },
     {
-      "name": "Loading",
+      "name": "Pagination & Loading",
       "props": [
+        "pagination",
+        "paginationProps",
         "loading",
         "inlineRowLoading",
         "initialLoadingRowsCount"
@@ -208,6 +215,12 @@
         "enableSorting": true
       }
     },
+    {
+      "name": "With Pagination",
+      "props": {
+        "pagination": true
+      }
+    },
     {
       "name": "Selectable Rows",
       "props": {
@@ -247,6 +260,11 @@
     }
   ],
   "conditionals": {
+    "paginationProps": {
+      "requires": {
+        "pagination": true
+      }
+    },
     "initialLoadingRowsCount": {
       "requires": {
         "loading": true
@@ -332,6 +350,13 @@
       "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
@@ -371,7 +396,7 @@
     },
     "column_styling_info": {
       "presetName": "Column Styling",
-      "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.",
+      "message": "This sample uses columnStyling on column definitions. You can style headers and cells for the whole table or per column.",
       "type": "info"
     }
   }

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

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

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

@@ -0,0 +1,98 @@
+[
+  {
+    "id": "1",
+    "year": "2015",
+    "newEnrollments": "12",
+    "scheduledMeetings": "40",
+    "attendanceRate": "62%",
+    "classCompletionRate": "28%"
+  },
+  {
+    "id": "2",
+    "year": "2016",
+    "newEnrollments": "88",
+    "scheduledMeetings": "12",
+    "attendanceRate": "71%",
+    "classCompletionRate": "55%"
+  },
+  {
+    "id": "3",
+    "year": "2017",
+    "newEnrollments": "34",
+    "scheduledMeetings": "67",
+    "attendanceRate": "58%",
+    "classCompletionRate": "41%"
+  },
+  {
+    "id": "4",
+    "year": "2018",
+    "newEnrollments": "05",
+    "scheduledMeetings": "91",
+    "attendanceRate": "44%",
+    "classCompletionRate": "73%"
+  },
+  {
+    "id": "5",
+    "year": "2019",
+    "newEnrollments": "61",
+    "scheduledMeetings": "19",
+    "attendanceRate": "83%",
+    "classCompletionRate": "36%"
+  },
+  {
+    "id": "6",
+    "year": "2020",
+    "newEnrollments": "19",
+    "scheduledMeetings": "54",
+    "attendanceRate": "67%",
+    "classCompletionRate": "62%"
+  },
+  {
+    "id": "7",
+    "year": "2021",
+    "newEnrollments": "73",
+    "scheduledMeetings": "08",
+    "attendanceRate": "52%",
+    "classCompletionRate": "49%"
+  },
+  {
+    "id": "8",
+    "year": "2022",
+    "newEnrollments": "50",
+    "scheduledMeetings": "50",
+    "attendanceRate": "75%",
+    "classCompletionRate": "45%"
+  },
+  {
+    "id": "9",
+    "year": "2023",
+    "newEnrollments": "95",
+    "scheduledMeetings": "03",
+    "attendanceRate": "69%",
+    "classCompletionRate": "81%"
+  },
+  {
+    "id": "10",
+    "year": "2024",
+    "newEnrollments": "27",
+    "scheduledMeetings": "76",
+    "attendanceRate": "91%",
+    "classCompletionRate": "22%"
+  },
+  {
+    "id": "11",
+    "year": "2025",
+    "newEnrollments": "41",
+    "scheduledMeetings": "33",
+    "attendanceRate": "48%",
+    "classCompletionRate": "94%"
+  },
+  {
+    "id": "12",
+    "year": "2026",
+    "newEnrollments": "66",
+    "scheduledMeetings": "66",
+    "attendanceRate": "55%",
+    "classCompletionRate": "58%"
+  }
+]

data/app/pb_kits/playbook/pb_bread_crumbs/docs/_bread_crumbs_default.jsx

@@ -4,7 +4,7 @@ import Icon from "../../pb_icon/_icon"
 import Title from "../../pb_title/_title"
 import BreadCrumbItem from '../_bread_crumb_item'
 
-const LinkSection = (props) => <BreadCrumbItem {...props} />
+const Link = (props) => <BreadCrumbItem {...props} />
 const BreadCrumbsDefault = (props) => {
   return (
     <BreadCrumbs
@@ -35,7 +35,7 @@ const BreadCrumbsDefault = (props) => {
           size="1x"
           {...props}
       />
-      <LinkSection
+      <Link
           {...props}
           href="/users"
       >
@@ -46,20 +46,20 @@ const BreadCrumbsDefault = (props) => {
             text="Users"
             {...props}
         />
-      </LinkSection>
+      </Link>
       <Icon
           icon="user"
           size="1x"
           {...props}
       />
-      <LinkSection {...props}>
+      <Link {...props}>
         <Title
             size="4"
             tag="span"
             text="User"
             {...props}
         />
-      </LinkSection>
+      </Link>
     </BreadCrumbs>
   )
 }

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

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

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

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

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb

@@ -1,4 +1,6 @@
 <%= 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,6 +6,8 @@ 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,23 +19,11 @@
     "controlsStartId": "",
     "controlsEndId": "",
     "syncStartWith": "",
-    "syncEndWith": "",
-    "customQuickPickDates": {
-      "override": false,
-      "dates": []
-    },
-    "pickerId": "playground-date-picker",
-    "disableDate": [],
-    "disableRange": [],
-    "disableWeekdays": [],
-    "yearRange": [
-      1900,
-      2100
-    ]
+    "syncEndWith": ""
   },
   "groups": [
     {
-      "name": "Date Picker Config",
+      "name": "Content",
       "props": [
         "label",
         "placeholder",
@@ -48,18 +36,11 @@
     {
       "name": "Appearance",
       "props": [
-        "dark",
         "hideIcon",
         "hideLabel",
-        "inLine"
-      ]
-    },
-    {
-      "name": "Quick pick",
-      "props": [
-        "selectionType",
-        "customQuickPickDates",
-        "thisRangesEndToday"
+        "inLine",
+        "staticPosition",
+        "selectionType"
       ]
     },
     {
@@ -88,12 +69,20 @@
     {
       "name": "Advanced",
       "props": [
+        "customQuickPickDates",
+        "positionElement",
+        "scrollContainer",
         "inputValue",
         "inputOnChange",
         "inputAria",
         "inputData",
         "type",
-        "timeFormat"
+        "timeFormat",
+        "thisRangesEndToday",
+        "controlsStartId",
+        "controlsEndId",
+        "syncStartWith",
+        "syncEndWith"
       ]
     }
   ],
@@ -104,57 +93,20 @@
         "name": "event_date",
         "pickerId": "playground-date-picker",
         "label": "Event date",
-        "placeholder": "Select date"
+        "placeholder": "Select date",
+        "defaultDate": "04/09/2026",
+        "format": "m/d/Y"
       }
     },
     {
-      "name": "Inline",
+      "name": "Inline calendar",
       "props": {
         "name": "inline_date",
         "pickerId": "playground-date-inline",
         "label": "Inline",
-        "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"
-              ]
-            }
-          ]
-        }
+        "defaultDate": "04/09/2026",
+        "inLine": true,
+        "staticPosition": true
       }
     },
     {
@@ -163,6 +115,7 @@
         "name": "starts_at",
         "pickerId": "playground-datetime",
         "label": "Starts at",
+        "defaultDate": "04/09/2026",
         "enableTime": true,
         "format": "m/d/Y H:i"
       }
@@ -173,7 +126,8 @@
         "name": "typed_date",
         "pickerId": "playground-allow-input",
         "label": "Start date",
-        "allowInput": true
+        "allowInput": true,
+        "defaultDate": "04/09/2026"
       }
     },
     {
@@ -182,25 +136,8 @@
         "name": "month_only",
         "pickerId": "playground-month",
         "label": "Month",
-        "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
+        "selectionType": "month",
+        "defaultDate": "04/01/2026"
       }
     },
     {
@@ -209,6 +146,7 @@
         "name": "bounded",
         "pickerId": "playground-bounded",
         "label": "Within range",
+        "defaultDate": "04/09/2026",
         "minDate": "01/01/2026",
         "maxDate": "12/31/2026"
       }
@@ -219,54 +157,22 @@
         "name": "invalid_date",
         "pickerId": "playground-error",
         "label": "Due date",
-        "error": "Please choose a valid date"
-      }
-    }
-  ],
-  "conditionals": {
-    "customQuickPickDates": {
-      "requires": {
-        "selectionType": "quickpick"
+        "error": "Please choose a valid date",
+        "defaultDate": ""
       }
     },
-    "thisRangesEndToday": {
-      "requires": {
-        "selectionType": "quickpick"
-      }
-    }
-  },
-  "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": {
+    {
+      "name": "Minimal chrome",
+      "props": {
+        "name": "compact_date",
+        "pickerId": "playground-minimal",
+        "label": "",
+        "hideLabel": true,
+        "hideIcon": true,
         "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"
-  ]
+  ],
+  "conditionals": {},
+  "hints": {}
 }