From 13f395d2304727d65ee22242423150c22b73addb Mon Sep 17 00:00:00 2001
From: Stefan Fisk <contact@stefanfisk.com>
Date: Sat, 21 Feb 2015 22:37:19 +0100
Subject: [PATCH] [added] bsStyle prop support for Modal to set the header
 color

---
 docs/examples/ModalContained.js    |  2 +-
 docs/examples/ModalOverlayMixin.js |  2 +-
 docs/examples/ModalStatic.js       |  1 +
 docs/examples/ModalTrigger.js      |  2 +-
 src/Modal.jsx                      | 13 +++++++++++--
 test/ModalSpec.jsx                 | 13 +++++++++++++
 6 files changed, 28 insertions(+), 5 deletions(-)

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 (
-      <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
index 0727fe9ca9..15890fc1af 100644
--- 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
index 5674990cb9..7b11bf193f 100644
--- 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
index 179eaa9e99..6cfcff4c00 100644
--- 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
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">
         <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
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(
+      <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/));
+  });
+
 });