fix(Avatar): support display names using emoji and multi-byte

src/components/Avatar/Avatar.module.css

@@ -16,6 +16,8 @@
 
   color: var(--eds-theme-color-text-neutral-strong);
   background-color: var(--eds-theme-color-background-neutral-medium);
+
+  white-space: nowrap;
 }
 
 .avatar:focus-visible {

src/components/Avatar/Avatar.stories.ts

@@ -70,3 +70,42 @@ export const UsingInitials: StoryObj<Args> = {
     },
   },
 };
+
+export const UsingEmoji: StoryObj<Args> = {
+  args: {
+    variant: 'initials',
+    user: {
+      fullName: 'Young Yarn Lad',
+      displayName: '🧶👦🏽',
+      id: '12345',
+      hasArbitraryMetadata: true,
+    },
+    size: 'lg',
+  },
+};
+
+export const WhenImageVariantMissingSource: StoryObj<Args> = {
+  args: {
+    variant: 'image',
+    user: {
+      fullName: 'Young Yarn Lad',
+      id: '12345',
+      hasArbitraryMetadata: true,
+      moreMetadata: 123,
+    },
+    size: 'lg',
+  },
+};
+
+export const UsingMultibyteUnicode: StoryObj<Args> = {
+  args: {
+    variant: 'image',
+    user: {
+      fullName: '你好世界',
+      id: '12345',
+      hasArbitraryMetadata: true,
+      moreMetadata: 123,
+    },
+    size: 'lg',
+  },
+};

src/components/Avatar/Avatar.tsx

@@ -12,6 +12,10 @@ export type UserData = {
    * User ID associated with the attached user
    */
   id?: string | number;
+  /**
+   * The display shortcut for the user name. Can be initials, emoji, or other text symbols (recommended max: 2)
+   */
+  displayName?: string;
   /**
    * Additional data for an attached user (email, etc.)
    */
@@ -56,7 +60,7 @@ function getInitials(fromName: string): string {
    * - User's name has a middle name or initial: John C. Smith
    * - User's Name has dashes in it
    */
-  return fromName
+  const initials = fromName
     .split(' ')
     .map((part) => part[0])
     .reduce(
@@ -65,6 +69,7 @@ function getInitials(fromName: string): string {
       '',
     )
     .toUpperCase();
+  return initials;
 }
 
 /**
@@ -94,18 +99,26 @@ export const Avatar = ({
     ariaLabel ??
     `Avatar for ${user ? '' : 'unknown '}user ${user?.fullName || ''}`;
 
+  // use the display name if prop is provided. Otherwise, try to calculate initials
+  let avatarDisplayName = user ? getInitials(user.fullName) : '??';
+
+  if (user?.displayName) {
+    avatarDisplayName = user.displayName;
+  }
+
   return (
     <div
       aria-label={descriptiveLabel}
       className={componentClassName}
       role="img"
       {...other}
     >
-      {variant === 'initials' && (user ? getInitials(user.fullName) : '??')}
+      {variant === 'initials' && avatarDisplayName}
       {variant === 'icon' && <Icon name="person" purpose="decorative" />}
-      {variant === 'image' && (
+      {variant === 'image' && src && (
         <img alt="user" className={styles['avatar__image']} src={src} />
       )}
+      {variant === 'image' && !src && avatarDisplayName}
     </div>
   );
 };

src/components/Avatar/__snapshots__/Avatar.test.ts.snap

@@ -100,6 +100,16 @@ exports[`<Avatar /> Square story renders snapshot 1`] = `
 </div>
 `;
 
+exports[`<Avatar /> UsingEmoji story renders snapshot 1`] = `
+<div
+  aria-label="Avatar for user Young Yarn Lad"
+  class="avatar avatar--circle avatar--lg avatar--initials"
+  role="img"
+>
+  🧶👦🏽
+</div>
+`;
+
 exports[`<Avatar /> UsingImage story renders snapshot 1`] = `
 <div
   aria-label="Avatar for unknown user "
@@ -124,6 +134,26 @@ exports[`<Avatar /> UsingInitials story renders snapshot 1`] = `
 </div>
 `;
 
+exports[`<Avatar /> UsingMultibyteUnicode story renders snapshot 1`] = `
+<div
+  aria-label="Avatar for user 你好世界"
+  class="avatar avatar--circle avatar--lg avatar--image"
+  role="img"
+>
+  你
+</div>
+`;
+
+exports[`<Avatar /> WhenImageVariantMissingSource story renders snapshot 1`] = `
+<div
+  aria-label="Avatar for user Young Yarn Lad"
+  class="avatar avatar--circle avatar--lg avatar--image"
+  role="img"
+>
+  YL
+</div>
+`;
+
 exports[`<Avatar /> WithCustomLabel story renders snapshot 1`] = `
 <div
   aria-label="Custom label for avatar"