feat(menu): spectrum 2 migration #3686
Conversation
…ctrum-css into seckles/css-614-s2-menu
…ctrum-css into seckles/css-614-s2-menu
5t3ph
added
size-5 L
🦋 Changeset detectedLatest commit: ed988bc The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
|
🚀 Deployed on https://pr-3686--spectrum-css.netlify.app |
File metricsSummaryTotal size: 1.38 MB*
File change detailscolorarea
colorhandle
colorslider
colorwheel
menu
slider
* An ASCII character in UTF-8 is 8 bits or 1 byte. |
castastrophe
force-pushed
the
spectrum-two
branch
2 times, most recently
from
7e8269c to
4ce8d19
Compare
| { | ||
| testHeading: "With multi-select switch", | ||
| selectionMode: "multiple", | ||
| hasActions: true, | ||
| include: ["Truncation", "Text wrapping"], | ||
| include: ["Truncation", "Truncation with thumbnails", "Text wrapping", "Text wrapping with thumbnails"], | ||
| }, |
There was a problem hiding this comment.
This and the other test case multi-select switch cuts off the switch on the right side. I wonder if there should be a minimum inline size for this variant.
| .spectrum-Menu-itemLabel--truncate { | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; |
There was a problem hiding this comment.
I see this has been added, but I don't see the ellipsis taking effect in the controls instead the menu items get longer. Should there be an inline size placed when this class is added in the template?
There was a problem hiding this comment.
Line 274 I think for the Menu Item. I added a code block in the styleMap just to see that truncation take effect. I'm sure you have a better way 😁
style=${styleMap({
...customStyles,
...(shouldTruncate ? { width: "200px" } : {}),
})}
Description
First of all, big s/o to @rise-erpelding for the original work in #2802 🙌
S2 Menu references:
New features
Also of note is that the
grid-template-areasforspectrum-Menu-itemwere updated to accomodate the positioning of elements relative to the thumbnail.Tokens update
Since
@adobe/spectrum-tokenshas 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-tokenshave been removed.One special case is
--spectrum-menu-item-background-color-defaultwhich was spec'd to have "0% opacity" which for a CSS background color translates totransparentso that token is redefined as such. So,menu-item-background-opacitywas not used.Additionally, due to the margin required for the focus indicator previously implemented, the "new" token
menu-item-to-itemwas not implemented as it compounded that margin.New mods
--mod-menu-item-linkout-icon-height--mod-menu-item-linkout-icon-width--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-thumbnail--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-descriptionHow 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
menu-item-background-opacityandmenu-item-to-itemas explained abovemenu-item-label-to-descriptionsize tokenssection-header-to-descriptionsize tokensmenu-top-to-thumbnailsize tokenstext-to-visual-400(used for thumbnail to label inline spacing)link-out-iconsize tokensRegression testing
Validate:
Screenshots
Note: The desktop guide shows that when thumbnail is active, the selected state check or checkbox should be center aligned
To-do list