refactor: updates border implementation on panels

mgadewoll · mgadewoll · commit 11d4754b9a37 · 2025-01-13T16:45:11.000+01:00
- prevents transparent borders showing on colored full-width content, e.g. for EuiSplitPanel
diff --git 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`
