chore(ui5-user-menu): spec updates and UX fixes

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

@@ -875,6 +875,22 @@ describe("Events", () => {
 		cy.get("@opened").should("have.been.calledOnce");
 	});
 
+	it("focuses first menu item after open", () => {
+		cy.mount(
+			<>
+				<Button id="openUserMenuBtn">Open User Menu</Button>
+				<UserMenu open={true} opener="openUserMenuBtn">
+					<UserMenuAccount slot="accounts" titleText="Alain Chevalier"></UserMenuAccount>
+					<UserMenuItem text="Setting" data-id="setting"></UserMenuItem>
+					<UserMenuItem text="Privacy" data-id="privacy"></UserMenuItem>
+				</UserMenu>
+			</>
+		);
+
+		cy.get("[ui5-user-menu-item][text='Setting']")
+			.should("be.focused");
+	});
+
 	it("tests close event", () => {
 		cy.mount(
 			<>
@@ -968,7 +984,27 @@ describe("Responsiveness", () => {
 			.scrollTo("bottom");
 		cy.get("[ui5-user-menu]").shadow().find("[ui5-bar]").as("headerBar");
 		cy.get("@headerBar").find("[ui5-title]").contains("Alain Chevalier 1");
-		cy.get("@headerBar").find("[ui5-button]").should("have.length", 1);
+		cy.get("@headerBar").find("[ui5-button][slot='endContent']").should("have.length", 1);
+	});
+
+	it("popover header has no divider line (::before pseudo-element hidden)", () => {
+		cy.mount(
+			<>
+				<Button id="openUserMenuBtn">Open User Menu</Button>
+				<UserMenu open={true} opener="openUserMenuBtn">
+					<UserMenuAccount slot="accounts" titleText="Alain Chevalier 1"></UserMenuAccount>
+				</UserMenu>
+			</>
+		);
+
+		cy.get("[ui5-user-menu]").shadow()
+			.find("[ui5-responsive-popover]")
+			.shadow()
+			.find(".ui5-popup-header-root")
+			.then($el => {
+				const before = window.getComputedStyle($el[0], "::before");
+				expect(before.display).to.equal("none");
+			});
 	});
 
 	it("Event firing - 'ui5-check' after 'click' on user menu item", () => {
@@ -1313,6 +1349,26 @@ describe("InfoArea slot", () => {
 			});
 		});
 	});
+
+	it("info-area has 8px padding on all sides", () => {
+		cy.mount(
+			<>
+				<Button id="openUserMenuBtn">Open User Menu</Button>
+				<UserMenu open={true} opener="openUserMenuBtn">
+					<UserMenuAccount slot="accounts" titleText="Alain Chevalier"></UserMenuAccount>
+					<MessageStrip slot="infoArea" design="Information" hideCloseButton={true}>
+						All actions are recorded under the proxy audit log.
+					</MessageStrip>
+				</UserMenu>
+			</>
+		);
+
+		cy.get("[ui5-user-menu]").shadow().find(".ui5-user-menu-info-area")
+			.should("have.css", "padding-top", "8px")
+			.and("have.css", "padding-bottom", "8px")
+			.and("have.css", "padding-left", "8px")
+			.and("have.css", "padding-right", "8px");
+	});
 });
 
 describe("UserMenuItem", () => {
@@ -1578,7 +1634,7 @@ describe("UserMenuItem", () => {
 				.should("not.have.attr", "show-selection");
 		});
 
-		it("selection text has correct styling", () => {
+		it("selection text wraps instead of truncating", () => {
 			cy.mount(
 				<>
 					<Button id="openUserMenuBtn">Open User Menu</Button>
@@ -1596,9 +1652,8 @@ describe("UserMenuItem", () => {
 				.shadow()
 				.find(".ui5-user-menu-item-selection-text")
 				.should("have.css", "font-weight", "400")
-				.and("have.css", "white-space", "nowrap")
-				.and("have.css", "overflow", "hidden")
-				.and("have.css", "text-overflow", "ellipsis");
+				.and("not.have.css", "white-space", "nowrap")
+				.and("not.have.css", "text-overflow", "ellipsis");
 		});
 
 		it("text wrapper has column layout with gap", () => {

packages/fiori/src/UserMenu.ts

@@ -433,6 +433,7 @@ class UserMenu extends UI5Element {
 		this._titleMovedToHeader = false;
 		this._isScrolled = false;
 		this._setupObserver();
+		this._menuItems[0]?.getFocusDomRef()?.focus();
 		this.fireDecoratorEvent("open");
 	}
 

packages/fiori/src/UserMenuTemplate.tsx

@@ -57,6 +57,13 @@ export default function UserMenuTemplate(this: UserMenu) {
 						onClick={this._closeUserMenu}
 						slot="endContent"
 					 />}
+
+					{this._isPhone && this._titleMovedToHeader && <Button
+						icon={decline}
+						design="Transparent"
+						slot="startContent"
+						style="visibility: hidden; pointer-events: none;"
+					/>}
 				</Bar>
 
 				<div class="ui5-user-menu-header">

packages/fiori/src/themes/UserMenu.css

@@ -12,6 +12,14 @@
     padding: 0;
 }
 
+.ui5-user-menu-rp::part(header)::before {
+    display: none;
+}
+
+.ui5-user-menu-rp {
+    --_ui5_popup_header_shadow: none;
+}
+
 .ui5-user-menu-header {
     display: flex;
     flex-direction: column;
@@ -30,6 +38,10 @@
     padding: 0;
 }
 
+.ui5-user-menu-fixed-header::part(midContent) {
+    justify-content: center;
+}
+
 .ui5-user-menu-fixed-header [ui5-button] {
     margin-inline: 0.5rem;
     font-family: var(--sapFontSemiboldDuplexFamily);
@@ -178,8 +190,7 @@
     flex-direction: column;
     align-self: stretch;
     margin-block: 0.5rem;
-    padding-block: 0.5rem;
-    padding-inline: 0.5rem;
+    padding: 0.5rem;
     margin-inline: -0.5rem;
 }
 

packages/fiori/src/themes/UserMenuItem.css

@@ -40,7 +40,6 @@
 	font-size: var(--sapFontSize);
 	font-weight: normal;
 	color: var(--sapContent_LabelColor);
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
+	white-space: normal;
+	text-overflow: initial;
 }

packages/fiori/test/pages/UXCIntegration.html

@@ -155,18 +155,19 @@
 								   subtitle-text="david.wilson@sap.com"
 								   description="Project Manager">
 			</ui5-user-menu-account>
-			<ui5-user-menu-item icon="action-settings" text="Setting" data-id="setting"></ui5-user-menu-item>
+			<ui5-user-menu-item icon="action-settings" text="Settings" data-id="setting"></ui5-user-menu-item>
+			<ui5-user-menu-item icon="home" text="Default Landing Page" data-id="default-landing-page" show-selection>
+				<ui5-user-menu-item-group check-mode="Single">
+					<ui5-user-menu-item text="Home Page" data-id="home-page" checked></ui5-user-menu-item>
+					<ui5-user-menu-item text="Dashboard" data-id="dashboard"></ui5-user-menu-item>
+					<ui5-user-menu-item text="Admin Settings" data-id="admin-settings"></ui5-user-menu-item>
+				</ui5-user-menu-item-group>
+			</ui5-user-menu-item>
 			<ui5-user-menu-item icon="official-service" text="Legal Information">
 				<ui5-user-menu-item text="Terms of Use" data-id="terms-of-use"></ui5-user-menu-item>
 				<ui5-user-menu-item text="Private Policy" data-id="privacy-policy"></ui5-user-menu-item>
 			</ui5-user-menu-item>
 			<ui5-user-menu-item icon="message-information" text="About" data-id="about"></ui5-user-menu-item>
-			<ui5-user-menu-item icon="globe" text="Language" data-id="single-select" show-selection>
-				<ui5-user-menu-item-group check-mode="Single">
-					<ui5-user-menu-item text="English" data-id="single-select-item1" checked></ui5-user-menu-item>
-					<ui5-user-menu-item text="Deutsch" data-id="single-select-item2"></ui5-user-menu-item>
-				</ui5-user-menu-item-group>
-			</ui5-user-menu-item>
 		</ui5-user-menu>
 
 		<ui5-side-navigation id="side-navigation" class="sideNavigation" slot="sideContent" accessible-name="Main">

packages/fiori/test/pages/UserMenu.html

@@ -55,12 +55,19 @@
 						   subtitle-text="alian.chevalier@ariba.com"
 						   description="Account Manager">
 	</ui5-user-menu-account>
-	<ui5-user-menu-item icon="action-settings" text="Setting" data-id="setting"></ui5-user-menu-item>
+	<ui5-user-menu-item icon="action-settings" text="Settings" data-id="setting"></ui5-user-menu-item>
 	<ui5-user-menu-item icon="globe" text="Account action" data-id="account-action1"></ui5-user-menu-item>
 	<ui5-user-menu-item icon="collaborate" text="Product-specific account action" data-id="account-action2">
 		<ui5-user-menu-item icon="private" text="Private Policy" data-id="privacy-policy"></ui5-user-menu-item>
 		<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-item icon="home" text="Default Landing Page" data-id="default-landing-page" show-selection>
+		<ui5-user-menu-item-group check-mode="Single">
+			<ui5-user-menu-item text="Home Page" data-id="home-page" checked></ui5-user-menu-item>
+			<ui5-user-menu-item text="Dashboard" data-id="dashboard"></ui5-user-menu-item>
+			<ui5-user-menu-item text="Admin Settings" data-id="admin-settings"></ui5-user-menu-item>
+		</ui5-user-menu-item-group>
+	</ui5-user-menu-item>
 	<ui5-user-menu-item icon="official-service" text="Legal Information"></ui5-user-menu-item>
 	<ui5-user-menu-item text="Multiple Select" data-id="multiple-select">
 		<ui5-user-menu-item-group check-mode="Multiple">
@@ -87,7 +94,7 @@
 						   description="Delivery Manager, SAP SE"
 						   selected>
 	</ui5-user-menu-account>
-	<ui5-user-menu-item icon="action-settings" text="Setting" data-id="setting"></ui5-user-menu-item>
+	<ui5-user-menu-item icon="action-settings" text="Settings" data-id="setting"></ui5-user-menu-item>
 	<ui5-user-menu-item icon="globe" text="Product-specific account action" data-id="account-action1"></ui5-user-menu-item>
 	<ui5-user-menu-item icon="collaborate" text="Product-specific account action" data-id="account-action2">
 		<ui5-user-menu-item icon="private" text="Private Policy" data-id="privacy-policy"></ui5-user-menu-item>
@@ -107,7 +114,7 @@
 						   description="Delivery Manager, SAP SE"
 						   selected>
 	</ui5-user-menu-account>
-	<ui5-user-menu-item icon="action-settings" text="Setting" data-id="setting"></ui5-user-menu-item>
+	<ui5-user-menu-item icon="action-settings" text="Settings" data-id="setting"></ui5-user-menu-item>
 	<ui5-user-menu-item icon="globe" text="Product-specific account action" data-id="account-action1"></ui5-user-menu-item>
 	<ui5-user-menu-item icon="collaborate" text="Product-specific account action" data-id="account-action2">
 		<ui5-user-menu-item icon="private" text="Private Policy" data-id="privacy-policy"></ui5-user-menu-item>
@@ -146,7 +153,7 @@
 						   subtitle-text="david.wilson@sap.com"
 						   description="Account Manager">
 	</ui5-user-menu-account>
-	<ui5-user-menu-item icon="action-settings" text="Setting" data-id="setting"></ui5-user-menu-item>
+	<ui5-user-menu-item icon="action-settings" text="Settings" data-id="setting"></ui5-user-menu-item>
 	<ui5-user-menu-item icon="official-service" text="Legal Information"></ui5-user-menu-item>
 </ui5-user-menu>
 <ui5-title level="H5" class="header-title">Text Direction</ui5-title>

packages/fiori/test/pages/UserSettingsDialog.html

@@ -74,7 +74,14 @@
 						   description="Delivery Manager, SAP SE"
 						   selected>
 	</ui5-user-menu-account>
-	<ui5-user-menu-item icon="action-settings" text="Setting" data-id="setting"></ui5-user-menu-item>
+	<ui5-user-menu-item icon="action-settings" text="Settings" data-id="setting"></ui5-user-menu-item>
+	<ui5-user-menu-item icon="home" text="Default Landing Page" data-id="default-landing-page" show-selection>
+		<ui5-user-menu-item-group check-mode="Single">
+			<ui5-user-menu-item text="Home Page" data-id="home-page" checked></ui5-user-menu-item>
+			<ui5-user-menu-item text="Dashboard" data-id="dashboard"></ui5-user-menu-item>
+			<ui5-user-menu-item text="Admin Settings" data-id="admin-settings"></ui5-user-menu-item>
+		</ui5-user-menu-item-group>
+	</ui5-user-menu-item>
 </ui5-user-menu>
 
 <div style="border:1px solid black"></div>

packages/main/cypress/specs/Menu.cy.tsx

@@ -1596,4 +1596,46 @@ describe("Menu - Page Up/Down navigation", () => {
 
 		cy.get("@items").first().should("be.focused");
 	});
+});
+
+describe("Menu - Submenu phone header", () => {
+	beforeEach(() => {
+		cy.ui5SimulateDevice("phone");
+	});
+
+	it("submenu header back button has no margin-right gap", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu opener="btnOpen" open={true}>
+					<MenuItem text="Parent Item">
+						<MenuItem text="Sub Item 1"></MenuItem>
+					</MenuItem>
+				</Menu>
+			</>
+		);
+
+		cy.get("[ui5-menu-item][text='Parent Item']")
+			.shadow()
+			.find(".ui5-menu-back-button")
+			.should("have.css", "margin-right", "0px");
+	});
+
+	it("submenu header has a close button", () => {
+		cy.mount(
+			<>
+				<Button id="btnOpen">Open Menu</Button>
+				<Menu opener="btnOpen" open={true}>
+					<MenuItem text="Parent Item">
+						<MenuItem text="Sub Item 1"></MenuItem>
+					</MenuItem>
+				</Menu>
+			</>
+		);
+
+		cy.get("[ui5-menu-item][text='Parent Item']")
+			.shadow()
+			.find(".ui5-menu-close-button")
+			.should("exist");
+	});
 });

packages/main/src/MenuItemTemplate.tsx

@@ -6,6 +6,7 @@ import Button from "./Button.js";
 import List from "./List.js";
 import BusyIndicator from "./BusyIndicator.js";
 import navBackIcon from "@ui5/webcomponents-icons/dist/nav-back.js";
+import declineIcon from "@ui5/webcomponents-icons/dist/decline.js";
 import checkIcon from "@ui5/webcomponents-icons/dist/accept.js";
 import slimArrowRight from "@ui5/webcomponents-icons/dist/slim-arrow-right.js";
 import Icon from "./Icon.js";
@@ -134,6 +135,13 @@ function listItemPostContent(this: MenuItem) {
 								{this.text}
 							</div>
 						</div>
+						<Button
+							icon={declineIcon}
+							class="ui5-menu-close-button"
+							design="Transparent"
+							aria-label={this.labelCancel}
+							onClick={this._closeAll}
+						/>
 					</div >
 				</>
 			)

packages/main/src/themes/Menu.css

@@ -59,7 +59,10 @@
 }
 
 .ui5-menu-back-button {
-	margin-right: 1rem;
+}
+
+.ui5-menu-close-button {
+	margin-left: auto;
 }
 
 .ui5-menu-dialog-footer {

packages/website/docs/_samples/fiori/UserMenu/Advanced/main.js

@@ -14,6 +14,7 @@ import "@ui5/webcomponents-icons/dist/official-service.js";
 import "@ui5/webcomponents-icons/dist/private.js";
 import "@ui5/webcomponents-icons/dist/accelerated.js";
 import "@ui5/webcomponents-icons/dist/message-information.js";
+import "@ui5/webcomponents-icons/dist/home.js";
 
 const shellbar = document.getElementById("shellbar");
 const menu = document.getElementById("userMenu");

packages/website/docs/_samples/fiori/UserMenu/Advanced/sample.html

@@ -55,19 +55,20 @@
 						   subtitle-text="davud,wilson@sap.com"
 						   description="Project Manager">
 	</ui5-user-menu-account>
-	<ui5-user-menu-item icon="action-settings" text="Setting" data-id="setting"></ui5-user-menu-item>
+	<ui5-user-menu-item icon="action-settings" text="Settings" data-id="setting"></ui5-user-menu-item>
 	<ui5-user-menu-item icon="collaborate" text="Product-specific account action" data-id="product-action">
 		<ui5-user-menu-item text="Terms of Use" data-id="terms-of-use"></ui5-user-menu-item>
 		<ui5-user-menu-item text="Private Policy" data-id="privacy-policy"></ui5-user-menu-item>
 	</ui5-user-menu-item>
-	<ui5-user-menu-item icon="official-service" text="Legal Information"></ui5-user-menu-item>
-	<ui5-user-menu-item icon="message-information" text="About" data-id="about"></ui5-user-menu-item>
-	<ui5-user-menu-item icon="globe" text="Language" data-id="single-select" show-selection>
+	<ui5-user-menu-item icon="home" text="Default Landing Page" data-id="default-landing-page" show-selection>
 		<ui5-user-menu-item-group check-mode="Single">
-			<ui5-user-menu-item text="English" data-id="single-select-item1" checked></ui5-user-menu-item>
-			<ui5-user-menu-item text="Deutsch" data-id="single-select-item2"></ui5-user-menu-item>
+			<ui5-user-menu-item text="Home Page" data-id="home-page" checked></ui5-user-menu-item>
+			<ui5-user-menu-item text="Dashboard" data-id="dashboard"></ui5-user-menu-item>
+			<ui5-user-menu-item text="Admin Settings" data-id="admin-settings"></ui5-user-menu-item>
 		</ui5-user-menu-item-group>
 	</ui5-user-menu-item>
+	<ui5-user-menu-item icon="official-service" text="Legal Information"></ui5-user-menu-item>
+	<ui5-user-menu-item icon="message-information" text="About" data-id="about"></ui5-user-menu-item>
 </ui5-user-menu>
 
 <!-- playground-fold -->