playbook_ui_docs 16.7.0.pre.alpha.tablewidths16409 → 16.7.0.pre.rc.0

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

@@ -14,32 +14,31 @@
   ],
   "presets": [
     {
-      "name": "Default",
-      "props": { },
-      "children": "I am a detail kit"
+      "name": "Metadata",
+      "props": { "color": "light", "bold": false },
+      "children": "Updated Apr 9, 2026"
     },
     {
       "name": "Emphasis",
-      "props": { "bold": true },
+      "props": { "color": "default", "bold": true },
       "children": "Order #48291 · Processing"
     },
     {
-      "name": "Link color",
+      "name": "Link",
       "props": { "color": "link" },
       "children": "View documentation"
     },
     {
       "name": "Error status",
       "props": { "color": "error", "bold": true },
-      "children": "Payment failed"
+      "children": "Payment failed — card expired"
+    },
+    {
+      "name": "Inline label",
+      "props": { "tag": "span", "color": "lighter" },
+      "children": "Optional"
     }
   ],
   "conditionals": {},
-  "hints": {
-    "link_color": {
-      "presetName": "Link color",
-      "message": "Use the color prop to change the color of the detail kit",
-      "type": "info"
-    }
-  }
+  "hints": {}
 }

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

@@ -7,9 +7,7 @@
     "placement": "center",
     "shouldCloseOnOverlayClick": true,
     "size": "md",
-    "status": "",
-    "title": "Header Title is the Title Prop",
-    "text": "Hello Body Text, Nice to meet ya."
+    "status": ""
   },
   "children": {
     "editable": true,
@@ -25,21 +23,22 @@
         "title",
         "text",
         "cancelButton",
-        "confirmButton",
-        "onCancel",
-        "onClose",
-        "onConfirm",
-        "opened",
-        "onChange"
+        "confirmButton"
       ]
     },
     {
       "name": "Behavior",
       "props": [
+        "opened",
         "placement",
         "shouldCloseOnOverlayClick",
         "closeable",
-        "loading"
+        "loading",
+        "trigger",
+        "onClose",
+        "onCancel",
+        "onConfirm",
+        "onChange"
       ]
     },
     {
@@ -47,90 +46,69 @@
       "props": [
         "size",
         "status",
-        "fullHeight"
+        "fullHeight",
+        "portalClassName"
       ]
     }
   ],
   "presets": [
-    {
-      "name": "Default",
-      "props": {
-        "size": "md",
-        "title": "Header Title is the Title Prop",
-        "text": "Hello Body Text, Nice to meet ya.",
-        "cancelButton": "Cancel Button",
-        "confirmButton": "Okay"
-      }
-    },
     {
       "name": "Small",
       "props": {
         "size": "sm",
+        "opened": true,
         "title": "Small dialog",
         "text": "Narrow width for short confirmations and alerts."
       }
     },
+    {
+      "name": "Medium",
+      "props": {
+        "size": "md",
+        "opened": true,
+        "title": "Medium dialog",
+        "text": "Default size for most forms and standard content."
+      }
+    },
     {
       "name": "Large",
       "props": {
         "size": "lg",
+        "opened": true,
         "title": "Large dialog",
         "text": "Wider layout for dense content or two-column layouts."
       }
     },
     {
-      "name": "Status Alert",
+      "name": "Extra large",
       "props": {
-        "size": "status_size",
-        "status": "success",
-        "title": "Success",
-        "text": "Compact status layout for confirmations and feedback."
+        "size": "xl",
+        "opened": true,
+        "title": "Extra large dialog",
+        "text": "Maximum width before full-screen patterns."
       }
     },
     {
-      "name": "Compound components",
-      "structureMode": "subcomponents",
+      "name": "Content width",
       "props": {
-        "size": "sm"
-      },
-      "children": "Hello Body Text, Nice to meet ya."
+        "size": "content",
+        "opened": true,
+        "title": "Content-sized dialog",
+        "text": "Width follows the content instead of fixed breakpoints."
+      }
     },
     {
-      "name": "Full height compound",
-      "structureMode": "subcomponents",
+      "name": "Status size",
       "props": {
-        "fullHeight": true,
-        "size": "lg"
-      },
-      "children": "Custom dialog content goes here when you need more vertical space."
+        "size": "status_size",
+        "opened": true,
+        "status": "success",
+        "title": "Success",
+        "text": "Compact status layout for confirmations and feedback."
+      }
     }
   ],
-  "conditionals": {
-    "title": {
-      "structureMode": "simple"
-    },
-    "text": {
-      "structureMode": "simple"
-    },
-    "cancelButton": {
-      "structureMode": "simple"
-    },
-    "confirmButton": {
-      "structureMode": "simple"
-    },
-    "onCancel": {
-      "structureMode": "simple"
-    },
-    "onClose": {
-      "structureMode": "simple"
-    },
-    "onConfirm": {
-      "structureMode": "simple"
-    },
-    "opened": {
-      "structureMode": "simple"
-    }
-  },
+  "conditionals": {},
   "hints": {
     "status_dialog": {
       "when": {
@@ -138,50 +116,6 @@
       },
       "message": "Status dialogs show an icon, title, and body copy in a centered layout.",
       "type": "info"
-    },
-    "compound_components_info": {
-      "presetName": "Compound components",
-      "message": "Use Compound Components when you need custom header, body, or footer content instead of the simple title/text/button props API.",
-      "type": "info"
-    },
-    "full_height_info": {
-      "presetName": "Full height compound",
-      "message": "fullHeight is most useful with the compound structure when the dialog contains richer or scrollable content.",
-      "type": "info"
-    }
-  },
-  "structureModes": {
-    "default": "simple",
-    "modes": {
-      "simple": {
-        "label": "Simple",
-        "template": "<Dialog opened={dialogOpen} onCancel={closeDialog} onClose={closeDialog} onConfirm={closeDialog}{{props}} />",
-        "children": "",
-        "props": {
-          "size": "md",
-          "title": "Header Title is the Title Prop",
-          "text": "Hello Body Text, Nice to meet ya.",
-          "cancelButton": "Cancel Button",
-          "confirmButton": "Okay"
-        },
-        "imports": [
-          "Button"
-        ],
-        "wrapper": "const DialogPlaygroundExample = () => {\n  const [dialogOpen, setDialogOpen] = useState(false)\n  const openDialog = () => setDialogOpen(true)\n  const closeDialog = () => setDialogOpen(false)\n\n  return (\n    <>\n      <Button marginBottom=\"sm\" onClick={openDialog}>\n        Open Dialog\n      </Button>\n      {{component}}\n    </>\n  )\n}\n\n<DialogPlaygroundExample />"
-      },
-      "subcomponents": {
-        "label": "Compound Components",
-        "template": "<Dialog opened={dialogOpen} onClose={closeDialog}{{props}}>\n  <Dialog.Header>Header Title inside Dialog.Header</Dialog.Header>\n  <Dialog.Body>{{children}}</Dialog.Body>\n  <Dialog.Footer>\n    <Button onClick={closeDialog}>Okay</Button>\n    <Button onClick={closeDialog} variant=\"link\">Cancel Button</Button>\n  </Dialog.Footer>\n</Dialog>",
-        "children": "Hello Body Text, Nice to meet ya.",
-        "imports": [
-          "Button"
-        ],
-        "wrapper": "const DialogPlaygroundExample = () => {\n  const [dialogOpen, setDialogOpen] = useState(false)\n  const openDialog = () => setDialogOpen(true)\n  const closeDialog = () => setDialogOpen(false)\n\n  return (\n    <>\n      <Button marginBottom=\"sm\" onClick={openDialog}>\n        Open Dialog\n      </Button>\n      {{component}}\n    </>\n  )\n}\n\n<DialogPlaygroundExample />"
-      }
     }
-  },
-  "hiddenProps": [
-    "trigger",
-    "portalClassName"
-  ]
+  }
 }

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

@@ -1,143 +1,95 @@
 {
-  "structureModes": {
-    "default": "simple",
-    "modes": {
-      "simple": {
-        "label": "Simple",
-        "template": "<Dialog opened={dialogOpen} onCancel={closeDialog} onClose={closeDialog} onConfirm={closeDialog}{{props}} />",
-        "children": "",
-        "props": {
-          "size": "md",
-          "title": "Header Title is the Title Prop",
-          "text": "Hello Body Text, Nice to meet ya.",
-          "cancelButton": "Cancel Button",
-          "confirmButton": "Okay"
-        },
-        "imports": ["Button"],
-        "wrapper": "const DialogPlaygroundExample = () => {\n  const [dialogOpen, setDialogOpen] = useState(false)\n  const openDialog = () => setDialogOpen(true)\n  const closeDialog = () => setDialogOpen(false)\n\n  return (\n    <>\n      <Button marginBottom=\"sm\" onClick={openDialog}>\n        Open Dialog\n      </Button>\n      {{component}}\n    </>\n  )\n}\n\n<DialogPlaygroundExample />"
-      },
-      "subcomponents": {
-        "label": "Compound Components",
-        "template": "<Dialog opened={dialogOpen} onClose={closeDialog}{{props}}>\n  <Dialog.Header>Header Title inside Dialog.Header</Dialog.Header>\n  <Dialog.Body>{{children}}</Dialog.Body>\n  <Dialog.Footer>\n    <Button onClick={closeDialog}>Okay</Button>\n    <Button onClick={closeDialog} variant=\"link\">Cancel Button</Button>\n  </Dialog.Footer>\n</Dialog>",
-        "children": "Hello Body Text, Nice to meet ya.",
-        "imports": ["Button"],
-        "wrapper": "const DialogPlaygroundExample = () => {\n  const [dialogOpen, setDialogOpen] = useState(false)\n  const openDialog = () => setDialogOpen(true)\n  const closeDialog = () => setDialogOpen(false)\n\n  return (\n    <>\n      <Button marginBottom=\"sm\" onClick={openDialog}>\n        Open Dialog\n      </Button>\n      {{component}}\n    </>\n  )\n}\n\n<DialogPlaygroundExample />"
-      }
-    }
-  },
   "children": {
     "default": "Custom dialog content goes here when you are not using the title and text props."
   },
-  "hiddenProps": [
-    "trigger",
-    "portalClassName"
-  ],
-  "defaults": {
-    "closeable": true,
-    "placement": "center",
-    "shouldCloseOnOverlayClick": true,
-    "size": "md",
-    "title": "Header Title is the Title Prop",
-    "text": "Hello Body Text, Nice to meet ya."
-  },
   "groups": [
     {
       "name": "Content",
-      "props": ["title", "text", "cancelButton", "confirmButton", "onCancel", "onClose", "onConfirm", "opened", "onChange"]
+      "props": ["title", "text", "cancelButton", "confirmButton"]
     },
     {
       "name": "Behavior",
       "props": [
+        "opened",
         "placement",
         "shouldCloseOnOverlayClick",
         "closeable",
-        "loading"
+        "loading",
+        "trigger",
+        "onClose",
+        "onCancel",
+        "onConfirm",
+        "onChange"
       ]
     },
     {
       "name": "Appearance",
-      "props": ["size", "status", "fullHeight"]
+      "props": ["size", "status", "fullHeight", "portalClassName"]
     }
   ],
   "presets": [
-    {
-      "name": "Default",
-      "props": {
-        "size": "md",
-        "title": "Header Title is the Title Prop",
-        "text": "Hello Body Text, Nice to meet ya.",
-        "cancelButton": "Cancel Button",
-        "confirmButton": "Okay"
-      }
-    },
     {
       "name": "Small",
       "props": {
         "size": "sm",
+        "opened": true,
         "title": "Small dialog",
         "text": "Narrow width for short confirmations and alerts."
       }
     },
+    {
+      "name": "Medium",
+      "props": {
+        "size": "md",
+        "opened": true,
+        "title": "Medium dialog",
+        "text": "Default size for most forms and standard content."
+      }
+    },
     {
       "name": "Large",
       "props": {
         "size": "lg",
+        "opened": true,
         "title": "Large dialog",
         "text": "Wider layout for dense content or two-column layouts."
       }
     },
-        {
-      "name": "Status Alert",
+    {
+      "name": "Extra large",
       "props": {
-        "size": "status_size",
-        "status": "success",
-        "title": "Success",
-        "text": "Compact status layout for confirmations and feedback."
+        "size": "xl",
+        "opened": true,
+        "title": "Extra large dialog",
+        "text": "Maximum width before full-screen patterns."
       }
     },
     {
-      "name": "Compound components",
-      "structureMode": "subcomponents",
+      "name": "Content width",
       "props": {
-        "size": "sm"
-      },
-      "children": "Hello Body Text, Nice to meet ya."
+        "size": "content",
+        "opened": true,
+        "title": "Content-sized dialog",
+        "text": "Width follows the content instead of fixed breakpoints."
+      }
     },
     {
-      "name": "Full height compound",
-      "structureMode": "subcomponents",
+      "name": "Status size",
       "props": {
-        "fullHeight": true,
-        "size": "lg"
-      },
-      "children": "Custom dialog content goes here when you need more vertical space."
+        "size": "status_size",
+        "opened": true,
+        "status": "success",
+        "title": "Success",
+        "text": "Compact status layout for confirmations and feedback."
+      }
     }
   ],
-  "conditionals": {
-    "title": { "structureMode": "simple" },
-    "text": { "structureMode": "simple" },
-    "cancelButton": { "structureMode": "simple" },
-    "confirmButton": { "structureMode": "simple" },
-    "onCancel": { "structureMode": "simple" },
-    "onClose": { "structureMode": "simple" },
-    "onConfirm": { "structureMode": "simple" },
-    "opened": { "structureMode": "simple" }
-  },
+  "conditionals": {},
   "hints": {
     "status_dialog": {
       "when": { "status": "success" },
       "message": "Status dialogs show an icon, title, and body copy in a centered layout.",
       "type": "info"
-    },
-    "compound_components_info": {
-      "presetName": "Compound components",
-      "message": "Use Compound Components when you need custom header, body, or footer content instead of the simple title/text/button props API.",
-      "type": "info"
-    },
-    "full_height_info": {
-      "presetName": "Full height compound",
-      "message": "fullHeight is most useful with the compound structure when the dialog contains richer or scrollable content.",
-      "type": "info"
     }
   }
 }

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

@@ -2,82 +2,24 @@
   "template": "<DistributionBar{{props}} />",
   "propTargets": {},
   "defaults": {
-    "size": "lg",
-    "colors": [
-      "data_7",
-      "data_1",
-      "neutral"
-    ]
+    "size": "lg"
   },
   "groups": [
     {
-      "name": "Data",
+      "name": "Props",
       "props": [
-        "widths",
-        "colors"
-      ]
-    },
-    {
-      "name": "Appearance",
-      "props": [
-        "size"
+        "colors",
+        "size",
+        "widths"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {
-        "widths": [
-          1,
-          2,
-          3,
-          4,
-          5,
-          3,
-          3,
-          7
-        ]
-      }
-    },
-    {
-      "name": "Small",
-      "props": {
-        "widths": [
-          1,
-          2,
-          3,
-          4,
-          5,
-          3,
-          3,
-          7
-        ],
-        "size": "sm"
-      }
-    },
-    {
-      "name": "Custom colors",
-      "props": {
-        "colors": [
-          "data_7",
-          "data_1",
-          "neutral"
-        ],
-        "widths": [
-          4,
-          5,
-          3
-        ]
-      }
+      "props": {}
     }
   ],
   "conditionals": {},
-  "hints": {
-    "custom_colors": {
-      "presetName": "Custom colors",
-      "message": "Use the colors prop to change the colors of the distribution bar. Currently only the data and status colors will work for DistributionBar.",
-      "type": "info"
-    }
-  }
+  "hints": {}
 }

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height.jsx

@@ -26,24 +26,6 @@ const DropdownWithConstrainHeight = (props) => {
           options={options}
           {...props}
       />
-
-    <br />
-
-      <Dropdown
-          label="Subcomponent With Constrain Height"
-          options={options}
-          {...props}
-      >
-        <Dropdown.Trigger />
-        <Dropdown.Container constrainHeight>
-          {options.map((option) => (
-            <Dropdown.Option
-                key={option.id}
-                option={option}
-            />
-          ))}
-        </Dropdown.Container>
-      </Dropdown>
     </>
   )
 }

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_constrain_height_rails.html.erb

@@ -18,14 +18,3 @@
   constrain_height: true,
   label: "With Constrain Height"
 }) %>
-
-<br>
-
-<%= pb_rails("dropdown", props: {options: options, label: "Subcomponent With Constrain Height"}) do %>
-  <%= pb_rails("dropdown/dropdown_trigger") %>
-  <%= pb_rails("dropdown/dropdown_container", props: { constrain_height: true }) do %>
-    <% options.each do |option| %>
-      <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>
-    <% end %>
-  <% end %>
-<% end %>