diff --git a/packages/main/src/SegmentedButtonItem.ts b/packages/main/src/SegmentedButtonItem.ts index cd98d9159b47..15c9ad2ad4b6 100644 --- 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 index dfc585393a8c..d4d69b8d41a7 100644 --- 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;