[Visual Refresh] Update floating border styles for panels

packages/eui/changelogs/upcoming/8427.md

@@ -0,0 +1,9 @@
+**Bug fixes**
+
+- Fixed a visual bug where a transparent border would create visible empty space (`LIGHT` mode only) for the components:
+  - `EuiPanel`
+  - `EuiPopover`
+  - `EuiToolTip`
+  - `EuiToast`
+  - `EuiTour`
+

packages/eui/src/components/datagrid/body/cell/data_grid_cell_popover.spec.tsx

@@ -254,7 +254,7 @@ describe('EuiDataGridCellPopover', () => {
         openCellPopover('B');
         cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
           .should('have.css', 'width', '400px')
-          .should('have.css', 'height', '90px');
+          .should('have.css', 'height', '88px');
       });
 
       it('matches the width of the column if the column width is larger than 400px', () => {
@@ -270,7 +270,7 @@ describe('EuiDataGridCellPopover', () => {
         openCellPopover('B');
         cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
           .should('have.css', 'width', '500px')
-          .should('have.css', 'height', '66px');
+          .should('have.css', 'height', '64px');
       });
     });
   });

packages/eui/src/components/panel/panel.styles.ts

@@ -16,29 +16,49 @@ import {
   logicalTextAlignCSS,
 } from '../../global_styling';
 
-export const euiPanelStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme } = euiThemeContext;
+export const euiPanelBorderStyles = (
+  euiThemeContext: UseEuiTheme,
+  options?: {
+    borderColor?: string;
+    hasFloatingBorder?: boolean;
+  }
+) => {
+  const { euiTheme, colorMode } = euiThemeContext;
+  const { borderColor, hasFloatingBorder = true } = options ?? {};
 
-  const borderStyle = `
-    position: relative;
+  /* TODO: remove `hasFloatingBorder` and `hasVisibleBorder` and once Amsterdam is removed
+   euiTheme.colors.borderBaseFloating is enough then */
+  const hasVisibleBorder = hasFloatingBorder && colorMode === 'DARK';
 
+  return `
     /* 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 {
+    &::before {
       content: '';
       position: absolute;
+      /* ensure to keep on top of flush content */
+      z-index: 1;
       inset: 0;
       border: ${euiTheme.border.width.thin} solid
-        ${euiTheme.colors.borderBaseFloating};
+        ${
+          borderColor ?? hasVisibleBorder
+            ? euiTheme.border.color
+            : euiTheme.colors.borderBaseFloating
+        };
       border-radius: inherit;
       pointer-events: none;
     }
-  `;
+`;
+};
+
+export const euiPanelStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
 
   return {
     // Base
     euiPanel: css`
+      position: relative;
       flex-grow: 0;
     `,
 
@@ -49,11 +69,16 @@ export const euiPanelStyles = (euiThemeContext: UseEuiTheme) => {
     hasShadow: css`
       ${euiShadow(euiThemeContext, 'm')}
 
-      ${borderStyle}
+      ${euiPanelBorderStyles(euiThemeContext, {
+        hasFloatingBorder: false,
+      })}
     `,
 
     hasBorder: css`
-      border: ${euiTheme.border.thin};
+      ${euiPanelBorderStyles(euiThemeContext, {
+        borderColor: euiTheme.border.color,
+        hasFloatingBorder: false,
+      })}
     `,
 
     radius: {

packages/eui/src/components/popover/popover_arrow/_popover_arrow.styles.ts

@@ -12,8 +12,7 @@ import { _popoverArrowStyles } from '../../../services/popover';
 import { UseEuiTheme } from '../../../services';
 
 export const euiPopoverArrowStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme, colorMode } = euiThemeContext;
-  const hasBorder = colorMode === 'DARK';
+  const { euiTheme } = euiThemeContext;
 
   const arrowSize = euiTheme.size.base;
   const arrowStyles = _popoverArrowStyles(euiThemeContext, arrowSize);
@@ -22,14 +21,14 @@ export const euiPopoverArrowStyles = (euiThemeContext: UseEuiTheme) => {
     // Wrapper
     euiPopoverArrowWrapper: css`
       position: absolute;
+      z-index: 1;
       ${logicalSizeCSS(arrowSize)}
     `,
 
     // Base
     euiPopoverArrow: css`
       ${arrowStyles._arrowStyles}
       background-color: var(--euiPopoverBackgroundColor);
-      ${hasBorder ? `border: ${euiTheme.border.thin}` : ''}
     `,
 
     ...arrowStyles.positions,

packages/eui/src/components/popover/popover_panel/_popover_panel.styles.ts

@@ -19,6 +19,7 @@ import {
   logicalCSS,
   mathWithUnits,
 } from '../../../global_styling';
+import { euiPanelBorderStyles } from '../../panel/panel.styles';
 
 export const openAnimationTiming = 'slow';
 
@@ -30,7 +31,7 @@ export const openAnimationTiming = 'slow';
  */
 
 export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme, colorMode } = euiThemeContext;
+  const { euiTheme } = euiThemeContext;
 
   const translateDistance = euiTheme.size.s;
   const animationSpeed = euiTheme.animation[openAnimationTiming];
@@ -40,8 +41,6 @@ export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
     euiTheme.animation.bounce
   } ${mathWithUnits(animationSpeed, (x) => x + 100)}`;
 
-  const hasVisibleBorder = colorMode === 'DARK';
-
   return {
     // Base
     euiPopover__panel: css`
@@ -52,14 +51,14 @@ export const euiPopoverPanelStyles = (euiThemeContext: UseEuiTheme) => {
       pointer-events: none;
       opacity: 0; /* 2 */
       background-color: var(--euiPopoverBackgroundColor); /* 4 */
-      border: ${euiTheme.border.width.thin} solid
-        ${hasVisibleBorder ? euiTheme.border.color : 'transparent'};
 
       ${euiCanAnimate} {
         /* 2 */
         transition: ${opacityTransition}, ${transformTransition};
       }
 
+      ${euiPanelBorderStyles(euiThemeContext)}
+
       &:focus {
         outline-offset: 0;
       }

packages/eui/src/components/toast/toast.styles.ts

@@ -12,10 +12,24 @@ import { euiShadowLarge } from '@elastic/eui-theme-common';
 import { euiTextBreakWord, logicalCSS } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 import { euiTitle } from '../title/title.styles';
+import { euiPanelBorderStyles } from '../panel/panel.styles';
 
 export const euiToastStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
 
+  const highlightStyles = (color: string) => `
+    &:after {
+      content: '';
+      position: absolute;
+      /* ensure highlight border is on top of panel border */
+      z-index: 1;
+      inset: 0;
+      border-radius: inherit;
+      ${logicalCSS('border-top', `2px solid ${color}`)}
+      pointer-events: none;
+    }
+  `;
+
   return {
     // Base
     euiToast: css`
@@ -27,11 +41,11 @@ export const euiToastStyles = (euiThemeContext: UseEuiTheme) => {
       ${logicalCSS('padding-vertical', euiTheme.size.base)}
       background-color: ${euiTheme.colors.emptyShade};
       ${logicalCSS('width', '100%')}
-      border: ${euiTheme.border.width.thin} solid ${euiTheme.colors
-        .borderBaseFloating};
 
       ${euiTextBreakWord()} /* Prevent long lines from overflowing */
 
+      ${euiPanelBorderStyles(euiThemeContext, { hasFloatingBorder: false })}
+
       &:hover,
       &:focus {
         [class*='euiToast__closeButton'] {
@@ -47,16 +61,16 @@ export const euiToastStyles = (euiThemeContext: UseEuiTheme) => {
     `,
     // Variants
     primary: css`
-      ${logicalCSS('border-top', `2px solid ${euiTheme.colors.primary}`)}
+      ${highlightStyles(euiTheme.colors.primary)}
     `,
     success: css`
-      ${logicalCSS('border-top', `2px solid ${euiTheme.colors.success}`)}
+      ${highlightStyles(euiTheme.colors.success)}
     `,
     warning: css`
-      ${logicalCSS('border-top', `2px solid ${euiTheme.colors.warning}`)}
+      ${highlightStyles(euiTheme.colors.warning)}
     `,
     danger: css`
-      ${logicalCSS('border-top', `2px solid ${euiTheme.colors.danger}`)}
+      ${highlightStyles(euiTheme.colors.danger)}
     `,
   };
 };

packages/eui/src/components/tool_tip/tool_tip.styles.ts

@@ -12,6 +12,7 @@ import { euiShadow } from '@elastic/eui-theme-common';
 import { logicalCSS, euiFontSize, euiCanAnimate } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 import { _popoverArrowStyles } from '../../services/popover';
+import { euiPanelBorderStyles } from '../panel/panel.styles';
 
 export const euiToolTipBackgroundColor = (euiTheme: UseEuiTheme['euiTheme']) =>
   euiTheme.components.tooltipBackground;
@@ -44,9 +45,8 @@ const euiToolTipAnimationHorizontal = (size: string) => keyframes`
 `;
 
 export const euiToolTipStyles = (euiThemeContext: UseEuiTheme) => {
-  const { euiTheme, colorMode } = euiThemeContext;
+  const { euiTheme } = euiThemeContext;
 
-  const hasVisibleBorder = colorMode === 'DARK';
   const animationTiming = `${euiTheme.animation.slow} ease-out 0s forwards`;
 
   const arrowSize = euiTheme.size.m;
@@ -56,8 +56,6 @@ export const euiToolTipStyles = (euiThemeContext: UseEuiTheme) => {
     // Base
     euiToolTip: css`
       ${euiShadow(euiThemeContext)}
-      border: ${euiTheme.border.width.thin} solid
-        ${hasVisibleBorder ? euiTheme.border.color : 'transparent'};
       border-radius: ${euiTheme.border.radius.medium};
       background-color: ${euiToolTipBackgroundColor(euiTheme)};
       color: ${euiTheme.colors.ghost};
@@ -69,6 +67,8 @@ export const euiToolTipStyles = (euiThemeContext: UseEuiTheme) => {
 
       position: absolute;
 
+      ${euiPanelBorderStyles(euiThemeContext)}
+
       [class*='euiHorizontalRule'] {
         background-color: ${euiToolTipBorderColor(euiTheme)};
       }
@@ -106,7 +106,6 @@ export const euiToolTipStyles = (euiThemeContext: UseEuiTheme) => {
     euiToolTip__arrow: css`
       ${arrowStyles._arrowStyles}
       background-color: inherit;
-      border: inherit;
     `,
     arrowPositions: arrowStyles.positions,
     // Title

packages/eui/src/components/tour/_tour_header.styles.ts

@@ -23,7 +23,7 @@ export const euiTourHeaderStyles = ({ euiTheme }: UseEuiTheme) => ({
     ${logicalCSS('margin-top', 0)}
   `,
   euiTourHeader__subtitle: css`
-    color: ${euiTheme.colors.subduedText};
+    color: ${euiTheme.colors.textSubdued};
     padding-block-end: ${euiTheme.size.xs};
   `,
 });

packages/eui/src/services/popover/popover_arrow.styles.ts

@@ -18,10 +18,18 @@ import { UseEuiTheme } from '../../services';
  * Arrow clipping/transform/positioning CSS shared between EuiPopover and EuiToolTip
  */
 export const _popoverArrowStyles = (
-  { euiTheme }: UseEuiTheme,
+  { euiTheme, colorMode }: UseEuiTheme,
   arrowSize: string
 ) => {
-  const arrowOffset = mathWithUnits(arrowSize, (x) => x / -2);
+  const hasBorder = colorMode === 'DARK';
+
+  const arrowOffset = mathWithUnits(
+    [
+      arrowSize,
+      euiTheme.border.width.thin, // account for 1px pseudo element border on panel
+    ],
+    (x, y) => x / -2 - y
+  );
 
   const arrowBorderRadius = mathWithUnits(
     euiTheme.border.radius.small,
@@ -31,11 +39,13 @@ export const _popoverArrowStyles = (
   return {
     _arrowStyles: `
       position: absolute;
+      z-index: 1;
       ${logicalSizeCSS(arrowSize)}
       border-radius: ${arrowBorderRadius};
       /* Use clip-path to ensure that arrows don't overlap into popover content */
       clip-path: polygon(0 0, 100% 100%, 0 100%);
       transform-origin: center;
+      ${hasBorder ? `border: ${euiTheme.border.thin};` : ''}
     `,
 
     positions: {