feat(tag): migrate to Spectrum 2

[rise-erpelding]

Description

Migrates the Tag component to Spectrum 2, using new and updated tokens, removing borders, and adding the ability to embed the Thumbnail component.

Express and Spectrum themes removed

Express and Spectrum themes in express.css and spectrum.css respectively have been removed, and relevant styles moved into the index.css file.

Medium is default size

All sizeM styles are now the default.

New tokens

New tokens for Spectrum 2, including

• corner rounding (now scales with Tag size)
• minimum and maximum width
• updated spacing tokens

Color and border changes

• Borders have been removed (they have become transparent in most cases; if Windows high-contrast mode is used, Tag still has borders)
• Background and content colors have been adjusted slightly to match Spectrum 2 design spec

Thumbnail added

Tag with Thumbnail is now a visual that is supported (along with Avatar and Icon).

Visuals scale with size change

Small, medium, and large Tags each have appropriately sized icons, avatars, or thumbnails which scale as the component changes size.

Spacing Adjustments

Spacing has been adjusted to match design spec for S2:
Tag with label only
The tag (.spectrum-Tag) controls the inline-start spacing, while the label (.spectrum-itemLabel) controls the inline-end spacing. Border width is subtracted when setting the margin/padding. Note that .spectrum-Tag uses inline-start padding because it’s inline-flex.

Tag with label and clear button
The correct clear button inline-start and inline-end spacing are applied to .spectrum-Tag-clearButton, but since the spacing from the label is still being applied (which has the border width subtracted), this is subtracted from the margin-inline-start being added. This results in 1px of margin being added to the start of the clear button for M and L variants, because the margin being applied to the label is 1px smaller to account for border width.

Tag with Visual (Icon, Avatar, Thumbnail)
These all use the same spacing tokens (component-edge-to-visual, component-text-to-visual) but there are individual custom props for each visual type to try to avoid issues with migration. Inline-start margin on the visual is offset negatively to account for the difference between the tag padding and what the edge-to-visual value should be. Inline-end spacing remains the same as before.

CSS-618

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

• Validate colors (emphasized, invalid, selected, default)
• Validate disabled state (should not have hover state, should not have pointer cursor for clear button, avatars/thumbnails should be dimming)
• View testing preview - are any variants missing that could be useful?

Validate Spacing at each size:

• Label only
• Label with clear button
• Label with Icon
• Label with Avatar
• Label with Thumbnail
• Label with Visual (Avatar, Thumbnail, or Icon) and clear button

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 documentation, I have updated the documentation accordingly.
• ✨ This pull request is ready to merge. ✨

[github-actions]

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

[github-actions]

File metrics

Summary

Total size: 4.52 MB^*
Total change (Δ): ⬇ 36.60 KB (-0.78%)

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

Package	Size	Δ
tag	27.69 KB	⬇ 8.70 KB

Details

tag

File	Head	Base	Δ
index-base.css	27.69 KB	31.03 KB	⬇ 3.34 KB (-10.77%)
index-vars.css	27.69 KB	36.39 KB	⬇ 8.70 KB (-23.91%)
index.css	27.69 KB	36.39 KB	⬇ 8.70 KB (-23.91%)
metadata.json	13.68 KB	17.08 KB	⬇ 3.40 KB (-19.92%)
index-theme.css	-	5.94 KB	🚨 deleted, moved, or renamed
themes/express.css	-	3.25 KB	🚨 deleted, moved, or renamed
themes/spectrum.css	-	3.27 KB	🚨 deleted, moved, or renamed

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

[rise-erpelding]

These three are following the same approach used for Thumbnails in Table to scale the size of the thumbnail or avatar in the CSS. It looks like another previously used option was to control the sizing in the component such as with Tree View although it seems like this approach would make it easier for scaling to be forgotten.

[rise-erpelding]

These changes for the Chromatic coverage are modeled after how Button and Action Button are displaying variants in different sections.

[mdt2]

This is looking really good Rise! The Chromatic coverage and Storybook control updates are awesome 👏 Just a couple things:

• It might be helpful for SWC if we provide them a list of changed/added mods in the docs

• It looks like Avatar dims when the tag is disabled, which is a carryover from S1. I'm wondering if Thumbnail should behave similarly. Just something to check on during design review

• Let's also make sure we check on the Invalid disabled state in design review 🤔 I'm wondering if this should look like the other disabled states:

  

• WHCM is looking great 👏 The only one that is questionable is Invalid Default when dark mode is turned on. I wonder if we could make this look more like what we have in prod now when forced colors is on?

  

[mdt2]

Do we need all these sizes, or just small, medium, and large? 🤔

[rise-erpelding]

I copied this from button/action button, which also don't have as wide a spread of sizes as there are options listed here, and wondered the same thing. I tend to agree and would err on the side of removing the extra sizes unless there's a compelling reason to keep them--I'll plan to take them out.

[jawinn]

Excellent work on this! This is really close and I only noticed a few small things.

I noticed in the separate Foundations and components changelog that it said "Updated label weight to medium", though I didn't see that listed in changed tokens on the spec. Does the font-weight need to change from regular to --spectrum-medium-font-weight?

I noticed the same thing as Melissa on the invalid + selected + disabled. This issue exists on prod too, so it's not specific to your PR. Disabled styling should likely take precedence there.

The only other thing I was wondering about was the foundations changelog item that said "Should have [...] new down state scale tokens". I'm not sure what design was expecting with that---are they expecting it to scale on click when the close button is clicked and is there something we need to do to support that for SWC? That may be something to bring up in design validation.

[jawinn]

Nice work combining these into a single control!
It might be worth also adding a description to this, like "The type of visual element displayed before the label".

[rise-erpelding]

Thanks for the feedback! Here's a list of things that have been fixed since being reviewed and a list of outstanding questions:

Fixes made:

• Unneeded sizes have been removed from the object mapping size abbreviations to size words
• Description added for Visual select menu in Storybook
• Font-weight updated to medium (was previously regular)
• List of mods added
• Added Thumbnail opacity when disabled, I can easily remove it if for some reason it’s not wanted though
• Invalid variant color changes for WHCM

Questions for design:

• Thumbnail opacity is decreased when tag is disabled, similar to Avatar—there was no design spec for this so wanted to confirm that’s wanted here.
• Invalid disabled selected state - this looks just like Invalid selected and it seems like perhaps disabled styles ought to take precedence here.
• Should we be using down state scale tokens?

[rise-erpelding]

Since the label to edge margin had 1px removed to account for the border-width, this is subtracted here... this is a little complicated, and operationally turns into label-to-clear-icon - label-spacing-inline-end + -border-width. I think it's maybe slightly easier to reason through with a calc() inside the calc() but we definitely can do it another way if that seems easier.

[rise-erpelding]

Closing in favor of #3682