chore(clerk-js,types): Add descriptor ids to UserMembershipList and OrganizationSwitcherTrigger (#5881)

Author: alexcarpenter

.changeset/smart-horses-wish.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Add descriptor ids to `UserMembershipList` and `OrganizationSwitcherTrigger` elements to improve styling experience.

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

@@ -30,6 +30,7 @@ export const OrganizationSwitcherTrigger = withAvatarShimmer(
     return (
       <Button
         elementDescriptor={descriptors.organizationSwitcherTrigger}
+        elementId={descriptors.organizationSwitcherTrigger.setId(organization ? 'organization' : 'personal')}
         variant='ghost'
         colorScheme='neutral'
         hoverAsFocus

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

@@ -77,6 +77,7 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
       {currentOrg && !hidePersonal && (
         <PreviewButton
           elementDescriptor={descriptors.organizationSwitcherPreviewButton}
+          elementId={descriptors.organizationSwitcherPreviewButton.setId('personal')}
           icon={SwitchArrowRight}
           onClick={onPersonalWorkspaceClick}
           role='menuitem'
@@ -92,6 +93,7 @@ export const UserMembershipList = (props: UserMembershipListProps) => {
         <PreviewButton
           key={organization.id}
           elementDescriptor={descriptors.organizationSwitcherPreviewButton}
+          elementId={descriptors.organizationSwitcherPreviewButton.setId('organization')}
           icon={SwitchArrowRight}
           onClick={() => onOrganizationClick(organization)}
           role='menuitem'

packages/types/src/appearance.ts

@@ -312,7 +312,7 @@ export type ElementsConfig = {
   userButtonPopoverFooter: WithOptions;
   userButtonPopoverFooterPagesLink: WithOptions<'terms' | 'privacy'>;
 
-  organizationSwitcherTrigger: WithOptions<never, 'open'>;
+  organizationSwitcherTrigger: WithOptions<'personal' | 'organization', 'open'>;
   organizationSwitcherTriggerIcon: WithOptions<never, 'open'>;
   organizationSwitcherPopoverRootBox: WithOptions;
   organizationSwitcherPopoverCard: WithOptions;
@@ -323,7 +323,7 @@ export type ElementsConfig = {
   organizationSwitcherPopoverActionButton: WithOptions<
     'manageOrganization' | 'createOrganization' | 'switchOrganization'
   >;
-  organizationSwitcherPreviewButton: WithOptions;
+  organizationSwitcherPreviewButton: WithOptions<'personal' | 'organization'>;
   organizationSwitcherInvitationAcceptButton: WithOptions;
   organizationSwitcherPopoverActionButtonIconBox: WithOptions<'manageOrganization' | 'createOrganization'>;
   organizationSwitcherPopoverActionButtonIcon: WithOptions<'manageOrganization' | 'createOrganization'>;