@workday/canvas-kit-docs 16.0.0-alpha.0459-next.0 → 16.0.0-alpha.0461-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.
|
@@ -28,6 +28,7 @@ Soon to be...
|
|
|
28
28
|
- [Switch](#switch)
|
|
29
29
|
- [Text Area](#text-area)
|
|
30
30
|
- [Text Input](#text-input)
|
|
31
|
+
- [Menu](#menu)
|
|
31
32
|
- [New Utilities](#new-utilities)
|
|
32
33
|
- [cornerShapeStencil](#cornershapestencil)
|
|
33
34
|
- [Deprecations](#deprecations)
|
|
@@ -330,6 +331,79 @@ If you customize `brand.success.base` in your theme, please verify the following
|
|
|
330
331
|
- Error and caution states no longer display a status background color; only the standard background
|
|
331
332
|
is shown.
|
|
332
333
|
|
|
334
|
+
### Menu
|
|
335
|
+
|
|
336
|
+
**PR:** [#3987](https://github.com/Workday/canvas-kit/pull/3987)
|
|
337
|
+
|
|
338
|
+
#### Visual Updates
|
|
339
|
+
|
|
340
|
+
**Menu.Card**
|
|
341
|
+
|
|
342
|
+
- Text color updated from `system.color.fg.default` to `system.color.fg.strong`.
|
|
343
|
+
- Padding updated from `padding.xxs` (4px) to `padding.xs` (8px).
|
|
344
|
+
- Border radius is now managed via `cornerShapeStencil` (still uses `shape.xxl`).
|
|
345
|
+
|
|
346
|
+
**Menu.List**
|
|
347
|
+
|
|
348
|
+
- Gap between items updated from `gap.xs` (4px) to `base.legacy.size25` (2px).
|
|
349
|
+
|
|
350
|
+
**Menu.Item**
|
|
351
|
+
|
|
352
|
+
- Icon-to-label gap updated from `gap.md` (16px) to `gap.sm` (8px).
|
|
353
|
+
- Padding updated from symmetric `padding.sm`/`padding.md` (12px/16px) to asymmetric
|
|
354
|
+
`padding.xs`/`padding.xs`/`padding.xs`/`padding.sm` (8px top/right/bottom, 12px left).
|
|
355
|
+
- Item border radius updated from `shape.xxl` (24px) to `shape.lg` (12px).
|
|
356
|
+
- Text color updated from `system.color.fg.default` to `system.color.fg.strong`.
|
|
357
|
+
|
|
358
|
+
#### Menu icon sizing
|
|
359
|
+
|
|
360
|
+
Menu icons are now smaller to align with Sana Canvas specs. In v15, `Menu.Item.Icon` did not set a
|
|
361
|
+
`size` prop and fell back to the `SystemIcon` default of `lg` (24px / 1.5rem). In v16, all icons
|
|
362
|
+
rendered through `Menu.Item.Icon` and `Menu.Option.Icon` use `size="xs"` (16px / 1rem).
|
|
363
|
+
|
|
364
|
+
The selected checkmark in `Menu.Option` now uses `checkIcon` at `size="xs"` instead of
|
|
365
|
+
`checkSmallIcon` at the previous 24px default. The nested submenu chevron in `Submenu.TargetItem`
|
|
366
|
+
also changed from `chevronRightSmallIcon` to `chevronRightIcon` at `size="xs"`.
|
|
367
|
+
|
|
368
|
+
Passing a custom `size` to `Menu.Item.Icon` or `Menu.Option.Icon` will still override the default.
|
|
369
|
+
`Select` and `Combobox` menus inherit the `Menu.Option` checkmark change. If you are rendering
|
|
370
|
+
custom chevron or checkmark icons inside of menu items, update them to `size="xs"` and swap
|
|
371
|
+
`*SmallIcon` assets for their standard equivalents where appropriate.
|
|
372
|
+
|
|
373
|
+
**Menu.Group.Heading**
|
|
374
|
+
|
|
375
|
+
- Padding updated to use `paddingBlock: padding.xs` with `paddingInline: padding.sm` / `padding.md`.
|
|
376
|
+
|
|
377
|
+
#### State Style Updates
|
|
378
|
+
|
|
379
|
+
`Menu.Item` and `Menu.Option` share the same underlying item styles via `menuItemStencil`. For
|
|
380
|
+
guidance on when to use `Menu.Item` vs `Menu.Option`, including accessibility requirements for
|
|
381
|
+
selectable menus, see the
|
|
382
|
+
[Menu accessibility documentation](https://workday.github.io/canvas-kit/?path=/docs/components-popups-menu--docs#accessibility).
|
|
383
|
+
|
|
384
|
+
##### Menu.Item
|
|
385
|
+
|
|
386
|
+
| State | v15 | v16 |
|
|
387
|
+
| ------------------------------- | -------------------------------------------------------- | -------------------------------------------------------------------------------- |
|
|
388
|
+
| Active/pressed | Not styled | `surface.overlay.pressed` background |
|
|
389
|
+
| Focus | Solid blue fill (`brand.accent.primary`) and white text | Inset outline using `brand.border.primary` |
|
|
390
|
+
| 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) |
|
|
391
|
+
| 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`) |
|
|
392
|
+
|
|
393
|
+
##### Menu.Option
|
|
394
|
+
|
|
395
|
+
Used in `Select`, `Combobox`, and other listbox menus. Selected states apply when
|
|
396
|
+
`aria-selected="true"`.
|
|
397
|
+
|
|
398
|
+
| State | v15 | v16 |
|
|
399
|
+
| --------------------------------- | ---------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
|
|
400
|
+
| Active/pressed | Not styled | `surface.overlay.pressed` background |
|
|
401
|
+
| Focus | Solid blue fill (`brand.accent.primary`) and white text | Inset outline using `brand.border.primary` |
|
|
402
|
+
| Selected (`aria-selected="true"`) | Solid blue fill and white text (`brand.surface.primary.strong` / `brand.fg.primary.strong`) | Light blue background and blue text (`brand.surface.selected` / `brand.fg.selected`) |
|
|
403
|
+
| Selected + Focus | Solid blue fill and white text | Inset outline with selected background preserved |
|
|
404
|
+
| 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) |
|
|
405
|
+
| 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 |
|
|
406
|
+
|
|
333
407
|
## New Utilities
|
|
334
408
|
|
|
335
409
|
### cornerShapeStencil
|
|
@@ -356,7 +430,8 @@ export const myStencil = createStencil({
|
|
|
356
430
|
});
|
|
357
431
|
```
|
|
358
432
|
|
|
359
|
-
`Card`
|
|
433
|
+
`Card` and `Menu` (`Menu.Card`, `Menu.List`, `Menu.Item`) extend this stencil for their rounded
|
|
434
|
+
corners.
|
|
360
435
|
|
|
361
436
|
## Deprecations
|
|
362
437
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "16.0.0-alpha.
|
|
3
|
+
"version": "16.0.0-alpha.0461-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",
|
|
@@ -47,12 +47,12 @@
|
|
|
47
47
|
"@stackblitz/sdk": "^1.11.0",
|
|
48
48
|
"@storybook/csf": "0.0.1",
|
|
49
49
|
"@workday/canvas-expressive-icons-web": "1.0.2",
|
|
50
|
-
"@workday/canvas-kit-labs-react": "^16.0.0-alpha.
|
|
51
|
-
"@workday/canvas-kit-preview-react": "^16.0.0-alpha.
|
|
52
|
-
"@workday/canvas-kit-react": "^16.0.0-alpha.
|
|
53
|
-
"@workday/canvas-kit-styling": "^16.0.0-alpha.
|
|
50
|
+
"@workday/canvas-kit-labs-react": "^16.0.0-alpha.0461-next.0",
|
|
51
|
+
"@workday/canvas-kit-preview-react": "^16.0.0-alpha.0461-next.0",
|
|
52
|
+
"@workday/canvas-kit-react": "^16.0.0-alpha.0461-next.0",
|
|
53
|
+
"@workday/canvas-kit-styling": "^16.0.0-alpha.0461-next.0",
|
|
54
54
|
"@workday/canvas-system-icons-web": "4.0.4",
|
|
55
|
-
"@workday/canvas-tokens-web": "4.4.0-beta.
|
|
55
|
+
"@workday/canvas-tokens-web": "4.4.0-beta.4",
|
|
56
56
|
"markdown-to-jsx": "^7.2.0",
|
|
57
57
|
"react-syntax-highlighter": "^15.5.0",
|
|
58
58
|
"ts-node": "^10.9.1"
|
|
@@ -63,5 +63,5 @@
|
|
|
63
63
|
"mkdirp": "^1.0.3",
|
|
64
64
|
"typescript": "5.0"
|
|
65
65
|
},
|
|
66
|
-
"gitHead": "
|
|
66
|
+
"gitHead": "351cb8e19682a58f041a1ab01dee996c9e4d2910"
|
|
67
67
|
}
|