playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -1,34 +1,55 @@
 {
+  "customProps": {
+    "isMulti": {
+      "type": "boolean",
+      "platforms": ["react"],
+      "default": false
+    }
+  },
+  "structureModes": {
+    "default": "standard",
+    "modes": {
+      "standard": {
+        "label": "Standard",
+        "template": "<Typeahead{{props}} />",
+        "children": ""
+      },
+      "advanced": {
+        "label": "Advanced setup",
+        "template": "<Typeahead{{props}} />",
+        "children": "",
+        "wrapper": "const playgroundTypeaheadOptions = [\n  { name: \"Ada Lovelace\", id: \"ada\" },\n  { name: \"Grace Hopper\", id: \"grace\" },\n  { name: \"Katherine Johnson\", id: \"katherine\" },\n  { name: \"Margaret Hamilton\", id: \"margaret\" },\n]\n\nconst playgroundTypeahead = {\n  loadOptions: (inputValue) => new Promise((resolve) => {\n    const search = inputValue.toLowerCase()\n    window.setTimeout(() => {\n      resolve(playgroundTypeaheadOptions.filter((option) => option.name.toLowerCase().includes(search)))\n    }, 250)\n  }),\n  getOptionLabel: (option) => option.name || option.label,\n  getOptionValue: (option) => String(option.id || option.value),\n}\n\nif (typeof window !== \"undefined\") {\n  window.playgroundTypeahead = playgroundTypeahead\n}\n\nconst MenuList = (props) => (\n  <Typeahead.MenuList\n      {...props}\n      footer={<Button margin=\"sm\" text=\"Custom footer\" />}\n  />\n)\n\nconst TypeaheadPlaygroundExample = () => (\n  {{component}}\n)\n\n<TypeaheadPlaygroundExample />"
+      }
+    }
+  },
   "groups": [
     {
       "name": "Content",
-      "props": ["label", "name", "options"]
+      "props": ["label", "name", "options", "inputDisplay", "isMulti"]
     },
     {
       "name": "State",
       "props": ["disabled", "error", "required", "requiredIndicator", "validation"]
     },
     {
-      "name": "Appearance",
-      "props": ["inputDisplay"]
-    },
-    {
-      "name": "Async & data",
+      "name": "Async & Data",
       "props": [
         "async",
-        "createable",
         "loadOptions",
         "getOptionLabel",
         "getOptionValue",
         "optionsByContext",
         "searchContextSelector",
-        "clearOnContextChange",
-        "preserveSearchInput"
+        "clearOnContextChange"
       ]
     },
     {
-      "name": "Advanced",
-      "props": ["components", "onChange"]
+      "name": "Behavior",
+      "props": ["createable", "preserveSearchInput", "onChange"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["components", "dark", "marginBottom"]
     }
   ],
   "presets": [
@@ -36,6 +57,7 @@
       "name": "Basic list",
       "props": {
         "label": "Colors",
+        "name": "color",
         "options": [
           { "label": "Orange", "value": "#FFA500" },
           { "label": "Red", "value": "#FF0000" },
@@ -45,10 +67,12 @@
       }
     },
     {
-      "name": "Pills display",
+      "name": "Count display",
       "props": {
         "label": "Tags",
-        "inputDisplay": "pills",
+        "name": "tags",
+        "inputDisplay": "none",
+        "isMulti": true,
         "options": [
           { "label": "Design", "value": "design" },
           { "label": "Engineering", "value": "engineering" },
@@ -57,40 +81,56 @@
       }
     },
     {
-      "name": "Plain input",
+      "name": "Required validation",
       "props": {
-        "label": "Team",
-        "inputDisplay": "none",
+        "label": "Assignee",
+        "name": "assignee",
+        "required": true,
+        "requiredIndicator": true,
+        "validation": { "message": "Choose an assignee." },
+        "error": "Selection is required.",
         "options": [
-          { "label": "North", "value": "north" },
-          { "label": "South", "value": "south" }
+          { "label": "Ada", "value": "ada" },
+          { "label": "Grace", "value": "grace" }
         ]
       }
     },
     {
-      "name": "Disabled",
+      "name": "Async users",
+      "structureMode": "advanced",
       "props": {
-        "label": "Read only",
-        "disabled": true,
-        "options": [{ "label": "Only option", "value": "one" }]
+        "async": true,
+        "label": "Users",
+        "name": "users",
+        "loadOptions": "playgroundTypeahead.loadOptions",
+        "getOptionLabel": "playgroundTypeahead.getOptionLabel",
+        "getOptionValue": "playgroundTypeahead.getOptionValue",
+        "options": []
       }
     },
     {
-      "name": "With error",
+      "name": "Custom menu",
+      "structureMode": "advanced",
       "props": {
-        "label": "Assignee",
-        "error": "Selection is required.",
+        "label": "Colors",
+        "name": "custom_menu",
+        "components": { "__playgroundCode": "{ MenuList }" },
+        "marginBottom": "none",
         "options": [
-          { "label": "Ada", "value": "ada" },
-          { "label": "Grace", "value": "grace" }
+          { "label": "Orange", "value": "#FFA500" },
+          { "label": "Red", "value": "#FF0000" },
+          { "label": "Green", "value": "#00FF00" }
         ]
       }
     },
     {
-      "name": "Creatable",
+      "name": "Creatable handler",
       "props": {
         "label": "Add labels",
+        "name": "labels",
         "createable": true,
+        "preserveSearchInput": true,
+        "onChange": "(selected) => console.log(selected)",
         "options": [
           { "label": "Bug", "value": "bug" },
           { "label": "Feature", "value": "feature" }
@@ -102,13 +142,40 @@
     "loadOptions": { "requires": { "async": true } },
     "getOptionLabel": { "requires": { "async": true } },
     "getOptionValue": { "requires": { "async": true } },
+    "requiredIndicator": { "requires": "label" },
+    "validation": { "requires": { "required": true } },
     "optionsByContext": { "requires": "searchContextSelector" },
     "clearOnContextChange": { "requires": "searchContextSelector" }
   },
   "hints": {
-    "async_options": {
-      "when": { "async": true },
-      "message": "Async mode expects loadOptions to return option objects with label and value.",
+    "basic_list": {
+      "presetName": "Basic list",
+      "message": "Basic list uses a local options array with label and value keys.",
+      "type": "info"
+    },
+    "count_display": {
+      "presetName": "Count display",
+      "message": "Count display uses multi-select with inputDisplay set to none so selected values render as a count.",
+      "type": "info"
+    },
+    "required_validation": {
+      "presetName": "Required validation",
+      "message": "Required validation pairs required, requiredIndicator, validation, and error copy.",
+      "type": "info"
+    },
+    "async_users": {
+      "presetName": "Async users",
+      "message": "Async users demonstrates loadOptions plus custom option label/value resolvers.",
+      "type": "info"
+    },
+    "custom_menu": {
+      "presetName": "Custom menu",
+      "message": "Custom menu passes a components map to replace Typeahead.MenuList content.",
+      "type": "info"
+    },
+    "creatable_handler": {
+      "presetName": "Creatable handler",
+      "message": "Creatable handler shows custom option creation, preserved search input, and an onChange handler.",
       "type": "info"
     }
   }

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

@@ -36,16 +36,18 @@
         "nameStyle",
         "titleStyle",
         "bold",
-        "avatarGrayscale"
+        "avatarGrayscale",
+        "dark"
       ]
     }
   ],
   "presets": [
     {
-      "name": "With avatar",
+      "name": "With Avatar",
       "props": {
         "name": "Anna Black",
         "title": "Engineer",
+        "subtitle": "Product team",
         "avatar": true,
         "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg",
         "size": "md",
@@ -53,7 +55,7 @@
       }
     },
     {
-      "name": "Text only",
+      "name": "Text Only",
       "props": {
         "name": "Anna Black",
         "title": "Engineer",
@@ -73,16 +75,6 @@
         "size": "lg"
       }
     },
-    {
-      "name": "Small",
-      "props": {
-        "name": "Anna Black",
-        "title": "Engineer",
-        "avatar": true,
-        "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg",
-        "size": "sm"
-      }
-    },
     {
       "name": "Vertical",
       "props": {
@@ -95,7 +87,7 @@
       }
     },
     {
-      "name": "With territory",
+      "name": "With Territory",
       "props": {
         "name": "Anna Black",
         "territory": "West",
@@ -106,5 +98,31 @@
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "with_avatar": {
+      "presetName": "With Avatar",
+      "message": "With Avatar shows the common horizontal user layout with avatar, title, and subtitle.",
+      "type": "info"
+    },
+    "text_only": {
+      "presetName": "Text Only",
+      "message": "Text Only turns avatar off for compact name-and-title displays.",
+      "type": "info"
+    },
+    "large": {
+      "presetName": "Large",
+      "message": "Large uses the lg size and subtitle for more prominent people rows.",
+      "type": "info"
+    },
+    "vertical": {
+      "presetName": "Vertical",
+      "message": "Vertical stacks the avatar and user details for profile-style layouts.",
+      "type": "info"
+    },
+    "with_territory": {
+      "presetName": "With Territory",
+      "message": "With Territory includes a territory label alongside the user identity.",
+      "type": "info"
+    }
+  }
 }

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

@@ -16,15 +16,16 @@
     },
     {
       "name": "Appearance",
-      "props": ["size", "orientation", "align", "nameStyle", "titleStyle", "bold", "avatarGrayscale"]
+      "props": ["size", "orientation", "align", "nameStyle", "titleStyle", "bold", "avatarGrayscale", "dark"]
     }
   ],
   "presets": [
     {
-      "name": "With avatar",
+      "name": "With Avatar",
       "props": {
         "name": "Anna Black",
         "title": "Engineer",
+        "subtitle": "Product team",
         "avatar": true,
         "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg",
         "size": "md",
@@ -32,7 +33,7 @@
       }
     },
     {
-      "name": "Text only",
+      "name": "Text Only",
       "props": {
         "name": "Anna Black",
         "title": "Engineer",
@@ -52,16 +53,6 @@
         "size": "lg"
       }
     },
-    {
-      "name": "Small",
-      "props": {
-        "name": "Anna Black",
-        "title": "Engineer",
-        "avatar": true,
-        "avatarUrl": "https://randomuser.me/api/portraits/women/44.jpg",
-        "size": "sm"
-      }
-    },
     {
       "name": "Vertical",
       "props": {
@@ -74,7 +65,7 @@
       }
     },
     {
-      "name": "With territory",
+      "name": "With Territory",
       "props": {
         "name": "Anna Black",
         "territory": "West",
@@ -85,5 +76,31 @@
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "with_avatar": {
+      "presetName": "With Avatar",
+      "message": "With Avatar shows the common horizontal user layout with avatar, title, and subtitle.",
+      "type": "info"
+    },
+    "text_only": {
+      "presetName": "Text Only",
+      "message": "Text Only turns avatar off for compact name-and-title displays.",
+      "type": "info"
+    },
+    "large": {
+      "presetName": "Large",
+      "message": "Large uses the lg size and subtitle for more prominent people rows.",
+      "type": "info"
+    },
+    "vertical": {
+      "presetName": "Vertical",
+      "message": "Vertical stacks the avatar and user details for profile-style layouts.",
+      "type": "info"
+    },
+    "with_territory": {
+      "presetName": "With Territory",
+      "message": "With Territory includes a territory label alongside the user identity.",
+      "type": "info"
+    }
+  }
 }

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

@@ -21,41 +21,55 @@
   ],
   "presets": [
     {
-      "name": "Million dollar · md",
+      "name": "Million Dollar",
       "props": {
         "badge": "million-dollar",
         "size": "md"
       }
     },
     {
-      "name": "Million dollar · sm",
+      "name": "Small",
       "props": {
         "badge": "million-dollar",
         "size": "sm"
       }
     },
     {
-      "name": "Million dollar · lg",
+      "name": "Large",
       "props": {
         "badge": "million-dollar",
         "size": "lg"
       }
     },
     {
-      "name": "Veteran · md",
+      "name": "Veteran",
       "props": {
         "badge": "veteran",
         "size": "md"
       }
-    },
-    {
-      "name": "Veteran · sm",
-      "props": {
-        "badge": "veteran",
-        "size": "sm"
-      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "million_dollar": {
+      "presetName": "Million Dollar",
+      "message": "Million Dollar uses the default badge artwork at medium size.",
+      "type": "info"
+    },
+    "small": {
+      "presetName": "Small",
+      "message": "Small shows the million-dollar badge at the compact sm size.",
+      "type": "info"
+    },
+    "large": {
+      "presetName": "Large",
+      "message": "Large shows the million-dollar badge at the prominent lg size.",
+      "type": "info"
+    },
+    "veteran": {
+      "presetName": "Veteran",
+      "message": "Veteran switches the badge artwork while keeping medium sizing.",
+      "type": "info"
+    }
+  }
 }

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

@@ -11,26 +11,43 @@
   ],
   "presets": [
     {
-      "name": "Million dollar · md",
+      "name": "Million Dollar",
       "props": { "badge": "million-dollar", "size": "md" }
     },
     {
-      "name": "Million dollar · sm",
+      "name": "Small",
       "props": { "badge": "million-dollar", "size": "sm" }
     },
     {
-      "name": "Million dollar · lg",
+      "name": "Large",
       "props": { "badge": "million-dollar", "size": "lg" }
     },
     {
-      "name": "Veteran · md",
+      "name": "Veteran",
       "props": { "badge": "veteran", "size": "md" }
-    },
-    {
-      "name": "Veteran · sm",
-      "props": { "badge": "veteran", "size": "sm" }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "million_dollar": {
+      "presetName": "Million Dollar",
+      "message": "Million Dollar uses the default badge artwork at medium size.",
+      "type": "info"
+    },
+    "small": {
+      "presetName": "Small",
+      "message": "Small shows the million-dollar badge at the compact sm size.",
+      "type": "info"
+    },
+    "large": {
+      "presetName": "Large",
+      "message": "Large shows the million-dollar badge at the prominent lg size.",
+      "type": "info"
+    },
+    "veteran": {
+      "presetName": "Veteran",
+      "message": "Veteran switches the badge artwork while keeping medium sizing.",
+      "type": "info"
+    }
+  }
 }

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

@@ -11,14 +11,15 @@
       "name": "Content",
       "props": [
         "date",
-        "variant",
-        "compact"
+        "variant"
       ]
     },
     {
       "name": "Appearance",
       "props": [
-        "align"
+        "compact",
+        "align",
+        "dark"
       ]
     }
   ],
@@ -44,7 +45,7 @@
       }
     },
     {
-      "name": "Compact weekday",
+      "name": "Compact",
       "props": {
         "date": "2026-04-09T12:00:00.000Z",
         "compact": true
@@ -60,5 +61,31 @@
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders the weekday with the month-day variant.",
+      "type": "info"
+    },
+    "day_only": {
+      "presetName": "Day only",
+      "message": "Day only switches variant to show just the weekday.",
+      "type": "info"
+    },
+    "expanded": {
+      "presetName": "Expanded",
+      "message": "Expanded shows the fuller stacked date treatment.",
+      "type": "info"
+    },
+    "compact": {
+      "presetName": "Compact",
+      "message": "Compact tightens the month-day layout for denser views.",
+      "type": "info"
+    },
+    "centered": {
+      "presetName": "Centered",
+      "message": "Centered changes alignment while keeping the month-day variant.",
+      "type": "info"
+    }
+  }
 }

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

@@ -2,11 +2,11 @@
   "groups": [
     {
       "name": "Content",
-      "props": ["date", "variant", "compact"]
+      "props": ["date", "variant"]
     },
     {
       "name": "Appearance",
-      "props": ["align"]
+      "props": ["compact", "align", "dark"]
     }
   ],
   "presets": [
@@ -31,7 +31,7 @@
       }
     },
     {
-      "name": "Compact weekday",
+      "name": "Compact",
       "props": {
         "date": "2026-04-09T12:00:00.000Z",
         "compact": true
@@ -47,5 +47,31 @@
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders the weekday with the month-day variant.",
+      "type": "info"
+    },
+    "day_only": {
+      "presetName": "Day only",
+      "message": "Day only switches variant to show just the weekday.",
+      "type": "info"
+    },
+    "expanded": {
+      "presetName": "Expanded",
+      "message": "Expanded shows the fuller stacked date treatment.",
+      "type": "info"
+    },
+    "compact": {
+      "presetName": "Compact",
+      "message": "Compact tightens the month-day layout for denser views.",
+      "type": "info"
+    },
+    "centered": {
+      "presetName": "Centered",
+      "message": "Centered changes alignment while keeping the month-day variant.",
+      "type": "info"
+    }
+  }
 }