Skip to content

feat(tag): migrate to S2 #3682

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 13 commits into
base: spectrum-two
Choose a base branch
from
62 changes: 62 additions & 0 deletions .changeset/khaki-icons-hammer.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
---
"@spectrum-css/tag": major
---

Tag now uses Spectrum 2 tokens and specifications:

- The invalid variant has been removed.
Copy link
Contributor

@aramos-adobe aramos-adobe May 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would also add it's been removed because there are no individual invalid tags and errors are displayed in tag groups.

- Borders remain in high contrast but are otherwise transparent.
- Thumbnail has been added as a visual option.
- Tag now has a max-inline-size.
- Read-only tags are now supported.
- Passthroughs for clear button have been updated to match the current spec.
- Default t-shirt size for tag is small.
- Clear button has accessibly sized target.
- Emphasized tags have accent coloring only when they are selected.

Changed mods:

- "--mod-tag-avatar-spacing-inline-end" --> "--mod-tag-visual-spacing-inline-end",
- "--mod-tag-icon-spacing-inline-end" --> "--mod-tag-visual-spacing-inline-end",
- "--mod-tag-spacing-inline-start" --> "--mod-tag-label-spacing-inline",
- "--mod-tag-label-spacing-inline-end" --> "--mod-tag-label-spacing-inline"
- "--mod-tag-clear-button-spacing-inline-start" --> "--mod-tag-label-to-clear-icon",
- "--mod-tag-clear-button-spacing-inline-end" --> "--mod-tag-edge-to-clear-icon"

Added mods:

- "--mod-tag-avatar-size",
- "--mod-tag-clear-button-size",
- "--mod-tag-label-font-family",
- "--mod-tag-label-font-style",
- "--mod-tag-label-line-height-cjk",
- "--mod-tag-maximum-width-multiplier",
- "--mod-tag-min-inline-size",
- "--mod-tag-thumbnail-size",
- "--mod-tag-visual-spacing-inline-start"

Removed mods:

- "--mod-tag-background-color-invalid-selected",
- "--mod-tag-background-color-invalid-selected-active",
- "--mod-tag-background-color-invalid-selected-focus",
- "--mod-tag-background-color-invalid-selected-hover",
- "--mod-tag-border-color-emphasized-active",
- "--mod-tag-border-color-emphasized-focus",
- "--mod-tag-border-color-emphasized-hover",
- "--mod-tag-border-color-invalid",
- "--mod-tag-border-color-invalid-active",
- "--mod-tag-border-color-invalid-focus",
- "--mod-tag-border-color-invalid-hover",
- "--mod-tag-border-color-invalid-selected",
- "--mod-tag-border-color-invalid-selected-active",
- "--mod-tag-border-color-invalid-selected-focus",
- "--mod-tag-border-color-invalid-selected-hover",
- "--mod-tag-border-color-selected-active",
- "--mod-tag-border-color-selected-focus",
- "--mod-tag-border-color-selected-hover",
- "--mod-tag-content-color-invalid",
- "--mod-tag-content-color-invalid-active",
- "--mod-tag-content-color-invalid-focus",
- "--mod-tag-content-color-invalid-hover",
- "--mod-tag-content-color-invalid-selected",
2 changes: 2 additions & 0 deletions components/clearbutton/stories/template.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export const Template = ({
isFocusable = true,
staticColor,
id = getRandomId("clearbutton"),
onclick = () => {},
customClasses = [],
customStyles = {},
}, context) => html`
Expand All @@ -38,6 +39,7 @@ export const Template = ({
?disabled=${isDisabled}
tabindex=${isFocusable ? 0 : -1}
aria-hidden=${isFocusable}
@click=${onclick}
>
<div class="${rootClass}-fill">
${Icon({
Expand Down
Loading
Loading