fix: value length at progress bar when unit is percentage (#7439)

Author: deleonio

packages/components/src/components/progress/shadow.tsx

@@ -96,7 +96,7 @@ export class KolProgress implements ProgressAPI {
 						</div>
 					)}
 					{this.state._variant == 'bar' && (
-						<div class="value" style={{ width: `${`${this.state._max}`.length}ch` }}>
+						<div class="value" style={{ width: `${`${(isPercentage ? 100 : this.state._max) + 1}`.length}ch` }}>
 							{displayValue}
 						</div>
 					)}

packages/components/src/components/progress/test/__snapshots__/snapshot.spec.tsx.snap

@@ -39,7 +39,7 @@ exports[`kol-progress should render with _label="Label" _variant="bar" _max=42 _
         <rect class="border" fill="currentColor" height="11" rx="5" stroke="currentColor" stroke-width="1" x="1" y="1" style="width: 100%;"></rect>
         <rect class="progress" fill="currentColor" height="7" rx="3.5" stroke="currentColor" stroke-width="3" x="3" y="3" style="width: calc(0% - 4px);"></rect>
       </svg>
-      <div class="value" style="width: 2ch;">
+      <div class="value" style="width: 3ch;">
         0
       </div>
       <div class="unit">
@@ -66,7 +66,7 @@ exports[`kol-progress should render with _label="Label" _variant="bar" _max=42 _
         <rect class="border" fill="currentColor" height="11" rx="5" stroke="currentColor" stroke-width="1" x="1" y="1" style="width: 100%;"></rect>
         <rect class="progress" fill="currentColor" height="7" rx="3.5" stroke="currentColor" stroke-width="3" x="3" y="3" style="width: calc(40.476190476190474% - 4px);"></rect>
       </svg>
-      <div class="value" style="width: 2ch;">
+      <div class="value" style="width: 3ch;">
         40
       </div>
       <div class="unit">
@@ -120,7 +120,7 @@ exports[`kol-progress should render with _label="Label" _variant="bar" _max=42 _
         <rect class="border" fill="currentColor" height="11" rx="5" stroke="currentColor" stroke-width="1" x="1" y="1" style="width: 100%;"></rect>
         <rect class="progress" fill="currentColor" height="7" rx="3.5" stroke="currentColor" stroke-width="3" x="3" y="3" style="width: calc(238.0952380952381% - 4px);"></rect>
       </svg>
-      <div class="value" style="width: 2ch;">
+      <div class="value" style="width: 3ch;">
         238
       </div>
       <div class="unit">

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>
 	</>