refactor: updates border implementation on panels

mgadewoll · mgadewoll · commit 2168cd74b060 · 2025-01-13T11:12:10.000+01:00
- prevents transparent borders showing on colored full-width content, e.g. for EuiSplitPanel

- keeps using borderBaseFloating token as it provides expected split between Amsterdam and Borealis
diff --git a/packages/eui/src/components/panel/panel.styles.ts b/packages/eui/src/components/panel/panel.styles.ts
@@ -8,15 +8,30 @@
 
 import { css } from '@emotion/react';
 import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
-import { UseEuiTheme } from '../../services';
+import { COLOR_MODES_STANDARD, UseEuiTheme } from '../../services';
 import {
   euiCanAnimate,
   logicalCSS,
   logicalTextAlignCSS,
 } from '../../global_styling';
 
 export const euiPanelStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme } = euiThemeContext;
+  const { euiTheme, colorMode } = euiThemeContext;
+  const isDark = colorMode === COLOR_MODES_STANDARD.dark;
+
+  const borderStyle = `
+    position: relative;
+
+    ::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      border: ${euiTheme.border.width.thin} solid
+        ${euiTheme.colors.borderBaseFloating};
+      border-radius: inherit;
+      pointer-events: none;
+    }
+  `;
 
   return {
     // Base
@@ -30,8 +45,11 @@ export const euiPanelStyles = (euiThemeContext: UseEuiTheme) => {
 
     hasShadow: css`
       ${euiShadow(euiThemeContext, 'm')}
-      border: ${euiTheme.border.width.thin} solid ${euiTheme.colors
-        .borderBaseFloating};
+
+      /* 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. */
+      ${isDark && borderStyle}
     `,
 
     hasBorder: css`
