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

…ternfly#950) * feat(Progress): use max parameter to scale value of progress bar Previously, the max parameter acted as a hard limit to the progress value. * fix(Progress): update Progress bar to reflect proper demo behavior in core Changed logic to always show status icon if present regardless if label/value should be displayed. This matches behavior in pf-next. * feat(Progress): update min parameter to scale progress value Change scaling logic to account for both max and min, instead of only max. * test(Progress): Add tests and add missing snapshot
redallen · Nov 28, 2018 · 52a6b6d · 52a6b6d
1 parent d90ce62
commit 52a6b6d
Show file tree

Hide file tree

Showing 4 changed files with 351 additions and 21 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,7 @@ 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 = Math.min(100, Math.max(0, Math.floor(((value - min) / (max - min)) * 100)));
     return (
       <div
         {...additionalProps}
@@ -87,12 +85,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/Progress.test.js b/packages/patternfly-4/react-core/src/components/Progress/Progress.test.js
@@ -33,6 +33,21 @@ test('value higher than maxValue', () => {
   expect(view).toMatchSnapshot();
 });
 
+test('value scaled with minValue', () => {
+  const view = mount(<Progress min={10} value={50} id="scaled-min-value" />);
+  expect(view).toMatchSnapshot();
+});
+
+test('value scaled with maxValue', () => {
+  const view = mount(<Progress value={50} id="scaled-max-value" max={80} />);
+  expect(view).toMatchSnapshot();
+});
+
+test('value scaled between minValue and maxValue', () => {
+  const view = mount(<Progress min={10} value={50} id="scaled-range-value" max={80} />);
+  expect(view).toMatchSnapshot();
+});
+
 describe('Progress size', () => {
   Object.keys(ProgressSize).forEach(oneSize => {
     test(oneSize, () => {

diff --git a/packages/patternfly-4/react-core/src/components/Progress/ProgressContainer.js b/packages/patternfly-4/react-core/src/components/Progress/ProgressContainer.js
@@ -55,12 +55,11 @@ const ProgressContainer = ({ value, title, parentId, label, variant, measureLoca
         {(measureLocation === ProgressMeasureLocation.top || measureLocation === ProgressMeasureLocation.outside) && (
           <span className={css(progressStyle.progressMeasure)}>{label || `${value}%`}</span>
         )}
-        {measureLocation !== ProgressMeasureLocation.none &&
-          variantToIcon.hasOwnProperty(variant) && (
-            <span className={css(progressStyle.progressStatusIcon)}>
-              <StatusIcon />
-            </span>
-          )}
+        {variantToIcon.hasOwnProperty(variant) && (
+          <span className={css(progressStyle.progressStatusIcon)}>
+            <StatusIcon />
+          </span>
+        )}
       </div>
       <ProgressBar value={value}>{measureLocation === ProgressMeasureLocation.inside && `${value}%`}</ProgressBar>
     </Fragment>