refactor(stepper): standardize selectors and passthroughs usage #3558

marissahuysentruyt · 2025-02-14T21:18:01Z

Description

During #3536, we found that the stepper had more bugs particularly in dark mode, and particularly when you hovered over other states, like focus or keyboard-focus. This PR should revamp the CSS so that the stepper states are triggered in the expected way, where hovering over any of the nested subcomponents triggers the correct border color changes to all subcomponents. As an example, hovering over the stepper buttons should trigger a border color change in the stepper buttons, AS WELL AS trigger the border color on the stepper textfield.

The PR also adds focus + hover & keyboardFocus + hover Chromatic test cases to ensure we don't miss that state in the future.

Jira/Specs

CSS-1127
Also related to CSS-1112

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

Pull down the branch or visit the deploy preview.
Verify nothing on the stepper docs page looks broken. No visual changes were made that should have effected any of the these components.
Visit the chromatic testing preview
For each state in the default test case, verify that hovering over the stepper's textfield only changes the border colors of the stepper textfield AND the stepper buttons. The borders should change to the same color.
Similarly, for each state in the default test case, verify that hovering over the stepper's buttons only changes the border colors of the stepper textfield AND the stepper buttons. The borders should change to the same color.
Repeat this process for the quiet, invalid, and quiet+invalid variants. Border colors should change together regardless of where a user hovers their cursor.
Repeat this process for dark mode as well.
Verify all behaviors are the same in the Spectrum 1 context.
Verify all behaviors are the same in the Express context.

A couple of notes while reviewing:

Some of the more subtle border color changes (like focus to focus+hover) are more easily seen in dark mode.
The disabled styles should win out every time. Hover, focus and keyboardFocus styles should not be present if a stepper is disabled.

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

Before 🚫

After ✅

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-02-14T21:18:05Z

🦋 Changeset detected

Latest commit: 876ee12

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

This PR includes changesets to release 1 package

Name	Type
@spectrum-css/stepper	Minor

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

components/stepper/themes/spectrum-two.css

github-actions · 2025-02-14T21:27:18Z

File metrics

Summary

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

Package	Size	Minified	Gzipped
button	38.55 KB	36.64 KB	4.20 KB
stepper	18.71 KB	17.82 KB	2.35 KB

File change details

button

Filename	Head	Minified	Gzipped	Compared to base
index-base.css	31.05 KB	29.48 KB	3.80 KB	-
index-theme.css	12.40 KB	12.01 KB	1.14 KB	-
index.css	38.55 KB	36.64 KB	4.20 KB	-
metadata.json	19.88 KB	-	-	🟢 ⬇ 0.08 KB
themes/express.css	9.68 KB	9.38 KB	1.06 KB	-
themes/spectrum-two.css	9.44 KB	9.15 KB	1.07 KB	-
themes/spectrum.css	9.76 KB	9.46 KB	1.08 KB	-

stepper

Filename	Head	Minified	Gzipped	Compared to base
index-base.css	17.22 KB	16.41 KB	2.21 KB	🔴 ⬆ 0.56 KB
index-theme.css	3.03 KB	2.95 KB	0.70 KB	🔴 ⬆ 0.27 KB
index.css	18.71 KB	17.82 KB	2.35 KB	🔴 ⬆ 0.36 KB
metadata.json	9.35 KB	-	-	🔴 ⬆ 0.40 KB
themes/express.css	2.36 KB	2.28 KB	0.68 KB	🔴 ⬆ 0.30 KB
themes/spectrum-two.css	2.03 KB	1.97 KB	0.64 KB	🟢 ⬇ 0.20 KB
themes/spectrum.css	2.12 KB	2.05 KB	0.66 KB	🟢 ⬇ 0.11 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-02-27T15:14:11Z

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

marissahuysentruyt · 2025-03-03T19:38:16Z

components/stepper/themes/spectrum-two.css

@@ -17,21 +17,17 @@
 		--spectrum-stepper-border-color-default: var(--spectrum-gray-500);
 		--spectrum-stepper-border-color-hover: var(--spectrum-gray-600);
 		--spectrum-stepper-border-color-focus: var(--spectrum-gray-800);
-		--spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-800);
+		--spectrum-stepper-border-color-focus-hover: var(--spectrum-gray-900);


The s2 token specs say gray-900 for focus+hover

marissahuysentruyt · 2025-03-03T19:38:18Z

components/stepper/themes/spectrum-two.css

-		--spectrum-stepper-buttons-border-color: var(--spectrum-gray-500);
-		--spectrum-stepper-buttons-background-color: var(--spectrum-gray-100);
-		--spectrum-stepper-buttons-border-color-hover: var(--spectrum-gray-600);
-		--spectrum-stepper-buttons-border-color-focus: var(--spectrum-gray-800);
-		--spectrum-stepper-buttons-border-color-keyboard-focus: var(--spectrum-gray-900);


I found it easier to use the --mod-stepper-border-color all over, in tandem with the --mod-infield-button-border-color to target the stepper buttons. However, if we remove these, would this be a breaking change?

marissahuysentruyt · 2025-03-03T19:38:58Z

components/stepper/themes/spectrum-two.css


 		--spectrum-stepper-button-border-width: var(--spectrum-border-width-100);

 		/** Invalid **/
 		--spectrum-stepper-border-color-invalid: var(--spectrum-negative-border-color-default);
+		--spectrum-stepper-border-color-hover-invalid: var(--spectrum-negative-border-color-hover);


Looked like we were missing the invalid hover color (token specs)

marissahuysentruyt · 2025-03-03T19:57:08Z

components/stepper/index.css

+	&.is-focused,
+	&:focus {


The additional :not(.is-disabled) was making it really, really difficult to target these mods and nested styles. Removing them helped, and I don't think I saw any regressions with the disabled states. Please double check that all of the disabled styles are winning out and rendering, even though I removed the :not().

github-actions · 2025-03-04T15:49:08Z

components/stepper/themes/spectrum.css

+		&.is-disabled:not(.spectrum-Stepper--quiet) {
+			--spectrum-stepper-border-color-disabled: transparent;
+		}


⚠️ [stylelint] <spectrum-tools/theme-alignment> _{reported by reviewdog 🐶}
Selector "&.is-disabled:not(.spectrum-Stepper--quiet)" is not used or defined in the base file (themes/spectrum-two.css).

- fixes the focus & focus hover states, so that hovering over either element (the textfield OR the stepper buttons) will trigger the SAME border color for both elements. - removed some of the :not(disabled) to simplify selectors. - add keyboardfocused+hovered test - keyboardfocused+hovered states showcase hovering over any part of the element triggers the SAME border color for the textfield and the infield buttons - corrects the s1 borders for disabled steppers in quiet & default variants - corrects the focus+hover state in express - metadata updated and removal of code/TODO comments

marissahuysentruyt · 2025-03-07T15:44:50Z

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)));
-			}
-		}
+	&:not(.is-disabled).is-keyboardFocused,


The keyboard-focus still has differing border colors in the textfield vs. stepper buttons.

marissahuysentruyt self-assigned this Feb 14, 2025

marissahuysentruyt added the wip This is a work in progress, don't judge. label Feb 14, 2025

marissahuysentruyt changed the base branch from main to marissahuysentruyt/css-1112-background-color-form-elements-fix February 14, 2025 21:22

marissahuysentruyt commented Feb 14, 2025

View reviewed changes

components/stepper/themes/spectrum-two.css Show resolved Hide resolved

marissahuysentruyt force-pushed the marissahuysentruyt/css-1112-background-color-form-elements-fix branch from 89ab810 to 408ed9a Compare February 18, 2025 20:19

marissahuysentruyt force-pushed the marissahuysentruyt/fix-stepper-border-focus-hover-color branch from 6ac2359 to 9632409 Compare February 18, 2025 20:23

marissahuysentruyt changed the title ~~Marissahuysentruyt/fix stepper border focus hover color~~ fix(stepper): border focus hover color Feb 18, 2025

marissahuysentruyt marked this pull request as ready for review February 18, 2025 20:25

marissahuysentruyt force-pushed the marissahuysentruyt/css-1112-background-color-form-elements-fix branch from 408ed9a to a09845c Compare February 18, 2025 21:02

marissahuysentruyt force-pushed the marissahuysentruyt/fix-stepper-border-focus-hover-color branch from 9632409 to f09bfc4 Compare February 18, 2025 21:14

marissahuysentruyt force-pushed the marissahuysentruyt/css-1112-background-color-form-elements-fix branch from a09845c to 220b448 Compare February 26, 2025 15:27

marissahuysentruyt force-pushed the marissahuysentruyt/fix-stepper-border-focus-hover-color branch from f09bfc4 to 6f014e1 Compare February 26, 2025 15:28

marissahuysentruyt force-pushed the marissahuysentruyt/css-1112-background-color-form-elements-fix branch 2 times, most recently from 4482b05 to a73d206 Compare February 27, 2025 14:57

Base automatically changed from marissahuysentruyt/css-1112-background-color-form-elements-fix to main February 27, 2025 15:06

marissahuysentruyt force-pushed the marissahuysentruyt/fix-stepper-border-focus-hover-color branch from 6f014e1 to ce36838 Compare February 27, 2025 15:08

marissahuysentruyt marked this pull request as draft February 28, 2025 16:57

marissahuysentruyt force-pushed the marissahuysentruyt/fix-stepper-border-focus-hover-color branch 3 times, most recently from 5ff92bd to 4243813 Compare March 3, 2025 19:35

marissahuysentruyt commented Mar 3, 2025

View reviewed changes

marissahuysentruyt force-pushed the marissahuysentruyt/fix-stepper-border-focus-hover-color branch from 4243813 to 570459d Compare March 4, 2025 15:44

github-actions bot reviewed Mar 4, 2025

View reviewed changes

marissahuysentruyt force-pushed the marissahuysentruyt/fix-stepper-border-focus-hover-color branch from 570459d to 6bf8376 Compare March 4, 2025 17:07

marissahuysentruyt force-pushed the marissahuysentruyt/fix-stepper-border-focus-hover-color branch from b9ad2b2 to de13e95 Compare March 4, 2025 17:40

marissahuysentruyt added bug Results from a bug in the CSS implementation size-3 M ~18-30hrs; moderate effort or complexity, several work days needed. run_vrt For use on PRs looking to kick off VRT and removed wip This is a work in progress, don't judge. labels Mar 4, 2025

marissahuysentruyt marked this pull request as ready for review March 4, 2025 17:42

marissahuysentruyt added the ready-for-review label Mar 4, 2025

marissahuysentruyt added 3 commits March 4, 2025 14:29

chore(stepper): add focused+hovered test

94657cb

chore(stepper): create changeset

3206b0b

marissahuysentruyt force-pushed the marissahuysentruyt/fix-stepper-border-focus-hover-color branch from de13e95 to 3206b0b Compare March 4, 2025 19:30

chore: update tokens/yarn.lock after rebase

876ee12

marissahuysentruyt added the low priority Not a critical update or fix; can be deprioritized if necessary label Mar 6, 2025

marissahuysentruyt commented Mar 7, 2025

View reviewed changes

marissahuysentruyt removed run_vrt For use on PRs looking to kick off VRT ready-for-review labels Mar 7, 2025

marissahuysentruyt marked this pull request as draft March 7, 2025 19:09

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

castastrophe force-pushed the main branch 11 times, most recently from c68f4e3 to d2272ea Compare March 12, 2025 21:56

marissahuysentruyt changed the title ~~fix(stepper): border focus hover color~~ refactor(stepper): standardize selectors and passthroughs usage Mar 14, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(stepper): standardize selectors and passthroughs usage #3558

refactor(stepper): standardize selectors and passthroughs usage #3558

marissahuysentruyt commented Feb 14, 2025 •

edited

Loading

changeset-bot bot commented Feb 14, 2025 •

edited

Loading

github-actions bot commented Feb 14, 2025 •

edited

Loading

button

stepper

github-actions bot commented Feb 27, 2025 •

edited

Loading

marissahuysentruyt Mar 3, 2025

marissahuysentruyt Mar 3, 2025

marissahuysentruyt Mar 3, 2025

marissahuysentruyt Mar 3, 2025

github-actions bot Mar 4, 2025

marissahuysentruyt Mar 7, 2025

refactor(stepper): standardize selectors and passthroughs usage #3558

Are you sure you want to change the base?

refactor(stepper): standardize selectors and passthroughs usage #3558

Conversation

marissahuysentruyt commented Feb 14, 2025 • edited Loading

Description

Jira/Specs

How and where has this been tested?

Validation steps

Regression testing

Screenshots

To-do list

changeset-bot bot commented Feb 14, 2025 • edited Loading

🦋 Changeset detected

github-actions bot commented Feb 14, 2025 • edited Loading

File metrics

Summary

button

stepper

github-actions bot commented Feb 27, 2025 • edited Loading

marissahuysentruyt Mar 3, 2025

Choose a reason for hiding this comment

marissahuysentruyt Mar 3, 2025

Choose a reason for hiding this comment

marissahuysentruyt Mar 3, 2025

Choose a reason for hiding this comment

marissahuysentruyt Mar 3, 2025

Choose a reason for hiding this comment

github-actions bot Mar 4, 2025

Choose a reason for hiding this comment

marissahuysentruyt Mar 7, 2025

Choose a reason for hiding this comment

marissahuysentruyt commented Feb 14, 2025 •

edited

Loading

changeset-bot bot commented Feb 14, 2025 •

edited

Loading

github-actions bot commented Feb 14, 2025 •

edited

Loading

github-actions bot commented Feb 27, 2025 •

edited

Loading