Tooltip, Menu, CustomSelectControl v2: Render inside the overlay legacy slot#77758
Draft
ciampo wants to merge 1 commit intomigrate/modal-to-overlay-legacy-slotfrom
Draft
Conversation
…cy slot
Pass \`portalElement={ getOverlayLegacySlot }\` to each Ariakit-backed
overlay so they portal into \`.wp-overlay-legacy\` instead of the
default body container.
These leaf-shaped overlays land in the legacy slot rather than the
prime slot to avoid coupling \`@wordpress/components\` to
\`@wordpress/ui\`. Their z-indexes within the legacy slot's stacking
context (Tooltip 1,000,002, Menu 1,000,000) preserve the existing
Tooltip-above-Popover and Menu-above-Modal ordering against the other
\`@wordpress/components\` overlays.
|
Size Change: +22 B (0%) Total Size: 7.82 MB 📦 View Changed
ℹ️ View Unchanged
|
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?
Stacked on top of #77757.
Pass
portalElement={ getOverlayLegacySlot }to each Ariakit-backed@wordpress/componentsoverlay (Tooltip, Menu, CustomSelectControl v2) so they portal into.wp-overlay-legacyinstead of Ariakit's default container under the document body.Why?
Continuation of the legacy-slot migration. With these leaf overlays in the slot, they share the same stacking context as Modal and Popover and stack correctly against
@wordpress/uioverlays (which will render in the overlay prime slot in a later PR).These leaf-shaped overlays land in the legacy slot rather than the prime slot to avoid coupling
@wordpress/componentsto@wordpress/ui. Their per-class z-indexes within the legacy slot's stacking context (Tooltip 1,000,002, Menu 1,000,000) preserve the existing Tooltip-above-Popover and Menu-above-Modal ordering against the other@wordpress/componentsoverlays.How?
portalElementaccepts a function(defaultElement: HTMLElement) => HTMLElement | null, so passinggetOverlayLegacySlotas the resolver is enough — Ariakit calls it lazily when the overlay needs a portal target.packages/components/src/tooltip/index.tsx: addportalElement={ getOverlayLegacySlot }to<Ariakit.Tooltip>.packages/components/src/menu/popover.tsx: addportalElement={ getOverlayLegacySlot }to<Styled.Menu>(Ariakit menu primitive).packages/components/src/custom-select-control-v2/custom-select.tsx: addportalElement={ getOverlayLegacySlot }to<Styled.SelectPopover>.No prop API changes; consumers can still pass their own
portalElementto override (the prop is exposed by Ariakit, just not by@wordpress/components's wrappers — but if a consumer drops down to the underlying Ariakit primitive, their value still wins).Testing Instructions
Open the post editor. Hover any control with a tooltip. The
.components-tooltipelement should be inside<div class="wp-overlay-legacy">.Open a Menu (e.g. the kebab "More options" menu on a block). The menu surface should be inside
.wp-overlay-legacy.Open a CustomSelectControl v2 dropdown (e.g. typography or border controls in some inspector panels). The popover should be inside
.wp-overlay-legacy.Verify cross-overlay stacking: hover a tooltip-bearing control inside an open Modal. The tooltip should still appear above the modal (z-indexes preserved within the slot).
Run the unit suite:
Testing Instructions for Keyboard
Open a Menu via its trigger button (
EnterorSpace). Use arrow keys to navigate,Escapeto close. Hover focus into a control with a tooltip viaTaband verify the tooltip appears.Use of AI Tools
This PR was authored with assistance from AI tooling (Claude). All code, copy, and structural decisions were reviewed by a human contributor.