spectrum-css feat(menu): s2 migration

Description

This migration was a big one--lots of features were added to the design spec for S2. To make way for these, menu was previously refactored on main to make the Storybook implementation easier to add to. There are two temporary commits at the beginning of this PR ("keep selector list in dist output..." and "improve chromatic coverage") containing, respectively, a fix that addresses menu, and recent menu refactor changes made on main that this work depends on--I'll remove this once spectrum-two has been rebased to include these changes.

In addition to small token and minor style changes to match the design spec, there were several new features that were added to this version of menu, including:

A thumbnail can now be added to the menu item label
A section description can now be added below the menu section heading
The actions area previously held value text, action switches for multi-select, and the drill-in for a submenu--in this version, an external link action can now be added
Menu items now receive corner rounding, which is visible on hover/focus/active states
Menu items now have the S2 down state transform
The focus indicator has been updated--instead of a blue line on the left (start side) of the menu item, the whole element now receives an outline
Because the focus outline has been added, the tray and popover components that contain menu will require padding. Padding for popover is in the S2 design spec, and there has been discussion about including it for tray as well.

Since @adobe/spectrum-tokens has been updated to include many tokens relating to the menu component, including some that replace custom tokens that had previously been added. As such, these custom menu item color tokens that are now available from @adobe/spectrum-tokens have been removed.

The following mods have been added:

--mod-menu-item-corner-rounding
--mod-menu-item-description-font-weight
--mod-menu-item-label-font-weight
--mod-menu-item-thumbnail-height
--mod-menu-item-thumbnail-opacity-disabled
--mod-menu-item-thumbnail-to-label
--mod-menu-item-thumbnail-width
--mod-menu-item-top-to-drillin
--mod-menu-item-top-to-icon
--mod-menu-item-top-to-thumbnail
--mod-menu-linkout-icon-height
--mod-menu-linkout-icon-width
--mod-menu-section-description-color
--mod-menu-section-description-font-size
--mod-menu-section-description-font-weight
--mod-menu-section-description-line-height
--mod-menu-section-description-line-height-cjk
--mod-menu-section-header-to-description
--mod-popover-content-area-spacing-horizontal
--mod-tray-edge-to-content-area

Note that there is currently one outstanding item that needs to be addressed before merging:

[ ] Spectrum 2 Icons need to be added to this once available - therefore the external link icon does not match the spec

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

New features added are visible in Storybook and are covered by a Chromatic testing view for one or more stories on the menu component. @marissahuysentruyt
- [x] Thumbnail
- [x] Section description
- [x] External link
- [x] Corner-rounding
- [x] Focus indicator
- [x] Down state
Menu item elements (icon, thumbnail, checkmarks, checkboxes, switches, external linkout, etc.) all play nicely with each other and nothing appears out of place when combining various elements (Note: Storybook will throw hooks error messages on the screen when switching select modes, it goes away if you reload) @marissahuysentruyt
- [x] No selection mode
- [x] Single select mode
- [x] Multi-select mode with switches
- [x] Muti-select mode with checkboxes
Menu items and other components within menu behave as expected on hover/active/focus states (for instance, nothing disappears that shouldn't, disabled items don't get hover/active states or pointer cursors, contrast seems appropriate)
- [ ] In regular light/dark contexts
- [ ] In Windows High Contrast Mode
New tokens listed in Figma are used @marissahuysentruyt
- [x] menu-item-label-to-description size tokens
- [x] section-header-to-description size tokens
- [x] menu-top-to-thumbnail size tokens
- [x] menu-item-background-color and menu-item-background-opacity tokens
- [x] text-to-visual-400 (used for thumbnail to label inline spacing)
- [x] link-out-icon size tokens
Menu matches the design spec @marissahuysentruyt
- [x] Layout - heights and spacings appear to match spec, and corner rounding tokens are in use (Note: Sub-menu alignment with menu item is outside of the scope of Spectrum CSS, I think)
- [x] Assets - icons, checkboxes, and thumbnails are appropriately sized (Note: External link icon needs to be updated to S2 icon when these icons are available to us)
- [x] Colors - background and content colors use the appropriate color tokens
- [x] Typography - menu headers and items are using the appropriate typography tokens
Popover and Tray components have 8px of horizontal margin added per discussion about adding spacing to accommodate focus outline @marissahuysentruyt

Links that may help in validation:

Regression testing

Validate:

The documentation pages for at least two other components are still loading, including:

[ ] The pages render correctly, are accessible, and are responsive.

If components have been modified, VRTs have been run on this branch:

[ ] VRTs have been run and looked at.
[ ] Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

[x] I have read the contribution guidelines.
[x] I have updated relevant storybook stories and templates.
[x] I have tested these changes in Windows High Contrast mode.
[ ] If my change impacts documentation, I have updated the documentation accordingly.
[ ] ✨ This pull request is ready to merge. ✨

May 30 '24 22:05 rise-erpelding

🦋 Changeset detected

Latest commit: ad5c3faa6ae735221379342875c5934422cbec31

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 16 packages

Name	Type
@spectrum-css/calendar	Patch
@spectrum-css/combobox	Major
@spectrum-css/datepicker	Major
@spectrum-css/menu	Major
@spectrum-css/picker	Major
@spectrum-css/slider	Patch
@spectrum-css/stepper	Patch
@spectrum-css/popover	Major
@spectrum-css/tray	Minor
@spectrum-css/tokens	Patch
@spectrum-css/actionmenu	Major
@spectrum-css/coachmark	Major
@spectrum-css/pickerbutton	Major
@spectrum-css/tabs	Major
@spectrum-css/actionbar	Major
@spectrum-css/contextualhelp	Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

May 30 '24 22:05 changeset-bot[bot]

File metrics

Summary

Total size: 4.27 MB^* Total change (Δ): ⬆ 45.89 KB (1.06%)

Table reports on changes to a package's main file. Other changes can be found in the collapsed Details section below.

Package	Size	Δ
button	29.44 KB	⬇ 0.03 KB
calendar	19.50 KB	⬇ 0.01 KB
combobox	26.31 KB	⬇ 0.19 KB
datepicker	14.51 KB	⬇ 0.04 KB
menu	49.55 KB	⬆ 8.73 KB
picker	30.64 KB	⬆ 1.84 KB
popover	32.29 KB	⬆ 0.21 KB
slider	32.73 KB	⬇ 0.06 KB
statuslight	11.49 KB	⬇ 0.77 KB
stepper	20.33 KB	⬇ < 0.01 KB
tooltip	34.03 KB	⬆ 3.39 KB
tray	3.98 KB	⬆ 0.17 KB
tokens	208.25 KB	⬇ 1.83 KB

Details

button

File	Head	Base	Δ
index-base.css	29.44 KB	29.47 KB	⬇ 0.03 KB (-0.11%)
index-vars.css	29.44 KB	29.47 KB	⬇ 0.03 KB (-0.11%)
index.css	29.44 KB	29.47 KB	⬇ 0.03 KB (-0.11%)
metadata.json	11.45 KB	11.48 KB	⬇ 0.03 KB (-0.27%)

calendar

File	Head	Base	Δ
index-base.css	19.50 KB	19.50 KB	⬇ 0.01 KB (-0.04%)
index-vars.css	19.50 KB	19.50 KB	⬇ 0.01 KB (-0.04%)
index.css	19.50 KB	19.50 KB	⬇ 0.01 KB (-0.04%)
metadata.json	9.82 KB	9.83 KB	⬇ 0.01 KB (-0.08%)

combobox

File	Head	Base	Δ
index-base.css	25.51 KB	25.70 KB	⬇ 0.19 KB (-0.73%)
index-theme.css	1.37 KB	1.37 KB	-
index-vars.css	26.31 KB	26.49 KB	⬇ 0.19 KB (-0.71%)
index.css	26.31 KB	26.49 KB	⬇ 0.19 KB (-0.71%)
metadata.json	12.69 KB	12.88 KB	⬇ 0.19 KB (-1.46%)
themes/express.css	1.00 KB	1.00 KB	-
themes/spectrum.css	0.99 KB	0.99 KB	-

datepicker

File	Head	Base	Δ
index-base.css	14.31 KB	14.35 KB	⬇ 0.04 KB (-0.25%)
index-theme.css	0.80 KB	0.80 KB	-
index-vars.css	14.51 KB	14.55 KB	⬇ 0.04 KB (-0.24%)
index.css	14.51 KB	14.55 KB	⬇ 0.04 KB (-0.24%)
metadata.json	7.93 KB	7.96 KB	⬇ 0.04 KB (-0.44%)
themes/express.css	0.70 KB	0.70 KB	-
themes/spectrum.css	0.69 KB	0.69 KB	-

File	Head	Base	Δ
index-base.css	49.55 KB	40.83 KB	⬆ 8.73 KB (21.37%)
index-vars.css	49.55 KB	40.83 KB	⬆ 8.73 KB (21.37%)
index.css	49.55 KB	40.83 KB	⬆ 8.73 KB (21.37%)
metadata.json	23.76 KB	18.79 KB	⬆ 4.98 KB (26.50%)

picker

File	Head	Base	Δ
index-base.css	28.73 KB	28.80 KB	⬇ 0.07 KB (-0.23%)
index-theme.css	2.49 KB	-	🎉 new
index-vars.css	30.64 KB	28.80 KB	⬆ 1.84 KB (6.40%)
index.css	30.64 KB	28.80 KB	⬆ 1.84 KB (6.40%)
metadata.json	14.75 KB	14.31 KB	⬆ 0.45 KB (3.08%)
themes/express.css	1.49 KB	-	🎉 new
themes/spectrum.css	1.58 KB	-	🎉 new

popover

File	Head	Base	Δ
index-base.css	32.13 KB	31.93 KB	⬆ 0.21 KB (0.63%)
index-theme.css	0.75 KB	0.75 KB	-
index-vars.css	32.29 KB	32.09 KB	⬆ 0.21 KB (0.63%)
index.css	32.29 KB	32.09 KB	⬆ 0.21 KB (0.63%)
metadata.json	26.74 KB	26.63 KB	⬆ 0.11 KB (0.41%)
themes/express.css	0.66 KB	0.66 KB	-
themes/spectrum.css	0.68 KB	0.68 KB	-

slider

File	Head	Base	Δ
index-base.css	30.40 KB	30.45 KB	⬇ 0.06 KB (-0.18%)
index-theme.css	2.92 KB	2.92 KB	-
index-vars.css	32.73 KB	32.79 KB	⬇ 0.06 KB (-0.17%)
index.css	32.73 KB	32.79 KB	⬇ 0.06 KB (-0.17%)
metadata.json	14.06 KB	14.12 KB	⬇ 0.06 KB (-0.39%)
themes/express.css	1.76 KB	1.76 KB	-
themes/spectrum.css	1.73 KB	1.73 KB	-

statuslight

File	Head	Base	Δ
index-base.css	11.49 KB	12.25 KB	⬇ 0.77 KB (-6.17%)
index-vars.css	11.49 KB	12.25 KB	⬇ 0.77 KB (-6.17%)
index.css	11.49 KB	12.25 KB	⬇ 0.77 KB (-6.17%)
metadata.json	6.79 KB	7.82 KB	⬇ 1.03 KB (-13.17%)

stepper

File	Head	Base	Δ
index-base.css	16.89 KB	16.89 KB	⬇ < 0.01 KB (-0.02%)
index-theme.css	4.02 KB	4.02 KB	-
index-vars.css	20.33 KB	20.33 KB	⬇ < 0.01 KB (-0.02%)
index.css	20.33 KB	20.33 KB	⬇ < 0.01 KB (-0.02%)
metadata.json	9.07 KB	9.07 KB	⬇ < 0.01 KB (-0.04%)
themes/express.css	2.32 KB	2.32 KB	-
themes/spectrum.css	2.28 KB	2.28 KB	-

tooltip

File	Head	Base	Δ
index-base.css	33.77 KB	30.38 KB	⬆ 3.39 KB (11.17%)
index-theme.css	0.86 KB	0.86 KB	-
index-vars.css	34.03 KB	30.64 KB	⬆ 3.39 KB (11.07%)
index.css	34.03 KB	30.64 KB	⬆ 3.39 KB (11.07%)
metadata.json	24.04 KB	22.17 KB	⬆ 1.87 KB (8.45%)
themes/express.css	0.73 KB	0.73 KB	-
themes/spectrum.css	0.73 KB	0.73 KB	-

tray

File	Head	Base	Δ
index-base.css	3.98 KB	3.82 KB	⬆ 0.17 KB (4.30%)
index-vars.css	3.98 KB	3.82 KB	⬆ 0.17 KB (4.30%)
index.css	3.98 KB	3.82 KB	⬆ 0.17 KB (4.30%)
metadata.json	1.32 KB	1.21 KB	⬆ 0.11 KB (9.11%)

tokens

File	Head	Base	Δ
css/dark-vars.css	36.72 KB	36.72 KB	-
css/express/custom-dark-vars.css	0.59 KB	0.59 KB	-
css/express/custom-darkest-vars.css	0.59 KB	0.59 KB	-
css/express/custom-large-vars.css	0.50 KB	0.50 KB	-
css/express/custom-light-vars.css	0.63 KB	0.63 KB	-
css/express/custom-medium-vars.css	0.48 KB	0.48 KB	-
css/express/custom-vars.css	0.04 KB	0.04 KB	-
css/global-vars.css	54.79 KB	54.79 KB	-
css/large-vars.css	28.77 KB	28.77 KB	-
css/light-vars.css	36.71 KB	36.71 KB	-
css/medium-vars.css	28.70 KB	28.70 KB	-
css/spectrum/custom-dark-vars.css	2.84 KB	3.40 KB	⬇ 0.58 KB (-16.67%)
css/spectrum/custom-darkest-vars.css	2.83 KB	3.40 KB	⬇ 0.58 KB (-16.69%)
css/spectrum/custom-large-vars.css	4.68 KB	4.76 KB	⬇ 0.08 KB (-1.70%)
css/spectrum/custom-light-vars.css	2.84 KB	3.40 KB	⬇ 0.57 KB (-16.51%)
css/spectrum/custom-medium-vars.css	4.92 KB	4.98 KB	⬇ 0.06 KB (-1.14%)
css/spectrum/custom-vars.css	2.18 KB	2.18 KB	-
index.css	208.25 KB	210.08 KB	⬇ 1.83 KB (-0.87%)

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

May 30 '24 22:05 github-actions[bot]

🚀 Deployed on https://pr-2802--spectrum-css.netlify.app

May 30 '24 22:05 github-actions[bot]

Closing per updated work on this migration in #3686

Apr 30 '25 22:04 5t3ph