@workday/canvas-kit-docs 13.0.0-alpha.1106-next.0 → 13.0.0-alpha.1110-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 +1380 -27
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +5 -5
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +5 -5
- package/dist/mdx/13.0-UPGRADE-GUIDE.mdx +19 -11
- package/dist/mdx/react/button/button/examples/CustomStyles.tsx +1 -3
- 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": "12.6.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "12.6.
|
|
23
|
-
"@workday/canvas-kit-react": "12.6.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^12.6.
|
|
25
|
-
"@workday/canvas-kit-styling": "12.6.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "12.6.8",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "12.6.8",
|
|
23
|
+
"@workday/canvas-kit-react": "12.6.8",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^12.6.8",
|
|
25
|
+
"@workday/canvas-kit-styling": "12.6.8",
|
|
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": "12.6.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "12.6.
|
|
23
|
-
"@workday/canvas-kit-react": "12.6.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^12.6.
|
|
25
|
-
"@workday/canvas-kit-styling": "12.6.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "12.6.8",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "12.6.8",
|
|
23
|
+
"@workday/canvas-kit-react": "12.6.8",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^12.6.8",
|
|
25
|
+
"@workday/canvas-kit-styling": "12.6.8",
|
|
26
26
|
"@workday/canvas-system-icons-web": "3.0.22",
|
|
27
27
|
"@workday/canvas-tokens-web": "2.0.0"
|
|
28
28
|
},
|
|
@@ -17,17 +17,18 @@ any questions.
|
|
|
17
17
|
- [Codemod](#codemod)
|
|
18
18
|
- [Instructions](#instructions)
|
|
19
19
|
- [Component Updates](#component-updates)
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
20
|
+
- [Styling API and CSS Tokens](#styling-api-and-css-tokens)
|
|
21
|
+
- [Avatar](#avatar)
|
|
22
|
+
- [Expandable](#expandable)
|
|
23
|
+
- [External Hyperlink](#external-hyperlink)
|
|
24
24
|
- [Form Field and Form Field Group](#form-field-and-form-field-group)
|
|
25
|
-
|
|
26
|
-
|
|
25
|
+
- [Pill (Preview)](#pill-preview)
|
|
26
|
+
- [SidePanel (Preview)](#sidepanel-preview)
|
|
27
|
+
- [Tabs](#tabs)
|
|
27
28
|
- [Brand Refresh](#brand-refresh)
|
|
28
29
|
- [Logo Updates](#logo-updates)
|
|
29
30
|
- [Infrastructure](#infrastructure)
|
|
30
|
-
- [Supporting react-jsx](#
|
|
31
|
+
- [Supporting react-jsx](#supporting-react-jsx)
|
|
31
32
|
- [Troubleshooting](#troubleshooting)
|
|
32
33
|
- [Glossary](#glossary)
|
|
33
34
|
- [Main](#main)
|
|
@@ -99,7 +100,7 @@ yarn remove @workday/canvas-kit-codemod
|
|
|
99
100
|
|
|
100
101
|
### Styling API and CSS Tokens
|
|
101
102
|
|
|
102
|
-
**PRs:** [#3101](https://github.com/Workday/canvas-kit/pull/3101), [#3088](https://github.com/Workday/canvas-kit/pull/3088), [#3114](https://github.com/Workday/canvas-kit/pull/3114), [#3119](https://github.com/Workday/canvas-kit/pull/3119), [#3120](https://github.com/Workday/canvas-kit/pull/3120), [#3164](https://github.com/Workday/canvas-kit/pull/3164), [#3128](https://github.com/Workday/canvas-kit/pull/3128), [#3123](https://github.com/Workday/canvas-kit/pull/3123), [#3205](https://github.com/Workday/canvas-kit/pull/3205), [#3210](https://github.com/Workday/canvas-kit/pull/3210)
|
|
103
|
+
**PRs:** [#3101](https://github.com/Workday/canvas-kit/pull/3101), [#3088](https://github.com/Workday/canvas-kit/pull/3088), [#3114](https://github.com/Workday/canvas-kit/pull/3114), [#3119](https://github.com/Workday/canvas-kit/pull/3119), [#3120](https://github.com/Workday/canvas-kit/pull/3120), [#3164](https://github.com/Workday/canvas-kit/pull/3164), [#3128](https://github.com/Workday/canvas-kit/pull/3128), [#3123](https://github.com/Workday/canvas-kit/pull/3123), [#3205](https://github.com/Workday/canvas-kit/pull/3205), [#3210](https://github.com/Workday/canvas-kit/pull/3210), [#3240](https://github.com/Workday/canvas-kit/pull/3240)
|
|
103
104
|
|
|
104
105
|
Several components have been refactored to use our
|
|
105
106
|
[Canvas Tokens](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs) and
|
|
@@ -119,6 +120,7 @@ The following components are affected:
|
|
|
119
120
|
- `LoadingSparkles`
|
|
120
121
|
- `Menu`
|
|
121
122
|
- `Pill`
|
|
123
|
+
- `Select`
|
|
122
124
|
- `SidePanel (Preview)`
|
|
123
125
|
- `Skeleton`
|
|
124
126
|
- `Tabs`
|
|
@@ -196,14 +198,14 @@ The `orientation` prop on `FormField` component has been updated to remove the d
|
|
|
196
198
|
```
|
|
197
199
|
|
|
198
200
|
|
|
199
|
-
### Pill
|
|
201
|
+
### Pill (Preview)
|
|
200
202
|
|
|
201
203
|
**PR:** [#3104](https://github.com/Workday/canvas-kit/pull/3104)
|
|
202
204
|
|
|
203
205
|
A few changes have been made to `Pill` to ensure proper accessibility and styles.
|
|
204
206
|
|
|
205
207
|
- The border color on hover has been updated from `licorice400` to `licorice500` to match our design specs.
|
|
206
|
-
- We've removed extra elements and leverage [flex box
|
|
208
|
+
- We've removed extra elements and leverage [flex box](https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/CSS_layout/Flexbox) to ensure only the label receives overflow styles. When `maxWidth` is set, it is set on the parent `<Pill/>` element and the child elements will be styled accordingly. Before v13, `maxWidth` wasn't calculating the width of all its elements and wasn't a true pixel value.
|
|
207
209
|
|
|
208
210
|
##### Breaking Changes
|
|
209
211
|
|
|
@@ -212,6 +214,13 @@ A few changes have been made to `Pill` to ensure proper accessibility and styles
|
|
|
212
214
|
- `<Pill.IconButton/>` no longer has a default `aria-label="remove"`. You *must* provide an `aria-label` for `<Pill.IconButton/>` to ensure proper accessibility. Our examples have been updated to reflect this change.
|
|
213
215
|
- `<Pill.Label/>` is a *required* element when using other sub-components like `<Pill.Icon/>` to ensure that the label truncates correctly.
|
|
214
216
|
|
|
217
|
+
### SidePanel (Preview)
|
|
218
|
+
|
|
219
|
+
**PR:** [3258](https://github.com/Workday/canvas-kit/pull/3258)
|
|
220
|
+
|
|
221
|
+
When we supported IE 11 we needed to use [CSS Animation](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations) to support animation events. Since we dropped support for IE11, we can now use [CSS Transitions](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions) to animate the `width` of the `SidePanel` when it's expanding or collapsing.
|
|
222
|
+
As part of this change, we also removed the `onAnimationStart` prop. Since moving to transitions, React doesn't support `onTransitionStart`, therefore the prop is no longer needed.
|
|
223
|
+
|
|
215
224
|
### Tabs
|
|
216
225
|
|
|
217
226
|
**PR:** [#3119](https://github.com/Workday/canvas-kit/pull/3119)
|
|
@@ -278,7 +287,6 @@ If you're using `react@16.x.x`, you'll need to upgrade to `react@17.x.x` to use
|
|
|
278
287
|
|
|
279
288
|
>**Note:** You'll need to update the way `jsx` transpiles. The automatic runtime feature, enabled through the `@babel/preset-react` preset with the `runtime: "automatic"` option, handles the importing of functions that JSX transpiles to.
|
|
280
289
|
|
|
281
|
-
```sh
|
|
282
290
|
|
|
283
291
|
## Troubleshooting
|
|
284
292
|
|
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
|
|
3
1
|
import {buttonStencil, PrimaryButton, PrimaryButtonProps} from '@workday/canvas-kit-react/button';
|
|
4
2
|
import {Grid} from '@workday/canvas-kit-react/layout';
|
|
5
3
|
import {plusIcon} from '@workday/canvas-system-icons-web';
|
|
6
4
|
import {createComponent} from '@workday/canvas-kit-react/common';
|
|
7
5
|
import {systemIconStencil} from '@workday/canvas-kit-react/icon';
|
|
8
|
-
import {createStencil, createStyles,
|
|
6
|
+
import {createStencil, createStyles, px2rem} from '@workday/canvas-kit-styling';
|
|
9
7
|
import {system} from '@workday/canvas-tokens-web';
|
|
10
8
|
|
|
11
9
|
const customContainer = createStyles({
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "13.0.0-alpha.
|
|
3
|
+
"version": "13.0.0-alpha.1110-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": "^13.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-preview-react": "^13.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-react": "^13.0.0-alpha.
|
|
51
|
-
"@workday/canvas-kit-styling": "^13.0.0-alpha.
|
|
48
|
+
"@workday/canvas-kit-labs-react": "^13.0.0-alpha.1110-next.0",
|
|
49
|
+
"@workday/canvas-kit-preview-react": "^13.0.0-alpha.1110-next.0",
|
|
50
|
+
"@workday/canvas-kit-react": "^13.0.0-alpha.1110-next.0",
|
|
51
|
+
"@workday/canvas-kit-styling": "^13.0.0-alpha.1110-next.0",
|
|
52
52
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
53
53
|
"@workday/canvas-tokens-web": "^2.1.1",
|
|
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": "acdd2495c022e1121cbce90ee654edaf53866fba"
|
|
65
65
|
}
|