Skip to content

fix(#3630): drawer exit animation, close button alignment, docs updates#3813

Merged
ArakTaiRoth merged 1 commit intodevfrom
tom/drawer-refinements
Apr 28, 2026
Merged

fix(#3630): drawer exit animation, close button alignment, docs updates#3813
ArakTaiRoth merged 1 commit intodevfrom
tom/drawer-refinements

Conversation

@twjeffery
Copy link
Copy Markdown
Collaborator

@twjeffery twjeffery commented Apr 13, 2026

Summary

  • Enable exit animation on drawer close (was disappearing instantly due to visibility: hidden)
  • Replace hardcoded transition durations with motion tokens (motion-duration-medium-1, motion-duration-short-4, motion-curve-expressive)
  • Nudge close icon button up for better alignment with heading text
  • Update docs example to use alignment="start" on button group (was end)
  • Move drawer category from content-layout to structure-navigation in docs

Fixes #3630

Steps needed to test

  1. Run the React playground (npm run serve:prs:react)
  2. Navigate to bugs/3630
  3. Open and close the right drawer. Verify it slides out smoothly (not just disappearing).
  4. Open the right drawer with actions. Verify buttons are left-aligned and compact.
  5. Open the left drawer. Verify slide-in from left and slide-out animation.
  6. Open the bottom drawer. Verify slide-up and slide-down animation.
  7. Open the long heading drawer. Verify close button alignment with wrapped heading.
  8. Check that the heading and close button are vertically aligned in all drawers.
Screen.Recording.2026-04-13.at.3.35.53.PM.mov
image

@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 13, 2026

Deploy Preview for benji-docs-previews ready!

Name Link
🔨 Latest commit 6f4de1e
🔍 Latest deploy log https://app.netlify.com/projects/benji-docs-previews/deploys/69e017df136e130008e90ed7
😎 Deploy Preview https://deploy-preview-3813--benji-docs-previews.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@twjeffery
Copy link
Copy Markdown
Collaborator Author

Design token dependency

The drawer content vertical padding fix (16px to 24px) is tracked in a separate design-tokens PR:

@twjeffery twjeffery force-pushed the tom/drawer-refinements branch 2 times, most recently from 0af2ec8 to d7a21a7 Compare April 14, 2026 03:13
@twjeffery twjeffery marked this pull request as ready for review April 14, 2026 03:21
@twjeffery twjeffery force-pushed the tom/drawer-refinements branch from d7a21a7 to 1f6e6ab Compare April 14, 2026 21:31
Comment thread apps/prs/angular/src/routes/bugs/3630/bug3630.component.html
Comment thread apps/prs/angular/src/routes/bugs/3630/bug3630.component.ts
Comment thread libs/web-components/src/components/drawer/Drawer.svelte
@twjeffery twjeffery force-pushed the tom/drawer-refinements branch 2 times, most recently from 45683db to 6a3fe1a Compare April 14, 2026 23:45
Comment thread libs/web-components/src/components/drawer/drawer.spec.ts
Comment thread libs/react-components/specs/drawer.browser.spec.tsx Outdated
Comment thread libs/react-components/specs/pushdrawer.browser.spec.tsx Outdated
Copy link
Copy Markdown
Collaborator

@bdfranck bdfranck left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I looked at the changes...

  • ✅ The drawer close animation works on left, right, and bottom Drawers
  • ✅ The animations use design tokens
  • ✅ Docs: The "With actions" example Drawer has a left-aligned button group
  • ✅ Docs: The component category is "Structure and Navigation"

Looks good! I just have one small comment about the button.

Comment thread libs/web-components/src/components/drawer/Drawer.svelte
@twjeffery twjeffery force-pushed the tom/drawer-refinements branch 2 times, most recently from 755a2cc to 6f4de1e Compare April 15, 2026 22:57
@twjeffery twjeffery requested a review from ArakTaiRoth April 15, 2026 23:01
Copy link
Copy Markdown
Collaborator

@bdfranck bdfranck left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good to me! 👍

@twjeffery twjeffery force-pushed the tom/drawer-refinements branch from 6f4de1e to e9bfa2e Compare April 28, 2026 03:32
@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 28, 2026

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-04-28 19:33 UTC

@github-actions
Copy link
Copy Markdown

github-actions Bot commented Apr 28, 2026

Preview removed

All preview folders cleaned from gh-pages branch.

@ArakTaiRoth ArakTaiRoth merged commit 857b068 into dev Apr 28, 2026
5 checks passed
@ArakTaiRoth ArakTaiRoth deleted the tom/drawer-refinements branch April 28, 2026 19:33
@chrisolsen
Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 2.0.0-dev.17 🎉

The release is available on:

Your semantic-release bot 📦🚀

@chrisolsen
Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 7.0.0-dev.10 🎉

The release is available on:

Your semantic-release bot 📦🚀

@chrisolsen
Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 2.0.0-dev.6 🎉

The release is available on:

Your semantic-release bot 📦🚀

@chrisolsen
Copy link
Copy Markdown
Collaborator

🎉 This PR is included in version 5.0.0-dev.8 🎉

The release is available on:

Your semantic-release bot 📦🚀

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Drawer refinements

4 participants