Skip to content

[EuiFlyout] Add resizable flyout docs section copy #7451

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cee-chen merged 1 commit into from
Jan 9, 2024
Merged

[EuiFlyout] Add resizable flyout docs section copy #7451

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions website/docs/02_components/layout/flyout/overview.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,3 +79,9 @@ To stop this growth at an ideal width, set `maxWidth` to `true`, or pass your ow
Note that there are some caveats to providing a maxWidth that is smaller than the minWidth.

:::

## Resizable flyouts

You can use **EuiFlyoutResizable** to render a flyout that users can drag with their mouse or use arrow keys to resize. This may be useful for scenarios where the space the user needs can be unpredictable, if content is dynamic. Resizable flyouts allow users to adjust content to better fit their individual screens and workflows.

We strongly recommend setting reasonable numerical `minWidth` and `maxWidth` props based on the flyout content and page content that you _can_ predict.