[Flyout System] Add support for iconType to display in history popover#9412
Draft
tsullivan wants to merge 55 commits intoelastic:mainfrom
Draft
[Flyout System] Add support for iconType to display in history popover#9412tsullivan wants to merge 55 commits intoelastic:mainfrom
tsullivan wants to merge 55 commits intoelastic:mainfrom
Conversation
Refactor `useEuiFlyoutResizable` to output percentage-based widths instead of raw pixels. The hook now clamps resize at 90% of a reference width (defaulting to the viewport), accounts for a sibling flyout's width, and scales proportionally when the container resizes in either direction. Updates unit and Cypress tests accordingly. Co-authored-by: Cursor <cursoragent@cursor.com>
…rlay Add `containerElement` and `minWidth` to the flyout manager state, actions, reducer, and store. Extend `EuiPortal` with an optional `container` prop for mounting into a specific element. Enrich `EuiFlyoutParentContext` to share the parent's container element with child flyouts. Add `container` prop to the flyout overlay for portal targeting. Refactor selector tests to use a `createMockManager` factory that includes the new `setContainerElement` API. Co-authored-by: Cursor <cursoragent@cursor.com>
Introduce the `container` prop on `EuiFlyout` for positioning flyouts relative to an application container instead of the viewport. When a container is provided, the flyout uses `position: absolute` with container queries; otherwise it uses `position: fixed` with media queries. Width values use `%` units throughout (identical to `vw` for fixed positioning, container-relative for absolute). Key changes: - Refactor `euiFlyoutStyles` into shared base + position variants (`fixed`/`absolute`) + sizing modes (`viewport`/`container`) - Wire container through `EuiFlyoutParentContext` for child inheritance - Set `container-type: inline-size` and scroll-reset listener on the container element; report it to manager state for layout calculations - `layout_mode.ts` uses container width for responsive breakpoints - Add `container` to `EuiProvider` component defaults for global config - Consolidate selector hooks: read `useFlyoutManager()` once per component and derive values inline (reduces redundant calls) - Deprecation warnings for `maskProps` and `includeFixedHeadersInFocusTrap` when `container` is provided - `--euiFlyoutMainWidth` CSS variable for synchronous fill-child sizing Co-authored-by: Cursor <cursoragent@cursor.com>
Add website documentation for the `container` prop explaining container-relative positioning, `position: relative` requirement, and the `container-type: inline-size` caveat for fixed descendants. Add `FlyoutContainerDemo` storybook demonstrating both "app" flyouts (container-relative, push type, with child) and "global" flyouts (viewport-relative, overlay type) in a simulated app layout with left navigation and right tools sidebar. Co-authored-by: Cursor <cursoragent@cursor.com>
This reverts commit 45f4d0d.
…d a breaking change
…hook can treat it as unbounded
This was referenced Feb 25, 2026
Collaborator
💚 Build SucceededHistory
|
Collaborator
💔 Build Failed
Failed CI StepsHistory
|
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
2 participants
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
Depends on #9377
Why are we making this change?
Needed for child history shown in the flyout system history popover: when children are shown in history, one major way they will be differentiated is by icon
Screenshots #
Impact to users
QA
Remove or strikethrough items that do not apply to your PR.
General checklist
[ ] 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 for accessibility including keyboard-only and screenreader modes@defaultif default values are missing) and playground toggles[ ] Updated visual regression tests[ ] 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)[ ] 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)