Skip to content

Commit 451d6d7

Browse files
GDamyanovIlianaB
authored andcommitted
fix(ui5-button, ui5-split-button): align menu button items on the left
Updates the SplitButton styling so the content of the left (text) button is left-aligned. The change ensures the start icon + label are anchored to the left edge of the text segment, while the arrow segment remains pinned to the right. This prevents long labels from appearing centered (or shifting the arrow), enables truncation with ellipsis, and improves visual consistency. The same behaviour is applied to the ui5-button when it is used as menu button.
1 parent 68e5d1d commit 451d6d7

File tree

5 files changed

+36
-4
lines changed

5 files changed

+36
-4
lines changed

packages/main/src/themes/Button.css

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -376,3 +376,15 @@ bdi {
376376
width: 100%;
377377
top:0;
378378
}
379+
380+
:host([has-end-icon]) .ui5-button-root {
381+
justify-content: flex-start;
382+
}
383+
384+
:host([icon-only]) .ui5-button-root {
385+
justify-content: center;
386+
}
387+
388+
:host([has-end-icon]) .ui5-button-end-icon {
389+
margin-left: auto;
390+
}

packages/main/src/themes/SplitButton.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -388,3 +388,8 @@
388388
:host([design="Attention"]) .ui5-split-text-button[active] + .ui5-split-arrow-button::before {
389389
background-color: var(--_ui5_split_button_attention_separator_color);
390390
}
391+
392+
.ui5-split-text-button::part(button) {
393+
justify-content: flex-start;
394+
padding: 0 var(--_ui5_button_base_padding);
395+
}

packages/main/test/pages/Button.html

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -286,13 +286,19 @@
286286
<ui5-button id="menuButtonTextIcon" icon="action-settings" end-icon="navigation-down-arrow">Menu Button</ui5-button>
287287
<ui5-button id="menuButtonIconEnd" end-icon="navigation-down-arrow"
288288
tooltip="Menu Button with End Icon only"></ui5-button>
289-
290289
<ui5-menu id="menu">
291290
<ui5-menu-item text="Item 1"></ui5-menu-item>
292291
<ui5-menu-item text="Item 2"></ui5-menu-item>
293292
<ui5-menu-item text="Item 3"></ui5-menu-item>
294293
</ui5-menu>
295294

295+
<br />
296+
<br />
297+
<ui5-title>Menu Buttons with fixed width</ui5-title>
298+
<br />
299+
<ui5-button end-icon="navigation-down-arrow" class="medium-button">Menu Button</ui5-button>
300+
<ui5-button icon="action-settings" end-icon="navigation-down-arrow" class="medium-button"></ui5-button>
301+
<ui5-button icon="action-settings" end-icon="navigation-down-arrow" class="medium-button">Menu Button</ui5-button>
296302
<br />
297303
<br />
298304

packages/main/test/pages/SplitButton.html

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -85,7 +85,7 @@ <h3>Test textContent</h3>
8585
<ui5-split-button id="emptySpBtn" design="Default"></ui5-split-button>
8686
<ui5-split-button id="defaultSpBtn" design="Default">Default</ui5-split-button>
8787

88-
<ui5-split-button id="splitBtnWithMenuDefaultActionDefaultAction">openMenu</ui5-split-button>
88+
<ui5-split-button id="splitBtnWithMenuDefaultActionDefaultAction" style="width:300px">openMenu</ui5-split-button>
8989
<ui5-menu id="menu">
9090
<ui5-menu-item text="New File" accessible-name="Opens a file explorer" additional-text="Ctrl+Alt+Shift+N" icon="add-document"></ui5-menu-item>
9191
<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>
102102
<ui5-menu-item text="Save" icon="save"></ui5-menu-item>
103103
<ui5-menu-item text="Delete" icon="delete"></ui5-menu-item>
104104
</ui5-menu>
105+
106+
<h3>Split Buttons with fixed width</h3>
107+
<ui5-split-button icon="add" style="width:300px">Fixed width</ui5-split-button>
108+
<ui5-split-button style="width:300px">Fixed width</ui5-split-button>
109+
<ui5-split-button icon="add" style="width:300px"></ui5-split-button>
105110
</body>
106111
<script>
107112
const splitBtn = document.getElementById("splitBtnWithMenuDefaultActionDefaultAction");
108113
const menu = document.getElementById("menu");
109114

110115
splitBtn.addEventListener("ui5-arrow-click", function() {
111-
menu.opener = splitBtn;
116+
menu.opener = splitBtn;
112117
menu.open = !menu.open;
113118
splitBtn.activeArrowButton = !splitBtn.activeArrowButton;
114119
});
@@ -128,7 +133,7 @@ <h3>Test textContent</h3>
128133

129134

130135
splitBtnWithMenuWithAssociatedLastAction.addEventListener("ui5-arrow-click", function() {
131-
menuInSplitBtnAssociatedLastAction.opener = splitBtnWithMenuWithAssociatedLastAction;
136+
menuInSplitBtnAssociatedLastAction.opener = splitBtnWithMenuWithAssociatedLastAction;
132137
menuInSplitBtnAssociatedLastAction.menuInSplitBtnAssociatedLastAction = !menu.open;
133138
})
134139

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
width: 1000px;
33
}
44

5+
.medium-button {
6+
width: 400px;
7+
}
8+
59
.long-button-begin::part(button) {
610
justify-content: flex-start;
711
}

0 commit comments

Comments
 (0)