playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -1,11 +1,16 @@
 {
-  "template": "<SelectableIcon{{props}} />",
+  "template": "<div onClick={handleWrapperClick}>\n  <SelectableIcon checked={isChecked} onChange={handleChange}{{props}} />\n</div>",
   "propTargets": {},
   "defaults": {
     "checked": false,
     "disabled": false,
     "inputs": "enabled",
-    "multi": true
+    "multi": true,
+    "icon": "user",
+    "inputId": "assignee_1",
+    "name": "assignee",
+    "text": "Assignee",
+    "value": "user1"
   },
   "groups": [
     {
@@ -30,7 +35,7 @@
     {
       "name": "Appearance",
       "props": [
-        "customIcon"
+        "dark"
       ]
     }
   ],
@@ -61,20 +66,6 @@
         "inputs": "enabled"
       }
     },
-    {
-      "name": "Disabled",
-      "props": {
-        "icon": "bell",
-        "text": "Notifications",
-        "name": "notifications",
-        "inputId": "notifications_1",
-        "value": "off",
-        "checked": false,
-        "disabled": true,
-        "multi": true,
-        "inputs": "enabled"
-      }
-    },
     {
       "name": "Radio (single)",
       "props": {
@@ -104,10 +95,35 @@
   ],
   "conditionals": {},
   "hints": {
-    "required_ids": {
-      "when": {},
-      "message": "icon, text, name, and inputId identify the control for forms and accessibility.",
+    "unchecked": {
+      "presetName": "Unchecked",
+      "message": "Unchecked shows the default selectable icon with a visible checkbox input and state-backed preview toggling.",
+      "type": "info"
+    },
+    "checked": {
+      "presetName": "Checked",
+      "message": "Checked applies the selected visual state while keeping inputs enabled.",
+      "type": "info"
+    },
+    "radio": {
+      "presetName": "Radio (single)",
+      "message": "Radio (single) sets multi to false so the rendered input is a radio.",
+      "type": "info"
+    },
+    "inputs_hidden": {
+      "presetName": "Inputs hidden",
+      "message": "Inputs hidden renders without a visible form input; the playground wrapper still toggles the preview state when clicked.",
       "type": "info"
     }
-  }
+  },
+  "wrapper": "const SelectableIconPlayground = () => {\n  const [isChecked, setIsChecked] = useState(checked)\n  const handleChange = ({ target }) => setIsChecked(target.checked)\n  const handleWrapperClick = ({ target }) => {\n    if (target.closest('input, label')) return\n    setIsChecked((current) => !current)\n  }\n\n  return {{component}}\n}\n\n<SelectableIconPlayground />",
+  "externalImports": [
+    "import React, { useState } from 'react'"
+  ],
+  "statefulProps": [
+    "checked"
+  ],
+  "hiddenProps": [
+    "customIcon"
+  ]
 }

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

@@ -1,4 +1,20 @@
 {
+  "template": "<div onClick={handleWrapperClick}>\n  <SelectableIcon checked={isChecked} onChange={handleChange}{{props}} />\n</div>",
+  "wrapper": "const SelectableIconPlayground = () => {\n  const [isChecked, setIsChecked] = useState(checked)\n  const handleChange = ({ target }) => setIsChecked(target.checked)\n  const handleWrapperClick = ({ target }) => {\n    if (target.closest('input, label')) return\n    setIsChecked((current) => !current)\n  }\n\n  return {{component}}\n}\n\n<SelectableIconPlayground />",
+  "externalImports": ["import React, { useState } from 'react'"],
+  "statefulProps": ["checked"],
+  "defaults": {
+    "checked": false,
+    "disabled": false,
+    "icon": "user",
+    "inputId": "assignee_1",
+    "inputs": "enabled",
+    "multi": true,
+    "name": "assignee",
+    "text": "Assignee",
+    "value": "user1"
+  },
+  "hiddenProps": ["customIcon"],
   "groups": [
     {
       "name": "Content",
@@ -10,7 +26,7 @@
     },
     {
       "name": "Appearance",
-      "props": ["customIcon"]
+      "props": ["dark"]
     }
   ],
   "presets": [
@@ -40,20 +56,6 @@
         "inputs": "enabled"
       }
     },
-    {
-      "name": "Disabled",
-      "props": {
-        "icon": "bell",
-        "text": "Notifications",
-        "name": "notifications",
-        "inputId": "notifications_1",
-        "value": "off",
-        "checked": false,
-        "disabled": true,
-        "multi": true,
-        "inputs": "enabled"
-      }
-    },
     {
       "name": "Radio (single)",
       "props": {
@@ -83,9 +85,24 @@
   ],
   "conditionals": {},
   "hints": {
-    "required_ids": {
-      "when": {},
-      "message": "icon, text, name, and inputId identify the control for forms and accessibility.",
+    "unchecked": {
+      "presetName": "Unchecked",
+      "message": "Unchecked shows the default selectable icon with a visible checkbox input and state-backed preview toggling.",
+      "type": "info"
+    },
+    "checked": {
+      "presetName": "Checked",
+      "message": "Checked applies the selected visual state while keeping inputs enabled.",
+      "type": "info"
+    },
+    "radio": {
+      "presetName": "Radio (single)",
+      "message": "Radio (single) sets multi to false so the rendered input is a radio.",
+      "type": "info"
+    },
+    "inputs_hidden": {
+      "presetName": "Inputs hidden",
+      "message": "Inputs hidden renders without a visible form input; the playground wrapper still toggles the preview state when clicked.",
       "type": "info"
     }
   }

data/app/pb_kits/playbook/pb_selectable_icon/kit.schema.json

@@ -92,7 +92,7 @@
       "platforms": [
         "rails"
       ],
-      "type": "string"
+      "type": "GenericObject"
     }
   },
   "globalProps": true,

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

@@ -1,53 +1,215 @@
 {
   "template": "<SelectableList{{props}} />",
-  "propTargets": {},
+  "propTargets": {
+    "selectableListItemLabel": "SelectableList.Item.props",
+    "selectableListItemText": "SelectableList.Item.props",
+    "selectableListItemName": "SelectableList.Item.props",
+    "selectableListItemValue": "SelectableList.Item.props",
+    "selectableListItemChecked": "SelectableList.Item.props",
+    "selectableListItemDefaultChecked": "SelectableList.Item.props",
+    "selectableListItemDragId": "SelectableList.Item.props",
+    "selectableListItemDragHandle": "SelectableList.Item.props",
+    "selectableListItemClassName": "SelectableList.Item.props"
+  },
   "defaults": {
     "enableDrag": false,
     "variant": "checkbox"
   },
   "groups": [
     {
-      "name": "State",
+      "name": "Selection",
       "props": [
         "variant"
       ]
     },
     {
-      "name": "Behavior",
+      "name": "SelectableList.Item Props",
       "props": [
-        "enableDrag"
+        "selectableListItemLabel",
+        "selectableListItemText",
+        "selectableListItemName",
+        "selectableListItemValue",
+        "selectableListItemChecked",
+        "selectableListItemDefaultChecked",
+        "selectableListItemDragId",
+        "selectableListItemDragHandle",
+        "selectableListItemClassName"
       ]
     }
   ],
   "presets": [
     {
       "name": "Checkbox list",
+      "structureMode": "standard",
       "props": {
         "variant": "checkbox",
         "enableDrag": false
-      }
+      },
+      "children": "<SelectableList.Item label=\"Mild\" name=\"spice\" value=\"mild\" />\n<SelectableList.Item checked label=\"Medium\" name=\"spice\" value=\"medium\" />\n<SelectableList.Item label=\"Hot\" name=\"spice\" value=\"hot\" />"
     },
     {
       "name": "Radio list",
+      "structureMode": "standard",
       "props": {
         "variant": "radio",
         "enableDrag": false
-      }
+      },
+      "children": "<SelectableList.Item label=\"Small\" name=\"size\" value=\"small\" />\n<SelectableList.Item defaultChecked label=\"Medium\" name=\"size\" value=\"medium\" />\n<SelectableList.Item label=\"Large\" name=\"size\" value=\"large\" />"
     },
     {
-      "name": "Checkbox + drag",
+      "name": "Item Props",
+      "structureMode": "selectable_list_item_props",
       "props": {
-        "variant": "checkbox",
-        "enableDrag": true
+        "selectableListItemChecked": true,
+        "selectableListItemLabel": "Mild",
+        "selectableListItemName": "spice",
+        "selectableListItemValue": "mild",
+        "variant": "checkbox"
       }
     }
   ],
   "conditionals": {},
   "hints": {
-    "items_note": {
-      "when": {},
-      "message": "Add SelectableList.Item rows as children; enableDrag defers to List for reordering.",
+    "checkbox": {
+      "presetName": "Checkbox list",
+      "message": "Checkbox list uses SelectableList.Item children with independent checked state.",
+      "type": "info"
+    },
+    "radio": {
+      "presetName": "Radio list",
+      "message": "Radio list uses shared item names and defaultChecked for a single selected value.",
+      "type": "info"
+    },
+    "item_props": {
+      "presetName": "Item Props",
+      "message": "Item Props routes prefixed controls into the first SelectableList.Item.",
       "type": "info"
     }
+  },
+  "structureModes": {
+    "default": "standard",
+    "modes": {
+      "standard": {
+        "label": "Standard",
+        "template": "<SelectableList{{props}}>\n  {{children}}\n</SelectableList>",
+        "children": "<SelectableList.Item label=\"Mild\" name=\"spice\" value=\"mild\" />\n<SelectableList.Item checked label=\"Medium\" name=\"spice\" value=\"medium\" />\n<SelectableList.Item label=\"Hot\" name=\"spice\" value=\"hot\" />"
+      },
+      "selectable_list_item_props": {
+        "label": "SelectableList.Item Props",
+        "template": "<SelectableList{{props}}>\n  <SelectableList.Item{{SelectableList.Item.props}} />\n  {{children}}\n</SelectableList>",
+        "children": "<SelectableList.Item label=\"Medium\" name=\"spice\" value=\"medium\" />\n<SelectableList.Item label=\"Hot\" name=\"spice\" value=\"hot\" />",
+        "props": {
+          "selectableListItemLabel": "Mild",
+          "selectableListItemName": "spice",
+          "selectableListItemValue": "mild"
+        }
+      }
+    }
+  },
+  "children": {
+    "editable": true,
+    "default": "<SelectableList.Item label=\"Mild\" name=\"spice\" value=\"mild\" />\n<SelectableList.Item checked label=\"Medium\" name=\"spice\" value=\"medium\" />\n<SelectableList.Item label=\"Hot\" name=\"spice\" value=\"hot\" />"
+  },
+  "customProps": {
+    "selectableListItemLabel": {
+      "type": "string",
+      "platforms": [
+        "react"
+      ]
+    },
+    "selectableListItemText": {
+      "type": "string",
+      "platforms": [
+        "react"
+      ]
+    },
+    "selectableListItemName": {
+      "type": "string",
+      "platforms": [
+        "react"
+      ]
+    },
+    "selectableListItemValue": {
+      "type": "string",
+      "platforms": [
+        "react"
+      ]
+    },
+    "selectableListItemChecked": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ],
+      "default": false
+    },
+    "selectableListItemDefaultChecked": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ],
+      "default": false
+    },
+    "selectableListItemDragId": {
+      "type": "string",
+      "platforms": [
+        "react"
+      ]
+    },
+    "selectableListItemDragHandle": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ],
+      "default": true
+    },
+    "selectableListItemClassName": {
+      "type": "string",
+      "platforms": [
+        "react"
+      ]
+    }
+  },
+  "propAliases": {
+    "selectableListItemLabel": "label",
+    "selectableListItemText": "text",
+    "selectableListItemName": "name",
+    "selectableListItemValue": "value",
+    "selectableListItemChecked": "checked",
+    "selectableListItemDefaultChecked": "defaultChecked",
+    "selectableListItemDragId": "dragId",
+    "selectableListItemDragHandle": "dragHandle",
+    "selectableListItemClassName": "className"
+  },
+  "hiddenProps": [
+    "enableDrag"
+  ],
+  "propSyncOnEnable": {
+    "selectableListItemLabel": {
+      "structureMode": "selectable_list_item_props"
+    },
+    "selectableListItemText": {
+      "structureMode": "selectable_list_item_props"
+    },
+    "selectableListItemName": {
+      "structureMode": "selectable_list_item_props"
+    },
+    "selectableListItemValue": {
+      "structureMode": "selectable_list_item_props"
+    },
+    "selectableListItemChecked": {
+      "structureMode": "selectable_list_item_props"
+    },
+    "selectableListItemDefaultChecked": {
+      "structureMode": "selectable_list_item_props"
+    },
+    "selectableListItemDragId": {
+      "structureMode": "selectable_list_item_props"
+    },
+    "selectableListItemDragHandle": {
+      "structureMode": "selectable_list_item_props"
+    },
+    "selectableListItemClassName": {
+      "structureMode": "selectable_list_item_props"
+    }
   }
 }

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

@@ -1,33 +1,185 @@
 {
+  "structureModes": {
+    "default": "standard",
+    "modes": {
+      "standard": {
+        "label": "Standard",
+        "template": "<SelectableList{{props}}>\n  {{children}}\n</SelectableList>",
+        "children": "<SelectableList.Item label=\"Mild\" name=\"spice\" value=\"mild\" />\n<SelectableList.Item checked label=\"Medium\" name=\"spice\" value=\"medium\" />\n<SelectableList.Item label=\"Hot\" name=\"spice\" value=\"hot\" />"
+      },
+      "selectable_list_item_props": {
+        "label": "SelectableList.Item Props",
+        "template": "<SelectableList{{props}}>\n  <SelectableList.Item{{SelectableList.Item.props}} />\n  {{children}}\n</SelectableList>",
+        "children": "<SelectableList.Item label=\"Medium\" name=\"spice\" value=\"medium\" />\n<SelectableList.Item label=\"Hot\" name=\"spice\" value=\"hot\" />",
+        "props": {
+          "selectableListItemLabel": "Mild",
+          "selectableListItemName": "spice",
+          "selectableListItemValue": "mild"
+        }
+      }
+    }
+  },
+  "children": {
+    "editable": true,
+    "default": "<SelectableList.Item label=\"Mild\" name=\"spice\" value=\"mild\" />\n<SelectableList.Item checked label=\"Medium\" name=\"spice\" value=\"medium\" />\n<SelectableList.Item label=\"Hot\" name=\"spice\" value=\"hot\" />"
+  },
+  "customProps": {
+    "selectableListItemLabel": {
+      "type": "string",
+      "platforms": ["react"]
+    },
+    "selectableListItemText": {
+      "type": "string",
+      "platforms": ["react"]
+    },
+    "selectableListItemName": {
+      "type": "string",
+      "platforms": ["react"]
+    },
+    "selectableListItemValue": {
+      "type": "string",
+      "platforms": ["react"]
+    },
+    "selectableListItemChecked": {
+      "type": "boolean",
+      "platforms": ["react"],
+      "default": false
+    },
+    "selectableListItemDefaultChecked": {
+      "type": "boolean",
+      "platforms": ["react"],
+      "default": false
+    },
+    "selectableListItemDragId": {
+      "type": "string",
+      "platforms": ["react"]
+    },
+    "selectableListItemDragHandle": {
+      "type": "boolean",
+      "platforms": ["react"],
+      "default": true
+    },
+    "selectableListItemClassName": {
+      "type": "string",
+      "platforms": ["react"]
+    }
+  },
+  "propTargets": {
+    "selectableListItemLabel": "SelectableList.Item.props",
+    "selectableListItemText": "SelectableList.Item.props",
+    "selectableListItemName": "SelectableList.Item.props",
+    "selectableListItemValue": "SelectableList.Item.props",
+    "selectableListItemChecked": "SelectableList.Item.props",
+    "selectableListItemDefaultChecked": "SelectableList.Item.props",
+    "selectableListItemDragId": "SelectableList.Item.props",
+    "selectableListItemDragHandle": "SelectableList.Item.props",
+    "selectableListItemClassName": "SelectableList.Item.props"
+  },
+  "propAliases": {
+    "selectableListItemLabel": "label",
+    "selectableListItemText": "text",
+    "selectableListItemName": "name",
+    "selectableListItemValue": "value",
+    "selectableListItemChecked": "checked",
+    "selectableListItemDefaultChecked": "defaultChecked",
+    "selectableListItemDragId": "dragId",
+    "selectableListItemDragHandle": "dragHandle",
+    "selectableListItemClassName": "className"
+  },
+  "defaults": {
+    "enableDrag": false,
+    "variant": "checkbox"
+  },
   "groups": [
     {
-      "name": "State",
+      "name": "Selection",
       "props": ["variant"]
     },
     {
-      "name": "Behavior",
-      "props": ["enableDrag"]
+      "name": "SelectableList.Item Props",
+      "props": [
+        "selectableListItemLabel",
+        "selectableListItemText",
+        "selectableListItemName",
+        "selectableListItemValue",
+        "selectableListItemChecked",
+        "selectableListItemDefaultChecked",
+        "selectableListItemDragId",
+        "selectableListItemDragHandle",
+        "selectableListItemClassName"
+      ]
     }
   ],
+  "hiddenProps": ["enableDrag"],
   "presets": [
     {
       "name": "Checkbox list",
-      "props": { "variant": "checkbox", "enableDrag": false }
+      "structureMode": "standard",
+      "props": { "variant": "checkbox", "enableDrag": false },
+      "children": "<SelectableList.Item label=\"Mild\" name=\"spice\" value=\"mild\" />\n<SelectableList.Item checked label=\"Medium\" name=\"spice\" value=\"medium\" />\n<SelectableList.Item label=\"Hot\" name=\"spice\" value=\"hot\" />"
     },
     {
       "name": "Radio list",
-      "props": { "variant": "radio", "enableDrag": false }
+      "structureMode": "standard",
+      "props": { "variant": "radio", "enableDrag": false },
+      "children": "<SelectableList.Item label=\"Small\" name=\"size\" value=\"small\" />\n<SelectableList.Item defaultChecked label=\"Medium\" name=\"size\" value=\"medium\" />\n<SelectableList.Item label=\"Large\" name=\"size\" value=\"large\" />"
     },
     {
-      "name": "Checkbox + drag",
-      "props": { "variant": "checkbox", "enableDrag": true }
+      "name": "Item Props",
+      "structureMode": "selectable_list_item_props",
+      "props": {
+        "selectableListItemChecked": true,
+        "selectableListItemLabel": "Mild",
+        "selectableListItemName": "spice",
+        "selectableListItemValue": "mild",
+        "variant": "checkbox"
+      }
     }
   ],
   "conditionals": {},
+  "propSyncOnEnable": {
+    "selectableListItemLabel": {
+      "structureMode": "selectable_list_item_props"
+    },
+    "selectableListItemText": {
+      "structureMode": "selectable_list_item_props"
+    },
+    "selectableListItemName": {
+      "structureMode": "selectable_list_item_props"
+    },
+    "selectableListItemValue": {
+      "structureMode": "selectable_list_item_props"
+    },
+    "selectableListItemChecked": {
+      "structureMode": "selectable_list_item_props"
+    },
+    "selectableListItemDefaultChecked": {
+      "structureMode": "selectable_list_item_props"
+    },
+    "selectableListItemDragId": {
+      "structureMode": "selectable_list_item_props"
+    },
+    "selectableListItemDragHandle": {
+      "structureMode": "selectable_list_item_props"
+    },
+    "selectableListItemClassName": {
+      "structureMode": "selectable_list_item_props"
+    }
+  },
   "hints": {
-    "items_note": {
-      "when": {},
-      "message": "Add SelectableList.Item rows as children; enableDrag defers to List for reordering.",
+    "checkbox": {
+      "presetName": "Checkbox list",
+      "message": "Checkbox list uses SelectableList.Item children with independent checked state.",
+      "type": "info"
+    },
+    "radio": {
+      "presetName": "Radio list",
+      "message": "Radio list uses shared item names and defaultChecked for a single selected value.",
+      "type": "info"
+    },
+    "item_props": {
+      "presetName": "Item Props",
+      "message": "Item Props routes prefixed controls into the first SelectableList.Item.",
       "type": "info"
     }
   }