refactor(menu): improve chromatic coverage

[rise-erpelding]

Description

Previously, there were 13 different variants for menu, and the only component-level controls were for size, max inline-size, and truncation. This work eliminates some variants (down to 5 from 13) in favor of showing multiple menu variants in a the Menu with Variants menu and adding more controls to show various states and variants, which are displayed individually in the Chromatic testing preview.

Single menu item refactor

It was also previously difficult to understand the different options available for a menu item within the menu, in both Storybook and the code. Here, the code has been refactored to render each area of a menu item separately, potentially making the code easier to understand and change as we migrate to Spectrum 2. A story specifically dedicated to display a single menu item has been created, with controls to display combinations of variants relevant to a single menu item (such as displaying the icon, item selected status, whether switches or checkboxes are used to indicate selected status on a multi-select item, and focus state). This single menu item story also aligns more closely with the S1 design spec and S2 design spec, showing all the variants, making it easier to validate.

Chromatic coverage

Chromatic coverage for the single menu item and menu item with variants stories has been expanded in order to align more closely with the testing views that have recently been added to other components and to make all states and variants visible in a single testing view (the "kitchen sink" testing strategy), reducing the number of snapshots needed for visual regression testing the component.

Other changes

The Collapsible menu story and Tray submenu story have been left almost completely unchanged as these variants differ from most others. These two variants also do not have a different Chromatic testing view, but I'm open to opinions on either of these!

This work also includes one minor bug fix that prevents the overlap of a multi-select checkbox and an icon should they both be present--this is the only CSS change.

CSS-614

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

Check both stories' testing previews - open Storybook to check out the stories for Menu

• Check the testing preview for both Menu with Variants and Menu Item Only - does this cover all variants?
• Do controls work for both stories? (Note: switching to/from single to multiple select mode does result in a hooks error, but this should resolve upon reload)
• Are all variants free from visual issues (no overlapping, wonky placement issues, etc.)?
• Do the Collapsible and Tray Submenu stories look and behave the same compared to production?

Regression testing

Validate:

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

• The pages render correctly, are accessible, and are responsive.

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

• VRTs have been run and looked at. (@rise-erpelding - will run these again with final changes)
• Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes. (@rise-erpelding)

Screenshots

Chromatic testing view for Single Menu Item

Default view mode for Menu with Variants menu, includes many different menu item options in a single menu

To-do list

• I have read the contribution guidelines.
• I have updated relevant storybook stories and templates.
• If my change impacts other components, I have tested to make sure they don't break.
• If my change impacts documentation, I have updated the documentation accordingly.
• ✨ This pull request is ready to merge. ✨

[changeset-bot]

🦋 Changeset detected

Latest commit: 1ca8dc1

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

This PR includes changesets to release 1 package

Name	Type
@spectrum-css/menu	Patch

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

[github-actions]

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

[github-actions]

File metrics

Summary

Total size: 4.65 MB^*

🎉 No changes detected in any packages

* 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.

[mdt2]

Just a few initial thoughts!

[jawinn]

This is looking great! Thanks for all your work here to get this organized and capturing more variants.

Two ideas for more things that might be good to have in the VRT:

• Wrapping text on the section header
• Also including the icon and the checkmark in/after "Sizes" for the "Menu Item Only" story.

[rise-erpelding]

Updates since last reviews:

Hide standard with dividers story

• Hide "Standard with dividers" story that is being used by Picker

Use is-focus-visible class to display focus state

• Hide controls for active, focused, hovered states (these states are shown in Chromatic, but should use hover/focus/active mouse/keyboard functions to trigger them rather than Storybook controls)
• Use is-focus-visible class to display focus state, eliminating the previous change made to CSS

Adjust Chromatic testing view

• Make it more obvious that menu headers are headers within the component rather than being part of the typography decorating the component
• Add seafoam green color to the typography headings closest to the component to make the distinction between component and decorator clear
• Truncates text that was supposed to be long enough to truncate but wasn't
• Add icon and single select checkmark for sizing on the Single menu item Chromatic testing preview so that we can see that the icon sizes scale with the component

Adjust switches and controls

• "Has dividers" control only displays for Menu with Variants story
• No "Selection Mode" control for Collapsible menu story or Tray Submenu story
• Add "Is tray submenu" control for Tray Submenu story (previously this was just floating around by itself as it hadn't been defined)
• Add boolean control for Value and conditional Single Item Value text control for Value text if boolean is true
• Add Chromatic testing view to show values

[jawinn]

This looks great 👍 The requested changes from my last review are all resolved.