From 237e549c9fd7de89f3096269f9473c2d065f1ba9 Mon Sep 17 00:00:00 2001
From: Dobromira Boycheva <dobromira.boycheva@sap.com>
Date: Wed, 22 Jan 2025 11:33:50 +0200
Subject: [PATCH 1/3] feat(ui5-user-menu): add a property to hide avatar icon
 for editing

---
 packages/fiori/cypress/specs/UserMenu.cy.ts | 20 ++++++++++++++++++++
 packages/fiori/src/UserMenu.ts              | 10 ++++++++++
 packages/fiori/src/UserMenuTemplate.tsx     |  2 ++
 3 files changed, 32 insertions(+)

diff --git a/packages/fiori/cypress/specs/UserMenu.cy.ts b/packages/fiori/cypress/specs/UserMenu.cy.ts
index 755a5c602643..45e30021731c 100644
--- a/packages/fiori/cypress/specs/UserMenu.cy.ts
+++ b/packages/fiori/cypress/specs/UserMenu.cy.ts
@@ -169,6 +169,8 @@ 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("exist");
+		cy.get("@avatar").find("[ui5-tag]").should("have.length", 1);
 	});
 
 	it("tests initials", () => {
@@ -208,6 +210,24 @@ 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 hideEditAvatar", () => {
+		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
+		<ui5-user-menu open opener="openUserMenuBtn" hide-edit-avatar>
+			<ui5-user-menu-account slot="accounts"
+								   title-text="Alain Chevalier 1"
+								   subtitle-text="alian.chevalier@sap.com"
+								   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("have.length", 0);
+	});
 });
 
 describe("Events", () => {
diff --git a/packages/fiori/src/UserMenu.ts b/packages/fiori/src/UserMenu.ts
index 5d56aede2716..e27de372c50f 100644
--- 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 avatar edit button should be hidden.
+	 *
+	 * @default false
+	 * @public
+	 * @since 2.7.0
+	 */
+	@property({ type: Boolean })
+	hideEditAvatar = false;
+
 	/**
 	 * Defines the menu items.
 	 * @public
diff --git a/packages/fiori/src/UserMenuTemplate.tsx b/packages/fiori/src/UserMenuTemplate.tsx
index ff87347b8ad1..72fbc1e5bc33 100644
--- 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.hideEditAvatar != true &&
 					<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>

From fd9faa57298d249775f570e0c210f5ecf0cdb2a3 Mon Sep 17 00:00:00 2001
From: Dobromira Boycheva <dobromira.boycheva@sap.com>
Date: Wed, 22 Jan 2025 11:33:50 +0200
Subject: [PATCH 2/3] feat(ui5-user-menu): add a property to hide avatar icon
 for editing

---
 packages/fiori/cypress/specs/UserMenu.cy.ts | 20 ++++++++++++++++++++
 packages/fiori/src/UserMenu.ts              | 10 ++++++++++
 packages/fiori/src/UserMenuTemplate.tsx     |  2 ++
 3 files changed, 32 insertions(+)

diff --git a/packages/fiori/cypress/specs/UserMenu.cy.ts b/packages/fiori/cypress/specs/UserMenu.cy.ts
index 755a5c602643..45e30021731c 100644
--- a/packages/fiori/cypress/specs/UserMenu.cy.ts
+++ b/packages/fiori/cypress/specs/UserMenu.cy.ts
@@ -169,6 +169,8 @@ 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("exist");
+		cy.get("@avatar").find("[ui5-tag]").should("have.length", 1);
 	});
 
 	it("tests initials", () => {
@@ -208,6 +210,24 @@ 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 hideEditAvatar", () => {
+		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
+		<ui5-user-menu open opener="openUserMenuBtn" hide-edit-avatar>
+			<ui5-user-menu-account slot="accounts"
+								   title-text="Alain Chevalier 1"
+								   subtitle-text="alian.chevalier@sap.com"
+								   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("have.length", 0);
+	});
 });
 
 describe("Events", () => {
diff --git a/packages/fiori/src/UserMenu.ts b/packages/fiori/src/UserMenu.ts
index 5d56aede2716..e27de372c50f 100644
--- 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 avatar edit button should be hidden.
+	 *
+	 * @default false
+	 * @public
+	 * @since 2.7.0
+	 */
+	@property({ type: Boolean })
+	hideEditAvatar = false;
+
 	/**
 	 * Defines the menu items.
 	 * @public
diff --git a/packages/fiori/src/UserMenuTemplate.tsx b/packages/fiori/src/UserMenuTemplate.tsx
index ff87347b8ad1..ad57c554191d 100644
--- 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.hideEditAvatar !== true &&
 					<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>

From 4a9894bc0a139574a67d923b3df1d193c159f959 Mon Sep 17 00:00:00 2001
From: Dobromira Boycheva <dobromira.boycheva@sap.com>
Date: Thu, 23 Jan 2025 11:39:30 +0200
Subject: [PATCH 3/3] feat(ui5-user-menu): introduce `show-edit-button`
 property

---
 packages/fiori/cypress/specs/UserMenu.cy.ts           | 10 +++++-----
 packages/fiori/src/UserMenu.ts                        |  4 ++--
 packages/fiori/src/UserMenuTemplate.tsx               |  2 +-
 packages/fiori/test/pages/UserMenu.html               | 11 +++++++++--
 .../docs/_samples/fiori/UserMenu/Advanced/sample.html |  2 +-
 5 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/packages/fiori/cypress/specs/UserMenu.cy.ts b/packages/fiori/cypress/specs/UserMenu.cy.ts
index 45e30021731c..29a5685f947f 100644
--- a/packages/fiori/cypress/specs/UserMenu.cy.ts
+++ b/packages/fiori/cypress/specs/UserMenu.cy.ts
@@ -169,8 +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("exist");
-		cy.get("@avatar").find("[ui5-tag]").should("have.length", 1);
+		cy.get("@avatar").find("[ui5-tag]").should("not.exist");
 	});
 
 	it("tests initials", () => {
@@ -211,9 +210,9 @@ describe("Avatar configuration", () => {
 		cy.get("@image").should("have.attr", "src", "./../../test/pages/img/man_avatar_1.png");
 	});
 
-	it("tests hideEditAvatar", () => {
+	it("tests showEditButton", () => {
 		cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
-		<ui5-user-menu open opener="openUserMenuBtn" hide-edit-avatar>
+		<ui5-user-menu open opener="openUserMenuBtn" show-edit-button>
 			<ui5-user-menu-account slot="accounts"
 								   title-text="Alain Chevalier 1"
 								   subtitle-text="alian.chevalier@sap.com"
@@ -226,7 +225,8 @@ 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("have.length", 0);
+		cy.get("@avatar").find("[ui5-tag]").should("exist");
+		cy.get("@avatar").find("[ui5-tag]").should("have.length", 1);
 	});
 });
 
diff --git a/packages/fiori/src/UserMenu.ts b/packages/fiori/src/UserMenu.ts
index e27de372c50f..eb1b815405fd 100644
--- a/packages/fiori/src/UserMenu.ts
+++ b/packages/fiori/src/UserMenu.ts
@@ -184,14 +184,14 @@ class UserMenu extends UI5Element {
 	showAddAccount = false;
 
 	/**
-	 * Defines if the User menu avatar edit button should be hidden.
+	 * Defines if the User menu shows edit button.
 	 *
 	 * @default false
 	 * @public
 	 * @since 2.7.0
 	 */
 	@property({ type: Boolean })
-	hideEditAvatar = false;
+	showEditButton = false;
 
 	/**
 	 * Defines the menu items.
diff --git a/packages/fiori/src/UserMenuTemplate.tsx b/packages/fiori/src/UserMenuTemplate.tsx
index f3d027aebdba..0f86eb1135d0 100644
--- a/packages/fiori/src/UserMenuTemplate.tsx
+++ b/packages/fiori/src/UserMenuTemplate.tsx
@@ -136,7 +136,7 @@ function headerContent(this: UserMenu) {
 					{this._selectedAccount.avatarSrc &&
 						<img src={this._selectedAccount.avatarSrc}/>
 					}
-					{!this.hideEditAvatar &&
+					{this.showEditButton &&
 					<Tag slot="badge" wrappingType="None" design="Set1" colorScheme="5" title={this._editAvatarTooltip}>
 						<Icon slot="icon" name={edit}></Icon>
 					</Tag>
diff --git a/packages/fiori/test/pages/UserMenu.html b/packages/fiori/test/pages/UserMenu.html
index 09b306036578..65b02e2f8918 100644
--- 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
index 74b2c805afe1..c0374b022ad4 100644
--- 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"