[Visual Refresh] Update floating border styles for panels #8427

mgadewoll · 2025-03-11T19:42:59Z

Summary

closes https://github.com/elastic/eui-private/issues/207

This PR updates how floating borders are applied to components that use panels.

Previously borders were applied as actual borders (using border) on the panel element, which caused visual issues in light mode for flush fullwidth content where the 1px border created a 1px empty space.

`EuiTour`

Note

EuiPanel had already been updated to use pseudo element borders in a previous PR.
This PR now shares this styling approach to more components.

floating border = a visible border on dark mode and a transparent border on light mode that ensures better visibility and distinction of floating elements in dark mode

Changes

adds euiPanelBorderStyles as sharable styles which applies a floating border via pseudo element ::before to prevent it impacting content
updates components that use panels to use the shared panel styles
ensures EuiToast highlight border is properly rounded (and not cut-off by the transparent floating border)

QA

Screenshots

Show screenshots

EuiToast highlight border fix

before	after

Floating border updates

component	LIGHT mode	DARK mode
EuiPopover
EuiPopover
EuiPanel
EuiToast
EuiToolTip
EuiTour
EuiSplitPanel
EuiSuperDatePicker

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- ~~Checked for accessibility including keyboard-only and screenreader modes~~
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- ~~Checked Code Sandbox works for any docs examples~~
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately.
- ~~If applicable, added the breaking change issue label (and filled out the breaking change checklist)~~
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

- fixes also issue with cut-off highlight border

- update deprecated token to new token

- this essentially reverts a previous change back to the original values

acstll

Amazing work, thank you @mgadewoll — I only found one small thing

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

- this was already implemented for tooltip and popover in Amsterdam as well, it shouldn't be removed

kibanamachine · 2025-03-14T18:09:04Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_8427/
Storybook: https://eui.elastic.co/pr_8427/storybook
New docs: https://eui.elastic.co/pr_8427/new-docs

elasticmachine · 2025-03-14T18:13:15Z

💚 Build Succeeded

Buildkite Build
Commit: 7b45314

History

💚 Build #3632 succeeded f434ce3

cc @mgadewoll

acstll

`100.0.0` ⏩ `101.0.1` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` [`v101.0.1`](https://github.com/elastic/eui/releases/v101.0.1) - Updated `EuiProvider` and `EuiThemeProvider` with a new `highContrastMode` ([#8444](elastic/eui#8444)) - This prop allows toggling a higher contrast visual style that primarily affects borders and shadows - On `EuiProvider`, if the `highContrastMode` prop is not passed, this setting will inherit from the user's OS/system settings - If the user is using a forced colors mode (e.g. Windows' high contrast themes), this system setting will take precedence over any `highContrastMode` or `colorMode` props passed - Added `highContrastModeStyles` and `preventForcedColors` styling utils ([#8444](elastic/eui#8444)) - Updated `EuiRangeTooltip` to be easier to see in dark mode ([#8444](elastic/eui#8444)) - Updated some deprecated color token usages that have direct substitutes ([#8444](elastic/eui#8444)) - `text` -> `textParagraph` - `title` -> `textHeading` - `subduedText` -> `textSubdued` - `disabledText` -> `textDisabled` - `accentText` -> `textAccent` - `dangerText` -> `textDanger` - `warningText` -> `textWarning` - `useEuiShadow()` now accepts a second `options` argument ([#8234](elastic/eui#8234)) - `useEuiShadowFlat()` now accepts an `options` object instead of only a color ([#8234](elastic/eui#8234)) - Updated `EuiPopover` and `EuiToolTip` to be easier to see in dark mode. ([#8174](elastic/eui#8174)) **Bug fixes** - Fixed a visual bug where a transparent border would create visible empty space (`LIGHT` mode only) for the components: ([#8427](elastic/eui#8427)) - `EuiPanel` - `EuiPopover` - `EuiToolTip` - `EuiToast` - `EuiTour` --- ### `@elastic/eui-theme-common` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Removed type `EuiShadowCustomColor` ([#8444](elastic/eui#8444)) - Added types: ([#8444](elastic/eui#8444)) - `EuiShadowOptions` - `EuiThemeHighContrastModeProp` - `EuiThemeHighContrastMode` - Updated shadow utils to accepts a second `options` argument and return borders in high contrast mode: ([#8444](elastic/eui#8444)) - `euiShadow` - `euiShadowXSmall` - `euiShadowSmall` - `euiShadowMedium` - `euiShadowLarge` - `euiSlightShadowHover` - `euiShadowFlat` --- ### `@elastic/eui-theme-borealis` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Added new component level tokens: ([#8444](elastic/eui#8444)) - `buttonGroupBackgroundDisabledSelected` - `overlayMaskBackground` - `overlayMaskBackgroundHighContrast` - `skeletonBackgroundSkeletonMiddleHighContrast` ## Additional changes The latest `@elastic/eui` package introduces high contrast mode support. This PR sets all usages of `EuiProvider` to use `highContrastMode={false}` to introduce it in disabled state (this reflects the current functionality in Kibana). This is because the UI for the high contrast mode functionality (and style adjustments) need to first be implemented on Kibana side (by shared-ux). ## QA Adding high contrast mode in disabled state should result in no visual changes in Kibana. Please ensure your product view remain unchanged. --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

`100.0.0` ⏩ `101.0.1` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` [`v101.0.1`](https://github.com/elastic/eui/releases/v101.0.1) - Updated `EuiProvider` and `EuiThemeProvider` with a new `highContrastMode` ([elastic#8444](elastic/eui#8444)) - This prop allows toggling a higher contrast visual style that primarily affects borders and shadows - On `EuiProvider`, if the `highContrastMode` prop is not passed, this setting will inherit from the user's OS/system settings - If the user is using a forced colors mode (e.g. Windows' high contrast themes), this system setting will take precedence over any `highContrastMode` or `colorMode` props passed - Added `highContrastModeStyles` and `preventForcedColors` styling utils ([elastic#8444](elastic/eui#8444)) - Updated `EuiRangeTooltip` to be easier to see in dark mode ([elastic#8444](elastic/eui#8444)) - Updated some deprecated color token usages that have direct substitutes ([elastic#8444](elastic/eui#8444)) - `text` -> `textParagraph` - `title` -> `textHeading` - `subduedText` -> `textSubdued` - `disabledText` -> `textDisabled` - `accentText` -> `textAccent` - `dangerText` -> `textDanger` - `warningText` -> `textWarning` - `useEuiShadow()` now accepts a second `options` argument ([elastic#8234](elastic/eui#8234)) - `useEuiShadowFlat()` now accepts an `options` object instead of only a color ([elastic#8234](elastic/eui#8234)) - Updated `EuiPopover` and `EuiToolTip` to be easier to see in dark mode. ([elastic#8174](elastic/eui#8174)) **Bug fixes** - Fixed a visual bug where a transparent border would create visible empty space (`LIGHT` mode only) for the components: ([elastic#8427](elastic/eui#8427)) - `EuiPanel` - `EuiPopover` - `EuiToolTip` - `EuiToast` - `EuiTour` --- ### `@elastic/eui-theme-common` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Removed type `EuiShadowCustomColor` ([elastic#8444](elastic/eui#8444)) - Added types: ([elastic#8444](elastic/eui#8444)) - `EuiShadowOptions` - `EuiThemeHighContrastModeProp` - `EuiThemeHighContrastMode` - Updated shadow utils to accepts a second `options` argument and return borders in high contrast mode: ([elastic#8444](elastic/eui#8444)) - `euiShadow` - `euiShadowXSmall` - `euiShadowSmall` - `euiShadowMedium` - `euiShadowLarge` - `euiSlightShadowHover` - `euiShadowFlat` --- ### `@elastic/eui-theme-borealis` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Added new component level tokens: ([elastic#8444](elastic/eui#8444)) - `buttonGroupBackgroundDisabledSelected` - `overlayMaskBackground` - `overlayMaskBackgroundHighContrast` - `skeletonBackgroundSkeletonMiddleHighContrast` ## Additional changes The latest `@elastic/eui` package introduces high contrast mode support. This PR sets all usages of `EuiProvider` to use `highContrastMode={false}` to introduce it in disabled state (this reflects the current functionality in Kibana). This is because the UI for the high contrast mode functionality (and style adjustments) need to first be implemented on Kibana side (by shared-ux). ## QA Adding high contrast mode in disabled state should result in no visual changes in Kibana. Please ensure your product view remain unchanged. --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> (cherry picked from commit 2cd777d) # Conflicts: # src/platform/plugins/shared/discover/public/application/main/components/layout/discover_layout.test.tsx

`100.0.0` ⏩ `101.0.1` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` [`v101.0.1`](https://github.com/elastic/eui/releases/v101.0.1) - Updated `EuiProvider` and `EuiThemeProvider` with a new `highContrastMode` ([elastic#8444](elastic/eui#8444)) - This prop allows toggling a higher contrast visual style that primarily affects borders and shadows - On `EuiProvider`, if the `highContrastMode` prop is not passed, this setting will inherit from the user's OS/system settings - If the user is using a forced colors mode (e.g. Windows' high contrast themes), this system setting will take precedence over any `highContrastMode` or `colorMode` props passed - Added `highContrastModeStyles` and `preventForcedColors` styling utils ([elastic#8444](elastic/eui#8444)) - Updated `EuiRangeTooltip` to be easier to see in dark mode ([elastic#8444](elastic/eui#8444)) - Updated some deprecated color token usages that have direct substitutes ([elastic#8444](elastic/eui#8444)) - `text` -> `textParagraph` - `title` -> `textHeading` - `subduedText` -> `textSubdued` - `disabledText` -> `textDisabled` - `accentText` -> `textAccent` - `dangerText` -> `textDanger` - `warningText` -> `textWarning` - `useEuiShadow()` now accepts a second `options` argument ([elastic#8234](elastic/eui#8234)) - `useEuiShadowFlat()` now accepts an `options` object instead of only a color ([elastic#8234](elastic/eui#8234)) - Updated `EuiPopover` and `EuiToolTip` to be easier to see in dark mode. ([elastic#8174](elastic/eui#8174)) **Bug fixes** - Fixed a visual bug where a transparent border would create visible empty space (`LIGHT` mode only) for the components: ([elastic#8427](elastic/eui#8427)) - `EuiPanel` - `EuiPopover` - `EuiToolTip` - `EuiToast` - `EuiTour` --- ### `@elastic/eui-theme-common` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Removed type `EuiShadowCustomColor` ([elastic#8444](elastic/eui#8444)) - Added types: ([elastic#8444](elastic/eui#8444)) - `EuiShadowOptions` - `EuiThemeHighContrastModeProp` - `EuiThemeHighContrastMode` - Updated shadow utils to accepts a second `options` argument and return borders in high contrast mode: ([elastic#8444](elastic/eui#8444)) - `euiShadow` - `euiShadowXSmall` - `euiShadowSmall` - `euiShadowMedium` - `euiShadowLarge` - `euiSlightShadowHover` - `euiShadowFlat` --- ### `@elastic/eui-theme-borealis` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Added new component level tokens: ([elastic#8444](elastic/eui#8444)) - `buttonGroupBackgroundDisabledSelected` - `overlayMaskBackground` - `overlayMaskBackgroundHighContrast` - `skeletonBackgroundSkeletonMiddleHighContrast` ## Additional changes The latest `@elastic/eui` package introduces high contrast mode support. This PR sets all usages of `EuiProvider` to use `highContrastMode={false}` to introduce it in disabled state (this reflects the current functionality in Kibana). This is because the UI for the high contrast mode functionality (and style adjustments) need to first be implemented on Kibana side (by shared-ux). ## QA Adding high contrast mode in disabled state should result in no visual changes in Kibana. Please ensure your product view remain unchanged. --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

>[!IMPORtANT] This PR is the direct, manual backport to `8.x` for [this PR](#215698) that's being merged to `main`. The reason it's handled manually is that `8.x` receives a custom EUI release that still has the "Amsterdam" theme as default theme enabled. --- `100.0.0` ⏩ `101.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Package updates ### `@elastic/eui` [`v101.1.0`](https://github.com/elastic/eui/releases/v101.1.0) - Updates `EuiTableRow` styles to check support for `:has(+)` selector ([#8498](elastic/eui#8498)) ### `@elastic/eui` [`v101.0.1`](https://github.com/elastic/eui/releases/v101.0.1) - Updated `EuiProvider` and `EuiThemeProvider` with a new `highContrastMode` ([#8444](elastic/eui#8444)) - This prop allows toggling a higher contrast visual style that primarily affects borders and shadows - On `EuiProvider`, if the `highContrastMode` prop is not passed, this setting will inherit from the user's OS/system settings - If the user is using a forced colors mode (e.g. Windows' high contrast themes), this system setting will take precedence over any `highContrastMode` or `colorMode` props passed - Added `highContrastModeStyles` and `preventForcedColors` styling utils ([#8444](elastic/eui#8444)) - Updated `EuiRangeTooltip` to be easier to see in dark mode ([#8444](elastic/eui#8444)) - Updated some deprecated color token usages that have direct substitutes ([#8444](elastic/eui#8444)) - `text` -> `textParagraph` - `title` -> `textHeading` - `subduedText` -> `textSubdued` - `disabledText` -> `textDisabled` - `accentText` -> `textAccent` - `dangerText` -> `textDanger` - `warningText` -> `textWarning` - `useEuiShadow()` now accepts a second `options` argument ([#8234](elastic/eui#8234)) - `useEuiShadowFlat()` now accepts an `options` object instead of only a color ([#8234](elastic/eui#8234)) - Updated `EuiPopover` and `EuiToolTip` to be easier to see in dark mode. ([#8174](elastic/eui#8174)) **Bug fixes** - Fixed a visual bug where a transparent border would create visible empty space (`LIGHT` mode only) for the components: ([#8427](elastic/eui#8427)) - `EuiPanel` - `EuiPopover` - `EuiToolTip` - `EuiToast` - `EuiTour` --- ### `@elastic/eui-theme-common` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Removed type `EuiShadowCustomColor` ([#8444](elastic/eui#8444)) - Added types: ([#8444](elastic/eui#8444)) - `EuiShadowOptions` - `EuiThemeHighContrastModeProp` - `EuiThemeHighContrastMode` - Updated shadow utils to accepts a second `options` argument and return borders in high contrast mode: ([#8444](elastic/eui#8444)) - `euiShadow` - `euiShadowXSmall` - `euiShadowSmall` - `euiShadowMedium` - `euiShadowLarge` - `euiSlightShadowHover` - `euiShadowFlat` --- ### `@elastic/eui-theme-borealis` [`v0.1.0`](https://github.com/elastic/eui/releases/v0.1.0) - Added new component level tokens: ([#8444](elastic/eui#8444)) - `buttonGroupBackgroundDisabledSelected` - `overlayMaskBackground` - `overlayMaskBackgroundHighContrast` - `skeletonBackgroundSkeletonMiddleHighContrast` ## Additional changes The latest `@elastic/eui` package introduces high contrast mode support. This PR sets the root `EuiProvider` to use `highContrastMode={false}` to introduce it in disabled state (this reflects the current functionality in Kibana). Cloud-UI can enable this whenever it's tested and supported from their end. ## QA Adding high contrast mode in disabled state should result in no visual changes to the UI.

mgadewoll added 6 commits March 11, 2025 19:49

refactor(EuiPanel): add shareable border styles

3717d17

refactor(EuiPopover): update popover styles

a20b6ae

refactor(EuiToolTip): update border styles

1afb635

refactor(EuiToast): update border styles

a5b35ba

- fixes also issue with cut-off highlight border

style(EuiTour): update token name

443ab96

- update deprecated token to new token

test(VRT): update reference images

072e4a4

mgadewoll added the visual refresh label Mar 11, 2025

mgadewoll force-pushed the borealis/207-panel-floating-border-update branch from 857d117 to 072e4a4 Compare March 11, 2025 19:44

chore: add changelog

ad45eaf

mgadewoll self-assigned this Mar 11, 2025

test(EuiDataGrid): update height assertion values

f434ce3

- this essentially reverts a previous change back to the original values

mgadewoll marked this pull request as ready for review March 12, 2025 07:56

mgadewoll requested a review from a team as a code owner March 12, 2025 07:56

acstll self-requested a review March 12, 2025 13:40

acstll requested changes Mar 14, 2025

View reviewed changes

packages/eui/src/components/tool_tip/tool_tip.styles.ts Show resolved Hide resolved

mgadewoll added 3 commits March 14, 2025 17:58

fix: raise popover arrow z-index

63aa157

refactor: bring back floating border for Amsterdam

b4987f9

- this was already implemented for tooltip and popover in Amsterdam as well, it shouldn't be removed

test(vrt): update reference images

7b45314

acstll approved these changes Mar 17, 2025

View reviewed changes

mgadewoll merged commit 7744732 into elastic:main Mar 17, 2025
5 checks passed

This was referenced Mar 24, 2025

Upgrade EUI to v101.0.1 elastic/kibana#215698

Merged

[8.x] Upgrade EUI to v101.1.0-classic.0 elastic/kibana#216208

Merged

mgadewoll mentioned this pull request Mar 31, 2025

[EuiPanel] Adjust panel border z-index #8519

Merged

14 tasks

mgadewoll mentioned this pull request Oct 6, 2025

[Visual Refresh] Revert floating border usage back to using pseudo elements #9080

Merged

16 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Visual Refresh] Update floating border styles for panels #8427

[Visual Refresh] Update floating border styles for panels #8427

Uh oh!

mgadewoll commented Mar 11, 2025 •

edited

Loading

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

kibanamachine commented Mar 14, 2025

Uh oh!

elasticmachine commented Mar 14, 2025

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[Visual Refresh] Update floating border styles for panels #8427

[Visual Refresh] Update floating border styles for panels #8427

Uh oh!

Conversation

mgadewoll commented Mar 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Changes

QA

Screenshots

General checklist

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

kibanamachine commented Mar 14, 2025

Uh oh!

elasticmachine commented Mar 14, 2025

💚 Build Succeeded

History

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mgadewoll commented Mar 11, 2025 •

edited

Loading