Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui5-user-menu): introduce show-edit-button property #10619

Merged
merged 6 commits into from
Jan 28, 2025
Merged

feat(ui5-user-menu): introduce show-edit-button property #10619

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
237e549
feat(ui5-user-menu): add a property to hide avatar icon for editing
dobromiraboycheva Jan 22, 2025
fd9faa5
feat(ui5-user-menu): add a property to hide avatar icon for editing
dobromiraboycheva Jan 22, 2025
ee6c722
feat(ui5-user-menu): introduce `hide-edit-avatar` property
dobromiraboycheva Jan 22, 2025
4a9894b
feat(ui5-user-menu): introduce `show-edit-button` property
dobromiraboycheva Jan 23, 2025
974fa39
Merge branch 'main' of https://github.com/SAP/ui5-webcomponents into …
dobromiraboycheva Jan 23, 2025
de8b914
Merge branch 'main' of https://github.com/SAP/ui5-webcomponents into …
dobromiraboycheva Jan 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions packages/fiori/cypress/specs/UserMenu.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,7 @@ describe("Avatar configuration", () => {
cy.get("@avatar").should("exist");
cy.get("@avatar").should("have.length", 1);
cy.get("@avatar").should("have.attr", "fallback-icon", "person-placeholder");
cy.get("@avatar").find("[ui5-tag]").should("not.exist");
});

it("tests initials", () => {
Expand Down Expand Up @@ -208,6 +209,25 @@ describe("Avatar configuration", () => {
cy.get("@image").should("have.length", 1);
cy.get("@image").should("have.attr", "src", "./../../test/pages/img/man_avatar_1.png");
});

it("tests showEditButton", () => {
cy.mount(html`<ui5-button id="openUserMenuBtn">Open User Menu</ui5-button>
<ui5-user-menu open opener="openUserMenuBtn" show-edit-button>
<ui5-user-menu-account slot="accounts"
title-text="Alain Chevalier 1"
subtitle-text="[email protected]"
description="Delivery Manager, SAP SE">
</ui5-user-menu-account>
</ui5-user-menu>`);
cy.get("[ui5-user-menu]").as("userMenu");
cy.get("@userMenu").should("exist");
cy.get("@userMenu").shadow().find("[ui5-avatar]").as("avatar");
cy.get("@avatar").should("exist");
cy.get("@avatar").should("have.length", 1);
cy.get("@avatar").should("have.attr", "fallback-icon", "person-placeholder");
cy.get("@avatar").find("[ui5-tag]").should("exist");
cy.get("@avatar").find("[ui5-tag]").should("have.length", 1);
});
});

describe("Events", () => {
Expand Down
10 changes: 10 additions & 0 deletions packages/fiori/src/UserMenu.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,16 @@ class UserMenu extends UI5Element {
@property({ type: Boolean })
showAddAccount = false;

/**
* Defines if the User menu shows edit button.
*
* @default false
* @public
* @since 2.7.0
*/
@property({ type: Boolean })
showEditButton = false;

/**
* Defines the menu items.
* @public
Expand Down
2 changes: 2 additions & 0 deletions packages/fiori/src/UserMenuTemplate.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,9 +136,11 @@ function headerContent(this: UserMenu) {
{this._selectedAccount.avatarSrc &&
<img src={this._selectedAccount.avatarSrc}/>
}
{this.showEditButton &&
<Tag slot="badge" wrappingType="None" design="Set1" colorScheme="5" title={this._editAvatarTooltip}>
<Icon slot="icon" name={edit}></Icon>
</Tag>
}
</Avatar>
{this._selectedAccount.titleText &&
<Title id="selected-account-title" class="ui5-pm-selected-account-title">{this._selectedAccount.titleText}</Title>
Expand Down
11 changes: 9 additions & 2 deletions packages/fiori/test/pages/UserMenu.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
</ui5-avatar>
<img slot="logo" src="./img/sap-logo-svg.svg" />
</ui5-shellbar>
<ui5-user-menu id="userMenuShellBar" show-manage-account show-other-accounts show-add-account>
<ui5-user-menu id="userMenuShellBar" show-manage-account show-other-accounts show-add-account show-edit-button>
<ui5-user-menu-account slot="accounts"
avatar-src="./img/man_avatar_1.png"
title-text="Alain Chevalier 1"
Expand Down Expand Up @@ -73,9 +73,16 @@
<ui5-user-menu-item icon="accelerated" text="Terms of Use" data-id="terms-of-use"></ui5-user-menu-item>
</ui5-user-menu-item>
</ui5-user-menu>

<ui5-title level="H5" class="header-title">Text Direction</ui5-title>
<ui5-switch id="direction" text-on="RTL" text-off="LTR"></ui5-switch>

<script>
const direction = document.getElementById("direction");

direction.addEventListener("ui5-change", function() {
document.body.setAttribute("dir", direction.checked ? "rtl" : "ltr");
window["sap-ui-webcomponents-bundle"].applyDirection();
});
const menu = document.getElementById("userMenu");
document.getElementById("btnOpenUserMenu").addEventListener("click", function () {
if(menu.open){
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/_samples/fiori/UserMenu/Advanced/sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
</ui5-avatar>
<img slot="logo" src="../assets/images/sap-logo-svg.svg" />
</ui5-shellbar>
<ui5-user-menu id="userMenu" show-manage-account show-other-accounts show-add-account>
<ui5-user-menu id="userMenu" show-manage-account show-other-accounts show-add-account show-edit-button>
<ui5-user-menu-account slot="accounts"
avatar-src="../assets/images/avatars/man_avatar_3.png"
title-text="Alain Chevalier 1"
Expand Down
Loading