feat(ui5-avatar): functionality for setting custom fallback icon (#7463)

Related: #6655

packages/main/src/Avatar.hbs

@@ -10,6 +10,7 @@
 	role="{{_role}}"
 	aria-haspopup="{{_ariaHasPopup}}"
 	aria-label="{{accessibleNameText}}"
+	fallback-icon="{{_fallbackIcon}}"
 >
 	{{#if hasImage}}
 		<slot></slot>
@@ -20,7 +21,7 @@
 
 		{{#if initials}}
 			<span class="ui5-avatar-initials">{{validInitials}}</span>
-			<ui5-icon class="ui5-avatar-icon ui5-avatar-icon-fallback" name="employee"></ui5-icon>
+			<ui5-icon class="ui5-avatar-icon ui5-avatar-icon-fallback" name="{{fallbackIcon}}"></ui5-icon>
 		{{/if}}
 
 	{{/if}}

packages/main/src/Avatar.ts

@@ -26,6 +26,7 @@ import AvatarColorScheme from "./types/AvatarColorScheme.js";
 
 // Icon
 import "@ui5/webcomponents-icons/dist/employee.js";
+import "@ui5/webcomponents-icons/dist/alert.js";
 
 /**
  * @class
@@ -139,6 +140,33 @@ class Avatar extends UI5Element implements ITabbable {
 	@property()
 	icon!: string;
 
+	/**
+	 * Defines the name of the fallback icon, which should be displayed in the following cases:
+	 * <ul>
+	 * 	<li>If the initials are not valid (more than 3 letters, unsupported languages or empty initials).</li>
+	 * 	<li>If there are three initials and they do not fit in the shape (e.g. WWW for some of the sizes).</li>
+	 * 	<li>If the image src is wrong.</li>
+	 * </ul>
+	 *
+	 * <br>
+	 * <b>Note:</b> If not set, a default fallback icon "employee" is displayed.
+	 * <br>
+	 * <b>Note:</b> You should import the desired icon first, then use its name as "fallback-icon".
+	 * <br><br>
+	 * import "@ui5/webcomponents-icons/dist/{icon_name}.js"
+	 * <br>
+	 * <pre>&lt;ui5-avatar fallback-icon="alert"></pre>
+	 * <br>
+	 *
+	 * See all the available icons in the <ui5-link target="_blank" href="https://sdk.openui5.org/test-resources/sap/m/demokit/iconExplorer/webapp/index.html">Icon Explorer</ui5-link>.
+	 * @type {string}
+	 * @name sap.ui.webc.main.Avatar.prototype.fallbackIcon
+	 * @defaultvalue ""
+	 * @public
+	 */
+	@property()
+	fallbackIcon!: string;
+
 	/**
 	 * Defines the displayed initials.
 	 * <br>
@@ -350,6 +378,14 @@ class Avatar extends UI5Element implements ITabbable {
 		return this._getAriaHasPopup();
 	}
 
+	get _fallbackIcon() {
+		if (this.fallbackIcon === "") {
+			this.fallbackIcon = "employee";
+		}
+
+		return this.fallbackIcon;
+	}
+
 	get _interactive() {
 		return this.interactive && !this.disabled;
 	}

packages/main/test/pages/Avatar.html

@@ -149,6 +149,8 @@ <h3>Avatar - test</h3>
 		</ui5-avatar>
 		<ui5-avatar id="myAvatar4" initials="SF" shape="Square" size="M"></ui5-avatar>
 		<ui5-avatar id="myAvatar5" initials="WWW" shape="Square" size="M"></ui5-avatar>
+		<ui5-avatar id="myAvatar7" fallback-icon="alert" initials="WWW" shape="Circle" size="L"></ui5-avatar>
+
 	</section>
 
 	<section>
@@ -267,9 +269,11 @@ <h3>Avatar with three initials</h3>
 		<ui5-avatar id="myAvatar6" initials="ÌÒÙ" color-scheme="Accent1"></ui5-avatar>
 		<ui5-avatar initials="ABC" color-scheme="Accent2" size="XL"></ui5-avatar>
 
-		<h3>Avatar with three overflowing initials - icon should be shown</h3>
+		<h3>Avatar with three overflowing initials - default fallback icon should be shown</h3>
 		<ui5-avatar initials="WWW" color-scheme="Accent1" size="XS"></ui5-avatar>
-		<ui5-avatar initials="WWW" color-scheme="Accent2" size="XL"></ui5-avatar>
+
+		<h3>Avatar with three overflowing initials - custom fallback icon should be shown</h3>
+		<ui5-avatar initials="WWW" fallback-icon="alert" color-scheme="Accent2" size="XL"></ui5-avatar>
 
 	</section>
 

packages/main/test/specs/Avatar.spec.js

@@ -53,12 +53,26 @@ describe("Avatar", () => {
 		assert.ok(await initials.isExisting(), "initials are rendered");
 	});
 
-	it("tests rendering of icon when initials are overflowing ", async () => {
+	it("tests rendering of default fallback icon when initials are overflowing ", async () => {
 		const avatar = await browser.$("#myAvatar5");
 		const icon = await avatar.shadow$(".ui5-avatar-icon");
+		const iconName = await icon.getAttribute("name");
 
 		// icon is rendered
 		assert.ok(await icon.isExisting(), "icon should be rendered, when the initials are overflowing");
+		assert.strictEqual(await iconName, "employee", "the default fallback icon is renderen");
+
+	});
+
+	it("tests rendering of custom fallback icon when initials are overflowing ", async () => {
+		const avatar = await browser.$("#myAvatar7");
+		const fbIcon = await avatar.shadow$(".ui5-avatar-icon-fallback");
+		const fbIconName = await fbIcon.getAttribute("name");
+
+		// icon is rendered
+		assert.ok(await fbIcon.isExisting(), "fallback icon should be rendered, when it is set and the initials are overflowing");
+		assert.strictEqual(await fbIconName, "alert", "the custom fallback icon is renderen");
+
 	});
 
 	it("tests clicking on interactive disabled avatar", async () => {