fix(ui5-toolbar-button): add css for ui5-toolbar-button for left alignment (#11913) (#11914)

* fix(ui5-toolbar-button): add css for ui5-toolbar-button for left alignment (#11913)

* fix(ui5-toolbar-button): add padding for icon-only button in popover

Author: Jianrong-Yu

packages/main/src/ToolbarButton.ts

@@ -8,6 +8,8 @@ import type ButtonDesign from "./types/ButtonDesign.js";
 import ToolbarItem from "./ToolbarItem.js";
 import ToolbarButtonTemplate from "./ToolbarButtonTemplate.js";
 
+import ToolbarButtonCss from "./generated/themes/ToolbarButton.css.js";
+
 type ToolbarButtonAccessibilityAttributes = ButtonAccessibilityAttributes;
 
 /**
@@ -29,6 +31,7 @@ type ToolbarButtonAccessibilityAttributes = ButtonAccessibilityAttributes;
 	tag: "ui5-toolbar-button",
 	template: ToolbarButtonTemplate,
 	renderer: jsxRenderer,
+	styles: [ToolbarButtonCss],
 })
 
 /**

packages/main/src/themes/ToolbarButton.css

@@ -0,0 +1,7 @@
+.ui5-tb-popover-item.ui5-tb-button::part(button) {
+	justify-content: start;
+}
+
+.ui5-tb-popover-item.ui5-tb-button[icon-only]::part(button) {
+	padding: 0 var(--_ui5_button_base_padding);
+}

packages/main/src/themes/ToolbarButtonPopover.css

@@ -152,6 +152,8 @@
 				<ui5-toolbar-separator></ui5-toolbar-separator>
 				<ui5-toolbar-button icon="employee" text="Call me later" stable-dom-ref="tb-button-employee-d"
 					overflow-priority="AlwaysOverflow"></ui5-toolbar-button>
+				<ui5-toolbar-button icon="decline" text="Longer for alignment check"
+					stable-dom-ref="tb-button-employee-d" overflow-priority="AlwaysOverflow"></ui5-toolbar-button>
 			</ui5-toolbar>
 		</section>