feat(clerk-js): Allow customization of OrganizationProfile through OrganizationSwitcher (#1801)

Expose organizationProfileProps from switcher and deprecate UserButton appearance

Author: panteliselef

.changeset/chilled-parrots-pump.md

@@ -0,0 +1,8 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+- Introduce organizationProfileProps as prop in `<OrganizationSwitcher/>`.
+- Introduce appearance in userProfileProps in `<UserButton/>`.
+- Deprecate the usage of `appearance.userProfile` in <UserButton/>`.

packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx

@@ -52,6 +52,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
       navigateOrganizationProfile,
       navigateAfterSelectPersonal,
       navigateAfterSelectOrganization,
+      organizationProfileProps,
     } = useOrganizationSwitcherContext();
 
     const user = useCoreUser();
@@ -93,6 +94,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
         return navigateOrganizationProfile();
       }
       return openOrganizationProfile({
+        ...organizationProfileProps,
         afterLeaveOrganizationUrl,
         //@ts-expect-error
         __unstable_manageBillingUrl,

packages/clerk-js/src/ui/components/UserButton/useMultisessionActions.tsx

@@ -1,3 +1,4 @@
+import { deprecatedObjectProperty } from '@clerk/shared';
 import type { ActiveSessionResource, UserButtonProps, UserResource } from '@clerk/types';
 
 import { windowNavigate } from '../../../utils/windowNavigate';
@@ -44,7 +45,18 @@ export const useMultisessionActions = (opts: UseMultisessionActionsParams) => {
     }
 
     // The UserButton can also accept an appearance object for the nested UserProfile modal
-    openUserProfile({ ...opts.userProfileProps, appearance: opts.appearance?.userProfile });
+    if (opts.appearance?.userProfile) {
+      deprecatedObjectProperty(
+        opts.appearance,
+        'userProfile',
+        'Use `<UserButton userProfileProps={{appearance: {...}}} />` instead.',
+      );
+    }
+    openUserProfile({
+      appearance: opts.appearance?.userProfile,
+      // Prioritize the appearance of `userProfileProps`
+      ...opts.userProfileProps,
+    });
     return opts.actionCompleteCallback?.();
   };
 

packages/types/src/clerk.ts

@@ -795,13 +795,18 @@ export type UserButtonProps = {
    * These options serve as overrides and will be merged with the global `appearance`
    * prop of ClerkProvided (if one is provided)
    */
-  appearance?: UserButtonTheme & { userProfile?: UserProfileTheme };
+  appearance?: UserButtonTheme & {
+    /**
+     * @deprecated Use `userProfileProps.appearance` instead.
+     */
+    userProfile?: UserProfileTheme;
+  };
 
   /*
    * Specify options for the underlying <UserProfile /> component.
    * e.g. <UserButton userProfileProps={{additionalOAuthScopes: {google: ['foo', 'bar'], github: ['qux']}}} />
    */
-  userProfileProps?: Pick<UserProfileProps, 'additionalOAuthScopes'>;
+  userProfileProps?: Pick<UserProfileProps, 'additionalOAuthScopes' | 'appearance'>;
 };
 
 type PrimitiveKeys<T> = {
@@ -886,6 +891,12 @@ export type OrganizationSwitcherProps = {
    * prop of ClerkProvided (if one is provided)
    */
   appearance?: OrganizationSwitcherTheme;
+
+  /*
+   * Specify options for the underlying <OrganizationProfile /> component.
+   * e.g. <UserButton userProfileProps={{appearance: {...}}} />
+   */
+  organizationProfileProps?: Pick<OrganizationProfileProps, 'appearance'>;
 };
 
 export type OrganizationListProps = {