From 562d950e58bb000922ec8bdcdff81df965b1ad69 Mon Sep 17 00:00:00 2001
From: Lars Rickert <lars.rickert@mail.schwarz>
Date: Wed, 8 Jan 2025 12:13:37 +0100
Subject: [PATCH 1/3] refactor(OnyxAvatar): update default initials

---
 .../components/OnyxAvatar/OnyxAvatar.ct.tsx   | 16 ++++++++++----
 .../OnyxAvatar/OnyxAvatar.stories.ts          |  7 ++-----
 .../src/components/OnyxAvatar/OnyxAvatar.vue  | 21 +++++++------------
 .../src/components/OnyxAvatar/types.ts        |  5 +++++
 .../modules/OnyxUserMenu/OnyxUserMenu.vue     |  3 ++-
 .../OnyxNavBar/modules/OnyxUserMenu/types.ts  |  3 ++-
 6 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.ct.tsx b/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.ct.tsx
index 74e0e9f47..5b9c2b433 100644
--- a/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.ct.tsx
+++ b/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.ct.tsx
@@ -44,9 +44,11 @@ test.describe("Screenshot tests", () => {
     columns: ["default", "truncation"],
     rows: AVATAR_SIZES,
     component: (column, row) => (
-      <OnyxAvatar label="Custom content" size={row}>
-        {column === "truncation" ? "+999999" : "+42"}
-      </OnyxAvatar>
+      <OnyxAvatar
+        label="Custom content"
+        size={row}
+        initials={column === "truncation" ? "+999999" : "+42"}
+      />
     ),
   });
 });
@@ -60,7 +62,7 @@ test("should contain correct initials", async ({ mount }) => {
   });
 
   // ASSERT
-  await expect(component).toContainText("AB");
+  await expect(component).toContainText("AD");
 
   // ACT
   await component.update({ props: { label: "abcd" } });
@@ -73,6 +75,12 @@ test("should contain correct initials", async ({ mount }) => {
 
   // ASSERT
   await expect(component).toContainText("A");
+
+  // ACT
+  await component.update({ props: { label: "abcd", initials: "HI" } });
+
+  // ASSERT
+  await expect(component).toContainText("HI");
 });
 
 test("should show custom image", async ({ mount, page }) => {
diff --git a/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.stories.ts b/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.stories.ts
index 488925b1c..4e68a4346 100644
--- a/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.stories.ts
+++ b/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.stories.ts
@@ -7,9 +7,6 @@ import OnyxAvatar from "./OnyxAvatar.vue";
 const meta: Meta<typeof OnyxAvatar> = {
   title: "Basic/Avatar",
   component: OnyxAvatar,
-  argTypes: {
-    default: { control: { type: "text" } },
-  },
 };
 
 export default meta;
@@ -36,11 +33,11 @@ export const WithImage = {
 } satisfies Story;
 
 /**
- * This example shows an avatar with custom content instead of the default initials.
+ * This example shows an avatar with custom initials instead of the automatically detected ones.
  */
 export const WithCustomInitials = {
   args: {
     label: "4 more avatars",
-    default: "+4",
+    initials: "+4",
   },
 } satisfies Story;
diff --git a/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.vue b/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.vue
index 672342977..fb8d9892d 100644
--- a/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.vue
+++ b/packages/sit-onyx/src/components/OnyxAvatar/OnyxAvatar.vue
@@ -6,18 +6,13 @@ const props = withDefaults(defineProps<OnyxAvatarProps>(), {
   size: "48px",
 });
 
-const slots = defineSlots<{
-  /**
-   * Optional slot to override the default initials. Will only be used if `type` is `initials`.
-   */
-  default?(): unknown;
-}>();
-
 const initials = computed(() => {
-  const names = props.label.split(" ");
-  const initials =
-    names.length > 1 ? `${names[0].charAt(0)}${names[1].charAt(0)}` : names[0].substring(0, 2);
-  return initials.toUpperCase();
+  if (props.initials) return props.initials;
+
+  const names = props.label.trim().toUpperCase().split(" ");
+  if (names.length === 1) return names[0].substring(0, 2);
+
+  return `${names[0].charAt(0)}${names.at(-1)?.charAt(0)}`;
 });
 
 const hasImageError = ref(false);
@@ -32,7 +27,7 @@ watch(
 <template>
   <figure
     class="onyx-component onyx-avatar"
-    :class="[`onyx-avatar--${props.size}`, slots.default ? 'onyx-avatar--custom' : '']"
+    :class="[`onyx-avatar--${props.size}`, props.initials ? 'onyx-avatar--custom' : '']"
     :title="props.label"
   >
     <img
@@ -44,7 +39,7 @@ watch(
     />
 
     <div v-else class="onyx-avatar__initials">
-      <slot>{{ initials }}</slot>
+      {{ initials }}
     </div>
   </figure>
 </template>
diff --git a/packages/sit-onyx/src/components/OnyxAvatar/types.ts b/packages/sit-onyx/src/components/OnyxAvatar/types.ts
index 6810fd61f..8e6e1ef8a 100644
--- a/packages/sit-onyx/src/components/OnyxAvatar/types.ts
+++ b/packages/sit-onyx/src/components/OnyxAvatar/types.ts
@@ -11,4 +11,9 @@ export type OnyxAvatarProps = IconSizeProp<Exclude<IconSize, "12px">> & {
    * with the initials.
    */
   src?: string;
+  /**
+   * Initials to use. If unset, they will be inferred automatically from the `label` property
+   * by using the first character of the first and last word.
+   */
+  initials?: string;
 };
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/OnyxUserMenu.vue b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/OnyxUserMenu.vue
index 501708a08..2fcd4535f 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/OnyxUserMenu.vue
+++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/OnyxUserMenu.vue
@@ -24,6 +24,7 @@ const slots = defineSlots<{
 }>();
 
 const avatar = computed(() => {
+  if (typeof props.avatar === "object") return props.avatar;
   return { src: props.avatar, label: props.username };
 });
 
@@ -50,7 +51,7 @@ const isMobile = inject(
 
     <template #header>
       <div class="onyx-user-menu__header">
-        <OnyxAvatar v-bind="avatar" />
+        <OnyxAvatar v-bind="avatar" size="48px" />
 
         <div class="onyx-truncation-ellipsis">
           <div class="onyx-user-menu__username onyx-text onyx-truncation-ellipsis">
diff --git a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/types.ts b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/types.ts
index 437ca2321..3dc606777 100644
--- a/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/types.ts
+++ b/packages/sit-onyx/src/components/OnyxNavBar/modules/OnyxUserMenu/types.ts
@@ -1,4 +1,5 @@
 import type { ManagedProp } from "../../../../composables/useManagedState";
+import type { OnyxAvatarProps } from "../../../OnyxAvatar/types";
 
 export type OnyxUserMenuProps = {
   /**
@@ -8,7 +9,7 @@ export type OnyxUserMenuProps = {
   /**
    * User avatar. If unset or an error occurs while loading, a fallback will be displayed with the username initials.
    */
-  avatar?: string;
+  avatar?: string | Omit<OnyxAvatarProps, "size">;
   /**
    * Optional user description that is displayed when the menu is opened.
    */

From daf37b32c7ded6ecb8bd60e688f9b55d9632d911 Mon Sep 17 00:00:00 2001
From: Lars Rickert <lars.rickert@mail.schwarz>
Date: Wed, 8 Jan 2025 12:13:55 +0100
Subject: [PATCH 2/3] docs(changeset): refactor(OnyxAvatar): update default
 initials

---
 .changeset/fast-flies-try.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/fast-flies-try.md

diff --git a/.changeset/fast-flies-try.md b/.changeset/fast-flies-try.md
new file mode 100644
index 000000000..c1d291a84
--- /dev/null
+++ b/.changeset/fast-flies-try.md
@@ -0,0 +1,5 @@
+---
+"sit-onyx": major
+---
+
+refactor(OnyxAvatar): update default initials

From 3eee8756f1d2fd87a4ed342e79568b52af24fef7 Mon Sep 17 00:00:00 2001
From: Lars Rickert <lars.rickert@mail.schwarz>
Date: Wed, 8 Jan 2025 12:15:23 +0100
Subject: [PATCH 3/3] update changeset

---
 .changeset/fast-flies-try.md | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/.changeset/fast-flies-try.md b/.changeset/fast-flies-try.md
index c1d291a84..ffe365e8c 100644
--- a/.changeset/fast-flies-try.md
+++ b/.changeset/fast-flies-try.md
@@ -3,3 +3,12 @@
 ---
 
 refactor(OnyxAvatar): update default initials
+
+Previously the initials were taken from the first two words. Now they will be used from the first and last word.
+
+Example for "John Middlename Doe":
+
+- Previously: "JM"
+- Now: "JD"
+
+The default slot has been removed in favor of the `initials` property to set custom initials.