@workday/canvas-kit-docs 14.0.0-alpha.1167-next.0 → 14.0.0-alpha.1169-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/index.d.ts +1 -1
- package/dist/es6/index.d.ts.map +1 -1
- package/dist/es6/index.js +1 -1
- package/dist/es6/lib/StorybookStatusIndicator.d.ts +4 -0
- package/dist/es6/lib/StorybookStatusIndicator.d.ts.map +1 -0
- package/dist/es6/lib/StorybookStatusIndicator.js +39 -0
- package/dist/es6/lib/docs.js +51 -0
- package/dist/mdx/preview-react/select/Select.mdx +20 -2
- package/dist/mdx/preview-react/text-area/TextArea.mdx +19 -9
- package/dist/mdx/preview-react/text-input/TextInput.mdx +20 -10
- package/dist/mdx/preview-react/text-input/examples/ThemedAlert.tsx +12 -8
- package/dist/mdx/preview-react/text-input/examples/ThemedError.tsx +10 -6
- package/dist/mdx/react/radio/Radio.mdx +5 -0
- package/dist/mdx/react/status-indicator/StatusIndicator.mdx +13 -12
- package/dist/mdx/react/text/LabelText.mdx +14 -11
- package/dist/mdx/react/tokens/Tokens.mdx +4 -3
- package/dist/mdx/tokens/TokenMigrationOverview.mdx +3 -4
- package/index.ts +1 -1
- package/lib/StorybookStatusIndicator.tsx +49 -0
- package/package.json +6 -6
- package/dist/es6/lib/AIIndicator.d.ts +0 -2
- package/dist/es6/lib/AIIndicator.d.ts.map +0 -1
- package/dist/es6/lib/AIIndicator.js +0 -12
- package/lib/AIIndicator.tsx +0 -22
package/dist/es6/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { StorybookStatusIndicator } from './lib/StorybookStatusIndicator';
|
|
2
2
|
export { DownloadLLMFile } from './lib/DownloadLLMFile';
|
|
3
3
|
export { ExampleCodeBlock } from './lib/ExampleCodeBlock';
|
|
4
4
|
export * from './lib/specs';
|
package/dist/es6/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,wBAAwB,EAAC,MAAM,gCAAgC,CAAC;AACxE,OAAO,EAAC,eAAe,EAAC,MAAM,uBAAuB,CAAC;AACtD,OAAO,EAAC,gBAAgB,EAAC,MAAM,wBAAwB,CAAC;AACxD,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC;AACtC,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC"}
|
package/dist/es6/index.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export {
|
|
1
|
+
export { StorybookStatusIndicator } from './lib/StorybookStatusIndicator';
|
|
2
2
|
export { DownloadLLMFile } from './lib/DownloadLLMFile';
|
|
3
3
|
export { ExampleCodeBlock } from './lib/ExampleCodeBlock';
|
|
4
4
|
export * from './lib/specs';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"StorybookStatusIndicator.d.ts","sourceRoot":"","sources":["../../../lib/StorybookStatusIndicator.tsx"],"names":[],"mappings":"AAqCA,eAAO,MAAM,wBAAwB;UAAmB,IAAI,GAAG,YAAY;6CAW1E,CAAC"}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { StatusIndicator } from '@workday/canvas-kit-preview-react/status-indicator';
|
|
3
|
+
import { system } from '@workday/canvas-tokens-web';
|
|
4
|
+
import { sparkleSingleSmallIcon } from '@workday/canvas-system-icons-web';
|
|
5
|
+
import { createStencil } from '@workday/canvas-kit-styling';
|
|
6
|
+
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
7
|
+
const storybookStatusIndicatorStencil = createStencil({
|
|
8
|
+
base: {
|
|
9
|
+
borderRadius: system.shape.round,
|
|
10
|
+
padding: `${system.space.zero} ${system.space.x2}`,
|
|
11
|
+
[systemIconStencil.vars.color]: 'currentColor',
|
|
12
|
+
},
|
|
13
|
+
modifiers: {
|
|
14
|
+
type: {
|
|
15
|
+
ai: {
|
|
16
|
+
background: system.color.bg.ai.default,
|
|
17
|
+
color: system.color.fg.ai,
|
|
18
|
+
},
|
|
19
|
+
deprecated: {
|
|
20
|
+
background: system.color.static.amber.soft,
|
|
21
|
+
color: system.color.static.amber.stronger,
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
});
|
|
26
|
+
const content = {
|
|
27
|
+
ai: {
|
|
28
|
+
icon: sparkleSingleSmallIcon,
|
|
29
|
+
label: 'AI Content',
|
|
30
|
+
},
|
|
31
|
+
deprecated: {
|
|
32
|
+
icon: undefined,
|
|
33
|
+
label: 'Deprecated',
|
|
34
|
+
},
|
|
35
|
+
};
|
|
36
|
+
export const StorybookStatusIndicator = ({ type }) => {
|
|
37
|
+
const { icon, label } = content[type];
|
|
38
|
+
return (_jsxs(StatusIndicator, { className: "sb-unstyled cnvs-title-status-indicator", cs: storybookStatusIndicatorStencil({ type }), children: [icon && _jsx(StatusIndicator.Icon, { icon: icon }), _jsx(StatusIndicator.Label, { children: label })] }));
|
|
39
|
+
};
|
package/dist/es6/lib/docs.js
CHANGED
|
@@ -194018,6 +194018,57 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
194018
194018
|
}
|
|
194019
194019
|
],
|
|
194020
194020
|
"tags": {}
|
|
194021
|
+
},
|
|
194022
|
+
{
|
|
194023
|
+
"kind": "property",
|
|
194024
|
+
"name": "alertInner",
|
|
194025
|
+
"required": true,
|
|
194026
|
+
"type": {
|
|
194027
|
+
"kind": "primitive",
|
|
194028
|
+
"value": "string"
|
|
194029
|
+
},
|
|
194030
|
+
"description": "",
|
|
194031
|
+
"declarations": [
|
|
194032
|
+
{
|
|
194033
|
+
"name": "alertInner",
|
|
194034
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts"
|
|
194035
|
+
}
|
|
194036
|
+
],
|
|
194037
|
+
"tags": {}
|
|
194038
|
+
},
|
|
194039
|
+
{
|
|
194040
|
+
"kind": "property",
|
|
194041
|
+
"name": "alertOuter",
|
|
194042
|
+
"required": true,
|
|
194043
|
+
"type": {
|
|
194044
|
+
"kind": "primitive",
|
|
194045
|
+
"value": "string"
|
|
194046
|
+
},
|
|
194047
|
+
"description": "",
|
|
194048
|
+
"declarations": [
|
|
194049
|
+
{
|
|
194050
|
+
"name": "alertOuter",
|
|
194051
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts"
|
|
194052
|
+
}
|
|
194053
|
+
],
|
|
194054
|
+
"tags": {}
|
|
194055
|
+
},
|
|
194056
|
+
{
|
|
194057
|
+
"kind": "property",
|
|
194058
|
+
"name": "errorInner",
|
|
194059
|
+
"required": true,
|
|
194060
|
+
"type": {
|
|
194061
|
+
"kind": "primitive",
|
|
194062
|
+
"value": "string"
|
|
194063
|
+
},
|
|
194064
|
+
"description": "",
|
|
194065
|
+
"declarations": [
|
|
194066
|
+
{
|
|
194067
|
+
"name": "errorInner",
|
|
194068
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/theming/types.ts"
|
|
194069
|
+
}
|
|
194070
|
+
],
|
|
194071
|
+
"tags": {}
|
|
194021
194072
|
}
|
|
194022
194073
|
]
|
|
194023
194074
|
},
|
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
import {
|
|
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';
|
|
2
8
|
import Default from './examples/Top Label/Default';
|
|
3
9
|
import DefaultWithCustomOptions from './examples/Top Label/DefaultWithCustomOptions';
|
|
4
10
|
import DefaultWithSimpleOptions from './examples/Top Label/DefaultWithSimpleOptions';
|
|
@@ -17,8 +23,20 @@ import ErrorLeft from './examples/Left Label/ErrorLeft';
|
|
|
17
23
|
import GrowLeft from './examples/Left Label/GrowLeft';
|
|
18
24
|
|
|
19
25
|
|
|
26
|
+
# Canvas Kit Select <StorybookStatusIndicator type="deprecated" />
|
|
20
27
|
|
|
21
|
-
|
|
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
|
+
Form Field Docs
|
|
36
|
+
</InformationHighlight.Link>
|
|
37
|
+
</InformationHighlight>
|
|
38
|
+
|
|
39
|
+
<br />
|
|
22
40
|
|
|
23
41
|
## Top Label
|
|
24
42
|
|
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
import {
|
|
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';
|
|
2
8
|
|
|
3
9
|
import Alert from './examples/Alert';
|
|
4
10
|
import Basic from './examples/Basic';
|
|
@@ -12,17 +18,21 @@ import Placeholder from './examples/Placeholder';
|
|
|
12
18
|
import RefForwarding from './examples/RefForwarding';
|
|
13
19
|
import Required from './examples/Required';
|
|
14
20
|
import ResizeConstraints from './examples/ResizeConstraints';
|
|
21
|
+
import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
|
|
15
22
|
|
|
16
23
|
|
|
17
|
-
# Canvas Kit Text Area
|
|
24
|
+
# Canvas Kit Text Area <StorybookStatusIndicator type="deprecated" />
|
|
18
25
|
|
|
19
|
-
<
|
|
20
|
-
<
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
`
|
|
24
|
-
|
|
25
|
-
|
|
26
|
+
<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
|
|
27
|
+
<InformationHighlight.Icon />
|
|
28
|
+
<InformationHighlight.Body>
|
|
29
|
+
`TextArea` in Preview has been deprecated and will be removed in a future major version. Please
|
|
30
|
+
use `FormField` instead.
|
|
31
|
+
</InformationHighlight.Body>
|
|
32
|
+
<InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/story/components-inputs-form-field--docs">
|
|
33
|
+
Form Field Docs
|
|
34
|
+
</InformationHighlight.Link>
|
|
35
|
+
</InformationHighlight>
|
|
26
36
|
|
|
27
37
|
TextArea's allow users to enter and edit multiple lines of text.
|
|
28
38
|
|
|
@@ -1,4 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
|
|
2
|
+
import {
|
|
3
|
+
ExampleCodeBlock,
|
|
4
|
+
StorybookStatusIndicator,
|
|
5
|
+
SymbolDoc,
|
|
6
|
+
Specifications,
|
|
7
|
+
} from '@workday/canvas-kit-docs';
|
|
8
|
+
import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
|
|
2
9
|
|
|
3
10
|
import Basic from './examples/Basic';
|
|
4
11
|
import Disabled from './examples/Disabled';
|
|
@@ -18,15 +25,18 @@ import Error from './examples/Error';
|
|
|
18
25
|
import Alert from './examples/Alert';
|
|
19
26
|
|
|
20
27
|
|
|
21
|
-
# Canvas Kit Text Input
|
|
28
|
+
# Canvas Kit Text Input <StorybookStatusIndicator type="deprecated" />
|
|
22
29
|
|
|
23
|
-
<
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
`
|
|
28
|
-
|
|
29
|
-
|
|
30
|
+
<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
|
|
31
|
+
<InformationHighlight.Icon />
|
|
32
|
+
<InformationHighlight.Body>
|
|
33
|
+
`TextInput` in Preview has been deprecated and will be removed in a future major version. Please
|
|
34
|
+
use `FormField` instead.
|
|
35
|
+
</InformationHighlight.Body>
|
|
36
|
+
<InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/story/components-inputs-form-field--docs">
|
|
37
|
+
Form Field Docs
|
|
38
|
+
</InformationHighlight.Link>
|
|
39
|
+
</InformationHighlight>
|
|
30
40
|
|
|
31
41
|
Text Inputs allow users to enter words or characters without styling.
|
|
32
42
|
|
|
@@ -78,7 +88,7 @@ Set `TextInput.Field`'s `type` prop to `hidden` to completly hide a field while
|
|
|
78
88
|
value, often used for things like security tokens. Note: You will likely need to manually
|
|
79
89
|
set`aria-describedby={undefined}`and`id={undefined}`
|
|
80
90
|
|
|
81
|
-
<ExampleCodeBlock code={
|
|
91
|
+
<ExampleCodeBlock code={Hidden} />
|
|
82
92
|
|
|
83
93
|
### Ref Forwarding
|
|
84
94
|
|
|
@@ -5,18 +5,20 @@ import {
|
|
|
5
5
|
PartialEmotionCanvasTheme,
|
|
6
6
|
useThemedRing,
|
|
7
7
|
} from '@workday/canvas-kit-react/common';
|
|
8
|
-
import {
|
|
8
|
+
import {base, system} from '@workday/canvas-tokens-web';
|
|
9
|
+
import {cssVar} from '@workday/canvas-kit-styling';
|
|
9
10
|
|
|
10
11
|
export default () => {
|
|
11
12
|
const theme: PartialEmotionCanvasTheme = {
|
|
12
13
|
canvas: {
|
|
13
14
|
palette: {
|
|
14
|
-
common: {
|
|
15
|
-
focusOutline: colors.grapeSoda300,
|
|
16
|
-
},
|
|
17
15
|
alert: {
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
lightest: cssVar(system.color.static.green.softer),
|
|
17
|
+
},
|
|
18
|
+
common: {
|
|
19
|
+
focusOutline: cssVar(base.purple500),
|
|
20
|
+
alertInner: cssVar(base.green400),
|
|
21
|
+
alertOuter: cssVar(base.green500),
|
|
20
22
|
},
|
|
21
23
|
},
|
|
22
24
|
},
|
|
@@ -38,10 +40,12 @@ const AlertInput = () => {
|
|
|
38
40
|
const alertStyles = useThemedRing('alert');
|
|
39
41
|
|
|
40
42
|
return (
|
|
41
|
-
<TextInput orientation="vertical">
|
|
43
|
+
<TextInput error="alert" orientation="vertical">
|
|
42
44
|
<TextInput.Label>Email</TextInput.Label>
|
|
43
45
|
<TextInput.Field cs={alertStyles} onChange={handleChange} value={value} />
|
|
44
|
-
<TextInput.Hint
|
|
46
|
+
<TextInput.Hint cs={{paddingTop: cssVar(system.space.x2)}}>
|
|
47
|
+
Please enter a valid email.
|
|
48
|
+
</TextInput.Hint>
|
|
45
49
|
</TextInput>
|
|
46
50
|
);
|
|
47
51
|
};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
|
|
3
3
|
import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
|
|
4
|
-
import {
|
|
4
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
5
|
+
import {cssVar} from '@workday/canvas-kit-styling';
|
|
5
6
|
|
|
6
7
|
export default () => {
|
|
7
8
|
const [value, setValue] = React.useState('');
|
|
@@ -13,11 +14,12 @@ export default () => {
|
|
|
13
14
|
const theme: PartialEmotionCanvasTheme = {
|
|
14
15
|
canvas: {
|
|
15
16
|
palette: {
|
|
16
|
-
common: {
|
|
17
|
-
focusOutline: colors.grapeSoda300,
|
|
18
|
-
},
|
|
19
17
|
error: {
|
|
20
|
-
|
|
18
|
+
lightest: cssVar(system.color.static.amber.softer),
|
|
19
|
+
},
|
|
20
|
+
common: {
|
|
21
|
+
focusOutline: cssVar(system.color.static.green.default),
|
|
22
|
+
errorInner: cssVar(system.color.static.amber.stronger),
|
|
21
23
|
},
|
|
22
24
|
},
|
|
23
25
|
},
|
|
@@ -28,7 +30,9 @@ export default () => {
|
|
|
28
30
|
<TextInput error={!value ? 'error' : undefined} isRequired={true} orientation="vertical">
|
|
29
31
|
<TextInput.Label>Email</TextInput.Label>
|
|
30
32
|
<TextInput.Field onChange={handleChange} value={value} />
|
|
31
|
-
<TextInput.Hint
|
|
33
|
+
<TextInput.Hint cs={{paddingTop: cssVar(system.space.x2)}}>
|
|
34
|
+
{!value && 'Please enter an email.'}
|
|
35
|
+
</TextInput.Hint>
|
|
32
36
|
</TextInput>
|
|
33
37
|
</CanvasProvider>
|
|
34
38
|
);
|
|
@@ -4,6 +4,7 @@ import {
|
|
|
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 Alert from './examples/Alert';
|
|
8
9
|
import Basic from './examples/Basic';
|
|
9
10
|
import Disabled from './examples/Disabled';
|
|
@@ -17,6 +18,10 @@ import Required from './examples/Required';
|
|
|
17
18
|
|
|
18
19
|
# Canvas Kit Radio
|
|
19
20
|
|
|
21
|
+
<StatusIndicator variant="red">
|
|
22
|
+
<StatusIndicator.Label>Deprecated</StatusIndicator.Label>
|
|
23
|
+
</StatusIndicator>
|
|
24
|
+
|
|
20
25
|
Radio Buttons allow a user to select one value from a predefined list of 7 or fewer options.
|
|
21
26
|
|
|
22
27
|
[> Workday Design Reference](https://design.workday.com/components/inputs/radio-buttons)
|
|
@@ -1,21 +1,22 @@
|
|
|
1
|
-
import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
|
|
2
|
-
import {
|
|
1
|
+
import {ExampleCodeBlock, StorybookStatusIndicator, SymbolDoc} from '@workday/canvas-kit-docs';
|
|
2
|
+
import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
|
|
3
3
|
|
|
4
4
|
import Basic from './examples/Basic';
|
|
5
5
|
import Icon from './examples/Icon';
|
|
6
6
|
import Emphasis from './examples/Emphasis';
|
|
7
7
|
import MaxWidth from './examples/MaxWidth';
|
|
8
8
|
|
|
9
|
-
# Canvas Kit Status Indicator
|
|
10
|
-
|
|
11
|
-
<
|
|
12
|
-
<
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
9
|
+
# Canvas Kit Status Indicator <StorybookStatusIndicator type="deprecated" />
|
|
10
|
+
|
|
11
|
+
<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
|
|
12
|
+
<InformationHighlight.Icon />
|
|
13
|
+
<InformationHighlight.Body>
|
|
14
|
+
`StatusIndicator` in Main has been deprecated and will be removed in a future major version.
|
|
15
|
+
Please use [Status
|
|
16
|
+
Indicator](https://workday.github.io/canvas-kit/?path=/docs/preview-status-indicator--basic) in
|
|
17
|
+
Preview instead.
|
|
18
|
+
</InformationHighlight.Body>
|
|
19
|
+
</InformationHighlight>
|
|
19
20
|
|
|
20
21
|
Status Indicators help the user quickly identify the status of a task, action, or page element.
|
|
21
22
|
|
|
@@ -1,18 +1,21 @@
|
|
|
1
|
-
import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
|
|
2
|
-
import {
|
|
1
|
+
import {ExampleCodeBlock, StorybookStatusIndicator, SymbolDoc} from '@workday/canvas-kit-docs';
|
|
2
|
+
import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';
|
|
3
3
|
import Basic from './examples/LabelText/Basic';
|
|
4
4
|
import Cursor from './examples/LabelText/Cursor';
|
|
5
5
|
import Disabled from './examples/LabelText/Disabled';
|
|
6
6
|
|
|
7
|
-
# Canvas Kit Label Text
|
|
8
|
-
|
|
9
|
-
<
|
|
10
|
-
<
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
`
|
|
14
|
-
|
|
15
|
-
|
|
7
|
+
# Canvas Kit Label Text <StorybookStatusIndicator type="deprecated" />
|
|
8
|
+
|
|
9
|
+
<InformationHighlight className="sb-unstyled" variant="caution" cs={{p: {marginBlock: 0}}}>
|
|
10
|
+
<InformationHighlight.Icon />
|
|
11
|
+
<InformationHighlight.Body>
|
|
12
|
+
`LabelText` has been deprecated and will be removed in a future major version. Please use
|
|
13
|
+
`FormField.Label` instead.
|
|
14
|
+
</InformationHighlight.Body>
|
|
15
|
+
<InformationHighlight.Link href="https://workday.github.io/canvas-kit/?path=/story/components-inputs-form-field--docs">
|
|
16
|
+
Form Field Docs
|
|
17
|
+
</InformationHighlight.Link>
|
|
18
|
+
</InformationHighlight>
|
|
16
19
|
|
|
17
20
|
`LabelText` provides a simple way to render a label with built-in support for Canvas type tokens.
|
|
18
21
|
|
|
@@ -1,13 +1,12 @@
|
|
|
1
|
-
import {ExampleCodeBlock} from '@workday/canvas-kit-docs';
|
|
1
|
+
import {ExampleCodeBlock, StorybookStatusIndicator} from '@workday/canvas-kit-docs';
|
|
2
2
|
import {InformationHighlight} from '@workday/canvas-kit-preview-react/information-highlight';import {BorderRadius, Space, Depth, Colors, Type} from './examples/Tokens';
|
|
3
3
|
import Overview from './examples/Overview';
|
|
4
4
|
|
|
5
5
|
|
|
6
|
-
# Tokens
|
|
6
|
+
# Tokens <StorybookStatusIndicator type="deprecated" />
|
|
7
7
|
|
|
8
8
|
<InformationHighlight variant="caution" className="sb-unstyled" cs={{p: {margin: 0}}}>
|
|
9
9
|
<InformationHighlight.Icon />
|
|
10
|
-
<InformationHighlight.Heading>React tokens have been deprecated!</InformationHighlight.Heading>
|
|
11
10
|
<InformationHighlight.Body>
|
|
12
11
|
The tokens documented below are deprecated and will be removed in a future release. You must
|
|
13
12
|
migrate to the new Canvas Tokens Web package to ensure continued support and access to the
|
|
@@ -23,6 +22,8 @@ information. They enable building components and patterns with consistency acros
|
|
|
23
22
|
|
|
24
23
|
<ExampleCodeBlock code={Overview} />
|
|
25
24
|
|
|
25
|
+
<br />
|
|
26
|
+
|
|
26
27
|
## Border Radius
|
|
27
28
|
|
|
28
29
|
### Usage
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {StorybookStatusIndicator, DownloadLLMFile} from '@workday/canvas-kit-docs';
|
|
2
2
|
import {StorybookInformationHighlight} from './StorybookInformationHighlight';
|
|
3
3
|
|
|
4
4
|
|
|
@@ -15,7 +15,7 @@ Canvas Kit v10+ introduces a new token system that replaces the old JavaScript-b
|
|
|
15
15
|
Android
|
|
16
16
|
- **Future-Proofing**: Aligns with modern CSS capabilities and Canvas Kit's long-term direction
|
|
17
17
|
|
|
18
|
-
## LLM Assisted Migration <
|
|
18
|
+
## LLM Assisted Migration <StorybookStatusIndicator type="ai" />
|
|
19
19
|
|
|
20
20
|
We provide a **LLM migration mapping file** (`llm-token-migration.txt`) specifically designed for
|
|
21
21
|
use with LLM-based code assistants (such as [Cursor](https://www.cursor.so/) or similar tools). This
|
|
@@ -23,8 +23,7 @@ file is not intended for direct human reference or team documentation, but rathe
|
|
|
23
23
|
input for LLMs to automate and assist with your token migration process.
|
|
24
24
|
|
|
25
25
|
> The LLM migration file is regularly updated to reflect the latest token mappings and best
|
|
26
|
-
> practices.
|
|
27
|
-
> For more details, see other sections of this migration guide.
|
|
26
|
+
> practices. For more details, see other sections of this migration guide.
|
|
28
27
|
|
|
29
28
|
This file contains a comprehensive mapping of old Canvas Kit token usages to their new equivalents
|
|
30
29
|
in `@workday/canvas-tokens-web`, along with migration tips and examples and formatted for optimal
|
package/index.ts
CHANGED
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
|
|
2
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
3
|
+
import {sparkleSingleSmallIcon} from '@workday/canvas-system-icons-web';
|
|
4
|
+
import {createStencil} from '@workday/canvas-kit-styling';
|
|
5
|
+
import {systemIconStencil} from '@workday/canvas-kit-react/icon';
|
|
6
|
+
|
|
7
|
+
const storybookStatusIndicatorStencil = createStencil({
|
|
8
|
+
base: {
|
|
9
|
+
borderRadius: system.shape.round,
|
|
10
|
+
padding: `${system.space.zero} ${system.space.x2}`,
|
|
11
|
+
[systemIconStencil.vars.color]: 'currentColor',
|
|
12
|
+
},
|
|
13
|
+
modifiers: {
|
|
14
|
+
type: {
|
|
15
|
+
ai: {
|
|
16
|
+
background: system.color.bg.ai.default,
|
|
17
|
+
color: system.color.fg.ai,
|
|
18
|
+
},
|
|
19
|
+
deprecated: {
|
|
20
|
+
background: system.color.static.amber.soft,
|
|
21
|
+
color: system.color.static.amber.stronger,
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
},
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
const content = {
|
|
28
|
+
ai: {
|
|
29
|
+
icon: sparkleSingleSmallIcon,
|
|
30
|
+
label: 'AI Content',
|
|
31
|
+
},
|
|
32
|
+
deprecated: {
|
|
33
|
+
icon: undefined,
|
|
34
|
+
label: 'Deprecated',
|
|
35
|
+
},
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export const StorybookStatusIndicator = ({type}: {type: 'ai' | 'deprecated'}) => {
|
|
39
|
+
const {icon, label} = content[type];
|
|
40
|
+
return (
|
|
41
|
+
<StatusIndicator
|
|
42
|
+
className="sb-unstyled cnvs-title-status-indicator"
|
|
43
|
+
cs={storybookStatusIndicatorStencil({type})}
|
|
44
|
+
>
|
|
45
|
+
{icon && <StatusIndicator.Icon icon={icon} />}
|
|
46
|
+
<StatusIndicator.Label>{label}</StatusIndicator.Label>
|
|
47
|
+
</StatusIndicator>
|
|
48
|
+
);
|
|
49
|
+
};
|
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.1169-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.1169-next.0",
|
|
49
|
+
"@workday/canvas-kit-preview-react": "^14.0.0-alpha.1169-next.0",
|
|
50
|
+
"@workday/canvas-kit-react": "^14.0.0-alpha.1169-next.0",
|
|
51
|
+
"@workday/canvas-kit-styling": "^14.0.0-alpha.1169-next.0",
|
|
52
52
|
"@workday/canvas-system-icons-web": "^3.0.35",
|
|
53
53
|
"@workday/canvas-tokens-web": "3.0.0-alpha.5",
|
|
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": "87a80034e7358532f3cb787312f2aba55497c352"
|
|
65
65
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"AIIndicator.d.ts","sourceRoot":"","sources":["../../../lib/AIIndicator.tsx"],"names":[],"mappings":"AAKA,eAAO,MAAM,WAAW,+CAgBvB,CAAC"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { StatusIndicator } from '@workday/canvas-kit-preview-react/status-indicator';
|
|
3
|
-
import { system } from '@workday/canvas-tokens-web';
|
|
4
|
-
import { sparkleSingleSmallIcon } from '@workday/canvas-system-icons-web';
|
|
5
|
-
import { systemIconStencil } from '@workday/canvas-kit-react/icon';
|
|
6
|
-
export const AIIndicator = () => {
|
|
7
|
-
return (_jsx(_Fragment, { children: _jsxs(StatusIndicator, { className: "sb-unstyled indicator", cs: {
|
|
8
|
-
background: system.color.bg.ai.default,
|
|
9
|
-
color: system.color.fg.ai,
|
|
10
|
-
[systemIconStencil.vars.color]: system.color.fg.ai,
|
|
11
|
-
}, children: [_jsx(StatusIndicator.Icon, { icon: sparkleSingleSmallIcon }), _jsx(StatusIndicator.Label, { children: "AI Content" })] }) }));
|
|
12
|
-
};
|
package/lib/AIIndicator.tsx
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
|
|
2
|
-
import {system} from '@workday/canvas-tokens-web';
|
|
3
|
-
import {sparkleSingleSmallIcon} from '@workday/canvas-system-icons-web';
|
|
4
|
-
import {systemIconStencil} from '@workday/canvas-kit-react/icon';
|
|
5
|
-
|
|
6
|
-
export const AIIndicator = () => {
|
|
7
|
-
return (
|
|
8
|
-
<>
|
|
9
|
-
<StatusIndicator
|
|
10
|
-
className="sb-unstyled indicator"
|
|
11
|
-
cs={{
|
|
12
|
-
background: system.color.bg.ai.default,
|
|
13
|
-
color: system.color.fg.ai,
|
|
14
|
-
[systemIconStencil.vars.color]: system.color.fg.ai,
|
|
15
|
-
}}
|
|
16
|
-
>
|
|
17
|
-
<StatusIndicator.Icon icon={sparkleSingleSmallIcon} />
|
|
18
|
-
<StatusIndicator.Label>AI Content</StatusIndicator.Label>
|
|
19
|
-
</StatusIndicator>
|
|
20
|
-
</>
|
|
21
|
-
);
|
|
22
|
-
};
|