@workday/canvas-kit-docs 14.1.18 → 15.0.0-alpha.0008-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 +8397 -71
- 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 +5 -5
- package/dist/mdx/15.0-UPGRADE-GUIDE.mdx +31 -0
- package/dist/mdx/react/button/button/examples/CustomStyles.tsx +2 -2
- package/dist/mdx/react/button/button/examples/Delete.tsx +2 -2
- package/dist/mdx/react/button/button/examples/ExternalHyperlinkInverse.tsx +2 -2
- package/dist/mdx/react/button/button/examples/HyperlinkInverse.tsx +2 -2
- package/dist/mdx/react/button/button/examples/Primary.tsx +2 -2
- package/dist/mdx/react/button/button/examples/PrimaryInverse.tsx +2 -2
- package/dist/mdx/react/button/button/examples/Secondary.tsx +2 -2
- package/dist/mdx/react/button/button/examples/SecondaryInverse.tsx +2 -2
- package/dist/mdx/react/button/button/examples/StandaloneHyperlink.tsx +1 -1
- package/dist/mdx/react/button/button/examples/Tertiary.tsx +2 -2
- package/dist/mdx/react/button/button/examples/TertiaryInverse.tsx +2 -2
- package/dist/mdx/react/button/button/examples/ThemeOverrides.tsx +2 -2
- package/package.json +7 -7
|
@@ -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": "14.1.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "14.1.
|
|
23
|
-
"@workday/canvas-kit-react": "14.1.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^14.1.
|
|
25
|
-
"@workday/canvas-kit-styling": "14.1.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "14.1.19",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "14.1.19",
|
|
23
|
+
"@workday/canvas-kit-react": "14.1.19",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^14.1.19",
|
|
25
|
+
"@workday/canvas-kit-styling": "14.1.19",
|
|
26
26
|
"@workday/canvas-system-icons-web": "3.0.36",
|
|
27
27
|
"@workday/canvas-tokens-web": "3.1.2"
|
|
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": "14.1.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "14.1.
|
|
23
|
-
"@workday/canvas-kit-react": "14.1.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^14.1.
|
|
25
|
-
"@workday/canvas-kit-styling": "14.1.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "14.1.19",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "14.1.19",
|
|
23
|
+
"@workday/canvas-kit-react": "14.1.19",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^14.1.19",
|
|
25
|
+
"@workday/canvas-kit-styling": "14.1.19",
|
|
26
26
|
"@workday/canvas-system-icons-web": "3.0.36",
|
|
27
27
|
"@workday/canvas-tokens-web": "3.1.2"
|
|
28
28
|
},
|
|
@@ -56,7 +56,7 @@ visual reference of what's changed.**
|
|
|
56
56
|
- [Deprecated Buttons](#deprecated-buttons)
|
|
57
57
|
- [Input Provider](#input-provider)
|
|
58
58
|
- [Menu (Preview)](#menu-preview)
|
|
59
|
-
- [
|
|
59
|
+
- [readOnlyPillStencil and removeablePillStencil](#readonlypillstencil-and-removeablepillstencil)
|
|
60
60
|
- [Text Area (Labs)](#text-area)
|
|
61
61
|
- [Text Input (Labs)](#text-input)
|
|
62
62
|
- [Troubleshooting](#troubleshooting)
|
|
@@ -630,7 +630,7 @@ provide a value for the `name` prop.
|
|
|
630
630
|
The `Pill` component no longer supports `default` as a value for the `variant` prop. If the
|
|
631
631
|
`variant` prop is not provided, the component will use its default styling.
|
|
632
632
|
|
|
633
|
-
`
|
|
633
|
+
`readOnlyPillStencil` and `removeablePillStencil` have been removed. Please use `pillStencil`
|
|
634
634
|
instead.
|
|
635
635
|
|
|
636
636
|
**Before in v13**
|
|
@@ -939,9 +939,9 @@ const buttonStyles = createStyles({
|
|
|
939
939
|
We've removed `Menu` from `@workday/canvas-kit-preview-react`. Please use
|
|
940
940
|
[Menu](/components/popups/menu/) from `@workday/canvas-kit-react` instead.
|
|
941
941
|
|
|
942
|
-
###
|
|
942
|
+
### readOnlyPillStencil and removeablePillStencil
|
|
943
943
|
|
|
944
|
-
The `
|
|
944
|
+
The `readOnlyPillStencil` and `removeablePillStencil` utilities have been removed from the Pill
|
|
945
945
|
package. Please use `pillStencil` instead.
|
|
946
946
|
|
|
947
947
|
### Text Area (Preview)
|
|
@@ -997,7 +997,7 @@ import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
|
|
|
997
997
|
**After in v14**
|
|
998
998
|
|
|
999
999
|
```tsx
|
|
1000
|
-
import {TextArea} from '@workday/canvas-kit-react/text-
|
|
1000
|
+
import {TextArea} from '@workday/canvas-kit-react/text-area';
|
|
1001
1001
|
import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
1002
1002
|
|
|
1003
1003
|
<FormField>
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
# Canvas Kit 15.0 Upgrade Guide
|
|
2
|
+
|
|
3
|
+
This guide contains an overview of the changes in Canvas Kit v15. Please
|
|
4
|
+
[reach out](https://github.com/Workday/canvas-kit/issues/new?labels=bug&template=bug.md) if you have
|
|
5
|
+
any questions.
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
## Why You Should Upgrade
|
|
9
|
+
|
|
10
|
+
v15.0 and v4.0 Canvas Tokens Web introduces new shape, size, gap, and padding tokens to our components. While we still support our old shape and
|
|
11
|
+
space tokens, the new tokens aim to add more semantic meaning to allow for better use and theming.
|
|
12
|
+
|
|
13
|
+
> **Note:** While v15 and v4 tokens should be backwards compatible with previous versions that use
|
|
14
|
+
> CSS tokens, we strongly advise to migrate both Canvas Kit and Canvas Tokens Web together.
|
|
15
|
+
|
|
16
|
+
## Table of Contents
|
|
17
|
+
|
|
18
|
+
- [Component Updates](#component-updates)
|
|
19
|
+
- [Buttons](#buttons)
|
|
20
|
+
|
|
21
|
+
## Component Updates
|
|
22
|
+
|
|
23
|
+
### Buttons
|
|
24
|
+
|
|
25
|
+
**PR:** [#3604](https://github.com/Workday/canvas-kit/pull/3604)
|
|
26
|
+
|
|
27
|
+
The Following components have been updated to use our new `size`, `padding`, `gap` and `shape`
|
|
28
|
+
tokens. These changes are **only visual**.
|
|
29
|
+
|
|
30
|
+
`PrimaryButton`, `SecondaryButton`, `DeleteButton`, `TertiaryButton`, `ToolbarButton`,
|
|
31
|
+
`ToolbarDropdownButton`, `Hyperlink`, `ExternalHyperlink`, and `ActionBar`.
|
|
@@ -7,7 +7,7 @@ import {createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';
|
|
|
7
7
|
import {system} from '@workday/canvas-tokens-web';
|
|
8
8
|
|
|
9
9
|
const customContainer = createStyles({
|
|
10
|
-
gap: system.
|
|
10
|
+
gap: system.gap.md,
|
|
11
11
|
maxWidth: 'max-content',
|
|
12
12
|
});
|
|
13
13
|
|
|
@@ -47,7 +47,7 @@ const MyCustomButton = createComponent('button')({
|
|
|
47
47
|
});
|
|
48
48
|
|
|
49
49
|
const myCustomStyles = createStyles({
|
|
50
|
-
padding: system.
|
|
50
|
+
padding: system.padding.md,
|
|
51
51
|
textTransform: 'uppercase',
|
|
52
52
|
[buttonStencil.vars.background]: system.color.static.gray.soft,
|
|
53
53
|
[buttonStencil.vars.label]: system.color.static.gray.strong,
|
|
@@ -6,8 +6,8 @@ import {system} from '@workday/canvas-tokens-web';
|
|
|
6
6
|
import {Tooltip} from '@workday/canvas-kit-react/tooltip';
|
|
7
7
|
|
|
8
8
|
const parentContainerStyles = createStyles({
|
|
9
|
-
gap: system.
|
|
10
|
-
padding: system.
|
|
9
|
+
gap: system.gap.md,
|
|
10
|
+
padding: system.padding.md,
|
|
11
11
|
});
|
|
12
12
|
|
|
13
13
|
export default () => (
|
|
@@ -7,9 +7,9 @@ import {system} from '@workday/canvas-tokens-web';
|
|
|
7
7
|
|
|
8
8
|
const parentContainerStyles = createStyles({
|
|
9
9
|
backgroundColor: system.color.bg.primary.default,
|
|
10
|
-
padding: system.
|
|
10
|
+
padding: system.padding.md,
|
|
11
11
|
display: 'inline-flex',
|
|
12
|
-
gap: system.
|
|
12
|
+
gap: system.gap.md,
|
|
13
13
|
});
|
|
14
14
|
|
|
15
15
|
export default () => (
|
|
@@ -7,9 +7,9 @@ import {system} from '@workday/canvas-tokens-web';
|
|
|
7
7
|
|
|
8
8
|
const parentContainerStyles = createStyles({
|
|
9
9
|
backgroundColor: system.color.bg.primary.default,
|
|
10
|
-
padding: system.
|
|
10
|
+
padding: system.padding.md,
|
|
11
11
|
display: 'inline-flex',
|
|
12
|
-
gap: system.
|
|
12
|
+
gap: system.gap.md,
|
|
13
13
|
});
|
|
14
14
|
|
|
15
15
|
export default () => (
|
|
@@ -10,8 +10,8 @@ import {system} from '@workday/canvas-tokens-web';
|
|
|
10
10
|
import {Tooltip} from '@workday/canvas-kit-react/tooltip';
|
|
11
11
|
|
|
12
12
|
const parentContainerStyles = createStyles({
|
|
13
|
-
gap: system.
|
|
14
|
-
padding: system.
|
|
13
|
+
gap: system.gap.md,
|
|
14
|
+
padding: system.padding.md,
|
|
15
15
|
});
|
|
16
16
|
|
|
17
17
|
export default () => (
|
|
@@ -12,9 +12,9 @@ import {system} from '@workday/canvas-tokens-web';
|
|
|
12
12
|
import {Tooltip} from '@workday/canvas-kit-react/tooltip';
|
|
13
13
|
|
|
14
14
|
const parentContainerStyles = createStyles({
|
|
15
|
-
gap: system.
|
|
15
|
+
gap: system.gap.md,
|
|
16
16
|
backgroundColor: system.color.bg.primary.default,
|
|
17
|
-
padding: system.
|
|
17
|
+
padding: system.padding.md,
|
|
18
18
|
});
|
|
19
19
|
|
|
20
20
|
export default () => (
|
|
@@ -12,8 +12,8 @@ import {system} from '@workday/canvas-tokens-web';
|
|
|
12
12
|
import {Tooltip} from '@workday/canvas-kit-react/tooltip';
|
|
13
13
|
|
|
14
14
|
const parentContainerStyles = createStyles({
|
|
15
|
-
gap: system.
|
|
16
|
-
padding: system.
|
|
15
|
+
gap: system.gap.md,
|
|
16
|
+
padding: system.padding.md,
|
|
17
17
|
});
|
|
18
18
|
|
|
19
19
|
export default () => (
|
|
@@ -12,8 +12,8 @@ import {system} from '@workday/canvas-tokens-web';
|
|
|
12
12
|
import {Tooltip} from '@workday/canvas-kit-react/tooltip';
|
|
13
13
|
|
|
14
14
|
const parentContainerStyles = createStyles({
|
|
15
|
-
gap: system.
|
|
16
|
-
padding: system.
|
|
15
|
+
gap: system.gap.md,
|
|
16
|
+
padding: system.padding.md,
|
|
17
17
|
backgroundColor: system.color.bg.primary.default,
|
|
18
18
|
});
|
|
19
19
|
|
|
@@ -12,8 +12,8 @@ import {system} from '@workday/canvas-tokens-web';
|
|
|
12
12
|
import {Tooltip} from '@workday/canvas-kit-react/tooltip';
|
|
13
13
|
|
|
14
14
|
const parentContainerStyles = createStyles({
|
|
15
|
-
gap: system.
|
|
16
|
-
padding: system.
|
|
15
|
+
gap: system.gap.md,
|
|
16
|
+
padding: system.padding.md,
|
|
17
17
|
});
|
|
18
18
|
|
|
19
19
|
export default () => (
|
|
@@ -12,8 +12,8 @@ import {system} from '@workday/canvas-tokens-web';
|
|
|
12
12
|
import {Tooltip} from '@workday/canvas-kit-react/tooltip';
|
|
13
13
|
|
|
14
14
|
const parentContainerStyles = createStyles({
|
|
15
|
-
gap: system.
|
|
16
|
-
padding: system.
|
|
15
|
+
gap: system.gap.md,
|
|
16
|
+
padding: system.padding.md,
|
|
17
17
|
backgroundColor: system.color.bg.primary.default,
|
|
18
18
|
});
|
|
19
19
|
|
|
@@ -13,8 +13,8 @@ import {CanvasProvider} from '@workday/canvas-kit-react/common';
|
|
|
13
13
|
import {Heading} from '@workday/canvas-kit-react/text';
|
|
14
14
|
|
|
15
15
|
const parentContainerStyles = createStyles({
|
|
16
|
-
gap: system.
|
|
17
|
-
padding: system.
|
|
16
|
+
gap: system.gap.md,
|
|
17
|
+
padding: system.padding.md,
|
|
18
18
|
});
|
|
19
19
|
|
|
20
20
|
const customActionTheme = createStyles({
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "15.0.0-alpha.0008-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,12 +45,12 @@
|
|
|
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": "^
|
|
49
|
-
"@workday/canvas-kit-preview-react": "^
|
|
50
|
-
"@workday/canvas-kit-react": "^
|
|
51
|
-
"@workday/canvas-kit-styling": "^
|
|
48
|
+
"@workday/canvas-kit-labs-react": "^15.0.0-alpha.0008-next.0",
|
|
49
|
+
"@workday/canvas-kit-preview-react": "^15.0.0-alpha.0008-next.0",
|
|
50
|
+
"@workday/canvas-kit-react": "^15.0.0-alpha.0008-next.0",
|
|
51
|
+
"@workday/canvas-kit-styling": "^15.0.0-alpha.0008-next.0",
|
|
52
52
|
"@workday/canvas-system-icons-web": "^3.0.36",
|
|
53
|
-
"@workday/canvas-tokens-web": "
|
|
53
|
+
"@workday/canvas-tokens-web": "4.0.0-alpha.3",
|
|
54
54
|
"markdown-to-jsx": "^7.2.0",
|
|
55
55
|
"react-syntax-highlighter": "^15.5.0",
|
|
56
56
|
"ts-node": "^10.9.1"
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"mkdirp": "^1.0.3",
|
|
62
62
|
"typescript": "5.0"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "26a8bc06dba5ae759ca62ae8922aeaa7bba7015c"
|
|
65
65
|
}
|