Repository navigation
Conversation
Breakpoint mixins emit @container queries against a configured container name. The JS breakpoint provider measures the element returned by getRoot(container), where container is the element the React root or portal is mounted in.
EuiProvider takes breakpointContainer={{ mountElement }}. Containers are marked with
data-eui-breakpoint-container and resolved with closest(); body is the fallback. EUI global
styles make body and marked elements containers. JS measures the content box with a shared
ResizeObserver, and portals add a provider only when they land in a different container.
Dosant
changed the title
breakpointContainer: true switches only the CSS breakpoint mixins.
{ mountElement } also switches the JS hooks to the resolved container.
Containers set their own container CSS instead of a global attribute rule, so the containment is visible where it applies. body stays the global fallback.
💚 Build Succeeded
History
|
💔 Build Failed
Failed CI StepsHistory
|
This branch has not been deployed
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.
Part of elastic/kibana-team#3040
Kibana side: elastic/kibana#296462
Summary
Proof of concept, not for merge.
EUI breakpoints always resolve against the window, in CSS (
@media) and in JS (windowresize listener). In Kibana, the sidebar narrows the app area without changing the window, so pages keep their desktop layout in a squished app area.This PoC adds an opt-in
EuiProvideroption that resolves breakpoints against the nearest breakpoint container instead.trueswitches only the CSS mixins.{ mountElement }also switches the JS hooks, which need to know where the React root is mounted:data-eui-breakpoint-container(EUI_BREAKPOINT_CONTAINER_ATTRIBUTE). When the option is set,EuiGlobalStylesmakesbodyand every marked element aeuiBreakpointContainerinline-size container.bodyis the fallback: a container query with no matching ancestor never matches, so without it rules outside a marked element would stop applying.useEuiTheme()returnsbreakpointContainer.euiBreakpoint,euiMinBreakpointandeuiMaxBreakpointread it and emit@container euiBreakpointContainer (…)instead of@media. With no width condition they keep@media only screen, because a bare@container <name>is invalid.{ mountElement },EuiProviderresolvesmountElement.closest('[data-eui-breakpoint-container]') ?? body, andCurrentEuiBreakpointProvidermeasures that element's content box, which is the same box container queries use. SouseCurrentEuiBreakpoint,EuiShowFor,EuiHideForand the components built on them follow the same width as the CSS. All providers share oneResizeObserver.{ mountElement },EuiPortalre-resolves from the portal node. CSS follows the DOM but context follows the React tree, so a flyout opened from the app would otherwise measure the app area in JS andbodyin CSS. It only adds a provider when the portal lands in a different container than its parent, so tooltips and popovers stay cheap.Without the option, nothing changes.
Open questions: