fix(button,statuslight,picker,etc): address regressions in migrated components by marissahuysentruyt · Pull Request #3687 · adobe/spectrum-css

marissahuysentruyt · 2025-05-01T21:13:10Z

Description

This work addresses small regressions found in several components. For the most part. it was simple enough to update the token definitions correctly. Button and picker however, were slightly more involved, and required some adjustments to their templates and/or story files. The following components needed CSS fixes:

button
floating action button
link
logic button
picker
status light
switch

There was also a missing argument not being passed to the color handle child within the color area component, so that was added.

Jira

CSS-1175

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

Recent PR preview
3687 PR preview

Additional validation

Because the button component is used so widely, feel free to check on the following components to ensure they look as intended and follow their own design specs as well:

button group (self-explanatory 😝)
dropzone (uses buttons)
illustrated message (uses buttons)
form (uses picker)
dialog (uses buttons)
coachmark (uses buttons)
color area (passes focus to color handle now)
pagination (uses buttons)

Regression testing

Validate:

The documentation pages for at least two other components are still loading, including:

The pages render correctly, are accessible, and are responsive.

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

changeset-bot · 2025-05-01T21:13:14Z

🦋 Changeset detected

Latest commit: 1de55cf

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

This PR includes changesets to release 7 packages

Name	Type
@spectrum-css/switch	Patch
@spectrum-css/statuslight	Patch
@spectrum-css/link	Patch
@spectrum-css/logicbutton	Patch
@spectrum-css/floatingactionbutton	Patch
@spectrum-css/button	Patch
@spectrum-css/picker	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-05-01T21:29:01Z

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

github-actions · 2025-05-01T21:38:25Z

File metrics

Summary

Total size: 1.38 MB^*
✅ No change in file sizes

Package	Size	Minified	Gzipped
button	29.79 KB	28.41 KB	3.63 KB
floatingactionbutton	7.07 KB	6.79 KB	1.22 KB
link	5.04 KB	4.78 KB	1.14 KB
logicbutton	9.39 KB	8.92 KB	1.70 KB
picker	28.65 KB	27.36 KB	3.52 KB
statuslight	12.35 KB	11.82 KB	1.87 KB
switch	24.71 KB	23.57 KB	2.69 KB

File change details

button

Filename	Head	Minified	Gzipped	Compared to base
index.css	29.79 KB	28.41 KB	3.63 KB	🟢 ⬇ 1.21 KB
metadata.json	11.49 KB	-	-	🟢 ⬇ 0.44 KB

floatingactionbutton

Filename	Head	Minified	Gzipped	Compared to base
index.css	7.07 KB	6.79 KB	1.22 KB	🔴 ⬆ < 0.01 KB
metadata.json	3.90 KB	-	-	-

link

Filename	Head	Minified	Gzipped	Compared to base
index.css	5.04 KB	4.78 KB	1.14 KB	🔴 ⬆ 0.18 KB
metadata.json	2.67 KB	-	-	🔴 ⬆ 0.11 KB

logicbutton

Filename	Head	Minified	Gzipped	Compared to base
index.css	9.39 KB	8.92 KB	1.70 KB	🔴 ⬆ 0.02 KB
metadata.json	4.34 KB	-	-	-

picker

Filename	Head	Minified	Gzipped	Compared to base
index.css	28.65 KB	27.36 KB	3.52 KB	🟢 ⬇ 0.16 KB
metadata.json	14.26 KB	-	-	🟢 ⬇ 0.16 KB

statuslight

Filename	Head	Minified	Gzipped	Compared to base
index.css	12.35 KB	11.82 KB	1.87 KB	🔴 ⬆ < 0.01 KB
metadata.json	7.96 KB	-	-	🔴 ⬆ < 0.01 KB

switch

Filename	Head	Minified	Gzipped	Compared to base
index.css	24.71 KB	23.57 KB	2.69 KB	🔴 ⬆ 0.34 KB
metadata.json	12.70 KB	-	-	🔴 ⬆ 0.14 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.

marissahuysentruyt · 2025-05-02T16:03:32Z

 			></div>
 			${ColorHandle({
 				isDisabled,
+				isFocused,


Passing isFocused to the color handle is in line with the example on the guidelines site for color area.

marissahuysentruyt · 2025-05-02T16:24:50Z

-			iconName: "Edit",
-			iconSet: "workflow",


These are already defined in the template being used, so it should be safe to remove them.

Do we need a workflow example though to validate spacing?

Hm, hopefully I'm not misunderstanding the test template, but I'm pretty sure they're already defined. The "Line wrap" test scenario calls for the ButtonIconGroup template. ButtonIconGroup has 4 wrapping buttons- 2 with workflow icons and 2 with UI icons. So I think we have the workflow examples & spacing covered. These extra iconName and iconSet args were just repeats and not doing anything anyways (since the icons are defined in ButtonIconGroup instead).

If that's not accurate, I can definitely revert this!

marissahuysentruyt · 2025-05-02T16:26:15Z

+	label: "Be a premium member",
+	noWrap: true,


These 2 args were being repeated in each template in TextWrapTemplate, so I moved them here (it also made it clearer to me to see the noWrap: true in the story args as well).

marissahuysentruyt · 2025-05-02T16:28:11Z


 		.spectrum-FloatingActionButton-icon {
-			fill: var(--highcontrast-floating-action-button-icon-color-hover, var(--mod-floating-action-button-icon-color-hover, var(--spectrum-floating-action-button-icon-color-hover)));
+			color: var(--highcontrast-floating-action-button-icon-color-hover, var(--mod-floating-action-button-icon-color-hover, var(--spectrum-floating-action-button-icon-color-hover)));


Changing from fill to color made the icon actually follow the defined colors in this CSS file, instead of picking up just the .spectrum-Icon definitions.

marissahuysentruyt · 2025-05-02T16:30:36Z

+
+	--spectrum-link-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);


These weren't explicitly defined in the link token specs. However, it didn't make sense to have a static black link with a blue focus ring. It doesn't really match how most of the other static color components were handling their focus rings.

marissahuysentruyt · 2025-05-02T16:31:59Z

 	padding: var(--mod-logic-button-padding, var(--spectrum-component-edge-to-text-50));

 	border-width: var(--mod-logic-button-border-width, var(--spectrum-border-width-200));
+	border-style: solid;


I noticed the weird border was occurring on logic button, similar to the border we saw on action button. That's the solution I used here too 👍

marissahuysentruyt · 2025-05-02T16:35:22Z

 			control: "boolean",
 			if: { arg: "labelPosition", eq: "side" },
 		},
+		showWorkflowIcon: {


This addition can be found in the docs-to-storybook PR for picker: Picker docs to storybook migration

marissahuysentruyt · 2025-05-02T16:36:29Z


 	/* Font */
-	--spectrum-statuslight-font-family: var(--spectrum-default-font-family);
+	--spectrum-statuslight-font-family: var(--spectrum-sans-font-family-stack);


I changed this to the font-family-stack token that we've been favoring instead.

marissahuysentruyt · 2025-05-02T16:37:26Z

+	--spectrum-switch-animation-duration-100: var(--spectrum-animation-duration-100);
+	--spectrum-switch-animation-duration-200: var(--spectrum-animation-duration-200);


From the switch migration, I noticed these 2 custom props were missing. I don't think we should see any difference, expect that the styles have one extra layer of token abstraction.

marissahuysentruyt · 2025-05-02T16:38:11Z

 		--highcontrast-switch-background-color-selected-disabled: GrayText;

 		--highcontrast-switch-focus-indicator-color: ButtonText;
+		forced-color-adjust: none;


I noticed this had been added to this force-colors query in the switch migration: S2 switch migration

marissahuysentruyt · 2025-05-02T16:38:55Z

 				}, context))
 			}
-			<span class="${rootClass}-label is-placeholder">${placeholder}</span>
+			${when(showWorkflowIcon, () =>


Looks like S2 still supports a leading icon, so all of this has been added. If I remember correctly, however, it wasn't in the initial S2 migration, but it was in the docs-to-storybook migration listed in my other comment.

marissahuysentruyt · 2025-05-02T16:46:09Z

-		&.is-selected {
-			--spectrum-button-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
-			--spectrum-button-background-color-hover: var(--spectrum-neutral-subdued-background-color-hover);
-			--spectrum-button-background-color-down: var(--spectrum-neutral-subdued-background-color-down);
-			--spectrum-button-background-color-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
-		}


I don't believe there's a "selected" state for buttons. That doesn't seem to an option in Figma, isn't represented anywhere in the guidelines page, there's no "selected" state in the Storybook controls. We do have this block on main (actually, several is-selected selector blocks).

Think it's ok to remove? I don't see is-selected getting added to a button anywhere, but am I missing it in a component somewhere?

I double checked the web component and you're correct that there is no selected state for button. Safe to remove!

marissahuysentruyt · 2025-05-02T16:46:45Z

-		--spectrum-button-icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size)));
+		/* stylelint-disable-next-line spectrum-tools/no-unknown-custom-properties -- Any block-size difference between the intended workflow icon size and actual icon used. Helps support any existing use of smaller UI icons instead of intended Workflow icons. */
+		--_icon-size-difference: max(0px, var(--spectrum-button-intended-icon-size) - var(--spectrum-icon-block-size, var(--spectrum-button-intended-icon-size)));


Some of the changes in this selector corresponded to the changes in this PR: PostCSS plugin updates/fixes

marissahuysentruyt · 2025-05-02T16:47:06Z

 }

+/* Disable button label wrap */
+.spectrum-Button--noWrap .spectrum-Button-label {


From Add text wrapping option

jawinn

This looks good to me. I looked over the button CSS in detail with a diff against the original S2 migration, and this looks correct when merged with the later changes made to main.

I only have one minor suggestion for two variable names.

jawinn · 2025-05-02T18:42:41Z

Thanks for the detailed changesets ⭐

jawinn · 2025-05-02T19:48:45Z

+	--spectrum-switch-animation-duration-100: var(--spectrum-animation-duration-100);
+	--spectrum-switch-animation-duration-200: var(--spectrum-animation-duration-200);


Can we name these for their purpose instead of their value? Something like --spectrum-switch-animation-duration and --spectrum-switch-animation-duration-label?

- redefines correct tokens, particularly for button border colors - reimplements button label overflow behavior (--noWrap class) - updates metadata - cleans up test case and disabled text wrap story to reduce repetitive args/code

- redefines and uses correct tokens, particularly for switch animation duration - updates metadata

- fix token usage, particularly for border color and width - fixes picker template to support a leading icon and adds associated controls to story args - passes state data into picker template so hover, active, focus styles are applied correctly

- also updates metadata

- adds a note to the changeset

- border-style: solid removes the 3D effect on the button border - adds a note to the changeset

- updates the animation custom property names to reflect their purpose - updates metadata - fixes up some changeset wording

marissahuysentruyt changed the base branch from main to spectrum-two May 1, 2025 21:13

marissahuysentruyt changed the title ~~Marissahuysentruyt/css 1175 regressions in migrated components~~ fix(button,statuslight,picker,switch,link): address regressions in migrated components May 1, 2025

marissahuysentruyt self-assigned this May 1, 2025

marissahuysentruyt added bug Results from a bug in the CSS implementation size-1 XS ~1-6hrs; nearly trivial, a few hours, could do more than one in a single day. S2 Spectrum 2 labels May 1, 2025

marissahuysentruyt force-pushed the marissahuysentruyt/css-1175-regressions-in-migrated-components branch from 4971254 to 1cddd04 Compare May 1, 2025 21:24

marissahuysentruyt requested review from adobe-spectrum-bot and removed request for adobe-spectrum-bot May 2, 2025 15:00

marissahuysentruyt changed the title ~~fix(button,statuslight,picker,switch,link): address regressions in migrated components~~ fix(button,statuslight,picker,etc): address regressions in migrated components May 2, 2025

marissahuysentruyt commented May 2, 2025

View reviewed changes

marissahuysentruyt force-pushed the marissahuysentruyt/css-1175-regressions-in-migrated-components branch from b1b84b5 to ddd5e69 Compare May 2, 2025 16:16

marissahuysentruyt added the ready-for-review label May 2, 2025

marissahuysentruyt commented May 2, 2025

View reviewed changes

Comment thread components/picker/stories/template.js

marissahuysentruyt commented May 2, 2025

View reviewed changes

marissahuysentruyt force-pushed the marissahuysentruyt/css-1175-regressions-in-migrated-components branch from ddd5e69 to 4a1b2d4 Compare May 5, 2025 17:34

castastrophe approved these changes May 5, 2025

View reviewed changes

Comment thread .changeset/breezy-impalas-push.md

Comment thread .changeset/breezy-impalas-push.md Outdated

Comment thread components/picker/stories/template.js

castastrophe force-pushed the spectrum-two branch from 2de9dee to ef31bff Compare May 5, 2025 20:42

jawinn approved these changes May 5, 2025

View reviewed changes

castastrophe force-pushed the spectrum-two branch 2 times, most recently from 7e8269c to 4ce8d19 Compare May 5, 2025 21:18

marissahuysentruyt added 13 commits May 6, 2025 11:36

fix(button): fix s2 regressions

2a5d33a

- redefines correct tokens, particularly for button border colors - reimplements button label overflow behavior (--noWrap class) - updates metadata - cleans up test case and disabled text wrap story to reduce repetitive args/code

chore(button): add changeset

770f68b

fix(switch): fix regressions

142df1a

- redefines and uses correct tokens, particularly for switch animation duration - updates metadata

chore(switch): add changeset

8d27661

fix(statuslight): correct font-family token

44b3f3c

fix(statuslight): adds focus ring color token

48a46ce

fix(picker): fix regressions

ac304ba

- fix token usage, particularly for border color and width - fixes picker template to support a leading icon and adds associated controls to story args - passes state data into picker template so hover, active, focus styles are applied correctly

chore(link,picker,statuslight,switch): create changeset

5457eae

- also updates metadata

docs(colorarea): pass focus to color handle in template

97b483f

fix(floatingactionbutton): use color property instead of fill for icon

9fd0ac9

- adds a note to the changeset

fix(logicbutton): defines border style

795142c

- border-style: solid removes the 3D effect on the button border - adds a note to the changeset

chore: separate changesets for each component

73d95d0

refactor(switch): change animation token name

1de55cf

- updates the animation custom property names to reflect their purpose - updates metadata - fixes up some changeset wording

marissahuysentruyt force-pushed the marissahuysentruyt/css-1175-regressions-in-migrated-components branch from 4a1b2d4 to 1de55cf Compare May 6, 2025 15:59

marissahuysentruyt merged commit 53d1e5e into spectrum-two May 6, 2025
12 checks passed

marissahuysentruyt deleted the marissahuysentruyt/css-1175-regressions-in-migrated-components branch May 6, 2025 16:09

This was referenced May 16, 2025

chore(swatch,menu,swatchgroup): fix reverted metadata assets #3752

Merged

chore: merge latest updates from main #3777

Merged

castastrophe mentioned this pull request Jul 25, 2025

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

Merged

3 tasks

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


		--spectrum-link-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);

		--spectrum-switch-animation-duration-100: var(--spectrum-animation-duration-100);
		--spectrum-switch-animation-duration-200: var(--spectrum-animation-duration-200);

Conversation

marissahuysentruyt commented May 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Jira

How and where has this been tested?

Validation steps

Additional validation

Regression testing

Screenshots

To-do list

Uh oh!

changeset-bot Bot commented May 1, 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 May 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

File metrics

Summary

button

floatingactionbutton

link

logicbutton

picker

statuslight

switch

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!

marissahuysentruyt May 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

marissahuysentruyt May 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

marissahuysentruyt May 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

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!

Uh oh!

Uh oh!

Uh oh!

jawinn left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt commented May 1, 2025 •

edited

Loading

changeset-bot Bot commented May 1, 2025 •

edited

Loading

github-actions Bot commented May 1, 2025 •

edited

Loading

github-actions Bot commented May 1, 2025 •

edited

Loading

marissahuysentruyt May 2, 2025 •

edited

Loading

marissahuysentruyt May 2, 2025 •

edited

Loading

marissahuysentruyt May 2, 2025 •

edited

Loading