Skip to content

Navigation Menu

Sign in
Sign up

fix(lab): harden Drawer layer lifecycle - #6073

Draft
imdreamrunner wants to merge 1 commit into
main from
agent/harden-lab-drawer-20260904
Draft

fix(lab): harden Drawer layer lifecycle #6073
imdreamrunner wants to merge 1 commit into
main from
agent/harden-lab-drawer-20260904

Conversation

@imdreamrunner

@imdreamrunner imdreamrunner commented Sep 5, 2026
edited
Loading

Copy link
Copy Markdown
Contributor

Why

Drawer needs to satisfy the shared overlay and native top-layer contracts while it is still in Lab, before any promotion changes are considered. Keeping this hardening separate makes the behavior review independent from the package move.

What

  • Replaces Drawer’s private Escape/LIFO registry and page-level z-index ladder with the shared layer-dismissal stack.
  • Gives each inactive → active cycle a fresh shared-stack identity, so a reopened sibling matches the browser top layer’s last-shown ordering without letting depth/behavior re-registration jump the queue.
  • Keeps a closing Drawer registered until its visual exit finishes, so a second Escape cannot fall through to a lower layer.
  • Uses showModal() for modal Drawer and a manual Popover API host for non-modal Drawer, retaining dialog.show() as the reduced fallback for browsers below the Popover API floor.
  • Preserves the observable <dialog> close event for non-modal consumers after hidePopover().
  • Adds the shared modal focus trap, nested layer depth, localized close label, and stable merged refs.
  • Updates the current overlay/layer records, motion-lab evidence, Storybook examples, and a real-browser guard covering modal, non-modal, and stacked-exit behavior.

Drawer remains in @astryxdesign/lab in this PR. There are no Core exports, import migrations, CLI blocks, or promotion changes here.

Risk

The behavioral change is limited to Drawer lifecycle and stacking. The public props and root <dialog> element are unchanged. Non-modal Drawer remains interactive with the page behind it and retains the previous close event contract.

Testing

  • pnpm lint:strict
  • pnpm build
  • Focused Drawer/layer/focus suites — 95 tests passed
  • pnpm -F @astryxdesign/core build && pnpm -F @astryxdesign/lab typecheck
  • pnpm storybook:build
  • pnpm guard:modal-close --storybook-dir apps/storybook/dist
    • modal and non-modal hosts exit while rendered and hide before the next paint
    • non-modal hosts emit one close event per exit
    • stacked Drawer keeps dismissal ownership through exit
  • pnpm a11y:audit -- --components Drawer — 8 stories, 0 violations
  • pnpm rtl:audit -- --filter Drawer — D4 pass, no coverage gap

A package-filtered pnpm -F @astryxdesign/lab test is not a valid repo-wide invocation: it changes the process cwd to packages/lab, so root-relative CLI and fixture tests resolve paths beneath that package. The directly relevant suites above pass from the repository root.

vercel Bot commented Sep 5, 2026
edited
Loading

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
astryx Ready Ready Preview Sep 5, 2026 6:18am UTC

Request Review

@meta-cla meta-cla Bot added the CLA Signed This label is managed by the Meta Open Source bot. label Sep 5, 2026
@github-actions github-actions Bot added the needs:spec-owner-review Current knowledge records await owner approval label Sep 5, 2026

github-actions Bot commented Sep 5, 2026

Copy link
Copy Markdown
Contributor

PR Analysis Report

Preview availability: Storybook and Sandbox were not published for this CI run.

Modified Components

Layer (@astryxdesign/core)
Metric Before After Delta
Bundle Size (ESM) N/A N/A N/A
Lines of Code N/A 1380 -
Complexity N/A Very High (100) -
Drawer (@astryxdesign/lab)
Metric Before After Delta
Bundle Size (ESM) N/A N/A N/A
Lines of Code N/A 458 -
Complexity N/A High (26) -

Bundle Size Summary

Package Size (ESM) Size (CJS) Gzipped
@astryxdesign/core N/A 4.8KB 1.2KB
@astryxdesign/lab N/A 3.5KB 1.5KB

Accessibility Audit

Status: No accessibility violations detected.

Visual Regression

Status: No visual change across 2 compared shot(s).


Generated by PR Enrichment workflow | View full report

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@cixzhang cixzhang Awaiting requested review from cixzhang cixzhang will be requested when the pull request is marked ready for review cixzhang is a code owner
@josephfarina josephfarina Awaiting requested review from josephfarina josephfarina will be requested when the pull request is marked ready for review josephfarina is a code owner

Assignees

No one assigned

Labels

CLA Signed This label is managed by the Meta Open Source bot. needs:spec-owner-review Current knowledge records await owner approval

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

AltStyle によって変換されたページ (->オリジナル) /