From 842bdc2e425df72a95c5d65cf30fefc721707017 Mon Sep 17 00:00:00 2001 From: Dobromira Boycheva Date: Wed, 12 Aug 2026 10:23:13 +0300 Subject: [PATCH 1/3] chore(ui5-user-menu): spec updates and UX fixes --- packages/fiori/cypress/specs/UserMenu.cy.tsx | 49 +++++++++++++++++-- packages/fiori/src/UserMenuTemplate.tsx | 7 +++ packages/fiori/src/themes/UserMenu.css | 15 +++++- packages/fiori/src/themes/UserMenuItem.css | 3 -- packages/fiori/test/pages/UXCIntegration.html | 15 +++--- packages/fiori/test/pages/UserMenu.html | 15 ++++-- .../fiori/test/pages/UserSettingsDialog.html | 9 +++- packages/main/cypress/specs/Menu.cy.tsx | 42 ++++++++++++++++ packages/main/src/MenuItemTemplate.tsx | 8 +++ packages/main/src/themes/Menu.css | 5 +- .../_samples/fiori/UserMenu/Advanced/main.js | 1 + .../fiori/UserMenu/Advanced/sample.html | 13 ++--- .../fiori/UserMenu/Advanced/sample.tsx | 14 +++--- .../_samples/fiori/UserMenu/Basic/sample.html | 2 +- .../_samples/fiori/UserMenu/Basic/sample.tsx | 2 +- .../UserSettingsDialog/Basic/sample.html | 9 +++- .../fiori/UserSettingsDialog/Basic/sample.tsx | 12 ++++- .../UserSettingsDialog/SaveMode/sample.html | 9 +++- .../UserSettingsDialog/SaveMode/sample.tsx | 12 ++++- 19 files changed, 202 insertions(+), 40 deletions(-) diff --git a/packages/fiori/cypress/specs/UserMenu.cy.tsx b/packages/fiori/cypress/specs/UserMenu.cy.tsx index 669b45488df0b..056d2708605e7 100644 --- a/packages/fiori/cypress/specs/UserMenu.cy.tsx +++ b/packages/fiori/cypress/specs/UserMenu.cy.tsx @@ -971,6 +971,28 @@ describe("Responsiveness", () => { cy.get("@headerBar").find("[ui5-button]").should("have.length", 1); }); + it("popover header has no divider line (::before pseudo-element hidden)", () => { + cy.mount( + <> + + + + + + ); + + cy.get("[ui5-user-menu]").shadow() + .find("[ui5-responsive-popover]") + .shadow() + .find("[ui5-dialog]") + .shadow() + .find(".ui5-popup-header-root") + .then($el => { + const before = window.getComputedStyle($el[0], "::before"); + expect(before.height).to.equal("0px"); + }); + }); + it("Event firing - 'ui5-check' after 'click' on user menu item", () => { cy.mount( <> @@ -1313,6 +1335,26 @@ describe("InfoArea slot", () => { }); }); }); + + it("info-area has 8px padding on all sides", () => { + cy.mount( + <> + + + + + All actions are recorded under the proxy audit log. + + + + ); + + 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 +1620,7 @@ describe("UserMenuItem", () => { .should("not.have.attr", "show-selection"); }); - it("selection text has correct styling", () => { + it("selection text wraps instead of truncating", () => { cy.mount( <> @@ -1596,9 +1638,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", () => { diff --git a/packages/fiori/src/UserMenuTemplate.tsx b/packages/fiori/src/UserMenuTemplate.tsx index 999b871b3357c..3c0f2bbac86ba 100644 --- a/packages/fiori/src/UserMenuTemplate.tsx +++ b/packages/fiori/src/UserMenuTemplate.tsx @@ -57,6 +57,13 @@ export default function UserMenuTemplate(this: UserMenu) { onClick={this._closeUserMenu} slot="endContent" />} + + {this._isPhone && this._titleMovedToHeader && + + + + + + + ); + + 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( + <> + + + + + + + + ); + + cy.get("[ui5-menu-item][text='Parent Item']") + .shadow() + .find(".ui5-menu-close-button") + .should("exist"); + }); }); \ No newline at end of file diff --git a/packages/main/src/MenuItemTemplate.tsx b/packages/main/src/MenuItemTemplate.tsx index f9b75d0b0cd46..df482bda91a4a 100644 --- a/packages/main/src/MenuItemTemplate.tsx +++ b/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} + + + + + + + + ); + + cy.get("[ui5-user-menu-item][text='Setting']") + .should("be.focused"); + }); + it("tests close event", () => { cy.mount( <> diff --git a/packages/fiori/src/UserMenu.ts b/packages/fiori/src/UserMenu.ts index e8b26d0be842a..ef89551a20364 100644 --- a/packages/fiori/src/UserMenu.ts +++ b/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"); }