fix(stepper): clarify mod definitions #3670

marissahuysentruyt · 2025-04-15T17:36:42Z

Description

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

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.

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

in express, for focus-hover-invalid was defined as transparent, but that looks like a bug.

- updates metadata - updates some selectors for bug fixes and easier translation in swc

changeset-bot · 2025-04-15T17:36:46Z

⚠️ No Changeset found

Latest commit: ed0a922

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

marissahuysentruyt · 2025-04-15T17:44:09Z

components/stepper/themes/express.css

@@ -38,7 +38,6 @@
 		/** Invalid **/
 		--spectrum-stepper-border-color-invalid: transparent;
 		--spectrum-stepper-border-color-focus-invalid: transparent;
-		--spectrum-stepper-border-color-focus-hover-invalid: transparent;


TODO: this was looking like a bug on focus+hover. double check if this change is necessary any more.

I don't have a more defined grasp on why that's showing up now, except that it's now part of the textfield mod stack, so it makes sense that it's rendering now.

marissahuysentruyt · 2025-04-15T17:46:24Z

components/stepper/index.css

+					--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-keyboard-focus)));
+					--mod-textfield-border-color-hover: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-keyboard-focus)));


These changes correct some keyboard focus hover border colors.

For a keyboard focused stepper, we were relying on the regular hover border color (which is gray-600, I believe):

It's now changed to gray-800 (just keeping the keyboard focus color even on hover), but is that correct? It felt like a bug, but that is how textfield, combobox, and picker all work. However, with this update, the default stepper now behaves like the invalid default stepper, where the keyboard focus border color does not respond to hovering or not.

github-actions · 2025-04-15T17:48:25Z

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

github-actions · 2025-04-15T17:49:53Z

File metrics

Summary

Total size: 2.25 MB^*
Total change (Δ): 🟢 ⬇ 4.59 KB (-0.20%)

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

Package	Size	Minified	Gzipped	Δ
stepper	19.39 KB	18.49 KB	2.39 KB	🔴 ⬆ 1.05 KB

File change details

stepper

Filename	Head	Minified	Gzipped	Compared to base
index-base.css	17.70 KB	16.88 KB	2.25 KB	🔴 ⬆ 1.05 KB
index-theme.css	2.77 KB	2.69 KB	0.66 KB	-
index.css	19.39 KB	18.49 KB	2.39 KB	🔴 ⬆ 1.05 KB
metadata.json	9.01 KB	-	-	🔴 ⬆ 0.05 KB
themes/express.css	2.10 KB	2.03 KB	0.65 KB	🔴 ⬆ 0.04 KB
themes/spectrum-two.css	2.23 KB	2.15 KB	0.64 KB	-
themes/spectrum.css	2.23 KB	2.16 KB	0.65 KB	-

tokens

Filename	Head	Minified	Gzipped	Compared to base
css/dark-vars.css	48.04 KB	-	-	🟢 ⬇ 0.28 KB
css/global-vars.css	44.20 KB	-	-	-
css/index.css	201.96 KB	-	-	🟢 ⬇ 4.04 KB
css/large-vars.css	32.08 KB	-	-	-
css/light-vars.css	48.00 KB	-	-	🟢 ⬇ 0.28 KB
css/medium-vars.css	32.24 KB	-	-	-
json/tokens.json	289.94 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-04-15T17:58:24Z

components/stepper/index.css

 				}
 			}

 			&.is-keyboardFocused {
 				--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus)));
+				--mod-textfield-border-color-keyboard-focus: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-keyboard-focus, var(--spectrum-stepper-border-color-keyboard-focus)));


If I'm remembering correctly, following the variables in dev tools, I noticed that this textfield mod was undefined. Adding it here fixed what seemed like a styling bug, where the buttons and textfields were behaving differently between the default & invalid variants.

Production:

Screen.Recording.2025-04-15.at.2.00.03.PM.mov

This branch:

Screen.Recording.2025-04-15.at.2.01.56.PM.mov

marissahuysentruyt · 2025-04-15T18:05:29Z

components/stepper/index.css

@@ -254,15 +256,18 @@
 				/* stylelint-disable-next-line max-nesting-depth -- @todo reduce complexity of selectors */
 				&:hover {
 					--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));
+					--mod-textfield-border-color-focus: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));


A similar situation here as described above, where this textfield mod was actually the mod we needed for the focus+hover. It was undefined when I looked through dev tools.

marissahuysentruyt · 2025-04-15T18:06:03Z

components/stepper/index.css


 			&:hover {
 				--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-stepper-border-color-focus-hover-invalid)));
+				--mod-textfield-border-color-invalid-hover: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-focus-hover-invalid, var(--spectrum-stepper-border-color-focus-hover-invalid)));


Another similar finding, that we were missing a textfield mod in the invalid state.

marissahuysentruyt · 2025-04-15T18:07:40Z

components/stepper/index.css

-				--mod-infield-button-border-color: var(--mod-stepper-buttons-border-color-focus-hover, var(--spectrum-stepper-buttons-border-color-focus-hover));
-				--mod-textfield-focus-indicator-width: 0;
-				--mod-textfield-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));
+				--mod-infield-button-border-color: var(--mod-stepper-buttons-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover));


The simplest solution to this border color issue was using --spectrum-stepper-border-color-focus-hover, instead of --spectrum-stepper-buttons-border-color-focus-hover. That kept coming up undefined, even though it was in the spectrum-two.css file.

marissahuysentruyt · 2025-04-15T18:08:09Z

components/stepper/index.css

-				--mod-textfield-border-color: var(--highcontrast-stepper-border-color-focus-hover, var(--mod-stepper-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover)));
+				--mod-infield-button-border-color: var(--mod-stepper-buttons-border-color-focus-hover, var(--spectrum-stepper-border-color-focus-hover));
+				--mod-textfield-focus-indicator-width: var(--mod-stepper-focus-indicator-width, 0);
+				--mod-textfield-border-color-focus: var(--mod-stepper-border-color-focus, var(--spectrum-stepper-border-color-focus-hover));


The mod for just the textfield border wasn't working, but changing it to the focus border mod did. 🤷‍♀️

marissahuysentruyt · 2025-04-15T18:13:18Z

components/stepper/index.css

+	&:hover:not(.is-invalid, .is-disabled, .is-focused, .is-keyboardFocused) {
 		--mod-infield-button-border-color: var(--mod-stepper-buttons-border-color-hover, var(--spectrum-stepper-buttons-border-color-hover));
 	}

 	&:not(.is-disabled) {
-		.is-focused,
+		&.is-focused,


Since number field has been tricky as of late, can we update these selectors?

I'm pretty sure both of these selector changes were updated in this PR (we deprioritized a couple of months ago, that's all).

marissahuysentruyt · 2025-04-21T18:09:59Z

mod in question already had other mods within their definitions that customers can target to customize. No action needed 😊

tied/related to #3558

marissahuysentruyt added 2 commits April 15, 2025 13:04

fix(stepper): remove transparent border color

a8aa2a4

in express, for focus-hover-invalid was defined as transparent, but that looks like a bug.

fix(stepper): ensure mod passthroughs can still be surfaced

ed0a922

- updates metadata - updates some selectors for bug fixes and easier translation in swc

marissahuysentruyt force-pushed the marissahuysentruyt/fix-reduce-mod-definitions branch from 2e9834f to ed0a922 Compare April 15, 2025 17:40

marissahuysentruyt commented Apr 15, 2025

View reviewed changes

marissahuysentruyt added the do not merge A flag for a branch indicating it should not be merged. label Apr 16, 2025

marissahuysentruyt self-assigned this Apr 16, 2025

marissahuysentruyt closed this Apr 21, 2025

marissahuysentruyt mentioned this pull request Apr 22, 2025

feat(stepper): s2 number field/stepper migration #3681

Open

66 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(stepper): clarify mod definitions #3670

fix(stepper): clarify mod definitions #3670

marissahuysentruyt commented Apr 15, 2025

changeset-bot bot commented Apr 15, 2025 •

edited

Loading

marissahuysentruyt Apr 15, 2025

marissahuysentruyt Apr 15, 2025

marissahuysentruyt Apr 15, 2025 •

edited

Loading

github-actions bot commented Apr 15, 2025 •

edited

Loading

github-actions bot commented Apr 15, 2025 •

edited

Loading

stepper

tokens

marissahuysentruyt Apr 15, 2025 •

edited

Loading

marissahuysentruyt Apr 15, 2025 •

edited

Loading

marissahuysentruyt Apr 15, 2025

marissahuysentruyt Apr 15, 2025

marissahuysentruyt Apr 15, 2025 •

edited

Loading

marissahuysentruyt Apr 15, 2025 •

edited

Loading

marissahuysentruyt commented Apr 21, 2025

		--mod-infield-button-border-color: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-keyboard-focus)));
		--mod-textfield-border-color-hover: var(--highcontrast-stepper-border-color, var(--mod-stepper-border-color-hover, var(--spectrum-stepper-border-color-keyboard-focus)));

fix(stepper): clarify mod definitions #3670

fix(stepper): clarify mod definitions #3670

Conversation

marissahuysentruyt commented Apr 15, 2025

Description

How and where has this been tested?

Validation steps

Regression testing

Screenshots

To-do list

changeset-bot bot commented Apr 15, 2025 • edited Loading

⚠️ No Changeset found

marissahuysentruyt Apr 15, 2025

Choose a reason for hiding this comment

marissahuysentruyt Apr 15, 2025

Choose a reason for hiding this comment

marissahuysentruyt Apr 15, 2025 • edited Loading

Choose a reason for hiding this comment

github-actions bot commented Apr 15, 2025 • edited Loading

github-actions bot commented Apr 15, 2025 • edited Loading

File metrics

Summary

stepper

tokens

marissahuysentruyt Apr 15, 2025 • edited Loading

Choose a reason for hiding this comment

marissahuysentruyt Apr 15, 2025 • edited Loading

Choose a reason for hiding this comment

marissahuysentruyt Apr 15, 2025

Choose a reason for hiding this comment

marissahuysentruyt Apr 15, 2025

Choose a reason for hiding this comment

marissahuysentruyt Apr 15, 2025 • edited Loading

Choose a reason for hiding this comment

marissahuysentruyt Apr 15, 2025 • edited Loading

Choose a reason for hiding this comment

marissahuysentruyt commented Apr 21, 2025

changeset-bot bot commented Apr 15, 2025 •

edited

Loading

marissahuysentruyt Apr 15, 2025 •

edited

Loading

github-actions bot commented Apr 15, 2025 •

edited

Loading

github-actions bot commented Apr 15, 2025 •

edited

Loading

marissahuysentruyt Apr 15, 2025 •

edited

Loading

marissahuysentruyt Apr 15, 2025 •

edited

Loading

marissahuysentruyt Apr 15, 2025 •

edited

Loading

marissahuysentruyt Apr 15, 2025 •

edited

Loading