playbook_ui_docs 16.7.0 → 16.8.0.pre.alpha.PLAY2945selectformblankselection16424

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

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_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"
+  ]
 }