diff --git a/docs/examples/ProgressBarStacked.js b/docs/examples/ProgressBarStacked.js index 0da3b2abc1..ebcccca948 100644 --- a/docs/examples/ProgressBarStacked.js +++ b/docs/examples/ProgressBarStacked.js @@ -1,8 +1,8 @@ const progressInstance = ( - + - + ); diff --git a/src/ProgressBar.js b/src/ProgressBar.js index 1a2d1b20c4..a9b797f2a2 100644 --- a/src/ProgressBar.js +++ b/src/ProgressBar.js @@ -43,12 +43,6 @@ const ProgressBar = React.createClass({ return this.renderProgressBar(); } - const classes = { - active: this.props.active, - progress: true, - 'progress-striped': this.props.active || this.props.striped - }; - let content; if (this.props.children) { @@ -58,7 +52,7 @@ const ProgressBar = React.createClass({ } return ( -
+
{content}
); @@ -94,10 +88,15 @@ const ProgressBar = React.createClass({ ); } + const classes = classNames(this.props.className, this.getBsClassSet(), { + active: this.props.active, + 'progress-bar-striped': this.props.active || this.props.striped + }); + return (
); - assert.ok(React.findDOMNode(instance).className.match(/\bprogress-striped\b/)); + assert.ok(React.findDOMNode(instance).firstChild.className.match(/\bprogress-bar-striped\b/)); }); it('Should show animated striped bar', function () { @@ -160,8 +160,10 @@ describe('ProgressBar', function () { ); - assert.ok(React.findDOMNode(instance).className.match(/\bprogress-striped\b/)); - assert.ok(React.findDOMNode(instance).className.match(/\bactive\b/)); + const barClassName = React.findDOMNode(instance).firstChild.className; + + assert.ok(barClassName.match(/\bprogress-bar-striped\b/)); + assert.ok(barClassName.match(/\bactive\b/)); }); it('Should show stacked bars', function () { @@ -182,6 +184,28 @@ describe('ProgressBar', function () { assert.equal(bar2.style.width, '30%'); }); + it('Should render active and striped children in stacked bar too', function () { + let instance = ReactTestUtils.renderIntoDocument( + + + + + ); + let wrapper = React.findDOMNode(instance); + let bar1 = wrapper.firstChild; + let bar2 = wrapper.lastChild; + + assert.ok(wrapper.className.match(/\bprogress\b/)); + + assert.ok(bar1.className.match(/\bprogress-bar\b/)); + assert.ok(bar1.className.match(/\bactive\b/)); + assert.ok(bar1.className.match(/\bprogress-bar-striped\b/)); + + assert.ok(bar2.className.match(/\bprogress-bar\b/)); + assert.ok(bar2.className.match(/\bprogress-bar-striped\b/)); + assert.notOk(bar2.className.match(/\bactive\b/)); + }); + it('allows only ProgressBar in children', function () { ReactTestUtils.renderIntoDocument(