Skip to content
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

fix(number-field): add support for scrubbing #4476

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

Conversation

Westbrook
Copy link
Contributor

Description

This had been bopping around in a branch for a long while thanks to the work of @bengfarrell and I wanted to get it into a PR in case people were interested in adopting it.

Allow click and drag on the input of a Number Field to scrub the value.

Related issue(s)

How has this been tested?

  • Test case 1
    1. Go here
    2. Click and drag across the input field to change the value

Types of changes

  • New feature (non-breaking change which adds functionality)

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.

@Westbrook Westbrook requested a review from a team May 21, 2024 18:43
@Westbrook Westbrook force-pushed the number-field/scrubber branch from 5db4275 to a6280d7 Compare May 21, 2024 18:48
Copy link

github-actions bot commented May 21, 2024

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 May 21, 2024

Lighthouse scores

Category Latest (report) Main (report) Branch (report)
Performance 0.98 0.99 0.99
Accessibility 1 1 1
Best Practices 1 1 1
SEO 1 0.92 0.92
PWA 1 1 1
What is this?

Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.

Transfer Size

Category Latest Main Branch
Total 250.169 kB 236.444 kB 🏆 236.866 kB
Scripts 60.271 kB 54.114 kB 🏆 54.341 kB
Stylesheet 53.886 kB 47.863 kB 🏆 48.082 kB
Document 6.242 kB 5.457 kB 🏆 5.46 kB
Font 126.969 kB 126.596 kB 🏆 126.633 kB

Request Count

Category Latest Main Branch
Total 52 52 52
Scripts 41 41 41
Stylesheet 5 5 5
Document 1 1 1
Font 2 2 2

@Westbrook Westbrook force-pushed the number-field/scrubber branch from a6280d7 to f123cbe Compare May 21, 2024 19:00
Copy link

github-actions bot commented May 21, 2024

Tachometer results

Chrome

number-field permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 794 kB 77.88ms - 80.03ms - faster ✔
8% - 11%
6.95ms - 9.69ms
branch 775 kB 86.42ms - 88.13ms slower ❌
9% - 12%
6.95ms - 9.69ms
-

slider permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 741 kB 81.30ms - 83.14ms - faster ✔
4% - 7%
3.72ms - 6.09ms
branch 718 kB 86.38ms - 87.87ms slower ❌
4% - 7%
3.72ms - 6.09ms
-
Firefox

number-field permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 794 kB 157.37ms - 163.75ms - faster ✔
6% - 11%
10.76ms - 19.04ms
branch 775 kB 172.81ms - 178.11ms slower ❌
7% - 12%
10.76ms - 19.04ms
-

slider permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 741 kB 159.87ms - 168.01ms - unsure 🔍
-7% - +1%
-12.61ms - +1.45ms
branch 718 kB 163.79ms - 175.25ms unsure 🔍
-1% - +8%
-1.45ms - +12.61ms
-

@Westbrook Westbrook force-pushed the number-field/scrubber branch from f123cbe to 3034755 Compare May 22, 2024 11:36
* feat(number-field): added features required for internal Adobe project
- scrubbable (drag left/right for increment decrementing)
- allow per pixel amount for scrubbing (defaults to using existing step)
- shift modifier step multiplier for fast keyboard increment/decrement

* feat(number-field): add shift modifier to multiply key input

* feat(number-field): put stepper buttons in shift modifier path

* fix(number-field): fix issue with PR where there are runtime errors when buttons are hidden

* fix(number-field): add property to indicate that the user is scrubbing

* fix(number-field): delay scrub input by 250ms in case user clicked/dragged a bit meaning to focus

* fix(number-field): issue with scrubbing off component lights up focus ring without having focus

* fix(number-field): issues with intermittent inner focus-visible and misfiring on negative distance
@Westbrook Westbrook force-pushed the number-field/scrubber branch from 3034755 to 8fc67cc Compare May 24, 2024 13:21
Copy link

changeset-bot bot commented Jan 7, 2025

⚠️ No Changeset found

Latest commit: e0cddb9

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.

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

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

Successfully merging this pull request may close these issues.

Scrubbable Numeric Input
3 participants