fix: value length at progress bar when unit is percentage#7439
Merged
fix: value length at progress bar when unit is percentage#7439
Conversation
Contributor
There was a problem hiding this comment.
PR Overview
This pull request fixes the progress bar value width calculation when the unit is percentage and updates sample values for the KolProgress component to reflect the corrected behavior.
- Fix width calculation in KolProgress to handle percentage cases using a conditional value.
- Update ProgressBasic sample values for both percentage and custom unit examples.
Reviewed Changes
| File | Description |
|---|---|
| packages/components/src/components/progress/shadow.tsx | Adjusts width calculation by computing the character length of (max + 1) depending on whether the unit is percentage. |
| packages/samples/react/src/components/progress/basic.tsx | Updates example properties (_max and _value) for percentage and custom unit variants. |
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
Comments suppressed due to low confidence (2)
packages/components/src/components/progress/shadow.tsx:99
- [nitpick] Consider extracting the magic value '100' and the '+ 1' adjustment into named constants or a helper function. This will improve clarity around the intention behind calculating the width dynamically based on the unit.
<div class="value" style={{ width: `${`${(isPercentage ? 100 : this.state._max) + 1}`.length}ch` }}>
packages/samples/react/src/components/progress/basic.tsx:24
- Double-check that the updated _value of 42 for the cycle variant is intentional, as it represents a significant change from the previous value. Ensure this change aligns with the intended display behavior for the component.
<KolProgress _label="Max 150 kg" _variant="cycle" _max={150} _value={42} _unit="kg"></KolProgress>
Contributor
|
Netlify Draft Deployment |
$ Refs: #7397
deleonio
approved these changes
Mar 7, 2025
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 subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
This pull request includes changes to the
KolProgresscomponent and its usage in theProgressBasicsample. The key changes involve modifying the width calculation for the progress bar value and updating the example values in the sample component.Changes to
KolProgresscomponent:packages/components/src/components/progress/shadow.tsx)Updates to
ProgressBasicsample:_maxand_valueproperties for theKolProgresscomponents to smaller numbers in the percentages example. (packages/samples/react/src/components/progress/basic.tsx)_valueproperty for theKolProgresscomponent with a custom unit to a lower value. (packages/samples/react/src/components/progress/basic.tsx)Refs: Inkorrekte Prozentanzeige beim Progress #7397The A11y and PO reviews will only take place after all other DoD steps have been completed by the Developer: