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 index b1b11c7dccc..a70448f3711 100644 --- 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 index b461baeddc6..a96639a8975 100644 --- 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 index 17de24871c7..d59d91c5b57 100644 --- 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(); + expect(view).toMatchSnapshot(); +}); + test('Progress with aria-valuetext', () => { const view = mount(); 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 index a8e588127ec..6c24ebf6002 100644 --- 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 }) => ( -