From 594a4d05ba42f6dc48dacd830e427074344bca55 Mon Sep 17 00:00:00 2001
From: Constance <constancecchen@users.noreply.github.com>
Date: Tue, 4 Oct 2022 16:46:47 -0700
Subject: [PATCH] [EuiOverlayMask] Restore missing above/below header
 information (#6289)

* Add [data-realative-to-header] attribute with above/below information

* changelog
---
 src/components/overlay_mask/overlay_mask.tsx | 3 ++-
 upcoming_changelogs/6289.md                  | 3 +++
 2 files changed, 5 insertions(+), 1 deletion(-)
 create mode 100644 upcoming_changelogs/6289.md

diff --git a/src/components/overlay_mask/overlay_mask.tsx b/src/components/overlay_mask/overlay_mask.tsx
index 2f6fe007ca7..8bdbab666ed 100644
--- a/src/components/overlay_mask/overlay_mask.tsx
+++ b/src/components/overlay_mask/overlay_mask.tsx
@@ -91,7 +91,8 @@ export const EuiOverlayMask: FunctionComponent<EuiOverlayMaskProps> = ({
   useEffect(() => {
     if (!overlayMaskNode) return;
     overlayMaskNode.className = classNames('euiOverlayMask', className);
-  }, [overlayMaskNode, className]);
+    overlayMaskNode.dataset.relativeToHeader = headerZindexLocation;
+  }, [overlayMaskNode, className, headerZindexLocation]);
 
   return (
     <EuiPortal portalRef={combinedMaskRef}>
diff --git a/upcoming_changelogs/6289.md b/upcoming_changelogs/6289.md
new file mode 100644
index 00000000000..5a38a09b6be
--- /dev/null
+++ b/upcoming_changelogs/6289.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiOverlayMask` to set a `[data-relative-to-header=above|below]` attribute to replace the `--aboveHeader` and `--belowHeader` classNames removed in its Emotion conversion