feat(ui5-select): adds new prop textSeparator

Author: dobrinyonkov

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

@@ -617,9 +617,9 @@ describe("Select - Properties", () => {
 		cy.get("[ui5-select]").should("have.prop", "formFormattedValue", "");
 	});
 
-	it("Should show the selected two-column-separator when select is read-only", () => {
+	it("Should show the selected text-separator when select is read-only", () => {
 		cy.mount(
-			<Select readonly two-column-separator="VerticalLine">
+			<Select readonly text-separator="VerticalLine">
 				<Option additionalText="Additional1" selected>First</Option>
 				<Option additionalText="Additional2">Second</Option>
 			</Select>

packages/main/src/Select.ts

@@ -26,7 +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 SelectTextSeparator from "./types/SelectTextSeparator.js";
 import "@ui5/webcomponents-icons/dist/error.js";
 import "@ui5/webcomponents-icons/dist/alert.js";
 import "@ui5/webcomponents-icons/dist/sys-enter-2.js";
@@ -346,7 +346,7 @@ class Select extends UI5Element implements IFormInputElement {
 	 * @since 2.16.0
 	 */
 	@property()
-	twoColumnSeparator: `${SelectTwoColumnSeparator}` = "Dash";
+	textSeparator: `${SelectTextSeparator}` = "Dash";
 
 	/**
 	 * Constantly updated value of texts collected from the associated description texts
@@ -647,12 +647,12 @@ class Select extends UI5Element implements IFormInputElement {
 	}
 
 	get _separatorSymbol(): string {
-		switch (this.twoColumnSeparator) {
-		case SelectTwoColumnSeparator.Bullet:
+		switch (this.textSeparator) {
+		case SelectTextSeparator.Bullet:
 			return "·"; // Middle dot (U+00B7)
-		case SelectTwoColumnSeparator.VerticalLine:
+		case SelectTextSeparator.VerticalLine:
 			return "|"; // Vertical line (U+007C)
-		case SelectTwoColumnSeparator.Dash:
+		case SelectTextSeparator.Dash:
 		default:
 			return "–"; // En dash (U+2013)
 		}

…in/src/types/SelectTwoColumnSeparator.ts …es/main/src/types/SelectTextSeparator.tspackages/main/src/types/SelectTwoColumnSeparator.ts renamed to packages/main/src/types/SelectTextSeparator.ts packages/main/src/types/SelectTwoColumnSeparator.ts renamed to packages/main/src/types/SelectTextSeparator.ts

@@ -3,7 +3,7 @@
  * @public
  * @since 2.16.0
  */
-enum SelectTwoColumnSeparator {
+enum SelectTextSeparator {
 	/**
 	 * Will show bullet(·) as separator on two columns layout when Select is in read-only mode.
 	 * @public
@@ -23,4 +23,4 @@ enum SelectTwoColumnSeparator {
 	VerticalLine = "VerticalLine",
 }
 
-export default SelectTwoColumnSeparator;
+export default SelectTextSeparator;

packages/main/test/pages/Select.html

@@ -304,7 +304,7 @@ <h2>icon prop</h2>
 	<section>
 		<h3>Separator configuration</h3>
 		<div>
-			<span>Two column separator:</span>
+			<span>Text separator:</span>
 			<ui5-select id="selectSeparators">
 				<ui5-option selected>Dash</ui5-option>
 				<ui5-option>Bullet</ui5-option>
@@ -317,7 +317,7 @@ <h3>Separator configuration</h3>
 			<ui5-switch id="editableSwitch" checked text-on="Yes" text-off="No"></ui5-switch>
 		</div>
 
-		<ui5-select id="selectWithSeparator" readonly="false" two-column-separator="VerticalLine">
+		<ui5-select id="selectWithSeparator" readonly="false" text-separator="VerticalLine">
 			<ui5-option additional-text="DZ">Algeria</ui5-option>
 			<ui5-option selected additional-text="AR">Argentina</ui5-option>
 			<ui5-option additional-text="AU">Australia</ui5-option>
@@ -478,7 +478,7 @@ <h3>Separator configuration</h3>
 
 		selectSeparators.addEventListener('ui5-change', function(e) {
 			const selectedSeparator = e.detail.selectedOption.textContent;
-			selectWithSeparator.setAttribute('two-column-separator', selectedSeparator);
+			selectWithSeparator.setAttribute('text-separator', selectedSeparator);
 		});
 
 		editableSwitch.addEventListener('ui5-change', function(e) {