fix(menu)!: reimplement text truncating

[jenndiaz]

Description

BREAKING CHANGE

"Previously the spectrum-Menu-itemLabel--wrapping class could be added to the spectrum-Menu-itemLabel element in a Menu Item to prevent it from wrapping and force it to use an ellipsis instead."

Fix:

• the css to truncate was not able to be applied because spectrum-Menu-itemLabel had display: flex;
  read more about flex causing issues with truncate
• I was able to remove this by changing the mark up of the Multi Selection with icons example which had the SVG with in the label
• Rename classes to indicate truncating and not wrapping
• removed any html that was making it appear that the text with truncating ...

Docs:

• added example to docs site
• added example to Storybook
• added control to Storybook to toggle on all variants

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

• truncating example visible on docs page
• storybook has truncate story with each menu item over 150px truncates and displays ...
• each story for menu has a truncate control which adds a max width to the menu and adds spectrum-Menu-itemLabel--truncate to each menu item or heading

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.
• Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

To-do list

• I have read the contribution guidelines.
• I have updated relevant storybook stories and templates.
• I have tested these changes in Windows High Contrast mode.
• 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. ✨

[github-actions]

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

[github-actions]

File metrics

Summary

Total size: 3.97 MB^*
Total change (Δ): ⬆ 0.55 KB (0.01%)
Table reports on changes to a package's main file. Other changes can be found in the collapsed "Details" below.

Package	Size	Δ
menu	39.18 KB	⬆ 0.18 KB

Details

menu

File	Head	Base	Δ
index-base.css	39.18 KB	39.00 KB	⬆ 0.18 KB (0.46%)
index-theme.css	< 0.01 KB	< 0.01 KB	-
index-vars.css	39.18 KB	39.00 KB	⬆ 0.18 KB (0.46%)
index.css	39.18 KB	39.00 KB	⬆ 0.18 KB (0.46%)
mods.json	3.33 KB	3.33 KB	-
themes/express.css	< 0.01 KB	< 0.01 KB	-
themes/spectrum.css	< 0.01 KB	< 0.01 KB	-

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

[jenndiaz]

this previously had two iconAreas which causes some issues with menu item icons and labels not being on the correct row with in the grid.

[jenndiaz]

Flex was causing text-overflow: ellipsis; to not work, was able to refactor the itemLabel to not need to rely on flex. This is what appeared to of broken the truncating functionality.

[mdt2]

This is looking good! A couple notes:

• On line 1333 in components/menu/metadata/menu.yml we have one more html ... that can be removed.
• The Storybook control doesn't do anything except for on the Truncate page, I'm wondering if we should either limit the control to only show on that Truncate page or maybe set one of the menu items on the other stories to be able to show truncating? Let me know what you think!

[jenndiaz]

• The Storybook control doesn't do anything except for on the Truncate page, I'm wondering if we should either limit the control to only show on that Truncate page or maybe set one of the menu items on the other stories to be able to show truncating? Let me know what you think!

@mdt2 Could you say more about this? It is defiantly working for me, although some are more subtle, If you adjust the Max Inline Size* it makes it more obvious. I have it setting to 150px, I could adjust that if we think it's needed.

I do think it's helpful to have the toggle on all of them, about half of them were not working previously and I think having the ability to see it in all variants could prevent it from regressing again.

[mdt2]

Oh my mistake! I had only tested a few that weren't long enough for truncation. Thanks for pointing me toward the Max Inline Size, it helped me realize my error quickly.

[mdt2]

Great work Jenn!