[chore]: [avatar] move size, color and generate initials out of base …

…class (#32123)
microsoft · Jul 26, 2024 · 04c9a2a · 04c9a2a
1 parent 29df426
commit 04c9a2a
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 92 deletions.
diff --git a/change/@fluentui-web-components-a4240e2c-3729-40ec-b1b1-ed2aec906127.json b/change/@fluentui-web-components-a4240e2c-3729-40ec-b1b1-ed2aec906127.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "chore: move size and generate initials out of base class",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
@@ -191,7 +191,21 @@ export type AnchorTarget = ValuesOf<typeof AnchorTarget>;
 // @public
 export class Avatar extends BaseAvatar {
     appearance?: AvatarAppearance | undefined;
+    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(): void;
+    // @internal
+    generateInitials(): string | void;
+    // @internal
+    handleChange(source: any, propertyName: string): void;
     shape?: AvatarShape | undefined;
+    size?: AvatarSize | undefined;
 }
 
 // Warning: (ae-missing-release-tag) "AvatarActive" is part of the package's API, but it is missing a release tag (@alpha, @beta, @public, or @internal)
@@ -444,24 +458,10 @@ export class BaseAccordionItem extends FASTElement {
 export class BaseAvatar extends FASTElement {
     constructor();
     active?: AvatarActive | undefined;
-    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
     elementInternals: ElementInternals;
-    // @internal
-    generateColor(): void;
-    // @internal
-    generateInitials(): string | void;
-    // @internal
-    handleChange(source: any, propertyName: string): void;
     initials?: string | undefined;
     name?: string | undefined;
-    size?: AvatarSize | undefined;
 }
 
 // @public

diff --git a/packages/web-components/src/avatar/avatar.ts b/packages/web-components/src/avatar/avatar.ts
@@ -42,6 +42,53 @@ export class BaseAvatar extends FASTElement {
   @attr
   public initials?: string | undefined;
 
+  /**
+   * Optional activity indicator
+   * * active: the avatar will be decorated according to activeAppearance
+   * * inactive: the avatar will be reduced in size and partially transparent
+   * * undefined: normal display
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: active
+   */
+  @attr
+  public active?: AvatarActive | undefined;
+
+  constructor() {
+    super();
+
+    this.elementInternals.role = 'img';
+  }
+}
+
+/**
+ * An Avatar Custom HTML Element.
+ * Based on BaseAvatar and includes style and layout specific attributes
+ *
+ * @public
+ */
+export class Avatar extends BaseAvatar {
+  /**
+   * The avatar can have a circular or square shape.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: shape
+   */
+  @attr
+  public shape?: AvatarShape | undefined;
+
+  /**
+   * The appearance when `active="active"`
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: appearance
+   */
+  @attr
+  public appearance?: AvatarAppearance | undefined;
+
   /**
    * Size of the avatar in pixels.
    *
@@ -59,19 +106,6 @@ export class BaseAvatar extends FASTElement {
   @attr({ converter: nullableNumberConverter })
   public size?: AvatarSize | undefined;
 
-  /**
-   * Optional activity indicator
-   * * active: the avatar will be decorated according to activeAppearance
-   * * inactive: the avatar will be reduced in size and partially transparent
-   * * undefined: normal display
-   *
-   * @public
-   * @remarks
-   * HTML Attribute: active
-   */
-  @attr
-  public active?: AvatarActive | undefined;
-
   /**
    * The color when displaying either an icon or initials.
    * * neutral (default): gray
@@ -98,26 +132,6 @@ export class BaseAvatar extends FASTElement {
    */
   private currentColor: string | undefined;
 
-  constructor() {
-    super();
-
-    this.elementInternals.role = 'img';
-  }
-
-  public connectedCallback(): void {
-    super.connectedCallback();
-
-    Observable.getNotifier(this).subscribe(this);
-
-    this.generateColor();
-  }
-
-  public disconnectedCallback(): void {
-    super.disconnectedCallback();
-
-    Observable.getNotifier(this).unsubscribe(this);
-  }
-
   /**
    * Handles changes to observable properties
    * @internal
@@ -135,6 +149,26 @@ export class BaseAvatar extends FASTElement {
     }
   }
 
+  /**
+   * Generates and sets the initials for the template
+   * @internal
+   */
+  public generateInitials(): string | void {
+    if (!this.name && !this.initials) {
+      return;
+    }
+
+    // size can be undefined since we default it in CSS only
+    const size = this.size ?? 32;
+
+    return (
+      this.initials ??
+      getInitials(this.name, window.getComputedStyle(this as unknown as HTMLElement).direction === 'rtl', {
+        firstInitialOnly: size <= 16,
+      })
+    );
+  }
+
   /**
    * Sets the data-color attribute used for the visual presentation
    * @internal
@@ -156,57 +190,23 @@ export class BaseAvatar extends FASTElement {
   }
 
   /**
-   * Generates and sets the initials for the template
-   * @internal
+   * An array of the available Avatar named colors
    */
-  public generateInitials(): string | void {
-    if (!this.name && !this.initials) {
-      return;
-    }
+  public static colors = Object.values(AvatarNamedColor);
 
-    // size can be undefined since we default it in CSS only
-    const size = this.size ?? 32;
+  public connectedCallback(): void {
+    super.connectedCallback();
 
-    return (
-      this.initials ??
-      getInitials(this.name, window.getComputedStyle(this as unknown as HTMLElement).direction === 'rtl', {
-        firstInitialOnly: size <= 16,
-      })
-    );
-  }
+    Observable.getNotifier(this).subscribe(this);
 
-  /**
-   * An array of the available Avatar named colors
-   */
-  public static colors = Object.values(AvatarNamedColor);
-}
+    this.generateColor();
+  }
 
-/**
- * An Avatar Custom HTML Element.
- * Based on BaseAvatar and includes style and layout specific attributes
- *
- * @public
- */
-export class Avatar extends BaseAvatar {
-  /**
-   * The avatar can have a circular or square shape.
-   *
-   * @public
-   * @remarks
-   * HTML Attribute: shape
-   */
-  @attr
-  public shape?: AvatarShape | undefined;
+  public disconnectedCallback(): void {
+    super.disconnectedCallback();
 
-  /**
-   * The appearance when `active="active"`
-   *
-   * @public
-   * @remarks
-   * HTML Attribute: appearance
-   */
-  @attr
-  public appearance?: AvatarAppearance | undefined;
+    Observable.getNotifier(this).unsubscribe(this);
+  }
 }
 
 // copied from React avatar