playbook_ui_docs 16.7.0.pre.alpha.tablewidths16409 → 16.7.0.pre.rc.0

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

@@ -1,45 +1,4 @@
 {
-  "structureModes": {
-    "default": "simple",
-    "modes": {
-      "simple": {
-        "label": "Simple",
-        "template": "<Dropdown{{props}} />",
-        "children": ""
-      },
-      "subcomponents": {
-        "label": "With Subcomponents",
-        "template": "<Dropdown{{props}}>\n  <Dropdown.Trigger />\n  <Dropdown.Container>\n    <Dropdown.Option option={({ label: 'United States', value: 'unitedStates', id: 'us' })} />\n    <Dropdown.Option option={({ label: 'Canada', value: 'canada', id: 'ca' })} />\n    <Dropdown.Option option={({ label: 'Pakistan', value: 'pakistan', id: 'pk' })} />\n  </Dropdown.Container>\n</Dropdown>",
-        "children": "",
-        "props": {
-          "options": [
-            { "label": "United States", "value": "unitedStates", "id": "us" },
-            { "label": "Canada", "value": "canada", "id": "ca" },
-            { "label": "Pakistan", "value": "pakistan", "id": "pk" }
-          ]
-        }
-      }
-    }
-  },
-  "defaults": {
-    "autocomplete": false,
-    "blankSelection": "",
-    "clearable": true,
-    "closeOnClick": "any",
-    "constrainHeight": false,
-    "dark": false,
-    "label": "Select a Country",
-    "multiSelect": false,
-    "options": [
-      { "label": "United States", "value": "unitedStates", "id": "us" },
-      { "label": "Canada", "value": "canada", "id": "ca" },
-      { "label": "Pakistan", "value": "pakistan", "id": "pk" }
-    ],
-    "placeholder": "Select a country",
-    "requiredIndicator": false,
-    "separators": true,
-    "variant": "default"
-  },
   "groups": [
     {
       "name": "Content",
@@ -47,22 +6,28 @@
         "label",
         "placeholder",
         "options",
-        "defaultValue",
         "blankSelection",
         "error"
       ]
     },
     {
-      "name": "Behavior",
+      "name": "Appearance",
       "props": [
         "variant",
+        "separators",
+        "constrainHeight",
+        "clearable",
+        "requiredIndicator"
+      ]
+    },
+    {
+      "name": "State & behavior",
+      "props": [
+        "isClosed",
         "multiSelect",
         "autocomplete",
-        "clearable",
         "closeOnClick",
-        "constrainHeight",
-        "isClosed",
-        "requiredIndicator"
+        "onSelect"
       ]
     },
     {
@@ -75,17 +40,8 @@
       ]
     },
     {
-      "name": "Display",
-      "props": [
-        "separators",
-        "formPillProps",
-        "activeStyle",
-        "dark"
-      ]
-    },
-    {
-      "name": "Events",
-      "props": ["onSelect"]
+      "name": "Values & forms",
+      "props": ["defaultValue", "formPillProps"]
     }
   ],
   "presets": [
@@ -102,22 +58,10 @@
       }
     },
     {
-      "name": "With label",
-      "props": {
-        "label": "Select a Country",
-        "placeholder": "Choose a country",
-        "options": [
-          { "label": "United States", "value": "unitedStates", "id": "us" },
-          { "label": "Canada", "value": "canada", "id": "ca" },
-          { "label": "Pakistan", "value": "pakistan", "id": "pk" }
-        ]
-      }
-    },
-    {
-      "name": "Subtle Variant",
+      "name": "Subtle trigger",
       "props": {
         "variant": "subtle",
-        "separators": false,
+        "placeholder": "Choose an option",
         "options": [
           { "label": "Alpha", "value": "alpha", "id": "a" },
           { "label": "Beta", "value": "beta", "id": "b" },
@@ -129,53 +73,7 @@
       "name": "Quick pick",
       "props": {
         "variant": "quickpick",
-        "label": "Date Range",
-        "placeholder": "Select a Date Range"
-      }
-    },
-    {
-      "name": "Quick pick custom",
-      "props": {
-        "variant": "quickpick",
-        "label": "Date Range",
-        "customQuickPickDates": {
-          "dates": [
-            {
-              "label": "Last 15 months",
-              "value": {
-                "timePeriod": "months",
-                "amount": 15
-              }
-            },
-            {
-              "label": "First Week of June 2022",
-              "value": ["06/01/2022", "06/07/2022"]
-            }
-          ]
-        }
-      }
-    },
-    {
-      "name": "Quick pick append defaults",
-      "props": {
-        "variant": "quickpick",
-        "label": "Date Range",
-        "customQuickPickDates": {
-          "dates": [
-            {
-              "label": "Last 15 months",
-              "value": {
-                "timePeriod": "months",
-                "amount": 15
-              }
-            },
-            {
-              "label": "First Week of June 2022",
-              "value": ["06/01/2022", "06/07/2022"]
-            }
-          ],
-          "override": false
-        }
+        "label": "Date range"
       }
     },
     {
@@ -192,34 +90,10 @@
         ]
       }
     },
-    {
-      "name": "Multi-select with pills",
-      "props": {
-        "variant": "default",
-        "multiSelect": true,
-        "placeholder": "Select countries",
-        "formPillProps": { "size": "small", "color": "neutral" },
-        "defaultValue": [
-          { "label": "United States", "value": "unitedStates" },
-          { "label": "Italy", "value": "italy" }
-        ],
-        "options": [
-          { "label": "United States", "value": "unitedStates", "id": "us" },
-          { "label": "United Kingdom", "value": "unitedKingdom", "id": "gb" },
-          { "label": "Canada", "value": "canada", "id": "ca" },
-          { "label": "Pakistan", "value": "pakistan", "id": "pk" },
-          { "label": "India", "value": "india", "id": "in" },
-          { "label": "Australia", "value": "australia", "id": "au" },
-          { "label": "New Zealand", "value": "newZealand", "id": "nz" },
-          { "label": "Italy", "value": "italy", "id": "it" }
-        ]
-      }
-    },
     {
       "name": "With error",
       "props": {
         "variant": "default",
-        "label": "Required field",
         "placeholder": "Required field",
         "error": "Please make a selection.",
         "options": [
@@ -240,32 +114,9 @@
           { "label": "Banana", "value": "banana", "id": "3" }
         ]
       }
-    },
-    {
-      "name": "Constrained height",
-      "props": {
-        "label": "Choose an Option",
-        "constrainHeight": true,
-        "options": [
-          { "label": "Option 1", "value": "option_1", "id": "opt_1" },
-          { "label": "Option 2", "value": "option_2", "id": "opt_2" },
-          { "label": "Option 3", "value": "option_3", "id": "opt_3" },
-          { "label": "Option 4", "value": "option_4", "id": "opt_4" },
-          { "label": "Option 5", "value": "option_5", "id": "opt_5" },
-          { "label": "Option 6", "value": "option_6", "id": "opt_6" },
-          { "label": "Option 7", "value": "option_7", "id": "opt_7" },
-          { "label": "Option 8", "value": "option_8", "id": "opt_8" },
-          { "label": "Option 9", "value": "option_9", "id": "opt_9" },
-          { "label": "Option 10", "value": "option_10", "id": "opt_10" },
-          { "label": "Option 11", "value": "option_11", "id": "opt_11" },
-          { "label": "Option 12", "value": "option_12", "id": "opt_12" }
-        ]
-      }
     }
   ],
   "conditionals": {
-    "requiredIndicator": { "requires": "label" },
-    "formPillProps": { "requires": "multiSelect" },
     "rangeEndsToday": { "requires": { "variant": "quickpick" } },
     "controlsStartId": { "requires": { "variant": "quickpick" } },
     "controlsEndId": { "requires": { "variant": "quickpick" } },
@@ -274,36 +125,12 @@
   "hints": {
     "quickpick_scope": {
       "when": { "variant": "quickpick" },
-      "message": "Quick pick uses preset date-range options. Use customQuickPickDates to replace or extend them, and pair controlsStartId / controlsEndId with DatePicker when you need synced date inputs.",
+      "message": "Quick pick uses preset date-range options. Use custom quick pick dates or range controls to tailor the menu.",
       "type": "info"
     },
     "multi_options": {
       "when": { "multiSelect": true },
-      "message": "Multi-select returns arrays of selected options. Use formPillProps to adjust the selected-pill appearance and clearable to let users reset the selection.",
-      "type": "info"
-    },
-    "autocomplete_info": {
-      "when": { "autocomplete": true },
-      "message": "Autocomplete filters the provided options list in place. It works especially well with longer option sets.",
-      "type": "info"
-    },
-    "quickpick_custom_info": {
-      "presetName": "Quick pick custom",
-      "message": "When override is omitted or true, customQuickPickDates replaces the default quick-pick menu.",
-      "type": "info"
-    },
-    "quickpick_append_info": {
-      "presetName": "Quick pick append defaults",
-      "message": "Set customQuickPickDates.override to false to append your custom ranges to the built-in quick-pick options.",
-      "type": "info"
-    },
-    "constrained_height_info": {
-      "presetName": "Constrained height",
-      "message": "constrainHeight restricts the height of the dropdown menu and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.",
-      "type": "info"
-    },
-    "subcomponent_structure_info": {
-      "message": "Switch Structure to “With Subcomponents” to see the explicit Dropdown.Trigger, Dropdown.Container, and Dropdown.Option composition API.",
+      "message": "Multi-select shows selected values as pills when applicable; use clearable to allow resetting.",
       "type": "info"
     }
   }

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

@@ -1,99 +1,34 @@
 {
-  "template": "<Flex align=\"center\" orientation=\"column\">\n  <EmptyState{{props}} />\n</Flex>",
+  "template": "<EmptyState{{props}} />",
   "propTargets": {},
   "defaults": {
     "alignment": "center",
     "orientation": "vertical",
-    "size": "md",
-    "description": "Body text goes into detail with possible steps for user to take",
-    "header": "Title Explains",
-    "image": "default"
+    "size": "md"
   },
   "groups": [
     {
-      "name": "Layout",
+      "name": "Props",
       "props": [
         "alignment",
-        "orientation",
-        "size"
-      ]
-    },
-    {
-      "name": "Content",
-      "props": [
-        "header",
         "description",
-        "image"
-      ]
-    },
-    {
-      "name": "Actions",
-      "props": [
-        "primaryButton",
+        "header",
+        "image",
         "linkButton",
         "onLinkButtonClick",
-        "onPrimaryButtonClick"
+        "onPrimaryButtonClick",
+        "orientation",
+        "primaryButton",
+        "size"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {
-        "description": "Body text goes into detail with possible steps for user to take",
-        "header": "Title Explains",
-        "image": "default"
-      }
-    },
-    {
-      "name": "With Primary Action",
-      "props": {
-        "description": "Body text goes into detail with possible steps for user to take",
-        "header": "Title Explains",
-        "image": "default",
-        "primaryButton": "Next Action"
-      }
-    },
-    {
-      "name": "With Two Actions",
-      "props": {
-        "description": "Body text goes into detail with possible steps for user to take",
-        "header": "Title Explains",
-        "image": "default",
-        "linkButton": "Alt Action",
-        "primaryButton": "Next Action"
-      }
-    },
-    {
-      "name": "Horizontal",
-      "props": {
-        "alignment": "left",
-        "description": "Body text goes into detail with possible steps for user to take",
-        "header": "Title Explains",
-        "image": "default",
-        "orientation": "horizontal"
-      }
-    },
-    {
-      "name": "Small",
-      "props": {
-        "description": "Body text.",
-        "header": "Title Explains",
-        "image": "default",
-        "size": "sm"
-      }
+      "props": {}
     }
   ],
-  "conditionals": {
-    "onLinkButtonClick": {
-      "requires": "linkButton"
-    },
-    "onPrimaryButtonClick": {
-      "requires": "primaryButton"
-    }
-  },
-  "hints": {},
-  "imports": [
-    "Flex"
-  ]
+  "conditionals": {},
+  "hints": {}
 }

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

@@ -2,23 +2,24 @@
   "template": "<FileUpload{{props}} />",
   "propTargets": {},
   "defaults": {
-    "accept": {}
+    "accept": ""
   },
   "groups": [
     {
-      "name": "Guidance",
+      "name": "Props",
       "props": [
-        "customMessage",
         "accept",
+        "customMessage",
+        "dark",
         "acceptedFilesDescription",
-        "maxSize"
-      ]
-    },
-    {
-      "name": "State",
-      "props": [
+        "maxSize",
+        "onFilesAccepted",
+        "onFilesRejected",
         "error",
-        "dark"
+        "getRootProps",
+        "getInputProps",
+        "isDragActive",
+        "fileRejections"
       ]
     }
   ],
@@ -26,94 +27,8 @@
     {
       "name": "Default",
       "props": {}
-    },
-    {
-      "name": "Accepted Types",
-      "props": {
-        "accept": {
-          "image/svg+xml": [
-            ".svg",
-            ".xml"
-          ]
-        }
-      }
-    },
-    {
-      "name": "Custom Description",
-      "props": {
-        "accept": {
-          "application/pdf": [
-            ".pdf"
-          ],
-          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": [
-            ".xlsx"
-          ]
-        },
-        "acceptedFilesDescription": "Adobe (.pdf) and Microsoft (.xlsx)"
-      }
-    },
-    {
-      "name": "Custom Message",
-      "props": {
-        "customMessage": "Playbook is awesome!"
-      }
-    },
-    {
-      "name": "Max File Size",
-      "props": {
-        "accept": {
-          "application/pdf": [
-            ".pdf"
-          ]
-        },
-        "maxSize": 1000000
-      }
-    },
-    {
-      "name": "Error State",
-      "props": {
-        "error": "Please upload a valid file"
-      }
     }
   ],
-  "conditionals": {
-    "acceptedFilesDescription": {
-      "requires": "accept"
-    }
-  },
-  "hints": {
-    "accepted_types_info": {
-      "presetName": "Accepted Types",
-      "message": "Use MIME-type keys with extension arrays for accept, for example { image/svg+xml: ['.svg', '.xml'] }.",
-      "type": "info"
-    },
-    "custom_description_info": {
-      "presetName": "Custom Description",
-      "message": "acceptedFilesDescription only changes the helper copy. File validation still comes from the accept object.",
-      "type": "info"
-    },
-    "custom_message_info": {
-      "presetName": "Custom Message",
-      "message": "customMessage replaces the built-in guidance, including accepted types and max file size text.",
-      "type": "info"
-    },
-    "max_size_info": {
-      "presetName": "Max File Size",
-      "message": "maxSize is measured in bytes. In app code, pair it with onFilesRejected to surface rejection details.",
-      "type": "warning"
-    },
-    "error_state_info": {
-      "presetName": "Error State",
-      "message": "Use the error prop for validation or server feedback below the dropzone.",
-      "type": "info"
-    }
-  },
-  "hiddenProps": [
-    "fileRejections",
-    "getInputProps",
-    "getRootProps",
-    "isDragActive",
-    "onFilesAccepted",
-    "onFilesRejected"
-  ]
+  "conditionals": {},
+  "hints": {}
 }