feat(ui5-menu): add placement api (#12554)

With this PR we introduce a new placement property to the ui5-menu.

This property allows developers to specify the menu's position relative to its trigger element, providing more control over the menu's placement in the UI.

The possible values for this property are Start, End, Top and Bottom, where Bottom is the default.

Example
To make the ui5-menu to open from the top add the following:

<ui5-menu placement="Top">
    ....
</ui5-menu>
image

Author: tsanislavgatev

packages/main/src/Menu.ts

@@ -29,6 +29,7 @@ import { isInstanceOfMenuItem } from "./MenuItem.js";
 import { isInstanceOfMenuItemGroup } from "./MenuItemGroup.js";
 import { isInstanceOfMenuSeparator } from "./MenuSeparator.js";
 import type PopoverHorizontalAlign from "./types/PopoverHorizontalAlign.js";
+import type PopoverPlacement from "./types/PopoverPlacement.js";
 import type {
 	ListItemClickEventDetail,
 } from "./List.js";
@@ -200,6 +201,15 @@ class Menu extends UI5Element {
 	@property({ type: Boolean })
 	open = false;
 
+	/**
+	 * Determines on which side the component is placed at.
+	 * @default "Bottom"
+	 * @public
+	 * @since 2.16.0
+	 */
+	@property()
+	placement: `${PopoverPlacement}` = "Bottom";
+
 	/**
 	 * Determines the horizontal alignment of the menu relative to its opener control.
 	 * @default "Start"

packages/main/src/MenuTemplate.tsx

@@ -10,7 +10,7 @@ export default function MenuTemplate(this: Menu) {
 		<ResponsivePopover
 			id={`${this._id}-menu-rp`}
 			class="ui5-menu-rp"
-			placement="Bottom"
+			placement={this.placement}
 			verticalAlign="Bottom"
 			horizontalAlign={this.horizontalAlign}
 			opener={this.opener}