feat(ui5-segmented-button): add api which controls items width behavior

packages/main/cypress/specs/SegmentedButton.cy.tsx

@@ -278,6 +278,50 @@ describe("SegmentedButtonItems appearance", () => {
 	});
 });
 
+describe("SegmentedButton: contentMode", () => {
+    it("should have items with width which fits item content in content mode: ContentFit", () => {
+        cy.mount(
+            <SegmentedButton contentMode="ContentFit">
+                <SegmentedButtonItem id="item1">Short</SegmentedButtonItem>
+                <SegmentedButtonItem id="item2">Much longer text</SegmentedButtonItem>
+                <SegmentedButtonItem id="item3">Medium</SegmentedButtonItem>
+            </SegmentedButton>
+        );
+
+        cy.get("#item1")
+			.invoke("outerWidth")
+			.then(shortWidth => {
+				cy.get("#item2")
+					.invoke("outerWidth")
+					.should("be.gt", shortWidth);
+				cy.get("#item3")
+					.invoke("outerWidth")
+					.should("be.gt", shortWidth);
+        });
+    });
+
+    it("should have items with equal width in content mode:EqualSized", () => {
+        cy.mount(
+            <SegmentedButton contentMode="EqualSized">
+                <SegmentedButtonItem id="item1">Short</SegmentedButtonItem>
+                <SegmentedButtonItem id="item2">Much longer text</SegmentedButtonItem>
+                <SegmentedButtonItem id="item3">Medium</SegmentedButtonItem>
+            </SegmentedButton>
+        );
+
+        cy.get("#item1")
+			.invoke("outerWidth")
+			.then(width1 => {
+            	cy.get("#item2")
+					.invoke("outerWidth")
+					.should("eq", width1);
+            	cy.get("#item3")
+					.invoke("outerWidth")
+					.should("eq", width1);
+        });
+    });
+});
+
 describe("SegmentedButton Accessibility", () => {
 	it("segmented button should have correct aria label when accessibleName is set", () => {
 		const LABEL = "Label";
@@ -485,4 +529,17 @@ describe("SebmentedButtonItem Accessibility", () => {
 			.find("li")
 			.should("have.attr", "aria-description", REF_DESCRIPTION);
 	});
+
+	it("should set title attribute to slot text when tooltip is not provided", () => {
+        cy.mount(
+            <SegmentedButton>
+                <SegmentedButtonItem id="item1">Segmented Item Text</SegmentedButtonItem>
+            </SegmentedButton>
+        );
+
+        cy.get("#item1")
+            .shadow()
+            .find("li")
+            .should("have.attr", "title", "Segmented Item Text");
+    });
 });

packages/main/src/SegmentedButton.ts

@@ -30,6 +30,7 @@ import SegmentedButtonTemplate from "./SegmentedButtonTemplate.js";
 
 // Styles
 import SegmentedButtonCss from "./generated/themes/SegmentedButton.css.js";
+import SegmentedButtonContentMode from "./types/SegmentedButtonContentMode.js";
 
 /**
  * Interface for components that may be slotted inside `ui5-segmented-button` as items
@@ -128,6 +129,18 @@ class SegmentedButton extends UI5Element {
 	selectionMode: `${SegmentedButtonSelectionMode}` = "Single";
 
 	/**
+     * Defines the content mode of the segmented button items.
+     *
+     * - "EqualSized": All items are sized equally to fill the available space.
+     * - "ContentFit": Each item is sized to fit its content, with any extra space placed after the last item.
+     *
+     * @default "EqualSized"
+     * @public
+     * @since 2.16.0
+     */
+	@property()
+	contentMode: `${SegmentedButtonContentMode}` = "EqualSized";
+	/**
 	 * Defines the items of `ui5-segmented-button`.
 	 *
 	 * **Note:** Multiple items are allowed.
@@ -171,7 +184,9 @@ class SegmentedButton extends UI5Element {
 
 		this.normalizeSelection();
 
-		this.style.setProperty(getScopedVarName("--_ui5_segmented_btn_items_count"), `${visibleItems.length}`);
+		if (this.contentMode === SegmentedButtonContentMode.EqualSized) {
+			this.style.setProperty(getScopedVarName("--_ui5_segmented_btn_items_count"), `${visibleItems.length}`);
+		}
 	}
 
 	normalizeSelection() {

packages/main/src/SegmentedButtonItem.ts

@@ -238,6 +238,14 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto
 	get showIconTooltip() {
 		return getEnableDefaultTooltips() && this.iconOnly && !this.tooltip;
 	}
+
+	get slotTextContent(): string {
+		return this.text
+			.filter(node => node.nodeType === Node.TEXT_NODE)
+			.map(node => node.textContent?.trim() || "")
+			.filter(Boolean)
+			.join(" ");
+	}
 }
 
 SegmentedButtonItem.define();

packages/main/src/SegmentedButtonItemTemplate.tsx

@@ -17,7 +17,7 @@ export default function SegmentedButtonItemTemplate(this: SegmentedButtonItem) {
 			tabindex={this.tabIndexValue ? parseInt(this.tabIndexValue) : undefined }
 			aria-label={this.ariaLabelText}
 			aria-description={this.ariaDescriptionText}
-			title={this.tooltip}
+			title={this.tooltip || this.slotTextContent}
 		>
 			{this.icon &&
 				<Icon

packages/main/src/SegmentedButtonTemplate.tsx

@@ -1,10 +1,15 @@
 import type SegmentedButton from "./SegmentedButton.js";
+import SegmentedButtonContentMode from "./types/SegmentedButtonContentMode.js";
 
 export default function SegmentedButtonTemplate(this: SegmentedButton) {
 	return (
 		<ul
 			role="listbox"
-			class="ui5-segmented-button-root"
+			class={{
+				"ui5-segmented-button-root": true,
+				"ui5-segmented-button-root-equal-sized-items": this.contentMode === SegmentedButtonContentMode.EqualSized,
+				"ui5-segmented-button-root-content-fit-items": this.contentMode === SegmentedButtonContentMode.ContentFit,
+			}}
 			onClick={this._onclick}
 			onMouseDown={this._onmousedown}
 			onKeyDown={this._onkeydown}

packages/main/src/themes/SegmentedButton.css

@@ -8,15 +8,23 @@
 
 .ui5-segmented-button-root {
 	width: inherit;
-	display: grid;
-	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);
 	border-radius: var(--sapButton_BorderCornerRadius);
 	box-shadow: inset 0 0 0 var(--sapButton_BorderWidth) var(--sapButton_BorderColor);
 }
 
+.ui5-segmented-button-root-equal-sized-items {
+	display: grid;
+	grid-template-columns: repeat(var(--_ui5_segmented_btn_items_count), minmax(var(--_ui5_button_base_min_width), 1fr));
+}
+
+.ui5-segmented-button-root-content-fit-items {
+	display: inline-flex;
+	gap: 0;
+}
+
 ::slotted([ui5-segmented-button-item]) {
 	border-radius: var(--sapButton_Segment_BorderCornerRadius);
 	border-color: var(--_ui5_segmented_btn_border_color);

packages/main/src/types/SegmentedButtonContentMode.ts

@@ -0,0 +1,18 @@
+/**
+ * Different SegmentedButton items sizing modes.
+ * @public
+ */
+enum SegmentedButtonContentMode {
+    /**
+	 * Each item is sized to fit its content, with any extra space placed after the last item.
+	 * @public
+	 */
+    ContentFit = "ContentFit",
+    /**
+	 * All items are sized equally to fill the available space.
+	 * @public
+	 */
+    EqualSized = "EqualSized",
+}
+
+export default SegmentedButtonContentMode;

packages/main/test/pages/SegmentedButton.html

@@ -147,6 +147,59 @@ <h1>SegmentedButton wrapped in a container with set width</h1>
 						</ui5-segmented-button>
 					</div>
 				</section>
+
+				<section>
+					<h1>SegmentedButton with Content Mode: Content Fit</h1>
+
+					<ui5-segmented-button content-mode="ContentFit"  selection-mode="Multiple">
+						<ui5-segmented-button-item icon="employee" selected></ui5-segmented-button-item>
+						<ui5-segmented-button-item selected>Word</ui5-segmented-button-item>
+						<ui5-segmented-button-item selected>Word Word</ui5-segmented-button-item>
+						<ui5-segmented-button-item selected>selected SegmentedButtonItem With Bigger Text</ui5-segmented-button-item>
+						<ui5-segmented-button-item selected>Item</ui5-segmented-button-item>
+						<ui5-segmented-button-item selected>selected SegmentedButtonItem</ui5-segmented-button-item>
+						<ui5-segmented-button-item selected>A</ui5-segmented-button-item>
+					</ui5-segmented-button>
+				</section>
+
+				<section>
+					<h1>SegmentedButton with Content Mode: Content Fit - LONG TEXT</h1>
+
+					<ui5-segmented-button content-mode="ContentFit"  selection-mode="Multiple">
+						<ui5-segmented-button-item selected>Word</ui5-segmented-button-item>
+						<ui5-segmented-button-item selected>selected SegmentedButtonItem With Bigger Text selected SegmentedButtonItem With Bigger Text selected SegmentedButtonItem With Bigger Text</ui5-segmented-button-item>
+						<ui5-segmented-button-item selected>Item</ui5-segmented-button-item>
+						<ui5-segmented-button-item selected>selected SegmentedButtonItem</ui5-segmented-button-item>
+						<ui5-segmented-button-item selected>A</ui5-segmented-button-item>
+					</ui5-segmented-button>
+				</section>
+
+				<section>
+					<h1>SegmentedButton with Content Mode: Content Fit with set width</h1>
+
+					<ui5-segmented-button content-mode="ContentFit"  selection-mode="Multiple" class="segmentedbutton2auto">
+						<ui5-segmented-button-item icon="employee" selected></ui5-segmented-button-item>
+						<ui5-segmented-button-item selected>Word</ui5-segmented-button-item>
+						<ui5-segmented-button-item selected>selected SegmentedButtonItem With Bigger Text</ui5-segmented-button-item>
+						<ui5-segmented-button-item selected>Item</ui5-segmented-button-item>
+						<ui5-segmented-button-item selected>selected SegmentedButtonItem</ui5-segmented-button-item>
+						<ui5-segmented-button-item selected>A</ui5-segmented-button-item>
+					</ui5-segmented-button>
+				</section>
+
+				<section>
+					<h1>SegmentedButton with Content Mode: Content Fit with set width (truncation)</h1>
+
+					<ui5-segmented-button content-mode="ContentFit"  selection-mode="Multiple" class="segmentedbutton1auto">
+						<ui5-segmented-button-item selected>Word</ui5-segmented-button-item>
+						<ui5-segmented-button-item selected>selected SegmentedButtonItem With Bigger Text</ui5-segmented-button-item>
+						<ui5-segmented-button-item selected>Item</ui5-segmented-button-item>
+						<ui5-segmented-button-item selected>selected SegmentedButtonItem</ui5-segmented-button-item>
+						<ui5-segmented-button-item selected>A</ui5-segmented-button-item>
+					</ui5-segmented-button>
+				</section>
+
+
 			</div>
 		</div>
 	</section>

packages/website/docs/_components_pages/main/SegmentedButton/SegmentedButton.mdx

@@ -4,6 +4,7 @@ slug: ../../SegmentedButton
 
 import Basic from "../../../_samples/main/SegmentedButton/Basic/Basic.md";
 import SelectionModes from "../../../_samples/main/SegmentedButton/SelectionModes/SelectionModes.md";
+import ContentModes from "../../../_samples/main/SegmentedButton/ContentModes/ContentModes.md";
 
 <%COMPONENT_OVERVIEW%>
 
@@ -17,4 +18,8 @@ import SelectionModes from "../../../_samples/main/SegmentedButton/SelectionMode
 ### Selection Modes
 You can define if single or multiple buttons can be pressed.
 
-<SelectionModes />
+<SelectionModes />
+
+### Content Modes
+You can define the content behaviour of SegmentedButton items.
+<ContentModes/>

packages/website/docs/_samples/main/SegmentedButton/ContentModes/ContentModes.md

@@ -0,0 +1,4 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+
+<Editor html={html} js={js} />

packages/website/docs/_samples/main/SegmentedButton/ContentModes/main.js

@@ -0,0 +1,6 @@
+import "@ui5/webcomponents/dist/SegmentedButton.js";
+import "@ui5/webcomponents/dist/SegmentedButtonItem.js";
+import "@ui5/webcomponents-icons/dist/bold-text.js";
+import "@ui5/webcomponents-icons/dist/underline-text.js";
+import "@ui5/webcomponents-icons/dist/italic-text.js";
+import "@ui5/webcomponents/dist/Title.js";

packages/website/docs/_samples/main/SegmentedButton/ContentModes/sample.html

@@ -0,0 +1,38 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample</title>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor)">
+    <!-- playground-fold-end -->
+    <ui5-title>Content Mode: ContentFit</ui5-title>
+    <br>
+    <ui5-segmented-button accessible-name="Font style" content-mode="ContentFit">
+        <ui5-segmented-button-item selected>Map</ui5-segmented-button-item>
+        <ui5-segmented-button-item>Some Big Satellite</ui5-segmented-button-item>
+        <ui5-segmented-button-item>Terrain</ui5-segmented-button-item>
+        <ui5-segmented-button-item tooltip="Italic" icon="italic-text"></ui5-segmented-button-item>
+    </ui5-segmented-button>
+
+    <br><br>
+
+    <ui5-title>Content Mode: EqualSized</ui5-title>
+    <br>
+    <ui5-segmented-button accessible-name="Font style" content-mode="EqualSized">
+        <ui5-segmented-button-item selected>Map</ui5-segmented-button-item>
+        <ui5-segmented-button-item>Some Big Satellite</ui5-segmented-button-item>
+        <ui5-segmented-button-item>Terrain</ui5-segmented-button-item>
+        <ui5-segmented-button-item tooltip="Italic" icon="italic-text"></ui5-segmented-button-item>
+    </ui5-segmented-button>
+
+    <!-- playground-fold -->
+    <script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-fold-end -->