[added] bsStyle prop support for Modal to set the header color

kyletsang · Feb 25, 2015 · 13f395d · 13f395d
1 parent f26e39f
commit 13f395d
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 5 deletions.
diff --git a/docs/examples/ModalContained.js b/docs/examples/ModalContained.js
@@ -13,7 +13,7 @@
 var ContainedModal = React.createClass({
   render: function() {
     return (
-      <Modal {...this.props} title='Contained Modal' animation>
+      <Modal {...this.props} bsStyle="primary" title='Contained Modal' animation>
         <div className="modal-body">
           Elit est explicabo ipsum eaque dolorem blanditiis doloribus sed id ipsam, beatae, rem fuga id earum? Inventore et facilis obcaecati.
         </div>

diff --git a/docs/examples/ModalOverlayMixin.js b/docs/examples/ModalOverlayMixin.js
@@ -28,7 +28,7 @@ var CustomModalTrigger = React.createClass({
     }
 
     return (
-        <Modal title="Modal heading" onRequestHide={this.handleToggle}>
+        <Modal bsStyle="primary" title="Modal heading" onRequestHide={this.handleToggle}>
           <div className="modal-body">
             This modal is controlled by our custom trigger component.
           </div>

diff --git a/docs/examples/ModalStatic.js b/docs/examples/ModalStatic.js
@@ -5,6 +5,7 @@ function handleHide() {
 var modalInstance = (
     <div className="static-modal">
       <Modal title="Modal title"
+        bsStyle="primary"
         backdrop={false}
         animation={false}
         container={mountNode}

diff --git a/docs/examples/ModalTrigger.js b/docs/examples/ModalTrigger.js
@@ -1,7 +1,7 @@
 var MyModal = React.createClass({
   render: function() {
     return (
-        <Modal {...this.props} title="Modal heading" animation={false}>
+        <Modal {...this.props} bsStyle="primary" title="Modal heading" animation={false}>
           <div className="modal-body">
             <h4>Text in a modal</h4>
             <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>

diff --git 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">
         <div className={classSet(dialogClasses)}>
-          <div className="modal-content">
+          <div className="modal-content" style={{overflow: 'hidden'}}>
             {this.props.title ? this.renderHeader() : null}
             {this.props.children}
           </div>
@@ -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 (
-      <div className="modal-header">
+      <div className={className}>
         {closeButton}
         {this.renderTitle()}
       </div>

diff --git 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(
+      <Modal bsStyle='danger' title="Title" onRequestHide={noOp}>
+        <strong>Message</strong>
+      </Modal>
+    );
+
+    var header = instance.getDOMNode().getElementsByClassName('modal-header')[0];
+    assert.ok(header.className.match(/\bbg-danger\b/));
+    assert.ok(header.className.match(/\btext-danger\b/));
+  });
+
 });