[EuiOverlayMask] Convert to Emotion; remove onClick prop

src-docs/src/views/overlay_mask/overlay_mask.js

@@ -5,6 +5,7 @@ import {
   EuiButton,
   EuiSpacer,
   EuiTitle,
+  EuiFocusTrap,
 } from '../../../../src/components';
 
 export default () => {
@@ -13,20 +14,22 @@ export default () => {
 
   const modal = (
     <React.Fragment>
-      <EuiOverlayMask
-        onClick={() => {
-          changeMask(false);
-        }}
-      >
-        <EuiTitle>
-          <h2> Click anywhere to close overlay. </h2>
-        </EuiTitle>
+      <EuiOverlayMask>
+        <EuiFocusTrap
+          onClickOutside={() => {
+            changeMask(false);
+          }}
+        >
+          <EuiTitle>
+            <h2> Click anywhere to close overlay. </h2>
+          </EuiTitle>
+        </EuiFocusTrap>
       </EuiOverlayMask>
     </React.Fragment>
   );
 
   const maskWithClick = (
-    <EuiOverlayMask>
+    <EuiOverlayMask data-test-subj="yolo">
       <EuiButton
         onClick={() => {
           changeMaskWithClick(false);
@@ -39,16 +42,16 @@ export default () => {
 
   return (
     <React.Fragment>
+      <EuiButton onClick={() => changeMaskWithClick(true)}>
+        Overlay with button
+      </EuiButton>
+      <EuiSpacer size="xxl" />
       <EuiButton
         onClick={() => {
           changeMask(true);
         }}
       >
-        Overlay with onClick
-      </EuiButton>
-      <EuiSpacer size="xxl" />
-      <EuiButton onClick={() => changeMaskWithClick(true)}>
-        Overlay with button
+        Overlay with EuiFocusTrap click-to-close
       </EuiButton>
       {maskOpen ? modal : undefined}
       {maskWithClickOpen ? maskWithClick : undefined}

src-docs/src/views/overlay_mask/overlay_mask_example.js

@@ -39,8 +39,11 @@ export const OverlayMaskExample = {
             </a>{' '}
             to make before choosing to use an overlay. At the very least, you
             must provide a visible button to close the overlay. You can also
-            pass an <EuiCode>onClick</EuiCode> handler to handle closing the
-            overlay.
+            nest an{' '}
+            <Link to="/utilities/focus-trap">
+              <EuiCode>EuiFocusTrap</EuiCode>
+            </Link>{' '}
+            to handle closing the overlay.
           </p>
         </>
       ),

src-docs/src/views/overlay_mask/overlay_mask_header.js

@@ -19,7 +19,7 @@ export default () => {
   if (flyOut) {
     flyout = (
       <React.Fragment>
-        <EuiOverlayMask onClick={toggleFlyOut} headerZindexLocation="below" />
+        <EuiOverlayMask headerZindexLocation="below" />
         <EuiFlyout size="s" onClose={toggleFlyOut}>
           <EuiFlyoutHeader>
             <EuiTitle>

src-docs/src/views/overlay_mask/props.tsx

@@ -1,21 +1,7 @@
-import React, { FunctionComponent, ReactNode } from 'react';
+import React, { FunctionComponent } from 'react';
 import { CommonProps } from '../../../../src/components/common';
+import { EuiOverlayMaskInterface } from '../../../../src/components/overlay_mask/overlay_mask';
 
-interface EuiOverlayMaskInterface extends CommonProps {
-  /**
-   * Function that applies to clicking the mask itself and not the children
-   */
-  onClick?: () => void;
-  /**
-   * ReactNode to render as this component's children
-   */
-  children?: ReactNode;
-  /**
-   * Should the mask visually sit above or below the EuiHeader (controlled by z-index)
-   */
-  headerZindexLocation?: 'above' | 'below';
-}
-
-export const EuiOverlayMaskProps: FunctionComponent<EuiOverlayMaskInterface> = () => (
-  <div />
-);
+export const EuiOverlayMaskProps: FunctionComponent<
+  EuiOverlayMaskInterface & CommonProps
+> = () => <div />;

src/components/code/__snapshots__/code_block.test.tsx.snap

@@ -108,6 +108,7 @@ exports[`EuiCodeBlock fullscreen displays content in fullscreen mode 1`] = `
               Object {
                 "insert": [Function],
                 "inserted": Object {
+                  "animation-ox4vyo": true,
                   "dsw53p-empty-text-hoverStyles-EuiButtonIcon": true,
                 },
                 "key": "css",
@@ -118,6 +119,27 @@ exports[`EuiCodeBlock fullscreen displays content in fullscreen mode 1`] = `
                   "_insertTag": [Function],
                   "before": null,
                   "container": <head>
+                    <style
+                      data-emotion="css-global"
+                      data-s=""
+                    >
+
+                      body{overflow:hidden;}
+                    </style>
+                    <style
+                      data-emotion="css-global"
+                      data-s=""
+                    >
+
+                      .euiOverlayMask{position:fixed;inset-block-start:0;inset-inline-start:0;inset-inline-end:0;inset-block-end:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding-block-end:10vh;-webkit-animation:animation-ox4vyo 150ms ease-in;animation:animation-ox4vyo 150ms ease-in;background:rgba(0,0,0,0.5);}
+                    </style>
+                    <style
+                      data-emotion="css-global"
+                      data-s=""
+                    >
+
+                      .euiOverlayMask{z-index:6000;}
+                    </style>
                     <style
                       data-emotion="css"
                       data-s=""
@@ -139,6 +161,27 @@ exports[`EuiCodeBlock fullscreen displays content in fullscreen mode 1`] = `
 
                       .css-dsw53p-empty-text-hoverStyles-EuiButtonIcon:hover{background-color:rgba(211,218,230,0.2);}
                     </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+
+                      .css-animation-ox4vyo{}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+
+                      @-webkit-keyframes animation-ox4vyo{0%{opacity:0;}100%{opacity:1;}}
+                    </style>
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+
+                      @keyframes animation-ox4vyo{0%{opacity:0;}100%{opacity:1;}}
+                    </style>
                     <style
                       type="text/css"
                     >
@@ -149,7 +192,7 @@ exports[`EuiCodeBlock fullscreen displays content in fullscreen mode 1`] = `
 
                     </style>
                   </head>,
-                  "ctr": 3,
+                  "ctr": 6,
                   "insertionPoint": undefined,
                   "isSpeedy": false,
                   "key": "css",
@@ -177,6 +220,27 @@ exports[`EuiCodeBlock fullscreen displays content in fullscreen mode 1`] = `
 
                       .css-dsw53p-empty-text-hoverStyles-EuiButtonIcon:hover{background-color:rgba(211,218,230,0.2);}
                     </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+
+                      .css-animation-ox4vyo{}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+
+                      @-webkit-keyframes animation-ox4vyo{0%{opacity:0;}100%{opacity:1;}}
+                    </style>,
+                    <style
+                      data-emotion="css"
+                      data-s=""
+                    >
+
+                      @keyframes animation-ox4vyo{0%{opacity:0;}100%{opacity:1;}}
+                    </style>,
                   ],
                 },
               }

src/components/image/image.test.tsx

@@ -191,7 +191,11 @@ describe('EuiImage', () => {
       expect(overlayMask).toBeFalsy();
     });
 
-    test('close using overlay mask', () => {
+    // Clicking the mask to close is now handled by EuiFocusTrap
+    // and we can't use Enzyme to test this behavior.
+    // A Cypress test exists in the EuiFocusTrap suite that
+    // sufficiently covers this behavior
+    test.skip('close using overlay mask', () => {
       let overlayMask = document.querySelectorAll(
         '[data-test-subj=fullScreenOverlayMask]'
       );

src/components/image/image_fullscreen_wrapper.tsx

@@ -65,11 +65,8 @@ export const EuiImageFullScreenWrapper: FunctionComponent<EuiImageWrapperProps>
   ];
 
   return (
-    <EuiOverlayMask
-      data-test-subj="fullScreenOverlayMask"
-      onClick={closeFullScreen}
-    >
-      <EuiFocusTrap clickOutsideDisables={true}>
+    <EuiOverlayMask data-test-subj="fullScreenOverlayMask">
+      <EuiFocusTrap onClickOutside={closeFullScreen}>
         <>
           <figure
             aria-label={optionalCaptionText}

src/components/index.scss

@@ -25,7 +25,6 @@
 @import 'markdown_editor/index';
 @import 'modal/index';
 @import 'notification/index';
-@import 'overlay_mask/index';
 @import 'panel/index';
 @import 'page/index'; // Page needs to come after Panel for cascade specificity
 @import 'tree_view/index';

src/components/overlay_mask/overlay_mask.styles.ts

@@ -0,0 +1,47 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS, euiAnimFadeIn } from '../../global_styling';
+import { transparentize, UseEuiTheme } from '../../services';
+
+export const euiOverlayMaskStyles = ({ euiTheme }: UseEuiTheme) => ({
+  euiOverlayMask: css`
+    .euiOverlayMask {
+      position: fixed;
+      ${logicalCSS('top', 0)}
+      ${logicalCSS('left', 0)}
+      ${logicalCSS('right', 0)}
+      ${logicalCSS('bottom', 0)}
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      ${logicalCSS('padding-bottom', '10vh')};
+      animation: ${euiAnimFadeIn} ${euiTheme.animation.fast} ease-in;
+      background: ${transparentize(euiTheme.colors.ink, 0.5)};
+    }
+  `,
+  aboveHeader: css`
+    .euiOverlayMask {
+      z-index: ${euiTheme.levels.mask};
+    }
+  `,
+  belowHeader: css`
+    .euiOverlayMask {
+      z-index: ${euiTheme.levels.maskBelowHeader};
+      // TODO: use size variable when EuiHeader is converted
+      ${logicalCSS('top', `${euiTheme.base * 3}px`)};
+    }
+  `,
+});
+
+export const euiOverlayMaskBodyStyles = css`
+  body {
+    overflow: hidden;
+  }
+`;