chore(clerk-js,types): Add descriptor to user preview idetifier text (#5878)

Author: alexcarpenter

.changeset/purple-ghosts-win.md

@@ -0,0 +1,6 @@
+---
+'@clerk/clerk-js': patch
+'@clerk/types': patch
+---
+
+Add element descriptor to the text element rendered within UserPreview component.

packages/clerk-js/src/ui/customizables/elementDescriptors.ts

@@ -215,6 +215,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'userPreviewAvatarIcon',
   'userPreviewTextContainer',
   'userPreviewMainIdentifier',
+  'userPreviewMainIdentifierText',
   'userPreviewSecondaryIdentifier',
 
   'organizationPreview',

packages/clerk-js/src/ui/elements/UserPreview.tsx

@@ -153,14 +153,15 @@ export const UserPreview = (props: UserPreviewProps) => {
         >
           {previewTitle && (
             <Text
+              elementDescriptor={descriptors.userPreviewMainIdentifierText}
+              elementId={descriptors.userPreviewMainIdentifierText.setId(elementId)}
               as='span'
               truncate
               sx={{ fontWeight: 'inherit' }}
             >
               {previewTitle}
             </Text>
           )}
-
           {badge}
         </Text>
 

packages/types/src/appearance.ts

@@ -347,6 +347,7 @@ export type ElementsConfig = {
   userPreviewAvatarIcon: WithOptions<UserPreviewId>;
   userPreviewTextContainer: WithOptions<UserPreviewId>;
   userPreviewMainIdentifier: WithOptions<UserPreviewId>;
+  userPreviewMainIdentifierText: WithOptions<UserPreviewId>;
   userPreviewSecondaryIdentifier: WithOptions<UserPreviewId>;
 
   organizationPreview: WithOptions<OrganizationPreviewId>;