Merge pull request #767 from interactivellama/modal-portal-class

Add Modal portal className

Author: interactivellama

components/modal/index.jsx

@@ -33,14 +33,14 @@ const propTypes = {
 	 */
 	children: PropTypes.node.isRequired,
 	/**
-	  * Custom CSS classes for the modal's container.
+	  * Custom CSS classes for the modal's container. This is the element with `.slds-modal__container`. Use `classNames` [API](https://github.com/JedWatson/classnames).
 	  */
 	containerClassName: PropTypes.oneOfType([
 		PropTypes.array,
 		PropTypes.object,
 		PropTypes.string]),
 	/**
-	 * Custom CSS classes for the modal's body. This is the element that has overflow rules and should be used to set a static height if desired.
+	 * Custom CSS classes for the modal's body. This is the element that has overflow rules and should be used to set a static height if desired. Use `classNames` [API](https://github.com/JedWatson/classnames).
 	 */
 	contentClassName: PropTypes.oneOfType([
 		PropTypes.array,
@@ -75,13 +75,23 @@ const propTypes = {
 	 */
 	header: PropTypes.node,
 	/**
-	 * Adds CSS classes to the container surrounding the modal header and the close button.
+	 * Adds CSS classes to the container surrounding the modal header and the close button. Use `classNames` [API](https://github.com/JedWatson/classnames).
 	 */
-	headerClassName: PropTypes.node,
+	headerClassName: PropTypes.oneOfType([
+		PropTypes.array,
+		PropTypes.object,
+		PropTypes.string]),
 	/**
 	 * Forces the modal to be open or closed.
 	 */
 	isOpen: PropTypes.bool.isRequired,
+	/**
+	 * Custom CSS classes for the portal DOM node. This node is a direct descendant of the `body` and is the parent of `ReactModal__Overlay`. Use `classNames` [API](https://github.com/JedWatson/classnames).
+	 */
+	portalClassName: PropTypes.oneOfType([
+		PropTypes.array,
+		PropTypes.object,
+		PropTypes.string]),
 	/**
 	 * Styles the modal as a prompt.
 	 */
@@ -350,6 +360,7 @@ class Modal extends React.Component {
 				isOpen={this.props.isOpen}
 				onRequestClose={this.closeModal}
 				style={customStyles}
+				portalClassName={classNames('ReactModalPortal', this.props.portalClassName)}
 			>
 				{this.getModal()}
 			</ReactModal>

stories/modal/index.jsx

@@ -135,7 +135,8 @@ storiesOf(MODAL, module)
 		tagline: 'Enter in details below',
 		title: 'New Opportunity',
 		children: modalContent,
-		onRequestClose: action('modal closed')
+		onRequestClose: action('modal closed'),
+		portalClassName: 'portal-class-name-test'
 	}))
 	.add('Small with footer', () => getModal({
 		isOpen: true,

tests/modal/modal.test.jsx

@@ -48,16 +48,19 @@ describe('SLDSModal: ', function () {
 				containerClassName: 'container-class-name-test',
 				contentClassName: 'content-class-name-test',
 				contentStyle: { height: '500px' },
-				isOpen: true
+				isOpen: true,
+				portalClassName: 'portal-class-name-test'
 			});
 		});
 
-		it('has correct containerClassName, contentClassName, and contentStyle', () => {
+		it('has correct containerClassName, contentClassName, contentStyle, and portalClassName', () => {
 			const modalContainer = getModalNode(document.body).querySelector('.slds-modal__container.container-class-name-test');
 			expect(modalContainer).to.exist;
 			const modalContent = getModalNode(document.body).querySelector('.slds-modal__content.content-class-name-test');
 			expect(modalContent).to.exist;
 			expect(modalContent.style.height).to.equal('500px');
+			const modalPortal = document.querySelector('body > .portal-class-name-test');
+			expect(modalPortal).to.exist;
 		});
 	});