diff --git a/docs/examples/ModalContained.js b/docs/examples/ModalContained.js index a0df7aeb4b..8747c2eef7 100644 --- a/docs/examples/ModalContained.js +++ b/docs/examples/ModalContained.js @@ -13,7 +13,7 @@ var ContainedModal = React.createClass({ render: function() { return ( - +
Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.
diff --git a/docs/examples/ModalOverlayMixin.js b/docs/examples/ModalOverlayMixin.js index 0727fe9ca9..15890fc1af 100644 --- a/docs/examples/ModalOverlayMixin.js +++ b/docs/examples/ModalOverlayMixin.js @@ -28,7 +28,7 @@ var CustomModalTrigger = React.createClass({ } return ( - +
This modal is controlled by our custom trigger component.
diff --git a/docs/examples/ModalStatic.js b/docs/examples/ModalStatic.js index 5674990cb9..7b11bf193f 100644 --- a/docs/examples/ModalStatic.js +++ b/docs/examples/ModalStatic.js @@ -5,6 +5,7 @@ function handleHide() { var modalInstance = (
+

Text in a modal

Duis mollis, est non commodo luctus, nisi erat porttitor ligula.

diff --git a/src/Modal.jsx b/src/Modal.jsx index f555ac472c..52e7f24701 100644 --- a/src/Modal.jsx +++ b/src/Modal.jsx @@ -58,7 +58,7 @@ var Modal = React.createClass({ onClick={this.props.backdrop === true ? this.handleBackdropClick : null} ref="modal">
-
+
{this.props.title ? this.renderHeader() : null} {this.props.children}
@@ -97,8 +97,17 @@ var Modal = React.createClass({ ); } + var style = this.props.bsStyle; + var classes = { + 'modal-header': true + }; + classes['bg-' + style] = style; + classes['text-' + style] = style; + + var className = classSet(classes); + return ( -
+
{closeButton} {this.renderTitle()}
diff --git a/test/ModalSpec.jsx b/test/ModalSpec.jsx index bbc0a6a1c6..4fdc610397 100644 --- a/test/ModalSpec.jsx +++ b/test/ModalSpec.jsx @@ -85,4 +85,17 @@ describe('Modal', function () { assert.ok(dialog.className.match(/\bmodal-sm\b/)); }); + it('Should pass bsStyle to the header', function () { + var noOp = function () {}; + var instance = ReactTestUtils.renderIntoDocument( + + Message + + ); + + var header = instance.getDOMNode().getElementsByClassName('modal-header')[0]; + assert.ok(header.className.match(/\bbg-danger\b/)); + assert.ok(header.className.match(/\btext-danger\b/)); + }); + });