[Flyout System] Add scrollContainerRef prop to EuiFlyoutBody#9373
Merged
angeles-mb merged 2 commits intoelastic:mainfrom Feb 11, 2026
Conversation
c7a7b06 to
546c76c
Compare
mgadewoll
reviewed
Feb 10, 2026
a9baf6a to
ac2d06c
Compare
Collaborator
💚 Build SucceededHistory
cc @angeles-mb |
Collaborator
💚 Build Succeeded
History
cc @angeles-mb |
mgadewoll
approved these changes
Feb 10, 2026
Contributor
mgadewoll
left a comment
There was a problem hiding this comment.
🟢 The updates are LGTM. Thanks for contributing! 🎉
mgadewoll
added a commit
to elastic/kibana
that referenced
this pull request
Feb 23, 2026
## Dependency updates - `@elastic/eui` - v112.3.0 ⏩ v113.0.0 - `@elastic/eui-theme-borealis` - v5.4.0 ⏩ v6.0.0 - `@elastic/eslint-plugin-eui` - v2.8.0 ⏩ v2.9.0 --- ## Changes 1. EUI component update: API and Design updates to form layout append/prepend by using the new components `EuiFormPrepend` and `EuiFormAppend` (EUI [#9308](elastic/eui#9308)) >[!important] ❗ This upgrade PR includes all changes previously made in the specific QA PR #248805. Please see the description in that PR for detailed information about the specific changes. 2. Additional changes related to the form layout changes >[!note] 🔗 Please see the [section "Additional changes"](#248805 (comment)) in #248805 for an overview of additional changes. 3. Removed token update: Replaced `ghost` and `ink` token usages with `textInk` or `plainDark` and `textGhost` or `plainLight` respectively (EUI [#9379](elastic/eui#9379)) ## Package updates ### `@elastic/eui` [v113.0.0](https://github.com/elastic/eui/releases/tag/v113.0.0) - Updated `EuiFlyout` manager to close all flyouts when a parent flyout is closed. ([#9378](elastic/eui#9378)) - Added `textInk` and `textGhost` color tokens for text and icon colors that should always remain dark or light regardless of color mode. ([#9379](elastic/eui#9379)) - Added `EuiFormAppend` and `EuiFormPrepend` components ([#9014](elastic/eui#9014)) - Added support for `type="span"` on `EuiFormLabel` for visual-only form labels ([#9014](elastic/eui#9014)) - Updated `EuiFormLabel` to render a `span` if no `htmlFor` is passed ([#9014](elastic/eui#9014)) - Updated `EuiFormControlLayout` to use `EuiFormAppend` and `EuiFormPrepend` ([#9014](elastic/eui#9014)) - Updated `EuiAutoRefresh` and `EuiColorPicker` to use `EuiFormPrepend` ([#9014](elastic/eui#9014)) - Updated `EuiFormAppend`/`EuiFormPrepend` styling ([#9305](elastic/eui#9305)) - Updated `EuiFormAppend`/`EuiFormPrepend` to inherit `isDisabled` state from `EuiFormControlLayout` ([#9305](elastic/eui#9305)) - Updated `EuiFormControlLayout` hover, disabled and readonly styling ([#9305](elastic/eui#9305)) - Updated `EuiFormControlButton` to inherit `isDisabled`, `readOnly` and `isInvalid` states from `EuiFormControlLayout` ([#9305](elastic/eui#9305)) - Added `iconSide` prop on `EuiDatePickerRange` ([#9305](elastic/eui#9305)) - Updated `EuiSuperDatePicker` valid state styling ([#9305](elastic/eui#9305)) - Removed background color transition on `EuiButtonEmpty` (other button variants don't have a transition anymore either) ([#9305](elastic/eui#9305)) - Added `isLoading` prop on `EuiFormControlButton` ([#9328](elastic/eui#9328)) - Updated paddings for `EuiButton`, `EuiButtonEmpty`, `EuiFilterButton` ([#8948](elastic/eui#8948)) - Updated paddings for `append`/`prepend` on `EuiFormControlLayout` ([#8948](elastic/eui#8948)) - Added optional `scrollContainerRef` prop to `EuiFlyoutBody` for accessing the flyout's internal scroll container. ([#9373](elastic/eui#9373)) **Bug fixes** - Updated `EuiColorPicker` to ensure `id` is correctly passed onto the internal `EuiFormControlLayout` ([#9014](elastic/eui#9014)) **Breaking changes** - Removed `ink` and `ghost` theme tokens. Use `textInk` / `textGhost` for text and icon colors or `plainDark` /`plainLight` for non-text use cases. ([#9379](elastic/eui#9379)) - Updated `EuiQuickSelectPopover` in `EuiSuperDatePicker` to use `EuiFormPrepend`. This results in more restricted `buttonProps` as they reflect `EuiFormPrepend` instead of generic `EuiButtonEmpty` props. ([#9014](elastic/eui#9014)) - Removed `components.superDatePickerBackgroundSuccees` token ([#9305](elastic/eui#9305)) ### `@elastic/eui-theme-borealis` v6.0.0 - Added `textInk` and `textGhost` color tokens for text and icon colors that should always remain dark or light regardless of color mode. ([#9379](elastic/eui#9379)) ### `@elastic/eslint-plugin-eui` v2.9.0 - Prevented `badge-accessibility-rules` rule autofix from duplicating `aria-hidden` attributes. ([#9366](elastic/eui#9366)) - Skip `badge-accessibility-rules` rule validation when a spread operator is used in a component. ([#9366](elastic/eui#9366)) --------- Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co> Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR adds optional
scrollContainerRefprop toEuiFlyoutBodyfor consumers to be able to reference the flyout's internal scroll container:scrollContainerRefoptional propWhy are we making this change?
Closes https://github.com/elastic/kibana-team/issues/2564
Relates to elastic/kibana#250265
This is an enhancement request to avoid consumers having to rely on internal class
euiFlyoutBody__overflowand DOM manipulation to access and manipulate the scroll container in flyouts (e.g., for scroll position tracking, scroll-to-element functionality, intersection observers, etc.).Screenshots #
N/A There are no visual changes to the component.
Impact to users
This is an enhancement request, optional to adopt.
ℹ️ Snapshot tests might fail due to the added internal
data-test-subj.QA
Remove or strikethrough items that do not apply to your PR.
General checklist
Checked in both light and dark modesChecked in both MacOS and Windows high contrast modes(emulate forced colors if you do not have access to a Windows machine.)Checked in mobileChecked for accessibility including keyboard-only and screenreader modesProps have proper autodocs (using@defaultif default values are missing) and playground togglesChecked Code Sandbox works for any docs examplesUpdated visual regression testsIf applicable, added the breaking change issue label (and filled out the breaking change checklist)If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)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)