diff --git a/packages/main/src/themes/Button.css b/packages/main/src/themes/Button.css index 6bb14afae5f5..451426a55873 100644 --- a/packages/main/src/themes/Button.css +++ b/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; +} diff --git a/packages/main/src/themes/SplitButton.css b/packages/main/src/themes/SplitButton.css index 328fbd308822..fd8d7103173c 100644 --- a/packages/main/src/themes/SplitButton.css +++ b/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); +} diff --git a/packages/main/test/pages/Button.html b/packages/main/test/pages/Button.html index e33b12c4c453..77fda879404d 100644 --- a/packages/main/test/pages/Button.html +++ b/packages/main/test/pages/Button.html @@ -286,13 +286,19 @@ Menu Button - +
+
+ Menu Buttons with fixed width +
+ Menu Button + + Menu Button

diff --git a/packages/main/test/pages/SplitButton.html b/packages/main/test/pages/SplitButton.html index cd2056eaa708..71ac148cf690 100644 --- a/packages/main/test/pages/SplitButton.html +++ b/packages/main/test/pages/SplitButton.html @@ -85,7 +85,7 @@

Test textContent

Default - openMenu + openMenu @@ -102,13 +102,18 @@

Test textContent

+ +

Split Buttons with fixed width

+ Fixed width + Fixed width +