feat(clerk-js,types): Update OrganizationPreview appearance descriptors for OrganizationSwitcher (#2158)

* feat(clerk-js,types): Add id's to the organizationPreview descriptor to allow better customization

* feat(clerk-js): Apply changes to ui.retheme

* chore(repo): Added Changeset

* fix(clerk-js): Use the correct element id for the invitation preview

Author: octoper

.changeset/wise-lions-type.md

@@ -0,0 +1,9 @@
+---
+'@clerk/clerk-js': major
+'@clerk/types': patch
+---
+
+Introducing some changes and some addition for the appearence descriptors for the organization preview in `<OrganizationSwitcher/>`:
+- `.cl-organizationPreview__organizationSwitcher` has been renamed to `.cl-organizationPreview__organizationSwitcherTrigger`.
+- `.cl-organizationPreview__organizationSwitcherListedOrganization` was added to allow you to customize the appearance of all the listed organization previews.
+- `.cl-organizationPreview__organizationSwitcherActiveOrganizationn` was added to allow you to customize the appearance of the active organization.

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

@@ -141,7 +141,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
             {currentOrg ? (
               <>
                 <OrganizationPreview
-                  elementId={'organizationSwitcher'}
+                  elementId={'organizationSwitcherActiveOrganization'}
                   gap={4}
                   organization={currentOrg}
                   user={user}

packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx

@@ -40,7 +40,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
       >
         {organization && (
           <OrganizationPreview
-            elementId={'organizationSwitcher'}
+            elementId={'organizationSwitcherTrigger'}
             gap={3}
             size={'sm'}
             organization={organization}

packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx

@@ -120,7 +120,7 @@ const InvitationPreview = withCardStateProvider(
         })}
       >
         <OrganizationPreview
-          elementId='organizationSwitcher'
+          elementId='organizationSwitcherListedOrganization'
           avatarSx={t => ({ margin: `0 calc(${t.space.$3}/2)` })}
           organization={publicOrganizationData}
           size='sm'

packages/clerk-js/src/ui.retheme/components/OrganizationSwitcher/UserMembershipList.tsx

@@ -94,7 +94,7 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
           role='menuitem'
         >
           <OrganizationPreview
-            elementId='organizationSwitcher'
+            elementId='organizationSwitcherListedOrganization'
             avatarSx={t => ({ margin: `0 calc(${t.space.$3}/2)` })}
             organization={organization}
             size='sm'

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

@@ -141,7 +141,7 @@ export const OrganizationSwitcherPopover = React.forwardRef<HTMLDivElement, Orga
             {currentOrg ? (
               <>
                 <OrganizationPreview
-                  elementId={'organizationSwitcher'}
+                  elementId={'organizationSwitcherActiveOrganization'}
                   gap={4}
                   organization={currentOrg}
                   user={user}

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

@@ -40,7 +40,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
       >
         {organization && (
           <OrganizationPreview
-            elementId={'organizationSwitcher'}
+            elementId={'organizationSwitcherTrigger'}
             gap={3}
             size={'sm'}
             organization={organization}

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

@@ -120,7 +120,7 @@ const InvitationPreview = withCardStateProvider(
         })}
       >
         <OrganizationPreview
-          elementId='organizationSwitcher'
+          elementId='organizationSwitcherListedOrganization'
           avatarSx={t => ({ margin: `0 calc(${t.space.$3}/2)` })}
           organization={publicOrganizationData}
           size='sm'

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

@@ -94,7 +94,7 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
           role='menuitem'
         >
           <OrganizationPreview
-            elementId='organizationSwitcher'
+            elementId='organizationSwitcherListedOrganization'
             avatarSx={t => ({ margin: `0 calc(${t.space.$3}/2)` })}
             organization={organization}
             size='sm'

packages/types/src/elementIds.ts

@@ -38,7 +38,11 @@ export type ProfileSectionId =
 export type ProfilePageId = 'account' | 'security' | 'organizationSettings' | 'organizationMembers';
 
 export type UserPreviewId = 'userButton' | 'personalWorkspace';
-export type OrganizationPreviewId = 'organizationSwitcher' | 'organizationList';
+export type OrganizationPreviewId =
+  | 'organizationSwitcherTrigger'
+  | 'organizationList'
+  | 'organizationSwitcherListedOrganization'
+  | 'organizationSwitcherActiveOrganization';
 
 export type FooterActionId = 'havingTrouble' | 'alternativeMethods' | 'signUp' | 'signIn';