fix(progress)!: convert value range to 0-100 (#10622)

**Related Issue:** #7207 ## Summary Fixes the discrepancy in value range used between Progress (0 -> 1.0) and Loader (0 -> 100), to have components use a similar expected value. BREAKING CHANGE: Refactors `progress` to use the value range of 0-100. Developers will need to provide a function to map existing values or use the updated range.
Esri · Nov 20, 2024 · f7d1d57 · f7d1d57
1 parent 8d1065c
commit f7d1d57
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 10 deletions.
diff --git a/packages/calcite-components/src/components/progress/progress.e2e.ts b/packages/calcite-components/src/components/progress/progress.e2e.ts
@@ -21,7 +21,7 @@ describe("calcite-progress", () => {
   });
 
   describe("theme", () => {
-    themed(html`<calcite-progress text="optional text" type="determinate" value="0.5"></calcite-progress>`, {
+    themed(html`<calcite-progress text="optional text" type="determinate" value="50"></calcite-progress>`, {
       "--calcite-progress-background-color": {
         shadowSelector: `.${CSS.track}`,
         targetProp: "backgroundColor",

diff --git a/packages/calcite-components/src/components/progress/progress.stories.ts b/packages/calcite-components/src/components/progress/progress.stories.ts
@@ -11,7 +11,7 @@ export default {
   title: "Components/Progress",
   args: {
     type: determinateType.defaultValue,
-    value: 0.8,
+    value: 80,
     text: "",
   },
   argTypes: {
@@ -20,7 +20,7 @@ export default {
       control: { type: "select" },
     },
     value: {
-      control: { type: "range", min: 0, max: 1, step: 0.01 },
+      control: { type: "range", min: 0, max: 100, step: 1 },
     },
   },
 };
@@ -33,7 +33,7 @@ export const darkModeRTL_TestOnly = (): string => html`
   <calcite-progress
     class="calcite-mode-dark"
     type="determinate"
-    value="0.2"
+    value="20"
     text="% Complete (optional text)"
   ></calcite-progress>
 `;

diff --git a/packages/calcite-components/src/components/progress/progress.tsx b/packages/calcite-components/src/components/progress/progress.tsx
@@ -34,7 +34,7 @@ export class Progress extends LitElement {
    */
   @property({ reflect: true }) type: "indeterminate" | "determinate" = "determinate";
 
-  /** When `type` is `"determinate"`, the component's progress value with a range of 0.0 - 1.0. */
+  /** When `type` is `"determinate"`, specifies the component's value with a range of 0 to 100. */
   @property() value = 0;
 
   // #endregion
@@ -43,14 +43,14 @@ export class Progress extends LitElement {
 
   override render(): JsxNode {
     const isDeterminate = this.type === "determinate";
-    const barStyles = isDeterminate ? { width: `${this.value * 100}%` } : {};
+    const barStyles = isDeterminate ? { width: `${this.value}%` } : {};
     const dir = getElementDir(this.el);
     return (
       <div
         ariaLabel={this.label || this.text}
-        ariaValueMax={1}
-        ariaValueMin={0}
-        ariaValueNow={this.value}
+        ariaValueMax={isDeterminate ? "100" : undefined}
+        ariaValueMin={isDeterminate ? "0" : undefined}
+        ariaValueNow={isDeterminate ? this.value : undefined}
         role="progressbar"
       >
         <div class="track">

diff --git a/packages/calcite-components/src/custom-theme/progress.ts b/packages/calcite-components/src/custom-theme/progress.ts
@@ -8,6 +8,6 @@ export const progressTokens = {
 
 export const progress = html`
   <calcite-label layout="inline">
-    <calcite-progress text="optional text" type="determinate" value="0.5"></calcite-progress>
+    <calcite-progress text="optional text" type="determinate" value="50"></calcite-progress>
   </calcite-label>
 `;