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(