playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -2,25 +2,78 @@
   "template": "<Legend{{props}} />",
   "propTargets": {},
   "defaults": {
-    "color": "data_1"
+    "color": "data_1",
+    "text": "Revenue",
+    "dark": false
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Content",
+      "props": [
+        "text",
+        "prefixText"
+      ]
+    },
+    {
+      "name": "Appearance",
       "props": [
         "color",
-        "dark",
-        "prefixText",
-        "text"
+        "dark"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "props": {
+        "text": "Revenue",
+        "color": "data_1"
+      }
+    },
+    {
+      "name": "With Prefix",
+      "props": {
+        "prefixText": "2026",
+        "text": "Revenue",
+        "color": "data_2"
+      }
+    },
+    {
+      "name": "Product Color",
+      "props": {
+        "text": "Roofing",
+        "color": "product_5_background"
+      }
+    },
+    {
+      "name": "Custom Hex",
+      "props": {
+        "text": "Custom segment",
+        "color": "#7b61ff"
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Use the color, prefixText, and text props to render a legend.",
+      "type": "info"
+    },
+    "with_prefix": {
+      "presetName": "With Prefix",
+      "message": "Use the prefixText prop to emphasize the prefix text before the main legend text.",
+      "type": "info"
+    },
+    "custom_hex": {
+      "presetName": "Custom Hex",
+      "message": "Use the color prop to pass a hex color instead of a Playbook color class.",
+      "type": "info"
+    },
+    "product_color": {
+      "presetName": "Product Color",
+      "message": "Use the color prop to change the color of the legend.",
+      "type": "info"
+    }
+  }
 }

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

@@ -0,0 +1,77 @@
+{
+  "defaults": {
+    "text": "Revenue",
+    "color": "data_1",
+    "dark": false
+  },
+  "groups": [
+    {
+      "name": "Content",
+      "props": [
+        "text",
+        "prefixText"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "color",
+        "dark"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "text": "Revenue",
+        "color": "data_1"
+      }
+    },
+    {
+      "name": "With Prefix",
+      "props": {
+        "prefixText": "2026",
+        "text": "Revenue",
+        "color": "data_2"
+      }
+    },
+    {
+      "name": "Product Color",
+      "props": {
+        "text": "Roofing",
+        "color": "product_5_background"
+      }
+    },
+    {
+      "name": "Custom Hex",
+      "props": {
+        "text": "Custom segment",
+        "color": "#7b61ff"
+      }
+    }
+  ],
+  "conditionals": {},
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "Use the color, prefixText, and text props to render a legend.",
+      "type": "info"
+    },
+    "with_prefix": {
+      "presetName": "With Prefix",
+      "message": "Use the prefixText prop to emphasize the prefix text before the main legend text.",
+      "type": "info"
+    },
+    "custom_hex": {
+      "presetName": "Custom Hex",
+      "message": "Use the color prop to pass a hex color instead of a Playbook color class.",
+      "type": "info"
+    },
+    "product_color": {
+      "presetName": "Product Color",
+      "message": "Use the color prop to change the color of the legend.",
+      "type": "info"
+    }
+  }
+}

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

@@ -6,40 +6,188 @@
     "enableDrag": false,
     "layout": "",
     "ordered": false,
-    "xpadding": false
+    "xpadding": false,
+    "size": ""
   },
   "children": {
     "editable": true,
-    "default": "List content",
-    "hideWhenPropSet": [
-      "text"
-    ]
+    "default": "<ListItem>Item 1</ListItem>\n<ListItem>Item 2</ListItem>\n<ListItem>Item 3</ListItem>",
+    "hideWhenPropSet": []
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Layout",
       "props": [
-        "borderless",
-        "dark",
-        "enableDrag",
         "layout",
-        "ordered",
-        "role",
-        "tabIndex",
-        "text",
         "size",
-        "variant",
-        "xpadding"
+        "ordered"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "borderless",
+        "xpadding",
+        "dark"
+      ]
+    },
+    {
+      "name": "Behavior",
+      "props": [
+        "enableDrag"
+      ]
+    },
+    {
+      "name": "Accessibility",
+      "props": [
+        "role",
+        "tabIndex"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
+      "structureMode": "default",
       "props": {},
-      "children": "List content"
+      "children": "<ListItem>Item 1</ListItem>\n<ListItem>Item 2</ListItem>\n<ListItem>Item 3</ListItem>"
+    },
+    {
+      "name": "Ordered",
+      "structureMode": "default",
+      "props": {
+        "ordered": true
+      },
+      "children": "<ListItem>Step 1</ListItem>\n<ListItem>Step 2</ListItem>\n<ListItem>Step 3</ListItem>"
+    },
+    {
+      "name": "Borderless",
+      "structureMode": "default",
+      "props": {
+        "borderless": true
+      },
+      "children": "<ListItem>Discovery</ListItem>\n<ListItem>Design</ListItem>\n<ListItem>Build</ListItem>"
+    },
+    {
+      "name": "Large",
+      "structureMode": "default",
+      "props": {
+        "size": "large"
+      },
+      "children": "<ListItem>Large item 1</ListItem>\n<ListItem>Large item 2</ListItem>\n<ListItem>Large item 3</ListItem>"
+    },
+    {
+      "name": "Extra Padding",
+      "structureMode": "default",
+      "props": {
+        "xpadding": true
+      },
+      "children": "<ListItem>Spaced item 1</ListItem>\n<ListItem>Spaced item 2</ListItem>\n<ListItem>Spaced item 3</ListItem>"
+    },
+    {
+      "name": "Layout Left",
+      "structureMode": "default",
+      "props": {
+        "layout": "left"
+      },
+      "children": "<ListItem><Title size={4} text=\"Label\" /><Currency amount=\"2,000.50\" label=\"Caption\" size=\"sm\" /></ListItem>\n<ListItem><Title size={4} text=\"Label\" /><Currency amount=\"1,425.00\" label=\"Caption\" size=\"sm\" /></ListItem>"
+    },
+    {
+      "name": "Layout Right",
+      "structureMode": "default",
+      "props": {
+        "layout": "right"
+      },
+      "children": "<ListItem><Title size={4} text=\"Label\" /><Currency amount=\"2,000.50\" label=\"Caption\" size=\"sm\" /></ListItem>\n<ListItem><Title size={4} text=\"Label\" /><Currency amount=\"1,425.00\" label=\"Caption\" size=\"sm\" /></ListItem>"
+    },
+    {
+      "name": "Draggable",
+      "structureMode": "draggable",
+      "props": {
+        "enableDrag": true
+      }
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "List is composed with ListItem children; edit children to change the rows.",
+      "type": "info"
+    },
+    "ordered": {
+      "presetName": "Ordered",
+      "message": "Ordered switches the underlying list from ul to ol while keeping ListItem children.",
+      "type": "info"
+    },
+    "borderless": {
+      "presetName": "Borderless",
+      "message": "Borderless removes the item dividers for a quieter list treatment.",
+      "type": "info"
+    },
+    "large": {
+      "presetName": "Large",
+      "message": "Large applies the list size class so each row has the larger spacing treatment.",
+      "type": "info"
+    },
+    "extra_padding": {
+      "presetName": "Extra Padding",
+      "message": "Extra Padding adds horizontal item padding through the xpadding prop.",
+      "type": "info"
+    },
+    "layout_left": {
+      "presetName": "Layout Left",
+      "message": "Layout Left aligns composed item content using the list layout_left treatment.",
+      "type": "info"
+    },
+    "layout_right": {
+      "presetName": "Layout Right",
+      "message": "Layout Right mirrors the composed item layout for right-aligned supporting content.",
+      "type": "info"
+    },
+    "draggable": {
+      "presetName": "Draggable",
+      "message": "Draggable wraps List in DraggableProvider and gives each ListItem a dragId.",
+      "type": "info"
+    }
+  },
+  "structureModes": {
+    "default": "default",
+    "modes": {
+      "default": {
+        "label": "List",
+        "template": "<List{{props}}>\n  {{children}}\n</List>",
+        "children": "<ListItem>Item 1</ListItem>\n<ListItem>Item 2</ListItem>\n<ListItem>Item 3</ListItem>"
+      },
+      "draggable": {
+        "label": "Draggable List",
+        "template": "<DraggableProvider\n    initialItems={initialItems}\n    onReorder={setItems}\n>\n  <List{{props}}>\n    {items.map(({ id, text }) => (\n      <ListItem\n          dragId={id}\n          key={id}\n      >\n        {text}\n      </ListItem>\n    ))}\n  </List>\n</DraggableProvider>",
+        "children": "",
+        "props": {
+          "enableDrag": true
+        },
+        "wrapper": "const initialItems = [\n  { id: 'list-item-1', text: 'Confirm scope' },\n  { id: 'list-item-2', text: 'Design states' },\n  { id: 'list-item-3', text: 'Ship playground' },\n]\n\nconst ListPlaygroundExample = () => {\n  const [items, setItems] = useState(initialItems)\n\n  return {{component}}\n}\n\n<ListPlaygroundExample />"
+      }
+    }
+  },
+  "hiddenProps": [
+    "text",
+    "variant"
+  ],
+  "customProps": {
+    "size": {
+      "type": "enum",
+      "platforms": [
+        "react"
+      ],
+      "values": [
+        "large"
+      ]
+    }
+  },
+  "propSyncOnEnable": {
+    "enableDrag": {
+      "structureMode": "draggable"
+    }
+  }
 }

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

@@ -0,0 +1,191 @@
+{
+  "structureModes": {
+    "default": "default",
+    "modes": {
+      "default": {
+        "label": "List",
+        "template": "<List{{props}}>\n  {{children}}\n</List>",
+        "children": "<ListItem>Item 1</ListItem>\n<ListItem>Item 2</ListItem>\n<ListItem>Item 3</ListItem>"
+      },
+      "draggable": {
+        "label": "Draggable List",
+        "template": "<DraggableProvider\n    initialItems={initialItems}\n    onReorder={setItems}\n>\n  <List{{props}}>\n    {items.map(({ id, text }) => (\n      <ListItem\n          dragId={id}\n          key={id}\n      >\n        {text}\n      </ListItem>\n    ))}\n  </List>\n</DraggableProvider>",
+        "children": "",
+        "props": {
+          "enableDrag": true
+        },
+        "wrapper": "const initialItems = [\n  { id: 'list-item-1', text: 'Confirm scope' },\n  { id: 'list-item-2', text: 'Design states' },\n  { id: 'list-item-3', text: 'Ship playground' },\n]\n\nconst ListPlaygroundExample = () => {\n  const [items, setItems] = useState(initialItems)\n\n  return {{component}}\n}\n\n<ListPlaygroundExample />"
+      }
+    }
+  },
+  "children": {
+    "editable": true,
+    "default": "<ListItem>Item 1</ListItem>\n<ListItem>Item 2</ListItem>\n<ListItem>Item 3</ListItem>",
+    "hideWhenPropSet": []
+  },
+  "hiddenProps": [
+    "text",
+    "variant"
+  ],
+  "customProps": {
+    "size": {
+      "type": "enum",
+      "platforms": [
+        "react"
+      ],
+      "values": [
+        "large"
+      ]
+    }
+  },
+  "defaults": {
+    "borderless": false,
+    "enableDrag": false,
+    "layout": "",
+    "ordered": false,
+    "size": "",
+    "xpadding": false
+  },
+  "groups": [
+    {
+      "name": "Layout",
+      "props": [
+        "layout",
+        "size",
+        "ordered"
+      ]
+    },
+    {
+      "name": "Appearance",
+      "props": [
+        "borderless",
+        "xpadding",
+        "dark"
+      ]
+    },
+    {
+      "name": "Behavior",
+      "props": [
+        "enableDrag"
+      ]
+    },
+    {
+      "name": "Accessibility",
+      "props": [
+        "role",
+        "tabIndex"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "structureMode": "default",
+      "props": {},
+      "children": "<ListItem>Item 1</ListItem>\n<ListItem>Item 2</ListItem>\n<ListItem>Item 3</ListItem>"
+    },
+    {
+      "name": "Ordered",
+      "structureMode": "default",
+      "props": {
+        "ordered": true
+      },
+      "children": "<ListItem>Step 1</ListItem>\n<ListItem>Step 2</ListItem>\n<ListItem>Step 3</ListItem>"
+    },
+    {
+      "name": "Borderless",
+      "structureMode": "default",
+      "props": {
+        "borderless": true
+      },
+      "children": "<ListItem>Discovery</ListItem>\n<ListItem>Design</ListItem>\n<ListItem>Build</ListItem>"
+    },
+    {
+      "name": "Large",
+      "structureMode": "default",
+      "props": {
+        "size": "large"
+      },
+      "children": "<ListItem>Large item 1</ListItem>\n<ListItem>Large item 2</ListItem>\n<ListItem>Large item 3</ListItem>"
+    },
+    {
+      "name": "Extra Padding",
+      "structureMode": "default",
+      "props": {
+        "xpadding": true
+      },
+      "children": "<ListItem>Spaced item 1</ListItem>\n<ListItem>Spaced item 2</ListItem>\n<ListItem>Spaced item 3</ListItem>"
+    },
+    {
+      "name": "Layout Left",
+      "structureMode": "default",
+      "props": {
+        "layout": "left"
+      },
+      "children": "<ListItem><Title size={4} text=\"Label\" /><Currency amount=\"2,000.50\" label=\"Caption\" size=\"sm\" /></ListItem>\n<ListItem><Title size={4} text=\"Label\" /><Currency amount=\"1,425.00\" label=\"Caption\" size=\"sm\" /></ListItem>"
+    },
+    {
+      "name": "Layout Right",
+      "structureMode": "default",
+      "props": {
+        "layout": "right"
+      },
+      "children": "<ListItem><Title size={4} text=\"Label\" /><Currency amount=\"2,000.50\" label=\"Caption\" size=\"sm\" /></ListItem>\n<ListItem><Title size={4} text=\"Label\" /><Currency amount=\"1,425.00\" label=\"Caption\" size=\"sm\" /></ListItem>"
+    },
+    {
+      "name": "Draggable",
+      "structureMode": "draggable",
+      "props": {
+        "enableDrag": true
+      }
+    }
+  ],
+  "conditionals": {},
+  "propSyncOnEnable": {
+    "enableDrag": {
+      "structureMode": "draggable"
+    }
+  },
+  "hints": {
+    "default": {
+      "presetName": "Default",
+      "message": "List is composed with ListItem children; edit children to change the rows.",
+      "type": "info"
+    },
+    "ordered": {
+      "presetName": "Ordered",
+      "message": "Ordered switches the underlying list from ul to ol while keeping ListItem children.",
+      "type": "info"
+    },
+    "borderless": {
+      "presetName": "Borderless",
+      "message": "Borderless removes the item dividers for a quieter list treatment.",
+      "type": "info"
+    },
+    "large": {
+      "presetName": "Large",
+      "message": "Large applies the list size class so each row has the larger spacing treatment.",
+      "type": "info"
+    },
+    "extra_padding": {
+      "presetName": "Extra Padding",
+      "message": "Extra Padding adds horizontal item padding through the xpadding prop.",
+      "type": "info"
+    },
+    "layout_left": {
+      "presetName": "Layout Left",
+      "message": "Layout Left aligns composed item content using the list layout_left treatment.",
+      "type": "info"
+    },
+    "layout_right": {
+      "presetName": "Layout Right",
+      "message": "Layout Right mirrors the composed item layout for right-aligned supporting content.",
+      "type": "info"
+    },
+    "draggable": {
+      "presetName": "Draggable",
+      "message": "Draggable wraps List in DraggableProvider and gives each ListItem a dragId.",
+      "type": "info"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_color.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("loading_inline", props: { text: " Light" }) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: { color: "default", text: " Default" }) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: { color: "lighter", text: " Lighter" }) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: { color: "link", text: " Link" }) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: { color: "error", text: " Error" }) %>
+
+<br/>
+
+<%= pb_rails("loading_inline", props: { color: "success", text: " Success" }) %>

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_color.jsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import LoadingInline from '../_loading_inline'
+
+const LoadingInlineColor = (props) => (
+    <div>
+        <LoadingInline 
+            text=" Light" 
+            {...props} 
+        />
+        
+            <br/>
+
+        <LoadingInline 
+            color="default"
+            text=" Default" 
+            {...props} 
+        />
+
+
+
+        <br/>
+
+        <LoadingInline 
+            color="lighter"
+            text=" Lighter" 
+            {...props} 
+        />
+
+        <br/>
+
+        <LoadingInline 
+            color="link"
+            text=" Link" 
+            {...props} 
+        />
+
+        <br/>
+
+        <LoadingInline 
+            color="error"
+            text=" Error" 
+            {...props} 
+        />
+
+        <br/>
+
+        <LoadingInline 
+            color="success"
+            text=" Success" 
+            {...props} 
+        />
+    </div>
+)
+
+export default LoadingInlineColor

data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_color.md

@@ -0,0 +1 @@
+The Loading Inline kit will use `light` color by default. Other available colors are: `default` `lighter` `success` `error` `link`.

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

@@ -3,6 +3,7 @@
   "propTargets": {},
   "defaults": {
     "align": "left",
+    "color": "light",
     "text": "Loading",
     "variant": "dotted"
   },
@@ -62,5 +63,31 @@
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "align_left": {
+      "presetName": "Align left",
+      "message": "Align left uses the default left-aligned inline loading treatment.",
+      "type": "info"
+    },
+    "align_center": {
+      "presetName": "Align center",
+      "message": "Align center centers the spinner and loading text in the available width.",
+      "type": "info"
+    },
+    "align_right": {
+      "presetName": "Align right",
+      "message": "Align right pushes the inline loading indicator to the right edge.",
+      "type": "info"
+    },
+    "solid_spinner": {
+      "presetName": "Solid spinner",
+      "message": "Solid spinner switches the icon from the dotted spinner to the solid circle-notch variant.",
+      "type": "info"
+    },
+    "custom_label": {
+      "presetName": "Custom label",
+      "message": "Custom label changes the text displayed next to the loading icon.",
+      "type": "info"
+    }
+  }
 }