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 1 commit 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
Copy link

Branch preview

Visual regression test results

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

Copy link

github-actions bot commented May 21, 2024

Lighthouse scores

Category Latest (report) Main (report) Branch (report)
Performance 0.99 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 222.412 kB 210.23 kB 🏆 210.563 kB
Scripts 54.555 kB 48.132 kB 🏆 48.211 kB
Stylesheet 35.107 kB 30.308 kB 🏆 30.515 kB
Document 5.893 kB 5.184 kB 🏆 5.204 kB
Font 126.857 kB 126.606 kB 🏆 126.633 kB

Request Count

Category Latest Main Branch
Total 45 45 45
Scripts 37 37 37
Stylesheet 5 5 5
Document 1 1 1
Font 2 2 2

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 523 kB 63.41ms - 64.94ms - faster ✔
10% - 13%
7.03ms - 9.54ms
branch 514 kB 71.46ms - 73.45ms slower ❌
11% - 15%
7.03ms - 9.54ms
-

slider permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 480 kB 72.81ms - 74.70ms - faster ✔
1% - 4%
0.46ms - 3.22ms
branch 467 kB 74.58ms - 76.59ms slower ❌
1% - 4%
0.46ms - 3.22ms
-
Firefox

number-field permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 523 kB 143.62ms - 148.58ms - faster ✔
7% - 12%
11.42ms - 20.38ms
branch 514 kB 158.26ms - 165.74ms slower ❌
8% - 14%
11.42ms - 20.38ms
-

slider permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 480 kB 161.19ms - 167.77ms - unsure 🔍
-5% - +0%
-8.77ms - +0.57ms
branch 467 kB 165.26ms - 171.90ms unsure 🔍
-0% - +5%
-0.57ms - +8.77ms
-

* 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
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
2 participants