From b7ba766f51b79ad84d89df505e1e61e9547a4776 Mon Sep 17 00:00:00 2001 From: yanaminkova <32466553+yanaminkova@users.noreply.github.com> Date: Mon, 29 Sep 2025 13:27:06 +0300 Subject: [PATCH 1/3] feat(ui5-select): twoColumnSeparator property added --- packages/main/cypress/specs/Select.cy.tsx | 84 +++++++++++++++++++ packages/main/src/Select.ts | 76 ++++++++++++++++- packages/main/src/SelectTemplate.tsx | 2 +- .../src/types/SelectTwoColumnSeparator.ts | 25 ++++++ packages/main/test/pages/Select.html | 45 ++++++++++ 5 files changed, 229 insertions(+), 3 deletions(-) create mode 100644 packages/main/src/types/SelectTwoColumnSeparator.ts diff --git a/packages/main/cypress/specs/Select.cy.tsx b/packages/main/cypress/specs/Select.cy.tsx index 4ad8461ea70f..82424f905102 100644 --- a/packages/main/cypress/specs/Select.cy.tsx +++ b/packages/main/cypress/specs/Select.cy.tsx @@ -443,6 +443,76 @@ describe("Select - Accessibility", () => { .find("#accessibleDescription") .should("have.text", "First description Updated second description Third description"); }); + + it("should not display tooltip when Select is not readonly", () => { + cy.mount( + + ); + + cy.get("[ui5-select]") + .shadow() + .find(".ui5-select-root") + .should("not.have.attr", "title"); + }); + + it("should display user tooltip with precedence over the default tooltip", () => { + cy.mount( + + ); + + cy.get("[ui5-select]") + .shadow() + .find(".ui5-select-root") + .should("have.attr", "title", "Custom tooltip"); + }); + + it("should display default tooltip (text + additionalText) if it is read-only and text is truncated, even if tooltip is not set", () => { + cy.mount( + + ); + + cy.get("[ui5-select]") + .shadow() + .find(".ui5-select-root") + .should("have.attr", "title", "VeryLongOptionText – AdditionalInfo"); + }); + + it("should display default tooltip (text) if it is read-only and text is truncated, even if tooltip is not set", () => { + cy.mount( + + ); + + cy.get("[ui5-select]") + .shadow() + .find(".ui5-select-root") + .should("have.attr", "title", "VeryLongOptionTextThatWillBeTruncated"); + }); + + it("should show the text and additionalText, separated by '-' when select is read-only", () => { + cy.mount( + + ); + + cy.get("[ui5-select]") + .shadow() + .find(".ui5-select-label-root") + .should("contain.text", "SelectedOption – ExtraInfo"); + }); }); describe("Select - Popover", () => { @@ -489,6 +559,20 @@ describe("Select - Properties", () => { cy.get("[ui5-select]").should("have.prop", "formFormattedValue", ""); }); + + it("Should show the selected two-column-separator when select is read-only", () => { + cy.mount( + + ); + + cy.get("[ui5-select]") + .shadow() + .find(".ui5-select-label-root") + .should("contain.text", " | "); + }); }); describe("Select - Validation", () => { diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 66693a37ffe5..73f1a93666c8 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -26,6 +26,7 @@ import { getEffectiveAriaDescriptionText, } from "@ui5/webcomponents-base/dist/util/AccessibilityTextsHelper.js"; import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js"; +import SelectTwoColumnSeparator from "./types/SelectTwoColumnSeparator.js"; import "@ui5/webcomponents-icons/dist/error.js"; import "@ui5/webcomponents-icons/dist/alert.js"; import "@ui5/webcomponents-icons/dist/sys-enter-2.js"; @@ -337,6 +338,16 @@ class Select extends UI5Element implements IFormInputElement { @property() tooltip?: string; + /** + * Defines the separator type for the two columns layout when Select is in read-only mode. + * + * @default "Dash" + * @public + * @since 2.15.0 + */ + @property() + twoColumnSeparator: `${SelectTwoColumnSeparator}` = "Dash"; + /** * Constantly updated value of texts collected from the associated description texts * @private @@ -582,8 +593,69 @@ class Select extends UI5Element implements IFormInputElement { return this.options.find(option => option.selected); } - get text() { - return this.selectedOption?.effectiveDisplayText; + /** + * Helper function to build display text with separator when additional text exists + * @param mainText - The main text content + * @param additionalText - The additional text (optional) + * @returns The combined text with separator if additionalText exists, otherwise just mainText + * @private + */ + _buildDisplayText(mainText: string, additionalText?: string) { + if (!additionalText) { + return mainText; + } + + return `${mainText} ${this._separatorSymbol} ${additionalText}`; + } + + get text(): string { + const selectedOption = this.selectedOption; + if (!selectedOption) { + return ""; + } + + // Only show separator when readonly and there's additional text + if (this.readonly && selectedOption.additionalText) { + return this._buildDisplayText( + selectedOption.effectiveDisplayText, + selectedOption.additionalText + ); + } + + return selectedOption.effectiveDisplayText; + } + + get _effectiveTooltip(): string | undefined { + // User-defined tooltip takes precedence + if (this.tooltip) { + return this.tooltip; + } + + // Provide default tooltip for readonly mode to show full content + if (this.readonly) { + const selectedOption = this.selectedOption; + if (!selectedOption) { + return undefined; + } + + // Use textContent for tooltip to show actual text content, not display text + const mainText = selectedOption.textContent || ""; + return this._buildDisplayText(mainText, selectedOption.additionalText); + } + + return undefined; + } + + get _separatorSymbol(): string { + switch (this.twoColumnSeparator) { + case SelectTwoColumnSeparator.Bullet: + return "·"; // Middle dot (U+00B7) + case SelectTwoColumnSeparator.VerticalLine: + return "|"; // Vertical line (U+007C) + case SelectTwoColumnSeparator.Dash: + default: + return "–"; // En dash (U+2013) + } } _toggleRespPopover() { diff --git a/packages/main/src/SelectTemplate.tsx b/packages/main/src/SelectTemplate.tsx index df81b7277eb0..c0ed1fb24c7c 100644 --- a/packages/main/src/SelectTemplate.tsx +++ b/packages/main/src/SelectTemplate.tsx @@ -13,7 +13,7 @@ export default function SelectTemplate(this: Select) { }} id={`${this._id}-select`} onClick={this._onclick} - title={this.tooltip} + title={this._effectiveTooltip} > {!this.icon && this.selectedOptionIcon && icon prop Check Validity + +
+

Separator configuration

+
+ Two column separator: + + Dash + Bullet + VerticalLine + +
+ +
+ Editable: + +
+ + + Algeria + Argentina + Australia + +
+ \ No newline at end of file From b664980e9ba709988d33cc7664e4d39585b01bcd Mon Sep 17 00:00:00 2001 From: yanaminkova <32466553+yanaminkova@users.noreply.github.com> Date: Mon, 29 Sep 2025 13:49:15 +0300 Subject: [PATCH 2/3] feat(ui5-select): fix lint errors --- packages/main/src/Select.ts | 26 +++++++++---------- .../src/types/SelectTwoColumnSeparator.ts | 2 +- 2 files changed, 14 insertions(+), 14 deletions(-) diff --git a/packages/main/src/Select.ts b/packages/main/src/Select.ts index 73f1a93666c8..7e4a33f6af9a 100644 --- a/packages/main/src/Select.ts +++ b/packages/main/src/Select.ts @@ -613,15 +613,15 @@ class Select extends UI5Element implements IFormInputElement { if (!selectedOption) { return ""; } - + // Only show separator when readonly and there's additional text if (this.readonly && selectedOption.additionalText) { return this._buildDisplayText( selectedOption.effectiveDisplayText, - selectedOption.additionalText + selectedOption.additionalText, ); } - + return selectedOption.effectiveDisplayText; } @@ -630,31 +630,31 @@ class Select extends UI5Element implements IFormInputElement { if (this.tooltip) { return this.tooltip; } - + // Provide default tooltip for readonly mode to show full content if (this.readonly) { const selectedOption = this.selectedOption; if (!selectedOption) { return undefined; } - + // Use textContent for tooltip to show actual text content, not display text const mainText = selectedOption.textContent || ""; return this._buildDisplayText(mainText, selectedOption.additionalText); } - + return undefined; } get _separatorSymbol(): string { switch (this.twoColumnSeparator) { - case SelectTwoColumnSeparator.Bullet: - return "·"; // Middle dot (U+00B7) - case SelectTwoColumnSeparator.VerticalLine: - return "|"; // Vertical line (U+007C) - case SelectTwoColumnSeparator.Dash: - default: - return "–"; // En dash (U+2013) + case SelectTwoColumnSeparator.Bullet: + return "·"; // Middle dot (U+00B7) + case SelectTwoColumnSeparator.VerticalLine: + return "|"; // Vertical line (U+007C) + case SelectTwoColumnSeparator.Dash: + default: + return "–"; // En dash (U+2013) } } diff --git a/packages/main/src/types/SelectTwoColumnSeparator.ts b/packages/main/src/types/SelectTwoColumnSeparator.ts index 6c50a08c6441..25286c1a1254 100644 --- a/packages/main/src/types/SelectTwoColumnSeparator.ts +++ b/packages/main/src/types/SelectTwoColumnSeparator.ts @@ -22,4 +22,4 @@ enum SelectTwoColumnSeparator { VerticalLine = "VerticalLine", } -export default SelectTwoColumnSeparator; \ No newline at end of file +export default SelectTwoColumnSeparator; From 930884bf26d865c3647811c3d9639b0a884ef605 Mon Sep 17 00:00:00 2001 From: yanaminkova <32466553+yanaminkova@users.noreply.github.com> Date: Tue, 30 Sep 2025 15:21:24 +0300 Subject: [PATCH 3/3] feat(ui5-select): fix typo --- packages/main/test/pages/Select.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/test/pages/Select.html b/packages/main/test/pages/Select.html index 79ecbf91aa0c..ab524a8ae886 100644 --- a/packages/main/test/pages/Select.html +++ b/packages/main/test/pages/Select.html @@ -313,7 +313,7 @@

Separator configuration

- Editable: + Read-only: