Skip to content

feat(ui): resize the Mosaic Avatar scale and key square radius off size - #9736

Merged
alexcarpenter merged 1 commit into
mainfrom
carp/mosaic-avatar-sizing
Sep 11, 2026
Merged

alexcarpenter merged 1 commit into
mainfrom
carp/mosaic-avatar-sizing

Conversation

@alexcarpenter

Copy link
Copy Markdown
Member

Description

Reworks the Mosaic Avatar size scale and makes the square shape's radius follow the size.

size before after square radius
xs 20 24 4px
sm 28 32 6px
md 36 38 8px
lg 40 48 8px
xl 48 removed

xl is dropped since it became identical to the new lg. Font sizes scale with the boxes to keep the ~0.4x ratio. Each size sets a private --_cl-avatar-radius var that the square shape reads; circle is unchanged and fit keeps its previous 6px radius. Swingset stories and docs are updated to match.

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 Sep 11, 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 Sep 11, 2026 7:30pm UTC
swingset Ready Ready Preview Sep 11, 2026 7:30pm UTC

Request Review

@changeset-bot

changeset-bot Bot commented Sep 11, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: f202c37

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 Sep 11, 2026 •

Copy link
Copy Markdown
Contributor

Review Change StackReview Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Repository YAML (base), Organization UI (inherited)

Review profile: ASSERTIVE

Plan: Team

Run ID: f380efd6-30a0-4298-8c1e-99850449331b

📥 Commits

Reviewing files that changed from the base of the PR and between c44a814 and f202c37.

📒 Files selected for processing (6)
  • .changeset/mosaic-avatar-sizing.md
  • packages/swingset/src/stories/avatar.mdx
  • packages/swingset/src/stories/avatar.stories.tsx
  • packages/ui/src/mosaic/components/avatar/avatar.styles.ts
  • packages/ui/src/mosaic/components/avatar/avatar.tsx
  • packages/ui/src/mosaic/tokens.stylex.ts
🔗 Linked repositories identified

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

  • clerk/clerk_go (manual)
  • clerk/dashboard (manual)
  • clerk/accounts (manual)
  • clerk/backoffice (manual)
  • clerk/clerk (manual)

Included review availability: 8 reviews are currently available. Your included PR review attempts over the past 7 days set your current allowance at 10 reviews per hour.


📝 Walkthrough

Walkthrough

The avatar component no longer supports the xl size. Avatar sizes through lg now use revised dimensions, font sizes, and private radius variables. Square avatars consume the size-specific radius. Stories and documentation were updated to match the supported sizes. An empty Changesets file was added.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: austincalvelage

Merge Risk: ⚪ Minimal · up to f202c

The sizing update affects an internal Mosaic component and does not introduce a published API compatibility or release-metadata issue.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 4 files. (2 skipped: 2 … Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly summarizes the main changes: resizing the Mosaic Avatar scale and making the square radius depend on avatar size.
Description check ✅ Passed The description directly explains the Avatar size changes, removal of xl, size-based square radius, and related story updates.
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.
Full details: Docstring Coverage

Explanation

Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 2 functions across 4 files. (2 skipped: 2 unsupported.)

  • Fix all pre-merge checks with AI

Warning

Linked repositories: Your configuration references 7 linked repositories, but your current plan allows 5. Analyzed clerk/clerk_go, clerk/dashboard, clerk/accounts, clerk/backoffice, clerk/clerk, skipped clerk/clerk-docs, clerk/cloudflare-workers.


Comment @coderabbitai help to get the list of available commands.

@pkg-pr-new

pkg-pr-new Bot commented Sep 11, 2026

Copy link
Copy Markdown

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/electron

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

@clerk/electron-passkeys

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

@clerk/eslint-plugin

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

@clerk/expo

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

@clerk/expo-google-signin

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: f202c37

@github-actions

Copy link
Copy Markdown
Contributor

API Changes Report

Generated by Break Check on 2026-09-11T19:32:07.232Z

Summary

Metric Count
Packages analyzed 19
Packages with changes 0
🔴 Breaking changes 0
🟡 Non-breaking changes 0
🟢 Additions 0

No API Changes Detected

All packages have stable APIs with no detected changes.


Report generated by Break Check

Last ran on f202c37.

@alexcarpenter
alexcarpenter enabled auto-merge (squash) September 11, 2026 23:35
@alexcarpenter
alexcarpenter merged commit 08e12ce into main Sep 11, 2026
82 of 84 checks passed
@alexcarpenter
alexcarpenter deleted the carp/mosaic-avatar-sizing branch September 11, 2026 23:37

This branch was successfully deployed

2 active deployments
Preview – swingset — f202c371 Deployed Sep 11, 2026 by vercel[bot]
Preview – clerk-js-sandbox — f202c371 Deployed Sep 11, 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