From bab2684bbd06f0b48c34016ceaca5720a35333e0 Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Mon, 15 Dec 2025 11:37:15 +0100
Subject: [PATCH] Migrate avatar to OnPush (#17389)

---
 .../components/src/avatar/avatar.component.ts | 39 +++++++++++++++----
 1 file changed, 31 insertions(+), 8 deletions(-)

diff --git a/libs/components/src/avatar/avatar.component.ts b/libs/components/src/avatar/avatar.component.ts
index 2ba85e32772..f50807dd506 100644
--- a/libs/components/src/avatar/avatar.component.ts
+++ b/libs/components/src/avatar/avatar.component.ts
@@ -1,5 +1,5 @@
 import { NgClass } from "@angular/common";
-import { Component, computed, input } from "@angular/core";
+import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
 
 import { Utils } from "@bitwarden/common/platform/misc/utils";
 
@@ -14,13 +14,11 @@ const SizeClasses: Record<SizeTypes, string[]> = {
 };
 
 /**
-  * Avatars display a unique color that helps a user visually recognize their logged in account.
-
-  * A variance in color across the avatar component is important as it is used in Account Switching as a
-  * visual indicator to recognize which of a personal or work account a user is logged into.
-*/
-// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush
-// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection
+ * Avatars display a unique color that helps a user visually recognize their logged in account.
+ *
+ * A variance in color across the avatar component is important as it is used in Account Switching as a
+ * visual indicator to recognize which of a personal or work account a user is logged into.
+ */
 @Component({
   selector: "bit-avatar",
   template: `
@@ -49,13 +47,38 @@ const SizeClasses: Record<SizeTypes, string[]> = {
     </span>
   `,
   imports: [NgClass],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AvatarComponent {
+  /**
+   * Whether to display a border around the avatar.
+   */
   readonly border = input(false);
+
+  /**
+   * Custom background color for the avatar. If not provided, a color will be generated based on the id or text.
+   */
   readonly color = input<string>();
+
+  /**
+   * Unique identifier used to generate a consistent background color. Takes precedence over text for color generation.
+   */
   readonly id = input<string>();
+
+  /**
+   * Text to display in the avatar. The first letters of words (up to 2 characters) will be shown.
+   * Also used to generate background color if id is not provided.
+   */
   readonly text = input<string>();
+
+  /**
+   * Title attribute for the avatar. If not provided, falls back to the text value.
+   */
   readonly title = input<string>();
+
+  /**
+   * Size of the avatar.
+   */
   readonly size = input<SizeTypes>("default");
 
   protected readonly svgCharCount = 2;