feat(Progress): use max parameter to scale value of progress bar

Previously, the max parameter acted as a hard limit to the progress value.
patternfly · Nov 21, 2018 · 2a64486 · 2a64486
1 parent c3c9e73
commit 2a64486
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 10 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/Progress/Progress.js b/packages/patternfly-4/react-core/src/components/Progress/Progress.js
@@ -71,9 +71,14 @@ class Progress extends Component {
       ...props,
       ...(valueText ? { 'aria-valuetext': valueText } : { 'aria-describedby': `${this.id}-description` })
     };
-    let limitedValue;
-    limitedValue = value < min ? min : value;
-    limitedValue = limitedValue > max ? max : limitedValue;
+    const scaledValue =
+      max === 100
+        ? value < min
+          ? min
+          : Math.min(value, max)
+        : value < min
+          ? Math.floor(Math.min((min / max) * 100, 100))
+          : Math.floor(Math.min((value / max) * 100, 100));
     return (
       <div
         {...additionalProps}
@@ -87,12 +92,12 @@ class Progress extends Component {
         id={this.id}
         role="progressbar"
         aria-valuemin={min}
-        aria-valuenow={limitedValue}
+        aria-valuenow={scaledValue}
         aria-valuemax={max}
       >
         <ProgressContainer
           parentId={this.id}
-          value={limitedValue}
+          value={scaledValue}
           title={title}
           label={label}
           variant={variant}

diff --git a/packages/patternfly-4/react-core/src/components/Progress/__snapshots__/Progress.test.js.snap b/packages/patternfly-4/react-core/src/components/Progress/__snapshots__/Progress.test.js.snap
@@ -1682,7 +1682,7 @@ exports[`value higher than maxValue 1`] = `
     aria-describedby="higher-max-value-description"
     aria-valuemax={60}
     aria-valuemin={0}
-    aria-valuenow={60}
+    aria-valuenow={100}
     className="pf-c-progress"
     id="higher-max-value"
     role="progressbar"
@@ -1691,7 +1691,7 @@ exports[`value higher than maxValue 1`] = `
       measureLocation="top"
       parentId="higher-max-value"
       title=""
-      value={60}
+      value={100}
       variant="info"
     >
       <div
@@ -1704,12 +1704,12 @@ exports[`value higher than maxValue 1`] = `
         <span
           className="pf-c-progress__measure"
         >
-          60%
+          100%
         </span>
       </div>
       <ProgressBar
         className=""
-        value={60}
+        value={100}
       >
         <div
           className="pf-c-progress__bar"
@@ -1718,7 +1718,7 @@ exports[`value higher than maxValue 1`] = `
             className="pf-c-progress__indicator"
             style={
               Object {
-                "width": "60%",
+                "width": "100%",
               }
             }
           >