@workday/canvas-kit-docs 16.0.0-alpha.0494-next.0 → 16.0.0-alpha.0499-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 +0 -28
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +1 -1
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +1 -1
- package/dist/mdx/16.0-UPGRADE-GUIDE.mdx +222 -165
- package/dist/mdx/icon-migration-codemod.mdx +193 -0
- package/dist/mdx/icon-migration.mdx +418 -0
- package/dist/mdx/react/segmented-control/SegmentedControl.mdx +9 -8
- package/dist/mdx/react/side-panel/SidePanel.mdx +3 -2
- package/dist/mdx/react/side-panel/examples/AlternativePanel.tsx +18 -0
- package/dist/mdx/react/side-panel/examples/{Variant.tsx → OverlayPanel.tsx} +0 -19
- package/lib/stackblitzFiles/packageJSONFile.ts +1 -1
- package/package.json +8 -8
package/dist/es6/lib/docs.js
CHANGED
|
@@ -477148,34 +477148,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
477148
477148
|
"tags": {
|
|
477149
477149
|
"default": "'accent'"
|
|
477150
477150
|
}
|
|
477151
|
-
},
|
|
477152
|
-
{
|
|
477153
|
-
"kind": "property",
|
|
477154
|
-
"name": "surfaceType",
|
|
477155
|
-
"required": false,
|
|
477156
|
-
"type": {
|
|
477157
|
-
"kind": "union",
|
|
477158
|
-
"value": [
|
|
477159
|
-
{
|
|
477160
|
-
"kind": "string",
|
|
477161
|
-
"value": "default"
|
|
477162
|
-
},
|
|
477163
|
-
{
|
|
477164
|
-
"kind": "string",
|
|
477165
|
-
"value": "inverse"
|
|
477166
|
-
}
|
|
477167
|
-
]
|
|
477168
|
-
},
|
|
477169
|
-
"description": "A string that will determine which surface overlay variant to use.",
|
|
477170
|
-
"declarations": [
|
|
477171
|
-
{
|
|
477172
|
-
"name": "surfaceType",
|
|
477173
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/colorSpace.tsx"
|
|
477174
|
-
}
|
|
477175
|
-
],
|
|
477176
|
-
"tags": {
|
|
477177
|
-
"default": "'default'"
|
|
477178
|
-
}
|
|
477179
477151
|
}
|
|
477180
477152
|
]
|
|
477181
477153
|
}
|
|
@@ -23,7 +23,7 @@ export const packageJSONFile = `{
|
|
|
23
23
|
"@workday/canvas-kit-react": "15.1.4",
|
|
24
24
|
"@workday/canvas-kit-react-fonts": "^15.1.4",
|
|
25
25
|
"@workday/canvas-kit-styling": "15.1.4",
|
|
26
|
-
"@workday/canvas-system-icons-web": "5.0.
|
|
26
|
+
"@workday/canvas-system-icons-web": "^5.0.3",
|
|
27
27
|
"@workday/canvas-expressive-icons-web": "1.0.1",
|
|
28
28
|
"@workday/canvas-tokens-web": "4.4.0-beta.11"
|
|
29
29
|
},
|
|
@@ -24,7 +24,7 @@ export const packageJSONFile = `{
|
|
|
24
24
|
"@workday/canvas-kit-react": "15.1.4",
|
|
25
25
|
"@workday/canvas-kit-react-fonts": "^15.1.4",
|
|
26
26
|
"@workday/canvas-kit-styling": "15.1.4",
|
|
27
|
-
"@workday/canvas-system-icons-web": "5.0.
|
|
27
|
+
"@workday/canvas-system-icons-web": "^5.0.3",
|
|
28
28
|
"@workday/canvas-expressive-icons-web": "1.0.1",
|
|
29
29
|
"@workday/canvas-tokens-web": "4.4.0-beta.11"
|
|
30
30
|
},
|
|
@@ -12,18 +12,22 @@ Soon to be...
|
|
|
12
12
|
|
|
13
13
|
- [Codemod](#codemod)
|
|
14
14
|
- [Instructions](#instructions)
|
|
15
|
+
- [Codemod Transformations for Icons](#codemod-transformations-for-icons)
|
|
15
16
|
- [New Components](#new-components)
|
|
16
17
|
- [KBD](#kbd)
|
|
17
18
|
- [Tabs](#tabs)
|
|
18
19
|
- [Component Updates](#component-updates)
|
|
19
20
|
- [Action Bar](#action-bar)
|
|
20
|
-
- [Avatar](#avatar)
|
|
21
21
|
- [Buttons](#buttons)
|
|
22
22
|
- [Delete Button Outline Variant](#delete-button-outline-variant)
|
|
23
|
+
- [Secondary Button](#secondary-button)
|
|
23
24
|
- [Container Components](#container-components)
|
|
24
25
|
- [Card](#card)
|
|
25
26
|
- [Expandable](#expandable)
|
|
27
|
+
- [Side Panel](#side-panel)
|
|
28
|
+
- [Table](#table)
|
|
26
29
|
- [Indicators](#indicators)
|
|
30
|
+
- [Avatar](#avatar)
|
|
27
31
|
- [Banner](#banner)
|
|
28
32
|
- [Count Badge](#count-badge)
|
|
29
33
|
- [Information Highlight](#information-highlight)
|
|
@@ -42,18 +46,17 @@ Soon to be...
|
|
|
42
46
|
- [Text Input](#text-input)
|
|
43
47
|
- [Select](#select)
|
|
44
48
|
- [MultiSelect](#multiselect)
|
|
45
|
-
- [
|
|
46
|
-
|
|
49
|
+
- [Popups](#popups)
|
|
50
|
+
- [Menu](#menu)
|
|
51
|
+
- [Modal](#modal)
|
|
52
|
+
- [Popup](#popup)
|
|
53
|
+
- [Toast](#toast)
|
|
54
|
+
- [Tooltip](#tooltip)
|
|
47
55
|
- [Navigation Components](#navigation-components)
|
|
48
56
|
- [Hyperlink](#hyperlink)
|
|
49
57
|
- [Breadcrumbs](#breadcrumbs)
|
|
50
58
|
- [Pagination](#pagination)
|
|
51
|
-
- [Popup](#popup)
|
|
52
59
|
- [Segmented Control](#segmented-control)
|
|
53
|
-
- [Side Panel](#side-panel)
|
|
54
|
-
- [Table](#table)
|
|
55
|
-
- [Toast](#toast)
|
|
56
|
-
- [Tooltip](#tooltip)
|
|
57
60
|
- [New Utilities](#new-utilities)
|
|
58
61
|
- [cornerShapeStencil](#cornershapestencil)
|
|
59
62
|
- [Fonts](#fonts)
|
|
@@ -123,6 +126,60 @@ yarn remove @workday/canvas-kit-codemod
|
|
|
123
126
|
> after executing the codemod, as its resulting formatting (spacing, quotes, etc.) may not match
|
|
124
127
|
> your project conventions.
|
|
125
128
|
|
|
129
|
+
## Codemod Transformations for v16
|
|
130
|
+
|
|
131
|
+
The following automated transformations are available for upgrading to v16:
|
|
132
|
+
|
|
133
|
+
- **Update Hyperlink Props**: updateHyperlinkProps
|
|
134
|
+
|
|
135
|
+
Run the codemod with: `npx @workday/canvas-kit-codemod v16 [path]`
|
|
136
|
+
|
|
137
|
+
### Codemod Transformations for Icons
|
|
138
|
+
|
|
139
|
+
#### Icon Migration Codemod
|
|
140
|
+
|
|
141
|
+
For v16, there is a **separate codemod** called `icon-migration` that updates
|
|
142
|
+
`@workday/canvas-system-icons-web` usage across your codebase. Upgrade the icon package to v5 before
|
|
143
|
+
you run it so deprecation and fallback mappings match what the transform expects.
|
|
144
|
+
|
|
145
|
+
```sh
|
|
146
|
+
yarn add @workday/canvas-system-icons-web@^5
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
The codemod reads `system.deprecated.metadata.json` from the installed icon package and rewrites
|
|
150
|
+
each deprecated export to its fallback icon. This codemod will:
|
|
151
|
+
|
|
152
|
+
- Update **named imports** and their references (for example, `uploadIcon` to `arrowUpToLineIcon`).
|
|
153
|
+
- Preserve **import aliases** and point them at the fallback export.
|
|
154
|
+
- Update **namespace imports** member access (for example, `systemIcons.uploadIcon` to
|
|
155
|
+
`systemIcons.arrowUpToLineIcon`).
|
|
156
|
+
- Resolve **chained fallbacks** when a fallback icon is itself deprecated.
|
|
157
|
+
- Remove **duplicate imports** when the fallback is already imported in the same declaration.
|
|
158
|
+
|
|
159
|
+
Because it applies every mapping in the metadata file, a single run covers both the v4 naming
|
|
160
|
+
convention migrations and the v5 Sana Canvas Assets renames and deprecations. Icons that are not
|
|
161
|
+
deprecated are left unchanged.
|
|
162
|
+
|
|
163
|
+
To run the codemod:
|
|
164
|
+
|
|
165
|
+
```sh
|
|
166
|
+
npx @workday/canvas-kit-codemod icon-migration [path]
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
> **Tip:** Provide the specific directory or directories you want to update as `[path]` to speed up
|
|
170
|
+
> migration.
|
|
171
|
+
>
|
|
172
|
+
> This codemod only touches `@workday/canvas-system-icons-web`. For accent, applet, and expressive
|
|
173
|
+
> icons, use the `v15-icons` transform covered in the
|
|
174
|
+
> [v15 upgrade guide](/docs/guides-upgrade-guides-v15-0-overview--docs#codemod-transformations-for-icons).
|
|
175
|
+
> For details on what changed in v5 and the full list of deprecated icons, see the
|
|
176
|
+
> [Sana Canvas Assets overview](/docs/guides-icon-migration-sana-canvas-assets-overview--docs) and
|
|
177
|
+
> the [Icon Migration codemod guide](/docs/guides-icon-migration-codemod--docs).
|
|
178
|
+
|
|
179
|
+
> **Note:** 🤖 The `icon-migration` codemod automates the majority of system icon migration work,
|
|
180
|
+
> but _always_ review the PR for any remaining icons the codemod could not address, especially
|
|
181
|
+
> dynamic icon selection, non-code assets, and heavily customized usages.
|
|
182
|
+
|
|
126
183
|
## New Components
|
|
127
184
|
|
|
128
185
|
### KBD
|
|
@@ -187,39 +244,6 @@ import {Tabs} from '@workday/canvas-kit-preview-react/tabs';
|
|
|
187
244
|
|
|
188
245
|
- `ActionBar` padding has been updated to `padding.md` (16px).
|
|
189
246
|
|
|
190
|
-
### Avatar
|
|
191
|
-
|
|
192
|
-
**PR:** [#3981](https://github.com/Workday/canvas-kit/pull/3981)
|
|
193
|
-
|
|
194
|
-
We've updated `Avatar` color variants to align with Sana Canvas. These changes are **only visual** —
|
|
195
|
-
the component API is unchanged except for two new `variant` options.
|
|
196
|
-
|
|
197
|
-
#### Updated Variants
|
|
198
|
-
|
|
199
|
-
Existing variants use darker background colors and updated foreground colors for improved contrast:
|
|
200
|
-
|
|
201
|
-
| Variant | Change |
|
|
202
|
-
| -------- | -------------------------------------------------------------------------------------------- |
|
|
203
|
-
| `blue` | Background updated from `blue300` to `blue600`; text now uses `system.color.fg.inverse` |
|
|
204
|
-
| `amber` | Background updated from `amber200` to `amber300`; text updated from `amber700` to `amber800` |
|
|
205
|
-
| `purple` | Background updated from `purple300` to `purple600`; text now uses `system.color.fg.inverse` |
|
|
206
|
-
|
|
207
|
-
The `teal` variant is unchanged.
|
|
208
|
-
|
|
209
|
-
#### New Variants
|
|
210
|
-
|
|
211
|
-
Two new color variants are available:
|
|
212
|
-
|
|
213
|
-
- `magenta` — `magenta600` background with `system.color.fg.inverse` text
|
|
214
|
-
- `green` — `green600` background with `system.color.fg.inverse` text
|
|
215
|
-
|
|
216
|
-
```tsx
|
|
217
|
-
import {Avatar} from '@workday/canvas-kit-react/avatar';
|
|
218
|
-
|
|
219
|
-
<Avatar name="Mary Jane" variant="magenta" />
|
|
220
|
-
<Avatar name="Green Arrow" variant="green" />
|
|
221
|
-
```
|
|
222
|
-
|
|
223
247
|
### Buttons
|
|
224
248
|
|
|
225
249
|
**PR:** [#4000](https://github.com/Workday/canvas-kit/pull/4000)
|
|
@@ -256,6 +280,11 @@ import {DeleteButton} from '@workday/canvas-kit-react/button';
|
|
|
256
280
|
<DeleteButton variant="outline">Delete</DeleteButton>;
|
|
257
281
|
```
|
|
258
282
|
|
|
283
|
+
#### Secondary Button
|
|
284
|
+
|
|
285
|
+
`SecondaryButton` now has a `transparent` `backgroundColor` and will not show on interactive states.
|
|
286
|
+
The interactive states will now show on the `border`.
|
|
287
|
+
|
|
259
288
|
### Container Components
|
|
260
289
|
|
|
261
290
|
**PR:** [#4088](https://github.com/Workday/canvas-kit/pull/4088)
|
|
@@ -346,8 +375,112 @@ instead. While the styles are different, both where intended to be used on an `a
|
|
|
346
375
|
- `Expandable.Content` padding is now uniform `padding.xs` (8px) on all sides (previously
|
|
347
376
|
`padding.md` top / `padding.xs` sides and bottom).
|
|
348
377
|
|
|
378
|
+
#### Side Panel
|
|
379
|
+
|
|
380
|
+
**PR:** [#4107](https://github.com/Workday/canvas-kit/pull/4107)
|
|
381
|
+
|
|
382
|
+
##### Breaking Changes
|
|
383
|
+
|
|
384
|
+
The `variant` prop on `SidePanel` no longer accepts `alternate`. It has been renamed to `overlay` to
|
|
385
|
+
describe what the variant is for — a panel that floats above page content — because a second
|
|
386
|
+
non-overlay variant now occupies the "alternative surface" role.
|
|
387
|
+
|
|
388
|
+
```tsx
|
|
389
|
+
import {SidePanel} from '@workday/canvas-kit-react/side-panel';
|
|
390
|
+
|
|
391
|
+
// Before
|
|
392
|
+
<SidePanel variant="alternate">{/* ... */}</SidePanel>
|
|
393
|
+
|
|
394
|
+
// After
|
|
395
|
+
<SidePanel variant="overlay">{/* ... */}</SidePanel>
|
|
396
|
+
```
|
|
397
|
+
|
|
398
|
+
> 🤖 The `v16` codemod will rename `variant="alternate"` to `variant="overlay"` as shown above. It
|
|
399
|
+
> only transforms `SidePanel` imported from `@workday/canvas-kit-react`; the deprecated `SidePanel`
|
|
400
|
+
> in `@workday/canvas-kit-preview-react` is left alone.
|
|
401
|
+
|
|
402
|
+
If you were using `alternate` for a panel that sits inline with page content rather than over it,
|
|
403
|
+
switch to the new `alternative` variant instead of `overlay` to avoid picking up the elevation
|
|
404
|
+
shadow.
|
|
405
|
+
|
|
406
|
+
##### New API
|
|
407
|
+
|
|
408
|
+
- `variant="alternative"` — uses a raised surface (`system.legacy.color.surface.raised`) with no
|
|
409
|
+
depth. Use it for panels that need to stand out from the page background while remaining part of
|
|
410
|
+
the page layout.
|
|
411
|
+
|
|
412
|
+
The full set of variants is now:
|
|
413
|
+
|
|
414
|
+
| Variant | Surface | Depth |
|
|
415
|
+
| ------------- | ---------------------------------------- | ----- |
|
|
416
|
+
| `standard` | `system.legacy.color.surface.navigation` | None |
|
|
417
|
+
| `alternative` | `system.legacy.color.surface.raised` | None |
|
|
418
|
+
| `overlay` | `system.legacy.color.surface.default` | 6 |
|
|
419
|
+
|
|
420
|
+
##### Visual Updates
|
|
421
|
+
|
|
422
|
+
- The `overlay` variant's box-shadow updated from `system.depth[3]` to `system.depth[6]`.
|
|
423
|
+
- `SidePanel.ToggleButton`'s default icon changed from `extendIcon` to `sidebarLeftIcon`. The icon
|
|
424
|
+
no longer rotates as the panel expands and collapses: it keeps a single orientation in LTR and is
|
|
425
|
+
mirrored horizontally in RTL.
|
|
426
|
+
- `SidePanel.ToggleButton`'s width changed from `gap.lg` (24px) to `size.md` (40px), and its top
|
|
427
|
+
offset changed from `gap.lg` (24px) to `12px`.
|
|
428
|
+
- `SidePanel.Heading` padding changed from a symmetric `padding.xs` (8px) to `padding.sm` (12px)
|
|
429
|
+
with a `paddingInlineStart` of `padding.md` (16px), and it now has a `minHeight` of `size.xxl`
|
|
430
|
+
(64px) so the heading lines up with the toggle button and the collapsed panel width.
|
|
431
|
+
- `SidePanel.Heading` now lays out its children with flexbox and centers them vertically, so an icon
|
|
432
|
+
passed alongside the heading text aligns without extra styling.
|
|
433
|
+
|
|
434
|
+
#### Table
|
|
435
|
+
|
|
436
|
+
##### Visual Updates
|
|
437
|
+
|
|
438
|
+
- `BaseTable` / `Table` outer border color updated from `system.legacy.color.border.strong` to
|
|
439
|
+
`system.legacy.color.border.default`.
|
|
440
|
+
- `Table.Caption` divider (`borderBlockEnd`) updated from `system.legacy.color.border.strong` to
|
|
441
|
+
`system.legacy.color.border.default`.
|
|
442
|
+
- Container corner radius is now **12px** (`shape.lg`, previously `shape.md` / 8px), managed via
|
|
443
|
+
`cornerShapeStencil` (see [New Utilities](#new-utilities)).
|
|
444
|
+
- `Table.Header` (and `BaseTable.Header`) cell padding is now uniform `padding.md` (16px) on all
|
|
445
|
+
sides (previously asymmetric `padding.xs` vertically and `padding.md` horizontally).
|
|
446
|
+
- Column header label text color is now `system.color.fg.strong` (previously inherited `fg.default`
|
|
447
|
+
from the table container).
|
|
448
|
+
|
|
349
449
|
### Indicators
|
|
350
450
|
|
|
451
|
+
#### Avatar
|
|
452
|
+
|
|
453
|
+
**PR:** [#3981](https://github.com/Workday/canvas-kit/pull/3981)
|
|
454
|
+
|
|
455
|
+
We've updated `Avatar` color variants to align with Sana Canvas. These changes are **only visual** —
|
|
456
|
+
the component API is unchanged except for two new `variant` options.
|
|
457
|
+
|
|
458
|
+
##### Updated Variants
|
|
459
|
+
|
|
460
|
+
Existing variants use darker background colors and updated foreground colors for improved contrast:
|
|
461
|
+
|
|
462
|
+
| Variant | Change |
|
|
463
|
+
| -------- | -------------------------------------------------------------------------------------------- |
|
|
464
|
+
| `blue` | Background updated from `blue300` to `blue600`; text now uses `system.color.fg.inverse` |
|
|
465
|
+
| `amber` | Background updated from `amber200` to `amber300`; text updated from `amber700` to `amber800` |
|
|
466
|
+
| `purple` | Background updated from `purple300` to `purple600`; text now uses `system.color.fg.inverse` |
|
|
467
|
+
|
|
468
|
+
The `teal` variant is unchanged.
|
|
469
|
+
|
|
470
|
+
##### New Variants
|
|
471
|
+
|
|
472
|
+
Two new color variants are available:
|
|
473
|
+
|
|
474
|
+
- `magenta` — `magenta600` background with `system.color.fg.inverse` text
|
|
475
|
+
- `green` — `green600` background with `system.color.fg.inverse` text
|
|
476
|
+
|
|
477
|
+
```tsx
|
|
478
|
+
import {Avatar} from '@workday/canvas-kit-react/avatar';
|
|
479
|
+
|
|
480
|
+
<Avatar name="Mary Jane" variant="magenta" />
|
|
481
|
+
<Avatar name="Green Arrow" variant="green" />
|
|
482
|
+
```
|
|
483
|
+
|
|
351
484
|
#### Banner
|
|
352
485
|
|
|
353
486
|
**PR:** [#4087](https://github.com/Workday/canvas-kit/pull/4087)
|
|
@@ -631,11 +764,13 @@ No API changes. No migration is required unless you render a custom dropdown ind
|
|
|
631
764
|
No API changes. No migration is required unless you render a custom dropdown indicator or override
|
|
632
765
|
`multiSelectInputStencil` styles.
|
|
633
766
|
|
|
634
|
-
###
|
|
767
|
+
### Popups
|
|
768
|
+
|
|
769
|
+
#### Menu
|
|
635
770
|
|
|
636
771
|
**PR:** [#3987](https://github.com/Workday/canvas-kit/pull/3987)
|
|
637
772
|
|
|
638
|
-
|
|
773
|
+
##### Visual Updates
|
|
639
774
|
|
|
640
775
|
**Menu.Card**
|
|
641
776
|
|
|
@@ -661,7 +796,7 @@ No API changes. No migration is required unless you render a custom dropdown ind
|
|
|
661
796
|
- Text color updated from `system.color.fg.default` to `system.color.fg.strong`.
|
|
662
797
|
- Icon size updated to `md` (20px / 1.25rem).
|
|
663
798
|
|
|
664
|
-
|
|
799
|
+
##### Menu icon sizing
|
|
665
800
|
|
|
666
801
|
Menu icons are now smaller to align with Sana Canvas specs. In v15, `Menu.Item.Icon` did not set a
|
|
667
802
|
`size` prop and fell back to the `SystemIcon` default of `lg` (24px / 1.5rem). In v16, all icons
|
|
@@ -680,14 +815,14 @@ custom chevron or checkmark icons inside of menu items, update them to `size="md
|
|
|
680
815
|
|
|
681
816
|
- Padding updated to use `paddingBlock: padding.xs` with `paddingInline: padding.sm` / `padding.md`.
|
|
682
817
|
|
|
683
|
-
|
|
818
|
+
##### State Style Updates
|
|
684
819
|
|
|
685
820
|
`Menu.Item` and `Menu.Option` share the same underlying item styles via `menuItemStencil`. For
|
|
686
821
|
guidance on when to use `Menu.Item` vs `Menu.Option`, including accessibility requirements for
|
|
687
822
|
selectable menus, see the
|
|
688
823
|
[Menu accessibility documentation](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--docs#accessibility).
|
|
689
824
|
|
|
690
|
-
|
|
825
|
+
###### Menu.Item
|
|
691
826
|
|
|
692
827
|
| State | v15 | v16 |
|
|
693
828
|
| ----------------------------------------- | ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- |
|
|
@@ -696,7 +831,7 @@ selectable menus, see the
|
|
|
696
831
|
| Disabled + Focus (`aria-disabled="true"`) | Solid blue fill and white text with disabled opacity (dims focus style) | Light blue background and blue text (`brand.surface.selected` / `brand.fg.selected`) with disabled opacity (dims focus indicator) |
|
|
697
832
|
| Expanded submenu parent + Focus | Same blue fill and white text focus style as other focused items | Focus ring removed; ancestor-trail styling shown instead (`Submenu.TargetItem`) |
|
|
698
833
|
|
|
699
|
-
|
|
834
|
+
###### Menu.Option
|
|
700
835
|
|
|
701
836
|
Used in `Select`, `Combobox`, and other listbox menus. Selected states apply when
|
|
702
837
|
`aria-selected="true"`.
|
|
@@ -710,12 +845,50 @@ Used in `Select`, `Combobox`, and other listbox menus. Selected states apply whe
|
|
|
710
845
|
| Disabled + Focus (`aria-disabled="true"`) | Solid blue fill and white text with disabled opacity (dims focus style) | Light blue background and blue text (`brand.surface.selected` / `brand.fg.selected`) with disabled opacity (dims focus indicator) |
|
|
711
846
|
| Disabled + Selected | Solid blue fill and white text with disabled opacity | Light blue background and blue text (`brand.surface.selected` / `brand.fg.selected`) with disabled opacity |
|
|
712
847
|
|
|
713
|
-
|
|
848
|
+
#### Modal
|
|
714
849
|
|
|
715
|
-
|
|
850
|
+
##### Visual Updates
|
|
716
851
|
|
|
717
852
|
- `Modal.Card` box-shadow updated from `system.depth[5]` to `system.depth[6]`.
|
|
718
853
|
|
|
854
|
+
#### Popup
|
|
855
|
+
|
|
856
|
+
##### Visual Updates
|
|
857
|
+
|
|
858
|
+
- `Popup.Card` box-shadow updated from `system.depth[3]` to `system.depth[4]`.
|
|
859
|
+
|
|
860
|
+
#### Toast
|
|
861
|
+
|
|
862
|
+
**PR:** [#4053](https://github.com/Workday/canvas-kit/pull/4053)
|
|
863
|
+
|
|
864
|
+
##### Visual Updates
|
|
865
|
+
|
|
866
|
+
- Padding is now applied to the `Toast` container itself instead of being distributed across
|
|
867
|
+
`Toast.Body` and `Toast.Icon`.
|
|
868
|
+
- Gap between the icon, body, and close icon is now `base.size150` (12px).
|
|
869
|
+
- Shape uses `system.shape.xl`.
|
|
870
|
+
- Box-shadow updated from `system.depth[3]` to `system.depth[5]`.
|
|
871
|
+
- `Toast.Body` no longer has a gap between text and link.
|
|
872
|
+
- `Toast.CloseIcon` is set to have absolute positioning and aligned with the top-right corner (in
|
|
873
|
+
LTR).
|
|
874
|
+
- `Toast.CloseIcon` was changed to be `extraSmall` tertiary button.
|
|
875
|
+
|
|
876
|
+
#### Tooltip
|
|
877
|
+
|
|
878
|
+
**PR:** [#4053](https://github.com/Workday/canvas-kit/pull/4053)
|
|
879
|
+
|
|
880
|
+
##### Visual Updates
|
|
881
|
+
|
|
882
|
+
- The default tooltip has been restyled from a dark surface to a light surface.
|
|
883
|
+
- A visible border (`system.color.border.default`) is now applied to the container, replacing the
|
|
884
|
+
previous transparent outline.
|
|
885
|
+
- Tooltip boundaries remain visible in Windows High Contrast mode: when High Contrast is detected,
|
|
886
|
+
Tooltip uses a solid outline (`outline: solid 1px CanvasText`) to ensure clear visibility.
|
|
887
|
+
- Shape is now fully rounded using `system.shape.full`.
|
|
888
|
+
- Box-shadow updated from `system.depth[2]` to `system.depth[3]`.
|
|
889
|
+
- Type level is now `subtext.lg` (previously `subtext.md`).
|
|
890
|
+
- Padding and spacing have been adjusted to accommodate the new styling.
|
|
891
|
+
|
|
719
892
|
### Navigation Components
|
|
720
893
|
|
|
721
894
|
#### Hyperlink
|
|
@@ -796,12 +969,6 @@ Run the Canvas Kit v16 codemod (`updateHyperlinkProps`) to migrate automatically
|
|
|
796
969
|
TextInput `shape.lg` (12px).
|
|
797
970
|
- GoToForm spacing uses `marginInlineStart: gap.xs` alongside Controls `gap.xs`.
|
|
798
971
|
|
|
799
|
-
### Popup
|
|
800
|
-
|
|
801
|
-
#### Visual Updates
|
|
802
|
-
|
|
803
|
-
- `Popup.Card` box-shadow updated from `system.depth[3]` to `system.depth[4]`.
|
|
804
|
-
|
|
805
972
|
### Segmented Control
|
|
806
973
|
|
|
807
974
|
**PR:** [#4048](https://github.com/Workday/canvas-kit/pull/4048)
|
|
@@ -822,109 +989,6 @@ Run the Canvas Kit v16 codemod (`updateHyperlinkProps`) to migrate automatically
|
|
|
822
989
|
- Container padding changed to `padding.md` (16px) including for mobile devices.
|
|
823
990
|
- On mobile devices, the container padding remains `padding.md` (16px).
|
|
824
991
|
|
|
825
|
-
### Side Panel
|
|
826
|
-
|
|
827
|
-
**PR:** [#4107](https://github.com/Workday/canvas-kit/pull/4107)
|
|
828
|
-
|
|
829
|
-
#### Breaking Changes
|
|
830
|
-
|
|
831
|
-
The `variant` prop on `SidePanel` no longer accepts `alternate`. It has been renamed to `overlay` to
|
|
832
|
-
describe what the variant is for — a panel that floats above page content — because a second
|
|
833
|
-
non-overlay variant now occupies the "alternative surface" role.
|
|
834
|
-
|
|
835
|
-
```tsx
|
|
836
|
-
import {SidePanel} from '@workday/canvas-kit-react/side-panel';
|
|
837
|
-
|
|
838
|
-
// Before
|
|
839
|
-
<SidePanel variant="alternate">{/* ... */}</SidePanel>
|
|
840
|
-
|
|
841
|
-
// After
|
|
842
|
-
<SidePanel variant="overlay">{/* ... */}</SidePanel>
|
|
843
|
-
```
|
|
844
|
-
|
|
845
|
-
> 🤖 The `v16` codemod will rename `variant="alternate"` to `variant="overlay"` as shown above. It
|
|
846
|
-
> only transforms `SidePanel` imported from `@workday/canvas-kit-react`; the deprecated `SidePanel`
|
|
847
|
-
> in `@workday/canvas-kit-preview-react` is left alone.
|
|
848
|
-
|
|
849
|
-
If you were using `alternate` for a panel that sits inline with page content rather than over it,
|
|
850
|
-
switch to the new `alternative` variant instead of `overlay` to avoid picking up the elevation
|
|
851
|
-
shadow.
|
|
852
|
-
|
|
853
|
-
#### New API
|
|
854
|
-
|
|
855
|
-
- `variant="alternative"` — uses a raised surface (`system.legacy.color.surface.raised`) with no
|
|
856
|
-
depth. Use it for panels that need to stand out from the page background while remaining part of
|
|
857
|
-
the page layout.
|
|
858
|
-
|
|
859
|
-
The full set of variants is now:
|
|
860
|
-
|
|
861
|
-
| Variant | Surface | Depth |
|
|
862
|
-
| ------------- | ---------------------------------------- | ----- |
|
|
863
|
-
| `standard` | `system.legacy.color.surface.navigation` | None |
|
|
864
|
-
| `alternative` | `system.legacy.color.surface.raised` | None |
|
|
865
|
-
| `overlay` | `system.legacy.color.surface.default` | 6 |
|
|
866
|
-
|
|
867
|
-
#### Visual Updates
|
|
868
|
-
|
|
869
|
-
- The `overlay` variant's box-shadow updated from `system.depth[3]` to `system.depth[6]`.
|
|
870
|
-
- `SidePanel.ToggleButton`'s default icon changed from `extendIcon` to `sidebarLeftIcon`. The icon
|
|
871
|
-
no longer rotates as the panel expands and collapses: it keeps a single orientation in LTR and is
|
|
872
|
-
mirrored horizontally in RTL.
|
|
873
|
-
- `SidePanel.ToggleButton`'s width changed from `gap.lg` (24px) to `size.md` (40px), and its top
|
|
874
|
-
offset changed from `gap.lg` (24px) to `12px`.
|
|
875
|
-
- `SidePanel.Heading` padding changed from a symmetric `padding.xs` (8px) to `padding.sm` (12px)
|
|
876
|
-
with a `paddingInlineStart` of `padding.md` (16px), and it now has a `minHeight` of `size.xxl`
|
|
877
|
-
(64px) so the heading lines up with the toggle button and the collapsed panel width.
|
|
878
|
-
- `SidePanel.Heading` now lays out its children with flexbox and centers them vertically, so an icon
|
|
879
|
-
passed alongside the heading text aligns without extra styling.
|
|
880
|
-
|
|
881
|
-
### Table
|
|
882
|
-
|
|
883
|
-
#### Visual Updates
|
|
884
|
-
|
|
885
|
-
- `BaseTable` / `Table` outer border color updated from `system.legacy.color.border.strong` to
|
|
886
|
-
`system.legacy.color.border.default`.
|
|
887
|
-
- `Table.Caption` divider (`borderBlockEnd`) updated from `system.legacy.color.border.strong` to
|
|
888
|
-
`system.legacy.color.border.default`.
|
|
889
|
-
- Container corner radius is now **12px** (`shape.lg`, previously `shape.md` / 8px), managed via
|
|
890
|
-
`cornerShapeStencil` (see [New Utilities](#new-utilities)).
|
|
891
|
-
- `Table.Header` (and `BaseTable.Header`) cell padding is now uniform `padding.md` (16px) on all
|
|
892
|
-
sides (previously asymmetric `padding.xs` vertically and `padding.md` horizontally).
|
|
893
|
-
- Column header label text color is now `system.color.fg.strong` (previously inherited `fg.default`
|
|
894
|
-
from the table container).
|
|
895
|
-
|
|
896
|
-
### Toast
|
|
897
|
-
|
|
898
|
-
**PR:** [#4053](https://github.com/Workday/canvas-kit/pull/4053)
|
|
899
|
-
|
|
900
|
-
#### Visual Updates
|
|
901
|
-
|
|
902
|
-
- Padding is now applied to the `Toast` container itself instead of being distributed across
|
|
903
|
-
`Toast.Body` and `Toast.Icon`.
|
|
904
|
-
- Gap between the icon, body, and close icon is now `base.size150` (12px).
|
|
905
|
-
- Shape uses `system.shape.xl`.
|
|
906
|
-
- Box-shadow updated from `system.depth[3]` to `system.depth[5]`.
|
|
907
|
-
- `Toast.Body` no longer has a gap between text and link.
|
|
908
|
-
- `Toast.CloseIcon` is set to have absolute positioning and aligned with the top-right corner (in
|
|
909
|
-
LTR).
|
|
910
|
-
- `Toast.CloseIcon` was changed to be `extraSmall` tertiary button.
|
|
911
|
-
|
|
912
|
-
### Tooltip
|
|
913
|
-
|
|
914
|
-
**PR:** [#4053](https://github.com/Workday/canvas-kit/pull/4053)
|
|
915
|
-
|
|
916
|
-
#### Visual Updates
|
|
917
|
-
|
|
918
|
-
- The default tooltip has been restyled from a dark surface to a light surface.
|
|
919
|
-
- A visible border (`system.color.border.default`) is now applied to the container, replacing the
|
|
920
|
-
previous transparent outline.
|
|
921
|
-
- Tooltip boundaries remain visible in Windows High Contrast mode: when High Contrast is detected,
|
|
922
|
-
Tooltip uses a solid outline (`outline: solid 1px CanvasText`) to ensure clear visibility.
|
|
923
|
-
- Shape is now fully rounded using `system.shape.full`.
|
|
924
|
-
- Box-shadow updated from `system.depth[2]` to `system.depth[3]`.
|
|
925
|
-
- Type level is now `subtext.lg` (previously `subtext.md`).
|
|
926
|
-
- Padding and spacing have been adjusted to accommodate the new styling.
|
|
927
|
-
|
|
928
992
|
## New Utilities
|
|
929
993
|
|
|
930
994
|
### cornerShapeStencil
|
|
@@ -954,13 +1018,6 @@ export const myStencil = createStencil({
|
|
|
954
1018
|
`Card`, `Expandable` (`Expandable.Target`), `Menu` (`Menu.Card`, `Menu.List`, `Menu.Item`),
|
|
955
1019
|
`MultiSelect`, and `Table` (`BaseTable`, `Table`) extend this stencil for their rounded corners.
|
|
956
1020
|
|
|
957
|
-
## Fonts
|
|
958
|
-
|
|
959
|
-
Sana Canvas is a new theme available in v16, enabled by setting `data-theme="sana-canvas"` on
|
|
960
|
-
`<html>` (or a scoped ancestor element). See our
|
|
961
|
-
[Fonts guide](https://workday.github.io/canvas-kit/?path=/docs/guides-fonts--docs) for instructions
|
|
962
|
-
on setting up the Sana Sans font required by this theme.
|
|
963
|
-
|
|
964
1021
|
## Deprecations
|
|
965
1022
|
|
|
966
1023
|
We add the [@deprecated](https://jsdoc.app/tags-deprecated.html) JSDoc tag to code we plan to remove
|