fix(ui5-button, ui5-split-button): align menu button items on the left

packages/main/src/themes/Button.css

@@ -376,3 +376,15 @@ bdi {
 	width: 100%;
 	top:0;
 }
+
+:host([has-end-icon]) .ui5-button-root {
+	justify-content: flex-start;
+}
+
+:host([icon-only]) .ui5-button-root {
+	justify-content: center;
+}
+
+:host([has-end-icon]) .ui5-button-end-icon {
+	margin-left: auto;
+}

packages/main/src/themes/SplitButton.css

@@ -388,3 +388,8 @@
 :host([design="Attention"]) .ui5-split-text-button[active] + .ui5-split-arrow-button::before {
 	background-color: var(--_ui5_split_button_attention_separator_color);
 }
+
+.ui5-split-text-button::part(button) {
+    justify-content: flex-start;
+	padding: 0 var(--_ui5_button_base_padding);
+}

packages/main/test/pages/Button.html

@@ -286,13 +286,19 @@
 	<ui5-button id="menuButtonTextIcon" icon="action-settings" end-icon="navigation-down-arrow">Menu Button</ui5-button>
 	<ui5-button id="menuButtonIconEnd" end-icon="navigation-down-arrow"
 		tooltip="Menu Button with End Icon only"></ui5-button>
-
 	<ui5-menu id="menu">
 		<ui5-menu-item text="Item 1"></ui5-menu-item>
 		<ui5-menu-item text="Item 2"></ui5-menu-item>
 		<ui5-menu-item text="Item 3"></ui5-menu-item>
 	</ui5-menu>
 
+	<br />
+	<br />
+	<ui5-title>Menu Buttons with fixed width</ui5-title>
+	<br />
+	<ui5-button end-icon="navigation-down-arrow" class="medium-button">Menu Button</ui5-button>
+	<ui5-button icon="action-settings" end-icon="navigation-down-arrow" class="medium-button"></ui5-button>
+	<ui5-button icon="action-settings" end-icon="navigation-down-arrow" class="medium-button">Menu Button</ui5-button>
 	<br />
 	<br />
 

packages/main/test/pages/SplitButton.html

@@ -85,7 +85,7 @@ <h3>Test textContent</h3>
 	<ui5-split-button id="emptySpBtn" design="Default"></ui5-split-button>
 	<ui5-split-button id="defaultSpBtn" design="Default">Default</ui5-split-button>
 
-	<ui5-split-button id="splitBtnWithMenuDefaultActionDefaultAction">openMenu</ui5-split-button>
+	<ui5-split-button id="splitBtnWithMenuDefaultActionDefaultAction" style="width:300px">openMenu</ui5-split-button>
 	<ui5-menu id="menu">
 		<ui5-menu-item text="New File" accessible-name="Opens a file explorer" additional-text="Ctrl+Alt+Shift+N" icon="add-document"></ui5-menu-item>
 		<ui5-menu-item text="New Folder with very long title for a menu item" additional-text="Ctrl+F" icon="add-folder" disabled></ui5-menu-item>
@@ -102,13 +102,18 @@ <h3>Test textContent</h3>
 		<ui5-menu-item text="Save" icon="save"></ui5-menu-item>
 		<ui5-menu-item text="Delete" icon="delete"></ui5-menu-item>
 	</ui5-menu>
+
+	<h3>Split Buttons with fixed width</h3>
+	<ui5-split-button icon="add" style="width:300px">Fixed width</ui5-split-button>
+	<ui5-split-button style="width:300px">Fixed width</ui5-split-button>
+	<ui5-split-button icon="add" style="width:300px"></ui5-split-button>
 </body>
 <script>
 	const splitBtn = document.getElementById("splitBtnWithMenuDefaultActionDefaultAction");
 	const menu = document.getElementById("menu");
 
 	splitBtn.addEventListener("ui5-arrow-click", function() {
-		menu.opener = splitBtn; 
+		menu.opener = splitBtn;
 		menu.open = !menu.open;
 		splitBtn.activeArrowButton = !splitBtn.activeArrowButton;
 	});
@@ -128,7 +133,7 @@ <h3>Test textContent</h3>
 
 
 	splitBtnWithMenuWithAssociatedLastAction.addEventListener("ui5-arrow-click", function() {
-		menuInSplitBtnAssociatedLastAction.opener = splitBtnWithMenuWithAssociatedLastAction; 
+		menuInSplitBtnAssociatedLastAction.opener = splitBtnWithMenuWithAssociatedLastAction;
 		menuInSplitBtnAssociatedLastAction.menuInSplitBtnAssociatedLastAction = !menu.open;
 	})
 

packages/main/test/pages/styles/Button.css

@@ -2,6 +2,10 @@
     width: 1000px;
 }
 
+.medium-button {
+	width: 400px;
+}
+
 .long-button-begin::part(button) {
     justify-content: flex-start;
 }