playbook_ui_docs 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -1,125 +1,408 @@
 {
-  "defaults": {
+  "structureModes": {
+    "default": "standard",
+    "modes": {
+      "standard": {
+        "label": "Standard",
+        "template": "<MultiLevelSelect\n  id=\"multi-level-select-playground\"\n  treeData={treeData}{{props}}\n/>"
+      },
+      "with_children": {
+        "label": "With Options Children",
+        "template": "<MultiLevelSelect\n  id=\"multi-level-select-with-children-playground\"\n  treeData={treeData}{{props}}\n>\n  <MultiLevelSelect.Options>\n    {(item) => (\n      <Badge\n          marginLeft=\"sm\"\n          text={item.status || 'available'}\n          variant={item.status === 'active' ? 'success' : 'warning'}\n      />\n    )}\n  </MultiLevelSelect.Options>\n</MultiLevelSelect>"
+      }
+    }
+  },
+  "children": {
+    "editable": false,
+    "default": ""
+  },
+  "customProps": {
+    "treeData": {
+      "type": "array",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "description": "Nested option data with id, label, value, and optional children."
+    }
+  },
+  "requiredProps": {
     "treeData": [
       {
-        "label": "Company",
-        "value": "company",
-        "id": "mls_co",
+        "label": "Power Home Remodeling",
+        "value": "powerHomeRemodeling",
+        "id": "powerhome1",
         "expanded": true,
+        "status": "active",
         "children": [
           {
-            "label": "Engineering",
-            "value": "engineering",
-            "id": "mls_eng",
+            "label": "People",
+            "value": "people",
+            "id": "people1",
+            "expanded": true,
+            "status": "active",
             "children": [
               {
-                "label": "Frontend",
-                "value": "frontend",
-                "id": "mls_fe"
+                "label": "Talent Acquisition",
+                "value": "talentAcquisition",
+                "id": "talent1",
+                "status": "active"
+              },
+              {
+                "label": "Business Affairs",
+                "value": "businessAffairs",
+                "id": "business1",
+                "status": "active",
+                "children": [
+                  {
+                    "label": "Initiatives",
+                    "value": "initiatives",
+                    "id": "initiative1",
+                    "status": "active"
+                  },
+                  {
+                    "label": "Learning & Development",
+                    "value": "learningAndDevelopment",
+                    "id": "development1",
+                    "status": "inactive"
+                  }
+                ]
               },
               {
-                "label": "Backend",
-                "value": "backend",
-                "id": "mls_be"
+                "label": "People Experience",
+                "value": "peopleExperience",
+                "id": "experience1",
+                "status": "inactive"
               }
             ]
           },
           {
-            "label": "Sales",
-            "value": "sales",
-            "id": "mls_sales"
+            "label": "Contact Center",
+            "value": "contactCenter",
+            "id": "contact1",
+            "status": "inactive",
+            "children": [
+              {
+                "label": "Appointment Management",
+                "value": "appointmentManagement",
+                "id": "appointment1",
+                "status": "active"
+              },
+              {
+                "label": "Customer Service",
+                "value": "customerService",
+                "id": "customer1",
+                "status": "inactive"
+              },
+              {
+                "label": "Energy",
+                "value": "energy",
+                "id": "energy1",
+                "status": "active"
+              }
+            ]
           }
         ]
       }
     ]
   },
+  "defaults": {
+    "disabled": false,
+    "error": "",
+    "inputDisplay": "pills",
+    "inputName": "",
+    "label": "",
+    "required": false,
+    "requiredIndicator": false,
+    "returnAllSelected": false,
+    "showCheckedChildren": true,
+    "placeholder": "Start typing...",
+    "variant": "multi",
+    "wrapped": false,
+    "selectedIds": [
+      "talent1",
+      "initiative1"
+    ],
+    "onSelect": "(selectedNodes) => console.log('Selected Items', selectedNodes)",
+    "onChange": "(event) => console.log('Filter changed', event.target.value)"
+  },
   "groups": [
     {
       "name": "Content",
-      "props": ["label", "name", "placeholder", "treeData", "selectedIds"]
+      "props": [
+        "treeData",
+        "label",
+        "name",
+        "placeholder",
+        "selectedIds",
+        "inputName"
+      ]
     },
     {
       "name": "State",
-      "props": ["disabled", "error", "required", "requiredIndicator"]
+      "props": [
+        "disabled",
+        "error",
+        "required",
+        "requiredIndicator"
+      ]
     },
     {
       "name": "Appearance",
-      "props": ["inputDisplay", "variant", "wrapped"]
+      "props": [
+        "inputDisplay",
+        "variant",
+        "wrapped"
+      ]
     },
     {
-      "name": "Selection behavior",
-      "props": ["returnAllSelected", "showCheckedChildren", "inputName"]
+      "name": "Selection Behavior",
+      "props": [
+        "returnAllSelected",
+        "showCheckedChildren"
+      ]
     },
     {
       "name": "Events",
-      "props": ["onChange", "onSelect"]
+      "props": [
+        "onSelect",
+        "onChange"
+      ]
     }
   ],
   "presets": [
     {
-      "name": "Multi (default)",
+      "name": "Multi",
+      "structureMode": "standard",
       "props": {
         "variant": "multi",
         "label": "Departments",
-        "placeholder": "Search teams…",
-        "inputDisplay": "pills"
+        "placeholder": "Search teams...",
+        "inputDisplay": "pills",
+        "onSelect": "(selectedNodes) => console.log('Selected Items', selectedNodes)"
       }
     },
     {
-      "name": "Single select",
+      "name": "Single Select",
+      "structureMode": "standard",
       "props": {
         "variant": "single",
         "label": "Pick one team",
-        "placeholder": "Choose…",
-        "inputDisplay": "pills"
+        "placeholder": "Choose...",
+        "inputDisplay": "pills",
+        "selectedIds": [
+          "talent1"
+        ],
+        "onSelect": "(selectedNode) => console.log('Selected Node', selectedNode)"
+      }
+    },
+    {
+      "name": "Selected IDs",
+      "structureMode": "standard",
+      "props": {
+        "variant": "multi",
+        "label": "Preselected teams",
+        "selectedIds": [
+          "talent1",
+          "initiative1",
+          "customer1"
+        ],
+        "onSelect": "(selectedNodes) => console.log('Selected Items', selectedNodes)"
       }
     },
     {
-      "name": "Plain input (no pills)",
+      "name": "Input Display None",
+      "structureMode": "standard",
       "props": {
         "variant": "multi",
         "label": "Teams",
-        "inputDisplay": "none"
+        "inputDisplay": "none",
+        "placeholder": "Search without pills..."
       }
     },
     {
-      "name": "Disabled",
+      "name": "Return All Selected",
+      "structureMode": "standard",
       "props": {
         "variant": "multi",
-        "label": "Locked",
-        "disabled": true
+        "label": "Include ancestors",
+        "returnAllSelected": true,
+        "selectedIds": [
+          "people1"
+        ],
+        "onSelect": "(selectedNodes) => console.log('Selected Items with parent data', selectedNodes)"
       }
     },
     {
-      "name": "With error",
+      "name": "Hide Checked Children",
+      "structureMode": "standard",
       "props": {
         "variant": "multi",
-        "label": "Required field",
-        "error": "Choose at least one option."
+        "label": "Compact selected list",
+        "showCheckedChildren": false,
+        "selectedIds": [
+          "talent1",
+          "initiative1",
+          "customer1"
+        ]
       }
     },
     {
-      "name": "Return all selected",
+      "name": "With Option Children",
+      "structureMode": "with_children",
       "props": {
         "variant": "multi",
-        "label": "Include ancestors",
-        "returnAllSelected": true
+        "label": "Teams with status",
+        "selectedIds": [
+          "talent1"
+        ],
+        "onSelect": "(selectedNodes) => console.log('Selected Items', selectedNodes)"
       }
     },
     {
-      "name": "Hide checked in tree",
+      "name": "Disabled Options",
+      "structureMode": "standard",
       "props": {
         "variant": "multi",
-        "label": "Compact tree",
-        "showCheckedChildren": false
+        "label": "Departments with disabled options",
+        "returnAllSelected": true,
+        "onSelect": "(selectedNodes) => console.log('Selected Items', selectedNodes)",
+        "treeData": [
+          {
+            "label": "Power Home Remodeling",
+            "value": "powerHomeRemodeling",
+            "id": "powerhome1",
+            "expanded": true,
+            "children": [
+              {
+                "label": "People",
+                "value": "people",
+                "id": "people1",
+                "expanded": true,
+                "children": [
+                  {
+                    "label": "Talent Acquisition",
+                    "value": "talentAcquisition",
+                    "id": "talent1",
+                    "disabled": true
+                  },
+                  {
+                    "label": "Business Affairs",
+                    "value": "businessAffairs",
+                    "id": "business1",
+                    "children": [
+                      {
+                        "label": "Initiatives",
+                        "value": "initiatives",
+                        "id": "initiative1",
+                        "disabled": true
+                      },
+                      {
+                        "label": "Learning & Development",
+                        "value": "learningAndDevelopment",
+                        "id": "development1"
+                      }
+                    ]
+                  },
+                  {
+                    "label": "People Experience",
+                    "value": "peopleExperience",
+                    "id": "experience1"
+                  }
+                ]
+              },
+              {
+                "label": "Contact Center",
+                "value": "contactCenter",
+                "id": "contact1",
+                "children": [
+                  {
+                    "label": "Appointment Management",
+                    "value": "appointmentManagement",
+                    "id": "appointment1"
+                  },
+                  {
+                    "label": "Customer Service",
+                    "value": "customerService",
+                    "id": "customer1",
+                    "disabled": true
+                  },
+                  {
+                    "label": "Energy",
+                    "value": "energy",
+                    "id": "energy1"
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      }
+    },
+    {
+      "name": "Disabled Input",
+      "structureMode": "standard",
+      "props": {
+        "variant": "multi",
+        "label": "Locked departments",
+        "disabled": true
       }
     }
   ],
-  "conditionals": {},
+  "conditionals": {
+    "requiredIndicator": {
+      "requires": "label"
+    }
+  },
   "hints": {
     "tree_data": {
       "when": {},
-      "message": "treeData is a nested list with id, label, value, and optional children; expand with expanded on nodes you want open by default.",
+      "message": "treeData is required. Each option needs an id, label, value, and can include children, expanded, disabled, or custom metadata for option children.",
+      "type": "info"
+    },
+    "multi": {
+      "presetName": "Multi",
+      "message": "Multi uses checkboxes and returns the selected nodes through onSelect. inputDisplay=\"pills\" shows selected items as pills in the input.",
+      "type": "info"
+    },
+    "single_select": {
+      "presetName": "Single Select",
+      "message": "Single Select uses radios and should receive at most one selectedIds value because only one node can be selected.",
+      "type": "info"
+    },
+    "selected_ids": {
+      "presetName": "Selected IDs",
+      "message": "selectedIds checks matching treeData node ids on load. In multi mode, multiple ids can be passed.",
+      "type": "info"
+    },
+    "input_display_none": {
+      "presetName": "Input Display None",
+      "message": "inputDisplay=\"none\" keeps selected pills out of the input while preserving filtering and selection behavior.",
+      "type": "info"
+    },
+    "return_all_selected": {
+      "presetName": "Return All Selected",
+      "message": "returnAllSelected changes the selected payload so parent and child selections can be returned together.",
+      "type": "info"
+    },
+    "hide_checked_children": {
+      "presetName": "Hide Checked Children",
+      "message": "showCheckedChildren={false} keeps checked child rows hidden under selected parents, which is useful for compact trees.",
+      "type": "info"
+    },
+    "with_option_children": {
+      "presetName": "With Option Children",
+      "message": "MultiLevelSelect.Options receives each item, so child content can use custom fields from treeData like status.",
+      "type": "info"
+    },
+    "disabled_options": {
+      "presetName": "Disabled Options",
+      "message": "Disabled options come from treeData nodes with disabled: true; those rows remain visible but cannot be selected.",
+      "type": "info"
+    },
+    "disabled_input": {
+      "presetName": "Disabled Input",
+      "message": "disabled locks the input and prevents opening or changing selections.",
       "type": "info"
     }
   }

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

@@ -48,7 +48,7 @@
   ],
   "presets": [
     {
-      "name": "Team · sm",
+      "name": "Size sm",
       "props": {
         "size": "sm",
         "users": [
@@ -72,7 +72,7 @@
       }
     },
     {
-      "name": "Team · lg",
+      "name": "Size lg",
       "props": {
         "size": "lg",
         "users": [
@@ -130,7 +130,6 @@
       "name": "Reverse order",
       "props": {
         "reverse": true,
-        "size": "xs",
         "users": [
           {
             "name": "Anna Black",
@@ -148,10 +147,9 @@
       }
     },
     {
-      "name": "Overflow (+more)",
+      "name": "Max displayed users",
       "props": {
         "maxDisplayedUsers": 3,
-        "size": "sm",
         "users": [
           {
             "name": "Anna Black",
@@ -178,5 +176,36 @@
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "size_sm": {
+      "presetName": "Size sm",
+      "message": "Size sm shows the standard overlapping avatar group at the small size.",
+      "type": "info"
+    },
+    "size_lg": {
+      "presetName": "Size lg",
+      "message": "Size lg increases the avatar size while preserving the overlapping group layout.",
+      "type": "info"
+    },
+    "initials_only": {
+      "presetName": "Initials only",
+      "message": "Initials only omits imageUrl so Avatar falls back to initials from each user name.",
+      "type": "info"
+    },
+    "with_tooltips": {
+      "presetName": "With tooltips",
+      "message": "With tooltips enables Tooltip wrappers and reads tooltip text from each user object.",
+      "type": "info"
+    },
+    "reverse_order": {
+      "presetName": "Reverse order",
+      "message": "Reverse order flips the overlap direction for the displayed users.",
+      "type": "info"
+    },
+    "max_displayed_users": {
+      "presetName": "Max displayed users",
+      "message": "Max displayed users uses maxDisplayedUsers to collapse extra people into the remaining count badge.",
+      "type": "info"
+    }
+  }
 }

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

@@ -39,7 +39,7 @@
   ],
   "presets": [
     {
-      "name": "Team · sm",
+      "name": "Size sm",
       "props": {
         "size": "sm",
         "users": [
@@ -63,7 +63,7 @@
       }
     },
     {
-      "name": "Team · lg",
+      "name": "Size lg",
       "props": {
         "size": "lg",
         "users": [
@@ -115,7 +115,6 @@
       "name": "Reverse order",
       "props": {
         "reverse": true,
-        "size": "xs",
         "users": [
           {
             "name": "Anna Black",
@@ -133,10 +132,9 @@
       }
     },
     {
-      "name": "Overflow (+more)",
+      "name": "Max displayed users",
       "props": {
         "maxDisplayedUsers": 3,
-        "size": "sm",
         "users": [
           {
             "name": "Anna Black",
@@ -163,5 +161,36 @@
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "size_sm": {
+      "presetName": "Size sm",
+      "message": "Size sm shows the standard overlapping avatar group at the small size.",
+      "type": "info"
+    },
+    "size_lg": {
+      "presetName": "Size lg",
+      "message": "Size lg increases the avatar size while preserving the overlapping group layout.",
+      "type": "info"
+    },
+    "initials_only": {
+      "presetName": "Initials only",
+      "message": "Initials only omits imageUrl so Avatar falls back to initials from each user name.",
+      "type": "info"
+    },
+    "with_tooltips": {
+      "presetName": "With tooltips",
+      "message": "With tooltips enables Tooltip wrappers and reads tooltip text from each user object.",
+      "type": "info"
+    },
+    "reverse_order": {
+      "presetName": "Reverse order",
+      "message": "Reverse order flips the overlap direction for the displayed users.",
+      "type": "info"
+    },
+    "max_displayed_users": {
+      "presetName": "Max displayed users",
+      "message": "Max displayed users uses maxDisplayedUsers to collapse extra people into the remaining count badge.",
+      "type": "info"
+    }
+  }
 }