Skip to content

Commit d0758fd

Browse files
adrian-bobevadrian-bobev
authored
feat(ui5-user-menu): add item groups with checkable menu items (#11832)
1 parent ada1290 commit d0758fd

File tree

8 files changed

+116
-0
lines changed

8 files changed

+116
-0
lines changed

‎packages/fiori/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ such as a common header (ShellBar).
3636
| User Menu | `ui5-user-menu` | `import "@ui5/webcomponents-fiori/dist/UserMenu.js";` |
3737
| User Menu Account | `ui5-user-menu-account` | `import "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";` |
3838
| User Menu Item | `ui5-user-menu-item` | `import "@ui5/webcomponents-fiori/dist/UserMenuItem.js";` |
39+
| User Menu Item Group | `ui5-user-menu-item-group` | `import "@ui5/webcomponents-fiori/dist/UserMenuItemGroup.js";` |
3940
| User Settings Dialog | `ui5-user-settings-dialog` | `import "@ui5/webcomponents-fiori/dist/UserSettingsDialog.js";` |
4041
| User Settings Item | `ui5-user-settings-item` | `import "@ui5/webcomponents-fiori/dist/UserSettingsItem.js";` |
4142
| User Settings View | `ui5-user-settings-view` | `import "@ui5/webcomponents-fiori/dist/UserSettingsView.js";` |

‎packages/fiori/cypress/specs/UserMenu.cy.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import UserMenu from "../../src/UserMenu.js";
22
import UserMenuAccount from "../../src/UserMenuAccount.js";
33
import UserMenuItem from "../../src/UserMenuItem.js";
4+
import UserMenuItemGroup from "../../src/UserMenuItemGroup.js";
45

56
import actionSettings from "@ui5/webcomponents-icons/dist/action-settings.js";
67
import Button from "@ui5/webcomponents/dist/Button.js";
@@ -727,4 +728,32 @@ describe("Responsiveness", () => {
727728
cy.get("@headerBar").find("[ui5-title]").contains("Alain Chevalier 1");
728729
cy.get("@headerBar").find("[ui5-button]").should("have.length", 1);
729730
});
731+
732+
it("Event firing - 'ui5-check' after 'click' on user menu item", () => {
733+
cy.mount(
734+
<>
735+
<Button id="btnOpen">Open UserMenu</Button>
736+
<UserMenu open={true} opener="btnOpen">
737+
<UserMenuItemGroup checkMode="Single">
738+
<UserMenuItem text="Item 1"></UserMenuItem>
739+
</UserMenuItemGroup>
740+
</UserMenu>
741+
</>
742+
);
743+
744+
cy.get("[ui5-user-menu]").as("userMenu");
745+
cy.get("@userMenu")
746+
.find("[ui5-user-menu-item]")
747+
.as("userMenuItem");
748+
749+
cy.get("@userMenu")
750+
.then($userMenu => {
751+
$userMenu.get(0).addEventListener("ui5-check", cy.stub().as("checked"));
752+
});
753+
754+
cy.get("@userMenuItem").first().click();
755+
756+
cy.get("@checked")
757+
.should("have.been.calledOnce");
758+
});
730759
});

‎packages/fiori/src/UserMenu.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -354,6 +354,8 @@ class UserMenu extends UI5Element {
354354
_handleMenuItemClick(e: CustomEvent<ListItemClickEventDetail>) {
355355
const item = e.detail.item as UserMenuItem; // imrove: improve this ideally without "as" cating
356356

357+
item._updateCheckedState();
358+
357359
if (!item._popover) {
358360
const eventPrevented = !this.fireDecoratorEvent("item-click", {
359361
"item": item,

‎packages/fiori/src/UserMenuItemGroup.ts‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import customElement from "@ui5/webcomponents-base/dist/decorators/customElement.js";
2+
import MenuItemGroup from "@ui5/webcomponents/dist/MenuItemGroup.js";
3+
import UserMenuItemGroupTemplate from "./UserMenuItemGroupTemplate.js";
4+
5+
/**
6+
* @class
7+
*
8+
* ### Overview
9+
*
10+
* The `ui5-user-menu-item-group` component represents a group of items designed for use inside a `ui5-user-menu`.
11+
* Items belonging to the same group should be wrapped by a `ui5-user-menu-item-group`.
12+
* Each group can have an `itemCheckMode` property, which defines the check mode for the items within the group.
13+
* The possible values for `itemCheckMode` are:
14+
* - 'None' (default) - no items can be checked
15+
* - 'Single' - Only one item can be checked at a time
16+
* - 'Multiple' - Multiple items can be checked simultaneously
17+
*
18+
* **Note:** If the `itemCheckMode` property is set to 'Single', only one item can remain checked at any given time.
19+
* If multiple items are marked as checked, the last checked item will take precedence.
20+
*
21+
* ### Usage
22+
*
23+
* `ui5-user-menu-item-group` represents a collection of `ui5-user-menu-item` components that can have the same check mode.
24+
* The items are addeed to the group's `items` slot.
25+
*
26+
* ### ES6 Module Import
27+
*
28+
* `import "@ui5/webcomponents/dist/UserMenuItemGroup.js";`
29+
* @constructor
30+
* @extends MenuItemGroup
31+
* @since 2.12.0
32+
* @public
33+
*/
34+
@customElement({
35+
tag: "ui5-user-menu-item-group",
36+
template: UserMenuItemGroupTemplate,
37+
})
38+
class UserMenuItemGroup extends MenuItemGroup {
39+
}
40+
41+
const isInstanceOfUserMenuItemGroup = (object: any): object is UserMenuItemGroup => {
42+
return "isGroup" in object;
43+
};
44+
45+
UserMenuItemGroup.define();
46+
47+
export default UserMenuItemGroup;
48+
49+
export {
50+
isInstanceOfUserMenuItemGroup,
51+
};

‎packages/fiori/src/UserMenuItemGroupTemplate.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import type UserMenuItemGroup from "./UserMenuItemGroup.js";
2+
import MenuItemGroupTemplate from "@ui5/webcomponents/dist/MenuItemGroupTemplate.js";
3+
4+
export default function UserMenuItemTemplate(this: UserMenuItemGroup) {
5+
return [MenuItemGroupTemplate.call(this)];
6+
}

‎packages/fiori/src/bundle.esm.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ import UploadCollectionItem from "./UploadCollectionItem.js";
5555
import UserMenu from "./UserMenu.js";
5656
import UserMenuAccount from "./UserMenuAccount.js";
5757
import UserMenuItem from "./UserMenuItem.js";
58+
import UserMenuItemGroup from "./UserMenuItemGroup.js";
5859
import ViewSettingsDialog from "./ViewSettingsDialog.js";
5960
import Wizard from "./Wizard.js";
6061

‎packages/fiori/test/pages/UserMenu.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,18 @@
5252
<ui5-user-menu-item icon="private" text="Private Policy" data-id="privacy-policy"></ui5-user-menu-item>
5353
<ui5-user-menu-item icon="accelerated" text="Terms of Use" data-id="terms-of-use"></ui5-user-menu-item>
5454
</ui5-user-menu-item>
55+
<ui5-user-menu-item icon="select" text="Multiple Select" data-id="multiple-select">
56+
<ui5-user-menu-item-group check-mode="Multiple">
57+
<ui5-user-menu-item icon="private" text="Item 1" data-id="multi-select-item1"></ui5-user-menu-item>
58+
<ui5-user-menu-item icon="accelerated" text="Item 2" data-id="multi-select-item2"></ui5-user-menu-item>
59+
</ui5-user-menu-item-group>
60+
</ui5-user-menu-item>
61+
<ui5-user-menu-item icon="select" text="Single Select" data-id="single-select">
62+
<ui5-user-menu-item-group check-mode="Single">
63+
<ui5-user-menu-item icon="private" text="Item 1" data-id="single-select"></ui5-user-menu-item>
64+
<ui5-user-menu-item icon="accelerated" text="Item 2" data-id="single-select-item2"></ui5-user-menu-item>
65+
</ui5-user-menu-item-group>
66+
</ui5-user-menu-item>
5567
</ui5-user-menu>
5668

5769
<div style="border:1px solid black"></div>
@@ -182,6 +194,12 @@
182194
}
183195
});
184196

197+
menuShellBar.addEventListener("ui5-check", function (event) {
198+
console.log("Check event fired for item: " + event.target.text);
199+
console.log("Checked state: " + event.target.checked);
200+
console.log(event.target);
201+
});
202+
185203
menuShellBar.addEventListener("avatar-click", function () {
186204
console.log("Avatar clicked");
187205
});

‎packages/website/docs/_components_pages/fiori/UserMenu/UserMenuItemGroup.mdx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
slug: ../UserMenuItemGroup
3+
sidebar_class_name: newComponentBadge
4+
---
5+
6+
<%COMPONENT_OVERVIEW%>
7+
8+
<%COMPONENT_METADATA%>

0 commit comments

Comments
 (0)