fix(web-components): remove empty text nodes from avatar

Author: radium-v

change/@fluentui-web-components-71a1a9f8-d7a4-46c1-9142-d034f15467b9.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "fix: remove empty text nodes from avatar",
+  "packageName": "@fluentui/web-components",
+  "email": "863023+radium-v@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/web-components/docs/web-components.api.md

@@ -466,9 +466,13 @@ export class BaseAnchor extends FASTElement {
 export class BaseAvatar extends FASTElement {
     constructor();
     // @internal
+    defaultSlot: HTMLSlotElement;
+    // @internal
     elementInternals: ElementInternals;
     initials?: string | undefined;
     name?: string | undefined;
+    // @internal
+    slotchangeHandler(e: Event): void;
 }
 
 // @public

packages/web-components/src/avatar/avatar.base.ts

@@ -5,6 +5,12 @@ import { attr, FASTElement } from '@microsoft/fast-element';
  * @public
  */
 export class BaseAvatar extends FASTElement {
+  /**
+   * Reference to the default slot element.
+   * @internal
+   */
+  public defaultSlot!: HTMLSlotElement;
+
   /**
    * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
    *
@@ -37,4 +43,20 @@ export class BaseAvatar extends FASTElement {
 
     this.elementInternals.role = 'img';
   }
+
+  /**
+   * Removes any empty text nodes from the default slot when the slotted content changes.
+   *
+   * @param e - The event object
+   * @internal
+   */
+  public slotchangeHandler(e: Event): void {
+    if (!this.innerText.trim()) {
+      this.defaultSlot.assignedNodes().forEach(node => {
+        if (node.nodeType === Node.TEXT_NODE) {
+          (node as Element).remove();
+        }
+      });
+    }
+  }
 }

packages/web-components/src/avatar/avatar.spec.ts

@@ -12,6 +12,13 @@ test.describe('Avatar', () => {
     await expect(element).toHaveJSProperty('elementInternals.role', 'img');
   });
 
+  test('should render an icon when no name or initials are provided', async ({ fastPage }) => {
+    const { element } = fastPage;
+    const icon = element.locator('svg');
+
+    await expect(icon).toBeVisible();
+  });
+
   test('When no name value is set, should render with custom initials based on the provided initials value', async ({
     fastPage,
   }) => {
@@ -20,6 +27,12 @@ test.describe('Avatar', () => {
     await fastPage.setTemplate({ attributes: { initials: 'JD' } });
 
     await expect(element).toContainText('JD');
+
+    await test.step('should not render the default icon', async () => {
+      const icon = element.locator('svg');
+
+      await expect(icon).toBeHidden();
+    });
   });
 
   test('When name value is set, should generate initials based on the provided name value', async ({ fastPage }) => {

packages/web-components/src/avatar/avatar.template.ts

@@ -1,4 +1,4 @@
-import { type ElementViewTemplate, html } from '@microsoft/fast-element';
+import { type ElementViewTemplate, html, ref } from '@microsoft/fast-element';
 import type { Avatar } from './avatar.js';
 
 const defaultIconTemplate = html`<svg
@@ -21,7 +21,9 @@ const defaultIconTemplate = html`<svg
  */
 export function avatarTemplate<T extends Avatar>(): ElementViewTemplate<T> {
   return html<T>`
-    <slot>${x => (x.name || x.initials ? x.generateInitials() : defaultIconTemplate)}</slot>
+    <slot @slotchange="${(x, c) => x.slotchangeHandler(c.event)}" ${ref('defaultSlot')}>
+      ${x => (x.name || x.initials ? x.generateInitials() : defaultIconTemplate)}
+    </slot>
     <slot name="badge"></slot>
   `;
 }

packages/web-components/src/avatar/avatar.ts

@@ -123,8 +123,8 @@ export class Avatar extends BaseAvatar {
     const size = this.size ?? 32;
 
     return (
-      this.initials ??
-      getInitials(this.name, window.getComputedStyle(this as unknown as HTMLElement).direction === 'rtl', {
+      this.initials ||
+      getInitials(this.name, window.getComputedStyle(this).direction === 'rtl', {
         firstInitialOnly: size <= 16,
       })
     );