fix(drawer): restore transition by default; opt-out via prefers-reduced-motion: reduce

[paanSinghCoder]

Description

#717 moved the per-side transition: transform rules out of .drawerPopup-{right,left,top,bottom} and into @media (prefers-reduced-motion: no-preference), switching the pattern from "default-on, opt-out for reduce" to "opt-in only when no-preference matches."

That's brittle: when the browser doesn't reliably report no-preference, the transition never registers, so the drawer snaps in/out instead of sliding. The bug only affects the four side popups; the backdrop kept its unconditional transition: opacity and continued to animate.

This PR restores the pre-#717 pattern:

• transition: transform 450ms cubic-bezier(...) declared inline on each .drawerPopup-{side} rule
• A single @media (prefers-reduced-motion: reduce) block at the bottom that disables transitions for .drawerPopup and .backdrop

Same a11y intent as #717, more robust default. Matches the pattern used by Dialog (whose transitions are also unconditional with no reduce opt-out today — separate question whether to add one there).

Type of Change

• Bug fix (non-breaking change that fixes an issue)

How Has This Been Tested?

• Built the package and consumed in a downstream Vite app where the right-side drawer previously snapped in. After this change it slides in over ~450ms with the same easing curve as the existing backdrop fade.
• Verified the prefers-reduced-motion: reduce override still disables transitions (tested via Chrome DevTools > Rendering > Emulate CSS media feature).

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• My changes generate no new warnings

Related Issues

Regression introduced by #717.

🤖 Generated with Claude Code

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	May 13, 2026 4:30am

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 4487ddac-3e81-4e08-9479-173f275a8248

📥 Commits

Reviewing files that changed from the base of the PR and between 055019e and c2fa3d1.

📒 Files selected for processing (1)

• packages/raystack/components/drawer/drawer.module.css

---

📝 Walkthrough

Walkthrough

The drawer.module.css file is updated to refactor how drawer animations are defined and how motion preferences are respected. Four directional drawer classes (.drawerPopup-right, .drawerPopup-left, .drawerPopup-top, .drawerPopup-bottom) each receive a base transition: transform 450ms cubic-bezier(0.32, 0.72, 0, 1) rule. The reduced-motion handling is inverted: the previous @media (prefers-reduced-motion: no-preference) rule is replaced with @media (prefers-reduced-motion: reduce), which explicitly sets transition: none on .drawerPopup and .backdrop when reduced motion is preferred.

Suggested reviewers

• rsbh
• rohilsurana
• rohanchkrabrty

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: restoring drawer transitions by default and providing an opt-out for reduced motion preferences.
Description check	✅ Passed	The description is directly related to the changeset, explaining the regression from #717, the fix rationale, testing approach, and accessibility implications.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}