playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -0,0 +1,312 @@
+{
+  "structureModes": {
+    "default": "single",
+    "modes": {
+      "single": {
+        "label": "Single",
+        "template": "<Filter{{props}}>\n  {{children}}\n</Filter>",
+        "children": "{({ closePopover }) => (\n    <form>\n      <TextInput\n          label=\"Full Name\"\n          placeholder=\"Enter name\"\n      />\n      <Select\n          blankSelection=\"Select One...\"\n          label=\"Territory\"\n          name=\"location\"\n          options={[\n            { value: 'USA' },\n            { value: 'Canada' },\n            { value: 'Brazil' },\n            { value: 'Philippines' },\n          ]}\n      />\n      <Flex spacing=\"between\">\n        <Button\n            onClick={closePopover}\n            text=\"Apply\"\n        />\n        <Button\n            text=\"Clear\"\n            variant=\"secondary\"\n        />\n      </Flex>\n    </form>\n  )}",
+        "props": {
+          "double": false,
+          "variant": ""
+        }
+      },
+      "double": {
+        "label": "Double",
+        "template": "<Filter{{props}}>\n  {{children}}\n</Filter>",
+        "children": "{({ closePopover }) => (\n    <form>\n      <TextInput\n          label=\"Full Name\"\n          placeholder=\"Enter name\"\n      />\n      <Select\n          blankSelection=\"Select One...\"\n          label=\"Territory\"\n          name=\"location\"\n          options={[\n            { value: 'USA' },\n            { value: 'Canada' },\n            { value: 'Brazil' },\n            { value: 'Philippines' },\n          ]}\n      />\n      <Flex spacing=\"between\">\n        <Button\n            onClick={closePopover}\n            text=\"Apply\"\n        />\n        <Button\n            text=\"Clear\"\n            variant=\"secondary\"\n        />\n      </Flex>\n    </form>\n  )}",
+        "props": {
+          "double": true,
+          "variant": ""
+        }
+      },
+      "sort_only": {
+        "label": "Sort Only",
+        "template": "<Filter{{props}} />",
+        "children": "",
+        "props": {
+          "double": false,
+          "filters": {},
+          "results": null,
+          "variant": ""
+        }
+      },
+      "sidebar": {
+        "label": "Sidebar",
+        "template": "<Filter\n    isCollapsed={isCollapsed}\n    onCollapse={toggleCollapse}{{props}}\n>\n  <Filter.Section headerText=\"Full Name\">\n    <TextInput placeholder=\"Enter name\" />\n  </Filter.Section>\n  <SectionSeparator />\n  <Filter.Section\n      collapsed={isCollapsed}\n      collapsible\n      headerText=\"Territory\"\n  >\n    <Select\n        blankSelection=\"Select One...\"\n        name=\"location\"\n        options={[\n          { value: 'USA' },\n          { value: 'Canada' },\n          { value: 'Brazil' },\n          { value: 'Philippines' },\n        ]}\n    />\n  </Filter.Section>\n  <SectionSeparator />\n  <Filter.Section\n      collapsed={isCollapsed}\n      collapsible\n      headerText=\"Products\"\n  >\n    <Checkbox text=\"Doors\" marginBottom=\"sm\" />\n    <Checkbox text=\"Windows\" marginBottom=\"sm\" />\n    <Checkbox text=\"Siding\" />\n  </Filter.Section>\n</Filter>",
+        "children": "",
+        "imports": ["useCollapsible"],
+        "props": {
+          "double": false,
+          "variant": "sidebar",
+          "width": "xs"
+        },
+        "wrapper": "const FilterSidebarExample = () => {\n  const [isCollapsed, toggleCollapse] = useCollapsible(true)\n\n  return {{component}}\n}\n\n<FilterSidebarExample />"
+      }
+    }
+  },
+  "children": {
+    "editable": false,
+    "default": ""
+  },
+  "defaults": {
+    "background": true,
+    "double": false,
+    "filters": {
+      "Full Name": "John Wick",
+      "City": "San Francisco"
+    },
+    "isCollapsed": false,
+    "minWidth": "360px",
+    "onCollapse": "() => {}",
+    "onSortChange": "() => {}",
+    "placement": "bottom-start",
+    "popoverProps": {},
+    "results": 546,
+    "sortOptions": {
+      "popularity": "Popularity",
+      "manager_title": "Manager's Title",
+      "manager_name": "Manager's Name"
+    },
+    "sortValue": [
+      {
+        "name": "popularity",
+        "dir": "desc"
+      }
+    ]
+  },
+  "groups": [
+    {
+      "name": "Layout",
+      "props": [
+        "double",
+        "variant",
+        "background",
+        "results"
+      ]
+    },
+    {
+      "name": "Filter State",
+      "props": [
+        "filters"
+      ]
+    },
+    {
+      "name": "Sorting",
+      "props": [
+        "sortOptions",
+        "sortValue",
+        "onSortChange"
+      ]
+    },
+    {
+      "name": "Popover",
+      "props": [
+        "placement",
+        "minWidth",
+        "maxHeight",
+        "popoverProps"
+      ]
+    },
+    {
+      "name": "Sidebar",
+      "props": []
+    }
+  ],
+  "hiddenProps": [
+    "isCollapsed",
+    "onCollapse"
+  ],
+  "requiredCodeProps": [
+    "filters",
+    "results",
+    "sortOptions",
+    "sortValue",
+    "onSortChange"
+  ],
+  "presets": [
+    {
+      "name": "Single Filter",
+      "structureMode": "single",
+      "props": {
+        "filters": {
+          "Full Name": "John Wick"
+        },
+        "minWidth": "360px",
+        "onSortChange": "() => {}",
+        "results": 546,
+        "sortOptions": {
+          "popularity": "Popularity",
+          "manager_title": "Manager's Title",
+          "manager_name": "Manager's Name"
+        },
+        "sortValue": [
+          {
+            "name": "popularity",
+            "dir": "desc"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Double Filter",
+      "structureMode": "double",
+      "props": {
+        "filters": {
+          "Full Name": "John Wick",
+          "City": "San Francisco"
+        },
+        "minWidth": "375px",
+        "onSortChange": "() => {}",
+        "results": 1,
+        "sortOptions": {
+          "popularity": "Popularity",
+          "manager_title": "Manager's Title",
+          "manager_name": "Manager's Name"
+        },
+        "sortValue": [
+          {
+            "name": "popularity",
+            "dir": "desc"
+          }
+        ]
+      }
+    },
+    {
+      "name": "No Background",
+      "structureMode": "single",
+      "props": {
+        "background": false,
+        "filters": {
+          "Full Name": "John Wick",
+          "City": "Las Vegas"
+        },
+        "minWidth": "360px",
+        "onSortChange": "() => {}",
+        "results": 3,
+        "sortOptions": {
+          "popularity": "Popularity",
+          "manager_title": "Manager's Title",
+          "manager_name": "Manager's Name"
+        },
+        "sortValue": [
+          {
+            "name": "popularity",
+            "dir": "desc"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Filter Only",
+      "structureMode": "single",
+      "props": {
+        "filters": {
+          "Full Name": "John Wick"
+        },
+        "minWidth": "360px"
+      }
+    },
+    {
+      "name": "Sort Only",
+      "structureMode": "sort_only",
+      "props": {
+        "onSortChange": "() => {}",
+        "sortOptions": {
+          "popularity": "Popularity",
+          "manager_title": "Manager's Title",
+          "manager_name": "Manager's Name"
+        },
+        "sortValue": [
+          {
+            "name": "popularity",
+            "dir": "desc"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Constrained Popover",
+      "structureMode": "double",
+      "props": {
+        "filters": {
+          "Full Name": "John Wick",
+          "City": "San Francisco"
+        },
+        "maxHeight": "360px",
+        "minWidth": "360px",
+        "onSortChange": "() => {}",
+        "results": 1,
+        "sortOptions": {
+          "popularity": "Popularity",
+          "manager_title": "Manager's Title",
+          "manager_name": "Manager's Name"
+        },
+        "sortValue": [
+          {
+            "name": "popularity",
+            "dir": "desc"
+          }
+        ]
+      }
+    },
+    {
+      "name": "Sidebar",
+      "structureMode": "sidebar",
+      "props": {
+        "onCollapse": "() => {}",
+        "results": 15,
+        "variant": "sidebar",
+        "width": "xs"
+      }
+    }
+  ],
+  "conditionals": {
+    "isCollapsed": {
+      "structureMode": "sidebar"
+    },
+    "onCollapse": {
+      "structureMode": "sidebar"
+    },
+    "maxHeight": {
+      "requires": "minWidth"
+    }
+  },
+  "hints": {
+    "single_filter": {
+      "presetName": "Single Filter",
+      "message": "Single Filter shows the compact layout with the filter trigger, active filters, result count, and sort menu in one row.",
+      "type": "info"
+    },
+    "double_filter": {
+      "presetName": "Double Filter",
+      "message": "Double Filter splits filter controls from the result count and sort controls, using a lower row for summary and sorting.",
+      "type": "info"
+    },
+    "no_background": {
+      "presetName": "No Background",
+      "message": "No Background renders the same filter controls without the Card wrapper.",
+      "type": "info"
+    },
+    "filter_only": {
+      "presetName": "Filter Only",
+      "message": "Filter Only keeps the filter trigger and selected filter display while omitting results and sorting props.",
+      "type": "info"
+    },
+    "sort_only": {
+      "presetName": "Sort Only",
+      "message": "Sort-only mode omits filter children and only renders the sort trigger.",
+      "type": "info"
+    },
+    "constrained_popover": {
+      "presetName": "Constrained Popover",
+      "message": "Constrained Popover demonstrates maxHeight and minWidth limits for larger filter forms inside the popover.",
+      "type": "info"
+    },
+    "sidebar": {
+      "presetName": "Sidebar",
+      "message": "Sidebar mode uses Filter.Section subcomponents and wrapper-managed collapse state so Expand All and Collapse All control every section.",
+      "type": "info"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_filter/docs/example.yml

@@ -12,6 +12,7 @@ examples:
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
   - filter_within_turbo_frames: Within Turbo Frames
+  - filter_interactive: Interactive Applied Filters
 
   react:
   - filter_default: Default
@@ -25,4 +26,5 @@ examples:
   - filter_placement: Filter Placement
   - filter_popover_props: Popover Props
   - filter_sidebar: Sidebar
+  - filter_interactive_react: Interactive Applied Filters
 

data/app/pb_kits/playbook/pb_filter/docs/index.js

@@ -8,4 +8,5 @@ export { default as FilterMaxWidth } from './_filter_max_width.jsx'
 export { default as FilterMaxHeight } from './_filter_max_height.jsx'
 export { default as FilterPlacement } from './_filter_placement.jsx'
 export { default as FilterPopoverProps } from './_filter_popover_props.jsx'
-export { default as FilterSidebar } from './_filter_sidebar.jsx'
+export { default as FilterSidebar } from './_filter_sidebar.jsx'
+export { default as FilterInteractiveReact } from './_filter_interactive_react.jsx'

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

@@ -5,33 +5,229 @@
     "closeable": false,
     "multiLine": false,
     "navMarginTop": false,
-    "status": "neutral"
+    "status": "success",
+    "autoClose": 0,
+    "onClose": "() => {}",
+    "open": true,
+    "text": "Items Successfully Moved",
+    "zIndex": "max"
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Content",
       "props": [
-        "autoClose",
-        "closeable",
-        "horizontal",
-        "icon",
-        "multiLine",
-        "navMarginTop",
-        "onClose",
-        "open",
         "status",
         "text",
+        "icon"
+      ]
+    },
+    {
+      "name": "Behavior",
+      "props": [
+        "open",
+        "closeable",
+        "autoClose",
+        "onClose"
+      ]
+    },
+    {
+      "name": "Position",
+      "props": [
         "vertical",
+        "horizontal",
+        "navMarginTop",
         "zIndex"
       ]
+    },
+    {
+      "name": "Layout",
+      "props": [
+        "multiLine"
+      ]
     }
   ],
   "presets": [
     {
-      "name": "Default",
-      "props": {}
+      "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": {},
-  "hints": {}
+  "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"
+    }
+  },
+  "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": ""
+  }
 }