fix(clerk-js): Add keys targeting avatar buttons

Enables the ability to target the Avatar upload and remove action buttons. Fixes USR-98
clerk · Jul 11, 2023 · b4658b4 · b4658b4
1 parent 090bab6
commit b4658b4
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 2 deletions.
diff --git a/packages/clerk-js/src/ui/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui/customizables/elementDescriptors.ts
@@ -99,6 +99,9 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
 
   'avatarBox',
   'avatarImage',
+  'avatarImageActions',
+  'avatarImageActionsUpload',
+  'avatarImageActionsReset',
 
   'userButtonBox',
   'userButtonOuterIdentifier',

diff --git a/packages/clerk-js/src/ui/elements/AvatarUploader.tsx b/packages/clerk-js/src/ui/elements/AvatarUploader.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import type { LocalizationKey } from '../customizables';
-import { Button, Col, Flex, localizationKeys, Text } from '../customizables';
+import { Button, Col, descriptors, Flex, localizationKeys, Text } from '../customizables';
 import { handleError } from '../utils';
 import { useCardState } from './contexts';
 import { FileDropArea } from './FileDropArea';
@@ -67,8 +67,12 @@ export const AvatarUploader = (props: AvatarUploaderProps) => {
             localizationKey={title}
             variant='regularMedium'
           />
-          <Flex gap={4}>
+          <Flex
+            elementDescriptor={descriptors.avatarImageActions}
+            gap={4}
+          >
             <Button
+              elementDescriptor={descriptors.avatarImageActionsUpload}
               localizationKey={
                 !showUpload
                   ? localizationKeys('userProfile.profilePage.imageFormSubtitle')
@@ -84,6 +88,7 @@ export const AvatarUploader = (props: AvatarUploaderProps) => {
 
             {!!onAvatarRemove && !showUpload && (
               <Button
+                elementDescriptor={descriptors.avatarImageActionsReset}
                 localizationKey={localizationKeys('userProfile.profilePage.imageFormDestructiveActionSubtitle')}
                 isDisabled={card.isLoading}
                 sx={t => ({ color: t.colors.$danger500 })}

diff --git a/packages/types/src/appearance.ts b/packages/types/src/appearance.ts
@@ -238,6 +238,9 @@ export type ElementsConfig = {
 
   avatarBox: WithOptions<never, never, never>;
   avatarImage: WithOptions<never, never, never>;
+  avatarImageActions: WithOptions<never, never, never>;
+  avatarImageActionsUpload: WithOptions<never, never, never>;
+  avatarImageActionsReset: WithOptions<never, never, never>;
 
   // TODO: We can remove "Popover" from these:
   userButtonBox: WithOptions<never, 'open', never>;