@workday/canvas-kit-docs 12.0.0-alpha.855-next.0 → 12.0.0-alpha.898-next.0

package/dist/mdx/preview-react/radio/examples/Disabled.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 
 export default () => {
@@ -12,16 +12,29 @@ export default () => {
     }
   };
   return (
-    <FormField as="fieldset">
-      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
-      <FormField.Input as={RadioGroup} name="crust-disabled" onChange={handleChange} value={value}>
-        <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
-        <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
-        <RadioGroup.RadioButton disabled value="gluten-free">
-          Gluten free (sold out)
-        </RadioGroup.RadioButton>
-        <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
-      </FormField.Input>
-    </FormField>
+    <FormFieldGroup>
+      <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>
+      <FormFieldGroup.Field>
+        <FormFieldGroup.List
+          as={RadioGroup}
+          name="crust-disabled"
+          onChange={handleChange}
+          value={value}
+        >
+          <FormFieldGroup.Input as={RadioGroup.RadioButton} value="deep-dish">
+            Deep dish
+          </FormFieldGroup.Input>
+          <FormFieldGroup.Input as={RadioGroup.RadioButton} value="thin">
+            Thin
+          </FormFieldGroup.Input>
+          <FormFieldGroup.Input as={RadioGroup.RadioButton} disabled value="gluten-free">
+            Gluten free (sold out)
+          </FormFieldGroup.Input>
+          <FormFieldGroup.Input as={RadioGroup.RadioButton} value="cauliflower">
+            Cauliflower
+          </FormFieldGroup.Input>
+        </FormFieldGroup.List>
+      </FormFieldGroup.Field>
+    </FormFieldGroup>
   );
 };

package/dist/mdx/preview-react/radio/examples/Error.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 
 export default () => {
@@ -13,15 +13,30 @@ export default () => {
   };
 
   return (
-    <FormField error="error" as="fieldset">
-      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
-      <FormField.Input as={RadioGroup} name="crust-error" onChange={handleChange} value={value}>
-        <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
-        <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
-        <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
-        <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
-      </FormField.Input>
-      <FormField.Hint>Deep dish is currently sold out.</FormField.Hint>
-    </FormField>
+    <FormFieldGroup error="error">
+      <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>
+      <FormFieldGroup.Field>
+        <FormFieldGroup.List
+          as={RadioGroup}
+          name="crust-error"
+          onChange={handleChange}
+          value={value}
+        >
+          <FormFieldGroup.Input as={RadioGroup.RadioButton} value="deep-dish">
+            Deep dish
+          </FormFieldGroup.Input>
+          <FormFieldGroup.Input as={RadioGroup.RadioButton} value="thin">
+            Thin
+          </FormFieldGroup.Input>
+          <FormFieldGroup.Input as={RadioGroup.RadioButton} value="gluten-free">
+            Gluten free
+          </FormFieldGroup.Input>
+          <FormFieldGroup.Input as={RadioGroup.RadioButton} value="cauliflower">
+            Cauliflower
+          </FormFieldGroup.Input>
+        </FormFieldGroup.List>
+        <FormFieldGroup.Hint>Deep dish is currently sold out.</FormFieldGroup.Hint>
+      </FormFieldGroup.Field>
+    </FormFieldGroup>
   );
 };

package/dist/mdx/preview-react/radio/examples/Inverse.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {Box} from '@workday/canvas-kit-react/layout';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
 import {createStyles} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 
@@ -29,23 +28,20 @@ export default () => {
 
   return (
     <Box cs={styleOverrides.containerStyles}>
-      <FormField cs={styleOverrides.formFieldStyles} as="fieldset">
-        <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
-        <FormField.Input as={RadioGroup} name="crust-inverse" onChange={handleChange} value={value}>
-          <RadioGroup.RadioButton variant="inverse" value="deep-dish">
-            Deep dish
-          </RadioGroup.RadioButton>
-          <RadioGroup.RadioButton variant="inverse" value="thin">
-            Thin
-          </RadioGroup.RadioButton>
-          <RadioGroup.RadioButton variant="inverse" value="gluten-free">
-            Gluten free
-          </RadioGroup.RadioButton>
-          <RadioGroup.RadioButton variant="inverse" value="cauliflower">
-            Cauliflower
-          </RadioGroup.RadioButton>
-        </FormField.Input>
-      </FormField>
+      <RadioGroup name="crust-inverse" onChange={handleChange} value={value}>
+        <RadioGroup.RadioButton variant="inverse" value="deep-dish">
+          Deep dish
+        </RadioGroup.RadioButton>
+        <RadioGroup.RadioButton variant="inverse" value="thin">
+          Thin
+        </RadioGroup.RadioButton>
+        <RadioGroup.RadioButton variant="inverse" value="gluten-free">
+          Gluten free
+        </RadioGroup.RadioButton>
+        <RadioGroup.RadioButton variant="inverse" value="cauliflower">
+          Cauliflower
+        </RadioGroup.RadioButton>
+      </RadioGroup>
     </Box>
   );
 };

package/dist/mdx/preview-react/radio/examples/LabelPosition.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 
 export default () => {
@@ -12,14 +12,29 @@ export default () => {
     }
   };
   return (
-    <FormField orientation="horizontal" as="fieldset">
-      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
-      <FormField.Input as={RadioGroup} name="crust-label" onChange={handleChange} value={value}>
-        <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
-        <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
-        <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
-        <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
-      </FormField.Input>
-    </FormField>
+    <FormFieldGroup orientation="horizontalStart">
+      <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>
+      <FormFieldGroup.Field>
+        <FormFieldGroup.List
+          as={RadioGroup}
+          name="crust-label"
+          onChange={handleChange}
+          value={value}
+        >
+          <FormFieldGroup.Input as={RadioGroup.RadioButton} value="deep-dish">
+            Deep dish
+          </FormFieldGroup.Input>
+          <FormFieldGroup.Input as={RadioGroup.RadioButton} value="thin">
+            Thin
+          </FormFieldGroup.Input>
+          <FormFieldGroup.Input as={RadioGroup.RadioButton} value="gluten-free">
+            Gluten free
+          </FormFieldGroup.Input>
+          <FormFieldGroup.Input as={RadioGroup.RadioButton} value="cauliflower">
+            Cauliflower
+          </FormFieldGroup.Input>
+        </FormFieldGroup.List>
+      </FormFieldGroup.Field>
+    </FormFieldGroup>
   );
 };

package/dist/mdx/preview-react/radio/examples/NoValue.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 
 export default () => {
@@ -12,14 +12,27 @@ export default () => {
     }
   };
   return (
-    <FormField as="fieldset">
-      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
-      <FormField.Input as={RadioGroup} name="crust-no-value" onChange={handleChange} value={value}>
-        <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
-        <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
-        <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
-        <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
-      </FormField.Input>
-    </FormField>
+    <FormFieldGroup>
+      <FormFieldGroup.Label as="legend">Choose Your Pizza Crust</FormFieldGroup.Label>
+      <FormFieldGroup.List
+        as={RadioGroup}
+        name="crust-no-value"
+        onChange={handleChange}
+        value={value}
+      >
+        <FormFieldGroup.Input as={RadioGroup.RadioButton} value="deep-dish">
+          Deep dish
+        </FormFieldGroup.Input>
+        <FormFieldGroup.Input as={RadioGroup.RadioButton} value="thin">
+          Thin
+        </FormFieldGroup.Input>
+        <FormFieldGroup.Input as={RadioGroup.RadioButton} value="gluten-free">
+          Gluten free
+        </FormFieldGroup.Input>
+        <FormFieldGroup.Input as={RadioGroup.RadioButton} value="cauliflower">
+          Cauliflower
+        </FormFieldGroup.Input>
+      </FormFieldGroup.List>
+    </FormFieldGroup>
   );
 };

package/dist/mdx/preview-react/radio/examples/RefForwarding.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import {PrimaryButton} from '@workday/canvas-kit-react/button';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 
 export default () => {
@@ -20,17 +20,23 @@ export default () => {
 
   return (
     <>
-      <FormField as="fieldset">
-        <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
-        <FormField.Input as={RadioGroup} name="crust-ref" onChange={handleChange} value={value}>
-          <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
-          <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
-          <RadioGroup.RadioButton value="gluten-free" ref={glutenFreeRef}>
+      <FormFieldGroup>
+        <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>
+        <FormFieldGroup.List as={RadioGroup} name="crust-ref" onChange={handleChange} value={value}>
+          <FormFieldGroup.Input as={RadioGroup.RadioButton} value="deep-dish">
+            Deep dish
+          </FormFieldGroup.Input>
+          <FormFieldGroup.Input as={RadioGroup.RadioButton} value="thin">
+            Thin
+          </FormFieldGroup.Input>
+          <FormFieldGroup.Input as={RadioGroup.RadioButton} value="gluten-free" ref={glutenFreeRef}>
             Gluten free
-          </RadioGroup.RadioButton>
-          <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
-        </FormField.Input>
-      </FormField>
+          </FormFieldGroup.Input>
+          <FormFieldGroup.Input as={RadioGroup.RadioButton} value="cauliflower">
+            Cauliflower
+          </FormFieldGroup.Input>
+        </FormFieldGroup.List>
+      </FormFieldGroup>
       <PrimaryButton onClick={handleClick}>Select Gluten Free</PrimaryButton>
     </>
   );

package/dist/mdx/preview-react/radio/examples/Required.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
 import {RadioGroup} from '@workday/canvas-kit-preview-react/radio';
 
 export default () => {
@@ -12,21 +12,29 @@ export default () => {
     }
   };
   return (
-    <FormField isRequired={true} as="fieldset">
-      <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
-      <FormField.Input
+    <FormFieldGroup isRequired={true}>
+      <FormFieldGroup.Label>Choose Your Pizza Crust</FormFieldGroup.Label>
+      <FormFieldGroup.List
         as={RadioGroup}
         name="crust-required"
         onChange={handleChange}
         value={value}
         aria-describedby="choose-crust"
       >
-        <RadioGroup.RadioButton value="deep-dish">Deep dish</RadioGroup.RadioButton>
-        <RadioGroup.RadioButton value="thin">Thin</RadioGroup.RadioButton>
-        <RadioGroup.RadioButton value="gluten-free">Gluten free</RadioGroup.RadioButton>
-        <RadioGroup.RadioButton value="cauliflower">Cauliflower</RadioGroup.RadioButton>
-      </FormField.Input>
-      <FormField.Hint>You must choose a crust</FormField.Hint>
-    </FormField>
+        <FormFieldGroup.Input as={RadioGroup.RadioButton} value="deep-dish">
+          Deep dish
+        </FormFieldGroup.Input>
+        <FormFieldGroup.Input as={RadioGroup.RadioButton} value="thin">
+          Thin
+        </FormFieldGroup.Input>
+        <FormFieldGroup.Input as={RadioGroup.RadioButton} value="gluten-free">
+          Gluten free
+        </FormFieldGroup.Input>
+        <FormFieldGroup.Input as={RadioGroup.RadioButton} value="cauliflower">
+          Cauliflower
+        </FormFieldGroup.Input>
+      </FormFieldGroup.List>
+      <FormFieldGroup.Hint>You must choose a crust</FormFieldGroup.Hint>
+    </FormFieldGroup>
   );
 };

package/dist/mdx/preview-react/radio/examples/StandaloneRadio.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import {FormField} from '@workday/canvas-kit-preview-react/form-field';
+import {FormFieldGroup} from '@workday/canvas-kit-react/form-field';
 import {StyledRadioButton} from '@workday/canvas-kit-preview-react/radio';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
@@ -15,11 +15,11 @@ export default () => {
 
   return (
     <Flex flexDirection="column">
-      <FormField as="fieldset">
-        <FormField.Label as="legend">Choose Your Pizza Crust</FormField.Label>
+      <FormFieldGroup as="fieldset">
+        <FormFieldGroup.Label as="legend">Choose Your Pizza Crust</FormFieldGroup.Label>
         <Flex gap="m">
           <Flex as="label" gap="xs">
-            <FormField.Input
+            <FormFieldGroup.Input
               as={StyledRadioButton}
               onChange={handleChange}
               value="deep-dish"
@@ -29,7 +29,7 @@ export default () => {
             Deep dish
           </Flex>
           <Flex as="label" gap="xs">
-            <FormField.Input
+            <FormFieldGroup.Input
               as={StyledRadioButton}
               onChange={handleChange}
               value="gluten-free"
@@ -39,7 +39,7 @@ export default () => {
             Gluten free
           </Flex>
         </Flex>
-      </FormField>
+      </FormFieldGroup>
       Value selected: {value}
     </Flex>
   );

package/dist/mdx/preview-react/segmented-control/SegmentedControl.mdx

@@ -1,7 +1,4 @@
-import {SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
-
-import {SegmentedControl} from '@workday/canvas-kit-preview-react/segmented-control';
-
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
 import Basic from './examples/Basic';
 import Disabled from './examples/Disabled';
 import TextAndIcon from './examples/TextAndIcon';

package/dist/mdx/preview-react/select/Select.mdx

@@ -0,0 +1,89 @@
+import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
+import Default from './examples/Top Label/Default';
+import DefaultWithCustomOptions from './examples/Top Label/DefaultWithCustomOptions';
+import DefaultWithSimpleOptions from './examples/Top Label/DefaultWithSimpleOptions';
+import Scrollable from './examples/Top Label/Scrollable';
+import Disabled from './examples/Top Label/Disabled';
+import Alert from './examples/Top Label/Alert';
+import Error from './examples/Top Label/Error';
+import Grow from './examples/Top Label/Grow';
+import DefaultLeft from './examples/Left Label/DefaultLeft';
+import DefaultWithCustomOptionsLeft from './examples/Left Label/DefaultWithCustomOptionsLeft';
+import DefaultWithSimpleOptionsLeft from './examples/Left Label/DefaultWithSimpleOptionsLeft';
+import ScrollableLeft from './examples/Left Label/ScrollableLeft';
+import DisabledLeft from './examples/Left Label/DisabledLeft';
+import AlertLeft from './examples/Left Label/AlertLeft';
+import ErrorLeft from './examples/Left Label/ErrorLeft';
+import GrowLeft from './examples/Left Label/GrowLeft';
+
+
+
+# Canvas Kit Select
+
+## Top Label
+
+### Default
+
+<ExampleCodeBlock code={Default} />
+
+### Default with Custom Options Data
+
+<ExampleCodeBlock code={DefaultWithCustomOptions} />
+
+### Default with Simple Options Data
+
+<ExampleCodeBlock code={DefaultWithSimpleOptions} />
+
+### Scrollable
+
+<ExampleCodeBlock code={Scrollable} />
+
+### Disabled
+
+<ExampleCodeBlock code={Disabled} />
+
+### Alert
+
+<ExampleCodeBlock code={Alert} />
+
+### Error
+
+<ExampleCodeBlock code={Error} />
+
+### Grow
+
+<ExampleCodeBlock code={Grow} />
+
+## Left Label
+
+### Default
+
+<ExampleCodeBlock code={DefaultLeft} />
+
+### Default with Custom Options Data
+
+<ExampleCodeBlock code={DefaultWithCustomOptionsLeft} />
+
+### Default with Simple Options Data
+
+<ExampleCodeBlock code={DefaultWithSimpleOptionsLeft} />
+
+### Scrollable
+
+<ExampleCodeBlock code={ScrollableLeft} />
+
+### Disabled
+
+<ExampleCodeBlock code={DisabledLeft} />
+
+### Alert
+
+<ExampleCodeBlock code={AlertLeft} />
+
+### Error
+
+<ExampleCodeBlock code={ErrorLeft} />
+
+### Grow
+
+<ExampleCodeBlock code={GrowLeft} />

package/dist/mdx/preview-react/select/examples/Left Label/AlertLeft.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {hintText, options} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export default () => {
+  return (
+    <FormField orientation="horizontalStart" id="select-alert" error="alert">
+      <FormField.Label>Label</FormField.Label>
+      <FormField.Field>
+        {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
+        <FormField.Hint>{hintText}</FormField.Hint>
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/preview-react/select/examples/Left Label/DefaultLeft.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {options} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export default () => {
+  return (
+    <FormField orientation="horizontalStart" id="select-default">
+      <FormField.Label>Label</FormField.Label>
+      <FormField.Field>
+        {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/preview-react/select/examples/Left Label/DefaultWithCustomOptionsLeft.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {customOptions, customRenderOption, customRenderSelected} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export default () => {
+  return (
+    <FormField orientation="horizontal" id="select-default-custom">
+      <FormField.Label>Label</FormField.Label>
+      <FormField.Field>
+        {controlComponent(
+          <FormField.Input
+            as={Select}
+            name="icon"
+            options={customOptions}
+            renderOption={customRenderOption}
+            renderSelected={customRenderSelected}
+          />
+        )}
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/preview-react/select/examples/Left Label/DefaultWithSimpleOptionsLeft.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {simpleOptions} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export default () => {
+  return (
+    <FormField orientation="horizontal" id="select-default-simple">
+      <FormField.Label>Label</FormField.Label>
+      <FormField.Field>
+        {controlComponent(<FormField.Input as={Select} name="state" options={simpleOptions} />)}
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/preview-react/select/examples/Left Label/DisabledLeft.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {options} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export default () => {
+  return (
+    <FormField orientation="horizontalStart" id="select-disabled">
+      <FormField.Label>Label</FormField.Label>
+      <FormField.Field>
+        {controlComponent(
+          <FormField.Input as={Select} name="contact" options={options} disabled={true} />
+        )}
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/preview-react/select/examples/Left Label/ErrorLeft.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {hintText, options} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export default () => {
+  return (
+    <FormField orientation="horizontalStart" id="select-error" error="error">
+      <FormField.Label>Label</FormField.Label>
+      <FormField.Field>
+        {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
+        <FormField.Hint>{hintText}</FormField.Hint>
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/preview-react/select/examples/Left Label/GrowLeft.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {options} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export default () => {
+  return (
+    <FormField orientation="horizontalStart" id="select-grow" grow={true}>
+      <FormField.Label>Label</FormField.Label>
+      <FormField.Field>
+        {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/preview-react/select/examples/Left Label/ScrollableLeft.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import {FormField} from '@workday/canvas-kit-react/form-field';
+import {Select} from '@workday/canvas-kit-preview-react/select';
+import {manyOptions} from '../storiesData';
+import {controlComponent} from '../../../../../../utils/storybook';
+
+export default () => {
+  return (
+    <FormField orientation="horizontalStart" id="select-default">
+      <FormField.Label>Label</FormField.Label>
+      <FormField.Field>
+        {controlComponent(<FormField.Input as={Select} name="contact" options={manyOptions} />)}
+      </FormField.Field>
+    </FormField>
+  );
+};

package/dist/mdx/preview-react/select/examples/Left Label/index.ts

@@ -0,0 +1,8 @@
+export {DefaultLeft} from './DefaultLeft';
+export {DefaultWithCustomOptionsLeft} from './DefaultWithCustomOptionsLeft';
+export {DefaultWithSimpleOptionsLeft} from './DefaultWithSimpleOptionsLeft';
+export {ScrollableLeft} from './ScrollableLeft';
+export {DisabledLeft} from './DisabledLeft';
+export {AlertLeft} from './AlertLeft';
+export {ErrorLeft} from './ErrorLeft';
+export {GrowLeft} from './GrowLeft';