feat(clerk-js,types): Update OrganizationPreview appearance descripto…

…rs 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
clerk · Nov 23, 2023 · 75b9625 · 75b9625
1 parent e569dea
commit 75b9625
Show file tree

Hide file tree

Showing 10 changed files with 22 additions and 9 deletions.
diff --git a/.changeset/wise-lions-type.md b/.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.
diff --git a/...s/clerk-js/src/ui.retheme/components/OrganizationSwitcher/OrganizationSwitcherPopover.tsx b/...s/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}

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

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

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

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='organizationSwitcherListedOrganization'
           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';