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 }) => ( -
-
- {children} +
+
+ {children}
); diff --git a/packages/patternfly-4/react-core/src/components/Progress/ProgressContainer.js b/packages/patternfly-4/react-core/src/components/Progress/ProgressContainer.js index f066651b57e..c8b16fc06c0 100644 --- 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 ( -
+
{title}
-
+
{(measureLocation === ProgressMeasureLocation.top || measureLocation === ProgressMeasureLocation.outside) && ( - {value}% + + {label || `${value}%`} + )} {measureLocation !== ProgressMeasureLocation.none && variantToIcon.hasOwnProperty(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 index f2a17e4bb83..9ff0a77ad6e 100644 --- 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`] = ` - 33 - % + 33%
- 33 - % + 33%
- 33 - % + 33%
- 33 - % + 33%
- 33 - % + 33%
- 33 - % + 33% - 33 - % + 33% - 33 - % + 33% - 33 - % + 33% - 33 - % + 33% + + + +
+
+ +
+
+
+ + +
+`; + +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; +} + + +
+ +
+
+ + Additional label
- 0 - % + 0%
- 60 - % + 60%
- 40 - % + 40% ; + } +} + +export default LabeledProgress;