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

Rajdeepc · 2025-03-12T07:17:59Z

Description

The design feedback for number field revealed some requests regarding the border colors of the stepper/number field, and most recently related to the nested infield button. This PR aims to address that feedback.

Updates the value of disabled border of infield-button

Disabled state (in-field button)
Expected: gray-300 border

Additional feedback included:

Focus hover state (textfield)
Expected: gray-900 border ✅
Default state (in-field button)
Expected: gray-100 button background ✅
Disabled state (in-field button)
Expected: gray-300 border ✅
Hover state (in-field button)
Expected: gray-200 button background ✅
Key focus state (in-field button)
Expected: gray-200 button background
Expected: gray-900 chevron color

The green checkmarks above are styles that are already found for the stepper/number field styles in the CSS repo. The PRs that addressed these already can be found here:
#3536 (for the infield button background color corrections)
#3621 (for the focus+hover border color correction)

NOTE: We received some updated feedback from design regarding the key focus state, which means that no further CSS changes were necessary!

Key focus state (in-field button)
Expected: gray-100 button background (incorrectly had this as gray-200 originally) ✅
Expected: gray-800 chevron color (incorrectly had this as gray-900 originally) ✅

Jira/Specs

SWC-576

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 to run locally or visit the deploy preview. [@cdransf]
Navigate to the infield button docs page. [@cdransf]
Inspect the disabled infield button.
Verify the border color in the S2 context resolves to gray-300. [@cdransf]

Additional validation (the remaining validation steps likely were already completed in #3536 and #3621. This CSS already exists and functions as design expects 🥳 )

Verify the border color of the infield button resolves to gray-200 in both the S1 and Express contexts. [@cdransf]

Navigate to the stepper testing grid. [@cdransf]
Inspect the default stepper. Verify the nested infield button has a background color of gray-100. [@cdransf]

Inspect the hover state stepper. Inspect the .spectrum-InfieldButton element (one of the stepper buttons) and turn on the :hover state in your dev tools. Verify the nested infield button has a background color of gray-200. [@cdransf]

Inspect the keyboardFocus state stepper. Verify the nested infield button also has a background color of gray-100. [@cdransf]
Still in the keyboardFocus stepper, inspect the chevron within the infield button. It should have a color of gray-800. [@cdransf]

Inspect the focus state stepper. In your browser dev tools, turn on the :hover state of .spectrum-Stepper and .spectrum-Stepper-textfield. [@cdransf]
Verify in this focus+hover state, verify the textfield has a border of gray-900. [@cdransf]

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 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-12T07:18:04Z

🦋 Changeset detected

Latest commit: 9e84946

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

This PR includes changesets to release 2 packages

Name	Type
@spectrum-css/infieldbutton	Patch
@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-12T07:22:41Z

File metrics

Summary

Total size: 2.24 MB^*

Package	Size	Minified	Gzipped
infieldbutton	15.65 KB	15.06 KB	1.88 KB

infieldbutton

Filename	Head	Minified	Gzipped	Compared to base
index-base.css	14.77 KB	14.22 KB	1.78 KB	🔴 ⬆ < 0.01 KB
index-theme.css	1.77 KB	1.73 KB	0.59 KB	🔴 ⬆ 0.13 KB
index.css	15.65 KB	15.06 KB	1.88 KB	🔴 ⬆ 0.11 KB
metadata.json	7.82 KB	-	-	🔴 ⬆ 0.08 KB
themes/express.css	1.44 KB	1.40 KB	0.58 KB	🔴 ⬆ 0.07 KB
themes/spectrum-two.css	1.45 KB	1.42 KB	0.58 KB	🔴 ⬆ 0.07 KB
themes/spectrum.css	1.47 KB	1.43 KB	0.59 KB	🔴 ⬆ 0.07 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-12T07:23:39Z

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

rise-erpelding

The CSS changes look good, I'd recommend a few updates to the changeset to make our changelogs read more nicely!

.changeset/popular-trains-sniff.md

marissahuysentruyt

This looks good! Just to clarify- this PR is only focused on the feedback for the disabled state, and is not addressing everything in the ticket, correct? If that's the case, I can approve once Rise's changes have been addressed! Thank you!

Dismissing review so as not to block approval/merging from others while I'm out!

marissahuysentruyt · 2025-03-26T01:19:53Z

components/infieldbutton/themes/spectrum-two.css

@@ -27,5 +27,9 @@
 		--spectrum-infield-button-background-color-hover: var(--spectrum-gray-200);
 		--spectrum-infield-button-background-color-down: var(--spectrum-gray-200);
 		--spectrum-infield-button-background-color-key-focus: var(--spectrum-gray-200);
+
+		&:disabled {
+			--spectrum-infield-button-border-color: var(--spectrum-gray-300);


This probably could be set to disabled-border-color if we wanted. I think that's also gray-300.

- fixes hover, keyboard focus states for infield buttons within stepper, including corrected background colors and the chevron icon color

marissahuysentruyt · 2025-04-03T16:25:22Z

TODO: run VRTs

cdransf

Ran through the validation steps and everything looks good! ✨

marissahuysentruyt · 2025-04-03T21:36:53Z

components/stepper/index.css

@@ -131,7 +131,7 @@
 		}
 	}

-	&:not(.is-disabled).is-keyboardFocused {
+	&:not(.is-disabled).is-keyboardFocused:not(.spectrum-Stepper--quiet) {


I want to ask about the keyboard focus state once more. Pausing review...

Do we need this block? When I remove it nothing seems to break or change. @marissahuysentruyt @Rajdeepc

I can double check.I thought I was having issues with the quiet variant, but I wonder if it was actually due to the mods I was trying to set instead...

@aramos-adobe Thanks for catching this- I don't see anything broken with it removed again, so I yanked it out!

Rajdeepc self-assigned this Mar 12, 2025

rise-erpelding self-requested a review March 12, 2025 15:31

rise-erpelding previously requested changes Mar 12, 2025

View reviewed changes

.changeset/popular-trains-sniff.md Outdated Show resolved Hide resolved

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

marissahuysentruyt reviewed Mar 13, 2025

View reviewed changes

castastrophe force-pushed the rajdeep/infield-button-fast-follow branch from 9ed6e2a to e67cfc7 Compare March 13, 2025 13:09

castastrophe added the fast-follows An issue or PR that quickly follows a release label Mar 20, 2025

marissahuysentruyt reviewed Mar 26, 2025

View reviewed changes

marissahuysentruyt self-assigned this Apr 1, 2025

Rajdeep Chandra and others added 4 commits April 3, 2025 09:20

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

8319c4d

chore(infieldbutton): update changeset

e055d7c

fix(stepper): stepper infield buttons fast follows

a8082d6

- fixes hover, keyboard focus states for infield buttons within stepper, including corrected background colors and the chevron icon color

chore(infieldbutton,stepper): update changeset

dd337f5

marissahuysentruyt force-pushed the rajdeep/infield-button-fast-follow branch from b0a6b06 to dd337f5 Compare April 3, 2025 15:30

chore(stepper,infieldbutton): update metadata

d97ee42

marissahuysentruyt added the ready-for-review label Apr 3, 2025

marissahuysentruyt added the size-1 XS ~1-6hrs; nearly trivial, a few hours, could do more than one in a single day. label Apr 3, 2025

marissahuysentruyt requested review from cdransf, jawinn, castastrophe, rise-erpelding, aramos-adobe and 5t3ph April 3, 2025 16:26

cdransf approved these changes Apr 3, 2025

View reviewed changes

fix(stepper): remove infield bg color mods and update metadata

067c7c9

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

marissahuysentruyt reviewed Apr 3, 2025

View reviewed changes

aramos-adobe approved these changes Apr 4, 2025

View reviewed changes

marissahuysentruyt removed the ready-for-review label Apr 4, 2025

marissahuysentruyt requested review from aramos-adobe and cdransf April 4, 2025 14:38

marissahuysentruyt added 2 commits April 4, 2025 16:28

fix(stepper): remove unnecessary --quiet scoping selector

9e84946

chore: revert stepper changeset references

3799893

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

Rajdeepc commented Mar 12, 2025 •

edited by marissahuysentruyt

Loading

changeset-bot bot commented Mar 12, 2025 •

edited

Loading

github-actions bot commented Mar 12, 2025 •

edited

Loading

github-actions bot commented Mar 12, 2025 •

edited

Loading

rise-erpelding left a comment

marissahuysentruyt left a comment

marissahuysentruyt Mar 26, 2025

marissahuysentruyt commented Apr 3, 2025

cdransf left a comment

marissahuysentruyt Apr 3, 2025

aramos-adobe Apr 4, 2025

marissahuysentruyt Apr 4, 2025

marissahuysentruyt Apr 4, 2025

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

Are you sure you want to change the base?

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

Conversation

Rajdeepc commented Mar 12, 2025 • edited by marissahuysentruyt Loading

Description

Jira/Specs

How and where has this been tested?

Validation steps

Additional validation (the remaining validation steps likely were already completed in #3536 and #3621. This CSS already exists and functions as design expects 🥳 )

Regression testing

Screenshots

To-do list

changeset-bot bot commented Mar 12, 2025 • edited Loading

🦋 Changeset detected

github-actions bot commented Mar 12, 2025 • edited Loading

File metrics

Summary

infieldbutton

github-actions bot commented Mar 12, 2025 • edited Loading

rise-erpelding left a comment

Choose a reason for hiding this comment

marissahuysentruyt left a comment

Choose a reason for hiding this comment

marissahuysentruyt Mar 26, 2025

Choose a reason for hiding this comment

marissahuysentruyt commented Apr 3, 2025

cdransf left a comment

Choose a reason for hiding this comment

marissahuysentruyt Apr 3, 2025

Choose a reason for hiding this comment

aramos-adobe Apr 4, 2025

Choose a reason for hiding this comment

marissahuysentruyt Apr 4, 2025

Choose a reason for hiding this comment

marissahuysentruyt Apr 4, 2025

Choose a reason for hiding this comment

Rajdeepc commented Mar 12, 2025 •

edited by marissahuysentruyt

Loading

changeset-bot bot commented Mar 12, 2025 •

edited

Loading

github-actions bot commented Mar 12, 2025 •

edited

Loading

github-actions bot commented Mar 12, 2025 •

edited

Loading