[EuiFlyout] Expose css variables for the offset required by push flyout #8872

Dosant · 2025-07-16T15:28:26Z

Summary

Part of #8820, this is an attempt to address an ugly hack for for push EuiFlyout's in Kibana's new layout:

https://github.com/elastic/kibana/blob/main/src/core/packages/chrome/layout/core-chrome-layout/layouts/grid/hack_use_sync_push_flyout.tsx

Currently Kibana has to rely on MutationObserver on body.style to apply padding on application container instead of a body, but with this simple improvement where EUI exposes the variables directly we can get rid of the ugly hack.

Long-term, we should consider solving this by making the flyout relative to the specified container instead of the body. However, this quick workaround is already a great improvement.

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)

packages/eui/src/components/flyout/flyout.spec.tsx

packages/eui/src/services/theme/provider.tsx

packages/eui/src/components/flyout/flyout.tsx

packages/eui/changelogs/upcoming/8872.md

packages/eui/src/components/flyout/flyout.spec.tsx

packages/eui/src/services/theme/provider.tsx

elasticmachine · 2025-07-17T09:59:49Z

💚 Build Succeeded

History

💚 Build #781 succeeded d8b2182
💚 Build #779 succeeded 0f3040a

elasticmachine · 2025-07-17T10:11:06Z

💚 Build Succeeded

Buildkite Build
Commit: 83a3c95

History

💚 Build #4383 succeeded d8b2182

mgadewoll

🟢 Code changes LGTM and the change to provide global flyout variables works as expected.

Dosant · 2025-07-17T14:32:57Z

@mgadewoll thank you! Could you please merge 🙏

`@elastic/eui`: `106.0.0` ⏩ `106.1.0` `@elastic/eslint-plugin-eui`: `2.1.0` ⏩ `2.2.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) New props and defaults have been added to `EuiFlyout`, including `includeSelectorInFocusTrap`, plus new global CSS variables for push mode offset control. Additionally, we introduced a small spacing fix for invalid `EuiDualRange` append component and added support for custom styles on `EuiTreeView` nodes via the css key. :warning: **React 16 is now deprecated:** EUI no longer tests against it or fixes issues specific to it. ## Changes - I removed forced click in: `x-pack/test/security_solution_cypress/cypress/tasks/rule_details.ts` - I removed `{enter}` in: `x-pack/test/security_solution_cypress/cypress/tasks/common/rule_actions.ts` (see #228517) ## Package updates ### `@elastic/eui` #### [`v106.1.0`](https://github.com/elastic/eui/releases/v106.1.0) - Added `--euiPushFlyoutOffsetInlineStart` and `--euiPushFlyoutOffsetInlineEnd` global CSS variables set by the `EuiFlyout` in `push` mode. ([#8872](elastic/eui#8872)) - Reduced the `min-width` for inputs in `EuiRange` and `EuiDualRange` ([#8866](elastic/eui#8866)) - Added `includeSelectorInFocusTrap` prop for `EuiFlyout` ([#8849](elastic/eui#8849)) - Added component defaults for `EuiFlyout` that include `includeSelectorInFocusTrap` and `includeFixedHeadersInFocusTrap` ([#8849](elastic/eui#8849)) **Bug fixes** - Fixed flaky manual return focus behavior on `EuiFlyout` by relying on `FocusTrap` returning focus instead ([#8878](elastic/eui#8878)) - Fixed `EuiFlyoutChild` closing its parent `EuiFlyout` on `Escape` keypress ([#8878](elastic/eui#8878)) - Fixed support for `css` key in items object passed to `EuiTreeView` ([#8864](elastic/eui#8864)) **Deprecations** - Deprecated support for React 16. Please update to a modern version of React or stay on EUI version 106.0.0 if you can't switch right now. ([#8868](elastic/eui#8868)) ### `@elastic/eslint-plugin-eui` #### [`v2.2.1`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.2.1) **Bug fixes** - Removed `no-css_color` entry which mapped to a duplicate `no-css-color` rule ([#8888](elastic/eui#8888)) #### [`v2.2.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.2.0) - Added new `prefer-eui-icon-tip` rule. ([#8877](elastic/eui#8877))

`@elastic/eui`: `106.0.0` ⏩ `106.1.0` `@elastic/eslint-plugin-eui`: `2.1.0` ⏩ `2.2.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) New props and defaults have been added to `EuiFlyout`, including `includeSelectorInFocusTrap`, plus new global CSS variables for push mode offset control. Additionally, we introduced a small spacing fix for invalid `EuiDualRange` append component and added support for custom styles on `EuiTreeView` nodes via the css key. :warning: **React 16 is now deprecated:** EUI no longer tests against it or fixes issues specific to it. ## Changes - I removed forced click in: `x-pack/test/security_solution_cypress/cypress/tasks/rule_details.ts` - I removed `{enter}` in: `x-pack/test/security_solution_cypress/cypress/tasks/common/rule_actions.ts` (see elastic#228517) ## Package updates ### `@elastic/eui` #### [`v106.1.0`](https://github.com/elastic/eui/releases/v106.1.0) - Added `--euiPushFlyoutOffsetInlineStart` and `--euiPushFlyoutOffsetInlineEnd` global CSS variables set by the `EuiFlyout` in `push` mode. ([elastic#8872](elastic/eui#8872)) - Reduced the `min-width` for inputs in `EuiRange` and `EuiDualRange` ([elastic#8866](elastic/eui#8866)) - Added `includeSelectorInFocusTrap` prop for `EuiFlyout` ([elastic#8849](elastic/eui#8849)) - Added component defaults for `EuiFlyout` that include `includeSelectorInFocusTrap` and `includeFixedHeadersInFocusTrap` ([elastic#8849](elastic/eui#8849)) **Bug fixes** - Fixed flaky manual return focus behavior on `EuiFlyout` by relying on `FocusTrap` returning focus instead ([elastic#8878](elastic/eui#8878)) - Fixed `EuiFlyoutChild` closing its parent `EuiFlyout` on `Escape` keypress ([elastic#8878](elastic/eui#8878)) - Fixed support for `css` key in items object passed to `EuiTreeView` ([elastic#8864](elastic/eui#8864)) **Deprecations** - Deprecated support for React 16. Please update to a modern version of React or stay on EUI version 106.0.0 if you can't switch right now. ([elastic#8868](elastic/eui#8868)) ### `@elastic/eslint-plugin-eui` #### [`v2.2.1`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.2.1) **Bug fixes** - Removed `no-css_color` entry which mapped to a duplicate `no-css-color` rule ([elastic#8888](elastic/eui#8888)) #### [`v2.2.0`](https://www.npmjs.com/package/@elastic/eslint-plugin-eui/v/2.2.0) - Added new `prefer-eui-icon-tip` rule. ([elastic#8877](elastic/eui#8877))

## Summary We introduced some EUI related hacks for flyouts for grid layout. After contributing some improvements to EUI we can clean the hacks up: - elastic/eui#8872 - this cleans up a hack to resize the push flyout using new exposed css variable - elastic/eui#8849 This allows us to specify which elements should be included in the flyout focus trap by default. Previously, it was the EUI fixed header, but in the grid layout, we don't have a fixed header. So, we need to tell EUI which elements to include: our header and sidenav. - Small unzyme --------- Co-authored-by: Tim Sullivan <[email protected]>

Dosant added 2 commits July 16, 2025 16:38

add css var for push flyout

8eb1077

css variable

2582f8e

Dosant commented Jul 16, 2025

View reviewed changes

packages/eui/src/components/flyout/flyout.spec.tsx Show resolved Hide resolved

Dosant added 3 commits July 16, 2025 17:33

change log

5f2c64e

improve

0f3040a

support null in jest

d8b2182

Dosant commented Jul 16, 2025

View reviewed changes

packages/eui/src/services/theme/provider.tsx Show resolved Hide resolved

Dosant marked this pull request as ready for review July 17, 2025 07:07

Dosant requested a review from a team as a code owner July 17, 2025 07:07

mgadewoll reviewed Jul 17, 2025

View reviewed changes

improve changelog

49ae5db

Dosant mentioned this pull request Jul 17, 2025

[Kibana Workspace Chrome] Improvements for new Kibana layout #8820

Open

Merge branch 'main' of github.com:elastic/eui into push-flyout-vars

83a3c95

Dosant requested a review from mgadewoll July 17, 2025 12:10

mgadewoll approved these changes Jul 17, 2025

View reviewed changes

mgadewoll merged commit ba73911 into elastic:main Jul 17, 2025
5 checks passed

weronikaolejniczak mentioned this pull request Jul 21, 2025

Upgrade EUI to v106.1.0 and ESLint plugin to v2.2.1 elastic/kibana#228828

Merged

Dosant mentioned this pull request Aug 4, 2025

[Workspace Chrome] Clean up some of EUI hacks elastic/kibana#230419

Merged

mgadewoll mentioned this pull request Sep 9, 2025

[Docs] Add EuiFlyout CSS vars and component default documentation #9001

Merged

2 tasks

Dosant mentioned this pull request Nov 13, 2025

[EuiBottomBar] Expose --euiBottomBarOffset as css variable #9211

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[EuiFlyout] Expose css variables for the offset required by push flyout #8872

[EuiFlyout] Expose css variables for the offset required by push flyout #8872

Uh oh!

Dosant commented Jul 16, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Jul 17, 2025

Uh oh!

elasticmachine commented Jul 17, 2025

Uh oh!

mgadewoll left a comment

Uh oh!

Dosant commented Jul 17, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[EuiFlyout] Expose css variables for the offset required by push flyout #8872

[EuiFlyout] Expose css variables for the offset required by push flyout #8872

Uh oh!

Conversation

Dosant commented Jul 16, 2025

Summary

General checklist

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Jul 17, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Jul 17, 2025

💚 Build Succeeded

History

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

Dosant commented Jul 17, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants