From 14ecda67bbf8a48c5bb4b9236cf7dd79bdf5d319 Mon Sep 17 00:00:00 2001 From: Christopher Schultz Date: Wed, 2 Feb 2022 21:53:24 -0800 Subject: [PATCH 1/2] fix(Progress): clamp bar width when progress='value' - calculatePercent handles all valid cases - getPercent just clamps and rounds output of calculatePercent --- src/modules/Progress/Progress.js | 7 ++----- test/specs/modules/Progress/Progress-test.js | 9 +++++++++ 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/src/modules/Progress/Progress.js b/src/modules/Progress/Progress.js index d9c08dc8e2..065a956e2f 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) } 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', () => { From 7c6649d2fb4e9ea332a45520cd8c29cb3001b666 Mon Sep 17 00:00:00 2001 From: Christopher Schultz Date: Wed, 2 Feb 2022 22:32:20 -0800 Subject: [PATCH 2/2] fix(Progress): improve propTypes check for progress prop - don't allow progress='value' without value - don't allow progress='ratio' without value and total --- src/modules/Progress/Progress.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/modules/Progress/Progress.js b/src/modules/Progress/Progress.js index 065a956e2f..d4c7e1cb06 100644 --- a/src/modules/Progress/Progress.js +++ b/src/modules/Progress/Progress.js @@ -161,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')),