fix(react-headless-components-preview): adopt anchored container queries for arrow placement#36112
fix(react-headless-components-preview): adopt anchored container queries for arrow placement#36112mainframev wants to merge 4 commits into
Conversation
mainframev
changed the title
📊 Bundle size report
🤖 This report was generated against 6411342ccfa1a14f414d13af9881c61788bafd7e |
|
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
|
|
||
| if (win && supportsAnchoredContainerQueries(win)) { | ||
| // Chrome 143+: opt into `@container anchored(fallback: …)` queries. | ||
| node.style.setProperty('container-type', 'anchored'); |
There was a problem hiding this comment.
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
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'); |
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
2 participants
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.fix: tightened public type surface for PositioningProps unsupported features
refactored
usePlacementObserverto use a debounce