From 371f74c7115bf7be79442dd259c236345d49043b Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen@elastic.co>
Date: Tue, 4 Oct 2022 15:18:00 -0700
Subject: [PATCH] Pre-emptively fix various euiOverlayMask CSS overrides

- this data attr isn't technically in yet but will be once https://github.com/elastic/eui/pull/6289 merges

- at the very least this isn't breaking any more than it currently already is!
---
 .../components/markdown_editor/plugins/lens/processor.tsx       | 2 +-
 .../public/pages/alerts/containers/alerts_page/styles.scss      | 2 +-
 .../security_solution/public/common/components/page/index.tsx   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/cases/public/components/markdown_editor/plugins/lens/processor.tsx b/x-pack/plugins/cases/public/components/markdown_editor/plugins/lens/processor.tsx
index 73ee01231587e4..c5c968ab57e1c2 100644
--- a/x-pack/plugins/cases/public/components/markdown_editor/plugins/lens/processor.tsx
+++ b/x-pack/plugins/cases/public/components/markdown_editor/plugins/lens/processor.tsx
@@ -19,7 +19,7 @@ const Container = styled.div`
 
 // when displaying chart in modal the tooltip is render under the modal
 const LensChartTooltipFix = createGlobalStyle`
-  div.euiOverlayMask.euiOverlayMask--aboveHeader ~ [id^='echTooltipPortal'] {
+  div.euiOverlayMask[data-relative-to-header=above] ~ [id^='echTooltipPortal'] {
     z-index: ${({ theme }) => theme.eui.euiZLevel7} !important;
   }
 `;
diff --git a/x-pack/plugins/observability/public/pages/alerts/containers/alerts_page/styles.scss b/x-pack/plugins/observability/public/pages/alerts/containers/alerts_page/styles.scss
index 13787ccd00c16f..0928dd5c4b1546 100644
--- a/x-pack/plugins/observability/public/pages/alerts/containers/alerts_page/styles.scss
+++ b/x-pack/plugins/observability/public/pages/alerts/containers/alerts_page/styles.scss
@@ -1,6 +1,6 @@
 $fullscreenFlyoutTop: 72px;
 .kbnBody.euiBody--headerIsFixed.euiDataGrid__restrictBody {
-  .euiOverlayMask--belowHeader {
+  .euiOverlayMask[data-relative-to-header=below] {
     top: $fullscreenFlyoutTop;
   }
 
diff --git a/x-pack/plugins/security_solution/public/common/components/page/index.tsx b/x-pack/plugins/security_solution/public/common/components/page/index.tsx
index c843d443bb78a3..1cab436f6d6582 100644
--- a/x-pack/plugins/security_solution/public/common/components/page/index.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/page/index.tsx
@@ -25,7 +25,7 @@ SecuritySolutionAppWrapper.displayName = 'SecuritySolutionAppWrapper';
  * when shown above content that is set to `full screen`.
  */
 export const FULL_SCREEN_CONTENT_OVERRIDES_CSS_STYLESHEET = () => css`
-  .euiOverlayMask--belowHeader {
+  .euiOverlayMask[data-relative-to-header='below'] {
     top: 0 !important;
   }