feat(ModalClassName): Adds custom class name for modal-dialogs for namespacing (#111)

ajainarayanan · eddywashere · commit 5f7cab69ea16 · 2016-08-31T17:44:03.000-07:00
Users should be able to style modals and should be able to namespace the same.
This will help us have styling specific for modals and the rest be generic.
diff --git a/docs/lib/Components/ModalsPage.jsx b/docs/lib/Components/ModalsPage.jsx
@@ -12,7 +12,17 @@ export default class ModalsPage extends React.Component {
         <Helmet title="Modals" />
         <h3>Modals</h3>
         <div className="docs-example">
-          <ModalExample />
+          <div className="btn-group">
+            <div className="btn">
+              <ModalExample buttonLabel="Launch Modal" />
+            </div>
+            <div className="btn">
+              <ModalExample
+                buttonLabel="Launch Modal with custom className"
+                className="my-custom-modal"
+              />
+            </div>
+          </div>
         </div>
         <pre>
           <PrismCode className="language-jsx">
diff --git a/docs/lib/examples/Modal.jsx b/docs/lib/examples/Modal.jsx
@@ -22,8 +22,8 @@ class ModalExample extends React.Component {
   render() {
     return (
       <div>
-        <Button color="danger" onClick={this.toggle}>Launch Modal</Button>
-        <Modal isOpen={this.state.modal} toggle={this.toggle}>
+        <Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
+        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
           <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
           <ModalBody>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
diff --git a/src/Modal.jsx b/src/Modal.jsx
@@ -10,7 +10,8 @@ const propTypes = {
   toggle: PropTypes.func.isRequired,
   onEnter: PropTypes.func,
   onExit: PropTypes.func,
-  children: PropTypes.node
+  children: PropTypes.node,
+  className: PropTypes.any
 };
 
 const defaultProps = {
@@ -155,7 +156,9 @@ class Modal extends React.Component {
             tabIndex="-1"
           >
             <div
-              className={this.props.size ? `modal-dialog modal-${this.props.size}` : 'modal-dialog'}
+              className={classNames('modal-dialog', this.props.className, {
+                [`modal-${this.props.size}`]: this.props.size
+              })}
               role="document"
               ref={(c) => (this._dialog = c)}
             >
diff --git a/test/Modal.spec.js b/test/Modal.spec.js
@@ -33,6 +33,21 @@ describe('Modal', () => {
     wrapper.unmount();
   });
 
+  it('should render with class "modal-dialog" and have custom class name if provided', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Modal isOpen={isOpen} toggle={toggle} className="my-custom-modal">
+        Yo!
+      </Modal>
+    );
+
+    jasmine.clock().tick(300);
+    expect(wrapper.children().length).toBe(0);
+    expect(document.getElementsByClassName('modal-dialog').length).toBe(1);
+    expect(document.getElementsByClassName('my-custom-modal').length).toBe(1);
+    wrapper.unmount();
+  });
+
   it('should render with the class "modal-${size}" when size is passed', () => {
     isOpen = true;
     const wrapper = mount(
diff --git a/webpack.base.config.js b/webpack.base.config.js
@@ -1,3 +1,4 @@
+'use strict';
 const path = require('path');
 const webpack = require('webpack');
 

Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,4 @@`
	`1`	`+'use strict';`
`1`	`2`	`const path = require('path');`
`2`	`3`	`const webpack = require('webpack');`
`3`	`4`