Skip to content

refactor(mosaic): make card footer buttons full width by default - #10589

Merged
alexcarpenter merged 1 commit into
mainfrom
carp/mosaic-card-footer-button-width
Nov 2, 2026
Merged

alexcarpenter merged 1 commit into
mainfrom
carp/mosaic-card-footer-button-width

Conversation

@alexcarpenter

@alexcarpenter alexcarpenter commented Nov 2, 2026 •

Copy link
Copy Markdown
Member

Description

Buttons in Card.Footer are now full width by default, through ButtonContext, so footers no longer set fullWidth on each button. Nearly every footer button already did.

  • Pass fullWidth={false} to opt out. The Waitlist sign-in link and the reverification pending button now do.
  • Dialog.Popup and Popover.Popup reset ButtonContext, because context crosses portals and a popup opened from a footer would otherwise stretch its own buttons.
  • That reset also stops an outer disabled from reaching buttons inside a popup, for example from ProviderButtonGroup. This is a behavior change.
  • Three Swingset examples had footer buttons that weren't full width and now are: the card error story, the dialog Decline/Accept story and the reverification harness.

The changeset is empty because Card isn't exported from the @clerk/mosaic entry point.

Swingset card error example, with the same viewport and error state:

Before After
Before: content-width footer buttons After: full-width footer buttons

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:

@vercel

vercel Bot commented Nov 2, 2026 •

Copy link
Copy Markdown

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

Project Deployment Actions Updated
clerk-js-sandbox Ready Ready Preview Nov 2, 2026 7:52pm UTC
swingset Ready Ready Preview Nov 2, 2026 7:52pm UTC

Request Review

@changeset-bot

changeset-bot Bot commented Nov 2, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 9923337

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

This PR includes changesets to release 0 packages

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

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

@coderabbitai

coderabbitai Bot commented Nov 2, 2026 •

Copy link
Copy Markdown
Contributor

Review in Change Stack →

No actionable comments were generated in the recent review.

Recent review info
Run configuration
Commits

Reviewing files that changed from the base of the PR and between aa9a6a3 and 9923337.

Files selected for processing: 44
  • .changeset/mosaic-card-footer-button-width.md
  • packages/mosaic/src/blocks/confirmation/confirmation.tsx
  • packages/mosaic/src/blocks/destructive/destructive.tsx
  • packages/mosaic/src/components/button/button.context.ts
  • packages/mosaic/src/components/button/button.tsx
  • packages/mosaic/src/components/card/card.test.tsx
  • packages/mosaic/src/components/card/card.tsx
  • packages/mosaic/src/components/dialog/__tests__/dialog.test.tsx
  • packages/mosaic/src/components/dialog/dialog.tsx
  • packages/mosaic/src/components/popover/popover.test.tsx
  • packages/mosaic/src/components/popover/popover.tsx
  • packages/mosaic/src/features/api-keys/create-api-key.dialog.tsx
  • packages/mosaic/src/features/create-organization/create-organization.view.tsx
  • packages/mosaic/src/features/organization-list/organization-list.view.tsx
  • packages/mosaic/src/features/organization-profile/organization-profile-members-panel/organization-profile-invite-members.dialog.tsx
  • packages/mosaic/src/features/organization-profile/organization-profile-profile-section/organization-profile-edit-name.dialog.tsx
  • packages/mosaic/src/features/organization-profile/organization-profile-profile-section/organization-profile-edit-slug.dialog.tsx
  • packages/mosaic/src/features/reverification/reverification.view.tsx
  • packages/mosaic/src/features/reverification/steps/reverification-backup-code.tsx
  • packages/mosaic/src/features/reverification/steps/reverification-help.tsx
  • packages/mosaic/src/features/reverification/steps/reverification-otp.tsx
  • packages/mosaic/src/features/reverification/steps/reverification-passkey.tsx
  • packages/mosaic/src/features/reverification/steps/reverification-password.tsx
  • packages/mosaic/src/features/user-profile/user-profile-active-devices-section/user-profile-device-details.dialog.tsx
  • packages/mosaic/src/features/user-profile/user-profile-email-section/user-profile-add-email.dialog.tsx
  • packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-authenticator.view.tsx
  • packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-sms.view.tsx
  • packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-backup-codes.view.tsx
  • packages/mosaic/src/features/user-profile/user-profile-passkeys-section/user-profile-rename-passkey.dialog.tsx
  • packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-edit-password.dialog.tsx
  • packages/mosaic/src/features/user-profile/user-profile-phone.steps.tsx
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/user-profile-edit-name.dialog.tsx
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/user-profile-edit-username.dialog.tsx
  • packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/user-profile-solana-wallet.view.tsx
  • packages/mosaic/src/features/waitlist/waitlist.view.tsx
  • packages/swingset/src/app/(clerk)/live/misc/reverification/page.tsx
  • packages/swingset/src/stories/card.component.mdx
  • packages/swingset/src/stories/card.component.stories.tsx
  • packages/swingset/src/stories/dialog.component.mdx
  • packages/swingset/src/stories/dialog.component.stories.tsx
  • packages/swingset/src/stories/flow.component.stories.tsx
  • packages/swingset/src/stories/popover.component.mdx
  • packages/swingset/src/stories/popover.component.stories.tsx
  • packages/swingset/src/stories/table.stories.tsx
Linked repositories identified

CodeRabbit considers these linked repositories for cross-repo context during reviews:

Files with no reviewable changes: 26
  • packages/mosaic/src/features/user-profile/user-profile-password-section/user-profile-edit-password.dialog.tsx
  • packages/swingset/src/app/(clerk)/live/misc/reverification/page.tsx
  • packages/mosaic/src/features/organization-list/organization-list.view.tsx
  • packages/mosaic/src/blocks/destructive/destructive.tsx
  • packages/mosaic/src/features/create-organization/create-organization.view.tsx
  • packages/mosaic/src/features/reverification/steps/reverification-password.tsx
  • packages/mosaic/src/features/user-profile/user-profile-active-devices-section/user-profile-device-details.dialog.tsx
  • packages/mosaic/src/features/reverification/steps/reverification-otp.tsx
  • packages/mosaic/src/features/user-profile/user-profile-web3-wallets-section/user-profile-solana-wallet.view.tsx
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/user-profile-edit-username.dialog.tsx
  • packages/mosaic/src/features/organization-profile/organization-profile-members-panel/organization-profile-invite-members.dialog.tsx
  • packages/swingset/src/stories/popover.component.mdx
  • packages/mosaic/src/features/user-profile/user-profile-profile-section/user-profile-edit-name.dialog.tsx
  • packages/mosaic/src/features/reverification/steps/reverification-passkey.tsx
  • packages/mosaic/src/blocks/confirmation/confirmation.tsx
  • packages/mosaic/src/features/user-profile/user-profile-phone.steps.tsx
  • packages/swingset/src/stories/table.stories.tsx
  • packages/mosaic/src/features/user-profile/user-profile-passkeys-section/user-profile-rename-passkey.dialog.tsx
  • packages/mosaic/src/features/organization-profile/organization-profile-profile-section/organization-profile-edit-name.dialog.tsx
  • packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-authenticator.view.tsx
  • packages/mosaic/src/features/reverification/steps/reverification-help.tsx
  • packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-add-sms.view.tsx
  • packages/mosaic/src/features/user-profile/user-profile-email-section/user-profile-add-email.dialog.tsx
  • packages/mosaic/src/features/user-profile/user-profile-mfa-section/user-profile-backup-codes.view.tsx
  • packages/mosaic/src/features/organization-profile/organization-profile-profile-section/organization-profile-edit-slug.dialog.tsx
  • packages/mosaic/src/features/reverification/steps/reverification-backup-code.tsx

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 1 remain after this review.

Walkthrough

Buttons now resolve fullWidth from an explicit prop or button context, with false as the fallback. Card.Footer supplies a full-width default that children can opt out of. Dialog and popover popups provide empty button defaults to their content. The changes remove explicit width settings from application buttons and examples, and add tests for footer defaults and popup isolation.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Suggested reviewers: austincalvelage, ephem, kylemac

Merge Risk: Minimal · up to 99233

Footer buttons default to full width, while popups isolate button defaults. No merge-blocking issue was established.

Pre-merge checks: Passed 4 · Failed 1

Failed Failed checks: 1 warning

Check name Status Explanation Resolution
Docstring Coverage Warning Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documenta… Write docstrings for the functions missing them to satisfy the coverage threshold.
Passed Passed checks: 4 passed
Check name Status Explanation
Title check Passed The title clearly and concisely describes the main change: Card footer buttons now use full width by default.
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.
Description check Passed The description accurately explains the Card.Footer full-width default, ButtonContext changes, popup context resets, opt-out behavior, affected examples, and empty changeset.
Full details: Docstring Coverage

Explanation

Docstring coverage is 33.33% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff with cyclomatic complexity of at least 2. Documentation-only edits and deletions within surviving functions are included; unchanged diff context and fully deleted functions are excluded. Analyzed 3 functions across 15 files. (3 skipped: 3 unsupported.)

Resolution

Write docstrings for the functions missing them to satisfy the coverage threshold.

  • Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

Warning

Linked repositories: Some configured repositories could not be included in this review. Cross-repository analysis may be incomplete. Please check linked-repository access and settings.

@pkg-pr-new

pkg-pr-new Bot commented Nov 2, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@10589

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@10589

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@10589

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@10589

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@10589

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@10589

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@10589

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@10589

@clerk/expo-biometrics

npm i https://pkg.pr.new/@clerk/expo-biometrics@10589

@clerk/expo-google-signin

npm i https://pkg.pr.new/@clerk/expo-google-signin@10589

@clerk/expo-native-components

npm i https://pkg.pr.new/@clerk/expo-native-components@10589

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@10589

@clerk/express

npm i https://pkg.pr.new/@clerk/express@10589

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@10589

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@10589

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@10589

@clerk/mosaic

npm i https://pkg.pr.new/@clerk/mosaic@10589

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@10589

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@10589

@clerk/react

npm i https://pkg.pr.new/@clerk/react@10589

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@10589

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@10589

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@10589

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@10589

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@10589

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@10589

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@10589

commit: 9923337

@alexcarpenter
alexcarpenter merged commit 821215c into main Nov 2, 2026
58 checks passed
@alexcarpenter
alexcarpenter deleted the carp/mosaic-card-footer-button-width branch November 2, 2026 20:28

This branch was successfully deployed

2 active deployments
Preview – swingset — 99233372 Deployed Nov 2, 2026 by vercel[bot]
Preview – clerk-js-sandbox — 99233372 Deployed Nov 2, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants