fix(layer): mirror anchor-positioned popovers in RTL#3486
Open
AKnassa wants to merge 1 commit into
Open
Conversation
getPositionArea mapped the logical placement/alignment API to physical
position-area keywords with no direction awareness, so every context-mode
popover (DropdownMenu, MoreMenu, Selector, Typeahead, date inputs, nav
menus) opened toward the physically-LTR side under RTL — and on engines
that mis-resolve position-area's implied alignment via the popover's
inherited direction, the menu landed at the viewport mirror of its
trigger ('far from control').
useLayer now resolves the trigger's computed direction at show() time
(sanctioned getComputedStyle pattern — works for both the CSS direction
property and the dir attribute), mirrors the physical keywords under
RTL, and emits an explicit physical justify-self in RTL only to remove
the engine's direction-sensitive implied-alignment resolution. LTR
output is byte-identical. Tokenizer and Carousel null the RTL
justify-self defensively (they override positioning inline).
Logical placement semantics documented across useLayer/Popover/Tooltip/
HoverCard docs (en/dense/zh).
|
@AKnassa is attempting to deploy a commit to the Meta Open Source Team on Vercel. A member of the Team first needs to authorize it. |
meta-cla
Bot
added
the
CLA Signed
AKnassa
requested review from
cixzhang,
ejhammond,
imdreamrunner,
josephfarina,
marie-lucas,
nynexman4464 and
thedjpetersen
as code owners
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
1 participant
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.
What this does
Makes dropdown menus and every other popover open on the correct side for right-to-left languages. Before, a menu in an RTL page opened as if the page were left-to-right — and on some browser versions it landed far away from its button entirely.
Why
Anyone using the design system in an RTL context got menus growing the wrong way or detached from their trigger. Since all popovers share one positioning engine, this was systemic — not just DropdownMenu.
Fixes #3389
What changed
useLayer) now reads the trigger's text direction when a popover opens and mirrors its position accordingly. Works for both ways of setting direction (thedirattribute and the CSSdirectionproperty — the latter is what this issue's reproduction uses).How to see it
Run Storybook and open Core/DropdownMenu → RTL: both menus (one per direction mechanism) open right-aligned to their trigger and grow left. Compare with any other DropdownMenu story for the unchanged LTR behavior. Screenshots attached below.
Good to know (scope)
left: anchor(start)(still RTL-wrong; this PR only guards it), side-placement entry animations still slide from the physical side (cosmetic), and layers opened by timers may paint their very first RTL open one frame early (bounded; tooltips' centered default is unaffected).