diff --git a/packages/main/src/Avatar.hbs b/packages/main/src/Avatar.hbs index b59d1838ba2c..970f2b5e3b4d 100644 --- a/packages/main/src/Avatar.hbs +++ b/packages/main/src/Avatar.hbs @@ -10,6 +10,7 @@ role="{{_role}}" aria-haspopup="{{_ariaHasPopup}}" aria-label="{{accessibleNameText}}" + fallback-icon="{{_fallbackIcon}}" > {{#if hasImage}} @@ -20,7 +21,7 @@ {{#if initials}} {{validInitials}} - + {{/if}} {{/if}} diff --git a/packages/main/src/Avatar.ts b/packages/main/src/Avatar.ts index 59d7d786f922..0cabfd4906da 100644 --- a/packages/main/src/Avatar.ts +++ b/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: + * + * + *
+ * Note: If not set, a default fallback icon "employee" is displayed. + *
+ * Note: You should import the desired icon first, then use its name as "fallback-icon". + *

+ * import "@ui5/webcomponents-icons/dist/{icon_name}.js" + *
+ *
<ui5-avatar fallback-icon="alert">
+ *
+ * + * See all the available icons in the Icon Explorer. + * @type {string} + * @name sap.ui.webc.main.Avatar.prototype.fallbackIcon + * @defaultvalue "" + * @public + */ + @property() + fallbackIcon!: string; + /** * Defines the displayed initials. *
@@ -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; } diff --git a/packages/main/test/pages/Avatar.html b/packages/main/test/pages/Avatar.html index d73d339e6519..7e77ebf9a962 100644 --- a/packages/main/test/pages/Avatar.html +++ b/packages/main/test/pages/Avatar.html @@ -149,6 +149,8 @@

Avatar - test

+ +
@@ -267,9 +269,11 @@

Avatar with three initials

-

Avatar with three overflowing initials - icon should be shown

+

Avatar with three overflowing initials - default fallback icon should be shown

- + +

Avatar with three overflowing initials - custom fallback icon should be shown

+
diff --git a/packages/main/test/specs/Avatar.spec.js b/packages/main/test/specs/Avatar.spec.js index dde3baeb6da0..859b0cbc0a41 100644 --- a/packages/main/test/specs/Avatar.spec.js +++ b/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 () => {