Convert EuiOverlayMask to @emotion/css

- body overflow CSS still needs to be `@emotion/react`, and should be moved into a different file

Author: cee-chen

src/components/overlay_mask/overlay_mask.styles.ts

@@ -6,42 +6,30 @@
  * Side Public License, v 1.
  */
 
-import { css } from '@emotion/react';
+import { css } from '@emotion/css';
 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)};
-    }
+    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};
-    }
+    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`)};
-    }
+    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;
-  }
-`;

src/components/overlay_mask/overlay_mask.tsx

@@ -20,15 +20,13 @@ import React, {
   useEffect,
   useState,
 } from 'react';
-import classNames from 'classnames';
+import { cx } from '@emotion/css';
 import { Global } from '@emotion/react';
 import { CommonProps, keysOf } from '../common';
 import { useCombinedRefs, useEuiTheme } from '../../services';
 import { EuiPortal } from '../portal';
-import {
-  euiOverlayMaskStyles,
-  euiOverlayMaskBodyStyles,
-} from './overlay_mask.styles';
+import { euiOverlayMaskStyles } from './overlay_mask.styles';
+import { euiOverlayMaskBodyStyles } from './overlay_mask_body.styles';
 
 export interface EuiOverlayMaskInterface {
   /**
@@ -69,10 +67,10 @@ export const EuiOverlayMask: FunctionComponent<EuiOverlayMaskProps> = ({
   ]);
   const euiTheme = useEuiTheme();
   const styles = euiOverlayMaskStyles(euiTheme);
-  const cssStyles = [
+  const cssStyles = cx([
     styles.euiOverlayMask,
     styles[`${headerZindexLocation}Header`],
-  ];
+  ]);
 
   useEffect(() => {
     if (!overlayMaskNode) return;
@@ -90,13 +88,12 @@ export const EuiOverlayMask: FunctionComponent<EuiOverlayMaskProps> = ({
 
   useEffect(() => {
     if (!overlayMaskNode) return;
-    overlayMaskNode.className = classNames('euiOverlayMask', className);
-  }, [overlayMaskNode, className]);
+    overlayMaskNode.className = cx('euiOverlayMask', cssStyles, className);
+  }, [overlayMaskNode, cssStyles, className]);
 
   return (
     <EuiPortal portalRef={combinedMaskRef}>
       <Global styles={euiOverlayMaskBodyStyles} />
-      <Global styles={cssStyles} />
       {children}
     </EuiPortal>
   );

src/components/overlay_mask/overlay_mask_body.styles.ts

@@ -0,0 +1,15 @@
+/*
+ * 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';
+
+export const euiOverlayMaskBodyStyles = css`
+  body {
+    overflow: hidden;
+  }
+`;