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..9a2979d152 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(['percent', 'ratio']),
+ ]),
/** A progress bar can vary in size. */
size: PropTypes.oneOf(_.without(SUI.SIZES, 'mini', 'huge', 'massive')),
@@ -139,29 +134,41 @@ class Progress extends Component {
return autoSuccess && (percent >= 100 || value >= total)
}
- showProgress = () => {
- const { label, precision, progress, total, value } = this.props
+ renderLabel = () => {
+ const { children, label } = this.props
- if (label || progress || !_.isUndefined(precision)) return true
- return !(_.every([total, value], _.isUndefined))
+ if (!_.isNil(children)) return
{children}
+ return createShorthand('div', val => ({ children: val }), label, { className: 'label' })
+ }
+
+ renderProgress = percent => {
+ const {
+ precision,
+ progress,
+ total,
+ value,
+ } = this.props
+
+ if (!progress && _.isUndefined(precision)) return
+ return (
+
+ { progress !== 'ratio' ? `${percent}%` : `${value}/${total}` }
+
+ )
}
render() {
const {
active,
attached,
- children,
className,
color,
disabled,
error,
indicating,
inverted,
- label,
size,
success,
- total,
- value,
warning,
} = this.props
@@ -182,19 +189,14 @@ class Progress extends Component {
)
const rest = getUnhandledProps(Progress, this.props)
const ElementType = getElementType(Progress, this.props)
-
const percent = this.getPercent()
return (
- {this.showProgress() && (
-
- { label !== 'ratio' ? `${percent}%` : `${value}/${total}` }
-
- )}
+ {this.renderProgress(percent)}
- {children && {children}
}
+ {this.renderLabel()}
)
}
diff --git a/src/modules/Progress/index.d.ts b/src/modules/Progress/index.d.ts
index d14318f3ba..e16b4b8b63 100644
--- a/src/modules/Progress/index.d.ts
+++ b/src/modules/Progress/index.d.ts
@@ -38,7 +38,7 @@ interface ProgressProps {
inverted?: string;
/** Can be set to either to display progress as percent or ratio. */
- label?: boolean | 'ratio' | 'percent';
+ label?: any;
/** Current percent complete. */
percent?: number | string;
@@ -47,7 +47,7 @@ interface ProgressProps {
precision?: number;
/** A progress bar can contain a text value indicating current progress. */
- progress?: boolean;
+ progress?: boolean | 'percent' | 'ratio';
/** A progress bar can vary in size. */
size?: 'tiny' | 'small' | 'medium' | 'large' | 'big';
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%')