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.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/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>