feat(ui5-user-menu): add support for avatar schema color (#13020)

Author: dobromiraboycheva

packages/fiori/cypress/specs/UserMenu.cy.tsx

@@ -430,6 +430,73 @@ describe("Avatar configuration", () => {
 		cy.get("@avatar").find("[ui5-tag]").should("exist");
 		cy.get("@avatar").find("[ui5-tag]").should("have.length", 1);
 	});
+
+	it("tests avatarColorScheme default value", () => {
+		cy.mount(
+			<>
+				<Button id="openUserMenuBtn">Open User Menu</Button>
+				<UserMenu open={true} opener="openUserMenuBtn">
+					<UserMenuAccount
+						slot="accounts"
+						avatarInitials="AC"
+						titleText="Alain Chevalier 1">
+					</UserMenuAccount>
+				</UserMenu>
+			</>
+		);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu").shadow().find("[ui5-avatar]").as("avatar");
+		cy.get("@avatar").should("have.attr", "color-scheme", "Auto");
+	});
+
+	it("tests avatarColorScheme with custom value", () => {
+		cy.mount(
+			<>
+				<Button id="openUserMenuBtn">Open User Menu</Button>
+				<UserMenu open={true} opener="openUserMenuBtn">
+					<UserMenuAccount
+						slot="accounts"
+						avatarInitials="AC"
+						avatarColorScheme="Accent3"
+						titleText="Alain Chevalier 1">
+					</UserMenuAccount>
+				</UserMenu>
+			</>
+		);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu").shadow().find("[ui5-avatar]").as("avatar");
+		cy.get("@avatar").should("have.attr", "color-scheme", "Accent3");
+	});
+
+	it("tests avatarColorScheme on other accounts", () => {
+		cy.mount(
+			<>
+				<Button id="openUserMenuBtn">Open User Menu</Button>
+				<UserMenu open={true} opener="openUserMenuBtn" showOtherAccounts={true}>
+					<UserMenuAccount
+						slot="accounts"
+						avatarInitials="AC"
+						avatarColorScheme="Accent1"
+						titleText="Alain Chevalier 1"
+						selected={true}>
+					</UserMenuAccount>
+					<UserMenuAccount
+						slot="accounts"
+						avatarInitials="JD"
+						avatarColorScheme="Accent5"
+						titleText="John Doe">
+					</UserMenuAccount>
+				</UserMenu>
+			</>
+		);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu").shadow().find(".ui5-user-menu-selected-account-avatar").as("selectedAvatar");
+		cy.get("@selectedAvatar").should("have.attr", "color-scheme", "Accent1");
+		cy.get("@userMenu").shadow().find("[ui5-panel]").shadow().find("[ui5-button]").click();
+		cy.get("@userMenu").shadow().find("[ui5-panel]").find("[ui5-avatar]").as("otherAvatars");
+		cy.get("@otherAvatars").eq(0).should("have.attr", "color-scheme", "Accent1");
+		cy.get("@otherAvatars").eq(1).should("have.attr", "color-scheme", "Accent5");
+	});
 });
 
 describe("Events", () => {

packages/fiori/src/UserMenuAccount.ts

@@ -1,5 +1,6 @@
 import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import { customElement, property } from "@ui5/webcomponents-base/dist/decorators.js";
+import type AvatarColorScheme from "@ui5/webcomponents/dist/types/AvatarColorScheme.js";
 
 @customElement({
 	tag: "ui5-user-menu-account",
@@ -38,6 +39,16 @@ class UserMenuAccount extends UI5Element {
 	@property({ type: String })
 	avatarInitials?: string;
 
+	/**
+	 * Defines the background color of the desired image.
+	 * If `avatarColorScheme` is set to `Auto`, the avatar will be displayed with the `Accent6` color.
+	 *
+	 * @default "Auto"
+	 * @public
+	 */
+	@property()
+	avatarColorScheme: `${AvatarColorScheme}` = "Auto";
+
 	/**
 	 * Defines the title text of the user.
 	 *

packages/fiori/src/UserMenuTemplate.tsx

@@ -95,7 +95,7 @@ function headerContent(this: UserMenu) {
 	return (<>
 		{this._selectedAccount &&
 			<div class="ui5-user-menu-selected-account" aria-label={this._ariaLabelledByAccountInformationText}>
-				<Avatar size="L" onClick={this._handleAvatarClick} initials={this._selectedAccount._initials} fallbackIcon={personPlaceholder} class="ui5-user-menu-selected-account-avatar" interactive>
+				<Avatar size="L" onClick={this._handleAvatarClick} initials={this._selectedAccount._initials} colorScheme={this._selectedAccount.avatarColorScheme} fallbackIcon={personPlaceholder} class="ui5-user-menu-selected-account-avatar" interactive>
 					{this._selectedAccount.avatarSrc &&
 						<img src={this._selectedAccount.avatarSrc} title={this.showEditButton ? this._editAvatarTooltip : undefined	}/>
 					}
@@ -159,7 +159,7 @@ function otherAccountsList(this: UserMenu) {
 					aria-label={account.titleText}
 				>
 					<div class="ui5-user-menu-other-accounts-content">
-						<Avatar slot="image" size="S" initials={account._initials} fallbackIcon={personPlaceholder}>
+						<Avatar slot="image" size="S" initials={account._initials} fallbackIcon={personPlaceholder} colorScheme={account.avatarColorScheme}>
 							{account.avatarSrc &&
 								<img src={account.avatarSrc}/>
 							}