Do not overwrite default modal classes

migration-guides/v7.0.0.md

@@ -16,6 +16,7 @@ This version contains the following breaking changes:
 12. `<Modal />` no longer accepts the `hideCloseButton` prop
 13. `<FlashMessageContainer />` component invokes `onDismiss` with redux-flash message object and allows message-specific overrides
 14. `<Button />` and `<SubmitButton />` now accept a forwarded ref
+15. `<Modal />` no longer overwrites the default modal or overlay class
 
 The required changes for each item are detailed below.
 
@@ -331,4 +332,39 @@ function MyExample() {
     <Button ref={ref}>Click me!</Button>
   )
 }
-```
+```
+
+## 15. `<Modal />` no longer overwrites the default modal or overlay class
+Prior to v7, passing in a custom class name to the modal would override the default class, which would often strip away all of the styling. Now, that class will be _added_ to the default class without the user having to include that class as well.
+
+### Before
+```jsx
+// Before
+<Modal className="custom-modal">
+```
+```scss
+.custom-modal {
+  // copy over all styles from .modal-inner
+  // add additional custom styles
+}
+```
+**or**
+```jsx
+// Before
+<Modal className="modal-inner custom-modal">
+```
+```scss
+.custom-modal {
+  // add additional custom styles
+}
+```
+### After
+```jsx
+<Modal className="custom-modal">
+```
+```scss
+.custom-modal {
+  // add additional custom styles
+}
+```
+This logic applies to both the `className` and `overlayClassName` props, whether the use passes in a string or an object.

src/modal.js

@@ -2,6 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import ReactModal from 'react-modal'
 import { isServer } from './utils'
+import classnames from 'classnames'
 
 /**
  * A modal component with a built-in close button. Uses [`react-modal`](https://github.com/reactjs/react-modal) under the hood, and can accept any props `react-modal` does.
@@ -39,11 +40,19 @@ import { isServer } from './utils'
  * }
  */
 
+const classNameObject = PropTypes.shape({
+  base: PropTypes.string.isRequired,
+  afterOpen: PropTypes.string.isRequired,
+  beforeClose: PropTypes.string.isRequired,
+})
+
 const propTypes = {
-  onClose: PropTypes.func.isRequired,
+  children: PropTypes.node,
+  className: PropTypes.oneOfType([PropTypes.string, classNameObject]),
   isOpen: PropTypes.bool,
+  onClose: PropTypes.func.isRequired,
+  overlayClassName: PropTypes.oneOfType([PropTypes.string, classNameObject]),
   preventClose: PropTypes.bool,
-  children: PropTypes.node,
 }
 
 const defaultProps = {
@@ -58,17 +67,25 @@ function getRootElement() {
   return window.document.querySelector('body')
 }
 
+function wrapClassName(base, additional) {
+  if (typeof additional === 'object') {
+    return { ...additional, base: classnames(base, additional.base) }
+  }
+
+  return classnames(base, additional)
+}
+
 // A wrapper for react-modal that adds some styles and a close button.
 // See https://github.com/reactjs/react-modal for usage.
-function Modal({ isOpen, onClose, preventClose, children, ...rest }) {
+function Modal({ isOpen, onClose, preventClose, children, className, overlayClassName, ...rest }) {
   const canClose = !preventClose
   return (
     <ReactModal
       isOpen={isOpen}
       onRequestClose={onClose}
       portalClassName="modal"
-      className="modal-inner"
-      overlayClassName="modal-fade-screen"
+      className={wrapClassName("modal-inner", className)}
+      overlayClassName={wrapClassName("modal-fade-screen", overlayClassName)}
       bodyOpenClassName="modal-open"
       appElement={getRootElement()}
       ariaHideApp={isServer()} // Opt out of setting appElement on the server.

stories/modal.story.js

@@ -29,3 +29,19 @@ storiesOf('Modal', module)
       </div>
     )
   })
+  .add('with custom class name configuration', () => {
+    const [modalShown, setModalShown] = useState(true)
+    return (
+      <div>
+        {modalShown && (
+          <Modal
+            onClose={() => setModalShown(false)}
+            className={{ base: 'custom', afterOpen: 'custom--after-open', beforeClose: '' }}
+          >
+            This is the modal content!
+          </Modal>
+        )}
+        <button onClick={() => setModalShown(true)}>Show modal</button>
+      </div>
+    )
+  })

test/modal.test.js

@@ -2,8 +2,19 @@ import React from 'react'
 import { mount } from 'enzyme'
 import { Modal } from '../src/'
 import { noop } from 'lodash'
+import ReactModal from 'react-modal'
 
 describe('Modal', () => {
+  // requestAnimationFrame is async, so the callback fails to trigger
+  // https://github.com/reactjs/react-modal/issues/903
+  beforeEach(() => {
+    jest.spyOn(window, 'requestAnimationFrame').mockImplementation(cb => cb());
+  });
+
+  afterEach(() => {
+    window.requestAnimationFrame.mockRestore();
+  });
+
   test('is shown by default', () => {
     const wrapper = mount(<Modal onClose={noop} />)
     expect(wrapper.find('.modal-content').exists()).toEqual(true)
@@ -21,6 +32,26 @@ describe('Modal', () => {
     expect(onClose).toHaveBeenCalled()
   })
 
+  test('adds additional class string to default class', () => {
+    const wrapper = mount(<Modal onClose={noop} className="custom" />)
+    expect(wrapper.find('.modal-inner.custom').exists()).toEqual(true)
+  })
+
+  test('adds additional overlay class string to default overlay class', () => {
+    const wrapper = mount(<Modal onClose={noop} overlayClassName="custom-overlay" />)
+    expect(wrapper.find('.modal-fade-screen.custom-overlay').exists()).toEqual(true)
+  })
+
+  test('adds additional class object to default class', () => {
+    const wrapper = mount(<Modal isOpen={true} onClose={noop} className={{ base: 'custom', afterOpen: 'modal-is-open', beforeClose: 'modal-before-close' }} />)
+    expect(wrapper.find('.modal-inner.custom.modal-is-open').exists()).toEqual(true)
+  })
+
+  test('adds additional overlay class object to default overlay class', () => {
+    const wrapper = mount(<Modal isOpen={true} onClose={noop} overlayClassName={{ base: 'custom', afterOpen: 'modal-is-open', beforeClose: 'modal-before-close' }} />)
+    expect(wrapper.find('.modal-fade-screen.custom.modal-is-open').exists()).toEqual(true)
+  })
+
   describe('when preventClose=true', () => {
     test('hides close button', () => {
       const wrapper = mount(<Modal preventClose={true} onClose={noop} />)