playbook_ui_docs 16.7.0 → 16.8.0.pre.alpha.PLAY2945selectformblankselection16424

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

@@ -1,4 +1,45 @@
 {
+  "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",
@@ -6,28 +47,22 @@
         "label",
         "placeholder",
         "options",
+        "defaultValue",
         "blankSelection",
         "error"
       ]
     },
     {
-      "name": "Appearance",
+      "name": "Behavior",
       "props": [
         "variant",
-        "separators",
-        "constrainHeight",
-        "clearable",
-        "requiredIndicator"
-      ]
-    },
-    {
-      "name": "State & behavior",
-      "props": [
-        "isClosed",
         "multiSelect",
         "autocomplete",
+        "clearable",
         "closeOnClick",
-        "onSelect"
+        "constrainHeight",
+        "isClosed",
+        "requiredIndicator"
       ]
     },
     {
@@ -40,8 +75,17 @@
       ]
     },
     {
-      "name": "Values & forms",
-      "props": ["defaultValue", "formPillProps"]
+      "name": "Display",
+      "props": [
+        "separators",
+        "formPillProps",
+        "activeStyle",
+        "dark"
+      ]
+    },
+    {
+      "name": "Events",
+      "props": ["onSelect"]
     }
   ],
   "presets": [
@@ -58,10 +102,22 @@
       }
     },
     {
-      "name": "Subtle trigger",
+      "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",
       "props": {
         "variant": "subtle",
-        "placeholder": "Choose an option",
+        "separators": false,
         "options": [
           { "label": "Alpha", "value": "alpha", "id": "a" },
           { "label": "Beta", "value": "beta", "id": "b" },
@@ -73,7 +129,53 @@
       "name": "Quick pick",
       "props": {
         "variant": "quickpick",
-        "label": "Date range"
+        "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
+        }
       }
     },
     {
@@ -90,10 +192,34 @@
         ]
       }
     },
+    {
+      "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": [
@@ -114,9 +240,32 @@
           { "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" } },
@@ -125,12 +274,36 @@
   "hints": {
     "quickpick_scope": {
       "when": { "variant": "quickpick" },
-      "message": "Quick pick uses preset date-range options. Use custom quick pick dates or range controls to tailor the menu.",
+      "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.",
       "type": "info"
     },
     "multi_options": {
       "when": { "multiSelect": true },
-      "message": "Multi-select shows selected values as pills when applicable; use clearable to allow resetting.",
+      "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.",
       "type": "info"
     }
   }

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

@@ -1,34 +1,99 @@
 {
-  "template": "<EmptyState{{props}} />",
+  "template": "<Flex align=\"center\" orientation=\"column\">\n  <EmptyState{{props}} />\n</Flex>",
   "propTargets": {},
   "defaults": {
     "alignment": "center",
     "orientation": "vertical",
-    "size": "md"
+    "size": "md",
+    "description": "Body text goes into detail with possible steps for user to take",
+    "header": "Title Explains",
+    "image": "default"
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Layout",
       "props": [
         "alignment",
-        "description",
+        "orientation",
+        "size"
+      ]
+    },
+    {
+      "name": "Content",
+      "props": [
         "header",
-        "image",
+        "description",
+        "image"
+      ]
+    },
+    {
+      "name": "Actions",
+      "props": [
+        "primaryButton",
         "linkButton",
         "onLinkButtonClick",
-        "onPrimaryButtonClick",
-        "orientation",
-        "primaryButton",
-        "size"
+        "onPrimaryButtonClick"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "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"
+      }
     }
   ],
-  "conditionals": {},
-  "hints": {}
+  "conditionals": {
+    "onLinkButtonClick": {
+      "requires": "linkButton"
+    },
+    "onPrimaryButtonClick": {
+      "requires": "primaryButton"
+    }
+  },
+  "hints": {},
+  "imports": [
+    "Flex"
+  ]
 }

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

@@ -0,0 +1,79 @@
+{
+  "template": "<Flex align=\"center\" orientation=\"column\">\n  <EmptyState{{props}} />\n</Flex>",
+  "imports": ["Flex"],
+  "defaults": {
+    "alignment": "center",
+    "description": "Body text goes into detail with possible steps for user to take",
+    "header": "Title Explains",
+    "image": "default",
+    "orientation": "vertical",
+    "size": "md"
+  },
+  "groups": [
+    {
+      "name": "Layout",
+      "props": ["alignment", "orientation", "size"]
+    },
+    {
+      "name": "Content",
+      "props": ["header", "description", "image"]
+    },
+    {
+      "name": "Actions",
+      "props": ["primaryButton", "linkButton", "onLinkButtonClick", "onPrimaryButtonClick"]
+    }
+  ],
+  "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"
+      }
+    }
+  ],
+  "conditionals": {
+    "onLinkButtonClick": { "requires": "linkButton" },
+    "onPrimaryButtonClick": { "requires": "primaryButton" }
+  },
+  "hints": {}
+}

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

@@ -2,24 +2,23 @@
   "template": "<FileUpload{{props}} />",
   "propTargets": {},
   "defaults": {
-    "accept": ""
+    "accept": {}
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Guidance",
       "props": [
-        "accept",
         "customMessage",
-        "dark",
+        "accept",
         "acceptedFilesDescription",
-        "maxSize",
-        "onFilesAccepted",
-        "onFilesRejected",
+        "maxSize"
+      ]
+    },
+    {
+      "name": "State",
+      "props": [
         "error",
-        "getRootProps",
-        "getInputProps",
-        "isDragActive",
-        "fileRejections"
+        "dark"
       ]
     }
   ],
@@ -27,8 +26,94 @@
     {
       "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": {},
-  "hints": {}
+  "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"
+  ]
 }