[Flyout System] Support size="fill" #8982
Merged
Conversation
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
tsullivan
force-pushed
the
session-flyouts/fill-mode
branch
from
b8ff0c8 to
dc825bb
Compare
tsullivan
force-pushed
the
session-flyouts/fill-mode
branch
from
dc825bb to
0d95eea
Compare
tsullivan
force-pushed
the
session-flyouts/fill-mode
branch
from
a8a0907 to
013239a
Compare
Collaborator
💚 Build SucceededHistory
|
Collaborator
💚 Build Succeeded
History
|
tkajtoch
reviewed
Sep 4, 2025
| /** | ||
| * Composes all inline styles for a flyout based on its configuration | ||
| */ | ||
| export const composeFlyoutInlineStyles = ( |
Member
There was a problem hiding this comment.
This whole function feels quite difficult to follow. I'm not sure how exactly we can simplify this, but I'd like to get back to it when we have some more time.
Member
Author
There was a problem hiding this comment.
Added this to the punch list. Were you thinking someone from SharedUX could do this? I think there are some devs on this team that have availability
tkajtoch
approved these changes
Sep 4, 2025
Member
tkajtoch
left a comment
tkajtoch
left a comment
There was a problem hiding this comment.
Code changes look good. I tested the changes in Storybook and can confirm that the fill mode works as expected.
We could probably make the implementation a bit cleaner, but I'm happy to merge this PR as is since it targets the feature branch. I plan to give the whole flyout directory a cleanup pass before releasing the flyout system publicly. Let's focus on getting all functionality implemented first, though 👍🏻
tkajtoch
pushed a commit
that referenced
this pull request
Sep 4, 2025
acstll
pushed a commit
to acstll/eui
that referenced
this pull request
Sep 17, 2025
13 tasks
18 tasks
tsullivan
added a commit
to elastic/kibana
that referenced
this pull request
Jan 13, 2026
…3806) ~~Depends on elastic/eui#8982 ~~Depends on elastic/eui#9202 ~~Depends on #245515 This PR enhances the core UX offerings in Kibana with `core.overlays.openSystemFlyout`. ### `core.overlays.openSystemFlyout` Opens a system flyout that integrates with the EUI Flyout Manager. Using a mount point would break the context propogation of the EUI Flyout Manager, so this method accepts React elements directly rather than `toMountPoint`. ```typescript import React, { useRef } from 'react'; import { EuiFlyoutBody, EuiFlyoutFooter, EuiText, EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import type { OverlayRef } from '@kbn/core-mount-utils-browser'; // Create a component or function that opens the system flyout const openMySystemFlyout = (overlays) => { const flyoutRef = useRef<OverlayRef | null>(null); const handleClose = () => { if (flyoutRef.current) { flyoutRef.current.close(); } }; const FlyoutContent = () => ( <> <EuiFlyoutBody> <EuiText> <p>This is a system flyout that integrates with EUI Flyout Manager.</p> <p>The header is automatically created from the title option.</p> </EuiText> </EuiFlyoutBody> <EuiFlyoutFooter> <EuiFlexGroup justifyContent="spaceBetween"> <EuiFlexItem grow={false}> <EuiButtonEmpty onClick={handleClose}> Cancel </EuiButtonEmpty> </EuiFlexItem> <EuiFlexItem grow={false}> <EuiButton onClick={() => console.log('Save')} fill> Save </EuiButton> </EuiFlexItem> </EuiFlexGroup> </EuiFlyoutFooter> </> ); flyoutRef.current = overlays.openSystemFlyout(<FlyoutContent />, { title: 'My System Flyout', type: 'overlay', size: 'm', maxWidth: 600, ownFocus: false, onClose: () => { console.log('System flyout closed'); flyoutRef.current = null; }, onActive: () => { console.log('System flyout became active'); }, }); return flyoutRef.current; }; // Open the flyout const flyoutRef = openMySystemFlyout(overlays); // Close the flyout programmatically from outside flyoutRef.close(); ``` The developer README for the Flyout System is [here](https://github.com/elastic/eui/blob/feat/flyout-system/packages/eui/src/components/flyout/README.md). ### Example plugin Along with the new service and documentation changes, a new example plugin for developers is provided that shows different integration patterns for the EUI flyout system. **Screenshot of example plugin:** <img width="1327" height="836" alt="image" src="https://github.com/user-attachments/assets/9664f0cb-f793-4a8c-8a96-c46d069756dd" /> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Ania Kowalska <ania.kowalska@elastic.co> Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co> Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co> Co-authored-by: Jorge Oliveira <jorge.oliveira@elastic.co> Co-authored-by: Tomasz Kajtoch <tomasz.kajtoch@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
smith
pushed a commit
to smith/kibana
that referenced
this pull request
Jan 16, 2026
…stic#233806) ~~Depends on elastic/eui#8982 ~~Depends on elastic/eui#9202 ~~Depends on elastic#245515 This PR enhances the core UX offerings in Kibana with `core.overlays.openSystemFlyout`. ### `core.overlays.openSystemFlyout` Opens a system flyout that integrates with the EUI Flyout Manager. Using a mount point would break the context propogation of the EUI Flyout Manager, so this method accepts React elements directly rather than `toMountPoint`. ```typescript import React, { useRef } from 'react'; import { EuiFlyoutBody, EuiFlyoutFooter, EuiText, EuiButton, EuiButtonEmpty, EuiFlexGroup, EuiFlexItem } from '@elastic/eui'; import type { OverlayRef } from '@kbn/core-mount-utils-browser'; // Create a component or function that opens the system flyout const openMySystemFlyout = (overlays) => { const flyoutRef = useRef<OverlayRef | null>(null); const handleClose = () => { if (flyoutRef.current) { flyoutRef.current.close(); } }; const FlyoutContent = () => ( <> <EuiFlyoutBody> <EuiText> <p>This is a system flyout that integrates with EUI Flyout Manager.</p> <p>The header is automatically created from the title option.</p> </EuiText> </EuiFlyoutBody> <EuiFlyoutFooter> <EuiFlexGroup justifyContent="spaceBetween"> <EuiFlexItem grow={false}> <EuiButtonEmpty onClick={handleClose}> Cancel </EuiButtonEmpty> </EuiFlexItem> <EuiFlexItem grow={false}> <EuiButton onClick={() => console.log('Save')} fill> Save </EuiButton> </EuiFlexItem> </EuiFlexGroup> </EuiFlyoutFooter> </> ); flyoutRef.current = overlays.openSystemFlyout(<FlyoutContent />, { title: 'My System Flyout', type: 'overlay', size: 'm', maxWidth: 600, ownFocus: false, onClose: () => { console.log('System flyout closed'); flyoutRef.current = null; }, onActive: () => { console.log('System flyout became active'); }, }); return flyoutRef.current; }; // Open the flyout const flyoutRef = openMySystemFlyout(overlays); // Close the flyout programmatically from outside flyoutRef.close(); ``` The developer README for the Flyout System is [here](https://github.com/elastic/eui/blob/feat/flyout-system/packages/eui/src/components/flyout/README.md). ### Example plugin Along with the new service and documentation changes, a new example plugin for developers is provided that shows different integration patterns for the EUI flyout system. **Screenshot of example plugin:** <img width="1327" height="836" alt="image" src="https://github.com/user-attachments/assets/9664f0cb-f793-4a8c-8a96-c46d069756dd" /> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Ania Kowalska <ania.kowalska@elastic.co> Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co> Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co> Co-authored-by: Jorge Oliveira <jorge.oliveira@elastic.co> Co-authored-by: Tomasz Kajtoch <tomasz.kajtoch@elastic.co> 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
3 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
Closes #8874
Depends on #8939Why are we making this change?
Requirement for Flyout System. This PR is targeted to the flyout system feature branch.
Screenshots
Flyout.System.Fill.Mode.Demo.mp4
Impact to users
This gives developers the ability to show large-size "main" or "child" flyouts using the Flyout System.
QA
Remove or strikethrough items that do not apply to your PR.
General checklist
[ ] 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[ ] A changelog entry exists and is marked appropriately.[ ] If applicable, added the breaking change issue label (and filled out the breaking change 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)