[fixed] Modal uses bsClass prop to set its classes

Author: jquense

src/Modal.js

@@ -126,6 +126,7 @@ const Modal = React.createClass({
 
   getDefaultProps(){
     return {
+      bsClass: 'modal',
       show: false,
       animation: true,
       backdrop: true,
@@ -203,12 +204,12 @@ const Modal = React.createClass({
   },
 
   renderBackdrop(modal) {
-    let { animation } = this.props;
+    let { animation, bsClass } = this.props;
     let duration = Modal.BACKDROP_TRANSITION_DURATION;
 
     let backdrop = (
       <div ref="backdrop"
-       className={classNames('modal-backdrop', { in: this.props.show && !animation })}
+       className={classNames(`${bsClass}-backdrop`, { in: this.props.show && !animation })}
        onClick={this.handleBackdropClick}
       />
     );

src/ModalDialog.js

@@ -32,10 +32,11 @@ const ModalDialog = React.createClass({
 
   render() {
     let modalStyle = { display: 'block'};
+    let bsClass = this.props.bsClass;
     let dialogClasses = this.getBsClassSet();
 
     delete dialogClasses.modal;
-    dialogClasses['modal-dialog'] = true;
+    dialogClasses[`${bsClass}-dialog`] = true;
 
     return (
       <div
@@ -44,10 +45,10 @@ const ModalDialog = React.createClass({
         tabIndex="-1"
         role="dialog"
         style={modalStyle}
-        className={classNames(this.props.className, 'modal')}
+        className={classNames(this.props.className, bsClass)}
       >
         <div className={classNames(this.props.dialogClassName, dialogClasses)}>
-          <div className="modal-content" role='document'>
+          <div className={`${bsClass}-content`} role='document'>
             { this.props.children }
           </div>
         </div>

test/ModalSpec.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import Modal from '../src/Modal';
-import { render } from './helpers';
+import { render, shouldWarn } from './helpers';
 
 describe('Modal', function () {
   let mountPoint;
@@ -115,6 +115,27 @@ describe('Modal', function () {
     ReactTestUtils.Simulate.click(button);
   });
 
+  it('Should use bsClass on the dialog', function () {
+    let noOp = function () {};
+    let instance = render(
+      <Modal show bsClass='mymodal' onHide={noOp}>
+        <strong>Message</strong>
+      </Modal>
+    , mountPoint);
+
+    let dialog = React.findDOMNode(instance.refs.dialog);
+    let backdrop = React.findDOMNode(instance.refs.backdrop);
+
+    assert.ok(dialog.className.match(/\bmymodal\b/));
+    assert.ok(dialog.children[0].className.match(/\bmymodal-dialog\b/));
+    assert.ok(dialog.children[0].children[0].className.match(/\bmymodal-content\b/));
+
+    assert.ok(backdrop.className.match(/\bmymodal-backdrop\b/));
+
+
+    shouldWarn("Invalid prop 'bsClass' of value 'mymodal'");
+  });
+
   it('Should pass bsSize to the dialog', function () {
     let noOp = function () {};
     let instance = render(