@workday/canvas-kit-docs 6.3.0-next.1 → 6.3.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/mdx/6.0-MIGRATION-GUIDE.mdx +5 -12
- package/dist/mdx/changelog.stories.mdx +1 -0
- package/dist/mdx/labs-react/layout/Stack.mdx +2 -2
- package/dist/mdx/labs-react/search-form/SearchForm.mdx +3 -1
- package/dist/mdx/react/_examples/GlobalHeader.mdx +1 -4
- package/dist/mdx/react/_examples/PageHeader.mdx +1 -1
- package/dist/mdx/react/button/button/Button.mdx +7 -6
- package/package.json +3 -3
|
@@ -216,11 +216,8 @@ const CustomGlobalHeader = props => {
|
|
|
216
216
|
};
|
|
217
217
|
```
|
|
218
218
|
|
|
219
|
-
You may continue to use this component exactly as you did in v5, but note that we plan to
|
|
220
|
-
|
|
221
|
-
now, you can reference
|
|
222
|
-
[this example](https://workday.github.io/canvas-kit/?path=/story/examples-global-header-react--basic)
|
|
223
|
-
instead.
|
|
219
|
+
You may continue to use this component exactly as you did in v5, but note that we plan to hard-deprecate it in Canvas Kit v7.
|
|
220
|
+
If you would like to migrate away from this deprecated component now, you can reference [this example](https://workday.github.io/canvas-kit/?path=/story/examples-global-header-react--basic) instead.
|
|
224
221
|
|
|
225
222
|
### Page Header
|
|
226
223
|
|
|
@@ -273,11 +270,8 @@ export const CustomPageHeader = (props: CustomPageHeaderProps) => {
|
|
|
273
270
|
};
|
|
274
271
|
```
|
|
275
272
|
|
|
276
|
-
You may continue to use this component exactly as you did in v5, but note that we plan to
|
|
277
|
-
|
|
278
|
-
now, you can reference
|
|
279
|
-
[this example](https://workday.github.io/canvas-kit/?path=/story/examples-page-header-react--basic)
|
|
280
|
-
instead.
|
|
273
|
+
You may continue to use this component exactly as you did in v5, but note that we plan to hard-deprecate it in Canvas Kit v7.
|
|
274
|
+
If you would like to migrate away from this deprecated component now, you can reference [this example](https://workday.github.io/canvas-kit/?path=/story/examples-page-header-react--basic) instead.
|
|
281
275
|
|
|
282
276
|
## Component Migrations
|
|
283
277
|
|
|
@@ -386,8 +380,7 @@ Also for reference, these are our viewport ranges:
|
|
|
386
380
|
`max-width: 575px`. They now use `max-width: 767.5px` – the upper limit of the `small` range. This
|
|
387
381
|
will have two effects for this component:
|
|
388
382
|
|
|
389
|
-
- Container padding will decrease from `s` (`16px`) to `xxs` (`8px`) on all viewports less than
|
|
390
|
-
`768px` wide
|
|
383
|
+
- Container padding will decrease from `s` (`16px`) to `xxs` (`8px`) on all viewports less than `768px` wide
|
|
391
384
|
- This was previously happening only on viewports less than `576px` wide
|
|
392
385
|
- Button order will be reversed on all viewports less than `768px` wide
|
|
393
386
|
- This was previously happening only on viewports less than `576px` wide
|
|
@@ -170,8 +170,8 @@ wrapping children in `Stack.Item`s. A `Stack.Item` is a `Box` with some preset s
|
|
|
170
170
|
overridden if needed.
|
|
171
171
|
|
|
172
172
|
In the example below, we wanted to keep our `li` elements as direct children of the `ul` stack. So
|
|
173
|
-
we're wrapping each of the links with `Stack.Item`s, casting them as `li`s and applying custom
|
|
174
|
-
|
|
173
|
+
we're wrapping each of the links with `Stack.Item`s, casting them as `li`s and applying custom styles to each.
|
|
174
|
+
This would not be possible with `shouldWrapChildren`.
|
|
175
175
|
|
|
176
176
|
<ExampleCodeBlock code={StackItems} />
|
|
177
177
|
|
|
@@ -31,7 +31,8 @@ based on search input.
|
|
|
31
31
|
|
|
32
32
|
### Grow
|
|
33
33
|
|
|
34
|
-
If you'd like `SearchForm` to grow to the width of its container, set the `grow` prop to
|
|
34
|
+
If you'd like `SearchForm` to grow to the width of its container, set the `grow` prop to
|
|
35
|
+
`true`.
|
|
35
36
|
|
|
36
37
|
<ExampleCodeBlock code={Grow} />
|
|
37
38
|
|
|
@@ -50,6 +51,7 @@ Below is a table of attributes that can be supplied to `SearchForm`:
|
|
|
50
51
|
|
|
51
52
|
<ArgsTable of={ThemeAttributes} />
|
|
52
53
|
|
|
54
|
+
|
|
53
55
|
### RTL (Right-To-Left)
|
|
54
56
|
|
|
55
57
|
`SearchForm` provides bidirectional support out of the box. You shouldn't need to provide any
|
|
@@ -4,9 +4,6 @@ import Basic from './examples/GlobalHeader';
|
|
|
4
4
|
# Canvas Kit Examples
|
|
5
5
|
|
|
6
6
|
## GlobalHeader
|
|
7
|
-
|
|
8
|
-
Developers building internal Workday applications will likely not need to create this component.
|
|
9
|
-
However, if you're building components to be used outside of Workday, this is a helpful reference
|
|
10
|
-
for building a global navigation header that looks like our internal `GlobalHeader`.
|
|
7
|
+
Developers building internal Workday applications will likely not need to create this component. However, if you're building components to be used outside of Workday, this is a helpful reference for building a global navigation header that looks like our internal `GlobalHeader`.
|
|
11
8
|
|
|
12
9
|
<ExampleCodeBlock code={Basic} />
|
|
@@ -66,8 +66,8 @@ for every size and can be positioned to the `left` or `right` with the `iconPosi
|
|
|
66
66
|
|
|
67
67
|
<ExampleCodeBlock code={Secondary} />
|
|
68
68
|
|
|
69
|
-
Secondary Buttons also have an `inverse` variant. Use this when you need to place a Secondary Button
|
|
70
|
-
|
|
69
|
+
Secondary Buttons also have an `inverse` variant. Use this when you need to place a Secondary Button on
|
|
70
|
+
a dark or colorful background such as `blueberry400`.
|
|
71
71
|
|
|
72
72
|
<ExampleCodeBlock code={SecondaryInverse} />
|
|
73
73
|
|
|
@@ -84,16 +84,17 @@ the user may not often be looking to do. Tertiary Buttons have lower prominence
|
|
|
84
84
|
not visible until it is interacted with. Use Tertiary Buttons for supplemental actions such as “View
|
|
85
85
|
More”, “Read More” or “Select a File”. Tertiary Buttons are frequently used on Cards.
|
|
86
86
|
|
|
87
|
-
Tertiary Buttons have three sizes: `extraSmall`, `small`, and `medium`. Icons are supported
|
|
88
|
-
every size and can be positioned to the `left` or `right` with the `iconPosition` prop.
|
|
87
|
+
Tertiary Buttons have three sizes: `extraSmall`, `small`, and `medium`. Icons are supported
|
|
88
|
+
for every size and can be positioned to the `left` or `right` with the `iconPosition` prop.
|
|
89
89
|
|
|
90
90
|
<ExampleCodeBlock code={Tertiary} />
|
|
91
91
|
|
|
92
|
-
Tertiary Buttons also have an `inverse` variant. Use this when you need to place a Tertiary Button
|
|
93
|
-
|
|
92
|
+
Tertiary Buttons also have an `inverse` variant. Use this when you need to place a Tertiary Button on
|
|
93
|
+
a dark or colorful background such as `blueberry400`.
|
|
94
94
|
|
|
95
95
|
<ExampleCodeBlock code={TertiaryInverse} />
|
|
96
96
|
|
|
97
|
+
|
|
97
98
|
#### Props
|
|
98
99
|
|
|
99
100
|
Undocumented props are spread to the underlying `<button>` element.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "6.3.0
|
|
3
|
+
"version": "6.3.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",
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
],
|
|
51
51
|
"dependencies": {
|
|
52
52
|
"@storybook/csf": "0.0.1",
|
|
53
|
-
"@workday/canvas-kit-react": "^6.3.0
|
|
53
|
+
"@workday/canvas-kit-react": "^6.3.0"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
56
|
"fs-extra": "^10.0.0",
|
|
@@ -58,5 +58,5 @@
|
|
|
58
58
|
"mkdirp": "^1.0.3",
|
|
59
59
|
"typescript": "^3.8.3"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "94d5ae2d79daa43b9c2ef5f8eef572fc89694d5e"
|
|
62
62
|
}
|