Skip to content

Commit 2168cd7

Browse files
committed
refactor: updates border implementation on panels
- 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
1 parent b9c74a0 commit 2168cd7

1 file changed

Lines changed: 22 additions & 4 deletions

File tree

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

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,30 @@
88

99
import { css } from '@emotion/react';
1010
import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
11-
import { UseEuiTheme } from '../../services';
11+
import { COLOR_MODES_STANDARD, UseEuiTheme } from '../../services';
1212
import {
1313
euiCanAnimate,
1414
logicalCSS,
1515
logicalTextAlignCSS,
1616
} from '../../global_styling';
1717

1818
export const euiPanelStyles = (euiThemeContext: UseEuiTheme) => {
19-
const { euiTheme } = euiThemeContext;
19+
const { euiTheme, colorMode } = euiThemeContext;
20+
const isDark = colorMode === COLOR_MODES_STANDARD.dark;
21+
22+
const borderStyle = `
23+
position: relative;
24+
25+
::before {
26+
content: '';
27+
position: absolute;
28+
inset: 0;
29+
border: ${euiTheme.border.width.thin} solid
30+
${euiTheme.colors.borderBaseFloating};
31+
border-radius: inherit;
32+
pointer-events: none;
33+
}
34+
`;
2035

2136
return {
2237
// Base
@@ -30,8 +45,11 @@ export const euiPanelStyles = (euiThemeContext: UseEuiTheme) => {
3045

3146
hasShadow: css`
3247
${euiShadow(euiThemeContext, 'm')}
33-
border: ${euiTheme.border.width.thin} solid ${euiTheme.colors
34-
.borderBaseFloating};
48+
49+
/* Using a pseudo element for the border instead of floating border only
50+
because the transparent border might otherwise be visible with arbitrary
51+
full-width/height content in light mode. */
52+
${isDark && borderStyle}
3553
`,
3654

3755
hasBorder: css`

0 commit comments

Comments
 (0)