feat(ui5-menu): introduce HorizontalAlign property (#11313)

didip1000 · web-flow · commit 7a287a1098c0 · 2025-04-16T10:31:19.000+03:00
This change introduces a new `horizontalAlign` property to `ui5-menu`, similar to what's available in `ui5-popover`. It allows users to control the menu's horizontal alignment. The default value is `start`, but it can also be set to `end`, `center`, or `stretch`. Usage: Setting the property to end as follows will align the menu to the end of the opener button: ```HTML <ui5-menu horizontal-align="End"> <ui5-menu-item ... </ui5-menu> ``` Fixes: #10765
diff --git a/packages/main/src/Menu.ts b/packages/main/src/Menu.ts
@@ -24,6 +24,7 @@ import type { Timeout } from "@ui5/webcomponents-base/dist/types.js";
 import { renderFinished } from "@ui5/webcomponents-base/dist/Render.js";
 import DOMReferenceConverter from "@ui5/webcomponents-base/dist/converters/DOMReference.js";
 import type ResponsivePopover from "./ResponsivePopover.js";
+import type PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
 import type MenuItem from "./MenuItem.js";
 import "./MenuItem.js";
 import "./MenuSeparator.js";
@@ -184,14 +185,22 @@ class Menu extends UI5Element {
 	headerText?: string;
 
 	/**
-	 * Indicates if the menu is open
+	 * Indicates if the menu is open.
 	 * @public
 	 * @default false
 	 * @since 1.10.0
 	 */
 	@property({ type: Boolean })
 	open = false;
 
+	/**
+	 * Determines the horizontal alignment of the menu relative to its opener control.
+	 * @default "Start"
+	 * @public
+	 */
+	@property()
+	horizontalAlign: `${PopoverHorizontalAlign}` = "Start";
+
 	/**
 	 * Defines if a loading indicator would be displayed inside the corresponding ui5-menu popover.
 	 * @default false
@@ -202,7 +211,7 @@ class Menu extends UI5Element {
 	loading = false;
 
 	/**
-	 * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover..
+	 * Defines the delay in milliseconds, after which the loading indicator will be displayed inside the corresponding ui5-menu popover.
 	 * @default 1000
 	 * @public
 	 * @since 1.13.0
diff --git a/packages/main/src/MenuTemplate.tsx b/packages/main/src/MenuTemplate.tsx
@@ -12,6 +12,7 @@ export default function MenuTemplate(this: Menu) {
 			class="ui5-menu-rp"
 			placement="Bottom"
 			verticalAlign="Bottom"
+			horizontalAlign={this.horizontalAlign}
 			opener={this.opener}
 			open={this.open}
 			preventInitialFocus={true}
diff --git a/packages/main/test/pages/Menu.html b/packages/main/test/pages/Menu.html
@@ -12,6 +12,14 @@
 	<link rel="stylesheet" type="text/css" href="./styles/Menu.css">
 </head>
 
+<style>
+	.center-content {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
+
 <body class="bg">
 	<ui5-button id="btnOpen">Open Menu</ui5-button> <br/>
 	<ui5-menu id="menu" header-text="My ui5-menu">
@@ -116,7 +124,19 @@
 	</ui5-popover>
 
 
-	<ui5-button id="btnAddOpenerDelay">Delayed</ui5-button>
+	<ui5-button id="btnAddOpenerDelay">Delayed</ui5-button> <br/><br/>
+
+	<ui5-title level="H5" class="header-title">Menu with right alignment</ui5-title>
+
+	<div class="center-content">
+		<ui5-button id="btnOpenRight">Open Menu</ui5-button> <br/>
+	</div>
+
+	<ui5-menu id="menuRight" header-text="Menu" horizontal-align="End">
+		<ui5-menu-item text="Open" icon="open-folder"></ui5-menu-item>
+		<ui5-menu-separator></ui5-menu-separator>
+		<ui5-menu-item text="Close" additional-text="Ctrl+W" ></ui5-menu-item>
+	</ui5-menu>
 
 	<script>
 		btnOpen.accessibilityAttributes = {
@@ -133,6 +153,11 @@
 			menuEndContent.open = !menu.open;
 		});
 
+		btnOpenRight.addEventListener ("click", function() {
+			menuRight.opener = "btnOpenRight";
+			menuRight.open = !menuRight.open;
+		});
+
 		btnAddOpener.addEventListener("click", function() {
 			menu.opener="btnToggleOpen";
 		});
diff --git a/packages/website/docs/_samples/patterns/AIQuickPrompt/sample.html b/packages/website/docs/_samples/patterns/AIQuickPrompt/sample.html
@@ -39,7 +39,7 @@
 		<ui5-toast placement="MiddleCenter" id="quickPromptToast" duration="3000">Your message was sent successfully!</ui5-toast>
 	</ui5-card>
 
-	<ui5-menu id="menu1">
+	<ui5-menu id="menu1" horizontal-align="End">
 		<ui5-menu-item text="Regenerate"></ui5-menu-item>
 		<ui5-menu-separator></ui5-menu-separator>
 		<ui5-menu-item text="Fix Spelling and Grammar"></ui5-menu-item>
