@workday/canvas-kit-docs 6.3.0-next.0 → 6.3.0-next.1
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 +12 -5
- package/dist/mdx/changelog.stories.mdx +0 -1
- package/dist/mdx/labs-react/layout/Stack.mdx +2 -2
- package/dist/mdx/labs-react/search-form/SearchForm.mdx +1 -3
- package/dist/mdx/react/_examples/GlobalHeader.mdx +4 -1
- package/dist/mdx/react/_examples/PageHeader.mdx +1 -1
- package/dist/mdx/react/button/button/Button.mdx +6 -7
- package/package.json +3 -3
|
@@ -216,8 +216,11 @@ 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
|
-
If you would like to migrate away from this deprecated component
|
|
219
|
+
You may continue to use this component exactly as you did in v5, but note that we plan to
|
|
220
|
+
hard-deprecate it in Canvas Kit v7. If you would like to migrate away from this deprecated component
|
|
221
|
+
now, you can reference
|
|
222
|
+
[this example](https://workday.github.io/canvas-kit/?path=/story/examples-global-header-react--basic)
|
|
223
|
+
instead.
|
|
221
224
|
|
|
222
225
|
### Page Header
|
|
223
226
|
|
|
@@ -270,8 +273,11 @@ export const CustomPageHeader = (props: CustomPageHeaderProps) => {
|
|
|
270
273
|
};
|
|
271
274
|
```
|
|
272
275
|
|
|
273
|
-
You may continue to use this component exactly as you did in v5, but note that we plan to
|
|
274
|
-
If you would like to migrate away from this deprecated component
|
|
276
|
+
You may continue to use this component exactly as you did in v5, but note that we plan to
|
|
277
|
+
hard-deprecate it in Canvas Kit v7. If you would like to migrate away from this deprecated component
|
|
278
|
+
now, you can reference
|
|
279
|
+
[this example](https://workday.github.io/canvas-kit/?path=/story/examples-page-header-react--basic)
|
|
280
|
+
instead.
|
|
275
281
|
|
|
276
282
|
## Component Migrations
|
|
277
283
|
|
|
@@ -380,7 +386,8 @@ Also for reference, these are our viewport ranges:
|
|
|
380
386
|
`max-width: 575px`. They now use `max-width: 767.5px` – the upper limit of the `small` range. This
|
|
381
387
|
will have two effects for this component:
|
|
382
388
|
|
|
383
|
-
- Container padding will decrease from `s` (`16px`) to `xxs` (`8px`) on all viewports less than
|
|
389
|
+
- Container padding will decrease from `s` (`16px`) to `xxs` (`8px`) on all viewports less than
|
|
390
|
+
`768px` wide
|
|
384
391
|
- This was previously happening only on viewports less than `576px` wide
|
|
385
392
|
- Button order will be reversed on all viewports less than `768px` wide
|
|
386
393
|
- 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
|
-
This would not be possible with `shouldWrapChildren`.
|
|
173
|
+
we're wrapping each of the links with `Stack.Item`s, casting them as `li`s and applying custom
|
|
174
|
+
styles to each. This would not be possible with `shouldWrapChildren`.
|
|
175
175
|
|
|
176
176
|
<ExampleCodeBlock code={StackItems} />
|
|
177
177
|
|
|
@@ -31,8 +31,7 @@ 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
|
|
35
|
-
`true`.
|
|
34
|
+
If you'd like `SearchForm` to grow to the width of its container, set the `grow` prop to `true`.
|
|
36
35
|
|
|
37
36
|
<ExampleCodeBlock code={Grow} />
|
|
38
37
|
|
|
@@ -51,7 +50,6 @@ Below is a table of attributes that can be supplied to `SearchForm`:
|
|
|
51
50
|
|
|
52
51
|
<ArgsTable of={ThemeAttributes} />
|
|
53
52
|
|
|
54
|
-
|
|
55
53
|
### RTL (Right-To-Left)
|
|
56
54
|
|
|
57
55
|
`SearchForm` provides bidirectional support out of the box. You shouldn't need to provide any
|
|
@@ -4,6 +4,9 @@ import Basic from './examples/GlobalHeader';
|
|
|
4
4
|
# Canvas Kit Examples
|
|
5
5
|
|
|
6
6
|
## GlobalHeader
|
|
7
|
-
|
|
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`.
|
|
8
11
|
|
|
9
12
|
<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
|
-
a dark or colorful background such as `blueberry400`.
|
|
69
|
+
Secondary Buttons also have an `inverse` variant. Use this when you need to place a Secondary Button
|
|
70
|
+
on a dark or colorful background such as `blueberry400`.
|
|
71
71
|
|
|
72
72
|
<ExampleCodeBlock code={SecondaryInverse} />
|
|
73
73
|
|
|
@@ -84,17 +84,16 @@ 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
|
-
|
|
87
|
+
Tertiary Buttons have three sizes: `extraSmall`, `small`, and `medium`. Icons are supported for
|
|
88
|
+
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
|
-
a dark or colorful background such as `blueberry400`.
|
|
92
|
+
Tertiary Buttons also have an `inverse` variant. Use this when you need to place a Tertiary Button
|
|
93
|
+
on a dark or colorful background such as `blueberry400`.
|
|
94
94
|
|
|
95
95
|
<ExampleCodeBlock code={TertiaryInverse} />
|
|
96
96
|
|
|
97
|
-
|
|
98
97
|
#### Props
|
|
99
98
|
|
|
100
99
|
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-next.
|
|
3
|
+
"version": "6.3.0-next.1+698811ca",
|
|
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-next.
|
|
53
|
+
"@workday/canvas-kit-react": "^6.3.0-next.1+698811ca"
|
|
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": "698811ca5c25f3cb4282c0f30cef4d196590c659"
|
|
62
62
|
}
|