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

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

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

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

@@ -8,64 +8,22 @@
   },
   "groups": [
     {
-      "name": "Content",
+      "name": "Props",
       "props": [
-        "startDate",
+        "align",
+        "dark",
         "endDate",
         "icon",
-        "showCurrentYear"
-      ]
-    },
-    {
-      "name": "Appearance",
-      "props": [
-        "align",
         "size",
-        "dark"
+        "showCurrentYear",
+        "startDate"
       ]
     }
   ],
   "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
-      }
+      "props": {}
     }
   ],
   "conditionals": {},

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

@@ -4,41 +4,18 @@
   "defaults": {},
   "groups": [
     {
-      "name": "Content",
+      "name": "Props",
       "props": [
-        "startDate",
-        "endDate"
-      ]
-    },
-    {
-      "name": "Appearance",
-      "props": [
-        "dark"
+        "dark",
+        "endDate",
+        "startDate"
       ]
     }
   ],
   "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"
-      }
+      "props": {}
     }
   ],
   "conditionals": {},

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

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

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

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

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

@@ -10,7 +10,7 @@
   },
   "groups": [
     {
-      "name": "Date Config",
+      "name": "Content",
       "props": [
         "datetime",
         "showDayOfWeek",
@@ -49,7 +49,7 @@
       }
     },
     {
-      "name": "With icon",
+      "name": "With calendar icon",
       "props": {
         "datetime": "2026-04-09T15:30:00.000Z",
         "showIcon": true,
@@ -69,21 +69,8 @@
         "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": {
-    "tokyo_time": {
-      "presetName": "Tokyo time",
-      "message": "Use the timeZone prop to display the time in a different timezone",
-      "type": "info"
-    }
-  }
+  "hints": {}
 }

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

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

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

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

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

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

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

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

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

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

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

@@ -31,19 +31,23 @@
   ],
   "presets": [
     {
-      "name": "Default",
-      "props": {},
-      "children": "I am a detail kit"
+      "name": "Metadata",
+      "props": {
+        "color": "light",
+        "bold": false
+      },
+      "children": "Updated Apr 9, 2026"
     },
     {
       "name": "Emphasis",
       "props": {
+        "color": "default",
         "bold": true
       },
       "children": "Order #48291 · Processing"
     },
     {
-      "name": "Link color",
+      "name": "Link",
       "props": {
         "color": "link"
       },
@@ -55,15 +59,17 @@
         "color": "error",
         "bold": true
       },
-      "children": "Payment failed"
+      "children": "Payment failed — card expired"
+    },
+    {
+      "name": "Inline label",
+      "props": {
+        "tag": "span",
+        "color": "lighter"
+      },
+      "children": "Optional"
     }
   ],
   "conditionals": {},
-  "hints": {
-    "link_color": {
-      "presetName": "Link color",
-      "message": "Use the color prop to change the color of the detail kit",
-      "type": "info"
-    }
-  }
+  "hints": {}
 }