feat(Modal): add various className props to modal (#320)

TheSharpieOne · eddywashere · commit c7b2b3e95b3d · 2017-02-14T08:46:14.000-08:00
closes #257
diff --git a/docs/lib/Components/ModalsPage.js b/docs/lib/Components/ModalsPage.js
@@ -55,6 +55,11 @@ export default class ModalsPage extends React.Component {
     PropTypes.number,
     PropTypes.string,
   ]),
+  className: PropTypes.string,
+  wrapClassName: PropTypes.string,
+  modalClassName: PropTypes.string,
+  backdropClassName: PropTypes.string,
+  contentClassName: PropTypes.string,
 }`}
           </PrismCode>
         </pre>
diff --git a/src/Modal.js b/src/Modal.js
@@ -24,6 +24,10 @@ const propTypes = {
   onExit: PropTypes.func,
   children: PropTypes.node,
   className: PropTypes.string,
+  wrapClassName: PropTypes.string,
+  modalClassName: PropTypes.string,
+  backdropClassName: PropTypes.string,
+  contentClassName: PropTypes.string,
   cssModule: PropTypes.object,
   zIndex: PropTypes.oneOfType([
     PropTypes.number,
@@ -164,6 +168,10 @@ class Modal extends React.Component {
   renderChildren() {
     const {
       className,
+      wrapClassName,
+      modalClassName,
+      backdropClassName,
+      contentClassName,
       cssModule,
       isOpen,
       size,
@@ -173,7 +181,7 @@ class Modal extends React.Component {
     } = omit(this.props, ['toggle', 'keyboard', 'onEnter', 'onExit', 'zIndex']);
 
     return (
-      <TransitionGroup component="div">
+      <TransitionGroup component="div" className={mapToCssModules(wrapClassName)}>
         {isOpen && (
           <Fade
             key="modal-dialog"
@@ -184,7 +192,7 @@ class Modal extends React.Component {
             transitionLeaveTimeout={300}
             onClickCapture={this.handleBackdropClick}
             onKeyUp={this.handleEscape}
-            className={mapToCssModules('modal', cssModule)}
+            className={mapToCssModules(classNames('modal', modalClassName), cssModule)}
             style={{ display: 'block' }}
             tabIndex="-1"
           >
@@ -196,7 +204,7 @@ class Modal extends React.Component {
               ref={(c) => (this._dialog = c)}
               {...attributes}
             >
-              <div className={mapToCssModules('modal-content', cssModule)}>
+              <div className={mapToCssModules(classNames('modal-content', contentClassName), cssModule)}>
                 {children}
               </div>
             </div>
@@ -208,7 +216,7 @@ class Modal extends React.Component {
             transitionAppearTimeout={150}
             transitionEnterTimeout={150}
             transitionLeaveTimeout={150}
-            className={mapToCssModules('modal-backdrop', cssModule)}
+            className={mapToCssModules(classNames('modal-backdrop', backdropClassName), cssModule)}
           />
         )}
       </TransitionGroup>
diff --git a/src/__tests__/Modal.spec.js b/src/__tests__/Modal.spec.js
@@ -90,6 +90,62 @@ describe('Modal', () => {
     wrapper.unmount();
   });
 
+  it('should render with class "modal" and have custom class name if provided with modalClassName', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Modal isOpen={isOpen} toggle={toggle} modalClassName="my-custom-modal">
+        Yo!
+      </Modal>
+    );
+
+    jasmine.clock().tick(300);
+    expect(wrapper.children().length).toBe(0);
+    expect(document.querySelectorAll('.modal.my-custom-modal').length).toBe(1);
+    wrapper.unmount();
+  });
+
+  it('should render with custom class name if provided with wrapClassName', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Modal isOpen={isOpen} toggle={toggle} wrapClassName="my-custom-modal">
+        Yo!
+      </Modal>
+    );
+
+    jasmine.clock().tick(300);
+    expect(wrapper.children().length).toBe(0);
+    expect(document.getElementsByClassName('my-custom-modal').length).toBe(1);
+    wrapper.unmount();
+  });
+
+  it('should render with class "modal-content" and have custom class name if provided with contentClassName', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Modal isOpen={isOpen} toggle={toggle} contentClassName="my-custom-modal">
+        Yo!
+      </Modal>
+    );
+
+    jasmine.clock().tick(300);
+    expect(wrapper.children().length).toBe(0);
+    expect(document.querySelectorAll('.modal-content.my-custom-modal').length).toBe(1);
+    wrapper.unmount();
+  });
+
+  it('should render with class "modal-backdrop" and have custom class name if provided with backdropClassName', () => {
+    isOpen = true;
+    const wrapper = mount(
+      <Modal isOpen={isOpen} toggle={toggle} backdropClassName="my-custom-modal">
+        Yo!
+      </Modal>
+    );
+
+    jasmine.clock().tick(300);
+    expect(wrapper.children().length).toBe(0);
+    expect(document.querySelectorAll('.modal-backdrop.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(
