From 63bee7210b15d80a4baa847765eaa90a155e12e7 Mon Sep 17 00:00:00 2001
From: Clay Diffrient <cdiffrient@instructure.com>
Date: Thu, 5 Nov 2015 17:21:14 -0700
Subject: [PATCH] [fixed] Custom classnames override default styles

This makes it so if you provide a custom className it will override
all the default styling, relying solely on the style props you pass
in and the className itself.

Prior to this commit, providing a className or overlayClassName
doesn't really have any effect because the style attribute has higher
precedent when applying styles.
---
 lib/components/ModalPortal.js |  7 +++++--
 specs/Modal.spec.js           | 11 +++++++++++
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/lib/components/ModalPortal.js b/lib/components/ModalPortal.js
index b7db99c7..818350e9 100644
--- a/lib/components/ModalPortal.js
+++ b/lib/components/ModalPortal.js
@@ -175,16 +175,19 @@ var ModalPortal = module.exports = React.createClass({
   },
 
   render: function() {
+    var contentStyles = (this.props.className) ? {} : defaultStyles.content;
+    var overlayStyles = (this.props.overlayClassName) ? {} : defaultStyles.overlay;
+
     return this.shouldBeClosed() ? div() : (
       div({
         ref: "overlay",
         className: this.buildClassName('overlay', this.props.overlayClassName),
-        style: Assign({}, defaultStyles.overlay, this.props.style.overlay || {}),
+        style: Assign({}, overlayStyles, this.props.style.overlay || {}),
         onClick: this.handleOverlayClick
       },
         div({
           ref: "content",
-          style: Assign({}, defaultStyles.content, this.props.style.content || {}),
+          style: Assign({}, contentStyles, this.props.style.content || {}),
           className: this.buildClassName('content', this.props.className),
           tabIndex: "-1",
           onClick: stopPropagation,
diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js
index e0052815..514e7e43 100644
--- a/specs/Modal.spec.js
+++ b/specs/Modal.spec.js
@@ -104,6 +104,17 @@ describe('Modal', function () {
     unmountModal();
   });
 
+  it('overrides the default styles when a custom classname is used', function () {
+    var modal = renderModal({isOpen: true, className: 'myClass'});
+    equal(modal.portal.refs.content.style.top, '');
+    unmountModal();
+  });
+
+  it('overrides the default styles when a custom overlayClassName is used', function () {
+    var modal = renderModal({isOpen: true, overlayClassName: 'myOverlayClass'});
+    equal(modal.portal.refs.overlay.style.backgroundColor, '');
+  });
+
   it('supports adding style to the modal contents', function () {
     var modal = renderModal({isOpen: true, style: {content: {width: '20px'}}});
     equal(modal.portal.refs.content.style.width, '20px');