playbook_ui_docs 16.7.0 → 16.8.0.pre.alpha.PLAY2945selectformblankselection16424

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

@@ -1,7 +1,25 @@
 {
+  "template": "<DatePicker {{props}} />",
+  "defaults": {
+    "customQuickPickDates": { "override": false, "dates": [] },
+    "pickerId": "playground-date-picker",
+    "disableDate": [],
+    "disableRange": [],
+    "disableWeekdays": [],
+    "yearRange": [1900, 2100]
+  },
+  "hiddenProps": [
+    "staticPosition",
+    "scrollContainer",
+    "controlsStartId",
+    "controlsEndId",
+    "syncStartWith",
+    "syncEndWith",
+    "positionElement"
+  ],
   "groups": [
     {
-      "name": "Content",
+      "name": "Date Picker Config",
       "props": [
         "label",
         "placeholder",
@@ -13,13 +31,11 @@
     },
     {
       "name": "Appearance",
-      "props": [
-        "hideIcon",
-        "hideLabel",
-        "inLine",
-        "staticPosition",
-        "selectionType"
-      ]
+      "props": ["dark", "hideIcon", "hideLabel", "inLine"]
+    },
+    {
+      "name": "Quick pick",
+      "props": ["selectionType", "customQuickPickDates", "thisRangesEndToday"]
     },
     {
       "name": "Behavior",
@@ -47,20 +63,12 @@
     {
       "name": "Advanced",
       "props": [
-        "customQuickPickDates",
-        "positionElement",
-        "scrollContainer",
         "inputValue",
         "inputOnChange",
         "inputAria",
         "inputData",
         "type",
-        "timeFormat",
-        "thisRangesEndToday",
-        "controlsStartId",
-        "controlsEndId",
-        "syncStartWith",
-        "syncEndWith"
+        "timeFormat"
       ]
     }
   ],
@@ -71,20 +79,51 @@
         "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"]
+            }
+          ]
+        }
       }
     },
     {
@@ -93,7 +132,6 @@
         "name": "starts_at",
         "pickerId": "playground-datetime",
         "label": "Starts at",
-        "defaultDate": "04/09/2026",
         "enableTime": true,
         "format": "m/d/Y H:i"
       }
@@ -104,8 +142,7 @@
         "name": "typed_date",
         "pickerId": "playground-allow-input",
         "label": "Start date",
-        "allowInput": true,
-        "defaultDate": "04/09/2026"
+        "allowInput": true
       }
     },
     {
@@ -114,8 +151,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
       }
     },
     {
@@ -124,7 +178,6 @@
         "name": "bounded",
         "pickerId": "playground-bounded",
         "label": "Within range",
-        "defaultDate": "04/09/2026",
         "minDate": "01/01/2026",
         "maxDate": "12/31/2026"
       }
@@ -135,22 +188,37 @@
         "name": "invalid_date",
         "pickerId": "playground-error",
         "label": "Due date",
-        "error": "Please choose a valid date",
-        "defaultDate": ""
-      }
-    },
-    {
-      "name": "Minimal chrome",
-      "props": {
-        "name": "compact_date",
-        "pickerId": "playground-minimal",
-        "label": "",
-        "hideLabel": true,
-        "hideIcon": true,
-        "defaultDate": "04/09/2026"
+        "error": "Please choose a valid date"
       }
     }
   ],
-  "conditionals": {},
-  "hints": {}
+  "conditionals": {
+    "customQuickPickDates": {
+      "requires": { "selectionType": "quickpick" }
+    },
+    "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": { "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"
+    }
+  }
 }

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

@@ -8,22 +8,64 @@
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Content",
       "props": [
-        "align",
-        "dark",
+        "startDate",
         "endDate",
         "icon",
+        "showCurrentYear"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "align",
         "size",
-        "showCurrentYear",
-        "startDate"
+        "dark"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "props": {
+        "startDate": "2013-06-18",
+        "endDate": "2015-03-20"
+      }
+    },
+    {
+      "name": "Extra small",
+      "props": {
+        "startDate": "2013-06-18",
+        "endDate": "2015-03-20",
+        "size": "xs"
+      }
+    },
+    {
+      "name": "Center with icon",
+      "props": {
+        "align": "center",
+        "startDate": "2026-01-15",
+        "endDate": "2026-08-15",
+        "icon": true
+      }
+    },
+    {
+      "name": "Right with icon",
+      "props": {
+        "align": "right",
+        "startDate": "2026-01-15",
+        "endDate": "2026-08-15",
+        "icon": true
+      }
+    },
+    {
+      "name": "Always show year",
+      "props": {
+        "startDate": "2013-06-18",
+        "endDate": "2015-03-20",
+        "showCurrentYear": true
+      }
     }
   ],
   "conditionals": {},

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

@@ -0,0 +1,57 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["startDate", "endDate", "icon", "showCurrentYear"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["align", "size", "dark"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "startDate": "2013-06-18",
+        "endDate": "2015-03-20"
+      }
+    },
+    {
+      "name": "Extra small",
+      "props": {
+        "startDate": "2013-06-18",
+        "endDate": "2015-03-20",
+        "size": "xs"
+      }
+    },
+    {
+      "name": "Center with icon",
+      "props": {
+        "align": "center",
+        "startDate": "2026-01-15",
+        "endDate": "2026-08-15",
+        "icon": true
+      }
+    },
+    {
+      "name": "Right with icon",
+      "props": {
+        "align": "right",
+        "startDate": "2026-01-15",
+        "endDate": "2026-08-15",
+        "icon": true
+      }
+    },
+    {
+      "name": "Always show year",
+      "props": {
+        "startDate": "2013-06-18",
+        "endDate": "2015-03-20",
+        "showCurrentYear": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -4,18 +4,41 @@
   "defaults": {},
   "groups": [
     {
-      "name": "Props",
+      "name": "Content",
       "props": [
-        "dark",
-        "endDate",
-        "startDate"
+        "startDate",
+        "endDate"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "dark"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "props": {
+        "startDate": "2019-06-18",
+        "endDate": "2020-03-20"
+      }
+    },
+    {
+      "name": "Dark",
+      "props": {
+        "startDate": "2019-06-18",
+        "endDate": "2020-03-20",
+        "dark": true
+      }
+    },
+    {
+      "name": "Same calendar year",
+      "props": {
+        "startDate": "2026-01-15",
+        "endDate": "2026-08-15"
+      }
     }
   ],
   "conditionals": {},

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

@@ -0,0 +1,38 @@
+{
+  "groups": [
+    {
+      "name": "Content",
+      "props": ["startDate", "endDate"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["dark"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "startDate": "2019-06-18",
+        "endDate": "2020-03-20"
+      }
+    },
+    {
+      "name": "Dark",
+      "props": {
+        "startDate": "2019-06-18",
+        "endDate": "2020-03-20",
+        "dark": true
+      }
+    },
+    {
+      "name": "Same calendar year",
+      "props": {
+        "startDate": "2026-01-15",
+        "endDate": "2026-08-15"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {}
+}

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

@@ -10,7 +10,7 @@
   },
   "groups": [
     {
-      "name": "Content",
+      "name": "Date Config",
       "props": [
         "date",
         "showCurrentYear",

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

@@ -1,7 +1,7 @@
 {
   "groups": [
     {
-      "name": "Content",
+      "name": "Date Config",
       "props": ["date", "showCurrentYear", "reverse", "bold"]
     },
     {

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

@@ -10,7 +10,7 @@
   },
   "groups": [
     {
-      "name": "Content",
+      "name": "Date Config",
       "props": [
         "datetime",
         "showDayOfWeek",
@@ -49,7 +49,7 @@
       }
     },
     {
-      "name": "With calendar icon",
+      "name": "With icon",
       "props": {
         "datetime": "2026-04-09T15:30:00.000Z",
         "showIcon": true,
@@ -69,8 +69,21 @@
         "datetime": "2026-04-09T15:30:00.000Z",
         "timeZone": "Asia/Tokyo"
       }
+    },
+    {
+      "name": "Always show year",
+      "props": {
+        "datetime": "2026-04-09T15:30:00.000Z",
+        "showCurrentYear": true
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "tokyo_time": {
+      "presetName": "Tokyo time",
+      "message": "Use the timeZone prop to display the time in a different timezone",
+      "type": "info"
+    }
+  }
 }

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

@@ -1,7 +1,7 @@
 {
   "groups": [
     {
-      "name": "Content",
+      "name": "Date Config",
       "props": ["datetime", "showDayOfWeek", "showCurrentYear", "showIcon", "timeZone"]
     },
     {
@@ -31,7 +31,7 @@
       }
     },
     {
-      "name": "With calendar icon",
+      "name": "With icon",
       "props": {
         "datetime": "2026-04-09T15:30:00.000Z",
         "showIcon": true,
@@ -51,8 +51,21 @@
         "datetime": "2026-04-09T15:30:00.000Z",
         "timeZone": "Asia/Tokyo"
       }
+    }, 
+    {
+      "name": "Always show year",
+      "props": {
+        "datetime": "2026-04-09T15:30:00.000Z",
+        "showCurrentYear": true
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "tokyo_time": {
+      "presetName": "Tokyo time",
+      "message": "Use the timeZone prop to display the time in a different timezone",
+      "type": "info"
+    }
+  }
 }

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

@@ -6,7 +6,7 @@
   },
   "groups": [
     {
-      "name": "Content",
+      "name": "Date Config",
       "props": [
         "datetime",
         "timeZone",
@@ -24,34 +24,30 @@
     {
       "name": "Default",
       "props": {
-        "datetime": "2026-04-09T15:30:00.000Z",
-        "dark": false
+        "datetime": "2026-04-09T15:30:00.000Z"
       }
     },
     {
-      "name": "With year",
+      "name": "Always show year",
       "props": {
         "datetime": "2024-10-31T18:45:00.000Z",
-        "dark": false,
         "showCurrentYear": true
       }
     },
     {
-      "name": "Dark",
+      "name": "Paris time",
       "props": {
         "datetime": "2026-04-09T15:30:00.000Z",
-        "dark": true
-      }
-    },
-    {
-      "name": "Paris",
-      "props": {
-        "datetime": "2026-04-09T15:30:00.000Z",
-        "dark": false,
         "timeZone": "Europe/Paris"
       }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "paris_time": {
+      "presetName": "Paris time",
+      "message": "Use the timeZone prop to display the time in a different timezone",
+      "type": "info"
+    }
+  }
 }

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

@@ -1,7 +1,7 @@
 {
   "groups": [
     {
-      "name": "Content",
+      "name": "Date Config",
       "props": ["datetime", "timeZone", "showCurrentYear"]
     },
     {
@@ -13,34 +13,30 @@
     {
       "name": "Default",
       "props": {
-        "datetime": "2026-04-09T15:30:00.000Z",
-        "dark": false
+        "datetime": "2026-04-09T15:30:00.000Z"
       }
     },
     {
-      "name": "With year",
+      "name": "Always show year",
       "props": {
         "datetime": "2024-10-31T18:45:00.000Z",
-        "dark": false,
         "showCurrentYear": true
       }
     },
     {
-      "name": "Dark",
+      "name": "Paris time",
       "props": {
         "datetime": "2026-04-09T15:30:00.000Z",
-        "dark": true
-      }
-    },
-    {
-      "name": "Paris",
-      "props": {
-        "datetime": "2026-04-09T15:30:00.000Z",
-        "dark": false,
         "timeZone": "Europe/Paris"
       }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "paris_time": {
+      "presetName": "Paris time",
+      "message": "Use the timeZone prop to display the time in a different timezone",
+      "type": "info"
+    }
+  }
 }

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

@@ -6,7 +6,7 @@
   },
   "groups": [
     {
-      "name": "Content",
+      "name": "Date Config",
       "props": [
         "date"
       ]
@@ -22,20 +22,20 @@
     {
       "name": "Default",
       "props": {
-        "date": "2026-04-09T12:00:00.000Z"
+        "date": "2026-04-09"
       }
     },
     {
       "name": "Centered",
       "props": {
-        "date": "2026-04-09T12:00:00.000Z",
+        "date": "2026-04-09",
         "align": "center"
       }
     },
     {
       "name": "Right aligned",
       "props": {
-        "date": "2026-12-25T12:00:00.000Z",
+        "date": "2026-12-25",
         "align": "right"
       }
     }