Skip to content

Conversation

@alexcarpenter
Copy link
Member

@alexcarpenter alexcarpenter commented Oct 21, 2025

Description

Improves UX of uploading an avatar within the profile components, by auto collapsing the ProfileSection upon successful upload/removal. Avoids the user needing to click Cancel to close the section.

BEFORE

Screen.Recording.2025-10-21.at.4.02.05.PM.mov

AFTER

Screen.Recording.2025-10-21.at.4.01.08.PM.mov

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:

Summary by CodeRabbit

  • Improvements
    • Profile sections now automatically collapse after successfully uploading or removing an avatar, streamlining your profile management workflow and reducing screen clutter during updates.

@changeset-bot
Copy link

changeset-bot bot commented Oct 21, 2025

🦋 Changeset detected

Latest commit: 5d826fe

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

This PR includes changesets to release 3 packages
Name Type
@clerk/clerk-js Patch
@clerk/chrome-extension Patch
@clerk/clerk-expo 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

@vercel
Copy link

vercel bot commented Oct 21, 2025

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

Project Deployment Preview Comments Updated (UTC)
clerk-js-sandbox Ready Ready Preview Comment Oct 21, 2025 8:05pm

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Oct 21, 2025

Walkthrough

Both OrganizationProfile and UserProfile ProfileForm components now invoke an optional onSuccess callback after successful avatar upload or removal; a new changeset file for a patch release was added.

Changes

Cohort / File(s) Summary
ProfileForm: Organization & User
packages/clerk-js/src/ui/components/OrganizationProfile/ProfileForm.tsx, packages/clerk-js/src/ui/components/UserProfile/ProfileForm.tsx
After successful avatar upload (setLogo(file)) or removal (setLogo(null)), code calls card.setIdle() then optionally invokes onSuccess?.(). No public signatures changed.
Changeset
.changeset/three-zebras-boil.md
New changeset added for a patch release describing UX improvement around avatar upload/removal; updates package badge/description.

Sequence Diagram(s)

sequenceDiagram
    participant U as User
    participant PF as ProfileForm
    participant S as Storage/API
    participant C as CardState

    U->>PF: initiate avatar upload/remove
    PF->>S: setLogo(file|null)
    alt success
        S-->>PF: success
        PF->>C: card.setIdle()
        note right of PF #DFF2E1: new step
        PF-->>U: onSuccess?()
    else error
        S-->>PF: error
        PF-->>U: handleError
    end
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 I hopped in code with a tiny cheer,
Avatars set, then the callback's near.
Idle card sighs, the flow is neat —
onSuccess whispers, the loop complete.
A carrot-toast to changes small and clear.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed The pull request title "fix(clerk-js): Collapse sections after uploading/removing avatars" is directly related to the main objective and changes in the PR. The changeset summary explicitly mentions "auto-collapsing the profile section upon a successful save" after avatar upload/removal, and the code changes across both ProfileForm components implement this by invoking the onSuccess callback at the appropriate points. The title is clear, specific, and concise, accurately capturing the user-facing behavior improvement without vague language or unnecessary details.
Docstring Coverage ✅ Passed No functions found in the changes. Docstring coverage check skipped.
✨ Finishing touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment
  • Commit unit tests in branch alexcarpenter/collapse-section-on-avatar-upload-remove

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

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 0

🧹 Nitpick comments (1)
.changeset/three-zebras-boil.md (1)

5-5: Use hyphen for compound modifier: "auto-collapse".

The static analysis tool flagged a grammar issue. When "auto" and "collapse" modify the noun phrase "the profile section," they should be hyphenated as a compound adjective.

Apply this diff:

-Improve avatar upload and removal UX to auto collapse the profile section upon successful save.
+Improve avatar upload and removal UX to auto-collapse the profile section upon successful save.
📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

  • Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 7bfa07b and 5d826fe.

📒 Files selected for processing (1)
  • .changeset/three-zebras-boil.md (1 hunks)
🧰 Additional context used
📓 Path-based instructions (1)
.changeset/**

📄 CodeRabbit inference engine (.cursor/rules/monorepo.mdc)

Automated releases must use Changesets.

Files:

  • .changeset/three-zebras-boil.md
🪛 LanguageTool
.changeset/three-zebras-boil.md

[grammar] ~5-~5: Use a hyphen to join words.
Context: ...ove avatar upload and removal UX to auto collapse the profile section upon succes...

(QB_NEW_EN_HYPHEN)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
  • GitHub Check: Analyze (javascript-typescript)
  • GitHub Check: semgrep-cloud-platform/scan
  • GitHub Check: semgrep-cloud-platform/scan

@pkg-pr-new
Copy link

pkg-pr-new bot commented Oct 21, 2025

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7044

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7044

@clerk/elements

npm i https://pkg.pr.new/@clerk/elements@7044

@clerk/clerk-expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/clerk-react

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

@clerk/react-router

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

@clerk/remix

npm i https://pkg.pr.new/@clerk/remix@7044

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/themes

npm i https://pkg.pr.new/@clerk/themes@7044

@clerk/types

npm i https://pkg.pr.new/@clerk/types@7044

@clerk/upgrade

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

@clerk/vue

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

commit: 5d826fe

@alexcarpenter alexcarpenter merged commit ca00881 into main Oct 22, 2025
41 checks passed
@alexcarpenter alexcarpenter deleted the alexcarpenter/collapse-section-on-avatar-upload-remove branch October 22, 2025 13:39
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.

4 participants