diff --git a/src/Modal.js b/src/Modal.js index f6c64ec3d3..46c60f6b57 100644 --- a/src/Modal.js +++ b/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 = (
); diff --git a/src/ModalDialog.js b/src/ModalDialog.js index 08552f6802..e23ba9954f 100644 --- a/src/ModalDialog.js +++ b/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 (
-
+
{ this.props.children }
diff --git a/test/ModalSpec.js b/test/ModalSpec.js index 70f0000583..4f88fb5e4e 100644 --- a/test/ModalSpec.js +++ b/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( + + Message + + , 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(