feat: update Avatar to leverage ElementInternals for role and color states

change/@fluentui-web-components-a05b784c-1559-4ccd-b8f2-0c5e7818fdfb.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "update avatar to use ElementInternals for role and states for color",
+  "packageName": "@fluentui/web-components",
+  "email": "13071055+chrisdholt@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -193,15 +193,24 @@ export type AnchorTarget = ValuesOf<typeof AnchorTarget>;
 
 // @public
 export class Avatar extends FASTElement {
+    constructor();
     active?: AvatarActive | undefined;
     appearance?: AvatarAppearance | undefined;
-    color?: AvatarColor;
+    color?: AvatarColor | undefined;
     colorId?: AvatarNamedColor | undefined;
     static colors: ("anchor" | "dark-red" | "cranberry" | "red" | "pumpkin" | "peach" | "marigold" | "gold" | "brass" | "brown" | "forest" | "seafoam" | "dark-green" | "light-teal" | "teal" | "steel" | "blue" | "royal-blue" | "cornflower" | "navy" | "lavender" | "purple" | "grape" | "lilac" | "pink" | "magenta" | "plum" | "beige" | "mink" | "platinum")[];
+    // (undocumented)
+    connectedCallback(): void;
+    // (undocumented)
+    disconnectedCallback(): void;
     // @internal
-    generateColor(): AvatarColor | void;
+    elementInternals: ElementInternals;
+    // @internal
+    generateColor(): void;
     // @internal
     generateInitials(): string | void;
+    // @internal
+    handleChange(source: any, propertyName: string): void;
     initials?: string | undefined;
     name?: string | undefined;
     shape?: AvatarShape | undefined;

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

@@ -87,6 +87,11 @@ test.describe('Avatar Component', () => {
     await expect(element).toBeVisible();
   });
 
+  test('should have a role of img', async () => {
+    await page.waitForSelector('fluent-avatar');
+    await expect(element).toHaveJSProperty('elementInternals.role', 'img');
+  });
+
   test('When no name value is set, should render with custom initials based on the provided initials value', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
@@ -134,44 +139,27 @@ test.describe('Avatar Component', () => {
   });
 
   test('default color should be neutral', async () => {
-    await expect(element).toHaveAttribute('data-color', `neutral`);
+    expect(await element.evaluate((node: Avatar) => node.elementInternals.states.has('neutral'))).toBe(true);
   });
 
-  test('should default to a specific color when "colorful" is set without name or colorId', async () => {
-    await element.evaluate((node: Avatar) => {
-      node.color = 'colorful';
-    });
-    const generatedColor = await element.evaluate((node: Avatar) => {
-      return node.generateColor();
-    });
-    await expect(element).toHaveAttribute('data-color', `${generatedColor}`);
-  });
-
-  test('should derive the color from the name attribute when set to "colorful"', async () => {
+  test('should add a custom state of `brand` when `brand is provided as the color', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-        <fluent-avatar name="John Doe" color="colorful"></fluent-avatar>
+        <fluent-avatar color-id="pumpkin" name="John Doe" color="brand"></fluent-avatar>
       `;
     });
 
-    const generatedColor = await element.evaluate((node: Avatar) => {
-      return node.generateColor();
-    });
-
-    await expect(element).toHaveAttribute('data-color', `${generatedColor}`);
+    expect(await element.evaluate((node: Avatar) => node.elementInternals.states.has('brand'))).toBe(true);
   });
 
   test('should prioritize color derivation from colorId over name when set to "colorful"', async () => {
     await root.evaluate(node => {
       node.innerHTML = /* html */ `
-        <fluent-avatar color-id="pumpkin" name="John Doe" color="colorful"></fluent-avatar>
+        <fluent-avatar color-id="pumpkin" name="Steve Smith" color="colorful"></fluent-avatar>
       `;
     });
 
-    const generatedColor = await element.evaluate((node: Avatar) => {
-      return node.generateColor();
-    });
-    await expect(element).toHaveAttribute('data-color', `${generatedColor}`);
+    expect(await element.evaluate((node: Avatar) => node.elementInternals.states.has('pumpkin'))).toBe(true);
   });
 
   for (const [, value] of Object.entries(colorAttributes)) {

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

@@ -322,157 +322,157 @@ export const styles = css`
     border-radius: ${borderRadiusXLarge};
   }
 
-  :host([data-color='brand']) {
+  :host(:is([state--brand], :state(brand))) {
     color: ${colorNeutralForegroundStaticInverted};
     background-color: ${colorBrandBackgroundStatic};
   }
 
-  :host([data-color='dark-red']) {
+  :host(:is([state--dark-red], :state(dark-red))) {
     color: ${colorPaletteDarkRedForeground2};
     background-color: ${colorPaletteDarkRedBackground2};
   }
 
-  :host([data-color='cranberry']) {
+  :host(:is([state--cranberry], :state(cranberry))) {
     color: ${colorPaletteCranberryForeground2};
     background-color: ${colorPaletteCranberryBackground2};
   }
 
-  :host([data-color='red']) {
+  :host(:is([state--red], :state(red))) {
     color: ${colorPaletteRedForeground2};
     background-color: ${colorPaletteRedBackground2};
   }
 
-  :host([data-color='pumpkin']) {
+  :host(:is([state--pumpkin], :state(pumpkin))) {
     color: ${colorPalettePumpkinForeground2};
     background-color: ${colorPalettePumpkinBackground2};
   }
 
-  :host([data-color='peach']) {
+  :host(:is([state--peach], :state(peach))) {
     color: ${colorPalettePeachForeground2};
     background-color: ${colorPalettePeachBackground2};
   }
 
-  :host([data-color='marigold']) {
+  :host(:is([state--marigold], :state(marigold))) {
     color: ${colorPaletteMarigoldForeground2};
     background-color: ${colorPaletteMarigoldBackground2};
   }
 
-  :host([data-color='gold']) {
+  :host(:is([state--gold], :state(gold))) {
     color: ${colorPaletteGoldForeground2};
     background-color: ${colorPaletteGoldBackground2};
   }
 
-  :host([data-color='brass']) {
+  :host(:is([state--brass], :state(brass))) {
     color: ${colorPaletteBrassForeground2};
     background-color: ${colorPaletteBrassBackground2};
   }
 
-  :host([data-color='brown']) {
+  :host(:is([state--brown], :state(brown))) {
     color: ${colorPaletteBrownForeground2};
     background-color: ${colorPaletteBrownBackground2};
   }
 
-  :host([data-color='forest']) {
+  :host(:is([state--forest], :state(forest))) {
     color: ${colorPaletteForestForeground2};
     background-color: ${colorPaletteForestBackground2};
   }
 
-  :host([data-color='seafoam']) {
+  :host(:is([state--seafoam], :state(seafoam))) {
     color: ${colorPaletteSeafoamForeground2};
     background-color: ${colorPaletteSeafoamBackground2};
   }
 
-  :host([data-color='dark-green']) {
+  :host(:is([state--dark-green], :state(dark-green))) {
     color: ${colorPaletteDarkGreenForeground2};
     background-color: ${colorPaletteDarkGreenBackground2};
   }
 
-  :host([data-color='light-teal']) {
+  :host(:is([state--light-teal], :state(light-teal))) {
     color: ${colorPaletteLightTealForeground2};
     background-color: ${colorPaletteLightTealBackground2};
   }
 
-  :host([data-color='teal']) {
+  :host(:is([state--teal], :state(teal))) {
     color: ${colorPaletteTealForeground2};
     background-color: ${colorPaletteTealBackground2};
   }
 
-  :host([data-color='steel']) {
+  :host(:is([state--steel], :state(steel))) {
     color: ${colorPaletteSteelForeground2};
     background-color: ${colorPaletteSteelBackground2};
   }
 
-  :host([data-color='blue']) {
+  :host(:is([state--blue], :state(blue))) {
     color: ${colorPaletteBlueForeground2};
     background-color: ${colorPaletteBlueBackground2};
   }
 
-  :host([data-color='royal-blue']) {
+  :host(:is([state--royal-blue], :state(royal-blue))) {
     color: ${colorPaletteRoyalBlueForeground2};
     background-color: ${colorPaletteRoyalBlueBackground2};
   }
 
-  :host([data-color='cornflower']) {
+  :host(:is([state--cornflower], :state(cornflower))) {
     color: ${colorPaletteCornflowerForeground2};
     background-color: ${colorPaletteCornflowerBackground2};
   }
 
-  :host([data-color='navy']) {
+  :host(:is([state--navy], :state(navy))) {
     color: ${colorPaletteNavyForeground2};
     background-color: ${colorPaletteNavyBackground2};
   }
 
-  :host([data-color='lavender']) {
+  :host(:is([state--lavender], :state(lavender))) {
     color: ${colorPaletteLavenderForeground2};
     background-color: ${colorPaletteLavenderBackground2};
   }
 
-  :host([data-color='purple']) {
+  :host(:is([state--purple], :state(purple))) {
     color: ${colorPalettePurpleForeground2};
     background-color: ${colorPalettePurpleBackground2};
   }
 
-  :host([data-color='grape']) {
+  :host(:is([state--grape], :state(grape))) {
     color: ${colorPaletteGrapeForeground2};
     background-color: ${colorPaletteGrapeBackground2};
   }
 
-  :host([data-color='lilac']) {
+  :host(:is([state--lilac], :state(lilac))) {
     color: ${colorPaletteLilacForeground2};
     background-color: ${colorPaletteLilacBackground2};
   }
 
-  :host([data-color='pink']) {
+  :host(:is([state--pink], :state(pink))) {
     color: ${colorPalettePinkForeground2};
     background-color: ${colorPalettePinkBackground2};
   }
 
-  :host([data-color='magenta']) {
+  :host(:is([state--magenta], :state(magenta))) {
     color: ${colorPaletteMagentaForeground2};
     background-color: ${colorPaletteMagentaBackground2};
   }
 
-  :host([data-color='plum']) {
+  :host(:is([state--plum], :state(plum))) {
     color: ${colorPalettePlumForeground2};
     background-color: ${colorPalettePlumBackground2};
   }
 
-  :host([data-color='beige']) {
+  :host(:is([state--beige], :state(beige))) {
     color: ${colorPaletteBeigeForeground2};
     background-color: ${colorPaletteBeigeBackground2};
   }
 
-  :host([data-color='mink']) {
+  :host(:is([state--mink], :state(mink))) {
     color: ${colorPaletteMinkForeground2};
     background-color: ${colorPaletteMinkBackground2};
   }
 
-  :host([data-color='platinum']) {
+  :host(:is([state--platinum], :state(platinum))) {
     color: ${colorPalettePlatinumForeground2};
     background-color: ${colorPalettePlatinumBackground2};
   }
 
-  :host([data-color='anchor']) {
+  :host(:is([state--anchor], :state(anchor))) {
     color: ${colorPaletteAnchorForeground2};
     background-color: ${colorPaletteAnchorBackground2};
   }

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

@@ -21,10 +21,8 @@ const defaultIconTemplate = html`<svg
  */
 export function avatarTemplate<T extends Avatar>(): ElementViewTemplate<T> {
   return html<T>`
-    <template role="img" data-color=${x => x.generateColor()}>
-      <slot>${x => (x.name || x.initials ? x.generateInitials() : defaultIconTemplate)}</slot>
-      <slot name="badge"></slot>
-    </template>
+    <slot>${x => (x.name || x.initials ? x.generateInitials() : defaultIconTemplate)}</slot>
+    <slot name="badge"></slot>
   `;
 }