feat(ui5-user-menu): introduce show-edit-button property (#10619)

* feat(ui5-user-menu): add a property to hide avatar icon for editing
SAP · Jan 28, 2025 · 6adec46 · 6adec46
1 parent 600ab25
commit 6adec46
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 3 deletions.
diff --git a/packages/fiori/cypress/specs/UserMenu.cy.ts b/packages/fiori/cypress/specs/UserMenu.cy.ts
@@ -169,6 +169,7 @@ describe("Avatar configuration", () => {
 		cy.get("@avatar").should("exist");
 		cy.get("@avatar").should("have.length", 1);
 		cy.get("@avatar").should("have.attr", "fallback-icon", "person-placeholder");
+		cy.get("@avatar").find("[ui5-tag]").should("not.exist");
 	});
 
 	it("tests initials", () => {
@@ -208,6 +209,25 @@ describe("Avatar configuration", () => {
 		cy.get("@image").should("have.length", 1);
 		cy.get("@image").should("have.attr", "src", "./../../test/pages/img/man_avatar_1.png");
 	});
+
+	it("tests showEditButton", () => {
+		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
+		<ui5-user-menu open opener="openUserMenuBtn" show-edit-button>
+			<ui5-user-menu-account slot="accounts"
+								   title-text="Alain Chevalier 1"
+								   subtitle-text="[email protected]"
+								   description="Delivery Manager, SAP SE">
+			</ui5-user-menu-account>
+		</ui5-user-menu>`);
+		cy.get("[ui5-user-menu]").as("userMenu");
+		cy.get("@userMenu").should("exist");
+		cy.get("@userMenu").shadow().find("[ui5-avatar]").as("avatar");
+		cy.get("@avatar").should("exist");
+		cy.get("@avatar").should("have.length", 1);
+		cy.get("@avatar").should("have.attr", "fallback-icon", "person-placeholder");
+		cy.get("@avatar").find("[ui5-tag]").should("exist");
+		cy.get("@avatar").find("[ui5-tag]").should("have.length", 1);
+	});
 });
 
 describe("Events", () => {

diff --git a/packages/fiori/src/UserMenu.ts b/packages/fiori/src/UserMenu.ts
@@ -183,6 +183,16 @@ class UserMenu extends UI5Element {
 	@property({ type: Boolean })
 	showAddAccount = false;
 
+	/**
+	 * Defines if the User menu shows edit button.
+	 *
+	 * @default false
+	 * @public
+	 * @since 2.7.0
+	 */
+	@property({ type: Boolean })
+	showEditButton = false;
+
 	/**
 	 * Defines the menu items.
 	 * @public

diff --git a/packages/fiori/src/UserMenuTemplate.tsx b/packages/fiori/src/UserMenuTemplate.tsx
@@ -136,9 +136,11 @@ function headerContent(this: UserMenu) {
 					{this._selectedAccount.avatarSrc &&
 						<img src={this._selectedAccount.avatarSrc}/>
 					}
+					{this.showEditButton &&
 					<Tag slot="badge" wrappingType="None" design="Set1" colorScheme="5" title={this._editAvatarTooltip}>
 						<Icon slot="icon" name={edit}></Icon>
 					</Tag>
+					}
 				</Avatar>
 				{this._selectedAccount.titleText &&
 					<Title id="selected-account-title" class="ui5-pm-selected-account-title">{this._selectedAccount.titleText}</Title>

diff --git a/packages/fiori/test/pages/UserMenu.html b/packages/fiori/test/pages/UserMenu.html
@@ -27,7 +27,7 @@
 	</ui5-avatar>
 	<img slot="logo" src="./img/sap-logo-svg.svg" />
 </ui5-shellbar>
-<ui5-user-menu id="userMenuShellBar" show-manage-account show-other-accounts show-add-account>
+<ui5-user-menu id="userMenuShellBar" show-manage-account show-other-accounts show-add-account show-edit-button>
 	<ui5-user-menu-account slot="accounts"
 						   avatar-src="./img/man_avatar_1.png"
 						   title-text="Alain Chevalier 1"
@@ -73,9 +73,16 @@
 		<ui5-user-menu-item icon="accelerated" text="Terms of Use" data-id="terms-of-use"></ui5-user-menu-item>
 	</ui5-user-menu-item>
 </ui5-user-menu>
-
+<ui5-title level="H5" class="header-title">Text Direction</ui5-title>
+<ui5-switch id="direction" text-on="RTL" text-off="LTR"></ui5-switch>
 
 <script>
+	const direction = document.getElementById("direction");
+
+	direction.addEventListener("ui5-change", function() {
+		document.body.setAttribute("dir", direction.checked ? "rtl" : "ltr");
+		window["sap-ui-webcomponents-bundle"].applyDirection();
+	});
 	const menu = document.getElementById("userMenu");
 	document.getElementById("btnOpenUserMenu").addEventListener("click", function () {
 		if(menu.open){

diff --git a/packages/website/docs/_samples/fiori/UserMenu/Advanced/sample.html b/packages/website/docs/_samples/fiori/UserMenu/Advanced/sample.html
@@ -29,7 +29,7 @@
 	</ui5-avatar>
 	<img slot="logo" src="../assets/images/sap-logo-svg.svg" />
 </ui5-shellbar>
-<ui5-user-menu id="userMenu" show-manage-account show-other-accounts show-add-account>
+<ui5-user-menu id="userMenu" show-manage-account show-other-accounts show-add-account show-edit-button>
 	<ui5-user-menu-account slot="accounts"
 						   avatar-src="../assets/images/avatars/man_avatar_3.png"
 						   title-text="Alain Chevalier 1"