Implemented review comments

src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/Modal.js

@@ -1,4 +1,5 @@
 // @flow
+import Backdrop from '../Backdrop';
 import Portal from 'react-portal';
 import React from 'react';
 import modalStyle from './modal.scss';
@@ -24,14 +25,14 @@ export default class Modal extends React.PureComponent {
 
     render() {
         return (
-            <Portal isOpened={this.props.isOpen}>
-                <div className={modalStyle.container}>
-                    <div className={modalStyle.modal}>
-                        {this.props.children}
+            <div>
+                <Portal isOpened={this.props.isOpen}>
+                    <div className={modalStyle.container}>
+                        <div className={modalStyle.modal}>{this.props.children}</div>
                     </div>
-                    <div onClick={this.handleBackdropClick} className={modalStyle.backdrop} />
-                </div>
-            </Portal>
+                </Portal>
+                <Backdrop isOpen={this.props.isOpen} onClick={this.handleBackdropClick} />
+            </div>
         );
     }
 }

src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/README.md

@@ -2,11 +2,11 @@ The modal component let's you display some content above everything else.
 It renders depending on the passed property and request being closed through a callback.
 
 ```
-initialState = {modalOpen: false};
+initialState = {open: false};
 
 <div>
-    <button onClick={() => setState({modalOpen: true})}>Open modal</button>
-    <Modal onRequestClose={() => setState({modalOpen: false})} isOpen={state.modalOpen}>
+    <button onClick={() => setState({open: true})}>Open modal</button>
+    <Modal onRequestClose={() => setState({open: false})} isOpen={state.open}>
         <div style={{width: '500px', height: '500px'}}>My modal content</div>
     </Modal>
 </div>

src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/modal.scss

@@ -1,9 +1,9 @@
 @import '../../containers/Application/colors.scss';
 
-$backdropColor: rgba($black, 0.4);
+$backdropColor: rgba($black, .4);
 $borderRadius: 4px;
 $backgroundColor: $white;
-$modalShadow: 0 0 25px 0 rgba($black, 0.25);
+$modalShadow: 0 0 25px 0 rgba($black, .25);
 
 .container {
     position: fixed;
@@ -15,6 +15,7 @@ $modalShadow: 0 0 25px 0 rgba($black, 0.25);
     align-items: center;
     justify-content: center;
     z-index: 1;
+    pointer-events: none;
 }
 
 .backdrop {
@@ -29,7 +30,7 @@ $modalShadow: 0 0 25px 0 rgba($black, 0.25);
 .modal {
     display: inline-flex;
     overflow: auto;
-    max-height: 100%;
+    max-height: 100vh;
     background: $backgroundColor;
     border-radius: $borderRadius;
     z-index: 1;

src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/tests/Modal.test.js

@@ -9,24 +9,24 @@ afterEach(() => document.body.innerHTML = '');
 test('The component should render in body when open', () => {
     const body = document.body;
     const view = mount(<Modal isOpen={true}><p>Modal content</p></Modal>).render();
-    expect(view.html()).toBe(null);
+    expect(view).toMatchSnapshot();
     expect(pretty(body.innerHTML)).toMatchSnapshot();
 });
 
 test('The component should not render in body when closed', () => {
     const body = document.body;
     const view = mount(<Modal isOpen={false}><p>Modal content</p></Modal>).render();
-    expect(view.html()).toBe(null);
+    expect(view).toMatchSnapshot();
     expect(body.innerHTML).toBe('');
 });
 
 test('The component should request to be closed on click on backdrop', () => {
     const requestCloseSpy = jest.fn();
     const view = shallow(<Modal isOpen={false} onRequestClose={requestCloseSpy}><p>Modal content</p></Modal>);
-    const backdrop = view.find('.backdrop');
+    const backdrop = view.find('Backdrop');
     expect(backdrop.length).toBe(1);
 
     expect(requestCloseSpy).toHaveBeenCalledTimes(0);
-    backdrop.simulate('click');
+    backdrop.props().onClick();
     expect(requestCloseSpy).toHaveBeenCalledTimes(1);
 });

src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/tests/__snapshots__/ClickModal.test.js.snap

@@ -6,8 +6,10 @@ exports[`The modal should be rendered when the button got clicked 1`] = `
     <div class=\\"modal\\">
       <p>Modal content</p>
     </div>
-    <div class=\\"backdrop\\"></div>
   </div>
+</div>
+<div>
+  <div data-reactroot=\\"\\" class=\\"backdrop isVisible\\"></div>
 </div>"
 `;
 
@@ -17,8 +19,10 @@ exports[`The modal should close again when backdrop got clicked 1`] = `
     <div class=\\"modal\\">
       <p>Modal content</p>
     </div>
-    <div class=\\"backdrop\\"></div>
   </div>
+</div>
+<div>
+  <div data-reactroot=\\"\\" class=\\"backdrop isVisible\\"></div>
 </div>"
 `;
 
@@ -27,5 +31,8 @@ exports[`The modal should initially not be rendered 1`] = `
   <button>
     Open modal
   </button>
+  <div>
+    
+  </div>
 </div>
 `;

src/Sulu/Bundle/AdminBundle/Resources/js/components/Modal/tests/__snapshots__/Modal.test.js.snap

@@ -1,12 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`The component should not render in body when closed 1`] = `
+<div>
+  
+</div>
+`;
+
 exports[`The component should render in body when open 1`] = `
+<div>
+  
+</div>
+`;
+
+exports[`The component should render in body when open 2`] = `
 "<div>
   <div data-reactroot=\\"\\" class=\\"container\\">
     <div class=\\"modal\\">
       <p>Modal content</p>
     </div>
-    <div class=\\"backdrop\\"></div>
   </div>
+</div>
+<div>
+  <div data-reactroot=\\"\\" class=\\"backdrop isVisible\\"></div>
 </div>"
 `;