playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -0,0 +1,231 @@
+{
+  "structureModes": {
+    "default": "toast",
+    "modes": {
+      "toast": {
+        "label": "Toast",
+        "template": "<FixedConfirmationToast{{props}} />",
+        "children": "",
+        "props": {
+          "open": true
+        }
+      },
+      "with_children": {
+        "label": "Children",
+        "template": "<FixedConfirmationToast{{props}}>\n  {{children}}\n</FixedConfirmationToast>",
+        "children": "<Title\n      dark\n      marginLeft=\"md\"\n      size={4}\n      text=\"Design & Handoff Process was moved to UX Designer Learning Track.\"\n  />\n  <Button\n      dark\n      onClick={() => alert(\"Undo clicked\")}\n      paddingRight=\"none\"\n      text=\"Undo\"\n      variant=\"link\"\n  />",
+        "props": {
+          "paddingY": "none",
+          "status": "success",
+          "text": null
+        }
+      },
+      "positioned": {
+        "label": "Positioned",
+        "template": "<FixedConfirmationToast\n    horizontal={horizontal}\n    onClose={() => setOpen(false)}\n    open={open}\n    text={`${vertical} ${horizontal}`}\n    vertical={vertical}{{props}}\n/>",
+        "children": "",
+        "props": {
+          "closeable": true,
+          "horizontal": null,
+          "onClose": null,
+          "open": null,
+          "status": "neutral",
+          "text": null,
+          "vertical": null
+        },
+        "wrapper": "const FixedConfirmationToastPositionedExample = () => {\n  const [open, setOpen] = useState(true)\n  const [vertical, setVertical] = useState('top')\n  const [horizontal, setHorizontal] = useState('center')\n\n  return (\n    <>\n      <Button\n          marginRight=\"xs\"\n          onClick={() => {\n            setVertical('top')\n            setHorizontal('center')\n            setOpen(true)\n          }}\n          text=\"Top Center\"\n          variant=\"secondary\"\n      />\n      <Button\n          marginRight=\"xs\"\n          onClick={() => {\n            setVertical('top')\n            setHorizontal('right')\n            setOpen(true)\n          }}\n          text=\"Top Right\"\n          variant=\"secondary\"\n      />\n      <Button\n          onClick={() => {\n            setVertical('bottom')\n            setHorizontal('right')\n            setOpen(true)\n          }}\n          text=\"Bottom Right\"\n          variant=\"secondary\"\n      />\n      {{component}}\n    </>\n  )\n}\n\n<FixedConfirmationToastPositionedExample />"
+      }
+    }
+  },
+  "children": {
+    "editable": true,
+    "default": ""
+  },
+  "defaults": {
+    "autoClose": 0,
+    "closeable": false,
+    "multiLine": false,
+    "navMarginTop": false,
+    "onClose": "() => {}",
+    "open": true,
+    "status": "success",
+    "text": "Items Successfully Moved",
+    "zIndex": "max"
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "status",
+        "text",
+        "icon"
+      ]
+    },
+    {
+      "name": "Behavior",
+      "props": [
+        "open",
+        "closeable",
+        "autoClose",
+        "onClose"
+      ]
+    },
+    {
+      "name": "Position",
+      "props": [
+        "vertical",
+        "horizontal",
+        "navMarginTop",
+        "zIndex"
+      ]
+    },
+    {
+      "name": "Layout",
+      "props": [
+        "multiLine"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Success",
+      "structureMode": "toast",
+      "props": {
+        "status": "success",
+        "text": "Items Successfully Moved"
+      }
+    },
+    {
+      "name": "Closeable",
+      "structureMode": "toast",
+      "props": {
+        "closeable": true,
+        "text": "I am a closeable toast"
+      }
+    },
+    {
+      "name": "Positioned",
+      "structureMode": "toast",
+      "props": {
+        "closeable": true,
+        "horizontal": "center",
+        "text": "I am a positioned toast",
+        "vertical": "top"
+      }
+    },
+    {
+      "name": "Custom Icon",
+      "structureMode": "toast",
+      "props": {
+        "icon": "file-pdf",
+        "status": "neutral",
+        "text": "Saved as PDF"
+      }
+    },
+    {
+      "name": "No Icon",
+      "structureMode": "toast",
+      "props": {
+        "icon": "none",
+        "status": "success",
+        "text": "Items Successfully Moved"
+      }
+    },
+    {
+      "name": "Multi Line",
+      "structureMode": "toast",
+      "props": {
+        "closeable": true,
+        "horizontal": "center",
+        "multiLine": true,
+        "status": "tip",
+        "text": "Multi-line is used when the given text will not fit on one line. Resize the screen to see the toast wrap the text.",
+        "vertical": "top"
+      }
+    },
+    {
+      "name": "Auto Close",
+      "structureMode": "toast",
+      "props": {
+        "autoClose": 3000,
+        "horizontal": "center",
+        "status": "tip",
+        "text": "I will disappear in 3 seconds.",
+        "vertical": "top"
+      }
+    },
+    {
+      "name": "With children",
+      "structureMode": "with_children",
+      "props": {
+        "status": "success",
+        "text": null
+      }
+    },
+    {
+      "name": "Positioned Controls",
+      "structureMode": "positioned",
+      "props": {
+        "closeable": true,
+        "status": "neutral"
+      }
+    }
+  ],
+  "conditionals": {
+    "horizontal": {
+      "requires": "vertical"
+    },
+    "navMarginTop": {
+      "requires": {
+        "vertical": "top"
+      }
+    }
+  },
+  "hints": {
+    "success": {
+      "presetName": "Success",
+      "message": "Success is the default confirmation toast pattern for completed actions.",
+      "type": "info"
+    },
+    "error_closeable": {
+      "presetName": "Closeable",
+      "message": "Closeable shows the dismiss icon and lets the user close the toast.",
+      "type": "info"
+    },
+    "neutral": {
+      "presetName": "Positioned",
+      "message": "Positioned sets both vertical and horizontal, which are both needed for fixed placement.",
+      "type": "info"
+    },
+    "custom_icon": {
+      "presetName": "Custom Icon",
+      "message": "Custom Icon replaces the default status icon while keeping the toast status styling.",
+      "type": "info"
+    },
+    "no_icon": {
+      "presetName": "No Icon",
+      "message": "No Icon uses icon=\"none\" to render text without any leading icon.",
+      "type": "info"
+    },
+    "multi_line": {
+      "presetName": "Multi Line",
+      "message": "Multi Line allows longer toast messages to wrap instead of staying on one line.",
+      "type": "info"
+    },
+    "auto_close": {
+      "presetName": "Auto Close",
+      "message": "Auto Close dismisses the toast after the configured duration in milliseconds.",
+      "type": "info"
+    },
+    "children": {
+      "presetName": "With children",
+      "message": "Children mode replaces text with composed content, matching the docs example with a title and Undo action.",
+      "type": "info"
+    },
+    "positioned_controls": {
+      "presetName": "Positioned Controls",
+      "message": "Positioned Controls keeps open, onClose, vertical, and horizontal in wrapper state so the buttons can reopen and move the toast.",
+      "type": "info"
+    }
+  }
+}

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

@@ -1,6 +1,14 @@
 {
   "template": "<Flex{{props}}>{{children}}</Flex>",
-  "propTargets": {},
+  "propTargets": {
+    "flexItemFixedSize": "FlexItem.props",
+    "flexItemGrow": "FlexItem.props",
+    "flexItemShrink": "FlexItem.props",
+    "flexItemFlex": "FlexItem.props",
+    "flexItemOrder": "FlexItem.props",
+    "flexItemAlignSelf": "FlexItem.props",
+    "flexItemDisplayFlex": "FlexItem.props"
+  },
   "defaults": {
     "horizontal": "left",
     "justify": "none",
@@ -15,11 +23,11 @@
   },
   "children": {
     "editable": true,
-    "default": "<Caption text=\"A\" /><Caption text=\"B\" /><Caption text=\"C\" />"
+    "default": "<Caption text=\"A\" />\n<Caption text=\"B\" />\n<Caption text=\"C\" />"
   },
   "groups": [
     {
-      "name": "Direction & flow",
+      "name": "Direction & Flow",
       "props": [
         "orientation",
         "reverse",
@@ -28,7 +36,7 @@
       ]
     },
     {
-      "name": "Primary axis",
+      "name": "Primary Axis",
       "props": [
         "horizontal",
         "justify",
@@ -36,98 +44,349 @@
       ]
     },
     {
-      "name": "Cross axis",
+      "name": "Cross Axis",
       "props": [
         "vertical",
         "align",
         "alignSelf"
       ]
+    },
+    {
+      "name": "Gap",
+      "props": [
+        "gap",
+        "rowGap",
+        "columnGap"
+      ]
+    },
+    {
+      "name": "FlexItem Props",
+      "props": [
+        "flexItemFixedSize",
+        "flexItemGrow",
+        "flexItemShrink",
+        "flexItemFlex",
+        "flexItemOrder",
+        "flexItemAlignSelf",
+        "flexItemDisplayFlex"
+      ]
     }
   ],
   "presets": [
     {
-      "name": "Row (start)",
+      "name": "Row",
+      "structureMode": "basic",
       "props": {
-        "orientation": "row",
-        "justify": "none",
         "horizontal": "left",
+        "justify": "none",
+        "orientation": "row",
         "vertical": "top"
       },
-      "children": "<Caption text=\"A\" /><Caption text=\"B\" /><Caption text=\"C\" />"
+      "children": "<Caption text=\"A\" />\n<Caption text=\"B\" />\n<Caption text=\"C\" />"
     },
     {
       "name": "Column",
+      "structureMode": "basic",
       "props": {
-        "orientation": "column",
-        "justify": "none",
         "horizontal": "left",
+        "justify": "none",
+        "orientation": "column",
         "vertical": "top"
       },
-      "children": "<Caption text=\"One\" /><Caption text=\"Two\" /><Caption text=\"Three\" />"
+      "children": "<Caption text=\"One\" />\n<Caption text=\"Two\" />\n<Caption text=\"Three\" />"
     },
     {
       "name": "Centered",
+      "structureMode": "basic",
       "props": {
-        "orientation": "row",
         "justify": "center",
+        "orientation": "row",
         "vertical": "center"
       },
       "children": "<Caption text=\"Centered\" />"
     },
     {
-      "name": "Space between",
+      "name": "Space Between",
+      "structureMode": "basic",
       "props": {
-        "orientation": "row",
         "justify": "between",
+        "orientation": "row",
         "vertical": "center"
       },
-      "children": "<Caption text=\"Left\" /><Caption text=\"Right\" />"
+      "children": "<Caption text=\"Left\" />\n<Caption text=\"Right\" />"
     },
     {
-      "name": "Space around",
+      "name": "Wrap",
+      "structureMode": "flex_items",
       "props": {
+        "gap": "xs",
+        "justify": "start",
         "orientation": "row",
-        "justify": "around",
-        "vertical": "center"
+        "wrap": true
       },
-      "children": "<Caption text=\"A\" /><Caption text=\"B\" /><Caption text=\"C\" />"
+      "children": "<FlexItem fixedSize=\"160px\">\n  {'Item 1'}\n</FlexItem>\n<FlexItem fixedSize=\"160px\">\n  {'Item 2'}\n</FlexItem>\n<FlexItem fixedSize=\"160px\">\n  {'Item 3'}\n</FlexItem>\n<FlexItem fixedSize=\"160px\">\n  {'Item 4'}\n</FlexItem>\n<FlexItem fixedSize=\"160px\">\n  {'Item 5'}\n</FlexItem>"
     },
     {
-      "name": "End aligned",
+      "name": "Gap",
+      "structureMode": "flex_items",
       "props": {
+        "gap": "sm",
         "orientation": "row",
-        "justify": "end",
-        "vertical": "center"
+        "wrap": true
       },
-      "children": "<Caption text=\"Trailing\" />"
+      "children": "<FlexItem>{'1'}</FlexItem>\n<FlexItem>{'2'}</FlexItem>\n<FlexItem>{'3'}</FlexItem>\n<FlexItem>{'4'}</FlexItem>"
     },
     {
-      "name": "Wrap",
+      "name": "Responsive Gap",
+      "structureMode": "flex_items",
       "props": {
+        "gap": {
+          "xs": "none",
+          "sm": "sm",
+          "md": "md",
+          "lg": "lg",
+          "xl": "xl"
+        },
         "orientation": "row",
-        "wrap": true,
-        "justify": "start"
+        "wrap": true
       },
-      "children": "<Caption text=\"Item 1\" /><Caption text=\"Item 2\" /><Caption text=\"Item 3\" /><Caption text=\"Item 4\" />"
+      "children": "<FlexItem fixedSize=\"96px\">{'1'}</FlexItem>\n<FlexItem fixedSize=\"96px\">{'2'}</FlexItem>\n<FlexItem fixedSize=\"96px\">{'3'}</FlexItem>\n<FlexItem fixedSize=\"96px\">{'4'}</FlexItem>"
     },
     {
-      "name": "Inline flex",
+      "name": "FlexItem Grow",
+      "structureMode": "controlled_flex_item",
       "props": {
-        "inline": true,
-        "orientation": "row",
-        "vertical": "center"
+        "flexItemGrow": true,
+        "gap": "xs"
       },
-      "children": "<Caption text=\"Inline\" /> <Caption text=\"chips\" />"
+      "children": "{'I grow'}"
     },
     {
-      "name": "Column (center items)",
+      "name": "FlexItem Fixed Size",
+      "structureMode": "controlled_flex_item",
       "props": {
-        "orientation": "column",
-        "align": "center"
+        "flexItemFixedSize": "240px",
+        "gap": "xs"
       },
-      "children": "<Caption text=\"Stacked\" /><Caption text=\"centered\" />"
+      "children": "{'240px'}"
+    },
+    {
+      "name": "FlexItem Order",
+      "structureMode": "controlled_flex_item",
+      "props": {
+        "flexItemOrder": "4",
+        "gap": "xs"
+      },
+      "children": "{'1'}"
+    },
+    {
+      "name": "FlexItem Align Self",
+      "structureMode": "controlled_flex_item",
+      "props": {
+        "flexItemAlignSelf": "center",
+        "gap": "xs",
+        "vertical": "stretch"
+      },
+      "children": "{'center'}"
+    },
+    {
+      "name": "Display FlexItem",
+      "structureMode": "controlled_flex_item",
+      "props": {
+        "flexItemDisplayFlex": true,
+        "gap": "xs"
+      },
+      "children": "<FlexItem>\n  {'We'}\n</FlexItem>\n<FlexItem>\n  {'Are'}\n</FlexItem>\n<FlexItem>\n  {'Being'}\n</FlexItem>\n<FlexItem>\n  {'Flexed'}\n</FlexItem>"
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "row": {
+      "presetName": "Row",
+      "message": "Row is the default Flex direction and keeps editable children as direct children of Flex.",
+      "type": "info"
+    },
+    "column": {
+      "presetName": "Column",
+      "message": "Column stacks the same editable children vertically.",
+      "type": "info"
+    },
+    "centered": {
+      "presetName": "Centered",
+      "message": "Centered combines justify=\"center\" with vertical=\"center\" for centered row content.",
+      "type": "info"
+    },
+    "space_between": {
+      "presetName": "Space Between",
+      "message": "Space Between spreads the first and last children across the primary axis.",
+      "type": "info"
+    },
+    "wrap": {
+      "presetName": "Wrap",
+      "message": "Wrap uses fixed-size FlexItem children so wrapping behavior is visible as the preview width changes.",
+      "type": "info"
+    },
+    "gap": {
+      "presetName": "Gap",
+      "message": "Gap applies spacing between FlexItem children without adding margins to the child content.",
+      "type": "info"
+    },
+    "responsive_gap": {
+      "presetName": "Responsive Gap",
+      "message": "Responsive Gap passes a breakpoint object to gap for different spacing at different viewport widths.",
+      "type": "info"
+    },
+    "flexitem_grow": {
+      "presetName": "FlexItem Grow",
+      "message": "FlexItem Grow toggles the first FlexItem's grow prop through the FlexItem Props controls.",
+      "type": "info"
+    },
+    "flexitem_fixed_size": {
+      "presetName": "FlexItem Fixed Size",
+      "message": "FlexItem Fixed Size applies fixedSize to the first FlexItem through the FlexItem Props controls.",
+      "type": "info"
+    },
+    "flexitem_order": {
+      "presetName": "FlexItem Order",
+      "message": "FlexItem Order applies visual ordering to the first FlexItem through the FlexItem Props controls.",
+      "type": "info"
+    },
+    "flexitem_align_self": {
+      "presetName": "FlexItem Align Self",
+      "message": "FlexItem Align Self applies cross-axis alignment to the first FlexItem through the FlexItem Props controls.",
+      "type": "info"
+    },
+    "display_flexitem": {
+      "presetName": "Display FlexItem",
+      "message": "Display FlexItem makes the first FlexItem act as a flex container for its editable children.",
+      "type": "info"
+    }
+  },
+  "structureModes": {
+    "default": "basic",
+    "modes": {
+      "basic": {
+        "label": "Basic",
+        "template": "<div className=\"flex-doc-example\">\n  <Flex{{props}}>\n    {{children}}\n  </Flex>\n</div>",
+        "children": "<Caption text=\"A\" />\n<Caption text=\"B\" />\n<Caption text=\"C\" />"
+      },
+      "flex_items": {
+        "label": "FlexItem Children",
+        "template": "<div className=\"flex-doc-example\">\n  <Flex{{props}}>\n    {{children}}\n  </Flex>\n</div>",
+        "children": "<FlexItem>\n  {'1'}\n</FlexItem>\n<FlexItem>\n  {'2'}\n</FlexItem>\n<FlexItem>\n  {'3'}\n</FlexItem>\n<FlexItem>\n  {'4'}\n</FlexItem>",
+        "props": {
+          "gap": "xs"
+        }
+      },
+      "controlled_flex_item": {
+        "label": "FlexItem Props",
+        "template": "<div className=\"flex-doc-example\">\n  <Flex{{props}}>\n    <FlexItem{{FlexItem.props}}>\n      {{children}}\n    </FlexItem>\n    <FlexItem>\n      {'2'}\n    </FlexItem>\n    <FlexItem>\n      {'3'}\n    </FlexItem>\n  </Flex>\n</div>",
+        "children": "{'1'}",
+        "props": {
+          "gap": "xs"
+        }
+      }
+    }
+  },
+  "customProps": {
+    "flexItemFixedSize": {
+      "type": "string",
+      "platforms": [
+        "react"
+      ]
+    },
+    "flexItemGrow": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ],
+      "default": false
+    },
+    "flexItemShrink": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ],
+      "default": false
+    },
+    "flexItemFlex": {
+      "type": "number",
+      "platforms": [
+        "react"
+      ]
+    },
+    "flexItemOrder": {
+      "type": "enum",
+      "platforms": [
+        "react"
+      ],
+      "values": [
+        "first",
+        "0",
+        "1",
+        "2",
+        "3",
+        "4",
+        "5",
+        "6",
+        "7",
+        "8",
+        "9",
+        "10",
+        "11",
+        "12"
+      ]
+    },
+    "flexItemAlignSelf": {
+      "type": "enum",
+      "platforms": [
+        "react"
+      ],
+      "values": [
+        "start",
+        "end",
+        "center",
+        "stretch"
+      ]
+    },
+    "flexItemDisplayFlex": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ],
+      "default": false
+    }
+  },
+  "propAliases": {
+    "flexItemFixedSize": "fixedSize",
+    "flexItemGrow": "grow",
+    "flexItemShrink": "shrink",
+    "flexItemFlex": "flex",
+    "flexItemOrder": "order",
+    "flexItemAlignSelf": "alignSelf",
+    "flexItemDisplayFlex": "displayFlex"
+  },
+  "propSyncOnEnable": {
+    "flexItemFixedSize": {
+      "structureMode": "controlled_flex_item"
+    },
+    "flexItemGrow": {
+      "structureMode": "controlled_flex_item"
+    },
+    "flexItemShrink": {
+      "structureMode": "controlled_flex_item"
+    },
+    "flexItemFlex": {
+      "structureMode": "controlled_flex_item"
+    },
+    "flexItemOrder": {
+      "structureMode": "controlled_flex_item"
+    },
+    "flexItemAlignSelf": {
+      "structureMode": "controlled_flex_item"
+    },
+    "flexItemDisplayFlex": {
+      "structureMode": "controlled_flex_item"
+    }
+  }
 }