diff --git a/packages/eui/changelogs/upcoming/9985.md b/packages/eui/changelogs/upcoming/9985.md new file mode 100644 index 000000000000..1ef55758cff0 --- /dev/null +++ b/packages/eui/changelogs/upcoming/9985.md @@ -0,0 +1,3 @@ +**Bug fixes** + +- Fixed `EuiPopoverTitle` and `EuiPopoverFooter` backgrounds not following the popover panel's corner radius diff --git a/packages/eui/src/components/popover/popover_footer.styles.ts b/packages/eui/src/components/popover/popover_footer.styles.ts index ca494294c417..5520a9aeb383 100644 --- a/packages/eui/src/components/popover/popover_footer.styles.ts +++ b/packages/eui/src/components/popover/popover_footer.styles.ts @@ -31,9 +31,13 @@ export const euiPopoverFooterStyles = (euiThemeContext: UseEuiTheme) => { : euiTheme.components.popoverFooterBorderColor }` )} + /* Match the panel radius so footer backgrounds don't square off the corners. + Avoid overflow: hidden on the panel — it clips the filter shadow and arrow. */ + ${logicalCSS('border-bottom-left-radius', euiTheme.border.radius.medium)} + ${logicalCSS('border-bottom-right-radius', euiTheme.border.radius.medium)} `, // If the popover's containing panel has padding applied, - // ensure the title expands to cover that padding via negative margins + // ensure the footer expands to cover that padding via negative margins panelPaddingSizes: { none: css``, xs: css` diff --git a/packages/eui/src/components/popover/popover_title.styles.ts b/packages/eui/src/components/popover/popover_title.styles.ts index c47e4a6d88dd..5e14614677dd 100644 --- a/packages/eui/src/components/popover/popover_title.styles.ts +++ b/packages/eui/src/components/popover/popover_title.styles.ts @@ -24,6 +24,10 @@ export const euiPopoverTitleStyles = (euiThemeContext: UseEuiTheme) => { euiPopoverTitle: css` ${euiTitle(euiThemeContext, 'xxs')} ${logicalCSS('border-bottom', euiTheme.border.thin)} + /* Match the panel radius so title backgrounds don't square off the corners. + Avoid overflow: hidden on the panel — it clips the filter shadow and arrow. */ + ${logicalCSS('border-top-left-radius', euiTheme.border.radius.medium)} + ${logicalCSS('border-top-right-radius', euiTheme.border.radius.medium)} `, // If the popover's containing panel has padding applied, // ensure the title expands to cover that padding via negative margins