fix(stepper): focus/focus+hover/keyboardFocus border colors #3621

marissahuysentruyt · 2025-03-13T18:55:31Z

Description

SWC got some design feedback on stepper for S2 foundations to "update the stepper focus hover border color to gray-900 (currently its 800)." This PR should address that by updating the values for focus-hover from gray-800 to gray-900, as well as update the stepper buttons' border color for keyboard-focus to gray-800, matching the nested textfield's keyboard-focus color.

Jira/Specs

This work relates to SWC-576 and SWC-501 I believe. 🤔

Video walkthrough

PR description and validation instructions

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 repo to run locally or visit the deploy preview [@cdransf]
Navigate to the stepper testing view.
In your browser, inspect the .spectrum-Stepper parent element of the Focused stepper test. [@cdransf]
By turning on the hover state in your inspector, verify the .spectrum-Stepper-buttons have a border color that resolves to gray-900 via the stepper-border-color-focus-hover variable. [@cdransf]
Then inspect the nested .spectrum-Stepper-input element. [@cdransf]
When you turn on the hover for that element in your inspector, the border color should also resolve to gray-900 via textfield-border-color-focus-hover. [@cdransf]
Inspect the keyboard-focused stepper in the testing grids. [@cdransf]
Check that both border colors of .spectrum-Stepper-buttons and .spectrum-Stepper-input elements resolve to gray-800. (no need to check the hover states for this one!) [@cdransf]

Note: I did find it slightly easier to visually see the differences here by toggling dark mode on in the Storybook toolbar.

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 tested these changes in Windows High Contrast mode.
If my change impacts other components, I have tested to make sure they don't break.
✨ This pull request is ready to merge. ✨

changeset-bot · 2025-03-13T18:55:35Z

🦋 Changeset detected

Latest commit: 79dedc4

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	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-03-13T19:00:21Z

File metrics

Summary

Total size: 2.25 MB^*

Package	Size	Minified	Gzipped
stepper	18.36 KB	17.49 KB	2.41 KB

stepper

Filename	Head	Minified	Gzipped	Compared to base
index-base.css	16.67 KB	15.89 KB	2.27 KB	-
index-theme.css	2.77 KB	2.69 KB	0.66 KB	-
index.css	18.36 KB	17.49 KB	2.41 KB	-
metadata.json	8.96 KB	-	-	-
themes/express.css	2.06 KB	1.99 KB	0.65 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	-

* 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-03-13T19:01:08Z

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

cdransf

Awesome validation steps! Looks great. ✨

TarunAdobe

Thank you so much for getting it done so quickly!!!

* feat(actionbutton): use s2 colors in spectrum-two theme (#3606) * feat(actionbutton): use closer to s2 colors in spectrum-two theme Requested colors update for action button, aligning the colors closer to the S2 design, post-foundations. In the foundations spectrum-two theme: - Removes the border - Changes the default background colors to match s2 specs - Updates the background colors used for static black and static white SWC-497 * fix(actionbutton): fix high contrast styles for selected disabled The selected + disabled button was not showing up as the disabled colors in high contrast mode. Fixed by adjusting the source order slightly in the high contrast media query so disabled is after selected and takes precedence. * fix(search): update disabled state in spectrum two (#3593) Co-authored-by: rise-erpelding <[email protected]> Co-authored-by: [ Cassondra ] <[email protected]> * chore(deps): bump the npm_and_yarn group with 2 updates (#3618) Bumps the npm_and_yarn group with 2 updates: [@babel/helpers](https://github.com/babel/babel/tree/HEAD/packages/babel-helpers) and [@babel/runtime](https://github.com/babel/babel/tree/HEAD/packages/babel-runtime). Updates `@babel/helpers` from 7.26.0 to 7.26.10 - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.26.10/packages/babel-helpers) Updates `@babel/runtime` from 7.24.4 to 7.26.10 - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.26.10/packages/babel-runtime) --- updated-dependencies: - dependency-name: "@babel/helpers" dependency-type: indirect dependency-group: npm_and_yarn - dependency-name: "@babel/runtime" dependency-type: indirect dependency-group: npm_and_yarn ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore: update release script install settings * fix(button): adjust s2 static colors [SWC-496] (#3613) * chore: release (#3619) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix(slider): corrects contrast bug caused by template default arg (#3614) * fix(stepper): fast follows for focus/focus+hover/keyboardFocus borders (#3621) * fix(stepper): focus/focus+hover/keyboardFocus border colors * chore(stepper): add changeset * fix(slider): offset variant border radius bug fix (#3611) * feat(slider): offset variant border radius bug fix * feat(slider): fix range slider * fix(combobox): border color fast follows swc-582 (#3609) * fix(combobox): correct s1/legacy container variable * fix(combobox): fast follow border color remapping - add mods for s2 foundations disabled picker button BG/border colors - correct disabled+read-only border color - add read-only border custom property - fixes express read-only border from gray-500 to gray-400 - update metadata.json * chore(combobox): create changeset * chore: release (#3623) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore: patch tj-actions vulnerability (#3626) * fix(alertbanner): change system variable from spectrum to legacy (#3624) * fix(alertbanner): change system: spectrum to legacy * chore(alertbanner): create changeset * test(checkbox): add more coverage for checkbox (#3625) * chore(checkbox): add isHovered state to checkbox - adds isHovered shared type and control to checkbox stories - adds several isHovered test cases - updates checkbox template to include isHovered arg * chore(form): fix the fieldgroup component input and labels * chore: release (#3631) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix(checkbox): add invalid+checked+hover checkbox styles (#3617) - add missing ::before pseudo to target the before element in the invalid/checked/hover state - update metadata.json - create changeset * chore: release (#3632) * chore: release --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix: undefined and duplicated variable after merging main fix(slider): remove duplicated values Remove a large number of duplicate values causing stylelint "Unexpected duplicate" warnings. It looks like things got doubled up somehow in a previous rebase or merge. This included duplicate t-shirt size classes. Also moves root styles block under the custom property definitions to be consistent with other components. fix(combobox): fixes undefined and duplicated values --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: TaraT <[email protected]> Co-authored-by: rise-erpelding <[email protected]> Co-authored-by: [ Cassondra ] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Cory Dransfeldt <[email protected]> Co-authored-by: Marissa Huysentruyt <[email protected]> Co-authored-by: aramos-adobe <[email protected]>

marissahuysentruyt added 2 commits March 13, 2025 14:45

fix(stepper): focus/focus+hover/keyboardFocus border colors

f645e6d

chore(stepper): add changeset

79dedc4

marissahuysentruyt self-assigned this Mar 13, 2025

marissahuysentruyt marked this pull request as ready for review March 13, 2025 20:21

marissahuysentruyt added ready-for-review fast-follows An issue or PR that quickly follows a release labels Mar 13, 2025

cdransf approved these changes Mar 13, 2025

View reviewed changes

Rajdeepc approved these changes Mar 14, 2025

View reviewed changes

marissahuysentruyt requested a review from TarunAdobe March 14, 2025 12:52

TarunAdobe approved these changes Mar 14, 2025

View reviewed changes

marissahuysentruyt merged commit 3aec28a into main Mar 14, 2025
28 of 34 checks passed

marissahuysentruyt deleted the marissahuysentruyt/stepper-focus-hover-fast-follow branch March 14, 2025 15:05

github-actions bot mentioned this pull request Mar 14, 2025

chore: release #3623

Merged

marissahuysentruyt mentioned this pull request Apr 3, 2025

fix(infield-button): updated border color for disabled state #3615

Merged

19 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(stepper): focus/focus+hover/keyboardFocus border colors #3621

fix(stepper): focus/focus+hover/keyboardFocus border colors #3621

Uh oh!

marissahuysentruyt commented Mar 13, 2025 •

edited by cdransf

Loading

Uh oh!

changeset-bot bot commented Mar 13, 2025

Uh oh!

github-actions bot commented Mar 13, 2025

Uh oh!

github-actions bot commented Mar 13, 2025 •

edited

Loading

Uh oh!

cdransf left a comment

Uh oh!

TarunAdobe left a comment •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

fix(stepper): focus/focus+hover/keyboardFocus border colors #3621

fix(stepper): focus/focus+hover/keyboardFocus border colors #3621

Uh oh!

Conversation

marissahuysentruyt commented Mar 13, 2025 • edited by cdransf Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Jira/Specs

Video walkthrough

How and where has this been tested?

Validation steps

Regression testing

Screenshots

To-do list

Uh oh!

changeset-bot bot commented Mar 13, 2025

🦋 Changeset detected

Uh oh!

github-actions bot commented Mar 13, 2025

File metrics

Summary

stepper

Uh oh!

github-actions bot commented Mar 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

cdransf left a comment

Choose a reason for hiding this comment

Uh oh!

TarunAdobe left a comment • 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!

Uh oh!

marissahuysentruyt commented Mar 13, 2025 •

edited by cdransf

Loading

github-actions bot commented Mar 13, 2025 •

edited

Loading

TarunAdobe left a comment •

edited

Loading