fix(PF4 AboutModal and Modal): added a class to the body when the Mod… (

patternfly#895) * fix(PF4 AboutModal and Modal): added a class to the body when the Modal is open to set overflow to h patternfly#724 * update based on comments * updates from review * remove imports in ModalContent
redallen · Nov 13, 2018 · 5b12b97 · 5b12b97
1 parent befeb77
commit 5b12b97
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 4 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.js b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.js
@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import AboutModalContainer from './AboutModalContainer';
 import { canUseDOM } from 'exenv';
 import { KEY_CODES } from '../../internal/constants';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/patternfly-next/components/Backdrop/backdrop.css';
 
 const propTypes = {
   /** content rendered inside the About Modal. */
@@ -57,6 +59,19 @@ class AboutModal extends React.Component {
   componentDidMount() {
     document.body.appendChild(this.container);
     document.addEventListener('keydown', this.handleEscKeyClick, false);
+    if (this.props.isOpen) {
+      document.body.classList.add(css(styles.backdropOpen));
+    } else {
+      document.body.classList.remove(css(styles.backdropOpen));
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.props.isOpen) {
+      document.body.classList.add(css(styles.backdropOpen));
+    } else {
+      document.body.classList.remove(css(styles.backdropOpen));
+    }
   }
 
   componentWillUnmount() {

diff --git a/packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.test.js b/packages/patternfly-4/react-core/src/components/AboutModal/AboutModal.test.js
@@ -22,11 +22,11 @@ const props = {
   heroImageSrc: 'heroImg...'
 };
 
-test('AboutModal creates a container element once', () => {
+test('AboutModal creates a container element once for div', () => {
   const view = shallow(<AboutModal {...props}> Test About Modal </AboutModal>);
   view.update();
   expect(document.createElement).toBeCalledWith('div');
-  expect(document.createElement).toHaveBeenCalledTimes(1);
+  expect(document.createElement).toHaveBeenCalledTimes(3);
 });
 
 test('About Modal closes with escape', () => {

diff --git a/packages/patternfly-4/react-core/src/components/Modal/Modal.js b/packages/patternfly-4/react-core/src/components/Modal/Modal.js
@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import ModalContent from './ModalContent';
 import { canUseDOM } from 'exenv';
 import { KEY_CODES } from '../../internal/constants';
+import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/patternfly-next/components/Backdrop/backdrop.css';
 
 const propTypes = {
   /** content rendered inside the Modal. */
@@ -50,6 +52,19 @@ class Modal extends React.Component {
   componentDidMount() {
     document.body.appendChild(this.container);
     document.addEventListener('keydown', this.handleEscKeyClick, false);
+    if (this.props.isOpen) {
+      document.body.classList.add(css(styles.backdropOpen));
+    } else {
+      document.body.classList.remove(css(styles.backdropOpen));
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.props.isOpen) {
+      document.body.classList.add(css(styles.backdropOpen));
+    } else {
+      document.body.classList.remove(css(styles.backdropOpen));
+    }
   }
 
   componentWillUnmount() {

diff --git a/packages/patternfly-4/react-core/src/components/Modal/Modal.test.js b/packages/patternfly-4/react-core/src/components/Modal/Modal.test.js
@@ -17,11 +17,11 @@ const props = {
   children: 'modal content'
 };
 
-test('Modal creates a container element once', () => {
+test('Modal creates a container element once for div', () => {
   const view = shallow(<Modal {...props} />);
   view.update();
   expect(document.createElement).toBeCalledWith('div');
-  expect(document.createElement).toHaveBeenCalledTimes(1);
+  expect(document.createElement).toHaveBeenCalledTimes(3);
 });
 
 test('modal closes with escape', () => {