Skip to content

chore(ui5-user-menu): Improve samples #13534

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

Open
SvilenDarvenyashki wants to merge 4 commits into
base: main
Choose a base branch
from
+55 −25
Open

chore(ui5-user-menu): Improve samples #13534

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
e34d6a9
chore(ui5-user-menu): add sample with show second line
SvilenDarvenyashki May 18, 2026
afeadb4
Merge branch 'main' into user-menu-item-sample
SvilenDarvenyashki May 18, 2026
9260211
chore(ui5-user-menu): improve react sample
SvilenDarvenyashki May 18, 2026
41a8622
Merge branch 'main' into user-menu-item-sample
SvilenDarvenyashki May 18, 2026
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
5 changes: 3 additions & 2 deletions packages/website/docs/_samples/fiori/UserMenu/Advanced/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import "@ui5/webcomponents-fiori/dist/UserMenu.js";
import "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";
import "@ui5/webcomponents-fiori/dist/UserMenuItem.js";

import "@ui5/webcomponents-fiori/dist/UserMenuItemGroup.js";
import "@ui5/webcomponents/dist/Avatar.js";
import "@ui5/webcomponents-fiori/dist/ShellBar.js";
import "@ui5/webcomponents-fiori/dist/ShellBarBranding.js";
Expand All @@ -12,6 +12,7 @@ import "@ui5/webcomponents-icons/dist/collaborate.js";
import "@ui5/webcomponents-icons/dist/official-service.js";
import "@ui5/webcomponents-icons/dist/private.js";
import "@ui5/webcomponents-icons/dist/accelerated.js";
import "@ui5/webcomponents-icons/dist/message-information.js";

const shellbar = document.getElementById("shellbar");
const menu = document.getElementById("userMenu");
Expand All @@ -20,7 +21,7 @@ const menu = document.getElementById("userMenu");

shellbar.addEventListener("ui5-profile-click", (event) => {
menu.opener = event.detail.targetRef;
menu.open = true;
menu.open = !menu.open;
});

menu.addEventListener("item-click", function (event) {
Expand Down
8 changes: 7 additions & 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 @@ -15,7 +15,7 @@

<style>
body {
height: 600px;
height: 610px;
}
</style>
</head>
Expand Down Expand Up @@ -59,6 +59,12 @@
</ui5-user-menu-item>
<ui5-user-menu-item icon="official-service" text="Legal Information"></ui5-user-menu-item>
<ui5-user-menu-item icon="message-information" text="About" data-id="about"></ui5-user-menu-item>
<ui5-user-menu-item icon="globe" text="Language" data-id="single-select" show-selection>
<ui5-user-menu-item-group check-mode="Single">
<ui5-user-menu-item text="English" data-id="single-select-item1" checked></ui5-user-menu-item>
<ui5-user-menu-item text="Deutsch" data-id="single-select-item2"></ui5-user-menu-item>
</ui5-user-menu-item-group>
</ui5-user-menu-item>
</ui5-user-menu>

<!-- playground-fold -->
Expand Down
29 changes: 20 additions & 9 deletions packages/website/docs/_samples/fiori/UserMenu/Advanced/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
import { type UI5CustomEvent } from "@ui5/webcomponents-base";
import { useState, useRef, useCallback } from "react";
import { useRef, useCallback } from "react";
import ShellBarClass from "@ui5/webcomponents-fiori/dist/ShellBar.js";
import ShellBarBrandingClass from "@ui5/webcomponents-fiori/dist/ShellBarBranding.js";
import UserMenuClass from "@ui5/webcomponents-fiori/dist/UserMenu.js";
import UserMenuAccountClass from "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";
import UserMenuItemClass from "@ui5/webcomponents-fiori/dist/UserMenuItem.js";
import UserMenuItemGroupClass from "@ui5/webcomponents-fiori/dist/UserMenuItemGroup.js";
import AvatarClass from "@ui5/webcomponents/dist/Avatar.js";
import "@ui5/webcomponents-icons/dist/action-settings.js";
import "@ui5/webcomponents-icons/dist/globe.js";
Expand All @@ -19,16 +20,19 @@ const ShellBarBranding = createReactComponent(ShellBarBrandingClass);
const UserMenu = createReactComponent(UserMenuClass);
const UserMenuAccount = createReactComponent(UserMenuAccountClass);
const UserMenuItem = createReactComponent(UserMenuItemClass);
const UserMenuItemGroup = createReactComponent(UserMenuItemGroupClass);
const Avatar = createReactComponent(AvatarClass);

function App() {
const [menuOpen, setMenuOpen] = useState(false);
const openerRef = useRef(null);
const userMenuRef = useRef<UserMenuClass | null>(null);

const handleProfileClick = useCallback(
(e: UI5CustomEvent<ShellBarClass, "profile-click">) => {
openerRef.current = e.detail.targetRef;
setMenuOpen(true);
const menu = userMenuRef.current;
if (menu) {
menu.opener = e.detail.targetRef;
menu.open = !menu.open;
}
},
[],
);
Expand Down Expand Up @@ -86,7 +90,10 @@ function App() {
console.log("Sign Out clicked");
const result = prompt("Sign Out", "Are you sure you want to sign out?");
if (result) {
setMenuOpen(false);
const menu = userMenuRef.current;
if (menu) {
menu.open = false;
}
}
e.preventDefault();
}, []);
Expand All @@ -103,8 +110,7 @@ function App() {
</Avatar>
</ShellBar>
<UserMenu
open={menuOpen}
opener={openerRef.current}
ref={userMenuRef}
showManageAccount={true}
showOtherAccounts={true}
showEditAccounts={true}
Expand All @@ -115,7 +121,6 @@ function App() {
onEditAccountsClick={handleEditAccountsClick}
onChangeAccount={handleChangeAccount}
onSignOutClick={handleSignOutClick}
onClose={() => setMenuOpen(false)}
>
<UserMenuAccount
slot="accounts"
Expand Down Expand Up @@ -150,6 +155,12 @@ function App() {
</UserMenuItem>
<UserMenuItem icon="official-service" text="Legal Information" />
<UserMenuItem icon="message-information" text="About" data-id="about" />
<UserMenuItem icon="globe" text="Language" data-id="single-select" showSelection={true}>
<UserMenuItemGroup checkMode="Single">
<UserMenuItem text="English" data-id="single-select-item1" checked={true} />
<UserMenuItem text="Deutsch" data-id="single-select-item2" />
</UserMenuItemGroup>
</UserMenuItem>
</UserMenu>
</>
);
Expand Down
3 changes: 2 additions & 1 deletion packages/website/docs/_samples/fiori/UserMenu/Basic/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,14 @@ import "@ui5/webcomponents-icons/dist/collaborate.js";
import "@ui5/webcomponents-icons/dist/official-service.js";
import "@ui5/webcomponents-icons/dist/private.js";
import "@ui5/webcomponents-icons/dist/accelerated.js";
import "@ui5/webcomponents-icons/dist/message-information.js";

const shellbar = document.getElementById("shellbar");
const menu = document.getElementById("userMenu");

shellbar.addEventListener("ui5-profile-click", (event) => {
menu.opener = event.detail.targetRef;
menu.open = true;
menu.open = !menu.open;
});

menu.addEventListener("item-click", function (event) {
Expand Down
4 changes: 2 additions & 2 deletions packages/website/docs/_samples/fiori/UserMenu/Basic/sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@

<style>
body {
height: 600px;
height: 610px;
}
</style>
</head>
Expand All @@ -31,7 +31,7 @@
<img src="../assets/images/avatars/man_avatar_3.png"/>
</ui5-avatar>
</ui5-shellbar>
<ui5-user-menu id="userMenu" opener="btnOpenUserMenu">
<ui5-user-menu id="userMenu">
<ui5-user-menu-account slot="accounts"
avatar-src="../assets/images/avatars/man_avatar_3.png"
title-text="Alaina Chevalier"
Expand Down
21 changes: 12 additions & 9 deletions packages/website/docs/_samples/fiori/UserMenu/Basic/sample.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import createReactComponent from "@ui5/webcomponents-base/dist/createReactComponent.js";
import { type UI5CustomEvent } from "@ui5/webcomponents-base";
import { useState, useRef, useCallback } from "react";
import { useRef, useCallback } from "react";
import ShellBarClass from "@ui5/webcomponents-fiori/dist/ShellBar.js";
import ShellBarBrandingClass from "@ui5/webcomponents-fiori/dist/ShellBarBranding.js";
import UserMenuClass from "@ui5/webcomponents-fiori/dist/UserMenu.js";
Expand All @@ -22,13 +22,15 @@ const UserMenuItem = createReactComponent(UserMenuItemClass);
const Avatar = createReactComponent(AvatarClass);

function App() {
const [menuOpen, setMenuOpen] = useState(false);
const openerRef = useRef(null);
const userMenuRef = useRef<UserMenuClass | null>(null);

const handleProfileClick = useCallback(
(e: UI5CustomEvent<ShellBarClass, "profile-click">) => {
openerRef.current = e.detail.targetRef;
setMenuOpen(true);
const menu = userMenuRef.current;
if (menu) {
menu.opener = e.detail.targetRef;
menu.open = !menu.open;
}
},
[],
);
Expand Down Expand Up @@ -67,7 +69,10 @@ function App() {
console.log("Sign Out clicked");
const result = prompt("Sign Out", "Are you sure you want to sign out?");
if (result) {
setMenuOpen(false);
const menu = userMenuRef.current;
if (menu) {
menu.open = false;
}
}
e.preventDefault();
}, []);
Expand All @@ -84,12 +89,10 @@ function App() {
</Avatar>
</ShellBar>
<UserMenu
open={menuOpen}
opener={openerRef.current}
ref={userMenuRef}
onItemClick={handleItemClick}
onAvatarClick={handleAvatarClick}
onSignOutClick={handleSignOutClick}
onClose={() => setMenuOpen(false)}
>
<UserMenuAccount
slot="accounts"
Expand Down
1 change: 1 addition & 0 deletions packages/website/docs/_samples/patterns/UXCIntegration/Basic/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ import "@ui5/webcomponents-fiori/dist/illustrations/NoNotifications.js";
import "@ui5/webcomponents-fiori/dist/UserMenu.js";
import "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";
import "@ui5/webcomponents-fiori/dist/UserMenuItem.js";
import "@ui5/webcomponents-fiori/dist/UserMenuItemGroup.js";

import "@ui5/webcomponents-fiori/dist/UserSettingsAccountView.js";
import "@ui5/webcomponents-fiori/dist/UserSettingsAppearanceView.js";
Expand Down
6 changes: 6 additions & 0 deletions packages/website/docs/_samples/patterns/UXCIntegration/Basic/sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,6 +78,12 @@
<ui5-user-menu-item text="Private Policy" data-id="privacy-policy"></ui5-user-menu-item>
</ui5-user-menu-item>
<ui5-user-menu-item icon="message-information" text="About" data-id="about"></ui5-user-menu-item>
<ui5-user-menu-item icon="globe" text="Language" data-id="single-select" show-selection>
<ui5-user-menu-item-group check-mode="Single">
<ui5-user-menu-item text="English" data-id="single-select-item1" checked></ui5-user-menu-item>
<ui5-user-menu-item text="Deutsch" data-id="single-select-item2"></ui5-user-menu-item>
</ui5-user-menu-item-group>
</ui5-user-menu-item>
</ui5-user-menu>

<ui5-side-navigation id="side-navigation" class="sideNavigation" slot="sideContent" accessible-name="Main">
Expand Down
3 changes: 2 additions & 1 deletion packages/website/src/components/Editor/ReactPlayground.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,7 @@ import SearchItemClass from "@ui5/webcomponents-fiori/dist/SearchItem.js";
import SearchMessageAreaClass from "@ui5/webcomponents-fiori/dist/SearchMessageArea.js";
import UserMenuClass from "@ui5/webcomponents-fiori/dist/UserMenu.js";
import UserMenuItemClass from "@ui5/webcomponents-fiori/dist/UserMenuItem.js";
import UserMenuItemGroupClass from "@ui5/webcomponents-fiori/dist/UserMenuItemGroup.js";
import UserMenuAccountClass from "@ui5/webcomponents-fiori/dist/UserMenuAccount.js";
import BarcodeScannerDialogClass from "@ui5/webcomponents-fiori/dist/BarcodeScannerDialog.js";
import NavigationLayoutClass from "@ui5/webcomponents-fiori/dist/NavigationLayout.js";
Expand Down Expand Up @@ -323,7 +324,7 @@ const ComponentClasses: Record<string, any> = {
FlexibleColumnLayoutClass, MediaGalleryClass, MediaGalleryItemClass, ProductSwitchClass,
ProductSwitchItemClass, ViewSettingsDialogClass, ViewSettingsDialogCustomTabClass, SortItemClass, FilterItemClass, FilterItemOptionClass,
SearchClass, SearchItemClass, SearchMessageAreaClass, UserMenuClass, UserMenuItemClass,
UserMenuAccountClass, BarcodeScannerDialogClass, NavigationLayoutClass, SearchFieldClass,
UserMenuItemGroupClass, UserMenuAccountClass, BarcodeScannerDialogClass, NavigationLayoutClass, SearchFieldClass,
SearchItemGroupClass, SearchItemShowMoreClass, SearchScopeClass, ShellBarBrandingClass,
ShellBarSearchClass, ShellBarSpacerClass, UserSettingsDialogClass, UserSettingsItemClass,
UserSettingsViewClass, UserSettingsAccountViewClass, UserSettingsAppearanceViewClass,
Expand Down
Loading