playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -1,66 +1,198 @@
 {
+  "template": "<PbReactPopover\n      reference={popoverReference}\n      shouldClosePopover={handleShouldClosePopover}\n      show={showPopover}{{props}}\n  >\n    {{children}}\n  </PbReactPopover>",
+  "wrapper": "const PopoverPlayground = () => {\n  const [showPopover, setShowPopover] = useState(true)\n\n  const handleTogglePopover = () => {\n    setShowPopover((open) => !open)\n  }\n\n  const handleShouldClosePopover = (shouldClose) => {\n    setShowPopover(!shouldClose)\n  }\n\n  const popoverReference = (\n    <CircleIconButton\n        icon=\"info\"\n        onClick={handleTogglePopover}\n        variant=\"secondary\"\n    />\n  )\n\n  return (\n    <Flex\n        justify=\"center\"\n        minHeight=\"260px\"\n        orientation=\"row\"\n        vertical=\"center\"\n        width=\"100%\"\n    >\n      {{component}}\n    </Flex>\n  )\n}\n\n<PopoverPlayground />",
+  "externalImports": [
+    "import React, { useState } from 'react'"
+  ],
   "children": {
-    "default": "Popover body"
+    "editable": true,
+    "default": "I'm a popover. I can show content of any size."
+  },
+  "customProps": {
+    "placement": {
+      "type": "enum",
+      "platforms": ["react"],
+      "values": [
+        "top",
+        "top-start",
+        "top-end",
+        "bottom",
+        "bottom-start",
+        "bottom-end",
+        "left",
+        "left-start",
+        "left-end",
+        "right",
+        "right-start",
+        "right-end"
+      ]
+    },
+    "width": {
+      "type": "string",
+      "platforms": ["react"],
+      "default": ""
+    },
+    "maxHeight": {
+      "type": "string",
+      "platforms": ["react"],
+      "default": ""
+    },
+    "maxWidth": {
+      "type": "string",
+      "platforms": ["react"],
+      "default": ""
+    },
+    "zIndex": {
+      "type": "number",
+      "platforms": ["react"]
+    }
+  },
+  "hiddenProps": [
+    "reference",
+    "shouldClosePopover",
+    "show"
+  ],
+  "defaults": {
+    "closeOnClick": "outside",
+    "offset": true,
+    "placement": "top"
   },
   "groups": [
     {
       "name": "Behavior",
       "props": [
         "placement",
-        "show",
         "closeOnClick",
-        "reference",
-        "shouldClosePopover"
+        "offset",
+        "appendTo"
       ]
     },
-    { "name": "Appearance", "props": ["offset", "appendTo"] }
+    {
+      "name": "Size and Layering",
+      "props": [
+        "width",
+        "maxHeight",
+        "maxWidth",
+        "zIndex"
+      ]
+    }
   ],
   "presets": [
     {
-      "name": "Open — top",
-      "props": { "placement": "top", "show": true },
-      "children": "Popover on top"
+      "name": "Default",
+      "props": {
+        "closeOnClick": "outside",
+        "placement": "top"
+      },
+      "children": "I'm a popover. I can show content of any size."
     },
     {
-      "name": "Open — bottom",
-      "props": { "placement": "bottom", "show": true },
+      "name": "Bottom",
+      "props": {
+        "closeOnClick": "outside",
+        "offset": true,
+        "placement": "bottom"
+      },
       "children": "Popover on bottom"
     },
     {
-      "name": "Open — left",
-      "props": { "placement": "left", "show": true },
-      "children": "Popover on the left"
+      "name": "Right",
+      "props": {
+        "closeOnClick": "outside",
+        "offset": true,
+        "placement": "right"
+      },
+      "children": "Popover on the right"
     },
     {
-      "name": "Open — right",
-      "props": { "placement": "right", "show": true },
-      "children": "Popover on the right"
+      "name": "Right Start",
+      "props": {
+        "closeOnClick": "outside",
+        "offset": true,
+        "placement": "right-start"
+      },
+      "children": "Popover aligned to the start of the right side"
+    },
+    {
+      "name": "Right End",
+      "props": {
+        "closeOnClick": "outside",
+        "offset": true,
+        "placement": "right-end"
+      },
+      "children": "Popover aligned to the end of the right side"
     },
     {
-      "name": "Closed",
-      "props": { "placement": "bottom", "show": false },
-      "children": "Trigger content"
+      "name": "Actionable Content",
+      "props": {
+        "closeOnClick": "inside",
+        "offset": true,
+        "placement": "top"
+      },
+      "children": "<Body textAlign=\"center\">\n  <Button\n      onClick={() => alert('Example action')}\n      text=\"Learn More\"\n  />\n</Body>"
     },
     {
-      "name": "With offset",
-      "props": { "placement": "bottom", "show": true, "offset": true },
-      "children": "Extra spacing from the trigger"
+      "name": "Scrollable",
+      "props": {
+        "closeOnClick": "any",
+        "maxHeight": "150px",
+        "maxWidth": "240px",
+        "offset": true,
+        "placement": "top"
+      },
+      "children": "<Flex orientation=\"column\">\n  <Body\n      marginBottom=\"sm\"\n      text=\"Long popover content can scroll when maxHeight is set. Keep the width constrained so the popover remains readable near the trigger.\"\n  />\n  <Title\n      size={4}\n      text=\"Scrollable content\"\n  />\n</Flex>"
     },
     {
-      "name": "Close on outside click",
+      "name": "Custom Z Index",
       "props": {
-        "placement": "bottom",
-        "show": true,
-        "closeOnClick": "outside"
+        "closeOnClick": "outside",
+        "offset": true,
+        "placement": "top",
+        "zIndex": 3
       },
-      "children": "Click outside to dismiss"
+      "children": "I have a custom z-index of 3"
+    },
+    {
+      "name": "Append To Parent",
+      "props": {
+        "appendTo": "parent",
+        "closeOnClick": "outside",
+        "offset": true,
+        "placement": "bottom"
+      },
+      "children": "This popover is appended to the trigger parent."
     }
   ],
   "conditionals": {},
   "hints": {
-    "show_popover": {
-      "when": { "show": false },
-      "message": "Set show to true in the playground to render the popover content.",
+    "reference": {
+      "when": {},
+      "message": "The playground wraps Popover with local state, a CircleIconButton reference, and shouldClosePopover so closeOnClick can update the open state.",
+      "type": "info"
+    },
+    "close_inside": {
+      "presetName": "Actionable Content",
+      "message": "closeOnClick inside closes the popover after a click inside its body, which works well for button-style popovers.",
+      "type": "info"
+    },
+    "list": {
+      "presetName": "List",
+      "message": "Popover children can be composed from other kits, such as List and ListItem.",
+      "type": "info"
+    },
+    "scrollable": {
+      "presetName": "Scrollable",
+      "message": "maxHeight and maxWidth constrain large popover content and enable overflow handling.",
+      "type": "info"
+    },
+    "z_index": {
+      "presetName": "Custom Z Index",
+      "message": "zIndex is useful when a popover must sit above nearby positioned content.",
+      "type": "info"
+    },
+    "append_to_parent": {
+      "presetName": "Append To Parent",
+      "message": "appendTo can be body, parent, or a selector. Use parent when the popover should stay inside the trigger's local stacking context.",
       "type": "info"
     }
   }

data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx

@@ -19,18 +19,16 @@ const PopoverWithButton = (props) => {
         onClick={handleTogglePopover}
         variant="secondary"
     >
-      <Flex align="center">
+      <Flex 
+          align="center"
+          gap="xxs" 
+      >
         {"Filter By"}
-        <Flex
-            className={showPopover ? "fa-flip-vertical" : ""}
-            display="inline_flex"
-        >
-          <Icon
-              fixedWidth
-              icon="angle-down"
-              margin-left="xxs"
-          />
-        </Flex>
+        <Icon
+            fixedWidth
+            flip={showPopover ? "vertical" : "none"}
+            icon="angle-down"
+        />
       </Flex>
     </Button>
   )

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

@@ -2,9 +2,11 @@
   "template": "<ProgressPills{{props}} />",
   "propTargets": {},
   "defaults": {
-    "active": 0,
+    "active": 2,
     "fullWidthPill": false,
-    "steps": 3
+    "steps": 4,
+    "title": "Checkout",
+    "value": "Payment"
   },
   "groups": [
     {
@@ -24,7 +26,8 @@
     {
       "name": "Appearance",
       "props": [
-        "fullWidthPill"
+        "fullWidthPill",
+        "dark"
       ]
     }
   ],
@@ -47,15 +50,6 @@
         "value": "Payment"
       }
     },
-    {
-      "name": "Mid flow (5 steps)",
-      "props": {
-        "steps": 5,
-        "active": 3,
-        "title": "Onboarding",
-        "value": "Step 3 of 5"
-      }
-    },
     {
       "name": "Complete",
       "props": {
@@ -86,5 +80,24 @@
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "status": {
+      "when": {
+        "title": "Checkout"
+      },
+      "message": "Title and value add the status label above the pill row.",
+      "type": "info"
+    },
+    "full_width": {
+      "when": {
+        "fullWidthPill": true
+      },
+      "message": "Full-width pills stretch each segment across the available row.",
+      "type": "info"
+    },
+    "active_range": {
+      "message": "Active is zero-based for an empty state and counts completed pills up to the steps total.",
+      "type": "info"
+    }
+  }
 }

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

@@ -1,8 +1,15 @@
 {
+  "defaults": {
+    "active": 2,
+    "fullWidthPill": false,
+    "steps": 4,
+    "title": "Checkout",
+    "value": "Payment"
+  },
   "groups": [
     { "name": "Content", "props": ["title", "value"] },
     { "name": "Behavior", "props": ["steps", "active"] },
-    { "name": "Appearance", "props": ["fullWidthPill"] }
+    { "name": "Appearance", "props": ["fullWidthPill", "dark"] }
   ],
   "presets": [
     {
@@ -13,10 +20,6 @@
       "name": "Step 2 of 4",
       "props": { "steps": 4, "active": 2, "title": "Checkout", "value": "Payment" }
     },
-    {
-      "name": "Mid flow (5 steps)",
-      "props": { "steps": 5, "active": 3, "title": "Onboarding", "value": "Step 3 of 5" }
-    },
     {
       "name": "Complete",
       "props": {
@@ -47,5 +50,20 @@
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "status": {
+      "when": { "title": "Checkout" },
+      "message": "Title and value add the status label above the pill row.",
+      "type": "info"
+    },
+    "full_width": {
+      "when": { "fullWidthPill": true },
+      "message": "Full-width pills stretch each segment across the available row.",
+      "type": "info"
+    },
+    "active_range": {
+      "message": "Active is zero-based for an empty state and counts completed pills up to the steps total.",
+      "type": "info"
+    }
+  }
 }

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

@@ -4,7 +4,9 @@
   "defaults": {
     "align": "left",
     "muted": false,
-    "variant": "default"
+    "variant": "default",
+    "percent": "50",
+    "width": "100%"
   },
   "groups": [
     {
@@ -25,7 +27,9 @@
       "name": "Appearance",
       "props": [
         "variant",
-        "muted"
+        "muted",
+        "width",
+        "dark"
       ]
     }
   ],
@@ -37,41 +41,43 @@
       }
     },
     {
-      "name": "25%",
+      "name": "50%",
       "props": {
-        "percent": "25"
+        "percent": "50"
       }
     },
     {
-      "name": "50%",
+      "name": "100%",
       "props": {
-        "percent": "50"
+        "percent": "100"
       }
     },
     {
-      "name": "75%",
+      "name": "variant: positive",
       "props": {
-        "percent": "75"
+        "percent": "75",
+        "variant": "positive"
       }
     },
     {
-      "name": "100%",
+      "name": "Muted",
       "props": {
-        "percent": "100"
+        "muted": true,
+        "percent": "50"
       }
     },
     {
-      "name": "Positive 75%",
+      "name": "Value of Max",
       "props": {
-        "percent": "75",
-        "variant": "positive"
+        "value": 2,
+        "max": 10
       }
     },
     {
-      "name": "Warning 50%",
+      "name": "Fixed Width",
       "props": {
-        "percent": "50",
-        "variant": "warning"
+        "percent": "40",
+        "width": "120px"
       }
     },
     {
@@ -83,5 +89,32 @@
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "percent": {
+      "when": {
+        "percent": "50"
+      },
+      "message": "Percent accepts a number-like string and renders that width directly.",
+      "type": "info"
+    },
+    "value_max": {
+      "presetName": "Value of Max",
+      "message": "Use value with max when the progress should be calculated from a ratio.",
+      "type": "info"
+    },
+    "width": {
+      "when": {
+        "width": "120px"
+      },
+      "message": "Width controls the progress bar container; percent still controls the fill.",
+      "type": "info"
+    },
+    "variant: positive": {
+      "when": {
+        "variant": "positive"
+      },
+      "message": "Use the variant prop to set the color of the progress bar.",
+      "type": "info"
+    }
+  }
 }

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

@@ -1,22 +1,35 @@
 {
+  "defaults": {
+    "align": "left",
+    "muted": false,
+    "percent": "50",
+    "variant": "default",
+    "width": "100%"
+  },
   "groups": [
     { "name": "Content", "props": ["percent", "value", "max"] },
     { "name": "Behavior", "props": ["align"] },
-    { "name": "Appearance", "props": ["variant", "muted"] }
+    { "name": "Appearance", "props": ["variant", "muted", "width", "dark"] }
   ],
   "presets": [
     { "name": "0%", "props": { "percent": "0" } },
-    { "name": "25%", "props": { "percent": "25" } },
     { "name": "50%", "props": { "percent": "50" } },
-    { "name": "75%", "props": { "percent": "75" } },
     { "name": "100%", "props": { "percent": "100" } },
     {
-      "name": "Positive 75%",
+      "name": "variant: positive",
       "props": { "percent": "75", "variant": "positive" }
     },
     {
-      "name": "Warning 50%",
-      "props": { "percent": "50", "variant": "warning" }
+      "name": "Muted",
+      "props": { "muted": true, "percent": "50" }
+    },
+    {
+      "name": "Value of Max",
+      "props": { "value": 2, "max": 10 }
+    },
+    {
+      "name": "Fixed Width",
+      "props": { "percent": "40", "width": "120px" }
     },
     {
       "name": "Centered",
@@ -24,5 +37,26 @@
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "percent": {
+      "when": { "percent": "50" },
+      "message": "Percent accepts a number-like string and renders that width directly.",
+      "type": "info"
+    },
+    "value_max": {
+      "presetName": "Value of Max",
+      "message": "Use value with max when the progress should be calculated from a ratio.",
+      "type": "info"
+    },
+    "width": {
+      "when": { "width": "120px" },
+      "message": "Width controls the progress bar container; percent still controls the fill.",
+      "type": "info"
+    },
+    "variant: positive": {
+      "when": { "variant": "positive" },
+      "message": "Use the variant prop to set the color of the progress bar.",
+      "type": "info"
+    }
+  }
 }