Skip to content

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

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

Merged
merged 14 commits into from
Apr 29, 2025

Conversation

marissahuysentruyt
Copy link
Collaborator

@marissahuysentruyt marissahuysentruyt commented Apr 28, 2025

Description

THIS REPLACES #5401 AND #5326

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: 150px; to the slider
    4. number field should be 1500px
  • 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.

Copy link

changeset-bot bot commented Apr 28, 2025

🦋 Changeset detected

Latest commit: 482b418

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/slider Patch
@spectrum-web-components/bundle 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-field 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/combobox 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/search 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/textfield 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.

Copy link

github-actions bot commented Apr 28, 2025

Tachometer results

Chrome

number-field permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 627 kB 75.15ms - 76.72ms - faster ✔
9% - 12%
7.28ms - 9.83ms
branch 564 kB 83.48ms - 85.49ms slower ❌
10% - 13%
7.28ms - 9.83ms
-
Firefox

number-field permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 627 kB 165.75ms - 171.49ms - faster ✔
5% - 9%
8.59ms - 15.89ms
branch 564 kB 178.61ms - 183.11ms slower ❌
5% - 10%
8.59ms - 15.89ms
-

@caseyisonit caseyisonit changed the title Marissahuysentruyt/number field swc 669 test fix(number-field): sp-number-field UI fixes for validation and width Apr 28, 2025
@caseyisonit caseyisonit marked this pull request as ready for review April 28, 2025 23:36
@caseyisonit caseyisonit requested a review from a team as a code owner April 28, 2025 23:36
@TarunAdobe
Copy link
Contributor

Screenshot 2025-04-29 at 4 42 16 PM I am seeing this in the storybook... is it expected to look that way?

@marissahuysentruyt marissahuysentruyt force-pushed the marissahuysentruyt/number-field-swc-669-test branch from 275942c to c5a4fb4 Compare April 29, 2025 11:45
@marissahuysentruyt
Copy link
Collaborator Author

Screenshot 2025-04-29 at 4 42 16 PM I am seeing this in the storybook... is it expected to look that way?

@TarunAdobe Uh oh- we may not have updated the links in the PR description. That looks like the old branch. Can you try this link instead? https://marissahuysentruyt-number-field-swc-669-test--spectrum-wc.netlify.app/storybook/?path=/story/number-field--validation-icons&globals=system:spectrum-two

It should look like this:

Screenshot 2025-04-29 at 7 45 10 AM

Copy link
Contributor

@TarunAdobe TarunAdobe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good stuff!

Copy link
Contributor

@caseyisonit caseyisonit left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

YOU ARE AMAZING

….com:adobe/spectrum-web-components into marissahuysentruyt/number-field-swc-669-test
@caseyisonit caseyisonit merged commit 74386e8 into main Apr 29, 2025
24 checks passed
@caseyisonit caseyisonit deleted the marissahuysentruyt/number-field-swc-669-test branch April 29, 2025 13:30
castastrophe pushed a commit that referenced this pull request May 6, 2025
…5408)

* docs(number-field): add number-field validation icon stories

- removes hardcoded styles for widths

Co-authored-by: Casey Eickhoff <[email protected]>

* fix(number-field): implements spacing for validation icons

Co-authored-by: Casey Eickhoff <[email protected]>

* fix(numberfield): defines stepper width

* chore: add changeset

* chore: the teeniest tiniest lint fix

* docs(number-field): add number-field validation icon stories

- removes hardcoded styles for widths

Co-authored-by: Casey Eickhoff <[email protected]>

* fix(number-field): implements spacing for validation icons

Co-authored-by: Casey Eickhoff <[email protected]>

* fix(numberfield): defines stepper width

* chore: add changeset

* docs(numberfield): update readme

Co-authored-by: Casey Eickhoff <[email protected]>

* fix(numberfield): lint fix

Co-authored-by: Casey Eickhoff <[email protected]>

* chore(numberfield): removes textfield from changeset

* chore: update golden hash

---------

Co-authored-by: Casey Eickhoff <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants