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: value handling of DynamicUnitInputNumberWithSlider #2730

Merged

Conversation

yomybaby
Copy link
Member

@yomybaby yomybaby commented Oct 2, 2024

Changes:

This PR fixes and enhances the DynamicUnitInputNumberWithSlider component by improving its value handling:

  1. Update Input behavior (fix bug and improve UX):
  • set the controllable value always.
  1. Updated slider behavior:
    • Set value to 0 and disable slider and hide tooltip when min value exceeds max value
  • Added filterOutInvalidMarks function to remove marks that fall outside the valid range(min~ max).
  1. Removed dependency on external isMinOversMaxValue function from ResourceAllocationFormItems

Addtionally this PR adds new stories:

  • "Greater min than max" to demonstrate behavior when min value exceeds max value
  • "Extra marks" to show custom marks on the slider
  • "Extra marks with greater min than max" combining both scenarios

Rationale:

These changes improve the component's robustness and flexibility, handling edge cases and providing better visual feedback to users.

Effects:

  • Users will see more consistent behavior when min/max values are set incorrectly
  • Developers can now add custom marks to the slider and test various scenarios using the new stories

Copy link

graphite-app bot commented Oct 2, 2024

Your org requires the Graphite merge queue for merging into main

Add the label “flow:merge-queue” to the PR and Graphite will automatically add it to the merge queue when it’s ready to merge. Or use the label “flow:hotfix” to add to the merge queue as a hot fix.

You must have a Graphite account and log in to Graphite in order to use the merge queue. Sign up using this link.

@github-actions github-actions bot added the size:L 100~500 LoC label Oct 2, 2024
Copy link
Member Author

yomybaby commented Oct 2, 2024

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @yomybaby and the rest of your teammates on Graphite Graphite

Copy link

github-actions bot commented Oct 2, 2024

Coverage report for ./react

St.
Category Percentage Covered / Total
🔴 Statements
5.32% (-0.01% 🔻)
340/6388
🔴 Branches
4.82% (-0% 🔻)
214/4442
🔴 Functions
2.99% (-0% 🔻)
63/2104
🔴 Lines
5.22% (-0.01% 🔻)
326/6241
Show files with reduced coverage 🔻
St.
File Statements Branches Functions Lines
🔴
... / DynamicUnitInputNumberWithSlider.tsx
4% (-1% 🔻)
0% 0%
4.55% (-1.34% 🔻)

Test suite run success

90 tests passing in 11 suites.

Report generated by 🧪jest coverage report action from f23da9d

@yomybaby yomybaby marked this pull request as ready for review October 2, 2024 02:07
value={
isMinOversMaxValue(_.parseInt(min), _.parseInt(max)) ? '0m' : value
}
value={value}
Copy link
Contributor

Choose a reason for hiding this comment

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

Doesn't DynamicUnitInputNumber require separation for isMinOversMaxValue?

Suggested change
value={value}
value={isMinOversMaxValue ? '0g' : value}

Copy link
Contributor

@ironAiken2 ironAiken2 left a comment

Choose a reason for hiding this comment

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

The value seems to keep changing whenever I move the focus in and out of the DynamicUnitInputNumber.

Copy link
Contributor

🎥 Video uploaded on Graphite:

@yomybaby yomybaby force-pushed the fix/dynamic-unit-input-number-with-slider-controllable branch from 0ee40a8 to 7366722 Compare October 2, 2024 02:52
Copy link
Contributor

@ironAiken2 ironAiken2 left a comment

Choose a reason for hiding this comment

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

The values of input and slider do not match.

image.png

@yomybaby yomybaby force-pushed the fix/dynamic-unit-input-number-with-slider-controllable branch from 7366722 to a16b196 Compare October 2, 2024 03:30
Copy link
Member Author

yomybaby commented Oct 2, 2024

There is a mistake. I change parseInt to parseFloat. Please check again.

Copy link
Contributor

@ironAiken2 ironAiken2 left a comment

Choose a reason for hiding this comment

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

LGTM

Copy link

graphite-app bot commented Oct 2, 2024

Merge activity

**Changes:**

This PR fixes and enhances the `DynamicUnitInputNumberWithSlider` component by improving its value handling:

1. Update Input behavior (fix bug and improve UX):
  - set the controllable value always.
1. Updated slider behavior:
   - Set value to 0 and disable slider and hide tooltip when min value exceeds max value
  - Added `filterOutInvalidMarks` function to remove marks that fall outside the valid range(min~ max).
1. Removed dependency on external `isMinOversMaxValue` function from `ResourceAllocationFormItems`

Addtionally this PR adds new stories:
   - "Greater min than max" to demonstrate behavior when min value exceeds max value
   - "Extra marks" to show custom marks on the slider
   - "Extra marks with greater min than max" combining both scenarios

**Rationale:**

These changes improve the component's robustness and flexibility, handling edge cases and providing better visual feedback to users.

**Effects:**

- Users will see more consistent behavior when min/max values are set incorrectly
- Developers can now add custom marks to the slider and test various scenarios using the new stories
@yomybaby yomybaby force-pushed the fix/dynamic-unit-input-number-with-slider-controllable branch from a16b196 to f23da9d Compare October 2, 2024 03:46
@graphite-app graphite-app bot merged commit f23da9d into main Oct 2, 2024
6 checks passed
@graphite-app graphite-app bot deleted the fix/dynamic-unit-input-number-with-slider-controllable branch October 2, 2024 03:47
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
size:L 100~500 LoC
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants