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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/dist/es6/lib/docs.js +124827 -126885
  2. package/dist/mdx/15.0-UPGRADE-GUIDE.mdx +148 -0
  3. package/dist/mdx/{preview-react → react}/pill/Pill.mdx +2 -2
  4. package/dist/mdx/{preview-react → react}/pill/examples/Basic.tsx +1 -1
  5. package/dist/mdx/{preview-react → react}/pill/examples/CustomStyles.tsx +1 -1
  6. package/dist/mdx/{preview-react → react}/pill/examples/WithAvatar.tsx +1 -1
  7. package/dist/mdx/{preview-react → react}/pill/examples/WithCount.tsx +1 -1
  8. package/dist/mdx/{preview-react → react}/pill/examples/WithList.tsx +1 -1
  9. package/dist/mdx/{preview-react → react}/pill/examples/WithReadOnly.tsx +1 -1
  10. package/dist/mdx/{preview-react → react}/pill/examples/WithRemovable.tsx +1 -1
  11. package/dist/mdx/react/select/Select.mdx +8 -1
  12. package/dist/mdx/react/select/examples/GroupedItems.tsx +59 -0
  13. package/package.json +6 -6
  14. package/dist/mdx/preview-react/select/Select.mdx +0 -107
  15. package/dist/mdx/preview-react/select/examples/Left Label/AlertLeft.tsx +0 -18
  16. package/dist/mdx/preview-react/select/examples/Left Label/DefaultLeft.tsx +0 -17
  17. package/dist/mdx/preview-react/select/examples/Left Label/DefaultWithCustomOptionsLeft.tsx +0 -25
  18. package/dist/mdx/preview-react/select/examples/Left Label/DefaultWithSimpleOptionsLeft.tsx +0 -17
  19. package/dist/mdx/preview-react/select/examples/Left Label/DisabledLeft.tsx +0 -19
  20. package/dist/mdx/preview-react/select/examples/Left Label/ErrorLeft.tsx +0 -18
  21. package/dist/mdx/preview-react/select/examples/Left Label/GrowLeft.tsx +0 -17
  22. package/dist/mdx/preview-react/select/examples/Left Label/ScrollableLeft.tsx +0 -17
  23. package/dist/mdx/preview-react/select/examples/Left Label/index.ts +0 -8
  24. package/dist/mdx/preview-react/select/examples/Top Label/Caution.tsx +0 -16
  25. package/dist/mdx/preview-react/select/examples/Top Label/Default.tsx +0 -15
  26. package/dist/mdx/preview-react/select/examples/Top Label/DefaultWithCustomOptions.tsx +0 -23
  27. package/dist/mdx/preview-react/select/examples/Top Label/DefaultWithSimpleOptions.tsx +0 -15
  28. package/dist/mdx/preview-react/select/examples/Top Label/Disabled.tsx +0 -17
  29. package/dist/mdx/preview-react/select/examples/Top Label/Error.tsx +0 -16
  30. package/dist/mdx/preview-react/select/examples/Top Label/Grow.tsx +0 -15
  31. package/dist/mdx/preview-react/select/examples/Top Label/Scrollable.tsx +0 -13
  32. package/dist/mdx/preview-react/select/examples/Top Label/index.ts +0 -8
  33. package/dist/mdx/preview-react/select/examples/storiesData.tsx +0 -92
  34. /package/dist/mdx/{preview-react → react}/pill/examples/test-avatar.png +0 -0
@@ -18,6 +18,9 @@ space tokens, the new tokens aim to add more semantic meaning to allow for bette
18
18
  - [Codemod](#codemod)
19
19
  - [Instructions](#instructions)
20
20
  - [Component Promotions](#component-promotions)
21
+ - [Pill](#pill-)
22
+ - [Segmented Control](#segmented-control-)
23
+ - [Information Highlight](#information-highlight-)
21
24
  - [Segmented Control ⚡️](#segmented-control-️)
22
25
  - [API Differences](#api-differences)
23
26
  - [Structure Changes](#structure-changes)
@@ -29,6 +32,7 @@ space tokens, the new tokens aim to add more semantic meaning to allow for bette
29
32
  - [Buttons](#buttons)
30
33
  - [Removals](#removals)
31
34
  - [Segmented Control (Deprecated)](#segmented-control-deprecated)
35
+ - [Select (Deprecated)](#select-deprecated)
32
36
  - [Search Form (Labs)](#search-form-labs)
33
37
  - [Combobox (Labs)](#combobox-labs)
34
38
  - [Glossary](#glossary)
@@ -102,8 +106,32 @@ yarn remove @workday/canvas-kit-codemod
102
106
 
103
107
  ## Component Promotions
104
108
 
109
+ ### Pill ⚡️
110
+
111
+ **PR** [#3634](https://github.com/Workday/canvas-kit/pull/3634)
112
+
113
+ We've promoted `Pill` from [Preview](#preview) to [Main](#main). There are no changes to the
114
+ functionality or styling of the component. The only change required is updating the import
115
+ statement.
116
+
117
+ **Before in v14**
118
+
119
+ ```tsx
120
+ import {Pill} from '@workday/canvas-kit-preview-react/pill';
121
+ ```
122
+
123
+ **After in v15**
124
+
125
+ ```tsx
126
+ import {Pill} from '@workday/canvas-kit-react/pill';
127
+ ```
128
+
129
+ > 🤖 The codemod will handle the change of imports as shown above.
130
+
105
131
  ### Segmented Control ⚡️
106
132
 
133
+ **PR:** [#3633](https://github.com/Workday/canvas-kit/pull/3633)
134
+
107
135
  We've promoted `SegmentedControl` from [Preview](#preview) to [Main](#main). This replaces the deprecated `SegmentedControl` that was previously in Main.
108
136
 
109
137
  **Before in v14**
@@ -204,6 +232,8 @@ The promoted `SegmentedControl` includes several new features:
204
232
 
205
233
  ### Information Highlight ⚡️
206
234
 
235
+ **PR:** [#3633](https://github.com/Workday/canvas-kit/pull/3633)
236
+
207
237
  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.
208
238
 
209
239
  **Before in v14**
@@ -243,6 +273,124 @@ Please migrate to the new `SegmentedControl` component (promoted from Preview) w
243
273
  component pattern with `SegmentedControl.List` and `SegmentedControl.Item`. See the
244
274
  [API Differences](#api-differences) section above for migration guidance.
245
275
 
276
+ ### Select (Deprecated)
277
+
278
+ **PR:** [#3658](https://github.com/Workday/canvas-kit/pull/3658)
279
+
280
+ The `Select` component in `@workday/canvas-kit-preview-react/select` has been removed. Please use the
281
+ `Select` component from `@workday/canvas-kit-react/select` instead.
282
+
283
+ **Before in v14**
284
+
285
+ ```tsx
286
+ import {Select} from '@workday/canvas-kit-preview-react/select';
287
+ ```
288
+
289
+ **After in v15**
290
+
291
+ ```tsx
292
+ import {Select} from '@workday/canvas-kit-react/select';
293
+ ```
294
+
295
+ #### API Differences
296
+
297
+ The Main `Select` is a [compound component](/getting-started/for-developers/resources/compound-components/)
298
+ built on top of the Combobox component with a composition-based API, whereas the Preview Select was a
299
+ monolithic class-based component.
300
+
301
+ ##### Structure Changes
302
+
303
+ | Preview (Removed) | Main |
304
+ | --------------------------- | ------------------------------------------------------------- |
305
+ | `Select` (single component) | `Select` + `Select.Input` + `Select.Popper` + `Select.Card` + `Select.List` + `Select.Item` |
306
+
307
+ ##### Prop Changes
308
+
309
+ | Feature | Preview (Removed) | Main |
310
+ | ---------------- | ------------------------------------------ | ------------------------------------------------ |
311
+ | Options | `options` prop (array of Option objects) | `items` prop (array of any type) |
312
+ | Selected value | `value` prop | Managed via model (`useSelectModel`) |
313
+ | Change handler | `onChange={(e) => {}}` | `onChange` on `Select.Input` |
314
+ | Error state | `error={Select.ErrorType.Error}` | `error="error"` or `error="caution"` |
315
+ | Custom rendering | `renderOption` / `renderSelected` props | Composition via `Select.Item` children |
316
+ | Form integration | Manual | Built-in with `FormField` wrapper |
317
+ | Accessibility | Manual ARIA | Built-in via Combobox foundation |
318
+
319
+ ##### Code Migration
320
+
321
+ **Preview API (Removed)**
322
+
323
+ ```tsx
324
+ import {Select} from '@workday/canvas-kit-preview-react/select';
325
+
326
+ const options = [
327
+ {label: 'Small', value: 'small'},
328
+ {label: 'Medium', value: 'medium'},
329
+ {label: 'Large', value: 'large'},
330
+ ];
331
+
332
+ const [value, setValue] = React.useState('medium');
333
+
334
+ <Select
335
+ options={options}
336
+ value={value}
337
+ onChange={e => setValue(e.target.value)}
338
+ />
339
+ ```
340
+
341
+ **Main API (v15)**
342
+
343
+ ```tsx
344
+ import {Select} from '@workday/canvas-kit-react/select';
345
+ import {FormField} from '@workday/canvas-kit-react/form-field';
346
+
347
+ const items = ['Small', 'Medium', 'Large'];
348
+
349
+ <Select items={items}>
350
+ <FormField label="Size">
351
+ <Select.Input onChange={e => console.log('Selected:', e.target.value)} />
352
+ <Select.Popper>
353
+ <Select.Card>
354
+ <Select.List>
355
+ {item => <Select.Item>{item}</Select.Item>}
356
+ </Select.List>
357
+ </Select.Card>
358
+ </Select.Popper>
359
+ </FormField>
360
+ </Select>
361
+ ```
362
+
363
+ ##### Main Select Features
364
+
365
+ The Main `Select` includes features not available in the Preview version:
366
+
367
+ - **Composition-based API**: Full control over structure with subcomponents
368
+ - **FormField integration**: Built-in accessibility when wrapped with FormField
369
+ - **Model-based state**: Use `useSelectModel` for advanced state management
370
+ - **Virtualization support**: Enable for large lists via model config
371
+ - **Icons in input**: Use `inputStartIcon` prop on `Select.Input`
372
+ - **Icons in items**: Use `Select.Item.Icon` subcomponent
373
+
374
+ ```tsx
375
+ // With icons
376
+ <Select.Input inputStartIcon={myIcon} />
377
+
378
+ // With item icons
379
+ <Select.Item>
380
+ <Select.Item.Icon icon={starIcon} />
381
+ Favorite
382
+ </Select.Item>
383
+
384
+ // With model for controlled state
385
+ const model = useSelectModel({
386
+ items: myItems,
387
+ onSelect: ({id}) => console.log('Selected:', id),
388
+ });
389
+
390
+ <Select model={model}>
391
+ ...
392
+ </Select>
393
+ ```
246
394
  ### Search Form (Labs)
247
395
 
248
396
  The deprecated `SearchForm` component has been removed from `@workday/canvas-kit-labs-react`.
@@ -17,7 +17,7 @@ information.
17
17
  ## Installation
18
18
 
19
19
  ```sh
20
- yarn add @workday/canvas-kit-preview-react
20
+ yarn add @workday/canvas-kit-react
21
21
  ```
22
22
 
23
23
  ## Usage
@@ -108,4 +108,4 @@ or view the example below.
108
108
 
109
109
  ## Component API
110
110
 
111
- <SymbolDoc name="Pill" fileName="/preview-react/" />
111
+ <SymbolDoc name="Pill" fileName="/react/" />
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
 
3
- import {Pill} from '@workday/canvas-kit-preview-react/pill';
3
+ import {Pill} from '@workday/canvas-kit-react/pill';
4
4
 
5
5
  import {BodyText} from '@workday/canvas-kit-react/text';
6
6
  import {createStyles} from '@workday/canvas-kit-styling';
@@ -1,4 +1,4 @@
1
- import {Pill, pillCountStencil, pillStencil} from '@workday/canvas-kit-preview-react/pill';
1
+ import {Pill, pillCountStencil, pillStencil} from '@workday/canvas-kit-react/pill';
2
2
 
3
3
  import {createStencil} from '@workday/canvas-kit-styling';
4
4
  import {system} from '@workday/canvas-tokens-web';
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
 
3
- import {Pill} from '@workday/canvas-kit-preview-react/pill';
3
+ import {Pill} from '@workday/canvas-kit-react/pill';
4
4
  // @ts-ignore: Cannot find module error
5
5
  import testAvatar from './test-avatar.png';
6
6
  import {BodyText} from '@workday/canvas-kit-react/text';
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import {Pill} from '@workday/canvas-kit-preview-react/pill';
2
+ import {Pill} from '@workday/canvas-kit-react/pill';
3
3
  import {BodyText} from '@workday/canvas-kit-react/text';
4
4
  import {createStyles} from '@workday/canvas-kit-styling';
5
5
  import {system} from '@workday/canvas-tokens-web';
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
 
3
- import {Pill} from '@workday/canvas-kit-preview-react/pill';
3
+ import {Pill} from '@workday/canvas-kit-react/pill';
4
4
  import {createStyles} from '@workday/canvas-kit-styling';
5
5
  import {system} from '@workday/canvas-tokens-web';
6
6
 
@@ -1,4 +1,4 @@
1
- import {Pill} from '@workday/canvas-kit-preview-react/pill';
1
+ import {Pill} from '@workday/canvas-kit-react/pill';
2
2
  import {createStyles} from '@workday/canvas-kit-styling';
3
3
  import {system} from '@workday/canvas-tokens-web';
4
4
 
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
 
3
- import {Pill} from '@workday/canvas-kit-preview-react/pill';
3
+ import {Pill} from '@workday/canvas-kit-react/pill';
4
4
  // @ts-ignore: Cannot find module error
5
5
  import testAvatar from './test-avatar.png';
6
6
  import {BodyText} from '@workday/canvas-kit-react/text';
@@ -20,7 +20,8 @@ import HoistedModel from './examples/HoistedModel';
20
20
  import RefForwarding from './examples/RefForwarding';
21
21
  import FetchingDynamicItems from './examples/FetchingDynamicItems';
22
22
  import Placeholder from './examples/Placeholder';
23
- import InitialSelectedItem from './examples/InitialSelectedItem';import {Table} from '@workday/canvas-kit-react/table';
23
+ import InitialSelectedItem from './examples/InitialSelectedItem';
24
+ import GroupedItems from './examples/GroupedItems';import {Table} from '@workday/canvas-kit-react/table';
24
25
 
25
26
 
26
27
  # Canvas Kit Select
@@ -301,6 +302,12 @@ prop as well as the `value` DOM property and will update the model accordingly.
301
302
  </Select>
302
303
  ```
303
304
 
305
+ ### Grouped Items
306
+
307
+ In order to group items, you have to use the static API in combination of the `Menu.Group` component.
308
+
309
+ <ExampleCodeBlock code={GroupedItems} />
310
+
304
311
  ### Custom Styles
305
312
 
306
313
  Select and its subcomponents support custom styling via the `cs` prop. For more information, check
@@ -0,0 +1,59 @@
1
+ import React from 'react';
2
+
3
+ import {Menu} from '@workday/canvas-kit-react/menu';
4
+ import {Select} from '@workday/canvas-kit-react/select';
5
+ import {FormField} from '@workday/canvas-kit-react/form-field';
6
+
7
+ const items = [
8
+ {
9
+ id: 'first',
10
+ text: 'First Item',
11
+ },
12
+ {
13
+ id: 'second',
14
+ text: 'Second Item',
15
+ },
16
+ {
17
+ id: 'third',
18
+ text: 'Third Item',
19
+ },
20
+ {
21
+ id: 'fourth',
22
+ text: 'Fourth Item',
23
+ },
24
+ ];
25
+
26
+ export default () => {
27
+ const [selected, setSelected] = React.useState('');
28
+
29
+ return (
30
+ <>
31
+ <FormField>
32
+ <FormField.Label>Contact</FormField.Label>
33
+ <FormField.Field>
34
+ <Select items={items} getId={item => item.id} getTextValue={item => item.text}>
35
+ <FormField.Input as={Select.Input} />
36
+ <Select.Popper>
37
+ <Select.Card>
38
+ <Select.List>
39
+ <Menu.Group title="First Group">
40
+ <Select.Item data-id="first">First Item</Select.Item>
41
+ <Select.Item data-id="second">Second Item</Select.Item>
42
+ </Menu.Group>
43
+ <Menu.Group title="Second Group">
44
+ <Select.Item data-id="third">
45
+ Third Item (with a really, really, really long label)
46
+ </Select.Item>
47
+ <Select.Item aria-disabled data-id="fourth">
48
+ Fourth Item
49
+ </Select.Item>
50
+ </Menu.Group>
51
+ </Select.List>
52
+ </Select.Card>
53
+ </Select.Popper>
54
+ </Select>
55
+ </FormField.Field>
56
+ </FormField>
57
+ </>
58
+ );
59
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-docs",
3
- "version": "15.0.0-alpha.0074-next.0",
3
+ "version": "15.0.0-alpha.0076-next.0",
4
4
  "description": "Documentation components of Canvas Kit components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -45,10 +45,10 @@
45
45
  "@emotion/styled": "^11.6.0",
46
46
  "@stackblitz/sdk": "^1.11.0",
47
47
  "@storybook/csf": "0.0.1",
48
- "@workday/canvas-kit-labs-react": "^15.0.0-alpha.0074-next.0",
49
- "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0074-next.0",
50
- "@workday/canvas-kit-react": "^15.0.0-alpha.0074-next.0",
51
- "@workday/canvas-kit-styling": "^15.0.0-alpha.0074-next.0",
48
+ "@workday/canvas-kit-labs-react": "^15.0.0-alpha.0076-next.0",
49
+ "@workday/canvas-kit-preview-react": "^15.0.0-alpha.0076-next.0",
50
+ "@workday/canvas-kit-react": "^15.0.0-alpha.0076-next.0",
51
+ "@workday/canvas-kit-styling": "^15.0.0-alpha.0076-next.0",
52
52
  "@workday/canvas-system-icons-web": "^3.0.36",
53
53
  "@workday/canvas-tokens-web": "4.0.0-alpha.3",
54
54
  "markdown-to-jsx": "^7.2.0",
@@ -61,5 +61,5 @@
61
61
  "mkdirp": "^1.0.3",
62
62
  "typescript": "5.0"
63
63
  },
64
- "gitHead": "3fbdd82f3f92e4c6aaebd87c84fcdcd6b39f87cc"
64
+ "gitHead": "5d389f1b5a66cf5bde37eb570ff634a7b143ee98"
65
65
  }
@@ -1,107 +0,0 @@
1
- import {
2
- ExampleCodeBlock,
3
- StorybookStatusIndicator,
4
- SymbolDoc,
5
- Specifications,
6
- } from '@workday/canvas-kit-docs';
7
- import {InformationHighlight} from '@workday/canvas-kit-react/information-highlight';
8
- import Default from './examples/Top Label/Default';
9
- import DefaultWithCustomOptions from './examples/Top Label/DefaultWithCustomOptions';
10
- import DefaultWithSimpleOptions from './examples/Top Label/DefaultWithSimpleOptions';
11
- import Scrollable from './examples/Top Label/Scrollable';
12
- import Disabled from './examples/Top Label/Disabled';
13
- import Caution from './examples/Top Label/Caution';
14
- import Error from './examples/Top Label/Error';
15
- import Grow from './examples/Top Label/Grow';
16
- import DefaultLeft from './examples/Left Label/DefaultLeft';
17
- import DefaultWithCustomOptionsLeft from './examples/Left Label/DefaultWithCustomOptionsLeft';
18
- import DefaultWithSimpleOptionsLeft from './examples/Left Label/DefaultWithSimpleOptionsLeft';
19
- import ScrollableLeft from './examples/Left Label/ScrollableLeft';
20
- import DisabledLeft from './examples/Left Label/DisabledLeft';
21
- import AlertLeft from './examples/Left Label/AlertLeft';
22
- import ErrorLeft from './examples/Left Label/ErrorLeft';
23
- import GrowLeft from './examples/Left Label/GrowLeft';
24
-
25
-
26
- # Canvas Kit Select <StorybookStatusIndicator type="deprecated" />
27
-
28
- <InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
29
- <InformationHighlight.Icon />
30
- <InformationHighlight.Body>
31
- `Select` in Preview has been deprecated and will be removed in a future major version. Please
32
- use `Select` in Main instead.
33
- </InformationHighlight.Body>
34
- <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/components-inputs-select--docs">
35
- Select (main) Docs
36
- </InformationHighlight.Link>
37
- </InformationHighlight>
38
-
39
- <br />
40
-
41
- ## Top Label
42
-
43
- ### Default
44
-
45
- <ExampleCodeBlock code={Default} />
46
-
47
- ### Default with Custom Options Data
48
-
49
- <ExampleCodeBlock code={DefaultWithCustomOptions} />
50
-
51
- ### Default with Simple Options Data
52
-
53
- <ExampleCodeBlock code={DefaultWithSimpleOptions} />
54
-
55
- ### Scrollable
56
-
57
- <ExampleCodeBlock code={Scrollable} />
58
-
59
- ### Disabled
60
-
61
- <ExampleCodeBlock code={Disabled} />
62
-
63
- ### Alert
64
-
65
- <ExampleCodeBlock code={Caution} />
66
-
67
- ### Error
68
-
69
- <ExampleCodeBlock code={Error} />
70
-
71
- ### Grow
72
-
73
- <ExampleCodeBlock code={Grow} />
74
-
75
- ## Left Label
76
-
77
- ### Default
78
-
79
- <ExampleCodeBlock code={DefaultLeft} />
80
-
81
- ### Default with Custom Options Data
82
-
83
- <ExampleCodeBlock code={DefaultWithCustomOptionsLeft} />
84
-
85
- ### Default with Simple Options Data
86
-
87
- <ExampleCodeBlock code={DefaultWithSimpleOptionsLeft} />
88
-
89
- ### Scrollable
90
-
91
- <ExampleCodeBlock code={ScrollableLeft} />
92
-
93
- ### Disabled
94
-
95
- <ExampleCodeBlock code={DisabledLeft} />
96
-
97
- ### Alert
98
-
99
- <ExampleCodeBlock code={CautionLeft} />
100
-
101
- ### Error
102
-
103
- <ExampleCodeBlock code={ErrorLeft} />
104
-
105
- ### Grow
106
-
107
- <ExampleCodeBlock code={GrowLeft} />
@@ -1,18 +0,0 @@
1
- import React from 'react';
2
-
3
- import {FormField} from '@workday/canvas-kit-react/form-field';
4
- import {Select} from '@workday/canvas-kit-preview-react/select';
5
- import {hintText, options} from '../storiesData';
6
- import {controlComponent} from '../../../../../../utils/storybook';
7
-
8
- export default () => {
9
- return (
10
- <FormField orientation="horizontalStart" id="select-alert" error="caution">
11
- <FormField.Label>Label</FormField.Label>
12
- <FormField.Field>
13
- {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
14
- <FormField.Hint>{hintText}</FormField.Hint>
15
- </FormField.Field>
16
- </FormField>
17
- );
18
- };
@@ -1,17 +0,0 @@
1
- import React from 'react';
2
-
3
- import {FormField} from '@workday/canvas-kit-react/form-field';
4
- import {Select} from '@workday/canvas-kit-preview-react/select';
5
- import {options} from '../storiesData';
6
- import {controlComponent} from '../../../../../../utils/storybook';
7
-
8
- export default () => {
9
- return (
10
- <FormField orientation="horizontalStart" id="select-default">
11
- <FormField.Label>Label</FormField.Label>
12
- <FormField.Field>
13
- {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
14
- </FormField.Field>
15
- </FormField>
16
- );
17
- };
@@ -1,25 +0,0 @@
1
- import React from 'react';
2
-
3
- import {FormField} from '@workday/canvas-kit-react/form-field';
4
- import {Select} from '@workday/canvas-kit-preview-react/select';
5
- import {customOptions, customRenderOption, customRenderSelected} from '../storiesData';
6
- import {controlComponent} from '../../../../../../utils/storybook';
7
-
8
- export default () => {
9
- return (
10
- <FormField orientation="horizontalStart" id="select-default-custom">
11
- <FormField.Label>Label</FormField.Label>
12
- <FormField.Field>
13
- {controlComponent(
14
- <FormField.Input
15
- as={Select}
16
- name="icon"
17
- options={customOptions}
18
- renderOption={customRenderOption}
19
- renderSelected={customRenderSelected}
20
- />
21
- )}
22
- </FormField.Field>
23
- </FormField>
24
- );
25
- };
@@ -1,17 +0,0 @@
1
- import React from 'react';
2
-
3
- import {FormField} from '@workday/canvas-kit-react/form-field';
4
- import {Select} from '@workday/canvas-kit-preview-react/select';
5
- import {simpleOptions} from '../storiesData';
6
- import {controlComponent} from '../../../../../../utils/storybook';
7
-
8
- export default () => {
9
- return (
10
- <FormField orientation="horizontalStart" id="select-default-simple">
11
- <FormField.Label>Label</FormField.Label>
12
- <FormField.Field>
13
- {controlComponent(<FormField.Input as={Select} name="state" options={simpleOptions} />)}
14
- </FormField.Field>
15
- </FormField>
16
- );
17
- };
@@ -1,19 +0,0 @@
1
- import React from 'react';
2
-
3
- import {FormField} from '@workday/canvas-kit-react/form-field';
4
- import {Select} from '@workday/canvas-kit-preview-react/select';
5
- import {options} from '../storiesData';
6
- import {controlComponent} from '../../../../../../utils/storybook';
7
-
8
- export default () => {
9
- return (
10
- <FormField orientation="horizontalStart" id="select-disabled">
11
- <FormField.Label>Label</FormField.Label>
12
- <FormField.Field>
13
- {controlComponent(
14
- <FormField.Input as={Select} name="contact" options={options} disabled={true} />
15
- )}
16
- </FormField.Field>
17
- </FormField>
18
- );
19
- };
@@ -1,18 +0,0 @@
1
- import React from 'react';
2
-
3
- import {FormField} from '@workday/canvas-kit-react/form-field';
4
- import {Select} from '@workday/canvas-kit-preview-react/select';
5
- import {hintText, options} from '../storiesData';
6
- import {controlComponent} from '../../../../../../utils/storybook';
7
-
8
- export default () => {
9
- return (
10
- <FormField orientation="horizontalStart" id="select-error" error="error">
11
- <FormField.Label>Label</FormField.Label>
12
- <FormField.Field>
13
- {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
14
- <FormField.Hint>{hintText}</FormField.Hint>
15
- </FormField.Field>
16
- </FormField>
17
- );
18
- };
@@ -1,17 +0,0 @@
1
- import React from 'react';
2
-
3
- import {FormField} from '@workday/canvas-kit-react/form-field';
4
- import {Select} from '@workday/canvas-kit-preview-react/select';
5
- import {options} from '../storiesData';
6
- import {controlComponent} from '../../../../../../utils/storybook';
7
-
8
- export default () => {
9
- return (
10
- <FormField orientation="horizontalStart" id="select-grow" grow={true}>
11
- <FormField.Label>Label</FormField.Label>
12
- <FormField.Field>
13
- {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
14
- </FormField.Field>
15
- </FormField>
16
- );
17
- };
@@ -1,17 +0,0 @@
1
- import React from 'react';
2
-
3
- import {FormField} from '@workday/canvas-kit-react/form-field';
4
- import {Select} from '@workday/canvas-kit-preview-react/select';
5
- import {manyOptions} from '../storiesData';
6
- import {controlComponent} from '../../../../../../utils/storybook';
7
-
8
- export default () => {
9
- return (
10
- <FormField orientation="horizontalStart" id="select-default">
11
- <FormField.Label>Label</FormField.Label>
12
- <FormField.Field>
13
- {controlComponent(<FormField.Input as={Select} name="contact" options={manyOptions} />)}
14
- </FormField.Field>
15
- </FormField>
16
- );
17
- };
@@ -1,8 +0,0 @@
1
- export {DefaultLeft} from './DefaultLeft';
2
- export {DefaultWithCustomOptionsLeft} from './DefaultWithCustomOptionsLeft';
3
- export {DefaultWithSimpleOptionsLeft} from './DefaultWithSimpleOptionsLeft';
4
- export {ScrollableLeft} from './ScrollableLeft';
5
- export {DisabledLeft} from './DisabledLeft';
6
- export {AlertLeft} from './AlertLeft';
7
- export {ErrorLeft} from './ErrorLeft';
8
- export {GrowLeft} from './GrowLeft';
@@ -1,16 +0,0 @@
1
- import {FormField} from '@workday/canvas-kit-react/form-field';
2
- import {Select} from '@workday/canvas-kit-preview-react/select';
3
- import {hintText, options} from '../storiesData';
4
- import {controlComponent} from '../../../../../../utils/storybook';
5
-
6
- export default () => {
7
- return (
8
- <FormField id="select-alert" error="caution">
9
- <FormField.Label>Label</FormField.Label>
10
- <FormField.Field>
11
- {controlComponent(<FormField.Input as={Select} name="contact" options={options} />)}
12
- <FormField.Hint>{hintText}</FormField.Hint>
13
- </FormField.Field>
14
- </FormField>
15
- );
16
- };