[EuiCallOut] Use resize observer instead of container queries#9727
Open
mgadewoll wants to merge 3 commits into
Open
[EuiCallOut] Use resize observer instead of container queries#9727mgadewoll wants to merge 3 commits into
mgadewoll wants to merge 3 commits into
Conversation
- showcases behavior in different container contexts
Collaborator
💚 Build Succeeded
cc @mgadewoll |
Collaborator
💚 Build Succeededcc @mgadewoll |
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
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
This PR is a follow-up to #9705, which updated
EuiCallOutto use container queries to handle the responsive behavior of the action elements.Because
EuiCallOutis a somewhat general component that can be placed in different layout contexts, it might be placed in containers that have no intrinsic width which would lead the container query to collapse as it has no dimensions to align to.To prevent issues because of this, we instead use a minimal resize observer implementation that sets a
data-layoutattribute which CSS can target accordingly instead of the container query.API Changes
⚪ No API changes
Screenshots
No visual changes expected.
Impact Assessment
Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.
Impact level: 🟢 None - internal change only (pre-rollout)
Release Readiness
QA instructions for reviewer
Checklist before marking Ready for Review
QA: Tested docs changesChangelog: Added changelog entryBreaking changes: Addedbreaking changelabel (if applicable)Reviewer checklist