feat(ui5-combobox): аdd two-column layout support (#2503)

This change adds support for two-column layout in the ComboBox web component so that the apps can display additional information for the selection options, such as currencies, country abbreviations, or system abbreviations. 

FIXES #2450

Author: ndeshev

packages/main/src/ComboBoxItem.js

@@ -19,6 +19,15 @@ const metadata = {
 		 * @public
 		 */
 		text: { type: String },
+		/**
+		 * Defines the additional text of the <code>ui5-cb-item</code>.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @since 1.0.0-rc.11
+		 * @public
+		 */
+		additionalText: { type: String },
 	},
 	slots: {
 		//

packages/main/src/ComboBoxPopover.hbs

@@ -70,6 +70,7 @@
 		{{#each _filteredItems}}
 			<ui5-li
 				type="Active"
+				info={{this.additionalText}}
 				._tabIndex={{itemTabIndex}}
 				.mappedItem={{this}}
 				?selected={{this.selected}}

packages/main/test/pages/ComboBox.html

@@ -95,6 +95,22 @@
 		<ui5-combobox id="" style="width: 360px;" value-state="Success"></ui5-combobox>
 	</div>
 
+	<div class="demo-section">
+		<ui5-label id="combo-additional-text">Items with additional text: </ui5-label>
+		<ui5-combobox id="combobox-two-column-layout" style="width: 360px;" value="Bulgaria" aria-labelledby="countryLabel">
+			<ui5-cb-item text="Algeria" additional-text="DZ"></ui5-cb-item>
+			<ui5-cb-item text="Argentina" additional-text="AR"></ui5-cb-item>
+			<ui5-cb-item text="Australia" additional-text="AU"></ui5-cb-item>
+			<ui5-cb-item text="Austria" additional-text="AT"></ui5-cb-item>
+			<ui5-cb-item text="Bahrain" additional-text="BH"></ui5-cb-item>
+			<ui5-cb-item text="Belgium" additional-text="BE"></ui5-cb-item>
+			<ui5-cb-item text="Brazil" additional-text="BR"></ui5-cb-item>
+			<ui5-cb-item text="Bulgaria" additional-text="BG"></ui5-cb-item>
+			<ui5-cb-item text="Canada" additional-text="CA"></ui5-cb-item>
+			<ui5-cb-item text="Chile" additional-text="CL"></ui5-cb-item>
+		</ui5-combobox>
+	</div>
+
 	<div class="demo-section">
 		<span id="change-event-result"></span>
 		<br />

packages/main/test/samples/ComboBox.sample.html

@@ -136,6 +136,34 @@ <h3>Filters (StartsWithPerTerm(default), StartsWith, Contains)</h3>
 
 </section>
 
+<section>
+	<h3>ComboBox with Two-Column Layout Items</h3>
+	<div class="snippet responsive-snippet">
+		<ui5-combobox placeholder="Two-column Layout">
+			<ui5-cb-item text="Austria" additional-text="AT"></ui5-cb-item>
+			<ui5-cb-item text="Belgium" additional-text="BE"></ui5-cb-item>
+			<ui5-cb-item text="Brazil" additional-text="BR"></ui5-cb-item>
+			<ui5-cb-item text="Bulgaria" additional-text="BG"></ui5-cb-item>
+			<ui5-cb-item text="Canada" additional-text="CA"></ui5-cb-item>
+		</ui5-combobox>
+	</div>
+
+<pre class="prettyprint lang-html"><xmp>
+
+<ui5-combobox placeholder="Two-column layout">
+	<ui5-cb-item text="Austria" additional-text="AT"></ui5-cb-item>
+	<ui5-cb-item text="Belgium" additional-text="BE"></ui5-cb-item>
+	<ui5-cb-item text="Brazil" additional-text="BR"></ui5-cb-item>
+	<ui5-cb-item text="Bulgaria" additional-text="BG"></ui5-cb-item>
+	<ui5-cb-item text="Canada" additional-text="CA"></ui5-cb-item>
+</ui5-combobox>
+
+</xmp></pre>
+
+
+</section>
+
+
 <section>
 	<h3>Lazy loading</h3>
 

packages/main/test/specs/ComboBox.spec.js

@@ -315,4 +315,15 @@ describe("General interaction", () => {
 
 		assert.ok(combo.getProperty("focused"), "property focused should be true");
 	});
+	
+	it ("Tests Combo with two-column layout", () => {
+		const combo = $("#combobox-two-column-layout");
+		const staticAreaItemClassName = browser.getStaticAreaItemClassName("#combobox-two-column-layout");
+		const arrow = combo.shadow$("[input-icon]");
+		const popover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");
+		const listItem = popover.$("ui5-list").$$("ui5-li")[0];
+
+		arrow.click();
+		assert.strictEqual(listItem.shadow$(".ui5-li-info").getText(), "DZ", "Additional item text should be displayed");
+	});
 });