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

fixes: #7357
SAP · May 20, 2024 · 0eefe5f · 0eefe5f
1 parent ea4f6bb
commit 0eefe5f
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/packages/main/src/SegmentedButtonItem.hbs b/packages/main/src/SegmentedButtonItem.hbs
@@ -18,7 +18,7 @@
 			class="ui5-segmented-button-item-icon"
 			name="{{icon}}"
 			part="icon"
-			?show-tooltip={{isIconOnly}}
+			?show-tooltip={{iconOnly}}
 		></ui5-icon>
 	{{/if}}
 

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 the button has icon and no text.
+	 * @private
+	 */
+	@property({ type: Boolean })
+	iconOnly!: boolean;
+
 	/**
 	 * Indicates if the element is focusable
 	 * @private
@@ -164,16 +171,16 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto
 		}
 	}
 
+	onBeforeRendering(): void {
+		this.iconOnly = !willShowContent(this.text);
+	}
+
 	_onkeyup(e: KeyboardEvent) {
 		if (isSpaceShift(e)) {
 			e.preventDefault();
 		}
 	}
 
-	get isIconOnly() {
-		return !willShowContent(this.text);
-	}
-
 	get tabIndexValue() {
 		const tabindex = this.getAttribute("tabindex");
 
@@ -189,7 +196,7 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto
 	}
 
 	get showIconTooltip() {
-		return this.isIconOnly && !this.tooltip;
+		return this.iconOnly && !this.tooltip;
 	}
 
 	static async onDefine() {

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;