diff --git a/src/modules/Progress/Progress.js b/src/modules/Progress/Progress.js index d9c08dc8e2..d4c7e1cb06 100644 --- a/src/modules/Progress/Progress.js +++ b/src/modules/Progress/Progress.js @@ -23,6 +23,7 @@ class Progress extends Component { if (!_.isUndefined(percent)) return percent if (!_.isUndefined(total) && !_.isUndefined(value)) return (value / total) * 100 + if (!_.isUndefined(value)) return value } computeValueText = (percent) => { @@ -34,13 +35,9 @@ class Progress extends Component { } getPercent = () => { - const { precision, progress, total, value } = this.props + const { precision } = this.props const percent = _.clamp(this.calculatePercent(), 0, 100) - if (!_.isUndefined(total) && !_.isUndefined(value) && progress === 'value') { - return (value / total) * 100 - } - if (progress === 'value') return value if (_.isUndefined(precision)) return percent return _.round(percent, precision) } @@ -164,7 +161,12 @@ Progress.propTypes = { precision: PropTypes.number, /** A progress bar can contain a text value indicating current progress. */ - progress: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['percent', 'ratio', 'value'])]), + progress: PropTypes.oneOfType([ + PropTypes.bool, + PropTypes.oneOf(['percent']), + customPropTypes.every([PropTypes.oneOf(['value']), customPropTypes.demand(['value'])]), + customPropTypes.every([PropTypes.oneOf(['ratio']), customPropTypes.demand(['value', 'total'])]), + ]), /** A progress bar can vary in size. */ size: PropTypes.oneOf(_.without(SUI.SIZES, 'mini', 'huge', 'massive')), diff --git a/test/specs/modules/Progress/Progress-test.js b/test/specs/modules/Progress/Progress-test.js index 75d7a3f043..51d3912dd6 100644 --- a/test/specs/modules/Progress/Progress-test.js +++ b/test/specs/modules/Progress/Progress-test.js @@ -85,6 +85,15 @@ describe('Progress', () => { .find('.bar') .should.have.style('width', '50%') }) + it('cannot have its width set >100%, when progress="value"', () => { + shallow() + .find('.bar') + .should.have.style('width', '100%') + + shallow() + .find('.bar') + .should.have.style('width', '100%') + }) }) describe('data-percent', () => {