[added] dialogClassName prop to modal to be able to pass custom css c…

…lass to modal-dialog div

docs/assets/docs.css

@@ -1077,6 +1077,9 @@ h1[id] {
   margin-right: auto;
   margin-left: auto;
 }
+.custom-modal {
+  width: 90%;
+}
 
 /* Example dropdowns */
 .bs-example > .dropdown > .dropdown-toggle {

docs/examples/ModalDefaultSizing.js

@@ -0,0 +1,60 @@
+const MySmallModal = React.createClass({
+  render() {
+    return (
+      <Modal {...this.props} bsSize='small' title='Modal heading' animation={false}>
+        <div className='modal-body'>
+          <h4>Wrapped Text</h4>
+          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+          <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+          <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+          <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+        </div>
+        <div className='modal-footer'>
+          <Button onClick={this.props.onRequestHide}>Close</Button>
+        </div>
+      </Modal>
+    );
+  }
+});
+
+const MyLargeModal = React.createClass({
+  render() {
+    return (
+      <Modal {...this.props} bsSize='large' title='Modal heading' animation={false}>
+        <div className='modal-body'>
+          <h4>Wrapped Text</h4>
+          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+          <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+          <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+          <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
+          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
+          <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
+        </div>
+        <div className='modal-footer'>
+          <Button onClick={this.props.onRequestHide}>Close</Button>
+        </div>
+      </Modal>
+    );
+  }
+});
+
+const overlayTriggerInstance = (
+  <ButtonToolbar>
+    <ModalTrigger modal={<MySmallModal />}>
+      <Button bsStyle='primary' bsSize='large'>Launch small demo modal</Button>
+    </ModalTrigger>
+    <ModalTrigger modal={<MyLargeModal />}>
+      <Button bsStyle='primary' bsSize='large'>Launch large demo modal</Button>
+    </ModalTrigger>
+  </ButtonToolbar>
+);
+
+React.render(overlayTriggerInstance, mountNode);

docs/src/ComponentsPage.js

@@ -236,6 +236,14 @@ const ComponentsPage = React.createClass({
                     )}
                   </pre>
                   <ReactPlayground codeText={Samples.ModalContained} />
+
+                  <h3 id='modal-default-sizing'>Sizing modals using standard Bootstrap props</h3>
+                  <p>You can specify a bootstrap large or small modal by using the "bsSize" prop.</p>
+                  <ReactPlayground codeText={Samples.ModalDefaultSizing} />
+
+                  <h3 id='modal-custom-sizing'>Sizing modals using custom css</h3>
+                  <p>You can apply custom css to the modal dialog div using the "dialogClassName" prop. Example is using a custom css class with width set to 90%.</p>
+                  <ReactPlayground codeText={Samples.ModalCustomSizing} />
                 </div>
 
                 {/* Tooltip */}

docs/src/Samples.js

@@ -33,6 +33,8 @@ export default {
   ModalTrigger:                  require('fs').readFileSync(__dirname + '/../examples/ModalTrigger.js', 'utf8'),
   ModalOverlayMixin:             require('fs').readFileSync(__dirname + '/../examples/ModalOverlayMixin.js', 'utf8'),
   ModalContained:                require('fs').readFileSync(__dirname + '/../examples/ModalContained.js', 'utf8'),
+  ModalDefaultSizing:            require('fs').readFileSync(__dirname + '/../examples/ModalDefaultSizing.js', 'utf8'),
+  ModalCustomSizing:             require('fs').readFileSync(__dirname + '/../examples/ModalCustomSizing.js', 'utf8'),
   TooltipBasic:                  require('fs').readFileSync(__dirname + '/../examples/TooltipBasic.js', 'utf8'),
   TooltipPositioned:             require('fs').readFileSync(__dirname + '/../examples/TooltipPositioned.js', 'utf8'),
   TooltipInCopy:                 require('fs').readFileSync(__dirname + '/../examples/TooltipInCopy.js', 'utf8'),

src/Modal.js

@@ -20,7 +20,8 @@ const Modal = React.createClass({
     keyboard: React.PropTypes.bool,
     closeButton: React.PropTypes.bool,
     animation: React.PropTypes.bool,
-    onRequestHide: React.PropTypes.func.isRequired
+    onRequestHide: React.PropTypes.func.isRequired,
+    dialogClassName: React.PropTypes.string
   },
 
   getDefaultProps() {
@@ -55,7 +56,7 @@ const Modal = React.createClass({
         className={classNames(this.props.className, classes)}
         onClick={this.props.backdrop === true ? this.handleBackdropClick : null}
         ref="modal">
-        <div className={classNames(dialogClasses)}>
+        <div className={classNames(this.props.dialogClassName, dialogClasses)}>
           <div className="modal-content">
             {this.props.title ? this.renderHeader() : null}
             {this.props.children}

test/ModalSpec.js

@@ -85,4 +85,16 @@ describe('Modal', function () {
     assert.ok(dialog.className.match(/\bmodal-sm\b/));
   });
 
+  it('Should pass dialogClassName to the dialog', function () {
+    let noOp = function () {};
+    let instance = ReactTestUtils.renderIntoDocument(
+      <Modal dialogClassName="testCss" onRequestHide={noOp}>
+        <strong>Message</strong>
+      </Modal>
+    );
+
+    let dialog = ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'modal-dialog');
+    assert.match(dialog.props.className, /\btestCss\b/);
+  });
+
 });