diff --git a/packages/fiori/cypress/specs/UserMenu.cy.tsx b/packages/fiori/cypress/specs/UserMenu.cy.tsx index a9f0ae62ea6ed..b686142bb85b3 100644 --- a/packages/fiori/cypress/specs/UserMenu.cy.tsx +++ b/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( + <> + + + + + + + + ); + + cy.get("[ui5-user-menu-item][text='Setting']") + .should("be.focused"); + }); + it("tests close event", () => { cy.mount( <> @@ -970,7 +986,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( + <> + + + + + + ); + + 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 +1351,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", () => { @@ -1580,7 +1636,7 @@ describe("UserMenuItem", () => { .should("not.have.attr", "show-selection"); }); - it("selection text has correct styling", () => { + it("selection text wraps instead of truncating", () => { cy.mount( <> @@ -1598,9 +1654,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/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"); } diff --git a/packages/fiori/src/UserMenuTemplate.tsx b/packages/fiori/src/UserMenuTemplate.tsx index 29ea8379b50ea..953eb08668dad 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} +