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

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

@@ -877,6 +877,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(
 			<>
@@ -970,7 +986,74 @@ 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("submenu header on phone has close button in UserMenuItem", () => {
+		cy.ui5SimulateDevice("phone");
+		cy.mount(
+			<>
+				<Button id="openUserMenuBtn">Open User Menu</Button>
+				<UserMenu open={true} opener="openUserMenuBtn">
+					<UserMenuAccount slot="accounts" titleText="Alain Chevalier 1"></UserMenuAccount>
+					<UserMenuItem text="Settings">
+						<UserMenuItem text="Appearance"></UserMenuItem>
+					</UserMenuItem>
+				</UserMenu>
+			</>
+		);
+
+		cy.get("[ui5-user-menu-item][text='Settings']")
+			.ui5MenuItemClick();
+
+		cy.get("[ui5-user-menu-item][text='Settings']")
+			.shadow()
+			.find("[ui5-responsive-popover]")
+			.should("have.attr", "open");
+
+		cy.get("[ui5-user-menu-item][text='Settings']")
+			.shadow()
+			.find(".ui5-menu-close-button")
+			.should("exist");
+	});
+
+	it("submenu header on desktop has no close button in UserMenuItem", () => {
+		cy.mount(
+			<>
+				<Button id="openUserMenuBtn">Open User Menu</Button>
+				<UserMenu open={true} opener="openUserMenuBtn">
+					<UserMenuAccount slot="accounts" titleText="Alain Chevalier 1"></UserMenuAccount>
+					<UserMenuItem text="Settings">
+						<UserMenuItem text="Appearance"></UserMenuItem>
+					</UserMenuItem>
+				</UserMenu>
+			</>
+		);
+
+		cy.get("[ui5-user-menu-item][text='Settings']")
+			.shadow()
+			.find(".ui5-menu-close-button")
+			.should("not.exist");
+	});
+
+	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", () => {
@@ -1315,6 +1398,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", () => {
@@ -1580,7 +1683,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>
@@ -1598,9 +1701,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/UserMenuItemTemplate.tsx

@@ -1,17 +1,163 @@
 import type UserMenuItem from "./UserMenuItem.js";
 import MenuItemTemplate from "@ui5/webcomponents/dist/MenuItemTemplate.js";
 import type { MenuItemHooks } from "@ui5/webcomponents/dist/MenuItemTemplate.js";
+import ListItemTemplate from "@ui5/webcomponents/dist/ListItemTemplate.js";
+import type { ListItemHooks } from "@ui5/webcomponents/dist/ListItemTemplate.js";
+import ResponsivePopover from "@ui5/webcomponents/dist/ResponsivePopover.js";
+import Button from "@ui5/webcomponents/dist/Button.js";
+import List from "@ui5/webcomponents/dist/List.js";
+import BusyIndicator from "@ui5/webcomponents/dist/BusyIndicator.js";
+import Icon from "@ui5/webcomponents/dist/Icon.js";
+import PopoverPlacement from "@ui5/webcomponents/dist/types/PopoverPlacement.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";
 
 export default function UserMenuItemTemplate(this: UserMenuItem) {
-	const hooks: Partial<MenuItemHooks> = {};
+	if (this.isPhone) {
+		return phoneTemplate.call(this);
+	}
 
+	const hooks: Partial<MenuItemHooks> = {};
 	if (this.showSelection) {
 		hooks.menuItemTextContent = userMenuItemTextContent;
 	}
-
 	return [MenuItemTemplate.call(this, hooks)];
 }
 
+function phoneTemplate(this: UserMenuItem) {
+	const hooks: Partial<ListItemHooks> = {
+		iconBegin(this: UserMenuItem) {
+			if (this.hasIcon) {
+				return <Icon class="ui5-li-icon" name={this.icon} />;
+			}
+			if (this._siblingsWithIcon) {
+				return <div class="ui5-menu-item-dummy-icon"></div>;
+			}
+		},
+		listItemContent(this: UserMenuItem) {
+			return (<>
+				{this.showSelection ? (
+					<div class="ui5-user-menu-item-text-wrapper">
+						{this.text && <div class="ui5-menu-item-text">{this.text}</div>}
+						{this._selectedSubItemText &&
+							<div class="ui5-user-menu-item-selection-text">{this._selectedSubItemText}</div>
+						}
+					</div>
+				) : (
+					<>{this.text && <div class="ui5-menu-item-text">{this.text}</div>}</>
+				)}
+				{rightContent.call(this)}
+				{checkmarkContent.call(this)}
+			</>);
+		},
+	};
+
+	return [
+		ListItemTemplate.call(this, hooks),
+		phoneSubmenuPopover.call(this),
+	];
+}
+
+function checkmarkContent(this: UserMenuItem) {
+	return !this._markChecked ? "" : (
+		<div class="ui5-menu-item-checked">
+			<Icon name={checkIcon} class="ui5-menu-item-icon-checked" />
+		</div>
+	);
+}
+
+function rightContent(this: UserMenuItem) {
+	switch (true) {
+	case this.hasSubmenu:
+		return (
+			<div class="ui5-menu-item-submenu-icon">
+				<Icon part="subicon" name={slimArrowRight} class="ui5-menu-item-icon-end" />
+			</div>
+		);
+	case this.hasEndContent:
+		return (
+			<div class="ui5-menu-item-end-content" role="group" aria-label={this.endContentAccessibleName}>
+				<slot name="endContent" onKeyDown={this._endContentKeyDown}></slot>
+			</div>
+		);
+	case !!this.additionalText:
+		return (
+			<span part="additional-text" class="ui5-li-additional-text" aria-hidden={this._accInfo.ariaHidden}>
+				{this.additionalText}
+			</span>
+		);
+	}
+}
+
+function phoneSubmenuPopover(this: UserMenuItem) {
+	return this.hasSubmenu && <ResponsivePopover
+		id={`${this._id}-menu-rp`}
+		class="ui5-menu-rp ui5-menu-rp-sub-menu"
+		preventInitialFocus={true}
+		preventFocusRestore={true}
+		hideArrow={true}
+		allowTargetOverlap={true}
+		placement={PopoverPlacement.End}
+		verticalAlign="Top"
+		accessibleName={this.accessibleNameText}
+		onBeforeOpen={this._beforePopoverOpen}
+		onOpen={this._afterPopoverOpen}
+		onBeforeClose={this._beforePopoverClose}
+		onClose={this._afterPopoverClose}
+	>
+		<div slot="header" class="ui5-menu-dialog-header">
+			<Button
+				icon={navBackIcon}
+				class="ui5-menu-back-button"
+				design="Transparent"
+				aria-label={this.labelBack}
+				onClick={this._close}
+			/>
+			<div class="ui5-menu-dialog-title">
+				<div>{this.text}</div>
+			</div>
+			<Button
+				icon={declineIcon}
+				class="ui5-menu-close-button"
+				design="Transparent"
+				aria-label={this.labelCancel}
+				onClick={this._closeAll}
+			/>
+		</div>
+
+		<div
+			id={`${this._id}-menu-main`}
+			class={this.loading ? "menu-busy-indicator-main" : ""}
+			aria-busy={this.loading}
+		>
+			{this.items.length ? (
+				<List
+					id={`${this._id}-menu-list`}
+					selectionMode="None"
+					separators="None"
+					accessibleRole="Menu"
+					loading={this.loading}
+					loadingDelay={this.loadingDelay}
+					onMouseOver={this._itemMouseOver}
+					onKeyDown={this._itemKeyDown}
+					onKeyUp={this._itemKeyUp}
+					onui5-close-menu={this._close}
+					onui5-exit-end-content={this._navigateOutOfEndContent}
+				>
+					<slot></slot>
+				</List>
+			) : this.loading && <BusyIndicator
+				id={`${this._id}-menu-busy-indicator`}
+				delay={this.loadingDelay}
+				class="ui5-menu-busy-indicator"
+				active={true}
+			/>}
+		</div>
+	</ResponsivePopover>;
+}
+
 function userMenuItemTextContent(this: UserMenuItem) {
 	return (
 		<div class="ui5-user-menu-item-text-wrapper">

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;
@@ -25,11 +33,23 @@
 	box-shadow: none;
 }
 
+.ui5-user-menu-fixed-header::part(bar) {
+    position: relative;
+}
+
 .ui5-user-menu-fixed-header::part(startContent),
 .ui5-user-menu-fixed-header::part(endContent) {
     padding: 0;
 }
 
+.ui5-user-menu-fixed-header::part(midContent) {
+    position: absolute;
+    left: 50%;
+    transform: translateX(-50%);
+    justify-content: center;
+    pointer-events: none;
+}
+
 .ui5-user-menu-fixed-header [ui5-button] {
     margin-inline: 0.5rem;
     font-family: var(--sapFontSemiboldDuplexFamily);
@@ -178,8 +198,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,10 @@
 	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;
+}
+
+.ui5-menu-close-button {
+	margin-left: auto;
 }