fix(Progress): do not show progress without progress or label props

docs/app/Examples/modules/Progress/Variations/ProgressExampleInverted.js

@@ -3,16 +3,16 @@ import { Progress, Segment } from 'semantic-ui-react'
 
 const ProgressExampleInverted = () => (
   <Segment inverted>
-    <Progress percent={21} inverted label>
+    <Progress percent={21} inverted progress>
       Uploading Files
     </Progress>
-    <Progress percent={100} inverted label success>
+    <Progress percent={100} inverted progress success>
       success
     </Progress>
-    <Progress percent={100} inverted label warning>
+    <Progress percent={100} inverted progress warning>
       warning
     </Progress>
-    <Progress percent={100} inverted label error>
+    <Progress percent={100} inverted progress error>
       error
     </Progress>
   </Segment>

docs/app/Examples/modules/Progress/Variations/ProgressExampleInvertedColor.js

@@ -3,19 +3,19 @@ import { Progress, Segment } from 'semantic-ui-react'
 
 const ProgressExampleInvertedColor = () => (
   <Segment inverted>
-    <Progress percent={32} inverted color='red' label />
-    <Progress percent={59} inverted color='orange' label />
-    <Progress percent={13} inverted color='yellow' label />
-    <Progress percent={37} inverted color='olive' label />
-    <Progress percent={83} inverted color='green' label />
-    <Progress percent={23} inverted color='teal' label />
-    <Progress percent={85} inverted color='blue' label />
-    <Progress percent={38} inverted color='violet' label />
-    <Progress percent={47} inverted color='purple' label />
-    <Progress percent={29} inverted color='pink' label />
-    <Progress percent={68} inverted color='brown' label />
-    <Progress percent={36} inverted color='grey' label />
-    <Progress percent={72} inverted color='black' label />
+    <Progress percent={32} inverted color='red' progress />
+    <Progress percent={59} inverted color='orange' progress />
+    <Progress percent={13} inverted color='yellow' progress />
+    <Progress percent={37} inverted color='olive' progress />
+    <Progress percent={83} inverted color='green' progress />
+    <Progress percent={23} inverted color='teal' progress />
+    <Progress percent={85} inverted color='blue' progress />
+    <Progress percent={38} inverted color='violet' progress />
+    <Progress percent={47} inverted color='purple' progress />
+    <Progress percent={29} inverted color='pink' progress />
+    <Progress percent={68} inverted color='brown' progress />
+    <Progress percent={36} inverted color='grey' progress />
+    <Progress percent={72} inverted color='black' progress />
   </Segment>
 )
 

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 {
         <div className='bar' style={{ width: `${percent}%` }}>
           {this.showProgress() && (
             <div className='progress'>
-              { label !== 'ratio' ? `${percent}%` : `${value}/${total}` }
+              { progress !== 'ratio' ? `${percent}%` : `${value}/${total}` }
             </div>
           )}
         </div>
-        {children && <div className='label'>{children}</div>}
+        {!_.isNil(children) ? this.getLabel() : <div className='label'>{children}</div>}
       </ElementType>
     )
   }

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(<Progress percent={20} label />)
-        .should.have.descendants('.progress')
-        .and.contain.text('20%')
-    })
-    it('displays the progress as a ratio when set to "ratio"', () => {
-      shallow(<Progress label='ratio' value={1} total={2} />)
+    it('shows the label text when provided', () => {
+      shallow(<Progress label='some-label' />)
         .children()
-        .find('.progress')
-        .should.contain.text('1/2')
-    })
-    it('displays the progress as a percentage when set to "percent"', () => {
-      shallow(<Progress label='percent' value={1} total={2} />)
-        .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(<Progress percent={20} progress />)
+        .should.have.descendants('.progress')
+        .and.contain.text('20%')
+    })
+    it('displays the progress as a ratio when set to "ratio"', () => {
+      shallow(<Progress progress='ratio' value={1} total={2} />)
+        .children()
+        .find('.progress')
+        .should.contain.text('1/2')
+    })
+    it('displays the progress as a percentage when set to "percent"', () => {
+      shallow(<Progress progress='percent' value={1} total={2} />)
+        .children()
+        .find('.progress')
+        .should.contain.text('50%')
+    })
     it('shows the percent complete', () => {
       shallow(<Progress percent={72} progress />)
         .children()
@@ -191,7 +197,7 @@ describe('Progress', () => {
 
   describe('total/value', () => {
     it('calculates the percent complete', () => {
-      shallow(<Progress value={1} total={2} />)
+      shallow(<Progress value={1} total={2} progress />)
         .children()
         .find('.progress')
         .should.contain.text('50%')