Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

caseyisonit
Copy link
Contributor

Description

THIS IS A COPY OF PR #5326 -- it was going stale

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)

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.

@caseyisonit caseyisonit requested a review from a team as a code owner April 24, 2025 21:10
Copy link

changeset-bot bot commented Apr 24, 2025

🦋 Changeset detected

Latest commit: 1d8627a

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

Copy link

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.

@castastrophe castastrophe force-pushed the caseyisonit/swc-669-icon-overlap-refresh branch from 16f982b to 2994a37 Compare April 24, 2025 21:20
@castastrophe castastrophe force-pushed the caseyisonit/swc-669-icon-overlap-refresh branch from 2994a37 to 1d8627a Compare April 24, 2025 21:20
Copy link

github-actions bot commented Apr 24, 2025

Tachometer results

Chrome

number-field permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 627 kB 75.42ms - 77.31ms - faster ✔
9% - 12%
7.88ms - 10.55ms
branch 577 kB 84.63ms - 86.53ms slower ❌
10% - 14%
7.88ms - 10.55ms
-

textfield permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 524 kB 25.50ms - 26.52ms - faster ✔
9% - 14%
2.58ms - 4.12ms
branch 461 kB 28.79ms - 29.94ms slower ❌
10% - 16%
2.58ms - 4.12ms
-
Firefox

number-field permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 627 kB 157.89ms - 163.23ms - faster ✔
6% - 10%
10.93ms - 18.03ms
branch 577 kB 172.70ms - 177.38ms slower ❌
7% - 11%
10.93ms - 18.03ms
-

textfield permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 524 kB 48.59ms - 51.73ms - faster ✔
1% - 9%
0.25ms - 4.67ms
branch 461 kB 51.07ms - 54.17ms slower ❌
0% - 9%
0.25ms - 4.67ms
-

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
1 participant