@workday/canvas-kit-docs 12.0.0-alpha.908-next.0 → 12.0.0-alpha.909-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 +17 -0
- package/dist/mdx/10.0-UPGRADE-GUIDE.mdx +16 -5
- package/dist/mdx/12.0-UPGRADE-GUIDE.mdx +99 -4
- package/dist/mdx/5.0-UPGRADE-GUIDE.mdx +66 -53
- package/dist/mdx/6.0-UPGRADE-GUIDE.mdx +12 -5
- package/dist/mdx/7.0-UPGRADE-GUIDE.mdx +15 -8
- package/dist/mdx/MAINTAINING.mdx +15 -8
- package/dist/mdx/preview-react/menu/Menu.mdx +14 -7
- package/dist/mdx/react/form-field/FormField.mdx +8 -0
- package/dist/mdx/react/form-field/examples/HiddenLabel.tsx +30 -0
- package/dist/mdx/react/menu/Menu.mdx +12 -6
- package/dist/mdx/react/status-indicator/StatusIndicator.mdx +12 -6
- package/package.json +6 -6
package/dist/es6/lib/docs.js
CHANGED
|
@@ -128851,6 +128851,23 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
128851
128851
|
],
|
|
128852
128852
|
"tags": {}
|
|
128853
128853
|
},
|
|
128854
|
+
{
|
|
128855
|
+
"kind": "property",
|
|
128856
|
+
"name": "isHidden",
|
|
128857
|
+
"required": false,
|
|
128858
|
+
"type": {
|
|
128859
|
+
"kind": "primitive",
|
|
128860
|
+
"value": "boolean"
|
|
128861
|
+
},
|
|
128862
|
+
"description": "When true, will apply `accessibleHide` to the label. This is useful in cases where you still need accessibility but don't want to show the label, like a search input.",
|
|
128863
|
+
"declarations": [
|
|
128864
|
+
{
|
|
128865
|
+
"name": "isHidden",
|
|
128866
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/form-field/lib/FormFieldLabel.tsx"
|
|
128867
|
+
}
|
|
128868
|
+
],
|
|
128869
|
+
"tags": {}
|
|
128870
|
+
},
|
|
128854
128871
|
{
|
|
128855
128872
|
"kind": "property",
|
|
128856
128873
|
"name": "cs",
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import {Markdown} from '@storybook/blocks';
|
|
2
|
+
|
|
3
|
+
|
|
1
4
|
# Canvas Kit 10.0 Upgrade Guide
|
|
2
5
|
|
|
3
6
|
This guide contains an overview of the changes in Canvas Kit v10. Please
|
|
@@ -158,6 +161,8 @@ updated on a 1:1 basis. None of the base values have changed, only the unit.
|
|
|
158
161
|
The table below shows what each token value is, what it corresponds to, and what the new `rem` value
|
|
159
162
|
is in `px`:
|
|
160
163
|
|
|
164
|
+
<Markdown>
|
|
165
|
+
{`
|
|
161
166
|
| px Value | rem Value | space Token |
|
|
162
167
|
| -------- | --------- | ----------- |
|
|
163
168
|
| 0 | 0 | zero |
|
|
@@ -170,17 +175,23 @@ is in `px`:
|
|
|
170
175
|
| 40px | 2.5rem | xl |
|
|
171
176
|
| 64px | 4rem | xxl |
|
|
172
177
|
| 80px | 5rem | xxxl |
|
|
178
|
+
`}
|
|
179
|
+
</Markdown>
|
|
173
180
|
|
|
174
181
|
You can convert a `px` value to a `rem` value by dividing your `px` value by `16`(if your default
|
|
175
182
|
browser font size hasn't been updated, the value will be `16`).
|
|
176
183
|
|
|
177
184
|
For example:
|
|
178
185
|
|
|
186
|
+
<Markdown>
|
|
187
|
+
{`
|
|
179
188
|
| Equation | rem Value |
|
|
180
189
|
| ----------- | --------- |
|
|
181
|
-
|
|
|
182
|
-
|
|
|
183
|
-
|
|
|
190
|
+
| \`16px/16px\` | \`1rem\` |
|
|
191
|
+
| \`32px/16px\` | \`2rem\` |
|
|
192
|
+
| \`8px/16px\` | \`0.5rem\` |
|
|
193
|
+
`}
|
|
194
|
+
</Markdown>
|
|
184
195
|
|
|
185
196
|
#### Why Did We Make This Change?
|
|
186
197
|
|
|
@@ -269,7 +280,7 @@ import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
|
269
280
|
<SelectOption label="Medium" value="medium" />
|
|
270
281
|
<SelectOption label="Large" value="large" />
|
|
271
282
|
</Select>
|
|
272
|
-
</FormField
|
|
283
|
+
</FormField>;
|
|
273
284
|
```
|
|
274
285
|
|
|
275
286
|
```tsx
|
|
@@ -290,7 +301,7 @@ import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
|
290
301
|
</Select.Card>
|
|
291
302
|
</Select.Popper>
|
|
292
303
|
</FormField>
|
|
293
|
-
</Select
|
|
304
|
+
</Select>;
|
|
294
305
|
```
|
|
295
306
|
|
|
296
307
|
Notice that `Select` is now outside the `FormField`. This is due to the update in `Select` and how
|
|
@@ -48,6 +48,7 @@ A note to the reader:
|
|
|
48
48
|
- [Search Form](#search-form)
|
|
49
49
|
- [Select](#select)
|
|
50
50
|
- [Text Area](#text-area)
|
|
51
|
+
- [Text Input](#text-input)
|
|
51
52
|
- [Troubleshooting](#troubleshooting)
|
|
52
53
|
- [Glossary](#glossary)
|
|
53
54
|
- [Main](#main)
|
|
@@ -246,7 +247,8 @@ The following changes have been made to the API:
|
|
|
246
247
|
|
|
247
248
|
**PRs:** [#2865](https://github.com/Workday/canvas-kit/pull/2865),
|
|
248
249
|
[#2881](https://github.com/Workday/canvas-kit/pull/2881),
|
|
249
|
-
[#2934](https://github.com/Workday/canvas-kit/pull/2934)
|
|
250
|
+
[#2934](https://github.com/Workday/canvas-kit/pull/2934),
|
|
251
|
+
[2973](https://github.com/Workday/canvas-kit/pull/2973)
|
|
250
252
|
|
|
251
253
|
We've promoted FormField from [Preview](#preview) to [Main](#main). The following changes has been
|
|
252
254
|
made to provide more flexibility and better explicit components when using inputs.
|
|
@@ -294,6 +296,7 @@ an example of how to **update** your code to match the new compound component AP
|
|
|
294
296
|
labelPosition={FormField.LabelPosition.Left}
|
|
295
297
|
useFieldSet={true}
|
|
296
298
|
required={true}
|
|
299
|
+
inputId='input-id'
|
|
297
300
|
hintId="hint-alert"
|
|
298
301
|
hintText="Please enter a valid email."
|
|
299
302
|
label="Email"
|
|
@@ -304,9 +307,10 @@ an example of how to **update** your code to match the new compound component AP
|
|
|
304
307
|
|
|
305
308
|
// v12 Newly promoted FormField from Preview to Main
|
|
306
309
|
<FormField
|
|
307
|
-
error="
|
|
310
|
+
error="alert"
|
|
308
311
|
orientation="horizontalStart"
|
|
309
312
|
isRequired={true}
|
|
313
|
+
id='input-id'
|
|
310
314
|
>
|
|
311
315
|
<FormField.Label>Email</FormField.Label>
|
|
312
316
|
<FormField.Field>
|
|
@@ -316,6 +320,34 @@ an example of how to **update** your code to match the new compound component AP
|
|
|
316
320
|
</FormField>
|
|
317
321
|
```
|
|
318
322
|
|
|
323
|
+
- `FormField.LabelPosition.Hidden` is no longer valid. If you still want to hide the label, use the
|
|
324
|
+
prop `isHidden`.
|
|
325
|
+
|
|
326
|
+
```tsx
|
|
327
|
+
// v11 FormField in Main
|
|
328
|
+
<FormField
|
|
329
|
+
error={FormField.ErrorType.Alert}
|
|
330
|
+
labelPosition={FormField.LabelPosition.Hidden}
|
|
331
|
+
useFieldSet={true}
|
|
332
|
+
required={true}
|
|
333
|
+
inputId="input-id"
|
|
334
|
+
label="Search"
|
|
335
|
+
>
|
|
336
|
+
<TextInput onChange={handleChange} value={value} />
|
|
337
|
+
</FormField>;
|
|
338
|
+
|
|
339
|
+
// v12 Newly promoted FormField from Preview to Main
|
|
340
|
+
|
|
341
|
+
//...
|
|
342
|
+
|
|
343
|
+
<FormField error="alert" orientation="horizontalStart" isRequired={true} id="input-id">
|
|
344
|
+
<FormField.Label isHidden>Search</FormField.Label>
|
|
345
|
+
<FormField.Field>
|
|
346
|
+
<FormField.Input as={TextInput} onChange={handleChange} value={value} />
|
|
347
|
+
</FormField.Field>
|
|
348
|
+
</FormField>;
|
|
349
|
+
```
|
|
350
|
+
|
|
319
351
|
**Noticeable changes:**
|
|
320
352
|
|
|
321
353
|
- `error` prop takes in the following values: `"error" | "alert"`.
|
|
@@ -332,6 +364,10 @@ an example of how to **update** your code to match the new compound component AP
|
|
|
332
364
|
- `label` is no longer a valid prop. Use `FormField.Label` sub component to render your label text.
|
|
333
365
|
- Instead of rendering an input, ensure you use `FormField.Input` with the `as` prop. This ensures
|
|
334
366
|
proper error handling and aria attributes for accessibility.
|
|
367
|
+
- `inputId` is no longer a valid prop. Use `id` if you want a custom `id`, otherwise, the component
|
|
368
|
+
will handle generating a unique id to associate each element for accessibility.
|
|
369
|
+
- `isHidden` has been added as a prop to `FormField.Label` in cases where you want to hide the label
|
|
370
|
+
while still meeting accessibility standards.
|
|
335
371
|
|
|
336
372
|
🤖 The codemod will handle the change of `orientation="horizontal"` to
|
|
337
373
|
`orientation="horizontalStart"` if you're using the string literal values. It will also handle
|
|
@@ -399,8 +435,7 @@ pass the interface that the `as` prop is pointing to.
|
|
|
399
435
|
**PRs:** [#2934](https://github.com/Workday/canvas-kit/pull/2934),
|
|
400
436
|
|
|
401
437
|
`SearchForm` is now using the newly promoted `FormField` component. `SearchForm` now uses `labelId`
|
|
402
|
-
to set the appropiate aria attributes and `id` on the underlying input element.
|
|
403
|
-
visual breaking changes and the API remains the same.
|
|
438
|
+
to set the appropiate aria attributes and `id` on the underlying input element.
|
|
404
439
|
|
|
405
440
|
### Select
|
|
406
441
|
|
|
@@ -472,6 +507,66 @@ interface MyProps {
|
|
|
472
507
|
}
|
|
473
508
|
```
|
|
474
509
|
|
|
510
|
+
`Themeable` has been removed from `TextAreaProps`. If you wish to theme `TextArea`, use our
|
|
511
|
+
`CanvasProvider` with the `theme` object.
|
|
512
|
+
|
|
513
|
+
```tsx
|
|
514
|
+
const theme: PartialEmotionCanvasTheme = {
|
|
515
|
+
canvas: {
|
|
516
|
+
palette: {
|
|
517
|
+
common: {
|
|
518
|
+
focusOutline: 'pink',
|
|
519
|
+
},
|
|
520
|
+
primary: {
|
|
521
|
+
main: 'green',
|
|
522
|
+
light: 'lightgreen',
|
|
523
|
+
},
|
|
524
|
+
},
|
|
525
|
+
},
|
|
526
|
+
};
|
|
527
|
+
|
|
528
|
+
//...
|
|
529
|
+
|
|
530
|
+
<CanvasProvider theme={theme}>
|
|
531
|
+
<FormField>
|
|
532
|
+
<FormField.Label>Contact</FormField.Label>
|
|
533
|
+
<FormField.Input as={TextArea} onChange={handleChange} />
|
|
534
|
+
</FormField>
|
|
535
|
+
</CanvasProvider>;
|
|
536
|
+
```
|
|
537
|
+
|
|
538
|
+
### Text Input
|
|
539
|
+
|
|
540
|
+
**PR:** [#2825](https://github.com/Workday/canvas-kit/pull/2825)
|
|
541
|
+
|
|
542
|
+
`Themeable` has been removed from `TextInputProps`. If you wish to theme `TextInput`, use our
|
|
543
|
+
`CanvasProvider` with the `theme` object.
|
|
544
|
+
|
|
545
|
+
```tsx
|
|
546
|
+
const theme: PartialEmotionCanvasTheme = {
|
|
547
|
+
canvas: {
|
|
548
|
+
palette: {
|
|
549
|
+
common: {
|
|
550
|
+
focusOutline: 'pink',
|
|
551
|
+
},
|
|
552
|
+
primary: {
|
|
553
|
+
main: 'green',
|
|
554
|
+
light: 'lightgreen',
|
|
555
|
+
},
|
|
556
|
+
},
|
|
557
|
+
},
|
|
558
|
+
};
|
|
559
|
+
|
|
560
|
+
//...
|
|
561
|
+
|
|
562
|
+
<CanvasProvider theme={theme}>
|
|
563
|
+
<FormField>
|
|
564
|
+
<FormField.Label>Contact</FormField.Label>
|
|
565
|
+
<FormField.Input as={TextInput} onChange={handleChange} />
|
|
566
|
+
</FormField>
|
|
567
|
+
</CanvasProvider>;
|
|
568
|
+
```
|
|
569
|
+
|
|
475
570
|
## Troubleshooting
|
|
476
571
|
|
|
477
572
|
### My Styles Seem Broken?
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import {Markdown} from '@storybook/blocks';
|
|
2
|
+
|
|
3
|
+
|
|
1
4
|
# Canvas Kit 5.0 Upgrade Guide
|
|
2
5
|
|
|
3
6
|
Below are the breaking changes made in Canvas Kit v5. Please
|
|
@@ -120,56 +123,51 @@ updated as you expect.
|
|
|
120
123
|
tokens in `@workday/canvas-kit-labs-react-core`, but some are using the Legacy type in
|
|
121
124
|
`@workday/canvas-kit-react-core`.
|
|
122
125
|
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
| ----------------- | ---------------------------------------- |
|
|
138
|
-
| `dataViz1` (56px) | `levels.title.large` (3.5rem \ 56px) |
|
|
139
|
-
| `dataViz2` (34px) | `levels.heading.large` (2rem \ 32px) |
|
|
140
|
-
| `h1` (28px) | `levels.heading.medium` (1.75rem \ 28px) |
|
|
141
|
-
| `h2` (24px) | `levels.heading.small` (1.5rem \ 24px) |
|
|
142
|
-
| `h3` (20px) | `levels.body.large` (1.25rem,) \ 20px |
|
|
143
|
-
| `h4` (16px) | `levels.body.small` (1rem \ 16px) |
|
|
144
|
-
| `h5` (16px) | `levels.body.small` (1rem \ 16px) |
|
|
145
|
-
| `body` (14px) | `levels.subtext.large` (0.875rem \ 14px) |
|
|
146
|
-
| `body2` (13px) | `levels.subtext.medium` (0.75rem \ 12px) |
|
|
147
|
-
| `small` (12px) | `levels.subtext.medium` (0.75rem \ 12px) |
|
|
126
|
+
<Markdown>{`
|
|
127
|
+
| Legacy Type (px) | Responsive Type (rem) |
|
|
128
|
+
| ----------------- | ---------------------------------------- |
|
|
129
|
+
| \`dataViz1\` (56px) | \`levels.title.large\` (3.5rem \ 56px) |
|
|
130
|
+
| \`dataViz2\` (34px) | \`levels.heading.large\` (2rem \ 32px) |
|
|
131
|
+
| \`h1\` (28px) | \`levels.heading.medium\` (1.75rem \ 28px) |
|
|
132
|
+
| \`h2\` (24px) | \`levels.heading.small\` (1.5rem \ 24px) |
|
|
133
|
+
| \`h3\` (20px) | \`levels.body.large\` (1.25rem,) \ 20px |
|
|
134
|
+
| \`h4\` (16px) | \`levels.body.small\` (1rem \ 16px) |
|
|
135
|
+
| \`h5\` (16px) | \`levels.body.small\` (1rem \ 16px) |
|
|
136
|
+
| \`body\` (14px) | \`levels.subtext.large\` (0.875rem \ 14px) |
|
|
137
|
+
| \`body2\` (13px) | \`levels.subtext.medium\` (0.75rem \ 12px) |
|
|
138
|
+
| \`small\` (12px) | \`levels.subtext.medium\` (0.75rem \ 12px) |
|
|
139
|
+
`}</Markdown>
|
|
148
140
|
|
|
149
141
|
- 🤖 Property Updates
|
|
150
142
|
|
|
151
143
|
All `fontFamily`, `fontSize`, and `fontWeight` property updates are handled by the codemod.
|
|
152
144
|
|
|
153
|
-
|
|
145
|
+
<Markdown>
|
|
146
|
+
{`| CSS Property | Corresponding Token | Notes |
|
|
154
147
|
| ------------ | ------------------------------ | --------------------------------------------------------------- |
|
|
155
|
-
|
|
|
156
|
-
|
|
|
157
|
-
|
|
|
148
|
+
| \`fontFamily\` | \`type.properties.fontFamilies\` | \`default\` (Roboto) and \`monospace\` (Roboto Mono) are available |
|
|
149
|
+
| \`fontSize\` | \`type.properties.fontSizes\` | please consult the type hierarchies above to map values |
|
|
150
|
+
| \`fontWeight\` | \`type.properties.fontWeights\` | \`regular\` (400), \`medium\` (500), and \`bold\` (700) are available |`}
|
|
151
|
+
</Markdown>
|
|
158
152
|
|
|
159
153
|
- 🤖 Variant Updates
|
|
160
154
|
|
|
161
155
|
All `variant` updates _except `link`_ are handled by the codemod. Please see the
|
|
162
156
|
[variants](#variants) section below for more information.
|
|
163
157
|
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
158
|
+
<Markdown>
|
|
159
|
+
{`
|
|
160
|
+
| Variant | Transformation | Notes |
|
|
161
|
+
| ---------------------- | ------------------------------------------------------------------------------ | --------------------------------------- |
|
|
162
|
+
| \`type.variant.error\` | \`type.variants.error\` | name change only |
|
|
163
|
+
| \`type.variant.hint\` | \`type.variants.hint\` | name change only |
|
|
164
|
+
| \`type.variant.inverse\` | \`type.variants.inverse\` | name change only |
|
|
165
|
+
| \`type.variant.button\` | \`{fontWeight: type.properties.fontWeights.bold}\` | variant deprecated, use type properties |
|
|
166
|
+
| \`type.variant.caps\` | \`{textTransform: 'uppercase', fontWeight: type.properties.fontWeights.medium}\` | variant deprecated, use type properties |
|
|
167
|
+
| \`type.variant.label\` | \`{fontWeight: type.properties.fontWeights.medium}\` | variant deprecated, use type properties |
|
|
168
|
+
| \`type.variant.mono\` | \`{fontFamily: type.properties.fontFamilies.monospace}\` | variant deprecated, use type properties |
|
|
169
|
+
`}
|
|
170
|
+
</Markdown>
|
|
173
171
|
|
|
174
172
|
#### Manual Updates
|
|
175
173
|
|
|
@@ -637,14 +635,20 @@ types (which were too generic) and their JSDoc hints.
|
|
|
637
635
|
|
|
638
636
|
The following table describes each update:
|
|
639
637
|
|
|
638
|
+
<Markdown>
|
|
639
|
+
{`
|
|
640
640
|
| Before | After | Change Description |
|
|
641
641
|
| --------------------- | ------------------------- | -------------------------------- |
|
|
642
|
-
|
|
|
643
|
-
|
|
|
644
|
-
|
|
|
645
|
-
|
|
|
646
|
-
|
|
|
647
|
-
|
|
|
642
|
+
| \`spacing\` | \`space\` | name change only |
|
|
643
|
+
| \`spacingNumbers\` | \`spaceNumbers\` | name change only |
|
|
644
|
+
| \`CanvasSpacing\` | \`CanvasSpace\` | name change and improved types\* |
|
|
645
|
+
| \`CanvasSpacingValue\` | \`CanvasSpaceValues\` | name change only |
|
|
646
|
+
| \`CanvasSpacingNumber\` | \`CanvasSpaceNumbers\` | name change and improved types\* |
|
|
647
|
+
| \`n/a\` | \`CanvasSpaceNumberValues\` | new type! |
|
|
648
|
+
|
|
649
|
+
`}
|
|
650
|
+
|
|
651
|
+
</Markdown>
|
|
648
652
|
|
|
649
653
|
\* Before, the types were too generic and not very useful. They now better reflect the values they
|
|
650
654
|
represent.
|
|
@@ -1197,14 +1201,18 @@ Pass a `css` prop or a styled button instead to have a custom styled button. You
|
|
|
1197
1201
|
|
|
1198
1202
|
If you were using `usePopup` before, here's a list of equivalent APIs:
|
|
1199
1203
|
|
|
1204
|
+
<Markdown>
|
|
1205
|
+
{`
|
|
1200
1206
|
| Before | After |
|
|
1201
1207
|
| ----------------------------------------------------------------------- | ------------------------------------- |
|
|
1202
|
-
|
|
|
1203
|
-
|
|
|
1204
|
-
|
|
|
1205
|
-
|
|
|
1206
|
-
|
|
|
1207
|
-
|
|
|
1208
|
+
| \`const { popperProps, targetProps, closePopup, stackRef } = usePopup()\` | \`const model = usePopupModel()\` |
|
|
1209
|
+
| \`popperProps.open\` | \`model.state.visibility !== 'hidden'\` |
|
|
1210
|
+
| \`closePopup()\` | \`model.events.hide()\` |
|
|
1211
|
+
| \`stackRef\` or \`popperProps.ref\` | \`model.state.stackRef\` |
|
|
1212
|
+
| \`popperProps.anchorElement\` | \`model.state.targetRef.current\` |
|
|
1213
|
+
| \`targetProps.onClick\` | \`usePopupTarget(model).onClick\` |
|
|
1214
|
+
`}
|
|
1215
|
+
</Markdown>
|
|
1208
1216
|
|
|
1209
1217
|
#### New Focus Management
|
|
1210
1218
|
|
|
@@ -1279,11 +1287,16 @@ model and behaviors, the following is equivalent:
|
|
|
1279
1287
|
|
|
1280
1288
|
`Popup.Card` uses `Card`, which is now using `Box`. Consequently, the following props have changed:
|
|
1281
1289
|
|
|
1290
|
+
<Markdown>
|
|
1291
|
+
{`
|
|
1282
1292
|
| Before | After |
|
|
1283
1293
|
| ------------------------------ | ------------------------------------------ |
|
|
1284
|
-
|
|
|
1285
|
-
|
|
|
1286
|
-
|
|
|
1294
|
+
| \`padding={Popup.Padding.zero}\` | \`padding="zero"\` or \`padding={space.zero}\` |
|
|
1295
|
+
| \`depth={depth[0]}\` | \`depth={0}\` |
|
|
1296
|
+
| \`popupRef={ref}\` | \`ref={ref}\` |
|
|
1297
|
+
`}
|
|
1298
|
+
|
|
1299
|
+
</Markdown>
|
|
1287
1300
|
|
|
1288
1301
|
#### Transitioning
|
|
1289
1302
|
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import {Markdown} from '@storybook/blocks';
|
|
2
|
+
|
|
3
|
+
|
|
1
4
|
# Canvas Kit 6.0 Upgrade Guide
|
|
2
5
|
|
|
3
6
|
Below are the breaking changes made in Canvas Kit v6. Please
|
|
@@ -365,13 +368,17 @@ layout. If you have questions about this testing, please reach out to our team.
|
|
|
365
368
|
|
|
366
369
|
Below is a reference table for the V5 and V6 breakpoint values.
|
|
367
370
|
|
|
371
|
+
<Markdown>
|
|
372
|
+
{`
|
|
368
373
|
| Breakpoint Name | V5 Value (px) | V6 Value (px) |
|
|
369
374
|
| --------------- | ------------- | ------------- |
|
|
370
|
-
|
|
|
371
|
-
|
|
|
372
|
-
|
|
|
373
|
-
|
|
|
374
|
-
|
|
|
375
|
+
| \`zero\` | 0 | 0 |
|
|
376
|
+
| \`s\` | 600 | 320 |
|
|
377
|
+
| \`m\` | 900 | 768 |
|
|
378
|
+
| \`l\` | 1280 | 1024 |
|
|
379
|
+
| \`xl\` | 1920 | 1440 |
|
|
380
|
+
`}
|
|
381
|
+
</Markdown>
|
|
375
382
|
|
|
376
383
|
Also for reference, these are our viewport ranges:
|
|
377
384
|
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import {Markdown} from '@storybook/blocks';
|
|
2
|
+
|
|
3
|
+
|
|
1
4
|
# Canvas Kit 7.0 Upgrade Guide
|
|
2
5
|
|
|
3
6
|
This guide contains breaking changes in Canvas Kit v7. Please
|
|
@@ -559,15 +562,19 @@ To consolidate Button APIs, we've removed `IconButton` in favor of `SecondaryBut
|
|
|
559
562
|
`TertiaryButton`. The following table shows how `IconButton` variants in v6 map to their
|
|
560
563
|
corresponding buttons in v7.
|
|
561
564
|
|
|
562
|
-
|
|
565
|
+
<Markdown>
|
|
566
|
+
{`
|
|
567
|
+
| v6 \`IconButton\` variant | v7 button (and variant, if necessary) |
|
|
563
568
|
| -------------------------- | ---------------------------------------- |
|
|
564
|
-
|
|
|
565
|
-
|
|
|
566
|
-
|
|
|
567
|
-
|
|
|
568
|
-
|
|
|
569
|
-
|
|
|
570
|
-
|
|
|
569
|
+
| \`circle\` (default variant) | \`TertiaryButton\` |
|
|
570
|
+
| \`circleFilled\` | \`SecondaryButton\` |
|
|
571
|
+
| \`inverse\` | \`TertiaryButton\` with \`inverse\` variant |
|
|
572
|
+
| \`inverseFilled\` | \`SecondaryButton\` with \`inverse\` variant |
|
|
573
|
+
| \`plain\` | Unsupported |
|
|
574
|
+
| \`square\` | Unsupported |
|
|
575
|
+
| \`squareFilled\` | Unsupported |
|
|
576
|
+
`}
|
|
577
|
+
</Markdown>
|
|
571
578
|
|
|
572
579
|
> Note: See below for more information about how to manually migrate from
|
|
573
580
|
> [unsupported v6 variants](#unsupported-iconbutton-variants).
|
package/dist/mdx/MAINTAINING.mdx
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import {Markdown} from '@storybook/blocks';
|
|
2
|
+
|
|
3
|
+
|
|
1
4
|
# Maintaining Canvas Kit
|
|
2
5
|
|
|
3
6
|
If you're a Canvas Kit core maintainer, this doc is for you! Consider this a field guide to help you
|
|
@@ -48,13 +51,17 @@ runs on `support`, `master`, and `prerelease/minor` branches. Forward merges for
|
|
|
48
51
|
starts with `chore: Release`, and that's how the forward merge workflow identifies them. Forward
|
|
49
52
|
merges will run on every merge to `prerelease/minor` regardless of the commit message.
|
|
50
53
|
|
|
54
|
+
<Markdown>
|
|
55
|
+
{`
|
|
51
56
|
| Run Forward Merge? | Branch | Commit Message |
|
|
52
57
|
| ------------------ | ------------------ | --------------------------------------- |
|
|
53
|
-
| ✅ |
|
|
54
|
-
| ⛔️ |
|
|
55
|
-
| ✅ |
|
|
56
|
-
| ⛔️ |
|
|
57
|
-
| ✅ |
|
|
58
|
+
| ✅ | \`support\` | \`chore: Release v6.8.14 [skip release]\` |
|
|
59
|
+
| ⛔️ | \`support\` | \`fix: Remove unused props\` |
|
|
60
|
+
| ✅ | \`master\` | \`chore: Release v7.3.0 [skip release]\` |
|
|
61
|
+
| ⛔️ | \`master\` | \`fix: Update Popup types\` |
|
|
62
|
+
| ✅ | \`prerelease/minor\` | \`feat: Add new Layout components\` |
|
|
63
|
+
`}
|
|
64
|
+
</Markdown>
|
|
58
65
|
|
|
59
66
|
If the forward merge workflow fails and cannot automatically merge the update to the next branch, it
|
|
60
67
|
will generate a PR with instructions on how to handle the forward merge manually. For a more
|
|
@@ -264,9 +271,9 @@ We use codemods to reduce friction for consumers as they make changes and do upg
|
|
|
264
271
|
accompany major version releases since v5, and can also be released in minor releases if users want
|
|
265
272
|
to apply some changes sooner.
|
|
266
273
|
|
|
267
|
-
> **Note: In v12, we have done some infrastructure updates with moving to Webpack 5 and Storybook 7.
|
|
268
|
-
these updates has come some formatting issues after running our codemods. We recommend
|
|
269
|
-
formatter to address the format issues that have been introduced in v12.**
|
|
274
|
+
> **Note: In v12, we have done some infrastructure updates with moving to Webpack 5 and Storybook 7.
|
|
275
|
+
> With these updates has come some formatting issues after running our codemods. We recommend
|
|
276
|
+
> running a formatter to address the format issues that have been introduced in v12.**
|
|
270
277
|
|
|
271
278
|
### Add a New Codemod
|
|
272
279
|
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
+
import {Markdown} from '@storybook/blocks';
|
|
2
|
+
|
|
1
3
|
import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
|
|
4
|
+
import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
|
|
2
5
|
import Basic from './examples/Basic';
|
|
3
6
|
import ContextMenu from './examples/ContextMenu';
|
|
4
7
|
import CustomMenuItem from './examples/CustomMenuItem';
|
|
@@ -47,15 +50,19 @@ closing the `DeprecatedMenu`.
|
|
|
47
50
|
using `aria-activedescendant`. Below is table of supported keyboard shortcuts and associated
|
|
48
51
|
actions.
|
|
49
52
|
|
|
53
|
+
<Markdown>
|
|
54
|
+
{`
|
|
50
55
|
| Key | Action |
|
|
51
56
|
| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
52
|
-
|
|
|
53
|
-
|
|
|
54
|
-
|
|
|
55
|
-
|
|
|
56
|
-
|
|
|
57
|
-
|
|
|
58
|
-
|
|
|
57
|
+
| \`Enter\` or \`Space\` | Activates the menu item and then closes the menu |
|
|
58
|
+
| \`Escape\` | Closes the menu |
|
|
59
|
+
| \`Up Arrow\` | Moves focus to the previous menu item – if focus is on first menu item, it moves focus to the last menu item |
|
|
60
|
+
| \`Down Arrow\` | Moves focus to the next menu item – if focus is on last menu item, it moves focus to the first menu item |
|
|
61
|
+
| \`Home\` | Moves focus to the first menu item |
|
|
62
|
+
| \`End\` | Moves focus to the last menu item |
|
|
63
|
+
| \`A-Z / a-z\` | Moves focus to the next menu item with a label that starts with the typed character if such an menu item exists – otherwise, focus does not move |
|
|
64
|
+
`}
|
|
65
|
+
</Markdown>
|
|
59
66
|
|
|
60
67
|
Note that although `DeprecatedMenu` includes support for keyboard shortcuts for the menu itself,
|
|
61
68
|
you'll need to add your own keyboard handling and aria attributes to the triggering button.
|
|
@@ -3,6 +3,7 @@ import Basic from './examples/Basic';
|
|
|
3
3
|
import Alert from './examples/Alert';
|
|
4
4
|
import Error from './examples/Error';
|
|
5
5
|
import Disabled from './examples/Disabled';
|
|
6
|
+
import HiddenLabel from './examples/HiddenLabel';
|
|
6
7
|
import LabelPositionHorizontalStart from './examples/LabelPositionHorizontalStart';
|
|
7
8
|
import LabelPositionHorizontalEnd from './examples/LabelPositionHorizontalEnd';
|
|
8
9
|
import RefForwarding from './examples/RefForwarding';
|
|
@@ -183,6 +184,13 @@ Form Field should allow you to use it with all `inputs` including `Select`, `Tex
|
|
|
183
184
|
|
|
184
185
|
<ExampleCodeBlock code={AllFields} />
|
|
185
186
|
|
|
187
|
+
### Hidden Label
|
|
188
|
+
|
|
189
|
+
In cases where you want to hide the label while still meeting accessibility standards, you can add
|
|
190
|
+
`isHidden` on the `<FormField.Label/>`. This prop will visually hide the label.
|
|
191
|
+
|
|
192
|
+
<ExampleCodeBlock code={HiddenLabel} />
|
|
193
|
+
|
|
186
194
|
### Themed Errors
|
|
187
195
|
|
|
188
196
|
You can theme your error rings by wrapping an input in a `CanvasProvider` and defining
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import {FormField} from '@workday/canvas-kit-react/form-field';
|
|
3
|
+
import {Flex} from '@workday/canvas-kit-react/layout';
|
|
4
|
+
import {TextInput, InputGroup} from '@workday/canvas-kit-react/text-input';
|
|
5
|
+
import {SystemIcon} from '@workday/canvas-kit-react/icon';
|
|
6
|
+
import {searchIcon} from '@workday/canvas-system-icons-web';
|
|
7
|
+
|
|
8
|
+
export default () => {
|
|
9
|
+
const [value, setValue] = React.useState('');
|
|
10
|
+
|
|
11
|
+
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
12
|
+
setValue(event.target.value);
|
|
13
|
+
};
|
|
14
|
+
|
|
15
|
+
return (
|
|
16
|
+
<Flex>
|
|
17
|
+
<FormField>
|
|
18
|
+
<FormField.Label isHidden>Search</FormField.Label>
|
|
19
|
+
<FormField.Field>
|
|
20
|
+
<FormField.Input as={InputGroup}>
|
|
21
|
+
<InputGroup.InnerStart pointerEvents="none">
|
|
22
|
+
<SystemIcon icon={searchIcon} size="small" />
|
|
23
|
+
</InputGroup.InnerStart>
|
|
24
|
+
<InputGroup.Input as={TextInput} onChange={handleChange} />
|
|
25
|
+
</FormField.Input>
|
|
26
|
+
</FormField.Field>
|
|
27
|
+
</FormField>
|
|
28
|
+
</Flex>
|
|
29
|
+
);
|
|
30
|
+
};
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import {Markdown} from '@storybook/blocks';
|
|
2
|
+
|
|
1
3
|
import {ExampleCodeBlock, SymbolDoc, Specifications} from '@workday/canvas-kit-docs';
|
|
2
4
|
import Basic from './examples/Basic';
|
|
3
5
|
import ContextMenu from './examples/ContextMenu';
|
|
@@ -32,14 +34,18 @@ model which composes a list model and a popup model and sets up accessibility fe
|
|
|
32
34
|
[Actions Menu pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-actions/)
|
|
33
35
|
using roving tabindex. Below is table of supported keyboard shortcuts and associated actions.
|
|
34
36
|
|
|
37
|
+
<Markdown>
|
|
38
|
+
{`
|
|
35
39
|
| Key | Action |
|
|
36
40
|
| ------------------ | ------------------------------------------------------------------------------------------------------------ |
|
|
37
|
-
|
|
|
38
|
-
|
|
|
39
|
-
|
|
|
40
|
-
|
|
|
41
|
-
|
|
|
42
|
-
|
|
|
41
|
+
| \`Enter\` or \`Space\` | Activates the menu item and then closes the menu |
|
|
42
|
+
| \`Escape\` | Closes the menu |
|
|
43
|
+
| \`Up Arrow\` | Moves focus to the previous menu item – if focus is on first menu item, it moves focus to the last menu item |
|
|
44
|
+
| \`Down Arrow\` | Moves focus to the next menu item – if focus is on last menu item, it moves focus to the first menu item |
|
|
45
|
+
| \`Home\` | Moves focus to the first menu item |
|
|
46
|
+
| \`End\` | Moves focus to the last menu item |
|
|
47
|
+
`}
|
|
48
|
+
</Markdown>
|
|
43
49
|
|
|
44
50
|
### Context Menu
|
|
45
51
|
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import {Markdown} from '@storybook/blocks';
|
|
2
|
+
|
|
1
3
|
import {ExampleCodeBlock, SymbolDoc} from '@workday/canvas-kit-docs';
|
|
2
4
|
import {StatusIndicator} from '@workday/canvas-kit-preview-react/status-indicator';
|
|
3
5
|
|
|
@@ -36,14 +38,18 @@ yarn add @workday/canvas-kit-react
|
|
|
36
38
|
Note that the `type` prop is required (there is no default value). `type` accepts the following
|
|
37
39
|
values:
|
|
38
40
|
|
|
41
|
+
<Markdown>
|
|
42
|
+
{`
|
|
39
43
|
| Type | Suggested Purpose |
|
|
40
44
|
| ---------------------------------- | ---------------------------------------------------------------------------------------------- |
|
|
41
|
-
|
|
|
42
|
-
|
|
|
43
|
-
|
|
|
44
|
-
|
|
|
45
|
-
|
|
|
46
|
-
|
|
|
45
|
+
| \`StatusIndicator.Type.Gray\` | Basic, general status. No action required. |
|
|
46
|
+
| \`StatusIndicator.Type.Orange\` | Signifies alerts, that a user must take action, or that something requires attention. |
|
|
47
|
+
| \`StatusIndicator.Type.Blue\` | Signifies an item in progress, an update, or a current status. |
|
|
48
|
+
| \`StatusIndicator.Type.Green\` | Signifies success, completion, or celebration. |
|
|
49
|
+
| \`StatusIndicator.Type.Red\` | Signifies an error or issue, or removal or destruction. |
|
|
50
|
+
| \`StatusIndicator.Type.Transparent\` | General status and related information intended for use on top of imagery, video, or graphics. |
|
|
51
|
+
`}
|
|
52
|
+
</Markdown>
|
|
47
53
|
|
|
48
54
|
### Emphasis
|
|
49
55
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "12.0.0-alpha.
|
|
3
|
+
"version": "12.0.0-alpha.909-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",
|
|
@@ -44,10 +44,10 @@
|
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@storybook/csf": "0.0.1",
|
|
47
|
-
"@workday/canvas-kit-labs-react": "^12.0.0-alpha.
|
|
48
|
-
"@workday/canvas-kit-preview-react": "^12.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-react": "^12.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-styling": "^12.0.0-alpha.
|
|
47
|
+
"@workday/canvas-kit-labs-react": "^12.0.0-alpha.909-next.0",
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^12.0.0-alpha.909-next.0",
|
|
49
|
+
"@workday/canvas-kit-react": "^12.0.0-alpha.909-next.0",
|
|
50
|
+
"@workday/canvas-kit-styling": "^12.0.0-alpha.909-next.0",
|
|
51
51
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
52
52
|
"@workday/canvas-tokens-web": "^2.0.1",
|
|
53
53
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"mkdirp": "^1.0.3",
|
|
61
61
|
"typescript": "4.9"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "d80aecc27041af28e191b709cff408b6d0bf7939"
|
|
64
64
|
}
|