fix(clerk-js): Collapse sections after uploading/removing avatars - #7044

Merged
alexcarpenter merged 2 commits into
mainfrom
alexcarpenter/collapse-section-on-avatar-upload-remove
Oct 22, 2025
Merged

fix(clerk-js): Collapse sections after uploading/removing avatars#7044
alexcarpenter merged 2 commits into
mainfrom
alexcarpenter/collapse-section-on-avatar-upload-remove

Conversation

@alexcarpenter

@alexcarpenteralexcarpenter commented Oct 21, 2025•
edited by coderabbitai Bot
Loading

Copy link
Copy Markdown
Member

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

changeset-botBot commented Oct 21, 2025•
edited
Loading

Copy link
Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch

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

vercelBot commented Oct 21, 2025•
edited
Loading

Copy link
Copy Markdown

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

ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentOct 21, 2025 8:05pm

@coderabbitai

coderabbitaiBot commented Oct 21, 2025•
edited
Loading

Copy link
Copy Markdown
Contributor

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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title Check✅ PassedThe 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✅ PassedNo 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.

@alexcarpenter
alexcarpenter requested a review from a teamOctober 21, 2025 20:05
coderabbitai[bot]
coderabbitaiBot reviewed Oct 21, 2025
View reviewed changes

@coderabbitaicoderabbitaiBot left a comment

Copy link
Copy Markdown
Contributor

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

pkg-pr-newBot commented Oct 21, 2025

Copy link
Copy Markdown

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 mainOct 22, 2025
41 checks passed
@alexcarpenter
alexcarpenter deleted the alexcarpenter/collapse-section-on-avatar-upload-remove branch October 22, 2025 13:39
@clerk-cookieclerk-cookie mentioned this pull request Oct 22, 2025
Merged
NicolasLopes7 pushed a commit that referenced this pull request Oct 23, 2025
@alexcarpenter@NicolasLopes7
fix(clerk-js): Collapse sections after uploading/removing avatars (#7044
3d4c3ba
)
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@tmilewskitmilewskitmilewski approved these changes
+1 more reviewer
@panteliselefpanteliselefpanteliselef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

clerk-js

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@alexcarpenter@tmilewski@panteliselef@clerk-cookie
, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
fix(clerk-js): Collapse sections after uploading/removing avatars - #7044
Merged
alexcarpenter merged 2 commits into
mainfrom 
alexcarpenter/collapse-section-on-avatar-upload-remove
Oct 22, 2025
Merged
fix(clerk-js): Collapse sections after uploading/removing avatars#7044
alexcarpenter merged 2 commits into
mainfrom 
alexcarpenter/collapse-section-on-avatar-upload-remove
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Oct 21, 2025•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
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
changeset-botBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
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
vercelBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentOct 21, 2025 8:05pm
@coderabbitai
coderabbitaiBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title Check✅ PassedThe 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✅ PassedNo 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.
@alexcarpenter
alexcarpenter
requested a review
from a teamOctober 21, 2025 20:05
coderabbitai[bot]
coderabbitaiBot
reviewed
Oct 21, 2025
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
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
pkg-pr-newBot
commented
Oct 21, 2025

Copy link


Copy Markdown

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
mainOct 22, 2025

41 checks passed

@alexcarpenter
alexcarpenter
deleted the

alexcarpenter/collapse-section-on-avatar-upload-remove

branch
October 22, 2025 13:39
@clerk-cookieclerk-cookie
mentioned this pull request
Oct 22, 2025
 Merged

NicolasLopes7 pushed a commit
that referenced
this pull request
Oct 23, 2025
@alexcarpenter@NicolasLopes7
fix(clerk-js): Collapse sections after uploading/removing avatars (#7044
3d4c3ba
)
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@tmilewskitmilewskitmilewski approved these changes

+1 more reviewer

@panteliselefpanteliselefpanteliselef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

clerk-js

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@alexcarpenter@tmilewski@panteliselef@clerk-cookie

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(clerk-js): Collapse sections after uploading/removing avatars - #7044
Merged
alexcarpenter merged 2 commits into
mainfrom 
alexcarpenter/collapse-section-on-avatar-upload-remove
Oct 22, 2025
Merged
fix(clerk-js): Collapse sections after uploading/removing avatars#7044
alexcarpenter merged 2 commits into
mainfrom 
alexcarpenter/collapse-section-on-avatar-upload-remove
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Oct 21, 2025•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
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
changeset-botBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
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
vercelBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentOct 21, 2025 8:05pm
@coderabbitai
coderabbitaiBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title Check✅ PassedThe 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✅ PassedNo 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.
@alexcarpenter
alexcarpenter
requested a review
from a teamOctober 21, 2025 20:05
coderabbitai[bot]
coderabbitaiBot
reviewed
Oct 21, 2025
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
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
pkg-pr-newBot
commented
Oct 21, 2025

Copy link


Copy Markdown

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
mainOct 22, 2025

41 checks passed

@alexcarpenter
alexcarpenter
deleted the

alexcarpenter/collapse-section-on-avatar-upload-remove

branch
October 22, 2025 13:39
@clerk-cookieclerk-cookie
mentioned this pull request
Oct 22, 2025
 Merged

NicolasLopes7 pushed a commit
that referenced
this pull request
Oct 23, 2025
@alexcarpenter@NicolasLopes7
fix(clerk-js): Collapse sections after uploading/removing avatars (#7044
3d4c3ba
)
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@tmilewskitmilewskitmilewski approved these changes

+1 more reviewer

@panteliselefpanteliselefpanteliselef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

clerk-js

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@alexcarpenter@tmilewski@panteliselef@clerk-cookie

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(clerk-js): Collapse sections after uploading/removing avatars - #7044
Merged
alexcarpenter merged 2 commits into
mainfrom 
alexcarpenter/collapse-section-on-avatar-upload-remove
Oct 22, 2025
Merged
fix(clerk-js): Collapse sections after uploading/removing avatars#7044
alexcarpenter merged 2 commits into
mainfrom 
alexcarpenter/collapse-section-on-avatar-upload-remove
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Oct 21, 2025•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
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
changeset-botBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
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
vercelBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentOct 21, 2025 8:05pm
@coderabbitai
coderabbitaiBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title Check✅ PassedThe 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✅ PassedNo 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.
@alexcarpenter
alexcarpenter
requested a review
from a teamOctober 21, 2025 20:05
coderabbitai[bot]
coderabbitaiBot
reviewed
Oct 21, 2025
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
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
pkg-pr-newBot
commented
Oct 21, 2025

Copy link


Copy Markdown

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
mainOct 22, 2025

41 checks passed

@alexcarpenter
alexcarpenter
deleted the

alexcarpenter/collapse-section-on-avatar-upload-remove

branch
October 22, 2025 13:39
@clerk-cookieclerk-cookie
mentioned this pull request
Oct 22, 2025
 Merged

NicolasLopes7 pushed a commit
that referenced
this pull request
Oct 23, 2025
@alexcarpenter@NicolasLopes7
fix(clerk-js): Collapse sections after uploading/removing avatars (#7044
3d4c3ba
)
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@tmilewskitmilewskitmilewski approved these changes

+1 more reviewer

@panteliselefpanteliselefpanteliselef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

clerk-js

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@alexcarpenter@tmilewski@panteliselef@clerk-cookie

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
fix(clerk-js): Collapse sections after uploading/removing avatars - #7044
Merged
alexcarpenter merged 2 commits into
mainfrom 
alexcarpenter/collapse-section-on-avatar-upload-remove
Oct 22, 2025
Merged
fix(clerk-js): Collapse sections after uploading/removing avatars#7044
alexcarpenter merged 2 commits into
mainfrom 
alexcarpenter/collapse-section-on-avatar-upload-remove
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Oct 21, 2025•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
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
changeset-botBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
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
vercelBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentOct 21, 2025 8:05pm
@coderabbitai
coderabbitaiBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title Check✅ PassedThe 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✅ PassedNo 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.
@alexcarpenter
alexcarpenter
requested a review
from a teamOctober 21, 2025 20:05
coderabbitai[bot]
coderabbitaiBot
reviewed
Oct 21, 2025
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
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
pkg-pr-newBot
commented
Oct 21, 2025

Copy link


Copy Markdown

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
mainOct 22, 2025

41 checks passed

@alexcarpenter
alexcarpenter
deleted the

alexcarpenter/collapse-section-on-avatar-upload-remove

branch
October 22, 2025 13:39
@clerk-cookieclerk-cookie
mentioned this pull request
Oct 22, 2025
 Merged

NicolasLopes7 pushed a commit
that referenced
this pull request
Oct 23, 2025
@alexcarpenter@NicolasLopes7
fix(clerk-js): Collapse sections after uploading/removing avatars (#7044
3d4c3ba
)
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@tmilewskitmilewskitmilewski approved these changes

+1 more reviewer

@panteliselefpanteliselefpanteliselef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

clerk-js

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@alexcarpenter@tmilewski@panteliselef@clerk-cookie

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(clerk-js): Collapse sections after uploading/removing avatars - #7044
Merged
alexcarpenter merged 2 commits into
mainfrom 
alexcarpenter/collapse-section-on-avatar-upload-remove
Oct 22, 2025
Merged
fix(clerk-js): Collapse sections after uploading/removing avatars#7044
alexcarpenter merged 2 commits into
mainfrom 
alexcarpenter/collapse-section-on-avatar-upload-remove
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Oct 21, 2025•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
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
changeset-botBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
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
vercelBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentOct 21, 2025 8:05pm
@coderabbitai
coderabbitaiBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title Check✅ PassedThe 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✅ PassedNo 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.
@alexcarpenter
alexcarpenter
requested a review
from a teamOctober 21, 2025 20:05
coderabbitai[bot]
coderabbitaiBot
reviewed
Oct 21, 2025
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
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
pkg-pr-newBot
commented
Oct 21, 2025

Copy link


Copy Markdown

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
mainOct 22, 2025

41 checks passed

@alexcarpenter
alexcarpenter
deleted the

alexcarpenter/collapse-section-on-avatar-upload-remove

branch
October 22, 2025 13:39
@clerk-cookieclerk-cookie
mentioned this pull request
Oct 22, 2025
 Merged

NicolasLopes7 pushed a commit
that referenced
this pull request
Oct 23, 2025
@alexcarpenter@NicolasLopes7
fix(clerk-js): Collapse sections after uploading/removing avatars (#7044
3d4c3ba
)
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@tmilewskitmilewskitmilewski approved these changes

+1 more reviewer

@panteliselefpanteliselefpanteliselef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

clerk-js

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@alexcarpenter@tmilewski@panteliselef@clerk-cookie

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
fix(clerk-js): Collapse sections after uploading/removing avatars - #7044
Merged
alexcarpenter merged 2 commits into
mainfrom 
alexcarpenter/collapse-section-on-avatar-upload-remove
Oct 22, 2025
Merged
fix(clerk-js): Collapse sections after uploading/removing avatars#7044
alexcarpenter merged 2 commits into
mainfrom 
alexcarpenter/collapse-section-on-avatar-upload-remove
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Oct 21, 2025•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
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
changeset-botBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
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
vercelBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentOct 21, 2025 8:05pm
@coderabbitai
coderabbitaiBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title Check✅ PassedThe 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✅ PassedNo 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.
@alexcarpenter
alexcarpenter
requested a review
from a teamOctober 21, 2025 20:05
coderabbitai[bot]
coderabbitaiBot
reviewed
Oct 21, 2025
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
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
pkg-pr-newBot
commented
Oct 21, 2025

Copy link


Copy Markdown

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
mainOct 22, 2025

41 checks passed

@alexcarpenter
alexcarpenter
deleted the

alexcarpenter/collapse-section-on-avatar-upload-remove

branch
October 22, 2025 13:39
@clerk-cookieclerk-cookie
mentioned this pull request
Oct 22, 2025
 Merged

NicolasLopes7 pushed a commit
that referenced
this pull request
Oct 23, 2025
@alexcarpenter@NicolasLopes7
fix(clerk-js): Collapse sections after uploading/removing avatars (#7044
3d4c3ba
)
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@tmilewskitmilewskitmilewski approved these changes

+1 more reviewer

@panteliselefpanteliselefpanteliselef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

clerk-js

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@alexcarpenter@tmilewski@panteliselef@clerk-cookie

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
fix(clerk-js): Collapse sections after uploading/removing avatars - #7044
Merged
alexcarpenter merged 2 commits into
mainfrom 
alexcarpenter/collapse-section-on-avatar-upload-remove
Oct 22, 2025
Merged
fix(clerk-js): Collapse sections after uploading/removing avatars#7044
alexcarpenter merged 2 commits into
mainfrom 
alexcarpenter/collapse-section-on-avatar-upload-remove
Conversation
@alexcarpenter
@alexcarpenteralexcarpenter
commented
Oct 21, 2025•

edited by coderabbitai
Bot
Loading

Copy link


Copy Markdown

Member
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
changeset-botBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

🦋 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
NameType
@clerk/clerk-jsPatch
@clerk/chrome-extensionPatch
@clerk/clerk-expoPatch
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
vercelBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.
ProjectDeploymentPreviewCommentsUpdated (UTC)
clerk-js-sandboxReadyReadyPreviewCommentOct 21, 2025 8:05pm
@coderabbitai
coderabbitaiBot
commented
Oct 21, 2025•

edited

Loading

Copy link


Copy Markdown

Contributor
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 nameStatusExplanation
Description Check✅ PassedCheck skipped - CodeRabbit’s high-level summary is enabled.
Title Check✅ PassedThe 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✅ PassedNo 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.
@alexcarpenter
alexcarpenter
requested a review
from a teamOctober 21, 2025 20:05
coderabbitai[bot]
coderabbitaiBot
reviewed
Oct 21, 2025
View reviewed changes
@coderabbitaicoderabbitaiBot
left a comment


Copy link


Copy Markdown

Contributor
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
pkg-pr-newBot
commented
Oct 21, 2025

Copy link


Copy Markdown

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
mainOct 22, 2025

41 checks passed

@alexcarpenter
alexcarpenter
deleted the

alexcarpenter/collapse-section-on-avatar-upload-remove

branch
October 22, 2025 13:39
@clerk-cookieclerk-cookie
mentioned this pull request
Oct 22, 2025
 Merged

NicolasLopes7 pushed a commit
that referenced
this pull request
Oct 23, 2025
@alexcarpenter@NicolasLopes7
fix(clerk-js): Collapse sections after uploading/removing avatars (#7044
3d4c3ba
)
Sign up for freeto join this conversation on GitHub.
Already have an account?
Sign in to comment

Reviewers

@coderabbitaicoderabbitai[bot]coderabbitai[bot] left review comments
@tmilewskitmilewskitmilewski approved these changes

+1 more reviewer

@panteliselefpanteliselefpanteliselef approved these changes
Reviewers whose approvals may not affect merge requirements

Assignees


No one assigned


Labels

clerk-js

Projects


None yet


Milestone


No milestone


Development

Successfully merging this pull request may close these issues.

4 participants

@alexcarpenter@tmilewski@panteliselef@clerk-cookie