feat(clearbutton): s2 migration by cdransf · Pull Request #4043 · adobe/spectrum-css

cdransf · 2025-07-16T20:12:39Z

Description

CSS-1169

This migrates the clear button component to the latest Spectrum 2 designs. Custom properties have been remapped and added per the design specification.

The quiet variant has been remove as all clear buttons have a transparent background.
The over-background and static color variants have been removed.
Test and stories for deprecated variants have been removed.

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

changeset-bot · 2025-07-16T20:12:43Z

🦋 Changeset detected

Latest commit: c3950f9

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

This PR includes changesets to release 3 packages

Name	Type
@spectrum-css/clearbutton	Major
@spectrum-css/bundle	Patch
@spectrum-css/preview	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 · 2025-07-16T20:18:19Z

File metrics

Summary

Total size: 1.43 MB^*

Package	Size	Minified	Gzipped
clearbutton	5.08 KB	4.83 KB	1.09 KB

clearbutton

Filename	Head	Minified	Gzipped	Compared to base
index.css	5.08 KB	4.83 KB	1.09 KB	🟢 ⬇ 0.74 KB
metadata.json	2.94 KB	-	-	🟢 ⬇ 0.07 KB

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

github-actions · 2025-07-16T20:18:43Z

📚 Branch preview

PR #4043 has been deployed to Azure Blob Storage: https://spectrumcss.z13.web.core.windows.net/pr-4043/index.html.

rise-erpelding

It's nice to have this one pared down a little for S2!

It looks good, I have a question about the down state. Looking at the token specs and also digging around the component playground/Explore component behavior section in Figma, it looks like this clear button receives the S2 down state treatment where the button gets a tiny bit smaller to give the appearance of being pushed in. Unless there's a good reason it's not included, we probably need to add it. There's some documentation in our Storybook already with examples on how it's used in components if you haven't added one of these in a component migration before. I believe the notes there came from design at some point.

Figma always gives the same 3 down state tokens for every component where it's used, but you probably don't need all of them. The documentation will explain that for 24px or less, you can use the component-size-minimum-perspective-down token rather than the component-size-width-ratio-down (using the ratio requires you to have the height/width of the component, which you'll need the withDownStateDimensionCapture decorator for)... since the clear button is larger than 24px but the icons are all smaller, it seems like it might be ok to use the component-size-minimum-perspective-down token?

A couple of other thoughts related to down state here:

We'll probably want to capture this in the tests, as well as the hover state
I'm wondering how this will look in the removable Tag, which uses the clear button. The down state for Tag applies the down state to the whole Tag, but I'm guessing that if we were only targeting the clear button within Tag, that ideally we'd want just the clear button to have the down state and not the whole tag? That might be another ticket to review and confirm with design later on.

cdransf · 2025-07-21T23:44:38Z

Figma always gives the same 3 down state tokens for every component where it's used, but you probably don't need all of them.

We do have the color tokens in place for each state, but that predates the migration. ✨

... since the clear button is larger than 24px but the icons are all smaller, it seems like it might be ok to use the component-size-minimum-perspective-down token?

That makes the most sense to me — I've gone ahead and run with component-size-minimum-perspective-down for the latest update.

We'll probably want to capture this in the tests, as well as the hover state

Added tests for hover and down. ✨

I'm wondering how this will look in the removable Tag, which uses the clear button. The down state for Tag applies the down state to the whole Tag, but I'm guessing that if we were only targeting the clear button within Tag, that ideally we'd want just the clear button to have the down state and not the whole tag? That might be another ticket to review and confirm with design later on.

Hmmm, that's a good question. Looking at the removable tag now, the down state applied to the whole tag doesn't feel quite right. I'd be inclined to apply it to the child clear button like you suggest. I'll open up a ticket.

marissahuysentruyt

Nice work! There's some very small things I think we should add, like the migrated status & tag, and then the active and hover controls. I think the tokens are in a good but, I had a couple of extra things I wanted to bring up!

Do we know if the corner radius needs to be anything specific for clear button? Should it be fully rounded into a circle, or follow the infield button border radius specs? I very well may have missed it if you already asked this question somewhere! I noticed there were no rounded corners at all when I was playing with the mod for the background color, that's all.

I noticed that we get the browser default focus-visible outline on the clear button. But looking at the infield button CSS (which this is sort of a variant of), the outline is removed completely. Do you think we should also remove the outline for keyboard focus in clear button?

marissahuysentruyt

Nice work! I left a final note about the border radius for future us (in case we hear that the border radius needs to be changed back to a circle or be something else).

marissahuysentruyt · 2025-07-24T13:12:31Z


 	inline-size: 100%;
 	block-size: 100%;
-	border-radius: 100%;


I don't want to block this from merging, but just wanted to note once more about the border radius here. You may have asked somewhere that I just missed. It could be a real quick follow up.

Do we know if the corner radius needs to be anything specific for clear button? Should it be fully rounded into a circle as it was previously in S1, or does it follow the infield button border radius specs? Those were the only tokens I don't see, and it's a little unclear to me just looking all over in Figma.

castastrophe · 2025-07-24T14:59:12Z

+
+#### S2 migration for clear button
+
+This migrates the clear button component to the latest Spectrum 2 designs. Custom properties have been remapped and added per the design specification.


Were any mod tokens changed or added that we should note in the changelog?

castastrophe · 2025-07-24T14:59:37Z

+"@spectrum-css/clearbutton": major
+---
+
+#### S2 migration for clear button


Suggested change

#### S2 migration for clear button

#### S2 migration

Minor knit but this will get added to the clear button component's changelog so the context will ultimately be clear from that.

castastrophe · 2025-07-24T15:00:20Z

+
+This migrates the clear button component to the latest Spectrum 2 designs. Custom properties have been remapped and added per the design specification.
+
+- The quiet variant has been remove as all clear buttons have a transparent background.


Suggested change

- The quiet variant has been remove as all clear buttons have a transparent background.

- The `quiet` variant has been **removed** as all clear buttons have a transparent background now, making this variant irrelevant.

Minor formatting and wording knit.

castastrophe · 2025-07-24T15:01:52Z

+This migrates the clear button component to the latest Spectrum 2 designs. Custom properties have been remapped and added per the design specification.
+
+- The quiet variant has been remove as all clear buttons have a transparent background.
+- The over-background and static color variants have been removed.


Suggested change

- The over-background and static color variants have been removed.

- The `over-background` and `static color` variants have been removed.

What does this translate to in the code? I like this general note but might be good to translate this into, X class was removed for example.

castastrophe · 2025-07-24T15:02:15Z

+
+- The quiet variant has been remove as all clear buttons have a transparent background.
+- The over-background and static color variants have been removed.
+- Test and stories for deprecated variants have been removed.


I like this note but it doesn't really impact customers so maybe we remove this point?

castastrophe · 2025-07-24T15:03:05Z

+- The quiet variant has been remove as all clear buttons have a transparent background.
+- The over-background and static color variants have been removed.
+- Test and stories for deprecated variants have been removed.
+- The down state has been added, corresponding controls and tests have been added.


What does that translate to for customers? Can you clarify in the docs here what the introduction of the down state looks like for customers adopting this change?

castastrophe · 2025-07-24T15:03:57Z

-	border-radius: 100%;

-	background-color: var(--mod-clear-button-background-color, transparent);
+	background-color: transparent;


Nice, let's make sure this gets documented clearly in the changelog that this mod no longer works here.

cdransf self-assigned this Jul 16, 2025

cdransf added wip This is a work in progress, don't judge. skip_vrt Add to a PR to skip running VRT (but still pass the action) labels Jul 16, 2025

cdransf changed the base branch from main to spectrum-two July 16, 2025 20:12

cdransf force-pushed the cdransf/s2-migration-clear-button branch from 68af820 to 6459841 Compare July 16, 2025 20:13

cdransf requested review from 5t3ph, castastrophe, marissahuysentruyt and rise-erpelding July 16, 2025 20:27

cdransf added size-2 S ~6-18hrs; not hard or time consuming, one or two work days to complete. ready-for-review and removed wip This is a work in progress, don't judge. labels Jul 16, 2025

cdransf force-pushed the cdransf/s2-migration-clear-button branch from 6459841 to 3e1e802 Compare July 17, 2025 17:29

rise-erpelding reviewed Jul 21, 2025

View reviewed changes

Comment thread components/clearbutton/stories/clearbutton.stories.js Outdated

Comment thread components/clearbutton/stories/clearbutton.stories.js

cdransf force-pushed the cdransf/s2-migration-clear-button branch from cde74ff to bdf9f5b Compare July 21, 2025 20:55

cdransf force-pushed the cdransf/s2-migration-clear-button branch from 6d9fb56 to f3224fb Compare July 21, 2025 23:48

cdransf requested a review from rise-erpelding July 22, 2025 00:01

rise-erpelding approved these changes Jul 22, 2025

View reviewed changes

cdransf force-pushed the cdransf/s2-migration-clear-button branch from f3224fb to 306ab28 Compare July 22, 2025 20:53

marissahuysentruyt requested changes Jul 23, 2025

View reviewed changes

cdransf requested a review from marissahuysentruyt July 23, 2025 22:39

marissahuysentruyt approved these changes Jul 24, 2025

View reviewed changes

cdransf added 4 commits July 24, 2025 07:48

feat(clearbutton): s2 migration

e6c7d11

chore(clearbutton): add search + tags links to docs

4ea7b72

chore(clearbutton): add hover + down state tests

73a3c09

chore(clearbutton): add hover + down state controls, add migrated tags

be6f8d9

cdransf added 4 commits July 24, 2025 07:48

chore(clearbutton): add down state to changelog

49ff7b9

chore(clearbutton): move size table out of usage notes to size story

41e1d0b

fix(clearbutton): correct test key names

b8f465e

chore(clearbutton): remove keyboard focus outline

c3950f9

cdransf force-pushed the cdransf/s2-migration-clear-button branch from 3f4f65c to c3950f9 Compare July 24, 2025 14:48

cdransf merged commit 0242f7f into spectrum-two Jul 24, 2025
13 checks passed

cdransf deleted the cdransf/s2-migration-clear-button branch July 24, 2025 15:05

castastrophe reviewed Jul 24, 2025

View reviewed changes

castastrophe mentioned this pull request Jul 25, 2025

ci: chromatic runs for S2 [CSS-1233] #4070

Merged

3 tasks

github-actions Bot mentioned this pull request Jul 26, 2025

chore: release (next) #4073

Merged

castastrophe mentioned this pull request Aug 6, 2025

fix: minor linting updates #4113

Merged

11 tasks

This was referenced Aug 27, 2025

chore(popover): wrapper placement in story #4173

Closed

feat(storybook): chromatic a11y testing #4180

Closed

chore: updating lint-staged file inheritance order #4193

Closed

castastrophe mentioned this pull request Oct 22, 2025

feat(badge): remove modifiers from the API [SWC-1264] #4283

Merged

14 tasks


		#### S2 migration for clear button

		This migrates the clear button component to the latest Spectrum 2 designs. Custom properties have been remapped and added per the design specification.


		This migrates the clear button component to the latest Spectrum 2 designs. Custom properties have been remapped and added per the design specification.

		- The quiet variant has been remove as all clear buttons have a transparent background.

	- The quiet variant has been remove as all clear buttons have a transparent background.
	- The `quiet` variant has been removed as all clear buttons have a transparent background now, making this variant irrelevant.

	- The over-background and static color variants have been removed.
	- The `over-background` and `static color` variants have been removed.

Conversation

cdransf commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

To-do list

Uh oh!

changeset-bot Bot commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File metrics

Summary

clearbutton

Uh oh!

github-actions Bot commented Jul 16, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Branch preview

Uh oh!

rise-erpelding left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

cdransf commented Jul 21, 2025

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

marissahuysentruyt left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

cdransf commented Jul 16, 2025 •

edited

Loading

changeset-bot Bot commented Jul 16, 2025 •

edited

Loading

github-actions Bot commented Jul 16, 2025 •

edited

Loading

github-actions Bot commented Jul 16, 2025 •

edited

Loading