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 --mod-stepper-width: 80px; to the slider
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

🦋 Changeset detected

Latest commit: d851a52

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

This PR includes changesets to release 84 packages

Name	Type
@spectrum-web-components/number-field	Patch
@spectrum-web-components/textfield	Patch
@spectrum-web-components/slider	Patch
@spectrum-web-components/bundle	Patch
@spectrum-web-components/color-field	Patch
@spectrum-web-components/combobox	Patch
@spectrum-web-components/search	Patch
documentation	Patch
@spectrum-web-components/eslint-plugin	Patch
@spectrum-web-components/accordion	Patch
@spectrum-web-components/action-bar	Patch
@spectrum-web-components/action-button	Patch
@spectrum-web-components/action-group	Patch
@spectrum-web-components/action-menu	Patch
@spectrum-web-components/alert-banner	Patch
@spectrum-web-components/alert-dialog	Patch
@spectrum-web-components/asset	Patch
@spectrum-web-components/avatar	Patch
@spectrum-web-components/badge	Patch
@spectrum-web-components/breadcrumbs	Patch
@spectrum-web-components/button-group	Patch
@spectrum-web-components/button	Patch
@spectrum-web-components/card	Patch
@spectrum-web-components/checkbox	Patch
@spectrum-web-components/clear-button	Patch
@spectrum-web-components/close-button	Patch
@spectrum-web-components/coachmark	Patch
@spectrum-web-components/color-area	Patch
@spectrum-web-components/color-handle	Patch
@spectrum-web-components/color-loupe	Patch
@spectrum-web-components/color-slider	Patch
@spectrum-web-components/color-wheel	Patch
@spectrum-web-components/contextual-help	Patch
@spectrum-web-components/dialog	Patch
@spectrum-web-components/divider	Patch
@spectrum-web-components/dropzone	Patch
@spectrum-web-components/field-group	Patch
@spectrum-web-components/field-label	Patch
@spectrum-web-components/help-text	Patch
@spectrum-web-components/icon	Patch
@spectrum-web-components/icons-ui	Patch
@spectrum-web-components/icons-workflow	Patch
@spectrum-web-components/icons	Patch
@spectrum-web-components/iconset	Patch
@spectrum-web-components/illustrated-message	Patch
@spectrum-web-components/infield-button	Patch
@spectrum-web-components/link	Patch
@spectrum-web-components/menu	Patch
@spectrum-web-components/meter	Patch
@spectrum-web-components/modal	Patch
@spectrum-web-components/overlay	Patch
@spectrum-web-components/picker-button	Patch
@spectrum-web-components/picker	Patch
@spectrum-web-components/popover	Patch
@spectrum-web-components/progress-bar	Patch
@spectrum-web-components/progress-circle	Patch
@spectrum-web-components/radio	Patch
@spectrum-web-components/sidenav	Patch
@spectrum-web-components/split-view	Patch
@spectrum-web-components/status-light	Patch
@spectrum-web-components/swatch	Patch
@spectrum-web-components/switch	Patch
@spectrum-web-components/table	Patch
@spectrum-web-components/tabs	Patch
@spectrum-web-components/tags	Patch
@spectrum-web-components/thumbnail	Patch
@spectrum-web-components/toast	Patch
@spectrum-web-components/tooltip	Patch
@spectrum-web-components/top-nav	Patch
@spectrum-web-components/tray	Patch
@spectrum-web-components/underlay	Patch
@spectrum-web-components/custom-vars-viewer	Patch
@spectrum-web-components/story-decorator	Patch
@spectrum-web-components/vrt-compare	Patch
@spectrum-web-components/base	Patch
@spectrum-web-components/grid	Patch
@spectrum-web-components/opacity-checkerboard	Patch
@spectrum-web-components/reactive-controllers	Patch
@spectrum-web-components/shared	Patch
@spectrum-web-components/styles	Patch
@spectrum-web-components/theme	Patch
@spectrum-web-components/truncated	Patch
example-project-rollup	Patch
example-project-webpack	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-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.

packages/number-field/src/number-field.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

Chrome

number-field permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	627 kB	71.63ms - 73.08ms	-	faster ✔ 9% - 12% 7.48ms - 9.81ms
branch	578 kB	80.09ms - 81.91ms	slower ❌ 10% - 14% 7.48ms - 9.81ms	-

textfield permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	524 kB	24.65ms - 26.02ms	-	faster ✔ 9% - 15% 2.66ms - 4.52ms
branch	461 kB	28.30ms - 29.56ms	slower ❌ 10% - 18% 2.66ms - 4.52ms	-

Firefox

number-field permalink

basic-test

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	627 kB	157.37ms - 162.67ms	-	faster ✔ 5% - 9% 8.08ms - 16.00ms
branch	578 kB	169.12ms - 175.00ms	slower ❌ 5% - 10% 8.08ms - 16.00ms	-

textfield permalink

test-basic

Version	Bytes	Avg Time	vs remote	vs branch
npm latest	524 kB	48.18ms - 51.54ms	-	faster ✔ 5% - 15% 2.60ms - 8.44ms
branch	461 kB	52.99ms - 57.77ms	slower ❌ 5% - 17% 2.60ms - 8.44ms	-

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.

packages/number-field/README.md

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 note 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

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

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

marissahuysentruyt

Way to stick with this one- glad you hunted this down! To me, this is looking good. I had a few questions, but don't think I currently have any "changes" to request. I'll wait to hear back on those questions, and then I'm happy to approve!

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

packages/number-field/stories/number-field.stories.ts

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

packages/textfield/src/spectrum-config.js

packages/textfield/src/spectrum-textfield.css

marissahuysentruyt

Mainly more questions for you!

I went down a little rabbit hold with the invalid border colors. Could that be a separate PR, or does it relate close enough to the validation work you were doing? 🤷‍♀️

packages/number-field/stories/number-field.stories.ts

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

caseyisonit · 2025-04-22T23:07:55Z

TODO: post cutoff we should fix the infield buttons error border color on express, this is present in production so it's out of scope for this PR

packages/number-field/stories/number-field.stories.ts

.changeset/violet-snails-obey.md

…ions

Co-authored-by: Rajdeep Chandra <[email protected]>

caseyisonit commented Apr 3, 2025

View reviewed changes

packages/number-field/src/number-field.css Show resolved Hide resolved

caseyisonit commented Apr 3, 2025

View reviewed changes

packages/number-field/README.md Show resolved Hide resolved

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

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

marissahuysentruyt reviewed Apr 8, 2025

View reviewed changes

rubencarvalho reviewed Apr 9, 2025

View reviewed changes

packages/number-field/src/number-field.css Outdated Show resolved Hide resolved

caseyisonit removed the ready-for-review label Apr 9, 2025

castastrophe reviewed Apr 17, 2025

View reviewed changes

packages/textfield/src/spectrum-config.js Outdated Show resolved Hide resolved

castastrophe reviewed Apr 17, 2025

View reviewed changes

packages/textfield/src/spectrum-textfield.css Show resolved Hide resolved

marissahuysentruyt reviewed Apr 17, 2025

View reviewed changes

castastrophe force-pushed the caseyisonit/swc-669-number-field-icon-overlap branch from f815251 to 385e353 Compare April 18, 2025 18:06

Rajdeepc requested changes Apr 23, 2025

View reviewed changes

packages/number-field/stories/number-field.stories.ts Outdated Show resolved Hide resolved

.changeset/violet-snails-obey.md Outdated Show resolved Hide resolved

caseyisonit added the ready-for-review label Apr 24, 2025

caseyisonit requested a review from Rajdeepc April 24, 2025 18:06

Rajdeepc approved these changes Apr 24, 2025

View reviewed changes

castastrophe force-pushed the caseyisonit/swc-669-number-field-icon-overlap branch from a537b09 to 972e022 Compare April 24, 2025 20:33

castastrophe force-pushed the caseyisonit/swc-669-number-field-icon-overlap branch 3 times, most recently from c13e2fa to 2dab297 Compare April 24, 2025 21:01

caseyisonit mentioned this pull request Apr 24, 2025

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

Open

20 tasks

caseyisonit and others added 20 commits April 24, 2025 17:22

chore: add validation story

4b186c2

fix: css fix for icons rendering over stepper buttons

e712995

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

2110b37

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

07a656f

chore: add validation states to the number field docs

504e10b

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

7c9fab7

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

1c9768e

…ions

fix: textfield spectrum config error

b7b06cf

chore: remove unused code

72fda69

fix: width and icon overlap

de04cb9

chore: add validation story

0860c6e

fix: css fix for icons rendering over stepper buttons

2c82648

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

93c8d56

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

c729f0b

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

0d27b13

fix: textfield spectrum config error

8fc16ba

chore: remove unused code

68fb75a

chore: add changeset

c5e9490

chore: correct story ids

60d8375

Update .changeset/violet-snails-obey.md

86e9256

Co-authored-by: Rajdeep Chandra <[email protected]>

castastrophe force-pushed the caseyisonit/swc-669-number-field-icon-overlap branch from 2dab297 to d851a52 Compare April 24, 2025 21:22

fix: move line-height definition to custom css textfield

88f2105

castastrophe force-pushed the caseyisonit/swc-669-number-field-icon-overlap branch from d851a52 to 88f2105 Compare April 24, 2025 21:22

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 by Rajdeepc

Loading

changeset-bot bot commented Apr 3, 2025 •

edited

Loading

github-actions bot commented Apr 3, 2025 •

edited

Loading

caseyisonit Apr 3, 2025

github-actions bot commented Apr 3, 2025 •

edited

Loading

number-field permalink

basic-test

textfield permalink

test-basic

number-field permalink

basic-test

textfield permalink

test-basic

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

marissahuysentruyt left a comment

marissahuysentruyt left a comment

caseyisonit commented Apr 22, 2025

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 by Rajdeepc 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

🦋 Changeset detected

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

Branch preview

Review the following VRT differences

caseyisonit Apr 3, 2025

Choose a reason for hiding this comment

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

Tachometer results

number-field permalink

basic-test

textfield permalink

test-basic

number-field permalink

basic-test

textfield permalink

test-basic

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

marissahuysentruyt left a comment

Choose a reason for hiding this comment

marissahuysentruyt left a comment

Choose a reason for hiding this comment

caseyisonit commented Apr 22, 2025

caseyisonit commented Apr 3, 2025 •

edited by Rajdeepc

Loading

changeset-bot bot commented Apr 3, 2025 •

edited

Loading

github-actions bot commented Apr 3, 2025 •

edited

Loading

github-actions bot commented Apr 3, 2025 •

edited

Loading

nikkimk commented Apr 7, 2025 •

edited

Loading

nikkimk Apr 7, 2025 •

edited

Loading

nikkimk left a comment •

edited

Loading