[Flyout System] Child Flyout History#9409
Draft
tsullivan wants to merge 60 commits intoelastic:mainfrom
Draft
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.
…hook can treat it as unbounded
14 tasks
tsullivan
force-pushed
the
flyout/child-history
branch
from
6b10192 to
7155be4
Compare
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.
Depends on #9377
Depends on #9412
Summary
Why are we making this change?
Closes #9410
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[ ] Added documentation[ ] Props have proper autodocs (using@defaultif default values are missing) and playground toggles[ ] Checked Code Sandbox works for any docs examples[ ] 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)