feat(react-headless-components-preview): adopt anchored container queries for arrow placement#36112
Open
mainframev wants to merge 6 commits into
Open
Conversation
mainframev
changed the title
📊 Bundle size report
🤖 This report was generated against 0307f02ca1bc383b15fca2c2dc62ba2113fd7c5f |
|
Pull request demo site: URL |
mainframev
force-pushed
the
fix/headless-popover-implementation
branch
from
25dee94 to
f815971
Compare
refactor(headless-popover): refactor implementation
mainframev
force-pushed
the
fix/headless-popover-implementation
branch
from
f815971 to
1bd5814
Compare
mainframev
force-pushed
the
fix/headless-popover-implementation
branch
2 times, most recently
from
c18c393 to
3550016
Compare
mainframev
changed the title
mainframev
force-pushed
the
fix/headless-popover-implementation
branch
from
3550016 to
c11b03b
Compare
mainframev
commented
May 6, 2026
|
|
||
| if (win && supportsAnchoredContainerQueries(win)) { | ||
| // Chrome 143+: opt into `@container anchored(fallback: …)` queries. | ||
| node.style.setProperty('container-type', 'anchored'); |
Contributor
Author
There was a problem hiding this comment.
Contributor
There was a problem hiding this comment.
we need to be careful with this, as it doesn't remove some JS from the bundle,
and what is more important, consumers have to write two versions of styles, as there is no data-placement attribute when the @container anchored(fallback: …) branch is active
Contributor
Author
There was a problem hiding this comment.
Addressed in the latest push:
data-placementis now always written (in both branches of thesupportsAnchoredContainerQueries(win)check). Consumers can author a single set of[data-placement="…"]rules that works everywhere.@container anchored(fallback: …)becomes a pure override layer that only flips the arrow when the browser actually activates aposition-try-fallback. The duplicated[data-position]/[data-align]rule set inpopover.module.cssis gone.- On the JS-bundle concern: the observer still has to run on browsers without anchored container queries, so it stays in the bundle. The split into a separate PR (this one) is exactly so we can keep discussing whether the CSS-only path is worth the trade-off.
The refactor changes you LGTM'd are now in #36192.
dmytrokirpa
approved these changes
May 11, 2026
Contributor
dmytrokirpa
left a comment
dmytrokirpa
left a comment
There was a problem hiding this comment.
LGTM, except container queries, can we separate move that change to a separate PR, as we'll probably need more feedback on the idea
|
|
||
| if (win && supportsAnchoredContainerQueries(win)) { | ||
| // Chrome 143+: opt into `@container anchored(fallback: …)` queries. | ||
| node.style.setProperty('container-type', 'anchored'); |
Contributor
There was a problem hiding this comment.
we need to be careful with this, as it doesn't remove some JS from the bundle,
and what is more important, consumers have to write two versions of styles, as there is no data-placement attribute when the @container anchored(fallback: …) branch is active
mainframev
changed the title
mainframev
added a commit
to mainframev/fluentui
that referenced
this pull request
May 12, 2026
Address review feedback on microsoft#36112: when container-type: anchored is supported, data-placement was being removed, forcing consumers to author two parallel rule sets (one keyed on [data-placement], one on [data-position]+[data-align] inside @supports). Now data-placement is always written, so the base [data-placement] rules work everywhere and @container anchored(fallback: …) becomes a pure override layer for new browsers.
mainframev
force-pushed
the
fix/headless-popover-implementation
branch
from
c11b03b to
b1ca4c5
Compare
mainframev
force-pushed
the
fix/headless-popover-implementation
branch
from
b1ca4c5 to
d6768ac
Compare
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
2 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.
Supports the JS-driven
data-placementattribute as source of truth for popover-arrow styling with a CSS-native solution based on Chrome 143+'s anchored container queries (container-type: anchored+@container anchored(fallback: …)). The placement-observer still runs on older Chromium so arrow direction stays correct on older versions.