Summary

This PR is a follow-up to #8962 and it essentially reverts how floating borders are applied back to using a pseudo elements with border.

Context

In production, floating borders are currently applied via pseudo elements. The main reason for this was to prevent dimension shifts due to the border property. Alternatives - e.g. using transparent borders in LIGHT mode - do not fit our use cases as a transparent border would create visible gaps if the content background doesn't match the page background. (see this previous PR)

#8962 changed this to use the border property directly on the element instead of a pseudo element. The reason was that the pseudo element would be volatile to scroll behavior as it's content, not container (see a more in depth comparison here).

Changes

After additional consideration, it seems that the initial decision to exclude the pseudo element approach as valid option based on the scroll behavior issues was too hasty. Instead of changing how the borders are applied and accepting dimension shifts, we can rather adjust the scroll behavior issues which are less common (e.g. so far 2 usage were noticed in Kibana).

The issue that the floating border pseudo element is scrolled as content can be worked around by accepting the following guidance: We do not combine shadow utils and scroll behavior on the same element. Instead scroll behavior should be added on the child of the element that has the shadow util styling. This way both behaviors work as expected. The downside is an additional nesting level (which is only needed if both stylings are indeed needed and is not added by default).

• updates the floating border applied via the shadow utils to revert to using a pseudo element
• reuses the floating border util euiFloatingBorderStyles for panel styles

Why are we making this change?

💅 UI consistency: Reverting back to the currently used floating border approach reduces the update risk impact and ensures we don't have dimension shifts between component variants and color modes.

Screenshots #

Impact to users

⚠️ To fix the issues with scrollable shadowed elements, we want to update the known usages in Kibana (prepared here and here)

Updates for Kibana scrollable popovers

before	after

QA

• smoke test components that use shadow and verify that the shadow and floating border (in dark mode) display correctly
  • EuiPanel / EuiCard
  • EuiPopover
  • EuiTour
  • EuiFlyout
  • EuiHeader
  • EuiBottomBar
  • EuiPageTemplate
  • EuiCollapsibleNav / EuiCollapsibleNavBeta
• verify that scrolling with shadows works as expected when the styles are separated
  • EuiContextMenu
• Review added documentation

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in both MacOS and Windows high contrast modes
    • (emulate forced colors if you do not have access to a Windows machine.)
  • 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)