Skip to content

fix(ComplexSelector): keep the popup gap when opening above - #4820

Open
AKnassa wants to merge 1 commit into
facebook:mainfrom
AKnassa:rocky/issue-4803-complexselector-above-gap
Open

fix(ComplexSelector): keep the popup gap when opening above#4820
AKnassa wants to merge 1 commit into
facebook:mainfrom
AKnassa:rocky/issue-4803-complexselector-above-gap

Conversation

@AKnassa

@AKnassa AKnassa commented Aug 8, 2026

Copy link
Copy Markdown
Contributor

What this does

When a ComplexSelector menu opens upward, it now keeps the same small gap above the field that it already keeps when opening downward.

Why

With placement="above" the popup sat flush against the field, so the popup and the field read as one merged block (#4803). The same component already spaced correctly when opening downward, and Popover spaced correctly in both directions.

What changed

  • The popup layer now carries the 4px gap on both block edges, matching Popover, so the clearance holds whichever way it opens.
  • A regression test locks the gap in on both edges.
  • A changelog entry for the next @astryxdesign/core patch release.

How to see it

Render a ComplexSelector with placement="above" near the bottom of the page and open it. Measured in a browser before and after: the space between the popup and the field goes from 0px to 4px, identical to Popover at the same placement. placement="below" is unchanged at 4px.

Fixes #4803

The popup layer only set marginBlockStart, which spaces a popup
opening downward but leaves placement="above" flush against the
trigger (computed margin-block-end was 0px via useLayer's margin
reset). Both block edges now carry the gap, mirroring Popover's
gap style, so the clearance holds whichever way the layer opens.

Fixes facebook#4803
@vercel

vercel Bot commented Aug 8, 2026

Copy link
Copy Markdown

@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 meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label Aug 8, 2026
@github-actions github-actions Bot added community Authored by a community contributor (not on the eng/design team) needs:code-review High-risk change (new package/component/API) — needs human code review before merge needs:design-review Affects visuals — Design should review labels Aug 8, 2026
@AKnassa
AKnassa marked this pull request as ready for review August 8, 2026 03:48
@github-actions

github-actions Bot commented Aug 8, 2026

Copy link
Copy Markdown
Contributor

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

Modified Components

ComplexSelector (@astryxdesign/core) · View in Storybook
Metric Before After Delta
Bundle Size (ESM) N/A N/A N/A
Lines of Code N/A 354 -
Complexity N/A Very High (31) -

Bundle Size Summary

Package Size (ESM) Size (CJS) Gzipped
@astryxdesign/core N/A 4.7KB 1.2KB

Accessibility Audit

Status: No accessibility violations detected.


Generated by PR Enrichment workflow | Storybook | Sandbox | View full report

github-actions Bot added a commit that referenced this pull request Aug 8, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed This label is managed by the Meta Open Source bot. community Authored by a community contributor (not on the eng/design team) needs:code-review High-risk change (new package/component/API) — needs human code review before merge needs:design-review Affects visuals — Design should review

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Bug] ComplexSelector popup has no offset when placement="above"

1 participant