@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.
@@ -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.18",
22
- "@workday/canvas-kit-preview-react": "14.1.18",
23
- "@workday/canvas-kit-react": "14.1.18",
24
- "@workday/canvas-kit-react-fonts": "^14.1.18",
25
- "@workday/canvas-kit-styling": "14.1.18",
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.18",
22
- "@workday/canvas-kit-preview-react": "14.1.18",
23
- "@workday/canvas-kit-react": "14.1.18",
24
- "@workday/canvas-kit-react-fonts": "^14.1.18",
25
- "@workday/canvas-kit-styling": "14.1.18",
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
- - [readyOnlyPillStencil and removeablePillStencil](#readonlypillstencil-and-removeablepillstencil)
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
- `readyOnlyPillStencil` and `removeablePillStencil` have been removed. Please use `pillStencil`
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
- ### readyOnlyPillStencil and removeablePillStencil
942
+ ### readOnlyPillStencil and removeablePillStencil
943
943
 
944
- The `readyOnlyPillStencil` and `removeablePillStencil` utilities have been removed from the Pill
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-input';
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.space.x4,
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.space.x4,
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.space.x4,
10
- padding: system.space.x4,
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.space.x4,
10
+ padding: system.padding.md,
11
11
  display: 'inline-flex',
12
- gap: system.space.x4,
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.space.x4,
10
+ padding: system.padding.md,
11
11
  display: 'inline-flex',
12
- gap: system.space.x4,
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.space.x4,
14
- padding: system.space.x4,
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.space.x4,
15
+ gap: system.gap.md,
16
16
  backgroundColor: system.color.bg.primary.default,
17
- padding: system.space.x4,
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.space.x4,
16
- padding: system.space.x4,
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.space.x4,
16
- padding: system.space.x4,
15
+ gap: system.gap.md,
16
+ padding: system.padding.md,
17
17
  backgroundColor: system.color.bg.primary.default,
18
18
  });
19
19
 
@@ -4,7 +4,7 @@ import {system} from '@workday/canvas-tokens-web';
4
4
 
5
5
  const containerStyles = createStyles({
6
6
  display: 'inline-flex',
7
- gap: system.space.x4,
7
+ gap: system.gap.md,
8
8
  });
9
9
 
10
10
  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.space.x4,
16
- padding: system.space.x4,
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.space.x4,
16
- padding: system.space.x4,
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.space.x4,
17
- padding: system.space.x4,
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": "14.1.18",
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": "^14.1.18",
49
- "@workday/canvas-kit-preview-react": "^14.1.18",
50
- "@workday/canvas-kit-react": "^14.1.18",
51
- "@workday/canvas-kit-styling": "^14.1.18",
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": "^3.1.1",
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": "9b56d0948853d709adac5544e3d00e85bfafb589"
64
+ "gitHead": "26a8bc06dba5ae759ca62ae8922aeaa7bba7015c"
65
65
  }