ComboBox: completed examples for testing (#3835)

pinterest · Oct 29, 2024 · 6331558 · 6331558
1 parent 78e0c69
commit 6331558
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 18 deletions.
diff --git a/docs/examples/combobox/helperText.tsx b/docs/examples/combobox/helperText.tsx
@@ -1,16 +1,37 @@
-import { Box, ComboBox } from 'gestalt';
+import { Box, ComboBox, Flex } from 'gestalt';
 
 export default function Example() {
   return (
     <Box padding={8} width="100%">
-      <ComboBox
-        accessibilityClearButtonLabel="Clear the current value"
-        helperText="Select one from all your current active accounts."
-        id="helperText"
-        label="Select account"
-        noResultText="No results for your selection"
-        options={[]}
-      />
+      <Flex direction="column" gap={4}>
+        <ComboBox
+          accessibilityClearButtonLabel="Clear the current value"
+          helperText="Select one from all your current active accounts."
+          id="helperText"
+          label="Select account"
+          noResultText="No results for your selection"
+          options={[]}
+          size="sm"
+        />
+        <ComboBox
+          accessibilityClearButtonLabel="Clear the current value"
+          helperText="Select one from all your current active accounts."
+          id="helperText"
+          label="Select account"
+          noResultText="No results for your selection"
+          options={[]}
+          size="md"
+        />
+        <ComboBox
+          accessibilityClearButtonLabel="Clear the current value"
+          helperText="Select one from all your current active accounts."
+          id="helperText"
+          label="Select account"
+          noResultText="No results for your selection"
+          options={[]}
+          size="lg"
+        />
+      </Flex>
     </Box>
   );
 }
diff --git a/docs/examples/combobox/subtext.tsx b/docs/examples/combobox/subtext.tsx
@@ -1,4 +1,4 @@
-import { Box, ComboBox } from 'gestalt';
+import { Box, ComboBox, Flex } from 'gestalt';
 
 export default function Example() {
   const options = Array(20)
@@ -11,14 +11,35 @@ export default function Example() {
 
   return (
     <Box padding={8} width="100%">
-      <ComboBox
-        accessibilityClearButtonLabel="Clear the current value"
-        id="subtext"
-        label="Choose a value"
-        noResultText="No results for your selection"
-        options={options}
-        placeholder="Select a value"
-      />
+      <Flex direction="column" gap={4}>
+        <ComboBox
+          accessibilityClearButtonLabel="Clear the current value"
+          id="subtext"
+          label="Choose a value"
+          noResultText="No results for your selection"
+          options={options}
+          placeholder="Select a value"
+          size="sm"
+        />
+        <ComboBox
+          accessibilityClearButtonLabel="Clear the current value"
+          id="subtext"
+          label="Choose a value"
+          noResultText="No results for your selection"
+          options={options}
+          placeholder="Select a value"
+          size="md"
+        />
+        <ComboBox
+          accessibilityClearButtonLabel="Clear the current value"
+          id="subtext"
+          label="Choose a value"
+          noResultText="No results for your selection"
+          options={options}
+          placeholder="Select a value"
+          size="lg"
+        />
+      </Flex>
     </Box>
   );
 }