feat(ui): add Mosaic Avatar component - #9230
Conversation
🦋 Changeset detectedLatest commit: 168ae35 The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
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 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
@clerk/astro
@clerk/backend
@clerk/chrome-extension
@clerk/clerk-js
@clerk/electron
@clerk/electron-passkeys
@clerk/eslint-plugin
@clerk/expo
@clerk/expo-google-signin
@clerk/expo-passkeys
@clerk/express
@clerk/fastify
@clerk/hono
@clerk/localizations
@clerk/nextjs
@clerk/nuxt
@clerk/react
@clerk/react-router
@clerk/shared
@clerk/tanstack-react-start
@clerk/testing
@clerk/ui
@clerk/upgrade
@clerk/vue
commit: |
API Changes Report
Summary
No API Changes DetectedAll packages have stable APIs with no detected changes. Report generated by Break Check Last ran on |
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds a Mosaic Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
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. Comment |
![coderabbitai[bot]](https://cdn.github.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
packages/ui/src/mosaic/components/avatar/avatar.tsx (1)
22-25: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd explicit return types to exported TypeScript functions.
The Avatar render callback and exported story functions currently rely on inference. Add explicit React element return types, using a type-only
ReactElementimport in the stories file if needed.
packages/ui/src/mosaic/components/avatar/avatar.tsx#L22-L25: annotateMosaicAvatar’s return type.packages/swingset/src/stories/avatar.stories.tsx#L37-L39: annotatePrimary.packages/swingset/src/stories/avatar.stories.tsx#L41-L49: annotateImage.packages/swingset/src/stories/avatar.stories.tsx#L51-L80: annotateSizes.packages/swingset/src/stories/avatar.stories.tsx#L82-L99: annotateShapes.As per coding guidelines, TypeScript functions, especially public APIs, must have explicit return types.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@packages/ui/src/mosaic/components/avatar/avatar.tsx` around lines 22 - 25, Add explicit React element return types to the Avatar render callback in packages/ui/src/mosaic/components/avatar/avatar.tsx and to the exported story functions Primary, Image, Sizes, and Shapes in packages/swingset/src/stories/avatar.stories.tsx; add a type-only ReactElement import in the stories file if needed.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 27-35: Update the prop spread order in the Avatar component’s span
so arbitrary ...rest props are applied before the generated themeProps and
stylex props, ensuring generated data-shape and data-size attributes remain
authoritative. Preserve the existing styling and ref behavior.
---
Nitpick comments:
In `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 22-25: Add explicit React element return types to the Avatar
render callback in packages/ui/src/mosaic/components/avatar/avatar.tsx and to
the exported story functions Primary, Image, Sizes, and Shapes in
packages/swingset/src/stories/avatar.stories.tsx; add a type-only ReactElement
import in the stories file if needed.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 7bfbc4ac-2d25-45e6-9848-035dc7dcebc5
📒 Files selected for processing (10)
.changeset/mosaic-avatar.mdpackages/swingset/src/components/DocsViewer.tsxpackages/swingset/src/lib/registry.tspackages/swingset/src/stories/avatar.mdxpackages/swingset/src/stories/avatar.stories.tsxpackages/ui/src/mosaic/components/avatar/avatar.styles.tspackages/ui/src/mosaic/components/avatar/avatar.test.tsxpackages/ui/src/mosaic/components/avatar/avatar.tsxpackages/ui/src/mosaic/components/avatar/index.tspackages/ui/src/mosaic/styles/index.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)clerk/clerk-docs(manual)clerk/cloudflare-workers(manual)clerk/clerk-ios(auto-detected)clerk/cli(auto-detected)clerk/clerk-android(auto-detected)
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 124-132: Update the canRender effect in the avatar component to
reset canRender whenever delayMs changes: set it true for undefined and false
before starting a defined delay, then retain the timer cleanup and delayed
transition. Add a regression test covering switches between undefined and
delayed values, including restarting the delay after the avatar has rendered.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Repository YAML (base), Organization UI (inherited)
Review profile: CHILL
Plan: Pro Plus
Run ID: 82949fb8-5ccd-4dbd-ad24-e91f98dbbbbd
📒 Files selected for processing (11)
.changeset/mosaic-avatar.md.claude/skills/clerk-monorepo/references/setup-and-footguns.mdpackages/swingset/CLAUDE.mdpackages/swingset/src/lib/registry.tspackages/swingset/src/stories/avatar.mdxpackages/swingset/src/stories/avatar.stories.tsxpackages/ui/src/mosaic/components/avatar/avatar.styles.tspackages/ui/src/mosaic/components/avatar/avatar.test.tsxpackages/ui/src/mosaic/components/avatar/avatar.tsxpackages/ui/src/mosaic/components/avatar/index.tspackages/ui/src/mosaic/styles/index.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)clerk/clerk-docs(manual)clerk/cloudflare-workers(manual)clerk/clerk-ios(auto-detected)clerk/cli(auto-detected)clerk/clerk-android(auto-detected)
🚧 Files skipped from review as they are similar to previous changes (6)
- packages/ui/src/mosaic/components/avatar/index.ts
- packages/ui/src/mosaic/styles/index.ts
- .changeset/mosaic-avatar.md
- packages/ui/src/mosaic/components/avatar/avatar.styles.ts
- packages/swingset/src/lib/registry.ts
- packages/swingset/src/stories/avatar.mdx
| const [canRender, setCanRender] = React.useState(delayMs === undefined); | ||
|
|
||
| React.useEffect(() => { | ||
| if (delayMs === undefined) { | ||
| return; | ||
| } | ||
| const timer = setTimeout(() => setCanRender(true), delayMs); | ||
| return () => clearTimeout(timer); | ||
| }, [delayMs]); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the avatar component around the relevant code.
sed -n '1,220p' packages/ui/src/mosaic/components/avatar/avatar.tsx
echo '--- TEST SEARCH ---'
# Find tests or usages that cover delayMs / canRender behavior.
rg -n "delayMs|canRender|avatar" packages/ui/src -g '*.{test,spec}.{ts,tsx}' -g '*.{test,spec}.tsx' -g '*.{test,spec}.ts' || trueRepository: clerk/javascript
Length of output: 11894
🏁 Script executed:
#!/bin/bash
set -euo pipefail
sed -n '1,220p' packages/ui/src/mosaic/components/avatar/avatar.test.tsxRepository: clerk/javascript
Length of output: 4099
Reset canRender when delayMs changes. Switching from a delayed fallback to undefined leaves the fallback hidden, and changing to a new delay after it has already rendered skips the delay entirely. Reset the state in the effect and add a rerender regression test.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/ui/src/mosaic/components/avatar/avatar.tsx` around lines 124 - 132,
Update the canRender effect in the avatar component to reset canRender whenever
delayMs changes: set it true for undefined and false before starting a defined
delay, then retain the timer cleanup and delayed transition. Add a regression
test covering switches between undefined and delayed values, including
restarting the delay after the avatar has rendered.
Source: Coding guidelines
9ea8651 to
dbf4351
Compare
dbf4351 to
fe6cc36
Compare
Removes the duplicate local status state and its sync effect in Avatar.Image; the preload effect now reports load status directly to the root, avoiding an extra render tick before the image mounts.
2 participants
Description
Adds a new Mosaic
Avatarcomponent built with StyleX, following the Button pilot's authoring pattern.Props:
shape:circle(default) |squaresize:lg|md(default) |sm|xssrc/alt: renders an<img>filling the clipped box; otherwisechildrenrender as the centered fallbackStyling notes:
6pxborder radius for now (does not yet map to a--cl-radius-*token).cl-avatarclass +data-shape/data-sizeattrs, overridable via consumerclassName/style.Swingset
Documented at
/components/avatar(stories + MDX, wired intoregistry.tsandDocsViewer).Preview: https://swingset-git-carp-mosaic-avatar.clerkstage.dev/components/avatar
Checklist
@clerk/uiminor)build:mosaicextracts avatar CSS@stylexjsrules)