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', () => {