fix: value length when unit is percentage

Refs: #7397 # Conflicts: # packages/components/src/components/progress/shadow.tsx
public-ui · Mar 5, 2025 · 0af8311 · 0af8311
1 parent 1ac6071
commit 0af8311
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 6 deletions.
diff --git a/packages/components/src/components/progress/shadow.tsx b/packages/components/src/components/progress/shadow.tsx
@@ -116,7 +116,7 @@ export class KolProgress implements ProgressAPI {
 						</div>
 					)}
 					{this.state._variant == 'bar' && (
-						<div class="kol-progress__bar-value" style={{ width: `${`${this.state._max}`.length}ch` }}>
+						<div class="kol-progress__bar-value" style={{ width: `${`${(isPercentage ? 100 : this.state._max) + 1}`.length}ch` }}>
 							{displayValue}
 						</div>
 					)}

diff --git a/packages/samples/react/src/components/progress/basic.tsx b/packages/samples/react/src/components/progress/basic.tsx
@@ -13,15 +13,15 @@ export const ProgressBasic: FC = () => (
 
 		<div className="grid gap-4 grid-cols-1 sm:grid-cols-2">
 			<fieldset title="Percentages" className="flex flex-col gap-4">
-				<KolProgress _variant="bar" _max={100} _value={0}></KolProgress>
-				<KolProgress _variant="bar" _max={100} _value={17}></KolProgress>
-				<KolProgress _variant="bar" _max={100} _value={100}></KolProgress>
-				<KolProgress _variant="cycle" _max={100} _value={85}></KolProgress>
+				<KolProgress _variant="bar" _max={7} _value={0}></KolProgress>
+				<KolProgress _variant="bar" _max={7} _value={2}></KolProgress>
+				<KolProgress _variant="bar" _max={7} _value={7}></KolProgress>
+				<KolProgress _variant="cycle" _max={7} _value={6}></KolProgress>
 			</fieldset>
 			<fieldset title="Custom units" className="flex flex-col gap-4">
 				<KolProgress _label="Distance" _variant="bar" _max={65434} _value={7236} _unit="m"></KolProgress>
 				<KolProgress _label="12 Tasks to do" _variant="bar" _max={12} _value={5} _unit="tasks completed"></KolProgress>
-				<KolProgress _label="Max 150 kg" _variant="cycle" _max={150} _value={134} _unit="kg"></KolProgress>
+				<KolProgress _label="Max 150 kg" _variant="cycle" _max={150} _value={42} _unit="kg"></KolProgress>
 			</fieldset>
 		</div>
 	</>