fix(button,statuslight,picker,etc): address regressions in migrated components #3687

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

components/colorarea/stories/template.js

@@ -45,6 +45,7 @@ export const Template = ({
 			></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

components/button/stories/button.test.js

-			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

components/button/stories/button.stories.js

+	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

components/floatingactionbutton/index.css

@@ -79,15 +79,15 @@
 		background-color: var(--highcontrast-floating-action-button-background-color-hover, var(--mod-floating-action-button-background-color-hover, var(--spectrum-floating-action-button-background-color-hover)));

 		.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

components/link/index.css

+
+	--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

components/logicbutton/index.css

@@ -40,6 +40,7 @@
 	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

components/picker/stories/picker.stories.js

@@ -52,6 +52,15 @@ export default {
 			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

components/statuslight/index.css

@@ -23,7 +23,7 @@
 	--spectrum-statuslight-line-height-cjk: var(--spectrum-cjk-line-height-100);

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

components/switch/index.css

+	--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

components/switch/index.css

@@ -420,5 +422,6 @@
 		--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

components/picker/stories/template.js

@@ -76,7 +72,22 @@ export const Picker = ({
 					customClasses: ["spectrum-Picker-icon"],
 				}, 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.

components/picker/stories/template.js

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

components/button/index.css

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

components/button/index.css

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

components/button/index.css

@@ -525,6 +471,13 @@ a.spectrum-Button {
 	text-align: var(--mod-button-text-align, center);
 }

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


From Add text wrapping option

castastrophe

Some suggestions and ideas here. Can't thank you enough for finding these fixes and getting them updated! I think we probably need separate changesets for each component since the changes don't apply across components.

.changeset/smart-spoons-sneeze.md

castastrophe · 2025-05-05T16:39:38Z

components/button/index.css

-		&.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 double checked the web component and you're correct that there is no selected state for button. Safe to remove!

components/button/index.css

castastrophe · 2025-05-05T16:43:02Z

components/button/stories/button.test.js

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


Do we need a workflow example though to validate spacing?

components/picker/index.css

components/picker/stories/template.js

.changeset/breezy-impalas-push.md

components/picker/stories/template.js

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

.changeset/smart-spoons-sneeze.md

Thanks for the detailed changesets ⭐

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

components/switch/index.css

+	--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

components/picker/stories/template.js Show resolved Hide resolved

marissahuysentruyt commented May 2, 2025

View reviewed changes

marissahuysentruyt marked this pull request as ready for review May 2, 2025 16:47

marissahuysentruyt added the skip_vrt Add to a PR to skip running VRT (but still pass the action) label May 2, 2025

jawinn self-requested a review May 2, 2025 18:41

castastrophe requested changes May 5, 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

.changeset/breezy-impalas-push.md Show resolved Hide resolved

.changeset/breezy-impalas-push.md Outdated Show resolved Hide resolved

components/picker/stories/template.js Show resolved Hide resolved

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(button,statuslight,picker,etc): address regressions in migrated components #3687

fix(button,statuslight,picker,etc): address regressions in migrated components #3687

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

button

floatingactionbutton

link

logicbutton

picker

statuslight

switch

marissahuysentruyt May 2, 2025

marissahuysentruyt May 2, 2025

castastrophe May 5, 2025

marissahuysentruyt May 5, 2025

marissahuysentruyt May 2, 2025

marissahuysentruyt May 2, 2025

marissahuysentruyt May 2, 2025

marissahuysentruyt May 2, 2025 •

edited

Loading

marissahuysentruyt May 2, 2025

marissahuysentruyt May 2, 2025

marissahuysentruyt May 2, 2025

marissahuysentruyt May 2, 2025

marissahuysentruyt May 2, 2025 •

edited

Loading

marissahuysentruyt May 2, 2025 •

edited

Loading

castastrophe May 5, 2025

marissahuysentruyt May 2, 2025

marissahuysentruyt May 2, 2025

castastrophe left a comment

castastrophe May 5, 2025

castastrophe May 5, 2025

jawinn left a comment

jawinn May 2, 2025

jawinn May 2, 2025


		--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);

fix(button,statuslight,picker,etc): address regressions in migrated components #3687

fix(button,statuslight,picker,etc): address regressions in migrated components #3687

Conversation

marissahuysentruyt commented May 1, 2025 • edited Loading

Description

Jira

How and where has this been tested?

Validation steps

Additional validation

Regression testing

Screenshots

To-do list

changeset-bot bot commented May 1, 2025 • edited Loading

🦋 Changeset detected

github-actions bot commented May 1, 2025 • edited Loading

github-actions bot commented May 1, 2025 • edited Loading

File metrics

Summary

button

floatingactionbutton

link

logicbutton

picker

statuslight

switch

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marissahuysentruyt May 2, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marissahuysentruyt May 2, 2025 • edited Loading

Choose a reason for hiding this comment

marissahuysentruyt May 2, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

castastrophe left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jawinn left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

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