From d3dcfa0673971899f0b92fa83972839f43b09715 Mon Sep 17 00:00:00 2001 From: Dobromira Boycheva Date: Tue, 14 Oct 2025 09:21:28 +0300 Subject: [PATCH 1/2] feat(ui5-user-menu): introduce new properties for additional user info --- packages/fiori/cypress/specs/UserMenu.cy.tsx | 92 ++++++++- packages/fiori/src/UserMenuAccount.ts | 9 + packages/fiori/src/UserMenuTemplate.tsx | 3 + packages/fiori/src/themes/UserMenu.css | 8 + packages/fiori/test/pages/DynamicPage.html | 205 ------------------- packages/fiori/test/pages/UserMenu.html | 1 + 6 files changed, 112 insertions(+), 206 deletions(-) delete mode 100644 packages/fiori/test/pages/DynamicPage.html diff --git a/packages/fiori/cypress/specs/UserMenu.cy.tsx b/packages/fiori/cypress/specs/UserMenu.cy.tsx index a0fae3faeecb..79b245a98a62 100644 --- a/packages/fiori/cypress/specs/UserMenu.cy.tsx +++ b/packages/fiori/cypress/specs/UserMenu.cy.tsx @@ -27,7 +27,97 @@ describe("Initial rendering", () => { cy.get("@responsivePopover").find("[ui5-button]").should("have.length", 1); }); - it("tests config show-manage-account", () => { + it("tests title", () => { + cy.mount( + <> + + + + + + + ); + cy.get("[ui5-user-menu]").as("userMenu"); + cy.get("@userMenu").should("exist"); + cy.get("@userMenu").shadow().find("[ui5-responsive-popover]").as("responsivePopover"); + cy.get("@responsivePopover").should("exist"); + cy.get("@responsivePopover").find("[ui5-text]").as("name"); + cy.get("@name").should("have.length", 1); + cy.get("@name").contains("Alain Chevalier"); + cy.get("@name").should("have.class", "ui5-user-menu-selected-account-title"); + + }); + + it("tests subtitle", () => { + cy.mount( + <> + + + + + + + ); + cy.get("[ui5-user-menu]").as("userMenu"); + cy.get("@userMenu").should("exist"); + cy.get("@userMenu").shadow().find("[ui5-responsive-popover]").as("responsivePopover"); + cy.get("@responsivePopover").should("exist"); + cy.get("@responsivePopover").find("[ui5-text]").as("email"); + cy.get("@email").should("have.length", 1); + cy.get("@email").contains("Alain.Chevalier@sap.com"); + cy.get("@email").should("have.class", "ui5-user-menu-selected-account-subtitleText"); + }); + + it("tests description", () => { + cy.mount( + <> + + + + + + + ); + cy.get("[ui5-user-menu]").as("userMenu"); + cy.get("@userMenu").should("exist"); + cy.get("@userMenu").shadow().find("[ui5-responsive-popover]").as("responsivePopover"); + cy.get("@responsivePopover").should("exist"); + cy.get("@responsivePopover").find("[ui5-text]").as("role"); + cy.get("@role").should("have.length", 1); + cy.get("@role").contains("Delivery Manager, SAP SE"); + cy.get("@role").should("have.class", "ui5-user-menu-selected-account-description"); + }); + + it("tests additional info", () => { + cy.mount( + <> + + + + + + + ); + cy.get("[ui5-user-menu]").as("userMenu"); + cy.get("@userMenu").should("exist"); + cy.get("@userMenu").shadow().find("[ui5-responsive-popover]").as("responsivePopover"); + cy.get("@responsivePopover").should("exist"); + cy.get("@responsivePopover").find("[ui5-text]").as("info"); + cy.get("@info").should("have.length", 1); + cy.get("@info").contains("Primary Employment"); + cy.get("@info").should("have.class", "ui5-user-menu-selected-account-additional-info"); + }); + + + it("tests config show-manage-account", () => { cy.mount( <> diff --git a/packages/fiori/src/UserMenuAccount.ts b/packages/fiori/src/UserMenuAccount.ts index 75bcde61f7da..e45dc6e4af90 100644 --- a/packages/fiori/src/UserMenuAccount.ts +++ b/packages/fiori/src/UserMenuAccount.ts @@ -65,6 +65,15 @@ class UserMenuAccount extends UI5Element { @property({ type: String }) description = ""; + /** + * Defines additional information for the user. + * + * @default "" + * @public + */ + @property({ type: String }) + additionalInfo = ""; + /** * Defines if the user is selected. * diff --git a/packages/fiori/src/UserMenuTemplate.tsx b/packages/fiori/src/UserMenuTemplate.tsx index 462ff69db0c2..6843ef5aeb7f 100644 --- a/packages/fiori/src/UserMenuTemplate.tsx +++ b/packages/fiori/src/UserMenuTemplate.tsx @@ -115,6 +115,9 @@ function headerContent(this: UserMenu) { {this._selectedAccount.description && {this._selectedAccount.description} } + {this._selectedAccount.additionalInfo && + {this._selectedAccount.additionalInfo} + } {this.showManageAccount && diff --git a/packages/fiori/src/themes/UserMenu.css b/packages/fiori/src/themes/UserMenu.css index 3ae28fd0bf80..9e69fef0c6a0 100644 --- a/packages/fiori/src/themes/UserMenu.css +++ b/packages/fiori/src/themes/UserMenu.css @@ -80,6 +80,14 @@ color: var(--sapContent_LabelColor); } +.ui5-user-menu-selected-account-additional-info { + margin-top: 0.25rem; + text-align: center; + font-family: var(--sapFontFamily); + font-size: var(--sapFontSize); + color: var(--sapContent_LabelColor); +} + .ui5-user-menu-manage-account-btn { font-family: var(--sapFontSemiboldDuplexFamily); margin-block-start: 1rem; diff --git a/packages/fiori/test/pages/DynamicPage.html b/packages/fiori/test/pages/DynamicPage.html deleted file mode 100644 index 7012c33409dd..000000000000 --- a/packages/fiori/test/pages/DynamicPage.html +++ /dev/null @@ -1,205 +0,0 @@ - - - - - - - Dynamic page - - - - - - - - - - - - - - Man - Shoes - Running Shoes - - - Special Running Shoe - -
- - Special Running Shoe -
- -

PO-48865

-

PO-48865

- - Special 157.4M EUR - - - - - - - - - - - - - - -
- -
- Availability -

In Stock

-
-
- Price -

379.99 USD

-
-
- Product Description -

Super-lightweight cushioning propels you forward from landing to toe-off and has a fast, snappy feel.

-
-
- - - - 10 inch Portable DVD - 7 inch WidescreenPortable DVD Player w MP3 - Astro Laptop 1516 - Astro Phone 6 - Audio/Video Cable Kit - 4m - Beam Breaker B-1 - Beam Breaker B-2 - Beam Breaker B-3 - Beam Breaker B-4 - Camcorder View - Benda Laptop 1408 - Cepat Tablet 10.5 - 10 inch Portable DVD - 7 inch WidescreenPortable DVD Player w MP3 - Astro Laptop 1516 - Astro Phone 6 - Audio/Video Cable Kit - 4m - Beam Breaker B-1 - Beam Breaker B-2 - Beam Breaker B-3 - Beam Breaker B-4 - Camcorder View - Benda Laptop 1408 - Cepat Tablet 10.5 - 10 inch Portable DVD - 7 inch WidescreenPortable DVD Player w MP3 - Astro Laptop 1516 - Astro Phone 6 - Audio/Video Cable Kit - 4m - Beam Breaker B-1 - Beam Breaker B-2 - Beam Breaker B-3 - Beam Breaker B-4 - Camcorder View - Benda Laptop 1408 - Cepat Tablet 10.5 - 10 inch Portable DVD - 7 inch WidescreenPortable DVD Player w MP3 - Astro Laptop 1516 - Astro Phone 6 - Audio/Video Cable Kit - 4m - Beam Breaker B-1 - Beam Breaker B-2 - Beam Breaker B-3 - Beam Breaker B-4 - Camcorder View - Benda Laptop 1408 - Cepat Tablet 10.5 - 10 inch Portable DVD - 7 inch WidescreenPortable DVD Player w MP3 - Astro Laptop 1516 - Astro Phone 6 - Audio/Video Cable Kit - 4m - Beam Breaker B-1 - Beam Breaker B-2 - Beam Breaker B-3 - Beam Breaker B-4 - Camcorder View - Benda Laptop 1408 - Cepat Tablet 10.5 - 10 inch Portable DVD - 7 inch WidescreenPortable DVD Player w MP3 - Astro Laptop 1516 - Astro Phone 6 - Audio/Video Cable Kit - 4m - Beam Breaker B-1 - Beam Breaker B-2 - Beam Breaker B-3 - Beam Breaker B-4 - Camcorder View - Benda Laptop 1408 - Cepat Tablet 10.5 - 10 inch Portable DVD - 7 inch WidescreenPortable DVD Player w MP3 - Astro Laptop 1516 - Astro Phone 6 - Audio/Video Cable Kit - 4m - Beam Breaker B-1 - Beam Breaker B-2 - Beam Breaker B-3 - Beam Breaker B-4 - Camcorder View - Benda Laptop 1408 - Cepat Tablet 10.5 - 10 inch Portable DVD - 7 inch WidescreenPortable DVD Player w MP3 - Astro Laptop 1516 - Astro Phone 6 - Audio/Video Cable Kit - 4m - Beam Breaker B-1 - Beam Breaker B-2 - Beam Breaker B-3 - Beam Breaker B-4 - Camcorder View - Benda Laptop 1408 - Cepat Tablet 10.5 - Gladiator MX - - - - Save - Close - - - - - - diff --git a/packages/fiori/test/pages/UserMenu.html b/packages/fiori/test/pages/UserMenu.html index 4c2002d15565..b889d66cebfb 100644 --- a/packages/fiori/test/pages/UserMenu.html +++ b/packages/fiori/test/pages/UserMenu.html @@ -36,6 +36,7 @@ title-text="Alain Chevalier 1" subtitle-text="alian.chevalier@sap.com" description="Delivery Manager, SAP SE" + additional-info="Primary Employment" selected> Date: Tue, 14 Oct 2025 09:31:21 +0300 Subject: [PATCH 2/2] feat(ui5-user-menu): introduce new properties for additional user info --- packages/fiori/test/pages/DynamicPage.html | 205 +++++++++++++++++++++ 1 file changed, 205 insertions(+) create mode 100644 packages/fiori/test/pages/DynamicPage.html diff --git a/packages/fiori/test/pages/DynamicPage.html b/packages/fiori/test/pages/DynamicPage.html new file mode 100644 index 000000000000..7012c33409dd --- /dev/null +++ b/packages/fiori/test/pages/DynamicPage.html @@ -0,0 +1,205 @@ + + + + + + + Dynamic page + + + + + + + + + + + + + + Man + Shoes + Running Shoes + + + Special Running Shoe + +
+ + Special Running Shoe +
+ +

PO-48865

+

PO-48865

+ + Special 157.4M EUR + + + + + + + + + + + + + + +
+ +
+ Availability +

In Stock

+
+
+ Price +

379.99 USD

+
+
+ Product Description +

Super-lightweight cushioning propels you forward from landing to toe-off and has a fast, snappy feel.

+
+
+ + + + 10 inch Portable DVD + 7 inch WidescreenPortable DVD Player w MP3 + Astro Laptop 1516 + Astro Phone 6 + Audio/Video Cable Kit - 4m + Beam Breaker B-1 + Beam Breaker B-2 + Beam Breaker B-3 + Beam Breaker B-4 + Camcorder View + Benda Laptop 1408 + Cepat Tablet 10.5 + 10 inch Portable DVD + 7 inch WidescreenPortable DVD Player w MP3 + Astro Laptop 1516 + Astro Phone 6 + Audio/Video Cable Kit - 4m + Beam Breaker B-1 + Beam Breaker B-2 + Beam Breaker B-3 + Beam Breaker B-4 + Camcorder View + Benda Laptop 1408 + Cepat Tablet 10.5 + 10 inch Portable DVD + 7 inch WidescreenPortable DVD Player w MP3 + Astro Laptop 1516 + Astro Phone 6 + Audio/Video Cable Kit - 4m + Beam Breaker B-1 + Beam Breaker B-2 + Beam Breaker B-3 + Beam Breaker B-4 + Camcorder View + Benda Laptop 1408 + Cepat Tablet 10.5 + 10 inch Portable DVD + 7 inch WidescreenPortable DVD Player w MP3 + Astro Laptop 1516 + Astro Phone 6 + Audio/Video Cable Kit - 4m + Beam Breaker B-1 + Beam Breaker B-2 + Beam Breaker B-3 + Beam Breaker B-4 + Camcorder View + Benda Laptop 1408 + Cepat Tablet 10.5 + 10 inch Portable DVD + 7 inch WidescreenPortable DVD Player w MP3 + Astro Laptop 1516 + Astro Phone 6 + Audio/Video Cable Kit - 4m + Beam Breaker B-1 + Beam Breaker B-2 + Beam Breaker B-3 + Beam Breaker B-4 + Camcorder View + Benda Laptop 1408 + Cepat Tablet 10.5 + 10 inch Portable DVD + 7 inch WidescreenPortable DVD Player w MP3 + Astro Laptop 1516 + Astro Phone 6 + Audio/Video Cable Kit - 4m + Beam Breaker B-1 + Beam Breaker B-2 + Beam Breaker B-3 + Beam Breaker B-4 + Camcorder View + Benda Laptop 1408 + Cepat Tablet 10.5 + 10 inch Portable DVD + 7 inch WidescreenPortable DVD Player w MP3 + Astro Laptop 1516 + Astro Phone 6 + Audio/Video Cable Kit - 4m + Beam Breaker B-1 + Beam Breaker B-2 + Beam Breaker B-3 + Beam Breaker B-4 + Camcorder View + Benda Laptop 1408 + Cepat Tablet 10.5 + 10 inch Portable DVD + 7 inch WidescreenPortable DVD Player w MP3 + Astro Laptop 1516 + Astro Phone 6 + Audio/Video Cable Kit - 4m + Beam Breaker B-1 + Beam Breaker B-2 + Beam Breaker B-3 + Beam Breaker B-4 + Camcorder View + Benda Laptop 1408 + Cepat Tablet 10.5 + Gladiator MX + + + + Save + Close + + + + + +