playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -1,6 +1,10 @@
 {
-  "template": "<ProgressStep{{props}} />",
-  "propTargets": {},
+  "template": "<ProgressStep{{props}}>\n  {{children}}\n</ProgressStep>",
+  "propTargets": {
+    "progressStepItemStatus": "ProgressStepItem.props",
+    "progressStepItemIcon": "ProgressStepItem.props",
+    "progressStepItemClassName": "ProgressStepItem.props"
+  },
   "defaults": {
     "orientation": "horizontal",
     "icon": false,
@@ -10,22 +14,205 @@
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Layout",
+      "props": [
+        "orientation"
+      ]
+    },
+    {
+      "name": "Appearance",
       "props": [
-        "orientation",
-        "icon",
-        "showIcon",
         "variant",
-        "color"
+        "color",
+        "icon",
+        "dark"
+      ]
+    },
+    {
+      "name": "ProgressStepItem Props",
+      "props": [
+        "progressStepItemStatus",
+        "progressStepItemIcon",
+        "progressStepItemClassName"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "structureMode": "standard",
+      "props": {},
+      "children": "<ProgressStepItem status=\"complete\">Step 1</ProgressStepItem>\n<ProgressStepItem status=\"active\">Step 2</ProgressStepItem>\n<ProgressStepItem status=\"inactive\">Step 3</ProgressStepItem>"
+    },
+    {
+      "name": "With Icons",
+      "structureMode": "standard",
+      "props": {
+        "icon": true
+      },
+      "children": "<ProgressStepItem status=\"complete\">Step 1</ProgressStepItem>\n<ProgressStepItem status=\"complete\">Step 2</ProgressStepItem>\n<ProgressStepItem status=\"active\">Step 3</ProgressStepItem>\n<ProgressStepItem status=\"inactive\">Step 4</ProgressStepItem>"
+    },
+    {
+      "name": "Vertical",
+      "structureMode": "standard",
+      "props": {
+        "icon": true,
+        "orientation": "vertical"
+      },
+      "children": "<ProgressStepItem status=\"complete\">Account</ProgressStepItem>\n<ProgressStepItem status=\"active\">Profile</ProgressStepItem>\n<ProgressStepItem status=\"inactive\">Confirm</ProgressStepItem>"
+    },
+    {
+      "name": "Tracker",
+      "structureMode": "standard",
+      "props": {
+        "icon": true,
+        "variant": "tracker"
+      },
+      "children": "<ProgressStepItem status=\"complete\">Ordered</ProgressStepItem>\n<ProgressStepItem status=\"active\">Shipped</ProgressStepItem>\n<ProgressStepItem status=\"inactive\">Delivered</ProgressStepItem>"
+    },
+    {
+      "name": "Info Tracker",
+      "structureMode": "standard",
+      "props": {
+        "color": "info",
+        "icon": true,
+        "variant": "tracker"
+      },
+      "children": "<ProgressStepItem status=\"complete\">Queued</ProgressStepItem>\n<ProgressStepItem status=\"active\">Processing</ProgressStepItem>\n<ProgressStepItem status=\"inactive\">Complete</ProgressStepItem>"
+    },
+    {
+      "name": "Hidden Step",
+      "structureMode": "standard",
+      "props": {
+        "icon": true,
+        "variant": "tracker"
+      },
+      "children": "<ProgressStepItem status=\"complete\">Cart</ProgressStepItem>\n<ProgressStepItem status=\"hidden\" />\n<ProgressStepItem status=\"active\">Payment</ProgressStepItem>\n<ProgressStepItem status=\"inactive\">Review</ProgressStepItem>"
+    },
+    {
+      "name": "Custom Icon",
+      "structureMode": "progress_step_item_props",
+      "props": {
+        "icon": true,
+        "progressStepItemIcon": "exclamation-triangle",
+        "progressStepItemStatus": "active",
+        "variant": "tracker"
+      },
+      "children": "Review"
+    },
+    {
+      "name": "ProgressStepItem Active",
+      "structureMode": "progress_step_item_props",
+      "props": {
+        "icon": true,
+        "progressStepItemStatus": "active",
+        "variant": "tracker"
+      },
+      "children": "Current step"
+    }
+  ],
+  "conditionals": {
+    "color": {
+      "requires": {
+        "variant": "tracker"
+      }
+    }
+  },
+  "hints": {
+    "children": {
+      "message": "ProgressStep is composed from ProgressStepItem children; edit children to change labels, count, and statuses.",
+      "type": "info"
+    },
+    "tracker": {
+      "when": {
+        "variant": "tracker"
+      },
+      "message": "Tracker is a horizontal treatment; use ProgressStepItem statuses to control filled, current, inactive, and hidden steps.",
+      "type": "info"
+    },
+    "info_tracker": {
+      "when": {
+        "color": "info",
+        "variant": "tracker"
+      },
+      "message": "Info color only changes the tracker treatment.",
+      "type": "info"
+    },
+    "progress_step_item_props": {
+      "presetName": "Custom Icon",
+      "message": "Custom Icon routes ProgressStepItem Props controls into the first ProgressStepItem.",
+      "type": "info"
+    }
+  },
+  "structureModes": {
+    "default": "standard",
+    "modes": {
+      "standard": {
+        "label": "Steps",
+        "template": "<ProgressStep{{props}}>\n  {{children}}\n</ProgressStep>",
+        "children": "<ProgressStepItem status=\"complete\">Step 1</ProgressStepItem>\n<ProgressStepItem status=\"active\">Step 2</ProgressStepItem>\n<ProgressStepItem status=\"inactive\">Step 3</ProgressStepItem>"
+      },
+      "progress_step_item_props": {
+        "label": "ProgressStepItem Props",
+        "template": "<ProgressStep{{props}}>\n  <ProgressStepItem{{ProgressStepItem.props}}>\n    {{children}}\n  </ProgressStepItem>\n  <ProgressStepItem status=\"active\">Approve</ProgressStepItem>\n  <ProgressStepItem status=\"inactive\">Publish</ProgressStepItem>\n</ProgressStep>",
+        "children": "Review",
+        "props": {
+          "icon": true,
+          "progressStepItemStatus": "active",
+          "variant": "tracker"
+        }
+      }
     }
+  },
+  "children": {
+    "editable": true,
+    "default": "<ProgressStepItem status=\"complete\">Step 1</ProgressStepItem>\n<ProgressStepItem status=\"active\">Step 2</ProgressStepItem>\n<ProgressStepItem status=\"inactive\">Step 3</ProgressStepItem>"
+  },
+  "customProps": {
+    "progressStepItemStatus": {
+      "type": "enum",
+      "platforms": [
+        "react"
+      ],
+      "values": [
+        "complete",
+        "active",
+        "inactive",
+        "hidden"
+      ],
+      "default": "complete"
+    },
+    "progressStepItemIcon": {
+      "type": "string",
+      "platforms": [
+        "react"
+      ],
+      "default": "check"
+    },
+    "progressStepItemClassName": {
+      "type": "string",
+      "platforms": [
+        "react"
+      ]
+    }
+  },
+  "propAliases": {
+    "progressStepItemStatus": "status",
+    "progressStepItemIcon": "icon",
+    "progressStepItemClassName": "className"
+  },
+  "hiddenProps": [
+    "showIcon"
   ],
-  "conditionals": {},
-  "hints": {}
+  "propSyncOnEnable": {
+    "progressStepItemStatus": {
+      "structureMode": "progress_step_item_props"
+    },
+    "progressStepItemIcon": {
+      "structureMode": "progress_step_item_props"
+    },
+    "progressStepItemClassName": {
+      "structureMode": "progress_step_item_props"
+    }
+  }
 }

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

@@ -0,0 +1,189 @@
+{
+  "template": "<ProgressStep{{props}}>\n  {{children}}\n</ProgressStep>",
+  "structureModes": {
+    "default": "standard",
+    "modes": {
+      "standard": {
+        "label": "Steps",
+        "template": "<ProgressStep{{props}}>\n  {{children}}\n</ProgressStep>",
+        "children": "<ProgressStepItem status=\"complete\">Step 1</ProgressStepItem>\n<ProgressStepItem status=\"active\">Step 2</ProgressStepItem>\n<ProgressStepItem status=\"inactive\">Step 3</ProgressStepItem>"
+      },
+      "progress_step_item_props": {
+        "label": "ProgressStepItem Props",
+        "template": "<ProgressStep{{props}}>\n  <ProgressStepItem{{ProgressStepItem.props}}>\n    {{children}}\n  </ProgressStepItem>\n  <ProgressStepItem status=\"active\">Approve</ProgressStepItem>\n  <ProgressStepItem status=\"inactive\">Publish</ProgressStepItem>\n</ProgressStep>",
+        "children": "Review",
+        "props": {
+          "icon": true,
+          "progressStepItemStatus": "active",
+          "variant": "tracker"
+        }
+      }
+    }
+  },
+  "children": {
+    "editable": true,
+    "default": "<ProgressStepItem status=\"complete\">Step 1</ProgressStepItem>\n<ProgressStepItem status=\"active\">Step 2</ProgressStepItem>\n<ProgressStepItem status=\"inactive\">Step 3</ProgressStepItem>"
+  },
+  "defaults": {
+    "color": "primary",
+    "icon": false,
+    "orientation": "horizontal",
+    "variant": "default"
+  },
+  "customProps": {
+    "progressStepItemStatus": {
+      "type": "enum",
+      "platforms": ["react"],
+      "values": ["complete", "active", "inactive", "hidden"],
+      "default": "complete"
+    },
+    "progressStepItemIcon": {
+      "type": "string",
+      "platforms": ["react"],
+      "default": "check"
+    },
+    "progressStepItemClassName": {
+      "type": "string",
+      "platforms": ["react"]
+    }
+  },
+  "propTargets": {
+    "progressStepItemStatus": "ProgressStepItem.props",
+    "progressStepItemIcon": "ProgressStepItem.props",
+    "progressStepItemClassName": "ProgressStepItem.props"
+  },
+  "propAliases": {
+    "progressStepItemStatus": "status",
+    "progressStepItemIcon": "icon",
+    "progressStepItemClassName": "className"
+  },
+  "groups": [
+    { "name": "Layout", "props": ["orientation"] },
+    { "name": "Appearance", "props": ["variant", "color", "icon", "dark"] },
+    {
+      "name": "ProgressStepItem Props",
+      "props": [
+        "progressStepItemStatus",
+        "progressStepItemIcon",
+        "progressStepItemClassName"
+      ]
+    }
+  ],
+  "hiddenProps": ["showIcon"],
+  "presets": [
+    {
+      "name": "Default",
+      "structureMode": "standard",
+      "props": {},
+      "children": "<ProgressStepItem status=\"complete\">Step 1</ProgressStepItem>\n<ProgressStepItem status=\"active\">Step 2</ProgressStepItem>\n<ProgressStepItem status=\"inactive\">Step 3</ProgressStepItem>"
+    },
+    {
+      "name": "With Icons",
+      "structureMode": "standard",
+      "props": {
+        "icon": true
+      },
+      "children": "<ProgressStepItem status=\"complete\">Step 1</ProgressStepItem>\n<ProgressStepItem status=\"complete\">Step 2</ProgressStepItem>\n<ProgressStepItem status=\"active\">Step 3</ProgressStepItem>\n<ProgressStepItem status=\"inactive\">Step 4</ProgressStepItem>"
+    },
+    {
+      "name": "Vertical",
+      "structureMode": "standard",
+      "props": {
+        "icon": true,
+        "orientation": "vertical"
+      },
+      "children": "<ProgressStepItem status=\"complete\">Account</ProgressStepItem>\n<ProgressStepItem status=\"active\">Profile</ProgressStepItem>\n<ProgressStepItem status=\"inactive\">Confirm</ProgressStepItem>"
+    },
+    {
+      "name": "Tracker",
+      "structureMode": "standard",
+      "props": {
+        "icon": true,
+        "variant": "tracker"
+      },
+      "children": "<ProgressStepItem status=\"complete\">Ordered</ProgressStepItem>\n<ProgressStepItem status=\"active\">Shipped</ProgressStepItem>\n<ProgressStepItem status=\"inactive\">Delivered</ProgressStepItem>"
+    },
+    {
+      "name": "Info Tracker",
+      "structureMode": "standard",
+      "props": {
+        "color": "info",
+        "icon": true,
+        "variant": "tracker"
+      },
+      "children": "<ProgressStepItem status=\"complete\">Queued</ProgressStepItem>\n<ProgressStepItem status=\"active\">Processing</ProgressStepItem>\n<ProgressStepItem status=\"inactive\">Complete</ProgressStepItem>"
+    },
+    {
+      "name": "Hidden Step",
+      "structureMode": "standard",
+      "props": {
+        "icon": true,
+        "variant": "tracker"
+      },
+      "children": "<ProgressStepItem status=\"complete\">Cart</ProgressStepItem>\n<ProgressStepItem status=\"hidden\" />\n<ProgressStepItem status=\"active\">Payment</ProgressStepItem>\n<ProgressStepItem status=\"inactive\">Review</ProgressStepItem>"
+    },
+    {
+      "name": "Custom Icon",
+      "structureMode": "progress_step_item_props",
+      "props": {
+        "icon": true,
+        "progressStepItemIcon": "exclamation-triangle",
+        "progressStepItemStatus": "active",
+        "variant": "tracker"
+      },
+      "children": "Review"
+    },
+    {
+      "name": "ProgressStepItem Active",
+      "structureMode": "progress_step_item_props",
+      "props": {
+        "icon": true,
+        "progressStepItemStatus": "active",
+        "variant": "tracker"
+      },
+      "children": "Current step"
+    }
+  ],
+  "conditionals": {
+    "color": {
+      "requires": {
+        "variant": "tracker"
+      }
+    }
+  },
+  "propSyncOnEnable": {
+    "progressStepItemStatus": {
+      "structureMode": "progress_step_item_props"
+    },
+    "progressStepItemIcon": {
+      "structureMode": "progress_step_item_props"
+    },
+    "progressStepItemClassName": {
+      "structureMode": "progress_step_item_props"
+    }
+  },
+  "hints": {
+    "children": {
+      "message": "ProgressStep is composed from ProgressStepItem children; edit children to change labels, count, and statuses.",
+      "type": "info"
+    },
+    "tracker": {
+      "when": { "variant": "tracker" },
+      "message": "Tracker is a horizontal treatment; use ProgressStepItem statuses to control filled, current, inactive, and hidden steps.",
+      "type": "info"
+    },
+    "info_tracker": {
+      "when": {
+        "color": "info",
+        "variant": "tracker"
+      },
+      "message": "Info color only changes the tracker treatment.",
+      "type": "info"
+    },
+    "progress_step_item_props": {
+      "presetName": "Custom Icon",
+      "message": "Custom Icon routes ProgressStepItem Props controls into the first ProgressStepItem.",
+      "type": "info"
+    }
+  }
+}

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

@@ -7,9 +7,10 @@
     "customChildren": false,
     "disabled": false,
     "error": false,
-    "name": "radio_name",
-    "value": "radio_text",
-    "text": "Radio Text"
+    "name": "shipping_method",
+    "value": "standard",
+    "text": "Standard shipping",
+    "label": "Standard shipping"
   },
   "groups": [
     {
@@ -33,13 +34,15 @@
       "name": "Appearance",
       "props": [
         "alignment",
-        "customChildren"
+        "customChildren",
+        "dark"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
+      "structureMode": "standard",
       "props": {
         "label": "Standard shipping",
         "name": "shipping_method",
@@ -49,6 +52,7 @@
     },
     {
       "name": "With Error",
+      "structureMode": "standard",
       "props": {
         "label": "Express shipping",
         "name": "shipping_method",
@@ -59,6 +63,7 @@
     },
     {
       "name": "Disabled",
+      "structureMode": "standard",
       "props": {
         "label": "Overnight shipping",
         "name": "shipping_method",
@@ -68,7 +73,8 @@
       }
     },
     {
-      "name": "Required",
+      "name": "Checked",
+      "structureMode": "standard",
       "props": {
         "label": "Standard shipping",
         "name": "shipping_method",
@@ -76,8 +82,76 @@
         "text": "Standard shipping",
         "checked": true
       }
+    },
+    {
+      "name": "Vertical",
+      "structureMode": "standard",
+      "props": {
+        "alignment": "vertical",
+        "label": "Standard shipping",
+        "name": "shipping_method",
+        "text": "Standard shipping",
+        "value": "standard"
+      }
+    },
+    {
+      "name": "Custom Children",
+      "structureMode": "custom_children",
+      "props": {
+        "customChildren": true,
+        "label": "Custom option",
+        "name": "radio_group",
+        "value": "custom"
+      },
+      "children": "<Title text=\"Custom radio content\" />"
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "custom_children": {
+      "presetName": "Custom Children",
+      "message": "Custom Children renders editable JSX next to the radio control.",
+      "type": "info"
+    },
+    "error": {
+      "when": {
+        "error": true
+      },
+      "message": "Error applies the negative radio state and label treatment.",
+      "type": "info"
+    }
+  },
+  "structureModes": {
+    "default": "standard",
+    "modes": {
+      "standard": {
+        "label": "Standard",
+        "template": "<Radio{{props}} />",
+        "children": ""
+      },
+      "custom_children": {
+        "label": "Custom Children",
+        "template": "<Radio{{props}}>\n  {{children}}\n</Radio>",
+        "children": "<Title text=\"Custom radio content\" />",
+        "props": {
+          "customChildren": true,
+          "label": "Custom option",
+          "name": "radio_group",
+          "value": "custom"
+        }
+      }
+    }
+  },
+  "children": {
+    "editable": true,
+    "default": "<Title text=\"Custom radio content\" />"
+  },
+  "hiddenProps": [
+    "onChange"
+  ],
+  "propSyncOnEnable": {
+    "customChildren": {
+      "structureMode": "custom_children"
+    }
+  }
 }

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

@@ -1,4 +1,41 @@
 {
+  "structureModes": {
+    "default": "standard",
+    "modes": {
+      "standard": {
+        "label": "Standard",
+        "template": "<Radio{{props}} />",
+        "children": ""
+      },
+      "custom_children": {
+        "label": "Custom Children",
+        "template": "<Radio{{props}}>\n  {{children}}\n</Radio>",
+        "children": "<Title text=\"Custom radio content\" />",
+        "props": {
+          "customChildren": true,
+          "label": "Custom option",
+          "name": "radio_group",
+          "value": "custom"
+        }
+      }
+    }
+  },
+  "children": {
+    "editable": true,
+    "default": "<Title text=\"Custom radio content\" />"
+  },
+  "defaults": {
+    "alignment": "",
+    "checked": false,
+    "customChildren": false,
+    "disabled": false,
+    "error": false,
+    "label": "Standard shipping",
+    "name": "shipping_method",
+    "text": "Standard shipping",
+    "value": "standard"
+  },
+  "hiddenProps": ["onChange"],
   "groups": [
     {
       "name": "Content",
@@ -10,12 +47,13 @@
     },
     {
       "name": "Appearance",
-      "props": ["alignment", "customChildren"]
+      "props": ["alignment", "customChildren", "dark"]
     }
   ],
   "presets": [
     {
       "name": "Default",
+      "structureMode": "standard",
       "props": {
         "label": "Standard shipping",
         "name": "shipping_method",
@@ -25,6 +63,7 @@
     },
     {
       "name": "With Error",
+      "structureMode": "standard",
       "props": {
         "label": "Express shipping",
         "name": "shipping_method",
@@ -35,6 +74,7 @@
     },
     {
       "name": "Disabled",
+      "structureMode": "standard",
       "props": {
         "label": "Overnight shipping",
         "name": "shipping_method",
@@ -44,7 +84,8 @@
       }
     },
     {
-      "name": "Required",
+      "name": "Checked",
+      "structureMode": "standard",
       "props": {
         "label": "Standard shipping",
         "name": "shipping_method",
@@ -52,8 +93,46 @@
         "text": "Standard shipping",
         "checked": true
       }
+    },
+    {
+      "name": "Vertical",
+      "structureMode": "standard",
+      "props": {
+        "alignment": "vertical",
+        "label": "Standard shipping",
+        "name": "shipping_method",
+        "text": "Standard shipping",
+        "value": "standard"
+      }
+    },
+    {
+      "name": "Custom Children",
+      "structureMode": "custom_children",
+      "props": {
+        "customChildren": true,
+        "label": "Custom option",
+        "name": "radio_group",
+        "value": "custom"
+      },
+      "children": "<Title text=\"Custom radio content\" />"
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "propSyncOnEnable": {
+    "customChildren": {
+      "structureMode": "custom_children"
+    }
+  },
+  "hints": {
+    "custom_children": {
+      "presetName": "Custom Children",
+      "message": "Custom Children renders editable JSX next to the radio control.",
+      "type": "info"
+    },
+    "error": {
+      "when": { "error": true },
+      "message": "Error applies the negative radio state and label treatment.",
+      "type": "info"
+    }
+  }
 }

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

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