refactor(OnyxAvatar): update default initials

.changeset/fast-flies-try.md

@@ -0,0 +1,14 @@
+---
+"sit-onyx": major
+---
+
+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.

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 }) => {

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;

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>

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;
 };

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">

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.
    */