From 04a81c6e47355e1b4a30f47c71dfa1d9f24a4330 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Tue, 4 Oct 2022 14:09:19 -0700
Subject: [PATCH] Convert EuiOverlayMask to `@emotion/css`

- body overflow CSS still needs to be `@emotion/react`, and should be moved into a different file
---
 .../overlay_mask/overlay_mask.styles.ts       | 44 +++++++------------
 src/components/overlay_mask/overlay_mask.tsx  | 17 +++----
 .../overlay_mask/overlay_mask_body.styles.ts  | 15 +++++++
 3 files changed, 38 insertions(+), 38 deletions(-)
 create mode 100644 src/components/overlay_mask/overlay_mask_body.styles.ts

diff --git a/src/components/overlay_mask/overlay_mask.styles.ts b/src/components/overlay_mask/overlay_mask.styles.ts
index 2590a4ac22a..469703508f9 100644
--- a/src/components/overlay_mask/overlay_mask.styles.ts
+++ b/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;
-  }
-`;
diff --git a/src/components/overlay_mask/overlay_mask.tsx b/src/components/overlay_mask/overlay_mask.tsx
index 2f6fe007ca7..cc2076d2934 100644
--- a/src/components/overlay_mask/overlay_mask.tsx
+++ b/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>
   );
diff --git a/src/components/overlay_mask/overlay_mask_body.styles.ts b/src/components/overlay_mask/overlay_mask_body.styles.ts
new file mode 100644
index 00000000000..4771ef6fb38
--- /dev/null
+++ b/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;
+  }
+`;