fix(selector): clear the trigger by the standard menu gap - #5003
Merged
Conversation
Selector was the only anchored menu in the system with no clearance from its anchor: every explicit placement, and search mode, sat flush against the trigger while DropdownMenu, MultiSelector, ComplexSelector, Popover and Tooltip all pass the standard --spacing-1 offset. The default selected-item overlay keeps its measured geometry and stays flush by design. Adds a Placements story — below/start/end had no coverage, only above.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
meta-cla
Bot
added
the
CLA Signed
Contributor
PR Analysis Report📚 Storybook PreviewView Storybook for this PR 🧪 Sandbox PreviewView Sandbox for this PR Modified ComponentsSelector (@astryxdesign/core) · View in Storybook
Bundle Size Summary
Accessibility AuditStatus: No accessibility violations detected. Generated by PR Enrichment workflow | Storybook | Sandbox | View full report |
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
Selector's menu now clears its trigger by the standard
--spacing-1gap whenever it is not overlaying it — every explicitplacement(above/below/start/end) and search mode. The default selected-item overlay is untouched: it owns its block geometry through a measured negative margin and is meant to sit on the trigger.Also adds a Placements story.
placementshipped in #2770 with a singlePlacementAbovestory;below,startandendhad no coverage at all.Why
Selector was the only anchored menu in the system with no clearance from its anchor. Measured in Chrome 151 against local Storybook, menu edge to trigger edge:
Selector placement="above"Selector hasSearchMultiSelector(reference)DropdownMenu,MultiSelector,ComplexSelector,Popover,Tooltip,HoverCard,TopNavMenu,BaseTypeaheadandPowerSearchall passoffset: spacingVars['--spacing-1']already; Selector passed nothing. The clearance goes on both edges of the placement axis, so it survives aposition-try-fallbacksflip (#4803).placement="above", before and after — the menu's shadow used to bleed into the trigger's top border:The new story, with
startopen (4 px on the inline axis —useLayerputs the offset on the placement axis, sostart/endclear sideways):Risk
Visual only, 4 px, and only for menus that already opened beside the trigger rather than over it. Default Selector renders identically.
Overlap with #4976
That PR carries this same clearance as part of flipping the default placement to below. Landing it here separately leaves #4976 as purely the default-flip decision, which is the part that needs a call rather than a fix.
Test plan
mainand pass here; the overlay regression guard (no--x-marginBlock*, measuredmargin-block-start: -110pxintact) passes both ways.Selectorsuite green (113).below4 px block,above4 px block,start/end4 px inline; default overlay unchanged at-37px.