refactor(nav-drawer): Use native dialog for non-relative nav-drawers#2194
refactor(nav-drawer): Use native dialog for non-relative nav-drawers#2194rkaraivanov wants to merge 4 commits intomasterfrom
Conversation
There was a problem hiding this comment.
Pull request overview
Refactors igc-nav-drawer to use the native <dialog> element for non-relative drawers (top-layer rendering) and adds user-interaction close events, aligning with the goal of avoiding z-index/stacking issues and enabling external consumers to react to user-driven closes.
Changes:
- Switch non-relative nav-drawer rendering/behavior to a native modal
<dialog>and addkeepOpenOnEscape. - Emit
igcClosing(cancelable) andigcClosedfor user-interaction closes; export the component event map type. - Update Storybook and unit tests to cover dialog-based behavior and the new close events.
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 5 comments.
| File | Description |
|---|---|
| stories/nav-drawer.stories.ts | Adds Storybook action handlers and a keepOpenOnEscape control; updates drawer item content markup. |
| src/index.ts | Exports IgcNavDrawerComponentEventMap from the package entrypoint. |
| src/components/nav-drawer/nav-drawer.ts | Refactors non-relative mode to native <dialog>, adds close events + keepOpenOnEscape, and adjusts rendering logic. |
| src/components/nav-drawer/nav-drawer.spec.ts | Updates a11y/DOM tests and adds behavior/event coverage for the native dialog implementation. |
| private _handleOpenState(): void { | ||
| if (this._isRelative) { | ||
| return; | ||
| } | ||
|
|
||
| this.open ? this._dialog?.showModal() : this._dialog?.close(); | ||
| } |
There was a problem hiding this comment.
_handleOpenState() calls dialog.close() immediately when open becomes false. Because close() hides the <dialog> (removes it from the top layer), the existing CSS slide-out/opacity transitions on [part='base'] (driven by :host([open])) can’t run on close anymore, which is likely a behavioral regression. To preserve the drawer’s closing transition, keep the dialog open while you toggle the host open attribute, then close the native dialog only after the transition finishes (or replace the CSS transitions with an explicit animation that works with dialog close).
- Render correctly on first update with initial open state - Correctly sync native dialog open state when changing drawer positioning
Description
Type of Change
Related Issues
Closes #2122, #2186, #2187
Checklist