Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor(clerk-js): Introduce <Drawer.Confirmation /> component #5376

Conversation

alexcarpenter
Copy link
Member

@alexcarpenter alexcarpenter commented Mar 17, 2025

Description

Introduce <Drawer.Confirmation /> component to be used within Commerce cancel subscription flow.

Screen.Recording.2025-03-17.at.3.42.24.PM.mov

Resolves COM-148

Checklist

  • pnpm test runs as expected.
  • pnpm build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Copy link

vercel bot commented Mar 17, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
clerk-js-sandbox ✅ Ready (Inspect) Visit Preview 💬 Add feedback Mar 17, 2025 8:21pm

Copy link

changeset-bot bot commented Mar 17, 2025

🦋 Changeset detected

Latest commit: c362b57

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 22 packages
Name Type
@clerk/clerk-js Patch
@clerk/types Patch
@clerk/chrome-extension Patch
@clerk/clerk-expo Patch
@clerk/agent-toolkit Patch
@clerk/astro Patch
@clerk/backend Patch
@clerk/elements Patch
@clerk/expo-passkeys Patch
@clerk/express Patch
@clerk/fastify Patch
@clerk/localizations Patch
@clerk/nextjs Patch
@clerk/nuxt Patch
@clerk/react-router Patch
@clerk/clerk-react Patch
@clerk/remix Patch
@clerk/shared Patch
@clerk/tanstack-start Patch
@clerk/testing Patch
@clerk/themes Patch
@clerk/vue Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@alexcarpenter alexcarpenter marked this pull request as ready for review March 17, 2025 19:45
Copy link
Member

@panteliselef panteliselef left a comment

Choose a reason for hiding this comment

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

This looks good, let's improve the issues that I mentioned, must have slipped through on previous PRs.

const Confirmation = React.forwardRef<HTMLDivElement, ConfirmationProps>(({ open, onOpenChange, children }, ref) => {
const prefersReducedMotion = usePrefersReducedMotion();
const { animations: layoutAnimations } = useAppearance().parsedLayout;
const isMotionSafe = !prefersReducedMotion && layoutAnimations === true;
Copy link
Member

Choose a reason for hiding this comment

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

Does it make sense to simply return this from usePrefersReducedMotion ?

Copy link
Member Author

Choose a reason for hiding this comment

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

I tried introducing a useMotionSafe hook that handled both of these hooks but ran into a circular import issue. Can revisit in the future again.

@alexcarpenter alexcarpenter enabled auto-merge (squash) March 17, 2025 20:24
@alexcarpenter alexcarpenter merged commit 9572bf5 into main Mar 17, 2025
30 checks passed
@alexcarpenter alexcarpenter deleted the alexcarpenter/com-148-refactor-cancelfooter-component-within-plandetaildrawer branch March 17, 2025 20:30
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.

3 participants