diff --git a/docs/app/Examples/modules/Progress/Variations/ProgressExampleInverted.js b/docs/app/Examples/modules/Progress/Variations/ProgressExampleInverted.js
index d430214490..6a20dd089f 100644
--- a/docs/app/Examples/modules/Progress/Variations/ProgressExampleInverted.js
+++ b/docs/app/Examples/modules/Progress/Variations/ProgressExampleInverted.js
@@ -3,16 +3,16 @@ import { Progress, Segment } from 'semantic-ui-react'
const ProgressExampleInverted = () => (
-
diff --git a/docs/app/Examples/modules/Progress/Variations/ProgressExampleInvertedColor.js b/docs/app/Examples/modules/Progress/Variations/ProgressExampleInvertedColor.js
index 51c1ec95d9..c28db3a3ad 100644
--- a/docs/app/Examples/modules/Progress/Variations/ProgressExampleInvertedColor.js
+++ b/docs/app/Examples/modules/Progress/Variations/ProgressExampleInvertedColor.js
@@ -3,19 +3,19 @@ import { Progress, Segment } from 'semantic-ui-react'
const ProgressExampleInvertedColor = () => (
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
)
diff --git a/src/modules/Progress/Progress.js b/src/modules/Progress/Progress.js
index 5af5fec978..e817355e1d 100644
--- a/src/modules/Progress/Progress.js
+++ b/src/modules/Progress/Progress.js
@@ -3,6 +3,7 @@ import _ from 'lodash'
import React, { Component, PropTypes } from 'react'
import {
+ createShorthand,
customPropTypes,
getElementType,
getUnhandledProps,
@@ -51,16 +52,7 @@ class Progress extends Component {
inverted: PropTypes.bool,
/** Can be set to either to display progress as percent or ratio. */
- label: customPropTypes.every([
- customPropTypes.some([
- customPropTypes.demand(['percent']),
- customPropTypes.demand(['total', 'value']),
- ]),
- PropTypes.oneOfType([
- PropTypes.bool,
- PropTypes.oneOf(['ratio', 'percent']),
- ]),
- ]),
+ label: customPropTypes.itemShorthand,
/** Current percent complete. */
percent: customPropTypes.every([
@@ -75,7 +67,10 @@ class Progress extends Component {
precision: PropTypes.number,
/** A progress bar can contain a text value indicating current progress. */
- progress: PropTypes.bool,
+ progress: PropTypes.oneOfType([
+ PropTypes.bool,
+ PropTypes.oneOf(['ratio', 'percent']),
+ ]),
/** A progress bar can vary in size. */
size: PropTypes.oneOf(_.without(SUI.SIZES, 'mini', 'huge', 'massive')),
@@ -125,6 +120,17 @@ class Progress extends Component {
if (!_.isUndefined(total) && !_.isUndefined(value)) return value / total * 100
}
+ getLabel = () => {
+ const { label } = this.props
+
+ return createShorthand(
+ 'div',
+ val => ({ children: val }),
+ label,
+ { className: 'label' }
+ )
+ }
+
getPercent = () => {
const { precision } = this.props
const percent = _.clamp(this.calculatePercent(), 0, 100)
@@ -140,10 +146,9 @@ class Progress extends Component {
}
showProgress = () => {
- const { label, precision, progress, total, value } = this.props
+ const { precision, progress } = this.props
- if (label || progress || !_.isUndefined(precision)) return true
- return !(_.every([total, value], _.isUndefined))
+ return progress || !_.isUndefined(precision)
}
render() {
@@ -157,7 +162,7 @@ class Progress extends Component {
error,
indicating,
inverted,
- label,
+ progress,
size,
success,
total,
@@ -190,11 +195,11 @@ class Progress extends Component {
{this.showProgress() && (
- { label !== 'ratio' ? `${percent}%` : `${value}/${total}` }
+ { progress !== 'ratio' ? `${percent}%` : `${value}/${total}` }
)}
- {children && {children}
}
+ {!_.isNil(children) ? this.getLabel() : {children}
}
)
}
diff --git a/test/specs/modules/Progress/Progress-test.js b/test/specs/modules/Progress/Progress-test.js
index 886132094f..501a8d846c 100644
--- a/test/specs/modules/Progress/Progress-test.js
+++ b/test/specs/modules/Progress/Progress-test.js
@@ -96,22 +96,11 @@ describe('Progress', () => {
})
describe('label', () => {
- it('displays the progress as a percentage by default', () => {
- shallow()
- .should.have.descendants('.progress')
- .and.contain.text('20%')
- })
- it('displays the progress as a ratio when set to "ratio"', () => {
- shallow()
+ it('shows the label text when provided', () => {
+ shallow()
.children()
- .find('.progress')
- .should.contain.text('1/2')
- })
- it('displays the progress as a percentage when set to "percent"', () => {
- shallow()
- .children()
- .find('.progress')
- .should.contain.text('50%')
+ .find('.label')
+ .should.contain.text('some-label')
})
})
@@ -131,6 +120,23 @@ describe('Progress', () => {
.find('.bar')
.should.not.have.descendants('.progress')
})
+ it('displays the progress as a percentage by default', () => {
+ shallow()
+ .should.have.descendants('.progress')
+ .and.contain.text('20%')
+ })
+ it('displays the progress as a ratio when set to "ratio"', () => {
+ shallow()
+ .children()
+ .find('.progress')
+ .should.contain.text('1/2')
+ })
+ it('displays the progress as a percentage when set to "percent"', () => {
+ shallow()
+ .children()
+ .find('.progress')
+ .should.contain.text('50%')
+ })
it('shows the percent complete', () => {
shallow()
.children()
@@ -191,7 +197,7 @@ describe('Progress', () => {
describe('total/value', () => {
it('calculates the percent complete', () => {
- shallow()
+ shallow()
.children()
.find('.progress')
.should.contain.text('50%')