Skip to content

[Flyout System] Add scrollContainerRef prop to EuiFlyoutBody#9373

Merged
angeles-mb merged 2 commits intoelastic:mainfrom
angeles-mb:2564-add-scrollRef-to-euiflyoutbody-for-scroll-container-access
Feb 11, 2026
Merged

[Flyout System] Add scrollContainerRef prop to EuiFlyoutBody#9373
angeles-mb merged 2 commits intoelastic:mainfrom
angeles-mb:2564-add-scrollRef-to-euiflyoutbody-for-scroll-container-access

Conversation

@angeles-mb
Copy link
Copy Markdown
Contributor

@angeles-mb angeles-mb commented Feb 10, 2026

Summary

This PR adds optional scrollContainerRef prop to EuiFlyoutBody for consumers to be able to reference the flyout's internal scroll container:

  • Added scrollContainerRef optional prop
  • Added relevant unit tests
  • Updated snapshots

Why 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__overflow and 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

  • Browser QA
    • Checked in both light and dark modes
    • Checked in both MacOS and Windows high contrast modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • 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)
    • If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
  • 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)

@angeles-mb angeles-mb force-pushed the 2564-add-scrollRef-to-euiflyoutbody-for-scroll-container-access branch from c7a7b06 to 546c76c Compare February 10, 2026 12:13
@angeles-mb angeles-mb changed the title [Flyout System] Add scrollRef prop to EuiFlyoutBody for scroll contai… [Flyout System] Add scrollRef prop to EuiFlyoutBody Feb 10, 2026
@angeles-mb angeles-mb self-assigned this Feb 10, 2026
@angeles-mb angeles-mb marked this pull request as ready for review February 10, 2026 13:33
@angeles-mb angeles-mb requested a review from a team as a code owner February 10, 2026 13:33
@mgadewoll mgadewoll self-requested a review February 10, 2026 14:44
@angeles-mb angeles-mb changed the title [Flyout System] Add scrollRef prop to EuiFlyoutBody [Flyout System] Add scrollContainerRef prop to EuiFlyoutBody Feb 10, 2026
@angeles-mb angeles-mb force-pushed the 2564-add-scrollRef-to-euiflyoutbody-for-scroll-container-access branch from a9baf6a to ac2d06c Compare February 10, 2026 16:12
@elasticmachine
Copy link
Copy Markdown
Collaborator

💚 Build Succeeded

History

cc @angeles-mb

@elasticmachine
Copy link
Copy Markdown
Collaborator

💚 Build Succeeded

History

cc @angeles-mb

Copy link
Copy Markdown
Contributor

@mgadewoll mgadewoll left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 The updates are LGTM. Thanks for contributing! 🎉

@angeles-mb angeles-mb merged commit fd6e1ce into elastic:main Feb 11, 2026
5 checks passed
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants