Skip to content

Conversation

@tsullivan
Copy link
Member

@tsullivan tsullivan commented Oct 13, 2025

Summary

  • Allow main flyouts to use custom size values (e.g., '400px') while child flyouts must use named sizes
  • Update 'l' size validation to be bidirectional: either flyout can be 'l' if the other is 'fill'
  • Change the default size of child flyouts to be s so that default sizing for both parent and child results in a valid combination
  • Refactor validation logic to use array methods for cleaner, more concise code
  • Update all tests to reflect new validation rules
  • Update documentation and storybook with correct size combination rules
  • Add 'l' and '400px' options to flyout manager storybook controls

Why are we making this change?

We have to allow flexible sizing options to support existing use cases in Kibana and provide an easy migration path for those flyouts to adopt the Flyout System.

Screenshots #

Impact to users

Impact to devs: easier migration path to adopt existing flyouts into the Flyout System.

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)
  • 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)

- Allow main flyouts to use custom size values (e.g., '400px') while child flyouts must use named sizes
- Update 'l' size validation to be bidirectional: either flyout can be 'l' if the other is 'fill'
- Refactor validation logic to use array methods for cleaner, more concise code
- Update all tests to reflect new validation rules
- Update documentation and storybook with correct size combination rules
- Add 'l' and '400px' options to flyout manager storybook controls
@tsullivan tsullivan requested a review from a team as a code owner October 13, 2025 17:32
@tsullivan tsullivan added the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Oct 13, 2025
@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

@tkajtoch tkajtoch self-requested a review October 14, 2025 11:40
Copy link
Member

@tkajtoch tkajtoch left a comment

Choose a reason for hiding this comment

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

LGTM

@tkajtoch tkajtoch merged commit 3cc1e53 into elastic:feat/flyout-system Oct 14, 2025
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation)

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants