feat(clerk-js,types): Add id's to the organizationPreview descriptor …

…to allow better customization
clerk · Nov 20, 2023 · 906ef54 · 906ef54
1 parent 52ff8fe
commit 906ef54
Show file tree

Hide file tree

Showing 5 changed files with 9 additions and 5 deletions.
diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/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}

diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/OrganizationSwitcherTrigger.tsx b/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}

diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx b/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserInvitationSuggestionList.tsx
@@ -120,7 +120,7 @@ const InvitationPreview = withCardStateProvider(
         })}
       >
         <OrganizationPreview
-          elementId='organizationSwitcher'
+          elementId='organizationSwitcherTrigger'
           avatarSx={t => ({ margin: `0 calc(${t.space.$3}/2)` })}
           organization={publicOrganizationData}
           size='sm'

diff --git a/packages/clerk-js/src/ui/components/OrganizationSwitcher/UserMembershipList.tsx b/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'

diff --git a/packages/types/src/elementIds.ts b/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';