RubyGems - playbook_ui - Versions diffs - 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469 - Mend

playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (375) hide show

data/app/pb_kits/playbook/pb_layout/docs/_playground.overrides.json ADDED Viewed

@@ -0,0 +1,188 @@
+{
+  "structureModes": {
+    "default": "sidebar",
+    "modes": {
+      "sidebar": {
+        "label": "Sidebar",
+        "template": "<Layout{{props}}>\n{{children}}\n</Layout>",
+        "children": "<Layout.Side>\n  Side\n</Layout.Side>\n<Layout.Body>\n  Body\n</Layout.Body>"
+      },
+      "collection": {
+        "label": "Collection",
+        "template": "<Layout{{props}}>\n{{children}}\n</Layout>",
+        "children": "<Layout.Body>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n</Layout.Body>"
+      },
+      "collection_detail": {
+        "label": "Collection detail",
+        "template": "<Layout{{props}}>\n{{children}}\n</Layout>",
+        "children": "<Card padding=\"none\">\n  <Nav link=\"#\" orientation=\"vertical\" title=\"Menu\">\n    <NavItem link=\"#\" text=\"Overview\" />\n    <NavItem active link=\"#\" text=\"Activity\" />\n    <NavItem link=\"#\" text=\"Files\" />\n  </Nav>\n</Card>\n<Layout.Body>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n</Layout.Body>"
+      },
+      "content": {
+        "label": "Content",
+        "template": "<Layout{{props}}>\n{{children}}\n</Layout>",
+        "children": "<Layout.Header>\n  <Card padding=\"sm\"><Title size={4} text=\"Header\" /></Card>\n</Layout.Header>\n<Layout.Side>\n  <Card padding=\"sm\"><Body text=\"Supporting navigation or metadata.\" /></Card>\n</Layout.Side>\n<Layout.Body>\n  <Card padding=\"md\"><Title size={3} text=\"Article Content\" /><Body text=\"Main content area with a longer reading surface.\" /></Card>\n</Layout.Body>\n<Layout.Footer>\n  <Card padding=\"sm\"><Body text=\"Footer content\" /></Card>\n</Layout.Footer>"
+      },
+      "kanban": {
+        "label": "Kanban",
+        "template": "<Layout{{props}}>\n{{children}}\n</Layout>",
+        "children": "<Layout.Body>\n  <Caption text=\"Queue\" />\n  <Card padding=\"sm\"><Title size={4} text=\"Design Homepage\" /><Body text=\"Owner: Ada\" /></Card>\n  <Card padding=\"sm\"><Title size={4} text=\"Update Icons\" /><Body text=\"Owner: Grace\" /></Card>\n</Layout.Body>\n<Layout.Body>\n  <Caption text=\"In Progress\" />\n  <Card padding=\"sm\"><Title size={4} text=\"Dashboard Updates\" /><Body text=\"Owner: Katherine\" /></Card>\n</Layout.Body>\n<Layout.Body>\n  <Caption text=\"Done\" />\n  <Card padding=\"sm\"><Title size={4} text=\"QA Review\" /><Body text=\"Owner: Margaret\" /></Card>\n</Layout.Body>"
+      },
+      "masonry": {
+        "label": "Masonry",
+        "template": "<Layout{{props}}>\n{{children}}\n</Layout>",
+        "children": "<Layout.Body>\n  <Layout.Item>\n    <Image url=\"https://unsplash.it/500/400/?image=634\" />\n  </Layout.Item>\n  <Layout.Item size=\"md\">\n    <Image url=\"https://unsplash.it/500/600/?image=635\" />\n  </Layout.Item>\n  <Layout.Item size=\"lg\">\n    <Image url=\"https://unsplash.it/500/700/?image=636\" />\n  </Layout.Item>\n</Layout.Body>"
+      },
+      "bracket": {
+        "label": "Bracket",
+        "template": "<Layout{{props}}>\n{{children}}\n</Layout>",
+        "children": "<Layout.RoundLabel>\n  <Caption text=\"Semifinal\" />\n  <SectionSeparator marginY=\"sm\" />\n</Layout.RoundLabel>\n<Layout.Round>\n  <Layout.Game>\n    <Layout.Participant name=\"Eagles\" points=\"22\" rank=\"#1\" territory=\"PHI\" winner />\n    <Layout.Participant name=\"Packers\" points=\"10\" rank=\"#3\" territory=\"GB\" />\n  </Layout.Game>\n  <Layout.Game>\n    <Layout.Participant name=\"Rams\" points=\"27\" rank=\"#1\" territory=\"LAR\" winner />\n    <Layout.Participant name=\"Vikings\" points=\"9\" rank=\"#2\" territory=\"MIN\" />\n  </Layout.Game>\n</Layout.Round>\n<Layout.RoundLabel>\n  <Caption text=\"Final\" />\n  <SectionSeparator marginY=\"sm\" />\n</Layout.RoundLabel>\n<Layout.Round>\n  <Layout.Game>\n    <Layout.Participant name=\"Eagles\" points=\"24\" rank=\"#1\" self territory=\"PHI\" winner />\n    <Layout.Participant name=\"Rams\" points=\"17\" rank=\"#1\" territory=\"LAR\" />\n  </Layout.Game>\n</Layout.Round>"
+      }
+    }
+  },
+  "children": {
+    "editable": true,
+    "default": "<Layout.Side>\n  Side\n</Layout.Side>\n<Layout.Body>\n  Body\n</Layout.Body>"
+  },
+  "groups": [
+    {
+      "name": "Layout",
+      "props": ["layout", "responsive"]
+    },
+    {
+      "name": "Sidebar",
+      "props": ["position", "collapse", "size", "full"]
+    },
+    {
+      "name": "Appearance",
+      "props": ["variant", "transparent", "dark"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Sidebar",
+      "structureMode": "sidebar",
+      "props": {
+        "layout": "sidebar",
+        "position": "left",
+        "collapse": "md",
+        "size": "md",
+        "variant": "light"
+      },
+      "children": "<Layout.Side>\n  Side\n</Layout.Side>\n<Layout.Body>\n  Body\n</Layout.Body>"
+    },
+    {
+      "name": "Right Sidebar",
+      "structureMode": "sidebar",
+      "props": {
+        "layout": "sidebar",
+        "position": "right",
+        "collapse": "lg",
+        "size": "sm",
+        "variant": "dark",
+        "dark": true
+      },
+      "children": "<Layout.Side>\n  Side\n</Layout.Side>\n<Layout.Body>\n  Body\n</Layout.Body>"
+    },
+    {
+      "name": "Collection",
+      "structureMode": "collection",
+      "props": {
+        "layout": "collection"
+      },
+      "children": "<Layout.Body>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n</Layout.Body>"
+    },
+    {
+      "name": "Collection Detail",
+      "structureMode": "collection_detail",
+      "props": {
+        "layout": "collection_detail"
+      },
+      "children": "<Card padding=\"none\">\n  <Nav link=\"#\" orientation=\"vertical\" title=\"Menu\">\n    <NavItem link=\"#\" text=\"Overview\" />\n    <NavItem active link=\"#\" text=\"Activity\" />\n    <NavItem link=\"#\" text=\"Files\" />\n  </Nav>\n</Card>\n<Layout.Body>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n  <Card>Card content</Card>\n</Layout.Body>"
+    },
+    {
+      "name": "Content",
+      "structureMode": "content",
+      "props": {
+        "layout": "content"
+      },
+      "children": "<Layout.Header>\n  <Card padding=\"sm\"><Title size={4} text=\"Header\" /></Card>\n</Layout.Header>\n<Layout.Side>\n  <Card padding=\"sm\"><Body text=\"Supporting navigation or metadata.\" /></Card>\n</Layout.Side>\n<Layout.Body>\n  <Card padding=\"md\"><Title size={3} text=\"Article Content\" /><Body text=\"Main content area with a longer reading surface.\" /></Card>\n</Layout.Body>\n<Layout.Footer>\n  <Card padding=\"sm\"><Body text=\"Footer content\" /></Card>\n</Layout.Footer>"
+    },
+    {
+      "name": "Kanban",
+      "structureMode": "kanban",
+      "props": {
+        "layout": "kanban",
+        "responsive": true
+      },
+      "children": "<Layout.Body>\n  <Caption text=\"Queue\" />\n  <Card padding=\"sm\"><Title size={4} text=\"Design Homepage\" /><Body text=\"Owner: Ada\" /></Card>\n  <Card padding=\"sm\"><Title size={4} text=\"Update Icons\" /><Body text=\"Owner: Grace\" /></Card>\n</Layout.Body>\n<Layout.Body>\n  <Caption text=\"In Progress\" />\n  <Card padding=\"sm\"><Title size={4} text=\"Dashboard Updates\" /><Body text=\"Owner: Katherine\" /></Card>\n</Layout.Body>\n<Layout.Body>\n  <Caption text=\"Done\" />\n  <Card padding=\"sm\"><Title size={4} text=\"QA Review\" /><Body text=\"Owner: Margaret\" /></Card>\n</Layout.Body>"
+    },
+    {
+      "name": "Masonry",
+      "structureMode": "masonry",
+      "props": {
+        "layout": "masonry"
+      },
+      "children": "<Layout.Body>\n  <Layout.Item>\n    <Image url=\"https://unsplash.it/500/400/?image=634\" />\n  </Layout.Item>\n  <Layout.Item size=\"md\">\n    <Image url=\"https://unsplash.it/500/600/?image=635\" />\n  </Layout.Item>\n  <Layout.Item size=\"lg\">\n    <Image url=\"https://unsplash.it/500/700/?image=636\" />\n  </Layout.Item>\n</Layout.Body>"
+    },
+    {
+      "name": "Bracket",
+      "structureMode": "bracket",
+      "props": {
+        "layout": "bracket"
+      },
+      "children": "<Layout.RoundLabel>\n  <Caption text=\"Semifinal\" />\n  <SectionSeparator marginY=\"sm\" />\n</Layout.RoundLabel>\n<Layout.Round>\n  <Layout.Game>\n    <Layout.Participant name=\"Eagles\" points=\"22\" rank=\"#1\" territory=\"PHI\" winner />\n    <Layout.Participant name=\"Packers\" points=\"10\" rank=\"#3\" territory=\"GB\" />\n  </Layout.Game>\n  <Layout.Game>\n    <Layout.Participant name=\"Rams\" points=\"27\" rank=\"#1\" territory=\"LAR\" winner />\n    <Layout.Participant name=\"Vikings\" points=\"9\" rank=\"#2\" territory=\"MIN\" />\n  </Layout.Game>\n</Layout.Round>\n<Layout.RoundLabel>\n  <Caption text=\"Final\" />\n  <SectionSeparator marginY=\"sm\" />\n</Layout.RoundLabel>\n<Layout.Round>\n  <Layout.Game>\n    <Layout.Participant name=\"Eagles\" points=\"24\" rank=\"#1\" self territory=\"PHI\" winner />\n    <Layout.Participant name=\"Rams\" points=\"17\" rank=\"#1\" territory=\"LAR\" />\n  </Layout.Game>\n</Layout.Round>"
+    }
+  ],
+  "conditionals": {
+    "position": { "requires": { "layout": "sidebar" } },
+    "collapse": { "requires": { "layout": "sidebar" } },
+    "size": { "requires": { "layout": "sidebar" } },
+    "full": { "requires": { "layout": "sidebar" } },
+    "variant": { "requires": { "layout": "sidebar" } },
+    "transparent": { "requires": { "layout": "sidebar" } },
+    "dark": { "requires": { "layout": "sidebar" } },
+    "responsive": { "requires": { "layout": "kanban" } }
+  },
+  "hints": {
+    "sidebar": {
+      "presetName": "Sidebar",
+      "message": "Sidebar uses Layout.Side and Layout.Body, with sidebar controls for position, size, collapse, and variant.",
+      "type": "info"
+    },
+    "right_sidebar": {
+      "presetName": "Right Sidebar",
+      "message": "Right Sidebar moves Layout.Side to the right and uses the dark sidebar variant.",
+      "type": "info"
+    },
+    "collection": {
+      "presetName": "Collection",
+      "message": "Collection arranges repeated cards inside Layout.Body.",
+      "type": "info"
+    },
+    "collection_detail": {
+      "presetName": "Collection Detail",
+      "message": "Collection Detail pairs navigation with a detail body area.",
+      "type": "info"
+    },
+    "content": {
+      "presetName": "Content",
+      "message": "Content shows Header, Side, Body, and Footer regions together.",
+      "type": "info"
+    },
+    "kanban": {
+      "presetName": "Kanban",
+      "message": "Kanban uses multiple Layout.Body columns and enables responsive mode.",
+      "type": "info"
+    },
+    "masonry": {
+      "presetName": "Masonry",
+      "message": "Masonry uses Layout.Item sizes inside Layout.Body.",
+      "type": "info"
+    },
+    "bracket": {
+      "presetName": "Bracket",
+      "message": "Bracket uses Layout.RoundLabel, Layout.Round, Layout.Game, and Layout.Participant.",
+      "type": "info"
+    }
+  }
+}

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

@@ -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 ADDED Viewed

@@ -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 CHANGED Viewed

@@ -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"
+    }
+  }
 }