feat(clerk-js): Add the checkmark avatar icon

clerk · Nov 28, 2023 · 62d0729 · 62d0729
1 parent dea80de
commit 62d0729
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 3 deletions.
diff --git a/packages/clerk-js/src/ui.retheme/components/UserButton/UserButtonPopover.tsx b/packages/clerk-js/src/ui.retheme/components/UserButton/UserButtonPopover.tsx
@@ -2,9 +2,9 @@ import type { ActiveSessionResource } from '@clerk/types';
 import React from 'react';
 
 import { useCoreSession, useCoreUser, useEnvironment, useUserButtonContext } from '../../contexts';
-import { descriptors, localizationKeys } from '../../customizables';
+import { descriptors, Icon, localizationKeys } from '../../customizables';
 import { Action, Actions, PopoverCard, PreviewButton, RootBox, SecondaryActions, UserPreview } from '../../elements';
-import { Plus, SignOut, SwitchArrowRight } from '../../icons';
+import { CheckmarkFilled, Plus, SignOut, SwitchArrowRight } from '../../icons';
 import type { PropsOfComponent } from '../../styledSystem';
 import { MultiSessionActions, SingleSessionActions } from './SessionActions';
 import { useMultisessionActions } from './useMultisessionActions';
@@ -133,6 +133,13 @@ export const UserButtonPopover = React.forwardRef<HTMLDivElement, UserButtonPopo
               padding: `${t.space.$4} ${t.space.$5}`,
             })}
             size='sm'
+            icon={
+              <Icon
+                icon={CheckmarkFilled}
+                sx={t => ({ width: t.sizes.$3x5, height: t.sizes.$3x5 })}
+              />
+            }
+            iconSx={t => ({ left: 'unset', right: 0, color: t.colors.$primary500 })}
           />
           {authConfig.singleSessionMode ? (
             <SingleSessionActions

diff --git a/packages/clerk-js/src/ui.retheme/customizables/elementDescriptors.ts b/packages/clerk-js/src/ui.retheme/customizables/elementDescriptors.ts
@@ -157,6 +157,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
   'userPreviewAvatarContainer',
   'userPreviewAvatarBox',
   'userPreviewAvatarImage',
+  'userPreviewAvatarIcon',
   'userPreviewTextContainer',
   'userPreviewMainIdentifier',
   'userPreviewSecondaryIdentifier',

diff --git a/packages/clerk-js/src/ui.retheme/elements/UserPreview.tsx b/packages/clerk-js/src/ui.retheme/elements/UserPreview.tsx
@@ -15,6 +15,7 @@ import { UserAvatar } from './UserAvatar';
 export type UserPreviewProps = Omit<PropsOfComponent<typeof Flex>, 'title' | 'elementId'> & {
   size?: 'lg' | 'md' | 'sm';
   icon?: React.ReactNode;
+  iconSx?: ThemableCssProp;
   badge?: React.ReactNode;
   imageUrl?: string | null;
   rounded?: boolean;
@@ -50,6 +51,7 @@ export const UserPreview = (props: UserPreviewProps) => {
     size = 'md',
     showAvatar = true,
     icon,
+    iconSx,
     rounded = true,
     imageUrl: imageUrlProp,
     badge,
@@ -101,7 +103,14 @@ export const UserPreview = (props: UserPreviewProps) => {
               rounded={rounded}
             />
 
-            {icon && <Flex sx={{ position: 'absolute', left: 0, bottom: 0 }}>{icon}</Flex>}
+            {icon && (
+              <Flex
+                elementDescriptor={descriptors.userPreviewAvatarIcon}
+                sx={[{ position: 'absolute', left: 0, bottom: 0 }, iconSx]}
+              >
+                {icon}
+              </Flex>
+            )}
           </Flex>
         ) : (
           // Reserve layout space when avatar is not visible

diff --git a/packages/clerk-js/src/ui.retheme/icons/checkmark-filled.svg b/packages/clerk-js/src/ui.retheme/icons/checkmark-filled.svg
diff --git a/packages/clerk-js/src/ui.retheme/icons/index.ts b/packages/clerk-js/src/ui.retheme/icons/index.ts
@@ -50,3 +50,4 @@ export { default as User } from './user.svg';
 export { default as UserAdd } from './userAdd.svg';
 export { default as Check } from './check.svg';
 export { default as ArrowUpDown } from './arrow-up-down.svg';
+export { default as CheckmarkFilled } from './checkmark-filled.svg';
diff --git a/packages/types/src/appearance.retheme.ts b/packages/types/src/appearance.retheme.ts
@@ -274,6 +274,7 @@ export type ElementsConfig = {
   userPreviewAvatarContainer: WithOptions<UserPreviewId>;
   userPreviewAvatarBox: WithOptions<UserPreviewId>;
   userPreviewAvatarImage: WithOptions<UserPreviewId>;
+  userPreviewAvatarIcon: WithOptions<UserPreviewId>;
   userPreviewTextContainer: WithOptions<UserPreviewId>;
   userPreviewMainIdentifier: WithOptions<UserPreviewId>;
   userPreviewSecondaryIdentifier: WithOptions<UserPreviewId>;