playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -1,4 +1,5 @@
 {
+  "hiddenProps": ["inputOptions", "onChange"],
   "groups": [
     {
       "name": "Content",
@@ -6,7 +7,7 @@
     },
     {
       "name": "State",
-      "props": ["disabled", "checked"]
+      "props": ["checked", "disabled"]
     },
     {
       "name": "Appearance",
@@ -22,7 +23,7 @@
       }
     },
     {
-      "name": "With Error",
+      "name": "Checked",
       "props": {
         "name": "dark_mode",
         "value": "theme",
@@ -37,17 +38,24 @@
         "checked": true,
         "disabled": true
       }
-    },
-    {
-      "name": "Required",
-      "props": {
-        "name": "notifications",
-        "value": "push",
-        "size": "md",
-        "checked": true
-      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Default renders an unchecked small toggle with name and value for forms.",
+      "type": "info"
+    },
+    "checked": {
+      "presetName": "Checked",
+      "message": "Checked initializes the toggle in the on state.",
+      "type": "info"
+    },
+    "disabled": {
+      "presetName": "Disabled",
+      "message": "Disabled keeps the selected state visible while preventing changes.",
+      "type": "info"
+    }
+  }
 }

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

@@ -31,7 +31,19 @@
       "name": "Appearance",
       "props": [
         "showTooltip",
-        "forceOpenTooltip"
+        "forceOpenTooltip",
+        "position"
+      ]
+    },
+    {
+      "name": "Sizing",
+      "props": [
+        "width",
+        "minWidth",
+        "maxWidth",
+        "height",
+        "minHeight",
+        "maxHeight"
       ]
     }
   ],
@@ -45,47 +57,54 @@
       "children": "Hover me"
     },
     {
-      "name": "Bottom",
-      "props": {
-        "placement": "bottom",
-        "text": "Tooltip on bottom"
-      },
-      "children": "Hover me"
-    },
-    {
-      "name": "Left",
-      "props": {
-        "placement": "left",
-        "text": "Tooltip on the left"
-      },
-      "children": "Hover me"
-    },
-    {
-      "name": "Right",
+      "name": "With Icon",
       "props": {
+        "icon": "info-circle",
         "placement": "right",
-        "text": "Tooltip on the right"
+        "text": "Tooltip with an icon"
       },
       "children": "Hover me"
     },
     {
-      "name": "Click to open",
+      "name": "Click to Open",
       "props": {
         "placement": "top",
         "useClickToOpen": true,
         "text": "Click toggles this tooltip"
       },
       "children": "Click me"
+    },
+    {
+      "name": "Forced Open",
+      "props": {
+        "forceOpenTooltip": true,
+        "placement": "bottom",
+        "text": "Forced open for demos"
+      },
+      "children": "Always visible"
     }
   ],
   "conditionals": {},
   "hints": {
+    "top": {
+      "presetName": "Top",
+      "message": "Top uses the default hover behavior with the tooltip above the trigger.",
+      "type": "info"
+    },
+    "with_icon": {
+      "presetName": "With Icon",
+      "message": "With Icon adds an icon inside the tooltip content.",
+      "type": "info"
+    },
     "click_to_open": {
-      "when": {
-        "useClickToOpen": true
-      },
+      "presetName": "Click to Open",
       "message": "When click to open is on, the tooltip toggles on click instead of hover.",
       "type": "info"
+    },
+    "forced_open": {
+      "presetName": "Forced Open",
+      "message": "Forced Open keeps the tooltip visible, which is useful for demos and visual checks.",
+      "type": "info"
     }
   }
 }

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

@@ -1,5 +1,6 @@
 {
   "children": {
+    "editable": true,
     "default": "Hover me",
     "hideWhenPropSet": []
   },
@@ -9,7 +10,8 @@
       "name": "Behavior",
       "props": ["placement", "useClickToOpen", "interaction", "delay"]
     },
-    { "name": "Appearance", "props": ["showTooltip", "forceOpenTooltip"] }
+    { "name": "Appearance", "props": ["showTooltip", "forceOpenTooltip", "position"] },
+    { "name": "Sizing", "props": ["width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight"] }
   ],
   "presets": [
     {
@@ -18,36 +20,54 @@
       "children": "Hover me"
     },
     {
-      "name": "Bottom",
-      "props": { "placement": "bottom", "text": "Tooltip on bottom" },
-      "children": "Hover me"
-    },
-    {
-      "name": "Left",
-      "props": { "placement": "left", "text": "Tooltip on the left" },
-      "children": "Hover me"
-    },
-    {
-      "name": "Right",
-      "props": { "placement": "right", "text": "Tooltip on the right" },
+      "name": "With Icon",
+      "props": {
+        "icon": "info-circle",
+        "placement": "right",
+        "text": "Tooltip with an icon"
+      },
       "children": "Hover me"
     },
     {
-      "name": "Click to open",
+      "name": "Click to Open",
       "props": {
         "placement": "top",
         "useClickToOpen": true,
         "text": "Click toggles this tooltip"
       },
       "children": "Click me"
+    },
+    {
+      "name": "Forced Open",
+      "props": {
+        "forceOpenTooltip": true,
+        "placement": "bottom",
+        "text": "Forced open for demos"
+      },
+      "children": "Always visible"
     }
   ],
   "conditionals": {},
   "hints": {
+    "top": {
+      "presetName": "Top",
+      "message": "Top uses the default hover behavior with the tooltip above the trigger.",
+      "type": "info"
+    },
+    "with_icon": {
+      "presetName": "With Icon",
+      "message": "With Icon adds an icon inside the tooltip content.",
+      "type": "info"
+    },
     "click_to_open": {
-      "when": { "useClickToOpen": true },
+      "presetName": "Click to Open",
       "message": "When click to open is on, the tooltip toggles on click instead of hover.",
       "type": "info"
+    },
+    "forced_open": {
+      "presetName": "Forced Open",
+      "message": "Forced Open keeps the tooltip visible, which is useful for demos and visual checks.",
+      "type": "info"
     }
   }
 }

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

@@ -18,7 +18,9 @@
       "props": [
         "label",
         "name",
-        "options"
+        "options",
+        "inputDisplay",
+        "isMulti"
       ]
     },
     {
@@ -32,31 +34,32 @@
       ]
     },
     {
-      "name": "Appearance",
-      "props": [
-        "inputDisplay"
-      ]
-    },
-    {
-      "name": "Async & data",
+      "name": "Async & Data",
       "props": [
         "async",
-        "createable",
         "loadOptions",
         "getOptionLabel",
         "getOptionValue",
         "optionsByContext",
         "searchContextSelector",
-        "clearOnContextChange",
-        "preserveSearchInput"
+        "clearOnContextChange"
       ]
     },
     {
-      "name": "Advanced",
+      "name": "Behavior",
       "props": [
-        "components",
+        "createable",
+        "preserveSearchInput",
         "onChange"
       ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "components",
+        "dark",
+        "marginBottom"
+      ]
     }
   ],
   "presets": [
@@ -64,6 +67,7 @@
       "name": "Basic list",
       "props": {
         "label": "Colors",
+        "name": "color",
         "options": [
           {
             "label": "Orange",
@@ -85,10 +89,12 @@
       }
     },
     {
-      "name": "Pills display",
+      "name": "Count display",
       "props": {
         "label": "Tags",
-        "inputDisplay": "pills",
+        "name": "tags",
+        "inputDisplay": "none",
+        "isMulti": true,
         "options": [
           {
             "label": "Design",
@@ -106,57 +112,75 @@
       }
     },
     {
-      "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": "Ada",
+            "value": "ada"
           },
           {
-            "label": "South",
-            "value": "south"
+            "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": "Orange",
+            "value": "#FFA500"
           },
           {
-            "label": "Grace",
-            "value": "grace"
+            "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",
@@ -186,6 +210,14 @@
         "async": true
       }
     },
+    "requiredIndicator": {
+      "requires": "label"
+    },
+    "validation": {
+      "requires": {
+        "required": true
+      }
+    },
     "optionsByContext": {
       "requires": "searchContextSelector"
     },
@@ -194,12 +226,60 @@
     }
   },
   "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"
+    }
+  },
+  "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 />"
+      }
     }
   }
 }