fix(ui5-segmented-button-item): add padding to icon when item is not …

…in icon-only mode (#9180) fixes: #9172
SAP · Jun 12, 2024 · a3fd241 · a3fd241
1 parent 37b2181
commit a3fd241
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/packages/main/src/themes/SegmentedButtonItem.css b/packages/main/src/themes/SegmentedButtonItem.css
@@ -60,6 +60,11 @@
 .ui5-segmented-button-item-icon {
 	color: inherit;
 	flex-shrink: 0;
+	padding-inline-end: 0.375rem;
+}
+
+:host([icon-only]) .ui5-segmented-button-item-icon {
+	padding-inline-end: 0;
 }
 
 :host([icon-only]) .ui5-segmented-button-item-root {

diff --git a/packages/main/test/pages/SegmentedButton.html b/packages/main/test/pages/SegmentedButton.html
@@ -162,8 +162,8 @@ <h3>Initial focus test</h3>
 		</ui5-segmented-button>
 		<ui5-button id="button2">Press</ui5-button>
 		<ui5-segmented-button id="testSB2">
-			<ui5-segmented-button-item icon="employee"></ui5-segmented-button-item>
-			<ui5-segmented-button-item id="testSB2ToggleBtn" icon="menu" selected></ui5-segmented-button-item>
+			<ui5-segmented-button-item icon="employee">1</ui5-segmented-button-item>
+			<ui5-segmented-button-item id="testSB2ToggleBtn" icon="menu" selected>2</ui5-segmented-button-item>
 			<ui5-segmented-button-item icon="accept"></ui5-segmented-button-item>
 		</ui5-segmented-button>
 	</section>