fix(ui5-segmented-button-item): align sizes to spec

SAP · May 15, 2024 · ec21e55 · ec21e55
1 parent 49d587c
commit ec21e55
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/packages/main/src/SegmentedButtonItem.ts b/packages/main/src/SegmentedButtonItem.ts
@@ -105,6 +105,13 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto
 	@property()
 	icon!: string;
 
+	/**
+	 * Defines if a content has been added to the default slot
+	 * @private
+	 */
+	@property({ type: Boolean })
+	iconOnly!: boolean;
+
 	/**
 	 * Indicates if the element is focusable
 	 * @private
@@ -164,6 +171,10 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto
 		}
 	}
 
+	onAfterRendering(): void {
+		this.iconOnly = this.isIconOnly;
+	}
+
 	_onkeyup(e: KeyboardEvent) {
 		if (isSpaceShift(e)) {
 			e.preventDefault();

diff --git a/packages/main/src/themes/SegmentedButton.css b/packages/main/src/themes/SegmentedButton.css
@@ -3,13 +3,13 @@
 
 :host(:not([hidden])) {
 	display: inline-block;
-	min-width: calc(var(--_ui5_segmented_btn_items_count) * 2.5rem);
+	min-width: calc(var(--_ui5_segmented_btn_items_count) * var(--_ui5_button_base_min_width));
 }
 
 .ui5-segmented-button-root {
 	width: inherit;
 	display: grid;
-	grid-template-columns: repeat(var(--_ui5_segmented_btn_items_count), minmax(2.5rem, 1fr));
+	grid-template-columns: repeat(var(--_ui5_segmented_btn_items_count), minmax(var(--_ui5_button_base_min_width), 1fr));
 	margin: 0;
 	padding: 0;
 	background-color: var(--sapButton_Background);
@@ -22,7 +22,6 @@
 	border-color: var(--_ui5_segmented_btn_border_color);
 	background-color: var(--_ui5_segmented_btn_background_color);
 	height: var(--_ui5_button_base_height);
-	min-width: 2.5rem;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;