fix(number-field): sp-number-field UI fixes for validation and width #5326

caseyisonit · 2025-04-03T22:38:18Z

Description

Number Field had a number of issues related to the UI, default widths, and token modifiers. This PR addresses the following:

Validation icons rendering over the infield buttons
Exposing a width modifying token for the number field
Reintroducing the default widths for the various sizes of the number field
Ensuring that the number field renders correctly in a grid, as seen in slider [editable]

Related issue(s)

swc-669
swc-785
fixes [Bug]: sp-number-field, valid/invalid icon overlaps with the increment/decrement buttons on the rightside of the field #5053
fixes [Bug]: cannot change width of sp-number-field #5199

Motivation and context

Number Field should be customizable, have a default width based on design docs, and have validation icons and input truncation render correctly.

How has this been tested?

_Review the VRTs and ensure no unexpected side effects happen in other components
1. I will update the golden hash once others have reviewed the diffs
Check validation icons render correctly
1. Go here
2. Icons should not overlap infield buttons
3. Type a long number in the valid & invalid inputs and the number should truncate before the icon
Check you can modify the width via mod token
1. Go here
2. Inspect sp-number-field in dev tools
3. add --mod-stepper-width: 500px to the host level
4. see visual change
Check you can modify the width via width
1. Go here
2. Inspect sp-number-field in dev tools
3. add width: 500px to the host level
4. see visual change
Slider [editable] number field should fill the available grid column
1. Go here
2. Inspect sp-slider in dev tools
3. With inspect arrow active, hover over the sp-slider dom node
4. see no gap in the available space after the number field
Slider [editable] number field should size correctly when grid column is modified
1. Go here
2. Inspect sp-slider in dev tools
3. add grid-template-columns: 1fr 80px; to the host level
4. number field should be 80px
Did it pass in Desktop?
Did it pass in Mobile?
Did it pass in iPad?

Screenshots (if appropriate)

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)
Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

I have signed the Adobe Open Source CLA.
My code follows the code style of this project.
If my change required a change to the documentation, I have updated the documentation in this pull request.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.
All new and existing tests passed.
I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

changeset-bot · 2025-04-03T22:38:21Z

⚠️ No Changeset found

Latest commit: 3eef905

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

github-actions · 2025-04-03T22:40:26Z

Branch preview

Review the following VRT differences

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

caseyisonit · 2025-04-03T22:40:37Z

packages/number-field/src/number-field.css

+}
+
+:host([invalid]) .input {
+    padding-inline-end: calc(


This addresses the icon overlapping the input value/truncation when invalid. This is not an issue for valid. The calc is copied from the valid input CSS.

caseyisonit · 2025-04-03T22:43:02Z

packages/number-field/src/number-field.css

+
+:host([invalid]:not([hide-stepper])) #textfield .icon {
+    --mod-textfield-icon-spacing-inline-end-invalid: calc(
+        var(--system-infield-button-top-width) +


wasn't sure if there was a better token to use for the width of the stepper buttons to use in the calc

github-actions · 2025-04-03T22:43:05Z

Tachometer results

Currently, no packages are changed by this PR...

caseyisonit · 2025-04-03T22:58:42Z

packages/number-field/src/number-field.css

@@ -13,6 +13,9 @@ governing permissions and limitations under the License.
 @import url('./spectrum-number-field.css');
 @import url('./number-field-overrides.css');

+:host {
+    inline-size: unset;


Sp-text-field sets an inline-size on the host, which causes side effects for sp-slider that uses number-field. This unsets the inline size and resolves the issue PSWeb called out on sp-slider [editable].

Fun fact: number-field extends textFieldBase, so moving forward, any changes to the text field will need to cross-check the number field heavily.

caseyisonit · 2025-04-03T23:20:49Z

packages/number-field/README.md

+
+## States
+
+Use the `required` attribute to indicate a number field value is required. Dictate the validity or invalidity state of the text entry with the `valid` or `invalid` attributes.


copy pasta'd from text field. this readme is still on the docs audit list so didn't do a full pass.

…ions

nikkimk · 2025-04-07T19:04:36Z

iii. add --mod-stepper-width: 500px to the host level

@caseyisonit In the testing instructions, for modifying with mod token, should we remove the style="width: 150px" first?

nikkimk · 2025-04-07T19:08:17Z

packages/number-field/src/number-field.css

@@ -13,6 +13,41 @@ governing permissions and limitations under the License.
 @import url('./spectrum-number-field.css');
 @import url('./number-field-overrides.css');

+:host {


NIT: @caseyisonit do you want to make a not about the PR that removed this and why it is being added back in?

Yes! great callout!

This block was removed in a fast-follow but broke the default sizing or number field along with removing the modifiable width on number-field. This is not delivered from CSS and thus needs to remain in our stylesheet.

nikkimk

Update the golden images hash, respond to my comment on testing instructions to clarify to the next reviewer, reply to my comment in the code review for future us, and then LGTM

caseyisonit · 2025-04-07T19:37:01Z

Update the golden images hash, respond to my comment on testing instructions to clarify to the next reviewer, reply to my comment in the code review for future us, and then LGTM

I forgot to push up my last changes let me do that and ill update the golden hash after

…b.com:adobe/spectrum-web-components into caseyisonit/swc-669-number-field-icon-overlap

caseyisonit · 2025-04-07T20:02:04Z

@marissahuysentruyt is going to review for CSS tomorrow morning, golden hash will be updated AFTER with a changeset

caseyisonit added 3 commits April 1, 2025 09:31

chore: add validation story

2536c60

fix: css fix for icons rendering over stepper buttons

2a320c9

fix: icon no longer covers button and works with flex box

9fe071b

caseyisonit commented Apr 3, 2025

View reviewed changes

fix: more specific fix to avoid side effects in text-field

f4798dc

caseyisonit commented Apr 3, 2025

View reviewed changes

chore: add validation states to the number field docs

398693d

caseyisonit commented Apr 3, 2025

View reviewed changes

rubencarvalho and others added 5 commits April 4, 2025 11:21

Merge branch 'main' into caseyisonit/swc-669-number-field-icon-overlap

ad27230

Merge branch 'main' into caseyisonit/swc-669-number-field-icon-overlap

c7af3e6

fix(number-field): add back default widths and expose mod variable

2ef7bde

Merge branch 'main' into caseyisonit/swc-669-number-field-icon-overlap

8f25dae

chore: remove hard coded widths from stories to ensure no css regress…

2c3eae5

…ions

caseyisonit marked this pull request as ready for review April 7, 2025 18:36

caseyisonit requested a review from a team as a code owner April 7, 2025 18:36

nikkimk reviewed Apr 7, 2025

View reviewed changes

nikkimk approved these changes Apr 7, 2025

View reviewed changes

Merge branch 'caseyisonit/swc-669-number-field-icon-overlap' of githu…

3eef905

…b.com:adobe/spectrum-web-components into caseyisonit/swc-669-number-field-icon-overlap

caseyisonit added Component: Number Field ready-for-review labels Apr 7, 2025

caseyisonit changed the title ~~fix(number-field, slider): sp-number-field icon overlaping buttons and fixed sizing issue in sp-slider editable~~ fix(number-field): sp-number-field UI fixes for validation and width Apr 7, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(number-field): sp-number-field UI fixes for validation and width #5326

fix(number-field): sp-number-field UI fixes for validation and width #5326

caseyisonit commented Apr 3, 2025 •

edited

Loading

changeset-bot bot commented Apr 3, 2025 •

edited

Loading

github-actions bot commented Apr 3, 2025

caseyisonit Apr 3, 2025 •

edited

Loading

caseyisonit Apr 3, 2025

github-actions bot commented Apr 3, 2025

caseyisonit Apr 3, 2025

caseyisonit Apr 3, 2025

nikkimk commented Apr 7, 2025 •

edited

Loading

nikkimk Apr 7, 2025 •

edited

Loading

caseyisonit Apr 7, 2025

nikkimk left a comment •

edited

Loading

caseyisonit commented Apr 7, 2025

caseyisonit commented Apr 7, 2025


		## States

		Use the `required` attribute to indicate a number field value is required. Dictate the validity or invalidity state of the text entry with the `valid` or `invalid` attributes.

fix(number-field): sp-number-field UI fixes for validation and width #5326

Are you sure you want to change the base?

fix(number-field): sp-number-field UI fixes for validation and width #5326

Conversation

caseyisonit commented Apr 3, 2025 • edited Loading

Description

Related issue(s)

Motivation and context

How has this been tested?

Screenshots (if appropriate)

Types of changes

Checklist

Best practices

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

⚠️ No Changeset found

github-actions bot commented Apr 3, 2025

Branch preview

Review the following VRT differences

caseyisonit Apr 3, 2025 • edited Loading

Choose a reason for hiding this comment

caseyisonit Apr 3, 2025

Choose a reason for hiding this comment

github-actions bot commented Apr 3, 2025

Tachometer results

caseyisonit Apr 3, 2025

Choose a reason for hiding this comment

caseyisonit Apr 3, 2025

Choose a reason for hiding this comment

nikkimk commented Apr 7, 2025 • edited Loading

nikkimk Apr 7, 2025 • edited Loading

Choose a reason for hiding this comment

caseyisonit Apr 7, 2025

Choose a reason for hiding this comment

nikkimk left a comment • edited Loading

Choose a reason for hiding this comment

caseyisonit commented Apr 7, 2025

caseyisonit commented Apr 7, 2025

caseyisonit commented Apr 3, 2025 •

edited

Loading

changeset-bot bot commented Apr 3, 2025 •

edited

Loading

caseyisonit Apr 3, 2025 •

edited

Loading

nikkimk commented Apr 7, 2025 •

edited

Loading

nikkimk Apr 7, 2025 •

edited

Loading

nikkimk left a comment •

edited

Loading