fix(progress-bar): preserve fill border radius while animating progress#4950
Open
MichaelSebsbe wants to merge 1 commit into
Open
fix(progress-bar): preserve fill border radius while animating progress#4950MichaelSebsbe wants to merge 1 commit into
MichaelSebsbe wants to merge 1 commit into
Conversation
|
Hey @MichaelSebsbe, thank you for your pull request 🤗. The documentation from this branch can be viewed here. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Motivation
The determinate
ProgressBarfill was rendered at full width and animated withscaleX. Since transforms also scale the rendered border radius, customfillStyle.borderRadiuslooked nearly square at low progress values and only appeared correctly rounded near full progress.This updates determinate progress to reveal the full-width fill by translating it under the clipped track instead of scaling it. That preserves rounded fill styles while keeping the animation transform-based and compatible with the native driver.
Indeterminate progress keeps the existing scale/translate animation.
Related issue
Fixes a visual issue where determinate
ProgressBarfill radius is scaled down at low progress values.Test plan
yarn test src/components/__tests__/ProgressBar.test.tsxyarn typescriptAdded a regression test to verify determinate fill no longer uses
scaleX, while preserving customfillStylecoverage and updated snapshots.