feat(Labeled progress): allow consumers to pass additional label for …

…progressbar (patternfly#822)
redallen · Oct 24, 2018 · b8ce0c9 · b8ce0c9
1 parent 7ed5a2d
commit b8ce0c9
Show file tree

Hide file tree

Showing 7 changed files with 166 additions and 38 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/Progress/Progress.docs.js b/packages/patternfly-4/react-core/src/components/Progress/Progress.docs.js
@@ -11,6 +11,7 @@ import ProgressSuccess from './examples/ProgressSuccess';
 import ProgressWithoutMeasure from './examples/ProgressWithoutMeasure';
 import SmallProgress from './examples/SmallProgress';
 import ProgressWithDynamicDescription from './examples/ProgressWithDynamicDescription';
+import LabeledProgress from './examples/LabeledProgress';
 
 export default {
   title: 'Progress',
@@ -24,6 +25,7 @@ export default {
   },
   examples: [
     Simple,
+    LabeledProgress,
     SmallProgress,
     LargeProgress,
     ProgressOutside,

diff --git a/packages/patternfly-4/react-core/src/components/Progress/Progress.js b/packages/patternfly-4/react-core/src/components/Progress/Progress.js
@@ -21,6 +21,8 @@ const propTypes = {
   variant: PropTypes.oneOf(Object.values(ProgressVariant)),
   /** Title above progress. */
   title: PropTypes.string,
+  /** Label to indicate what progress is showing. */
+  label: PropTypes.node,
   /** Actual value of progress. */
   value: PropTypes.number,
   /** DOM id for progress component. */
@@ -59,7 +61,7 @@ class Progress extends Component {
   }
 
   render() {
-    const { className, size, id, value, title, variant, measureLocation, min, max, valueText, ...props } = this.props;
+    const { className, size, id, value, title, label, variant, measureLocation, min, max, valueText, ...props } = this.props;
     const { uniqueId } = this.state;
     const additionalProps = {
       ...props,
@@ -88,6 +90,7 @@ class Progress extends Component {
           parentId={uniqueId}
           value={limitedValue}
           title={title}
+          label={label}
           variant={variant}
           measureLocation={measureLocation}
         />

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
@@ -13,6 +13,11 @@ test('no value specified', () => {
   expect(view).toMatchSnapshot();
 });
 
+test('additional label', () => {
+  const view = mount(<Progress id="additional-label" value={33} label="Additional label" />);
+  expect(view).toMatchSnapshot();
+});
+
 test('Progress with aria-valuetext', () => {
   const view = mount(<Progress value={33} id="progress-aria-valuetext" valueText="Descriptive text here" />);
   expect(view).toMatchSnapshot();

diff --git a/packages/patternfly-4/react-core/src/components/Progress/ProgressBar.js b/packages/patternfly-4/react-core/src/components/Progress/ProgressBar.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from '@patternfly/patternfly-next/components/Progress/progress.css';
+import { progressBar, progressIndicator, progressMeasure } from '@patternfly/patternfly-next/components/Progress/progress.css';
 import { css } from '@patternfly/react-styles';
 import PropTypes from 'prop-types';
 
@@ -18,9 +18,9 @@ const defaultProps = {
 };
 
 const ProgressBar = ({ className, children, value, ...props }) => (
-  <div {...props} className={css(styles.progressBar, className)}>
-    <div className={css(styles.progressIndicator)} style={{ width: `${value}%` }}>
-      <span className={css(styles.progressMeasure)}>{children}</span>
+  <div {...props} className={css(progressBar, className)}>
+    <div className={css(progressIndicator)} style={{ width: `${value}%` }}>
+      <span className={css(progressMeasure)}>{children}</span>
     </div>
   </div>
 );

diff --git a/packages/patternfly-4/react-core/src/components/Progress/ProgressContainer.js b/packages/patternfly-4/react-core/src/components/Progress/ProgressContainer.js
@@ -1,6 +1,11 @@
 import React, { Fragment } from 'react';
-import styles from '@patternfly/patternfly-next/components/Progress/progress.css';
-import { css } from '@patternfly/react-styles';
+import {
+  progressDescription,
+  progressMeasure,
+  progressStatusIcon,
+  progressStatus
+} from '@patternfly/patternfly-next/components/Progress/progress.css';
+import { css, StyleSheet } from '@patternfly/react-styles';
 import PropTypes from 'prop-types';
 import { CheckCircleIcon, TimesCircleIcon } from '@patternfly/react-icons';
 import ProgressBar from './ProgressBar';
@@ -23,6 +28,8 @@ const propTypes = {
   parentId: PropTypes.string.isRequired,
   /** Progress title. */
   title: PropTypes.string,
+  /** Label to indicate what progress is showing. */
+  label: PropTypes.node,
   /** Type of progress status. */
   variant: PropTypes.oneOf(Object.values(ProgressVariant)),
   /** Location of progress value. */
@@ -42,20 +49,22 @@ const variantToIcon = {
   [ProgressVariant.success]: CheckCircleIcon
 };
 
-const ProgressContainer = ({ value, title, parentId, variant, measureLocation }) => {
+const ProgressContainer = ({ value, title, parentId, label, variant, measureLocation }) => {
   const StatusIcon = variantToIcon.hasOwnProperty(variant) && variantToIcon[variant];
   return (
     <Fragment>
-      <div className={css(styles.progressDescription)} id={`${parentId}-description`}>
+      <div className={css(progressDescription)} id={`${parentId}-description`}>
         {title}
       </div>
-      <div className={css(styles.progressStatus)}>
+      <div className={css(progressStatus)}>
         {(measureLocation === ProgressMeasureLocation.top || measureLocation === ProgressMeasureLocation.outside) && (
-          <span className={css(styles.progressMeasure)}>{value}%</span>
+          <span className={css(progressMeasure)}>
+            {label || `${value}%`}
+          </span>
         )}
         {measureLocation !== ProgressMeasureLocation.none &&
           variantToIcon.hasOwnProperty(variant) && (
-            <span className={css(styles.progressStatusIcon)}>
+            <span className={css(progressStatusIcon)}>
               <StatusIcon />
             </span>
           )}

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
@@ -380,8 +380,7 @@ exports[`Progress measure location outside 1`] = `
         <span
           className="pf-c-progress__measure"
         >
-          33
-          %
+          33%
         </span>
       </div>
       <ProgressBar
@@ -489,8 +488,7 @@ exports[`Progress measure location top 1`] = `
         <span
           className="pf-c-progress__measure"
         >
-          33
-          %
+          33%
         </span>
       </div>
       <ProgressBar
@@ -598,8 +596,7 @@ exports[`Progress size lg 1`] = `
         <span
           className="pf-c-progress__measure"
         >
-          33
-          %
+          33%
         </span>
       </div>
       <ProgressBar
@@ -707,8 +704,7 @@ exports[`Progress size md 1`] = `
         <span
           className="pf-c-progress__measure"
         >
-          33
-          %
+          33%
         </span>
       </div>
       <ProgressBar
@@ -816,8 +812,7 @@ exports[`Progress size sm 1`] = `
         <span
           className="pf-c-progress__measure"
         >
-          33
-          %
+          33%
         </span>
       </div>
       <ProgressBar
@@ -930,8 +925,7 @@ exports[`Progress variant danger 1`] = `
         <span
           className="pf-c-progress__measure"
         >
-          33
-          %
+          33%
         </span>
         <span
           className="pf-c-progress__status-icon"
@@ -1063,8 +1057,7 @@ exports[`Progress variant info 1`] = `
         <span
           className="pf-c-progress__measure"
         >
-          33
-          %
+          33%
         </span>
       </div>
       <ProgressBar
@@ -1177,8 +1170,7 @@ exports[`Progress variant success 1`] = `
         <span
           className="pf-c-progress__measure"
         >
-          33
-          %
+          33%
         </span>
         <span
           className="pf-c-progress__status-icon"
@@ -1310,8 +1302,7 @@ exports[`Progress with aria-valuetext 1`] = `
         <span
           className="pf-c-progress__measure"
         >
-          33
-          %
+          33%
         </span>
       </div>
       <ProgressBar
@@ -1419,8 +1410,117 @@ exports[`Simple progress 1`] = `
         <span
           className="pf-c-progress__measure"
         >
-          33
-          %
+          33%
+        </span>
+      </div>
+      <ProgressBar
+        className=""
+        value={33}
+      >
+        <div
+          className="pf-c-progress__bar"
+        >
+          <div
+            className="pf-c-progress__indicator"
+            style={
+              Object {
+                "width": "33%",
+              }
+            }
+          >
+            <span
+              className="pf-c-progress__measure"
+            />
+          </div>
+        </div>
+      </ProgressBar>
+    </ProgressContainer>
+  </div>
+</Progress>
+`;
+
+exports[`additional label 1`] = `
+.pf-c-progress__description {
+  display: block;
+  grid-column: 1 / 2;
+}
+.pf-c-progress__measure {
+  display: block;
+}
+.pf-c-progress__status {
+  display: block;
+  grid-column: 2 / 3;
+  grid-row: 1 / 2;
+}
+.pf-c-progress__measure {
+  display: block;
+}
+.pf-c-progress__indicator {
+  display: block;
+  position: absolute;
+  grid-column: 1 / 3;
+  grid-row: 2 / 3;
+  min-width: 2rem;
+  max-width: 100%;
+  height: 0.5rem;
+  background-color: #cc0000;
+}
+.pf-c-progress__bar {
+  display: block;
+  position: relative;
+  grid-column: 1 / 3;
+  grid-row: 2 / 3;
+  height: 0.5rem;
+  background-color: #ffffff;
+}
+.pf-c-progress {
+  display: grid;
+  grid-gap: 1rem;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: 1fr auto;
+}
+
+<Progress
+  className=""
+  id="additional-label"
+  label="Additional label"
+  max={100}
+  measureLocation="top"
+  min={0}
+  size={null}
+  title=""
+  value={33}
+  valueText={null}
+  variant="info"
+>
+  <div
+    aria-describedby="additional-label-description"
+    aria-valuemax={100}
+    aria-valuemin={0}
+    aria-valuenow={33}
+    className="pf-c-progress"
+    id="additional-label"
+    role="progressbar"
+  >
+    <ProgressContainer
+      label="Additional label"
+      measureLocation="top"
+      parentId="additional-label"
+      title=""
+      value={33}
+      variant="info"
+    >
+      <div
+        className="pf-c-progress__description"
+        id="additional-label-description"
+      />
+      <div
+        className="pf-c-progress__status"
+      >
+        <span
+          className="pf-c-progress__measure"
+        >
+          Additional label
         </span>
       </div>
       <ProgressBar
@@ -1528,8 +1628,7 @@ exports[`no value specified 1`] = `
         <span
           className="pf-c-progress__measure"
         >
-          0
-          %
+          0%
         </span>
       </div>
       <ProgressBar
@@ -1637,8 +1736,7 @@ exports[`value higher than maxValue 1`] = `
         <span
           className="pf-c-progress__measure"
         >
-          60
-          %
+          60%
         </span>
       </div>
       <ProgressBar
@@ -1746,8 +1844,7 @@ exports[`value lower than minValue 1`] = `
         <span
           className="pf-c-progress__measure"
         >
-          40
-          %
+          40%
         </span>
       </div>
       <ProgressBar

diff --git a/packages/patternfly-4/react-core/src/components/Progress/examples/LabeledProgress.js b/packages/patternfly-4/react-core/src/components/Progress/examples/LabeledProgress.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Progress, ProgressMeasureLocation } from '@patternfly/react-core';
+
+class LabeledProgress extends React.Component {
+  static title = 'Progress with additional label';
+
+  render() {
+    return <Progress value={33} title="Descriptive text here" measureLocation={ProgressMeasureLocation.top} label="Some label" />;
+  }
+}
+
+export default LabeledProgress;