feat(ui): add Avatar button composition - #9378
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: b90fcfe The changes in this PR will be included in the next version bump. This PR includes changesets to release 0 packagesWhen 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 |
952b17c to
4bf4850
Compare
15a0874 to
ddc1588
Compare
4bf4850 to
c3ce60e
Compare
ddc1588 to
de3c66b
Compare
de3c66b to
3295120
Compare
c3ce60e to
a3b0bd3
Compare
a3b0bd3 to
ef07a60
Compare
3295120 to
ab14db8
Compare
ef07a60 to
5a6ccdb
Compare
ab14db8 to
f711e0e
Compare
austincalvelage
changed the title
austincalvelage
changed the title
austincalvelage
changed the title
API Changes Report
Summary
No API Changes DetectedAll packages have stable APIs with no detected changes. Report generated by Break Check Last ran on |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Repository YAML (base), Organization UI (inherited) Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (3)
🔗 Linked repositories identifiedCodeRabbit considers these linked repositories for cross-repo context during reviews:
🚧 Files skipped from review as they are similar to previous changes (3)
📝 WalkthroughWalkthroughThe Avatar component now supports rendering onto custom elements such as buttons. It adds the optional Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 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 @.changeset/avatar-button-block.md:
- Around line 1-2: Add a non-empty Changeset entry for `@clerk/ui` declaring a
minor release and summarize the newly public Avatar.Root.render, Avatar.Icon,
and AvatarIconProps APIs.
In `@packages/swingset/src/stories/avatar.mdx`:
- Line 5: Rework the Avatar documentation page to follow the compound-component
structure: use the sections Example, Usage, Parts, and Styling in that exact
order. Replace the existing Playground, Props, and Examples structure, and
remove all Preview and PropTable usage while preserving the Avatar component
details.
🪄 Autofix
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: 87c92f21-8289-4db6-b64c-5d034cf31131
📒 Files selected for processing (12)
.changeset/avatar-button-block.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/components/icon/icon.test.tsxpackages/ui/src/mosaic/icons/registry.tsxpackages/ui/src/mosaic/styles/index.tspackages/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)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.
🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win
Add a release entry for @clerk/ui.
This PR adds public Avatar.Root.render, Avatar.Icon, and AvatarIconProps. An empty Changeset will not create a package version or changelog entry for consumers. Add an @clerk/ui minor release entry with a concise summary.
Based on learnings, empty Changesets are acceptable only when no published package requires release metadata. As per coding guidelines, “Use Changesets for version management and changelogs.”
🤖 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 @.changeset/avatar-button-block.md around lines 1 - 2, Add a non-empty
Changeset entry for `@clerk/ui` declaring a minor release and summarize the newly
public Avatar.Root.render, Avatar.Icon, and AvatarIconProps APIs.
Sources: Coding guidelines, Learnings
| # Avatar | ||
|
|
||
| Avatar represents a user or entity as an image, falling back to a blank placeholder when the image is missing or fails to load. It is a compound component: `Avatar.Root` clips and sizes the box, `Avatar.Image` renders the picture once it loads, and `Avatar.Fallback` holds the space until then. | ||
| Avatar represents a user or entity as an image, falling back to a blank placeholder when the image is missing or fails to load. It is a compound component: `Avatar.Root` positions and sizes the box, `Avatar.Image` renders the picture once it loads, `Avatar.Fallback` holds the space until then, and `Avatar.Icon` adds an optional corner affordance. |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | 🏗️ Heavy lift
Use the required compound-component documentation archetype.
Avatar is a compound component, but this page uses Playground, Props, and Examples. It also uses <Preview> and <PropTable>. Replace the page structure with Example, Usage, Parts, then Styling. Remove <Preview> and <PropTable>.
As per coding guidelines, “Compound Components pages must use the exact section order: Example, Usage, Parts, then Styling, with no <Preview> or <PropTable>.”
🤖 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/swingset/src/stories/avatar.mdx` at line 5, Rework the Avatar
documentation page to follow the compound-component structure: use the sections
Example, Usage, Parts, and Styling in that exact order. Replace the existing
Playground, Props, and Examples structure, and remove all Preview and PropTable
usage while preserving the Avatar component details.
Source: Coding guidelines
alexcarpenter
left a comment
alexcarpenter
left a comment
There was a problem hiding this comment.
Stacked a PR with some suggested changes here #9413
- when using a button trigger, we'd likely just use a Headless Button vs our styled Button to avoid the overrides you needed to add
- icon viewbox is wonky, we shouldn't need to override viewboxes and keep them consistent at 0 0 16 16. not sure whats up with the pen icon, looks like it came from ceramic which has some goofy stuff going on with strokes
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
.changeset/mosaic-avatar-interactive-styles.md (1)
1-3: 📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick winAdd a non-empty
@clerk/uiChangeset for the Avatar changes.All three Avatar-related Changesets are empty. The existing
@clerk/uiChangeset covers unrelated billing changes. Remove the empty placeholders after adding the Avatar package bump and release note.🤖 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 @.changeset/mosaic-avatar-interactive-styles.md around lines 1 - 3, Replace the empty front matter in mosaic-avatar-interactive-styles.md with a non-empty `@clerk/ui` Changeset that bumps the package appropriately and includes a release note describing the Avatar changes, then remove the other empty Avatar-related Changeset placeholders while preserving the unrelated billing Changeset.Source: Coding guidelines
packages/ui/src/mosaic/components/avatar/avatar.styles.ts (1)
80-96: 🎯 Functional Correctness | 🟡 Minor | ⚡ Quick winConsume
--cl-color-avatar-iconinAvatar.Icon.
themeProps('avatar-icon')only adds the.cl-avatar-iconclass. No avatar-icon selector or--cl-color-avatar-icondeclaration exists. Define the token and apply it as the iconcolorso theme overrides affect the affordance.🤖 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.styles.ts` around lines 80 - 96, Update the Avatar icon styles in the icon definition to declare the --cl-color-avatar-icon token and apply it to the icon’s color property. Ensure Avatar.Icon consumes this token so theme overrides affect the affordance, while preserving the existing layout and border styles.
🤖 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.styles.ts`:
- Around line 26-38: Update the interactive avatar styles to reset native button
rendering by adding appearance: none and a transparent background alongside the
existing border, outline, and cursor rules. Keep the current focus-visible and
disabled-state behavior unchanged.
In `@packages/ui/src/mosaic/components/avatar/avatar.tsx`:
- Around line 39-47: Update AvatarProps and the AvatarRoot render path so
AvatarProps.render only accepts interactive element targets, or require an
explicit interactive condition before applying styles.interactive. Use the
existing interactive value derived from render and the AvatarRoot/useRender
symbols, preserving non-interactive avatar behavior without pointer or focus
styling.
---
Outside diff comments:
In @.changeset/mosaic-avatar-interactive-styles.md:
- Around line 1-3: Replace the empty front matter in
mosaic-avatar-interactive-styles.md with a non-empty `@clerk/ui` Changeset that
bumps the package appropriately and includes a release note describing the
Avatar changes, then remove the other empty Avatar-related Changeset
placeholders while preserving the unrelated billing Changeset.
In `@packages/ui/src/mosaic/components/avatar/avatar.styles.ts`:
- Around line 80-96: Update the Avatar icon styles in the icon definition to
declare the --cl-color-avatar-icon token and apply it to the icon’s color
property. Ensure Avatar.Icon consumes this token so theme overrides affect the
affordance, while preserving the existing layout and border styles.
🪄 Autofix
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: de7da63b-6028-4393-a2ec-7f0eee681957
📒 Files selected for processing (6)
.changeset/mosaic-avatar-interactive-styles.mdpackages/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/icons/registry.tsx
🔗 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 (1)
- packages/ui/src/mosaic/icons/registry.tsx
b90fcfe to
99436f5
Compare
2 participants
Description
https://swingset-git-austin-user-profile-03-avatar-button.clerkstage.dev/components/avatar
Adds support for
Avatarbutton this will eventually be used in a component like<AvatarUploader />as the trigger.rendersupport toAvatar.Root, allowing the avatar to render as a button or dialog trigger without an additional wrapper.Avatar.Iconpenglyph to the Mosaic icon registry.--cl-color-avatar-icontoken so the edit icon can be themed independently.