@workday/canvas-kit-docs 14.0.0-alpha.1203-next.0 → 14.0.0-alpha.1210-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.
- package/dist/es6/lib/docs.js +2608 -273
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +5 -5
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +5 -5
- package/dist/mdx/14.0-UPGRADE-GUIDE.mdx +90 -9
- package/dist/mdx/labs-react/combobox/Combobox.mdx +19 -3
- package/dist/mdx/preview-react/multi-select/MultiSelect.mdx +8 -1
- package/dist/mdx/preview-react/multi-select/examples/InitialSelectedItems.tsx +129 -0
- package/dist/mdx/preview-react/status-indicator/examples/Icon.tsx +1 -1
- package/dist/mdx/preview-react/status-indicator/examples/Variants.tsx +8 -8
- package/dist/mdx/preview-react/text-area/TextArea.mdx +3 -3
- package/dist/mdx/preview-react/text-input/TextInput.mdx +3 -3
- package/dist/mdx/react/radio/Radio.mdx +15 -6
- package/dist/mdx/react/segmented-control/SegmentedControl.mdx +21 -2
- package/package.json +6 -6
|
@@ -18,11 +18,11 @@ export const packageJSONFile = `{
|
|
|
18
18
|
"@emotion/react": "11.11.4",
|
|
19
19
|
"@types/react": "18.2.60",
|
|
20
20
|
"@types/react-dom": "18.2.19",
|
|
21
|
-
"@workday/canvas-kit-labs-react": "13.2.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "13.2.
|
|
23
|
-
"@workday/canvas-kit-react": "13.2.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^13.2.
|
|
25
|
-
"@workday/canvas-kit-styling": "13.2.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "13.2.19",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "13.2.19",
|
|
23
|
+
"@workday/canvas-kit-react": "13.2.19",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^13.2.19",
|
|
25
|
+
"@workday/canvas-kit-styling": "13.2.19",
|
|
26
26
|
"@workday/canvas-system-icons-web": "3.0.22",
|
|
27
27
|
"@workday/canvas-tokens-web": "2.0.0"
|
|
28
28
|
},
|
|
@@ -18,11 +18,11 @@ export const packageJSONFile = `{
|
|
|
18
18
|
"@emotion/react": "11.11.4",
|
|
19
19
|
"@types/react": "18.2.60",
|
|
20
20
|
"@types/react-dom": "18.2.19",
|
|
21
|
-
"@workday/canvas-kit-labs-react": "13.2.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "13.2.
|
|
23
|
-
"@workday/canvas-kit-react": "13.2.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^13.2.
|
|
25
|
-
"@workday/canvas-kit-styling": "13.2.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "13.2.19",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "13.2.19",
|
|
23
|
+
"@workday/canvas-kit-react": "13.2.19",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^13.2.19",
|
|
25
|
+
"@workday/canvas-kit-styling": "13.2.19",
|
|
26
26
|
"@workday/canvas-system-icons-web": "3.0.22",
|
|
27
27
|
"@workday/canvas-tokens-web": "2.0.0"
|
|
28
28
|
},
|
|
@@ -11,12 +11,20 @@ any questions.
|
|
|
11
11
|
- [Theming](#theming)
|
|
12
12
|
- [Component Updates](#component-updates)
|
|
13
13
|
- [Branding Changes](#branding-changes)
|
|
14
|
+
- [Buttons](#buttons)
|
|
14
15
|
- [Card](#card)
|
|
15
16
|
- [Count Badge](#count-badge)
|
|
16
17
|
- [Expandable](#expandable)
|
|
17
18
|
- [Hyperlink & ExternalHyperlink](#hyperlink-and-externalhyperlink)
|
|
18
19
|
- [Loading Dots](#loading-dots)
|
|
19
20
|
- [SearchForm](#search-form)
|
|
21
|
+
- [Status Indicator (Preview)](#status-indicator-preview)
|
|
22
|
+
- [Deprecations](#deprecations)
|
|
23
|
+
- [Combobox (Labs)](#combobox-labs)
|
|
24
|
+
- [Radio (Main)](#radio-main)
|
|
25
|
+
- [Segmented Control (Main)](#segmented-control-main)
|
|
26
|
+
- [Side Panel (Main)](#side-panel-main)
|
|
27
|
+
- [Tokens](#tokens)
|
|
20
28
|
- [Removals](#removals)
|
|
21
29
|
- [Menu (preview)](#menu-preview)
|
|
22
30
|
- [Troubleshooting](#troubleshooting)
|
|
@@ -93,16 +101,16 @@ yarn remove @workday/canvas-kit-codemod
|
|
|
93
101
|
- `CanvasThemePalette` has been updated to include a `lighter` color.
|
|
94
102
|
- `CanvasTheme` has been updated to include a `lighter` color.
|
|
95
103
|
|
|
96
|
-
|
|
97
104
|
## Component Updates
|
|
98
105
|
|
|
99
106
|
### Branding Changes 💅
|
|
100
107
|
|
|
101
|
-
Several components have been refactored to reflect our new brand direction. Most of these changes revolve around the use of our new
|
|
108
|
+
Several components have been refactored to reflect our new brand direction. Most of these changes revolve around the use of our new brand colors.
|
|
102
109
|
|
|
103
110
|
The following components have been updated:
|
|
104
111
|
|
|
105
112
|
- `Breadcrumbs` [#3270](https://github.com/Workday/canvas-kit/pull/3270)
|
|
113
|
+
- `Buttons` [#3394](https://github.com/Workday/canvas-kit/pull/3394)
|
|
106
114
|
- `ColorPicker` (Main) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
|
|
107
115
|
- `ColorPicker` (preview) [#3307](https://github.com/Workday/canvas-kit/pull/3307)
|
|
108
116
|
- `LoadingDots` (Main) [#3393](https://github.com/Workday/canvas-kit/pull/3393)
|
|
@@ -113,6 +121,20 @@ The following components have been updated:
|
|
|
113
121
|
- `ToolbarDropdownButton` [#3293](https://github.com/Workday/canvas-kit/pull/3293)
|
|
114
122
|
- `ToolbarIconButton` [#3293](https://github.com/Workday/canvas-kit/pull/3293)
|
|
115
123
|
|
|
124
|
+
### Buttons
|
|
125
|
+
|
|
126
|
+
#### TertiaryButton
|
|
127
|
+
|
|
128
|
+
The `TertiaryButton` component no longer supports the `isThemable` prop.
|
|
129
|
+
To customize the appearance of `TertiaryButton`, use the `cs` prop for custom styles or the `colors`
|
|
130
|
+
prop for palette-based color overrides.
|
|
131
|
+
|
|
132
|
+
The shape of `TertiaryButton` has changed to have rounded corners, aligning with other buttons and
|
|
133
|
+
our new brand direction.
|
|
134
|
+
|
|
135
|
+
If you need to override default styles, follow
|
|
136
|
+
[this guide](https://workday.github.io/canvas-kit/?path=/docs/components-buttons--docs#custom-styles)
|
|
137
|
+
|
|
116
138
|
### Card 🚨
|
|
117
139
|
|
|
118
140
|
**PR:** [#3350](https://github.com/Workday/canvas-kit/pull/3350)
|
|
@@ -208,9 +230,8 @@ spacing between card elements.
|
|
|
208
230
|
|
|
209
231
|
The `CountBadge` component has been updated to reflect our new brand direction.
|
|
210
232
|
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
`low` emphasis for the badge.
|
|
233
|
+
Additionally, a new `emphasis` prop has been added, allowing you to choose between `high` and `low`
|
|
234
|
+
emphasis for the badge.
|
|
214
235
|
|
|
215
236
|
**Count Badge variants in v14**
|
|
216
237
|
|
|
@@ -237,7 +258,8 @@ These changes are only **visual** and should not affect the functionality of the
|
|
|
237
258
|
|
|
238
259
|
**PR:** [#3390](https://github.com/Workday/canvas-kit/pull/3390)
|
|
239
260
|
|
|
240
|
-
- `Hyperlink` and `ExternalHyperlink` now have a `standalone` and `standalone-inverse` variant. This
|
|
261
|
+
- `Hyperlink` and `ExternalHyperlink` now have a `standalone` and `standalone-inverse` variant. This
|
|
262
|
+
removes the underline text decoration for use outside the context of body text.
|
|
241
263
|
|
|
242
264
|
**HyperLink and ExternalHyperlink in v14**
|
|
243
265
|
|
|
@@ -248,14 +270,17 @@ These changes are only **visual** and should not affect the functionality of the
|
|
|
248
270
|
<ExternalHyperlink variant="standalone-inverse" href="#external-hyperlink">External Hyperlink</ExternalHyperlink>
|
|
249
271
|
```
|
|
250
272
|
|
|
251
|
-
> **Note:** Only use the `standalone` or `standalone-inverse` variant in cases where the
|
|
273
|
+
> **Note:** Only use the `standalone` or `standalone-inverse` variant in cases where the
|
|
274
|
+
> `<HyperLink>` and `<ExternalHyperlink>` are used outside the context of body text.
|
|
252
275
|
|
|
253
276
|
### Loading Dots
|
|
254
277
|
|
|
255
278
|
**PR:** [#3393](https://github.com/Workday/canvas-kit/pull/3393)
|
|
256
279
|
|
|
257
|
-
- We've updated the colors to match brand refresh. The default color changes from
|
|
258
|
-
|
|
280
|
+
- We've updated the colors to match brand refresh. The default color changes from
|
|
281
|
+
`system.color.bg.alt.strong` to `system.color.bg.muted.strong`.
|
|
282
|
+
- `LoadingDots` now has a `inverse` variant. Use this variant when the Loading Dots are on a dark
|
|
283
|
+
background or image.
|
|
259
284
|
|
|
260
285
|
```tsx
|
|
261
286
|
<LoadingDots variant="inverse" />
|
|
@@ -314,6 +339,62 @@ const customTheme = {
|
|
|
314
339
|
This **should not** affect the way you use the type unless you're passing a `number` of `0`, `1`
|
|
315
340
|
or `2` to the `searchTheme` prop.
|
|
316
341
|
|
|
342
|
+
### Status Indicator (Preview) 🚨
|
|
343
|
+
|
|
344
|
+
**PR:** [#3287](https://github.com/Workday/canvas-kit/pull/3287)
|
|
345
|
+
|
|
346
|
+
Preview `StatusIndicator` is a rounder and more vibrant base emphasis (`low`). The `emphasis` prop is now deprecated and the `high` emphasis will be removed in a later version.
|
|
347
|
+
|
|
348
|
+
Variant names of the preview `StatusIndicator` have been updated by the following mapping:
|
|
349
|
+
- `blue` -> `primary`
|
|
350
|
+
- `green` -> `success`
|
|
351
|
+
- `orange` -> `caution`
|
|
352
|
+
- `red` -> `critical`
|
|
353
|
+
- `gray` -> `neutral`
|
|
354
|
+
|
|
355
|
+
The `StatusIndicatorVariant` type has been updated to contain the new variant names listed above. If you use the old variant values, update to use the new ones mapped above. It has also been deprecated. Use `StatusIndicatorProps['variant']` instead.
|
|
356
|
+
|
|
357
|
+
## Deprecations
|
|
358
|
+
|
|
359
|
+
We add the [@deprecated](https://jsdoc.app/tags-deprecated.html) JSDoc tag to code we plan to remove
|
|
360
|
+
in a future major release. This signals consumers to migrate to a more stable alternative before the
|
|
361
|
+
deprecated code is removed.
|
|
362
|
+
|
|
363
|
+
### Combobox (Labs)
|
|
364
|
+
|
|
365
|
+
The Combobox component in `@workday/canvas-kit-labs-react/combobox` has been deprecated and will be
|
|
366
|
+
removed in a future major release. Please migrate to the
|
|
367
|
+
[Combobox](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-combobox--docs) in
|
|
368
|
+
`@workday/canvas-kit-react`.
|
|
369
|
+
|
|
370
|
+
### Radio (Main)
|
|
371
|
+
|
|
372
|
+
The Radio component in `@workday/canvas-kit-react/radio` has been deprecated. Please use the new
|
|
373
|
+
[Radio](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-radio--docs) component
|
|
374
|
+
from the same package, which offers improved accessibility and API consistency.
|
|
375
|
+
|
|
376
|
+
### Segmented Control (Main)
|
|
377
|
+
|
|
378
|
+
The Segmented Control component in `@workday/canvas-kit-react/segmented-control` has been
|
|
379
|
+
deprecated. Please migrate to the new
|
|
380
|
+
[Segmented Control](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-segmented-control--docs)
|
|
381
|
+
for improved features and support.
|
|
382
|
+
|
|
383
|
+
### Side Panel (Main)
|
|
384
|
+
|
|
385
|
+
The Side Panel component in `@workday/canvas-kit-react/side-panel` is now deprecated and will be
|
|
386
|
+
removed in a future release. Please use the new
|
|
387
|
+
[Side Panel](https://workday.github.io/canvas-kit/?path=/docs/components-navigation-side-panel--docs)
|
|
388
|
+
for enhanced functionality.
|
|
389
|
+
|
|
390
|
+
### Tokens
|
|
391
|
+
|
|
392
|
+
The legacy tokens from `@workday/canvas-kit-react/tokens` are now deprecated. Please use the new
|
|
393
|
+
[Canvas Tokens Web](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs)
|
|
394
|
+
package (`@workday/canvas-tokens-web`) for all token usage. Follow
|
|
395
|
+
[a migration guide](https://workday.github.io/canvas-kit?path=/docs/guides-tokens-migration-overview--docs)
|
|
396
|
+
for smootier upgrade.
|
|
397
|
+
|
|
317
398
|
## Removals
|
|
318
399
|
|
|
319
400
|
Removals are deletions from our codebase and you can no longer consume this component. We've either
|
|
@@ -1,5 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
1
|
+
import {
|
|
2
|
+
ExampleCodeBlock,
|
|
3
|
+
StorybookStatusIndicator,
|
|
4
|
+
SymbolDoc,
|
|
5
|
+
Specifications,
|
|
6
|
+
} from '@workday/canvas-kit-docs';
|
|
7
|
+
import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
|
|
3
8
|
import Basic from './examples/Basic';
|
|
4
9
|
import DisabledItem from './examples/DisabledItem';
|
|
5
10
|
import GroupOfResult from './examples/GroupOfResult';
|
|
@@ -8,7 +13,18 @@ import NoClearButton from './examples/NoClearButton';
|
|
|
8
13
|
import RTL from './examples/RTL';
|
|
9
14
|
|
|
10
15
|
|
|
11
|
-
# Combobox
|
|
16
|
+
# Combobox <StorybookStatusIndicator type="deprecated" />
|
|
17
|
+
|
|
18
|
+
<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
|
|
19
|
+
<InformationHighlight.Icon />
|
|
20
|
+
<InformationHighlight.Body>
|
|
21
|
+
`Combobox` in Preview has been deprecated and will be removed in a future major version. Please
|
|
22
|
+
use `Combobox` in Main instead.
|
|
23
|
+
</InformationHighlight.Body>
|
|
24
|
+
<InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/features-combobox--docs">
|
|
25
|
+
Combobox Docs
|
|
26
|
+
</InformationHighlight.Link>
|
|
27
|
+
</InformationHighlight>
|
|
12
28
|
|
|
13
29
|
The term "Combobox" is based on the
|
|
14
30
|
[Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) as defined in the ARIA
|
|
@@ -10,6 +10,7 @@ import Disabled from './examples/Disabled';
|
|
|
10
10
|
import Error from './examples/Error';
|
|
11
11
|
import Complex from './examples/Complex';
|
|
12
12
|
import Icons from './examples/Icons';
|
|
13
|
+
import InitialSelectedItems from './examples/InitialSelectedItems';
|
|
13
14
|
import Controlled from './examples/Controlled';
|
|
14
15
|
import Searching from './examples/Searching';
|
|
15
16
|
|
|
@@ -109,4 +110,10 @@ dynamically load items as the user navigates the available options.
|
|
|
109
110
|
> Don't rely too much on the exact behavior of the search input. For example, the search input may
|
|
110
111
|
> be cleared when the user blurs the field.
|
|
111
112
|
|
|
112
|
-
<ExampleCodeBlock code={Searching} />
|
|
113
|
+
<ExampleCodeBlock code={Searching} />
|
|
114
|
+
|
|
115
|
+
### Initial Selected Items
|
|
116
|
+
|
|
117
|
+
You can set `initialSelectedIds` to the value that you want initially selected.
|
|
118
|
+
|
|
119
|
+
<ExampleCodeBlock code={InitialSelectedItems} />
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
import React, {useEffect} from 'react';
|
|
2
|
+
|
|
3
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
4
|
+
|
|
5
|
+
import {createStyles} from '@workday/canvas-kit-styling';
|
|
6
|
+
import {LoadReturn} from '@workday/canvas-kit-react/collection';
|
|
7
|
+
import {CanvasProvider, useMountLayout} from '@workday/canvas-kit-react/common';
|
|
8
|
+
import {useComboboxLoader} from '@workday/canvas-kit-react/combobox';
|
|
9
|
+
import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
10
|
+
|
|
11
|
+
import {MultiSelect, useMultiSelectModel} from '@workday/canvas-kit-preview-react/multi-select';
|
|
12
|
+
import {StyledMenuItem} from '@workday/canvas-kit-react/menu';
|
|
13
|
+
|
|
14
|
+
const mainContentStyles = createStyles({
|
|
15
|
+
padding: system.space.x4,
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
const colors = ['Red', 'Blue', 'Purple', 'Green', 'Pink'];
|
|
19
|
+
const fruits = ['Apple', 'Orange', 'Banana', 'Grape', 'Lemon', 'Lime'];
|
|
20
|
+
const options = Array(1000)
|
|
21
|
+
.fill('')
|
|
22
|
+
.map((_, index) => {
|
|
23
|
+
return {
|
|
24
|
+
id: `${index + 1}`,
|
|
25
|
+
text: `${colors[index % colors.length]} ${fruits[index % fruits.length]} ${index + 1}`,
|
|
26
|
+
};
|
|
27
|
+
});
|
|
28
|
+
|
|
29
|
+
export default () => {
|
|
30
|
+
const [value, setValue] = React.useState('');
|
|
31
|
+
|
|
32
|
+
const {model, loader} = useComboboxLoader(
|
|
33
|
+
{
|
|
34
|
+
// You can start with any number that makes sense.
|
|
35
|
+
total: 0,
|
|
36
|
+
initialSelectedIds: ['3', '5'],
|
|
37
|
+
|
|
38
|
+
// Pick whatever number makes sense for your API
|
|
39
|
+
pageSize: 500,
|
|
40
|
+
|
|
41
|
+
// A load function that will be called by the loader. You must return a promise that returns
|
|
42
|
+
// an object like `{items: [], total: 0}`. The `items` will be merged into the loader's cache
|
|
43
|
+
async load({pageNumber, pageSize, filter}) {
|
|
44
|
+
return new Promise<LoadReturn<(typeof options)[0]>>(resolve => {
|
|
45
|
+
// simulate a server response by resolving after a period of time
|
|
46
|
+
setTimeout(() => {
|
|
47
|
+
// simulate paging and filtering based on pre-computed items
|
|
48
|
+
const start = (pageNumber - 1) * pageSize;
|
|
49
|
+
const end = start + pageSize;
|
|
50
|
+
const filteredItems = options.filter(item => {
|
|
51
|
+
if (filter === '' || typeof filter !== 'string') {
|
|
52
|
+
return true;
|
|
53
|
+
}
|
|
54
|
+
return item.text.toLowerCase().includes(filter.toLowerCase());
|
|
55
|
+
});
|
|
56
|
+
|
|
57
|
+
const total = filteredItems.length;
|
|
58
|
+
const items = filteredItems.slice(start, end);
|
|
59
|
+
|
|
60
|
+
resolve({
|
|
61
|
+
items,
|
|
62
|
+
total,
|
|
63
|
+
});
|
|
64
|
+
}, 300);
|
|
65
|
+
});
|
|
66
|
+
},
|
|
67
|
+
onShow() {
|
|
68
|
+
// The `shouldLoad` cancels while the combobox menu is hidden, so let's load when it is
|
|
69
|
+
// visible
|
|
70
|
+
loader.load();
|
|
71
|
+
},
|
|
72
|
+
},
|
|
73
|
+
useMultiSelectModel
|
|
74
|
+
);
|
|
75
|
+
|
|
76
|
+
useEffect(() => {
|
|
77
|
+
loader.load();
|
|
78
|
+
}, [loader]);
|
|
79
|
+
|
|
80
|
+
return (
|
|
81
|
+
<CanvasProvider>
|
|
82
|
+
<>
|
|
83
|
+
<form
|
|
84
|
+
onSubmit={e => {
|
|
85
|
+
console.log('form submitted');
|
|
86
|
+
e.preventDefault();
|
|
87
|
+
}}
|
|
88
|
+
>
|
|
89
|
+
<main className={mainContentStyles}>
|
|
90
|
+
<MultiSelect model={model}>
|
|
91
|
+
<FormField orientation="horizontalStart">
|
|
92
|
+
<FormField.Label>Fruits</FormField.Label>
|
|
93
|
+
<FormField.Input
|
|
94
|
+
as={MultiSelect.SearchInput}
|
|
95
|
+
placeholder="Search"
|
|
96
|
+
removeLabel="Remove"
|
|
97
|
+
name="toppings"
|
|
98
|
+
onChange={e => {
|
|
99
|
+
setValue(e.currentTarget.value);
|
|
100
|
+
}}
|
|
101
|
+
value={value}
|
|
102
|
+
/>
|
|
103
|
+
<MultiSelect.Popper>
|
|
104
|
+
<MultiSelect.Card>
|
|
105
|
+
{model.state.items.length === 0 && (
|
|
106
|
+
<StyledMenuItem as="span">No Results Found</StyledMenuItem>
|
|
107
|
+
)}
|
|
108
|
+
{model.state.items.length > 0 && (
|
|
109
|
+
<MultiSelect.List maxHeight={200}>
|
|
110
|
+
{item =>
|
|
111
|
+
item ? (
|
|
112
|
+
<MultiSelect.Item data-id={item.id}>
|
|
113
|
+
<MultiSelect.Item.Text>{item.text}</MultiSelect.Item.Text>
|
|
114
|
+
</MultiSelect.Item>
|
|
115
|
+
) : undefined
|
|
116
|
+
}
|
|
117
|
+
</MultiSelect.List>
|
|
118
|
+
)}
|
|
119
|
+
</MultiSelect.Card>
|
|
120
|
+
</MultiSelect.Popper>
|
|
121
|
+
</FormField>
|
|
122
|
+
</MultiSelect>
|
|
123
|
+
</main>
|
|
124
|
+
</form>
|
|
125
|
+
<div>Selected: {value}</div>
|
|
126
|
+
</>
|
|
127
|
+
</CanvasProvider>
|
|
128
|
+
);
|
|
129
|
+
};
|
|
@@ -17,7 +17,7 @@ export default () => {
|
|
|
17
17
|
<StatusIndicator.Icon aria-label="unpublished" icon={uploadCloudIcon} />
|
|
18
18
|
<StatusIndicator.Label>Unpublished</StatusIndicator.Label>
|
|
19
19
|
</StatusIndicator>
|
|
20
|
-
<StatusIndicator variant="
|
|
20
|
+
<StatusIndicator variant="positive">
|
|
21
21
|
<StatusIndicator.Label>published</StatusIndicator.Label>
|
|
22
22
|
<StatusIndicator.Icon aria-label="published" icon={uploadCloudIcon} />
|
|
23
23
|
</StatusIndicator>
|
|
@@ -24,19 +24,19 @@ export default () => {
|
|
|
24
24
|
<StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
|
|
25
25
|
<StatusIndicator.Icon icon={uploadCloudIcon} />
|
|
26
26
|
</StatusIndicator>
|
|
27
|
-
<StatusIndicator variant="
|
|
27
|
+
<StatusIndicator variant="caution">
|
|
28
28
|
<StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
|
|
29
29
|
<StatusIndicator.Icon icon={uploadCloudIcon} />
|
|
30
30
|
</StatusIndicator>
|
|
31
|
-
<StatusIndicator variant="
|
|
31
|
+
<StatusIndicator variant="info">
|
|
32
32
|
<StatusIndicator.Label>Lorem ipsum dolor </StatusIndicator.Label>
|
|
33
33
|
<StatusIndicator.Icon icon={uploadCloudIcon} />
|
|
34
34
|
</StatusIndicator>
|
|
35
|
-
<StatusIndicator variant="
|
|
35
|
+
<StatusIndicator variant="positive">
|
|
36
36
|
<StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
|
|
37
37
|
<StatusIndicator.Icon icon={uploadCloudIcon} />
|
|
38
38
|
</StatusIndicator>
|
|
39
|
-
<StatusIndicator variant="
|
|
39
|
+
<StatusIndicator variant="critical">
|
|
40
40
|
<StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
|
|
41
41
|
<StatusIndicator.Icon icon={uploadCloudIcon} />
|
|
42
42
|
</StatusIndicator>
|
|
@@ -50,19 +50,19 @@ export default () => {
|
|
|
50
50
|
<StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
|
|
51
51
|
<StatusIndicator.Icon icon={uploadCloudIcon} />
|
|
52
52
|
</StatusIndicator>
|
|
53
|
-
<StatusIndicator emphasis="high" variant="
|
|
53
|
+
<StatusIndicator emphasis="high" variant="caution">
|
|
54
54
|
<StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
|
|
55
55
|
<StatusIndicator.Icon icon={uploadCloudIcon} />
|
|
56
56
|
</StatusIndicator>
|
|
57
|
-
<StatusIndicator emphasis="high" variant="
|
|
57
|
+
<StatusIndicator emphasis="high" variant="info">
|
|
58
58
|
<StatusIndicator.Label>Lorem ipsum dolor </StatusIndicator.Label>
|
|
59
59
|
<StatusIndicator.Icon icon={uploadCloudIcon} />
|
|
60
60
|
</StatusIndicator>
|
|
61
|
-
<StatusIndicator emphasis="high" variant="
|
|
61
|
+
<StatusIndicator emphasis="high" variant="positive">
|
|
62
62
|
<StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
|
|
63
63
|
<StatusIndicator.Icon icon={uploadCloudIcon} />
|
|
64
64
|
</StatusIndicator>
|
|
65
|
-
<StatusIndicator emphasis="high" variant="
|
|
65
|
+
<StatusIndicator emphasis="high" variant="critical">
|
|
66
66
|
<StatusIndicator.Label>Lorem ipsum dolor</StatusIndicator.Label>
|
|
67
67
|
<StatusIndicator.Icon icon={uploadCloudIcon} />
|
|
68
68
|
</StatusIndicator>
|
|
@@ -27,10 +27,10 @@ import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicato
|
|
|
27
27
|
<InformationHighlight.Icon />
|
|
28
28
|
<InformationHighlight.Body>
|
|
29
29
|
`TextArea` in Preview has been deprecated and will be removed in a future major version. Please
|
|
30
|
-
use `
|
|
30
|
+
use `TextArea` in Main instead.
|
|
31
31
|
</InformationHighlight.Body>
|
|
32
|
-
<InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/
|
|
33
|
-
|
|
32
|
+
<InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/components-inputs-textarea--docs">
|
|
33
|
+
Text Area Docs
|
|
34
34
|
</InformationHighlight.Link>
|
|
35
35
|
</InformationHighlight>
|
|
36
36
|
|
|
@@ -31,10 +31,10 @@ import Alert from './examples/Alert';
|
|
|
31
31
|
<InformationHighlight.Icon />
|
|
32
32
|
<InformationHighlight.Body>
|
|
33
33
|
`TextInput` in Preview has been deprecated and will be removed in a future major version. Please
|
|
34
|
-
use `
|
|
34
|
+
use `TextInput` in Main instead.
|
|
35
35
|
</InformationHighlight.Body>
|
|
36
|
-
<InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/
|
|
37
|
-
|
|
36
|
+
<InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/components-inputs-text-input--docs">
|
|
37
|
+
Text Input Docs
|
|
38
38
|
</InformationHighlight.Link>
|
|
39
39
|
</InformationHighlight>
|
|
40
40
|
|
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
import {
|
|
2
2
|
ExampleCodeBlock,
|
|
3
|
-
|
|
3
|
+
StorybookStatusIndicator,
|
|
4
4
|
SymbolDoc,
|
|
5
5
|
Specifications,
|
|
6
6
|
} from '@workday/canvas-kit-docs';
|
|
7
|
-
|
|
7
|
+
|
|
8
|
+
import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
|
|
9
|
+
|
|
8
10
|
import Alert from './examples/Alert';
|
|
9
11
|
import Basic from './examples/Basic';
|
|
10
12
|
import Disabled from './examples/Disabled';
|
|
@@ -16,11 +18,18 @@ import RefForwarding from './examples/RefForwarding';
|
|
|
16
18
|
import Required from './examples/Required';
|
|
17
19
|
|
|
18
20
|
|
|
19
|
-
# Canvas Kit Radio
|
|
21
|
+
# Canvas Kit Radio <StorybookStatusIndicator type="deprecated" />
|
|
20
22
|
|
|
21
|
-
<
|
|
22
|
-
<
|
|
23
|
-
|
|
23
|
+
<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
|
|
24
|
+
<InformationHighlight.Icon />
|
|
25
|
+
<InformationHighlight.Body>
|
|
26
|
+
`Radio` in Main has been deprecated and will be removed in a future major version. Please use
|
|
27
|
+
`Radio` in Preview instead.
|
|
28
|
+
</InformationHighlight.Body>
|
|
29
|
+
<InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-inputs-radio--docs">
|
|
30
|
+
Radio Docs
|
|
31
|
+
</InformationHighlight.Link>
|
|
32
|
+
</InformationHighlight>
|
|
24
33
|
|
|
25
34
|
Radio Buttons allow a user to select one value from a predefined list of 7 or fewer options.
|
|
26
35
|
|
|
@@ -1,7 +1,26 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {
|
|
2
|
+
ExampleCodeBlock,
|
|
3
|
+
StorybookStatusIndicator,
|
|
4
|
+
SymbolDoc,
|
|
5
|
+
Specifications,
|
|
6
|
+
} from '@workday/canvas-kit-docs';
|
|
7
|
+
|
|
8
|
+
import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
|
|
9
|
+
|
|
2
10
|
import Basic from './examples/Basic';
|
|
3
11
|
|
|
4
|
-
# Canvas Kit Segmented Control
|
|
12
|
+
# Canvas Kit Segmented Control <StorybookStatusIndicator type="deprecated" />
|
|
13
|
+
|
|
14
|
+
<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
|
|
15
|
+
<InformationHighlight.Icon />
|
|
16
|
+
<InformationHighlight.Body>
|
|
17
|
+
`SegmentedControl` in Main has been deprecated and will be removed in a future major version.
|
|
18
|
+
Please use `Segmented Control` in Preview instead.
|
|
19
|
+
</InformationHighlight.Body>
|
|
20
|
+
<InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/docs/preview-segmented-control--docs">
|
|
21
|
+
Segmented Control Docs
|
|
22
|
+
</InformationHighlight.Link>
|
|
23
|
+
</InformationHighlight>
|
|
5
24
|
|
|
6
25
|
A linear set of two or more segments, each of which functions as a mutually exclusive button. This
|
|
7
26
|
is a [_controlled_](https://reactjs.org/docs/forms.html#controlled-components) component.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "14.0.0-alpha.
|
|
3
|
+
"version": "14.0.0-alpha.1210-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": "^14.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-preview-react": "^14.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-react": "^14.0.0-alpha.
|
|
51
|
-
"@workday/canvas-kit-styling": "^14.0.0-alpha.
|
|
48
|
+
"@workday/canvas-kit-labs-react": "^14.0.0-alpha.1210-next.0",
|
|
49
|
+
"@workday/canvas-kit-preview-react": "^14.0.0-alpha.1210-next.0",
|
|
50
|
+
"@workday/canvas-kit-react": "^14.0.0-alpha.1210-next.0",
|
|
51
|
+
"@workday/canvas-kit-styling": "^14.0.0-alpha.1210-next.0",
|
|
52
52
|
"@workday/canvas-system-icons-web": "^3.0.35",
|
|
53
53
|
"@workday/canvas-tokens-web": "3.0.0-alpha.12",
|
|
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": "
|
|
64
|
+
"gitHead": "8ef8c7a0b7515a9341550c564b84bed91598e9f7"
|
|
65
65
|
}
|