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): handles values greater than 1000 #4417

Merged
merged 2 commits into from
May 8, 2024

Conversation

blunteshwar
Copy link
Collaborator

@blunteshwar blunteshwar commented May 8, 2024

Description

This PR addresses an issue where large numbers were being incorrectly formatted or rounded in the valueFormatter of the component. The problem was occurring due to the default behavior of the NumberFormatter which was using grouping for large numbers. This caused values greater than 1000 to be formatted incorrectly.

Changes Made:

Added the useGrouping: false option to the NumberFormatter instantiation in the valueFormatter method.
This change ensures that large numbers are formatted without grouping, preventing the rounding or truncation issues observed previously.

Related issue(s)

Motivation and context

This fix improves the accuracy of number formatting for large numbers in the component, ensuring that they are displayed correctly to the user.

How has this been tested?

Tested the fix with various large numbers and confirmed that they are now formatted correctly without any rounding or truncation.
Checked that the formatting behavior for numbers less than 1000 remains unchanged.

  • Test case 1
    1. Go here
    2. Increment the value beyond 1000.
  • Test case 2
    1. Go here
    2. enter any value above 1000

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.

@blunteshwar blunteshwar marked this pull request as ready for review May 8, 2024 13:22
@blunteshwar blunteshwar requested a review from Rajdeepc May 8, 2024 13:22
Copy link

github-actions bot commented May 8, 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 224.262 kB 210.312 kB 🏆 210.503 kB
Scripts 53.839 kB 47.987 kB 🏆 48.213 kB
Stylesheet 34.761 kB 30.426 kB 🏆 30.44 kB
Document 5.919 kB 5.201 kB 5.20 kB 🏆
Font 126.781 kB 126.698 kB 126.65 kB 🏆

Request Count

Category Latest Main Branch
Total 48 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 8, 2024

Tachometer results

Chrome

number-field permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 523 kB 65.93ms - 69.92ms - faster ✔
5% - 12%
3.98ms - 8.66ms
branch 511 kB 73.02ms - 75.47ms slower ❌
6% - 13%
3.98ms - 8.66ms
-

slider permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 480 kB 73.83ms - 75.63ms - faster ✔
3% - 7%
2.40ms - 5.28ms
branch 467 kB 77.45ms - 79.69ms slower ❌
3% - 7%
2.40ms - 5.28ms
-
Firefox

number-field permalink

basic-test

Version Bytes Avg Time vs remote vs branch
npm latest 523 kB 143.98ms - 149.90ms - faster ✔
7% - 12%
11.12ms - 19.04ms
branch 511 kB 159.38ms - 164.66ms slower ❌
7% - 13%
11.12ms - 19.04ms
-

slider permalink

test-basic

Version Bytes Avg Time vs remote vs branch
npm latest 480 kB 166.86ms - 175.06ms - unsure 🔍
-5% - +2%
-9.34ms - +2.82ms
branch 467 kB 169.73ms - 178.71ms unsure 🔍
-2% - +5%
-2.82ms - +9.34ms
-

@blunteshwar blunteshwar requested a review from Westbrook May 8, 2024 13:30
Comment on lines 150 to 151
describe('it handles values greater than 1000', () => {
it('correctly handles values greater than 1000 with step=1', async () => {
Copy link
Contributor

Choose a reason for hiding this comment

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

Can we bump this test up into the describe('Step', () => { block so we don't need the new describe, please.

Copy link
Contributor

Choose a reason for hiding this comment

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

Corrected this on behalf of @blunteshwar.

@Rajdeepc Rajdeepc added bug Something isn't working Component: Number Field labels May 8, 2024
@Rajdeepc Rajdeepc requested a review from Westbrook May 8, 2024 14:12
Copy link
Contributor

@Westbrook Westbrook left a comment

Choose a reason for hiding this comment

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

:shipit: Many thanks for the quick turn around on this.

@Westbrook Westbrook merged commit 45d69d0 into main May 8, 2024
49 checks passed
@Westbrook Westbrook deleted the blunteshwar/truncating-values branch May 8, 2024 15:01
@spdev3000
Copy link
Collaborator

Thanks for the fast fix!

TarunAdobe pushed a commit that referenced this pull request May 10, 2024
* fix(number-field): handles values greater than 1000

* chore(number-field): updated tests

---------

Co-authored-by: Rajdeep Chandra <rajdeepchandra@Rajdeeps-MacBook-Pro-2.local>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working Component: Number Field
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: Slider values are truncated and divided by 1000 - when using values > 1000
4 participants