@workday/canvas-kit-docs 14.0.0-alpha.1206-next.0 → 14.0.0-alpha.1211-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.
@@ -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.18",
22
- "@workday/canvas-kit-preview-react": "13.2.18",
23
- "@workday/canvas-kit-react": "13.2.18",
24
- "@workday/canvas-kit-react-fonts": "^13.2.18",
25
- "@workday/canvas-kit-styling": "13.2.18",
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.18",
22
- "@workday/canvas-kit-preview-react": "13.2.18",
23
- "@workday/canvas-kit-react": "13.2.18",
24
- "@workday/canvas-kit-react-fonts": "^13.2.18",
25
- "@workday/canvas-kit-styling": "13.2.18",
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,8 +18,16 @@ any questions.
18
18
  - [Hyperlink & ExternalHyperlink](#hyperlink-and-externalhyperlink)
19
19
  - [Loading Dots](#loading-dots)
20
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)
21
28
  - [Removals](#removals)
22
29
  - [Menu (preview)](#menu-preview)
30
+ - [Deprecated Buttons](#deprecated-buttons)
23
31
  - [Troubleshooting](#troubleshooting)
24
32
  - [Glossary](#glossary)
25
33
  - [Main](#main)
@@ -98,8 +106,7 @@ yarn remove @workday/canvas-kit-codemod
98
106
 
99
107
  ### Branding Changes 💅
100
108
 
101
- Several components have been refactored to reflect our new brand direction. Most of these changes
102
- revolve around the use of our new brand colors.
109
+ Several components have been refactored to reflect our new brand direction. Most of these changes revolve around the use of our new brand colors.
103
110
 
104
111
  The following components have been updated:
105
112
 
@@ -119,7 +126,7 @@ The following components have been updated:
119
126
 
120
127
  #### TertiaryButton
121
128
 
122
- The `TertiaryButton` component no longer supports the `isThemable` prop.
129
+ The `TertiaryButton` component no longer supports the `isThemable` prop.
123
130
  To customize the appearance of `TertiaryButton`, use the `cs` prop for custom styles or the `colors`
124
131
  prop for palette-based color overrides.
125
132
 
@@ -333,11 +340,75 @@ const customTheme = {
333
340
  This **should not** affect the way you use the type unless you're passing a `number` of `0`, `1`
334
341
  or `2` to the `searchTheme` prop.
335
342
 
343
+ ### Status Indicator (Preview) 🚨
344
+
345
+ **PR:** [#3287](https://github.com/Workday/canvas-kit/pull/3287)
346
+
347
+ 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.
348
+
349
+ Variant names of the preview `StatusIndicator` have been updated by the following mapping:
350
+ - `blue` -> `primary`
351
+ - `green` -> `success`
352
+ - `orange` -> `caution`
353
+ - `red` -> `critical`
354
+ - `gray` -> `neutral`
355
+
356
+ 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.
357
+
358
+ ## Deprecations
359
+
360
+ We add the [@deprecated](https://jsdoc.app/tags-deprecated.html) JSDoc tag to code we plan to remove
361
+ in a future major release. This signals consumers to migrate to a more stable alternative before the
362
+ deprecated code is removed.
363
+
364
+ ### Combobox (Labs)
365
+
366
+ The Combobox component in `@workday/canvas-kit-labs-react/combobox` has been deprecated and will be
367
+ removed in a future major release. Please migrate to the
368
+ [Combobox](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-combobox--docs) in
369
+ `@workday/canvas-kit-react`.
370
+
371
+ ### Radio (Main)
372
+
373
+ The Radio component in `@workday/canvas-kit-react/radio` has been deprecated. Please use the new
374
+ [Radio](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-radio--docs) component
375
+ from the same package, which offers improved accessibility and API consistency.
376
+
377
+ ### Segmented Control (Main)
378
+
379
+ The Segmented Control component in `@workday/canvas-kit-react/segmented-control` has been
380
+ deprecated. Please migrate to the new
381
+ [Segmented Control](https://workday.github.io/canvas-kit/?path=/docs/components-inputs-segmented-control--docs)
382
+ for improved features and support.
383
+
384
+ ### Side Panel (Main)
385
+
386
+ The Side Panel component in `@workday/canvas-kit-react/side-panel` is now deprecated and will be
387
+ removed in a future release. Please use the new
388
+ [Side Panel](https://workday.github.io/canvas-kit/?path=/docs/components-navigation-side-panel--docs)
389
+ for enhanced functionality.
390
+
391
+ ### Tokens
392
+
393
+ The legacy tokens from `@workday/canvas-kit-react/tokens` are now deprecated. Please use the new
394
+ [Canvas Tokens Web](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs)
395
+ package (`@workday/canvas-tokens-web`) for all token usage. Follow
396
+ [a migration guide](https://workday.github.io/canvas-kit?path=/docs/guides-tokens-migration-overview--docs)
397
+ for smootier upgrade.
398
+
336
399
  ## Removals
337
400
 
338
401
  Removals are deletions from our codebase and you can no longer consume this component. We've either
339
402
  promoted or replaced a component or utility.
340
403
 
404
+ ### Deprecated Buttons
405
+
406
+ **PR:** [#3429](https://github.com/Workday/canvas-kit/pull/3439)
407
+
408
+ Long overdue, but a sign of moving forward, we are removing our `DeprecatedButton`. Our design system supported this for quite some time, but with the advancement in theming, our components API and our flexibility, it is time for us to finally remove this component. This component has served as a reminder of how far we've come and it part we're thankful for this change.
409
+
410
+ Al though unlikely, but not impossible, if you were using `DeprecatedButton` please use our flexible and themable buttons like `PrimaryButton`, `ScondaryButton` or `TertiaryButton`.
411
+
341
412
  ### Menu (preview)
342
413
 
343
414
  **PR:** [#3353](https://github.com/Workday/canvas-kit/pull/3353)
@@ -1,5 +1,10 @@
1
- import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
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
@@ -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="green">
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="orange">
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="blue">
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="green">
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="red">
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="orange">
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="blue">
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="green">
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="red">
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 `FormField` instead.
30
+ use `TextArea` in Main instead.
31
31
  </InformationHighlight.Body>
32
- <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/story/components-inputs-form-field--docs">
33
- Form Field Docs
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 `FormField` instead.
34
+ use `TextInput` in Main instead.
35
35
  </InformationHighlight.Body>
36
- <InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/story/components-inputs-form-field--docs">
37
- Form Field Docs
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
- InformationHighlight,
3
+ StorybookStatusIndicator,
4
4
  SymbolDoc,
5
5
  Specifications,
6
6
  } from '@workday/canvas-kit-docs';
7
- import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
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
- <StatusIndicator variant="red">
22
- <StatusIndicator.Label>Deprecated</StatusIndicator.Label>
23
- </StatusIndicator>
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 {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
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.1206-next.0",
3
+ "version": "14.0.0-alpha.1211-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.1206-next.0",
49
- "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1206-next.0",
50
- "@workday/canvas-kit-react": "^14.0.0-alpha.1206-next.0",
51
- "@workday/canvas-kit-styling": "^14.0.0-alpha.1206-next.0",
48
+ "@workday/canvas-kit-labs-react": "^14.0.0-alpha.1211-next.0",
49
+ "@workday/canvas-kit-preview-react": "^14.0.0-alpha.1211-next.0",
50
+ "@workday/canvas-kit-react": "^14.0.0-alpha.1211-next.0",
51
+ "@workday/canvas-kit-styling": "^14.0.0-alpha.1211-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": "5f2128b722fff5b086358ff3bd3ab009b0e07ef4"
64
+ "gitHead": "ea68386b221f4e06e84726aad21c22687919d139"
65
65
  }