From 4000845dff6042288833a7245240ef4523e700a5 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Thu, 25 Sep 2025 18:09:46 +0300 Subject: [PATCH 01/14] feat: implement content fit --- packages/main/src/SegmentedButton.ts | 4 ++ packages/main/src/SegmentedButtonItem.ts | 4 ++ .../main/src/SegmentedButtonItemTemplate.tsx | 2 +- packages/main/src/SegmentedButtonTemplate.tsx | 2 +- packages/main/src/themes/SegmentedButton.css | 11 ++++++ .../src/types/SegmentedButtonContentMode.ts | 6 +++ packages/main/test/pages/SegmentedButton.html | 38 +++++++++++++++++++ 7 files changed, 65 insertions(+), 2 deletions(-) create mode 100644 packages/main/src/types/SegmentedButtonContentMode.ts diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts index c60a0e52dc00..74d0c735ef00 100644 --- a/packages/main/src/SegmentedButton.ts +++ b/packages/main/src/SegmentedButton.ts @@ -30,6 +30,7 @@ import SegmentedButtonTemplate from "./SegmentedButtonTemplate.js"; // Styles import SegmentedButtonCss from "./generated/themes/SegmentedButton.css.js"; +import type SegmentedButtonContentMode from "./types/SegmentedButtonContentMode.js"; /** * Interface for components that may be slotted inside `ui5-segmented-button` as items @@ -127,6 +128,8 @@ class SegmentedButton extends UI5Element { @property() selectionMode: `${SegmentedButtonSelectionMode}` = "Single"; + @property() + content: `${SegmentedButtonContentMode}` = "EqualSized"; /** * Defines the items of `ui5-segmented-button`. * @@ -167,6 +170,7 @@ class SegmentedButton extends UI5Element { items.forEach(item => { item.posInSet = item.hidden ? undefined : index++; item.sizeOfSet = item.hidden ? undefined : visibleItems.length; + item.content = this.content; }); this.normalizeSelection(); diff --git a/packages/main/src/SegmentedButtonItem.ts b/packages/main/src/SegmentedButtonItem.ts index 98e356440077..d3eede5eb70c 100644 --- a/packages/main/src/SegmentedButtonItem.ts +++ b/packages/main/src/SegmentedButtonItem.ts @@ -20,6 +20,7 @@ import SegmentedButtonItemTemplate from "./SegmentedButtonItemTemplate.js"; import type { IButton } from "./Button.js"; import segmentedButtonItemCss from "./generated/themes/SegmentedButtonItem.css.js"; +import SegmentedButtonContentMode from "./types/SegmentedButtonContentMode.js"; /** * @class * @@ -168,6 +169,9 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto @property({ type: Boolean }) hidden = false; + @property({ noAttribute: true }) + content?: string; + /** * Defines the text of the component. * diff --git a/packages/main/src/SegmentedButtonItemTemplate.tsx b/packages/main/src/SegmentedButtonItemTemplate.tsx index cf239a689bb7..a247bd621311 100644 --- a/packages/main/src/SegmentedButtonItemTemplate.tsx +++ b/packages/main/src/SegmentedButtonItemTemplate.tsx @@ -5,7 +5,7 @@ export default function SegmentedButtonItemTemplate(this: SegmentedButtonItem) { return (
  • SegmentedButton wrapped in a container with set width + +
    +

    SegmentedButton with Content Mode: Content Fit

    + + + Word + selected SegmentedButtonItem With Bigger Text + Item + selected SegmentedButtonItem + A + +
    + +
    +

    SegmentedButton with Content Mode: Content Fit - LONG TEXT (WHERE WE SHOULD TRUNCATE)

    + + + Word + selected SegmentedButtonItem With Bigger Text selected SegmentedButtonItem With Bigger Text selected SegmentedButtonItem With Bigger Text + Item + selected SegmentedButtonItem + A + +
    + +
    +

    SegmentedButton with Content Mode: Content Fit with set width

    + + + Word + selected SegmentedButtonItem With Bigger Text + Item + selected SegmentedButtonItem + A + +
    + + From f6d0127956e3148a6414d09a0d07830ab100a2b1 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Thu, 25 Sep 2025 18:14:42 +0300 Subject: [PATCH 02/14] feat: truncate long texts in contentFit mode --- packages/main/src/themes/SegmentedButton.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/main/src/themes/SegmentedButton.css b/packages/main/src/themes/SegmentedButton.css index 529d987d936b..ee5ff05a83d6 100644 --- a/packages/main/src/themes/SegmentedButton.css +++ b/packages/main/src/themes/SegmentedButton.css @@ -37,6 +37,10 @@ :host([content="ContentFit"]) ::slotted([ui5-segmented-button-item]) { width: fit-content; + max-width: 400px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } ::slotted([ui5-segmented-button-item]:hover) { From 091083a561d934db73bc1e0baae0567beda1882e Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Fri, 26 Sep 2025 15:20:47 +0300 Subject: [PATCH 03/14] feat: dynamic text truncation --- packages/main/src/themes/SegmentedButton.css | 5 ++--- packages/main/test/pages/SegmentedButton.html | 17 ++++++++++++++++- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/packages/main/src/themes/SegmentedButton.css b/packages/main/src/themes/SegmentedButton.css index ee5ff05a83d6..cf01b82ca06e 100644 --- a/packages/main/src/themes/SegmentedButton.css +++ b/packages/main/src/themes/SegmentedButton.css @@ -18,10 +18,10 @@ } .ui5-segmented-button-root--ContentFit { - display: inline-grid; + display: inline-flex; grid-template-columns: none; grid-auto-flow: column; - gap: 0.0625rem; + gap: 0; } ::slotted([ui5-segmented-button-item]) { @@ -37,7 +37,6 @@ :host([content="ContentFit"]) ::slotted([ui5-segmented-button-item]) { width: fit-content; - max-width: 400px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/packages/main/test/pages/SegmentedButton.html b/packages/main/test/pages/SegmentedButton.html index 651bca487ffe..76596b218f41 100644 --- a/packages/main/test/pages/SegmentedButton.html +++ b/packages/main/test/pages/SegmentedButton.html @@ -152,7 +152,9 @@

    SegmentedButton wrapped in a container with set width

    SegmentedButton with Content Mode: Content Fit

    + Word + Word Word selected SegmentedButtonItem With Bigger Text Item selected SegmentedButtonItem @@ -161,7 +163,7 @@

    SegmentedButton with Content Mode: Content Fit

    -

    SegmentedButton with Content Mode: Content Fit - LONG TEXT (WHERE WE SHOULD TRUNCATE)

    +

    SegmentedButton with Content Mode: Content Fit - LONG TEXT

    Word @@ -176,6 +178,19 @@

    SegmentedButton with Content Mode: Content Fit - LONG TEXT (WHERE WE SHOULD

    SegmentedButton with Content Mode: Content Fit with set width

    + + Word + selected SegmentedButtonItem With Bigger Text + Item + selected SegmentedButtonItem + A + +
    + +
    +

    SegmentedButton with Content Mode: Content Fit with set width (truncation)

    + + Word selected SegmentedButtonItem With Bigger Text Item From 384debc0b287cf61a297522cba312f278ba36f52 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Fri, 26 Sep 2025 15:25:12 +0300 Subject: [PATCH 04/14] chore: add todo --- packages/main/src/SegmentedButton.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts index 74d0c735ef00..5f1878a81b64 100644 --- a/packages/main/src/SegmentedButton.ts +++ b/packages/main/src/SegmentedButton.ts @@ -79,6 +79,7 @@ type SegmentedButtonSelectionChangeEventDetail = { bubbles: true, }) +//TODO: when content is with contentFit we can have a truncation so for acc we should add tooltip to each segmented button item, these should happen with api (tooltip: enable, disable) class SegmentedButton extends UI5Element { eventDetails!: { "selection-change": SegmentedButtonSelectionChangeEventDetail, From 23f7c47860eb4ef904e1bfd456f94494ac01eacf Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Thu, 2 Oct 2025 15:20:08 +0300 Subject: [PATCH 05/14] refactor: make code productive --- packages/main/src/SegmentedButton.ts | 21 ++++++++++++++----- packages/main/src/SegmentedButtonItem.ts | 11 +++++++--- .../main/src/SegmentedButtonItemTemplate.tsx | 4 ++-- packages/main/src/SegmentedButtonTemplate.tsx | 2 +- packages/main/src/themes/SegmentedButton.css | 18 ++++++---------- packages/main/test/pages/SegmentedButton.html | 8 +++---- 6 files changed, 37 insertions(+), 27 deletions(-) diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts index 5f1878a81b64..cefc89051e34 100644 --- a/packages/main/src/SegmentedButton.ts +++ b/packages/main/src/SegmentedButton.ts @@ -30,7 +30,7 @@ import SegmentedButtonTemplate from "./SegmentedButtonTemplate.js"; // Styles import SegmentedButtonCss from "./generated/themes/SegmentedButton.css.js"; -import type SegmentedButtonContentMode from "./types/SegmentedButtonContentMode.js"; +import SegmentedButtonContentMode from "./types/SegmentedButtonContentMode.js"; /** * Interface for components that may be slotted inside `ui5-segmented-button` as items @@ -79,7 +79,6 @@ type SegmentedButtonSelectionChangeEventDetail = { bubbles: true, }) -//TODO: when content is with contentFit we can have a truncation so for acc we should add tooltip to each segmented button item, these should happen with api (tooltip: enable, disable) class SegmentedButton extends UI5Element { eventDetails!: { "selection-change": SegmentedButtonSelectionChangeEventDetail, @@ -130,7 +129,7 @@ class SegmentedButton extends UI5Element { selectionMode: `${SegmentedButtonSelectionMode}` = "Single"; @property() - content: `${SegmentedButtonContentMode}` = "EqualSized"; + contentMode: `${SegmentedButtonContentMode}` = "EqualSized"; /** * Defines the items of `ui5-segmented-button`. * @@ -171,12 +170,13 @@ class SegmentedButton extends UI5Element { items.forEach(item => { item.posInSet = item.hidden ? undefined : index++; item.sizeOfSet = item.hidden ? undefined : visibleItems.length; - item.content = this.content; }); 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() { @@ -317,6 +317,17 @@ class SegmentedButton extends UI5Element { get ariaRoleDescription() { return SegmentedButton.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIPTION); } + + get contentModeClass() { + switch (this.contentMode) { + case SegmentedButtonContentMode.EqualSized: + return "ui5-segmented-button-root-equal-sized-items"; + case SegmentedButtonContentMode.ContentFit: + return "ui5-segmented-button-root-content-fit-items"; + default: + return ""; + } + } } SegmentedButton.define(); diff --git a/packages/main/src/SegmentedButtonItem.ts b/packages/main/src/SegmentedButtonItem.ts index d3eede5eb70c..b4bfb397ea30 100644 --- a/packages/main/src/SegmentedButtonItem.ts +++ b/packages/main/src/SegmentedButtonItem.ts @@ -169,9 +169,6 @@ class SegmentedButtonItem extends UI5Element implements IButton, ISegmentedButto @property({ type: Boolean }) hidden = false; - @property({ noAttribute: true }) - content?: string; - /** * Defines the text of the component. * @@ -242,6 +239,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(); diff --git a/packages/main/src/SegmentedButtonItemTemplate.tsx b/packages/main/src/SegmentedButtonItemTemplate.tsx index a247bd621311..11765a7ac654 100644 --- a/packages/main/src/SegmentedButtonItemTemplate.tsx +++ b/packages/main/src/SegmentedButtonItemTemplate.tsx @@ -5,7 +5,7 @@ export default function SegmentedButtonItemTemplate(this: SegmentedButtonItem) { return (
  • {this.icon && SegmentedButton wrapped in a container with set width

    SegmentedButton with Content Mode: Content Fit

    - + Word Word Word @@ -165,7 +165,7 @@

    SegmentedButton with Content Mode: Content Fit

    SegmentedButton with Content Mode: Content Fit - LONG TEXT

    - + Word selected SegmentedButtonItem With Bigger Text selected SegmentedButtonItem With Bigger Text selected SegmentedButtonItem With Bigger Text Item @@ -177,7 +177,7 @@

    SegmentedButton with Content Mode: Content Fit - LONG TEXT

    SegmentedButton with Content Mode: Content Fit with set width

    - + Word selected SegmentedButtonItem With Bigger Text @@ -190,7 +190,7 @@

    SegmentedButton with Content Mode: Content Fit with set width

    SegmentedButton with Content Mode: Content Fit with set width (truncation)

    - + Word selected SegmentedButtonItem With Bigger Text Item From f34a084ef3ba6273ff6a5baab81f010d4ef05656 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Thu, 2 Oct 2025 15:34:20 +0300 Subject: [PATCH 06/14] refactor: remove unused import --- packages/main/src/SegmentedButtonItem.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/main/src/SegmentedButtonItem.ts b/packages/main/src/SegmentedButtonItem.ts index b4bfb397ea30..f48706d85177 100644 --- a/packages/main/src/SegmentedButtonItem.ts +++ b/packages/main/src/SegmentedButtonItem.ts @@ -20,7 +20,6 @@ import SegmentedButtonItemTemplate from "./SegmentedButtonItemTemplate.js"; import type { IButton } from "./Button.js"; import segmentedButtonItemCss from "./generated/themes/SegmentedButtonItem.css.js"; -import SegmentedButtonContentMode from "./types/SegmentedButtonContentMode.js"; /** * @class * From 850ed649503ec67384f1e1f92479b9c884c7535c Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Thu, 2 Oct 2025 15:36:47 +0300 Subject: [PATCH 07/14] refactor: add jsdoc --- packages/main/src/SegmentedButton.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts index cefc89051e34..bf01cd16bf08 100644 --- a/packages/main/src/SegmentedButton.ts +++ b/packages/main/src/SegmentedButton.ts @@ -128,6 +128,16 @@ class SegmentedButton extends UI5Element { @property() 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 fits its content and extra space is after the last item. + * + * @default "EqualSized" + * @public + * @since 2.15.0 + */ @property() contentMode: `${SegmentedButtonContentMode}` = "EqualSized"; /** From 05d36c0512cc4a1093370d21174aea4d2df4a0d2 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Thu, 2 Oct 2025 15:52:56 +0300 Subject: [PATCH 08/14] test: add cypress tests --- .../main/cypress/specs/SegmentedButton.cy.tsx | 57 +++++++++++++++++++ 1 file changed, 57 insertions(+) diff --git a/packages/main/cypress/specs/SegmentedButton.cy.tsx b/packages/main/cypress/specs/SegmentedButton.cy.tsx index e3d428062da0..973b9188691f 100644 --- a/packages/main/cypress/specs/SegmentedButton.cy.tsx +++ b/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( + + Short + Much longer text + Medium + + ); + + 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( + + Short + Much longer text + Medium + + ); + + 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( + + Segmented Item Text + + ); + + cy.get("#item1") + .shadow() + .find("li") + .should("have.attr", "title", "Segmented Item Text"); + }); }); \ No newline at end of file From f7cd89156f8dfc3cf75935f5f40c27e1ba66f351 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Thu, 2 Oct 2025 20:29:05 +0300 Subject: [PATCH 09/14] refactor: add jsdoc --- .../src/types/SegmentedButtonContentMode.ts | 24 ++++++++++++++----- 1 file changed, 18 insertions(+), 6 deletions(-) diff --git a/packages/main/src/types/SegmentedButtonContentMode.ts b/packages/main/src/types/SegmentedButtonContentMode.ts index 302bfa689562..60a5eff8f539 100644 --- a/packages/main/src/types/SegmentedButtonContentMode.ts +++ b/packages/main/src/types/SegmentedButtonContentMode.ts @@ -1,6 +1,18 @@ -enum SegmentedButtonContentMode { - ContentFit = "ContentFit", - EqualSized = "EqualSized", -}; - -export default SegmentedButtonContentMode; \ No newline at end of file +/** + * Different SegmentedButton items sizing modes. + * @public + */ +enum SegmentedButtonContentMode { + /** + * Each item fits its content and extra space is placed after the last item. + * @public + */ + ContentFit = "ContentFit", + /** /** + * All items are sized equally to fill the available space. + * @public + */ + EqualSized = "EqualSized", +} + +export default SegmentedButtonContentMode; From 1a99f0d14915eb7efad7f2878de81008e92812e2 Mon Sep 17 00:00:00 2001 From: GDamyanov Date: Mon, 6 Oct 2025 10:06:36 +0300 Subject: [PATCH 10/14] Update packages/main/src/types/SegmentedButtonContentMode.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- packages/main/src/types/SegmentedButtonContentMode.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/types/SegmentedButtonContentMode.ts b/packages/main/src/types/SegmentedButtonContentMode.ts index 60a5eff8f539..2921ba0d0c03 100644 --- a/packages/main/src/types/SegmentedButtonContentMode.ts +++ b/packages/main/src/types/SegmentedButtonContentMode.ts @@ -8,7 +8,7 @@ enum SegmentedButtonContentMode { * @public */ ContentFit = "ContentFit", - /** /** + /** * All items are sized equally to fill the available space. * @public */ From 81f784557b0f8cf9544ffae6ac47cddd4ac978de Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Mon, 6 Oct 2025 17:18:48 +0300 Subject: [PATCH 11/14] feat: add sample in playground --- packages/main/src/SegmentedButton.ts | 2 +- .../ContentModes/ContentModes.md | 4 ++ .../main/SegmentedButton/ContentModes/main.js | 6 +++ .../SegmentedButton/ContentModes/sample.html | 38 +++++++++++++++++++ 4 files changed, 49 insertions(+), 1 deletion(-) create mode 100644 packages/website/docs/_samples/main/SegmentedButton/ContentModes/ContentModes.md create mode 100644 packages/website/docs/_samples/main/SegmentedButton/ContentModes/main.js create mode 100644 packages/website/docs/_samples/main/SegmentedButton/ContentModes/sample.html diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts index bf01cd16bf08..ea371d7843e8 100644 --- a/packages/main/src/SegmentedButton.ts +++ b/packages/main/src/SegmentedButton.ts @@ -136,7 +136,7 @@ class SegmentedButton extends UI5Element { * * @default "EqualSized" * @public - * @since 2.15.0 + * @since 2.16.0 */ @property() contentMode: `${SegmentedButtonContentMode}` = "EqualSized"; diff --git a/packages/website/docs/_samples/main/SegmentedButton/ContentModes/ContentModes.md b/packages/website/docs/_samples/main/SegmentedButton/ContentModes/ContentModes.md new file mode 100644 index 000000000000..e11458217b49 --- /dev/null +++ b/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'; + + diff --git a/packages/website/docs/_samples/main/SegmentedButton/ContentModes/main.js b/packages/website/docs/_samples/main/SegmentedButton/ContentModes/main.js new file mode 100644 index 000000000000..7b6a65bda0cb --- /dev/null +++ b/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"; \ No newline at end of file diff --git a/packages/website/docs/_samples/main/SegmentedButton/ContentModes/sample.html b/packages/website/docs/_samples/main/SegmentedButton/ContentModes/sample.html new file mode 100644 index 000000000000..5685d5848ade --- /dev/null +++ b/packages/website/docs/_samples/main/SegmentedButton/ContentModes/sample.html @@ -0,0 +1,38 @@ + + + + + + + + Sample + + + + + Content Mode: ContentFit +
    + + Map + Some Big Satellite + Terrain + + + +

    + + Content Mode: EqualSized +
    + + Map + Some Big Satellite + Terrain + + + + + + + + + From 0b0e558c9c0c97359ee35279a0d738c1e59e74e9 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Tue, 7 Oct 2025 12:04:23 +0300 Subject: [PATCH 12/14] fix: import sample --- .../main/SegmentedButton/SegmentedButton.mdx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/website/docs/_components_pages/main/SegmentedButton/SegmentedButton.mdx b/packages/website/docs/_components_pages/main/SegmentedButton/SegmentedButton.mdx index 4072f9851e58..13c2234a01c7 100644 --- a/packages/website/docs/_components_pages/main/SegmentedButton/SegmentedButton.mdx +++ b/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. - \ No newline at end of file + + +### Content Modes +You can define the content behaviour of SegmentedButton items. + \ No newline at end of file From c6382322b9bce7d54d835b06b14816153013b8b8 Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Fri, 10 Oct 2025 16:24:33 +0300 Subject: [PATCH 13/14] fix: refactor jsdocs --- packages/main/src/SegmentedButton.ts | 2 +- packages/main/src/types/SegmentedButtonContentMode.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts index ea371d7843e8..2d97ecc01244 100644 --- a/packages/main/src/SegmentedButton.ts +++ b/packages/main/src/SegmentedButton.ts @@ -132,7 +132,7 @@ class SegmentedButton extends UI5Element { * Defines the content mode of the segmented button items. * * - "EqualSized": All items are sized equally to fill the available space. - * - "ContentFit": Each item fits its content and extra space is after the last item. + * - "ContentFit": Each item is sized to fit its content, with any extra space placed after the last item. * * @default "EqualSized" * @public diff --git a/packages/main/src/types/SegmentedButtonContentMode.ts b/packages/main/src/types/SegmentedButtonContentMode.ts index 2921ba0d0c03..702f1790edbf 100644 --- a/packages/main/src/types/SegmentedButtonContentMode.ts +++ b/packages/main/src/types/SegmentedButtonContentMode.ts @@ -4,7 +4,7 @@ */ enum SegmentedButtonContentMode { /** - * Each item fits its content and extra space is placed after the last item. + * Each item is sized to fit its content, with any extra space placed after the last item. * @public */ ContentFit = "ContentFit", From cc7f21218bf2e8b3b78251770f666eade5ca8d9f Mon Sep 17 00:00:00 2001 From: Georgi Damyanov Date: Fri, 10 Oct 2025 16:36:18 +0300 Subject: [PATCH 14/14] refactor: extract class in template --- packages/main/src/SegmentedButton.ts | 11 ----------- packages/main/src/SegmentedButtonTemplate.tsx | 7 ++++++- 2 files changed, 6 insertions(+), 12 deletions(-) diff --git a/packages/main/src/SegmentedButton.ts b/packages/main/src/SegmentedButton.ts index 2d97ecc01244..09245283f656 100644 --- a/packages/main/src/SegmentedButton.ts +++ b/packages/main/src/SegmentedButton.ts @@ -327,17 +327,6 @@ class SegmentedButton extends UI5Element { get ariaRoleDescription() { return SegmentedButton.i18nBundle.getText(SEGMENTEDBUTTON_ARIA_DESCRIPTION); } - - get contentModeClass() { - switch (this.contentMode) { - case SegmentedButtonContentMode.EqualSized: - return "ui5-segmented-button-root-equal-sized-items"; - case SegmentedButtonContentMode.ContentFit: - return "ui5-segmented-button-root-content-fit-items"; - default: - return ""; - } - } } SegmentedButton.define(); diff --git a/packages/main/src/SegmentedButtonTemplate.tsx b/packages/main/src/SegmentedButtonTemplate.tsx index 7f812d2db812..f601c4312b9b 100644 --- a/packages/main/src/SegmentedButtonTemplate.tsx +++ b/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 (