@workday/canvas-kit-docs 15.0.0-alpha.0075-next.0 → 15.0.0-alpha.0076-next.0

package/dist/mdx/15.0-UPGRADE-GUIDE.mdx

@@ -32,6 +32,7 @@ space tokens, the new tokens aim to add more semantic meaning to allow for bette
   - [Buttons](#buttons)
 - [Removals](#removals)
   - [Segmented Control (Deprecated)](#segmented-control-deprecated)
+  - [Select (Deprecated)](#select-deprecated)
   - [Search Form (Labs)](#search-form-labs)
   - [Combobox (Labs)](#combobox-labs)
 - [Glossary](#glossary)
@@ -129,6 +130,8 @@ import {Pill} from '@workday/canvas-kit-react/pill';
 
 ### Segmented Control ⚡️
 
+**PR:** [#3633](https://github.com/Workday/canvas-kit/pull/3633)
+
 We've promoted `SegmentedControl` from [Preview](#preview) to [Main](#main). This replaces the deprecated `SegmentedControl` that was previously in Main.
 
 **Before in v14**
@@ -229,6 +232,8 @@ The promoted `SegmentedControl` includes several new features:
 
 ### Information Highlight ⚡️
 
+**PR:** [#3633](https://github.com/Workday/canvas-kit/pull/3633)
+
 We've promoted `InformationHighlight` from [Preview](#preview) to [Main](#main). There are no changes to the functionality or styling of the component. The only change required is updating the import statement.
 
 **Before in v14**
@@ -268,6 +273,124 @@ Please migrate to the new `SegmentedControl` component (promoted from Preview) w
 component pattern with `SegmentedControl.List` and `SegmentedControl.Item`. See the
 [API Differences](#api-differences) section above for migration guidance.
 
+### Select (Deprecated)
+
+**PR:** [#3658](https://github.com/Workday/canvas-kit/pull/3658)
+
+The `Select` component in `@workday/canvas-kit-preview-react/select` has been removed. Please use the
+`Select` component from `@workday/canvas-kit-react/select` instead.
+
+**Before in v14**
+
+```tsx
+import {Select} from '@workday/canvas-kit-preview-react/select';
+```
+
+**After in v15**
+
+```tsx
+import {Select} from '@workday/canvas-kit-react/select';
+```
+
+#### API Differences
+
+The Main `Select` is a [compound component](/getting-started/for-developers/resources/compound-components/)
+built on top of the Combobox component with a composition-based API, whereas the Preview Select was a
+monolithic class-based component.
+
+##### Structure Changes
+
+| Preview (Removed)           | Main                                                          |
+| --------------------------- | ------------------------------------------------------------- |
+| `Select` (single component) | `Select` + `Select.Input` + `Select.Popper` + `Select.Card` + `Select.List` + `Select.Item` |
+
+##### Prop Changes
+
+| Feature          | Preview (Removed)                          | Main                                             |
+| ---------------- | ------------------------------------------ | ------------------------------------------------ |
+| Options          | `options` prop (array of Option objects)   | `items` prop (array of any type)                 |
+| Selected value   | `value` prop                               | Managed via model (`useSelectModel`)             |
+| Change handler   | `onChange={(e) => {}}`                     | `onChange` on `Select.Input`                     |
+| Error state      | `error={Select.ErrorType.Error}`           | `error="error"` or `error="caution"`             |
+| Custom rendering | `renderOption` / `renderSelected` props    | Composition via `Select.Item` children           |
+| Form integration | Manual                                     | Built-in with `FormField` wrapper                |
+| Accessibility    | Manual ARIA                                | Built-in via Combobox foundation                 |
+
+##### Code Migration
+
+**Preview API (Removed)**
+
+```tsx
+import {Select} from '@workday/canvas-kit-preview-react/select';
+
+const options = [
+  {label: 'Small', value: 'small'},
+  {label: 'Medium', value: 'medium'},
+  {label: 'Large', value: 'large'},
+];
+
+const [value, setValue] = React.useState('medium');
+
+<Select
+  options={options}
+  value={value}
+  onChange={e => setValue(e.target.value)}
+/>
+```
+
+**Main API (v15)**
+
+```tsx
+import {Select} from '@workday/canvas-kit-react/select';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+const items = ['Small', 'Medium', 'Large'];
+
+<Select items={items}>
+  <FormField label="Size">
+    <Select.Input onChange={e => console.log('Selected:', e.target.value)} />
+    <Select.Popper>
+      <Select.Card>
+        <Select.List>
+          {item => <Select.Item>{item}</Select.Item>}
+        </Select.List>
+      </Select.Card>
+    </Select.Popper>
+  </FormField>
+</Select>
+```
+
+##### Main Select Features
+
+The Main `Select` includes features not available in the Preview version:
+
+- **Composition-based API**: Full control over structure with subcomponents
+- **FormField integration**: Built-in accessibility when wrapped with FormField
+- **Model-based state**: Use `useSelectModel` for advanced state management
+- **Virtualization support**: Enable for large lists via model config
+- **Icons in input**: Use `inputStartIcon` prop on `Select.Input`
+- **Icons in items**: Use `Select.Item.Icon` subcomponent
+
+```tsx
+// With icons
+<Select.Input inputStartIcon={myIcon} />
+
+// With item icons
+<Select.Item>
+  <Select.Item.Icon icon={starIcon} />
+  Favorite
+</Select.Item>
+
+// With model for controlled state
+const model = useSelectModel({
+  items: myItems,
+  onSelect: ({id}) => console.log('Selected:', id),
+});
+
+<Select model={model}>
+  ...
+</Select>
+```
 ### Search Form (Labs)
 
 The deprecated `SearchForm` component has been removed from `@workday/canvas-kit-labs-react`.

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

@@ -20,7 +20,8 @@ import HoistedModel from './examples/HoistedModel';
 import RefForwarding from './examples/RefForwarding';
 import FetchingDynamicItems from './examples/FetchingDynamicItems';
 import Placeholder from './examples/Placeholder';
-import InitialSelectedItem from './examples/InitialSelectedItem';import {Table} from '@workday/canvas-kit-react/table';
+import InitialSelectedItem from './examples/InitialSelectedItem';
+import GroupedItems from './examples/GroupedItems';import {Table} from '@workday/canvas-kit-react/table';
 
 
 # Canvas Kit Select
@@ -301,6 +302,12 @@ prop as well as the `value` DOM property and will update the model accordingly.
   </Select>
   ```
 
+### Grouped Items
+
+In order to group items, you have to use the static API in combination of the `Menu.Group` component.
+
+<ExampleCodeBlock code={GroupedItems} />
+
 ### Custom Styles
 
 Select and its subcomponents support custom styling via the `cs` prop. For more information, check

package/dist/mdx/react/select/examples/GroupedItems.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import {Menu} from '@workday/canvas-kit-react/menu';
+import {Select} from '@workday/canvas-kit-react/select';
+import {FormField} from '@workday/canvas-kit-react/form-field';
+
+const items = [
+  {
+    id: 'first',
+    text: 'First Item',
+  },
+  {
+    id: 'second',
+    text: 'Second Item',
+  },
+  {
+    id: 'third',
+    text: 'Third Item',
+  },
+  {
+    id: 'fourth',
+    text: 'Fourth Item',
+  },
+];
+
+export default () => {
+  const [selected, setSelected] = React.useState('');
+
+  return (
+    <>
+      <FormField>
+        <FormField.Label>Contact</FormField.Label>
+        <FormField.Field>
+          <Select items={items} getId={item => item.id} getTextValue={item => item.text}>
+            <FormField.Input as={Select.Input} />
+            <Select.Popper>
+              <Select.Card>
+                <Select.List>
+                  <Menu.Group title="First Group">
+                    <Select.Item data-id="first">First Item</Select.Item>
+                    <Select.Item data-id="second">Second Item</Select.Item>
+                  </Menu.Group>
+                  <Menu.Group title="Second Group">
+                    <Select.Item data-id="third">
+                      Third Item (with a really, really, really long label)
+                    </Select.Item>
+                    <Select.Item aria-disabled data-id="fourth">
+                      Fourth Item
+                    </Select.Item>
+                  </Menu.Group>
+                </Select.List>
+              </Select.Card>
+            </Select.Popper>
+          </Select>
+        </FormField.Field>
+      </FormField>
+    </>
+  );
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "15.0.0-alpha.0075-next.0",
+  "version": "15.0.0-alpha.0076-next.0",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -45,10 +45,10 @@
     "@emotion/styled": "^11.6.0",
     "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^15.0.0-alpha.0075-next.0",
-    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0075-next.0",
-    "@workday/canvas-kit-react": "^15.0.0-alpha.0075-next.0",
-    "@workday/canvas-kit-styling": "^15.0.0-alpha.0075-next.0",
+    "@workday/canvas-kit-labs-react": "^15.0.0-alpha.0076-next.0",
+    "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0076-next.0",
+    "@workday/canvas-kit-react": "^15.0.0-alpha.0076-next.0",
+    "@workday/canvas-kit-styling": "^15.0.0-alpha.0076-next.0",
     "@workday/canvas-system-icons-web": "^3.0.36",
     "@workday/canvas-tokens-web": "4.0.0-alpha.3",
     "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "85c5dfa329d29263f96a49be74ef55f551990c7b"
+  "gitHead": "5d389f1b5a66cf5bde37eb570ff634a7b143ee98"
 }

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

@@ -1,107 +0,0 @@
-import {
-  ExampleCodeBlock,
-  StorybookStatusIndicator,
-  SymbolDoc,
-  Specifications,
-} from '@workday/canvas-kit-docs';
-import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
-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 Caution from './examples/Top Label/Caution';
-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 <StorybookStatusIndicator type="deprecated" />
-
-<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
-  <InformationHighlight.Icon />
-  <InformationHighlight.Body>
-    `Select` in Preview has been deprecated and will be removed in a future major version. Please
-    use `Select` in Main instead.
-  </InformationHighlight.Body>
-  <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs">
-    Select (main) Docs
-  </InformationHighlight.Link>
-</InformationHighlight>
-
-<br />
-
-## 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={Caution} />
-
-### 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={CautionLeft} />
-
-### Error
-
-<ExampleCodeBlock code={ErrorLeft} />
-
-### Grow
-
-<ExampleCodeBlock code={GrowLeft} />

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

@@ -1,18 +0,0 @@
-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="caution">
-      <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

@@ -1,17 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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="horizontalStart" 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

@@ -1,17 +0,0 @@
-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="horizontalStart" 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

@@ -1,19 +0,0 @@
-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

@@ -1,18 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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';

package/dist/mdx/preview-react/select/examples/Top Label/Caution.tsx

@@ -1,16 +0,0 @@
-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 id="select-alert" error="caution">
-      <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/Top Label/Default.tsx

@@ -1,15 +0,0 @@
-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 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/Top Label/DefaultWithCustomOptions.tsx

@@ -1,23 +0,0 @@
-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 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/Top Label/DefaultWithSimpleOptions.tsx

@@ -1,15 +0,0 @@
-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 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/Top Label/Disabled.tsx

@@ -1,17 +0,0 @@
-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 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/Top Label/Error.tsx

@@ -1,16 +0,0 @@
-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 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/Top Label/Grow.tsx

@@ -1,15 +0,0 @@
-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 id="select-grow" grow={true}>
-      <FormField.Label>Label</FormField.Label>
-      <FormField.Field>
-        {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
-      </FormField.Field>
-    </FormField>
-  );
-};