From 100d15e3f22426f78371639ebb9b69f06fe55220 Mon Sep 17 00:00:00 2001
From: Lene Gadewoll <lene.gadewoll@elastic.co>
Date: Tue, 14 Jan 2025 13:41:35 +0100
Subject: [PATCH] [Visual Refresh] Update floating border on EuiPanel (#8270)

---
 .../eui/src/components/panel/panel.styles.ts  | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/eui/src/components/panel/panel.styles.ts b/packages/eui/src/components/panel/panel.styles.ts
index 2ca0e0478a9..20825d0cbdc 100644
--- a/packages/eui/src/components/panel/panel.styles.ts
+++ b/packages/eui/src/components/panel/panel.styles.ts
@@ -18,6 +18,23 @@ import {
 export const euiPanelStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
 
+  const borderStyle = `
+    position: relative;
+
+    /* Using a pseudo element for the border instead of floating border only 
+      because the transparent border might otherwise be visible with arbitrary 
+      full-width/height content in light mode. */
+    ::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border: ${euiTheme.border.width.thin} solid
+        ${euiTheme.colors.borderBaseFloating};
+      border-radius: inherit;
+      pointer-events: none;
+    }
+  `;
+
   return {
     // Base
     euiPanel: css`
@@ -30,8 +47,8 @@ export const euiPanelStyles = (euiThemeContext: UseEuiTheme) => {
 
     hasShadow: css`
       ${euiShadow(euiThemeContext, 'm')}
-      border: ${euiTheme.border.width.thin} solid ${euiTheme.colors
-        .borderBaseFloating};
+
+      ${borderStyle}
     `,
 
     hasBorder: css`