playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -0,0 +1,180 @@
+{
+  "template": "<PhoneNumberInput{{props}} />",
+  "customProps": {
+    "id": {
+      "type": "string",
+      "platforms": ["react"],
+      "default": "phone-number-playground"
+    }
+  },
+  "hiddenProps": [
+    "isValid",
+    "onValidate"
+  ],
+  "defaults": {
+    "id": "phone-number-playground",
+    "initialCountry": "us",
+    "label": "Phone Number",
+    "name": "phone_number"
+  },
+  "groups": [
+    {
+      "name": "Input",
+      "props": ["id", "label", "name", "value", "disabled","onChange"]
+    },
+    {
+      "name": "Country",
+      "props": [
+        "initialCountry",
+        "preferredCountries",
+        "onlyCountries",
+        "excludeCountries",
+        "countrySearch"
+      ]
+    },
+    {
+      "name": "Validation",
+      "props": [
+        "required",
+        "requiredIndicator",
+        "error",
+        "strictMode"
+      ]
+    },
+    {
+      "name": "Formatting",
+      "props": [
+        "formatAsYouType",
+        "showPlaceholder",
+        "hiddenInputs"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "id": "phone-number-default",
+        "initialCountry": "us",
+        "label": "Phone Number",
+        "name": "phone_number"
+      }
+    },
+    {
+      "name": "Initial Country",
+      "props": {
+        "id": "phone-number-initial-country",
+        "initialCountry": "br",
+        "label": "Brazil Phone Number",
+        "name": "brazil_phone_number"
+      }
+    },
+    {
+      "name": "Preferred Countries",
+      "props": {
+        "id": "phone-number-preferred",
+        "initialCountry": "us",
+        "label": "Preferred Countries",
+        "name": "preferred_phone_number",
+        "preferredCountries": ["us", "br", "ph", "gb"]
+      }
+    },
+    {
+      "name": "Only Countries",
+      "props": {
+        "id": "phone-number-only-countries",
+        "initialCountry": "us",
+        "label": "North America",
+        "name": "north_america_phone_number",
+        "onlyCountries": ["us", "ca", "mx"]
+      }
+    },
+    {
+      "name": "Exclude Countries",
+      "props": {
+        "id": "phone-number-exclude-countries",
+        "excludeCountries": ["cn", "ru"],
+        "initialCountry": "us",
+        "label": "Filtered Countries",
+        "name": "filtered_phone_number"
+      }
+    },
+    {
+      "name": "Formatted",
+      "props": {
+        "id": "phone-number-formatted",
+        "formatAsYouType": true,
+        "initialCountry": "us",
+        "label": "Formatted Phone Number",
+        "name": "formatted_phone_number",
+        "showPlaceholder": true
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "id": "phone-number-disabled",
+        "disabled": true,
+        "initialCountry": "us",
+        "label": "Disabled Phone Number",
+        "name": "disabled_phone_number",
+        "value": "2155550100"
+      }
+    },
+    {
+      "name": "Country Search",
+      "props": {
+        "id": "phone-number-country-search",
+        "countrySearch": true,
+        "initialCountry": "us",
+        "label": "Country Search",
+        "name": "country_search_phone_number"
+      }
+    }
+  ],
+  "conditionals": {
+    "requiredIndicator": {
+      "requires": "required"
+    },
+    "hiddenInputs": {
+      "requires": "name"
+    }
+  },
+  "hints": {
+    "default": {
+      "when": {},
+      "message": "Default shows a phone number input.",
+      "type": "info"
+    },
+    "initial_country": {
+      "presetName": "Initial Country",
+      "message": "initialCountry accepts an ISO 3166-1 alpha-2 country code such as us, br, ph, or gb.",
+      "type": "info"
+    },
+    "preferred_countries": {
+      "presetName": "Preferred Countries",
+      "message": "preferredCountries moves those country codes to the top of the dropdown order.",
+      "type": "info"
+    },
+    "only_countries": {
+      "presetName": "Only Countries",
+      "message": "onlyCountries limits the dropdown to the listed country codes.",
+      "type": "info"
+    },
+    "exclude_countries": {
+      "presetName": "Exclude Countries",
+      "message": "excludeCountries removes the listed country codes from the dropdown.",
+      "type": "info"
+    },
+    "formatted": {
+      "presetName": "Formatted",
+      "message": "formatAsYouType formats the visible value as the user types; showPlaceholder asks intl-tel-input to provide an example number.",
+      "type": "info"
+    },
+    "country_search": {
+      "presetName": "Country Search",
+      "message": "countrySearch allows users to search for a specific Country within the dropdown. If the range of countries has been limited, only the selected countries will be searchable.",
+      "type": "info"
+    }
+  }
+}

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

@@ -3,7 +3,8 @@
   "propTargets": {},
   "defaults": {
     "variant": "neutral",
-    "textTransform": "lowercase"
+    "textTransform": "lowercase",
+    "text": "neutral"
   },
   "children": {
     "editable": true,
@@ -47,60 +48,26 @@
       "children": ""
     },
     {
-      "name": "Success",
+      "name": "Preserve Casing",
       "props": {
-        "text": "Success",
-        "variant": "success",
-        "textTransform": "none"
-      },
-      "children": ""
-    },
-    {
-      "name": "Warning",
-      "props": {
-        "text": "Warning",
-        "variant": "warning",
-        "textTransform": "none"
-      },
-      "children": ""
-    },
-    {
-      "name": "Error",
-      "props": {
-        "text": "Error",
-        "variant": "error",
-        "textTransform": "none"
-      },
-      "children": ""
-    },
-    {
-      "name": "Info",
-      "props": {
-        "text": "Info",
-        "variant": "info",
-        "textTransform": "none"
-      },
-      "children": ""
-    },
-    {
-      "name": "Lowercase label",
-      "props": {
-        "text": "draft",
+        "text": "DRAFT",
         "variant": "neutral",
-        "textTransform": "lowercase"
-      },
-      "children": ""
-    },
-    {
-      "name": "Preserve casing",
-      "props": {
-        "text": "v2.4.0",
-        "variant": "primary",
         "textTransform": "none"
       },
       "children": ""
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "variant": {
+      "when": {},
+      "message": "variant controls the visual color for the pill.",
+      "type": "info"
+    },
+    "text_transform": {
+      "presetName": "Preserve Casing",
+      "message": "Set textTransform to none when the label includes meaningful casing, versions, or abbreviations.",
+      "type": "info"
+    }
+  }
 }

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

@@ -1,4 +1,9 @@
 {
+  "defaults": {
+    "text": "neutral",
+    "variant": "neutral",
+    "textTransform": "lowercase"
+  },
   "groups": [
     {
       "name": "Content",
@@ -12,45 +17,43 @@
   "presets": [
     {
       "name": "Neutral",
-      "props": { "text": "neutral", "variant": "neutral", "textTransform": "lowercase" },
+      "props": {
+        "text": "neutral",
+        "variant": "neutral",
+        "textTransform": "lowercase"
+      },
       "children": ""
     },
     {
       "name": "Primary",
-      "props": { "text": "Primary", "variant": "primary", "textTransform": "none" },
+      "props": {
+        "text": "Primary",
+        "variant": "primary",
+        "textTransform": "none"
+      },
       "children": ""
     },
     {
-      "name": "Success",
-      "props": { "text": "Success", "variant": "success", "textTransform": "none" },
-      "children": ""
-    },
-    {
-      "name": "Warning",
-      "props": { "text": "Warning", "variant": "warning", "textTransform": "none" },
-      "children": ""
-    },
-    {
-      "name": "Error",
-      "props": { "text": "Error", "variant": "error", "textTransform": "none" },
-      "children": ""
-    },
-    {
-      "name": "Info",
-      "props": { "text": "Info", "variant": "info", "textTransform": "none" },
-      "children": ""
-    },
-    {
-      "name": "Lowercase label",
-      "props": { "text": "draft", "variant": "neutral", "textTransform": "lowercase" },
-      "children": ""
-    },
-    {
-      "name": "Preserve casing",
-      "props": { "text": "v2.4.0", "variant": "primary", "textTransform": "none" },
+      "name": "Preserve Casing",
+      "props": {
+        "text": "DRAFT",
+        "variant": "neutral",
+        "textTransform": "none"
+      },
       "children": ""
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "variant": {
+      "when": {},
+      "message": "variant controls the visual color for the pill.",
+      "type": "info"
+    },
+    "text_transform": {
+      "presetName": "Preserve Casing",
+      "message": "Set textTransform to none when the label includes meaningful casing, versions, or abbreviations.",
+      "type": "info"
+    }
+  }
 }

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

@@ -1,104 +1,213 @@
 {
-  "template": "<Popover{{props}}>{{children}}</Popover>",
+  "template": "<PbReactPopover\n      reference={popoverReference}\n      shouldClosePopover={handleShouldClosePopover}\n      show={showPopover}{{props}}\n  >\n    {{children}}\n  </PbReactPopover>",
   "propTargets": {},
   "defaults": {
     "appendTo": "body",
-    "closeOnClick": "none",
-    "offset": false,
+    "closeOnClick": "outside",
+    "offset": true,
     "show": false,
-    "shouldClosePopover": "noop"
+    "shouldClosePopover": "noop",
+    "placement": "top"
   },
   "children": {
     "editable": true,
-    "default": "Popover body"
+    "default": "I'm a popover. I can show content of any size."
   },
   "groups": [
     {
       "name": "Behavior",
       "props": [
         "placement",
-        "show",
         "closeOnClick",
-        "reference",
-        "shouldClosePopover"
+        "offset",
+        "appendTo"
       ]
     },
     {
-      "name": "Appearance",
+      "name": "Size and Layering",
       "props": [
-        "offset",
-        "appendTo"
+        "width",
+        "maxHeight",
+        "maxWidth",
+        "zIndex"
       ]
     }
   ],
   "presets": [
     {
-      "name": "Open — top",
+      "name": "Default",
       "props": {
-        "placement": "top",
-        "show": true
+        "closeOnClick": "outside",
+        "placement": "top"
       },
-      "children": "Popover on top"
+      "children": "I'm a popover. I can show content of any size."
     },
     {
-      "name": "Open — bottom",
+      "name": "Bottom",
       "props": {
-        "placement": "bottom",
-        "show": true
+        "closeOnClick": "outside",
+        "offset": true,
+        "placement": "bottom"
       },
       "children": "Popover on bottom"
     },
     {
-      "name": "Open — left",
+      "name": "Right",
       "props": {
-        "placement": "left",
-        "show": true
+        "closeOnClick": "outside",
+        "offset": true,
+        "placement": "right"
       },
-      "children": "Popover on the left"
+      "children": "Popover on the right"
     },
     {
-      "name": "Open — right",
+      "name": "Right Start",
       "props": {
-        "placement": "right",
-        "show": true
+        "closeOnClick": "outside",
+        "offset": true,
+        "placement": "right-start"
       },
-      "children": "Popover on the right"
+      "children": "Popover aligned to the start of the right side"
     },
     {
-      "name": "Closed",
+      "name": "Right End",
       "props": {
-        "placement": "bottom",
-        "show": false
+        "closeOnClick": "outside",
+        "offset": true,
+        "placement": "right-end"
       },
-      "children": "Trigger content"
+      "children": "Popover aligned to the end of the right side"
     },
     {
-      "name": "With offset",
+      "name": "Actionable Content",
       "props": {
-        "placement": "bottom",
-        "show": true,
-        "offset": true
+        "closeOnClick": "inside",
+        "offset": true,
+        "placement": "top"
       },
-      "children": "Extra spacing from the trigger"
+      "children": "<Body textAlign=\"center\">\n  <Button\n      onClick={() => alert('Example action')}\n      text=\"Learn More\"\n  />\n</Body>"
     },
     {
-      "name": "Close on outside click",
+      "name": "Scrollable",
       "props": {
-        "placement": "bottom",
-        "show": true,
-        "closeOnClick": "outside"
+        "closeOnClick": "any",
+        "maxHeight": "150px",
+        "maxWidth": "240px",
+        "offset": true,
+        "placement": "top"
       },
-      "children": "Click outside to dismiss"
+      "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": "Custom Z Index",
+      "props": {
+        "closeOnClick": "outside",
+        "offset": true,
+        "placement": "top",
+        "zIndex": 3
+      },
+      "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"
+    }
+  },
+  "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'"
+  ],
+  "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"
+  ]
 }