feat(ui5-multi-combobox): support two column layout for items (#2642)

Enables two-column layout items in the MultiComboBox. The MultiComboBoxItem already inherits the additionalText property from the ComboBoxItem, but never used it. The property is visible in the API reference and misleading users that can have two-column layout in the MultiComboBox as well. The change just uses the property in the template and forwards it to the physically rendered list item.

FIXES: #2637

Author: ilhan007

packages/main/src/MultiComboBoxPopover.hbs

@@ -69,6 +69,7 @@
 		{{#each _filteredItems}}
 				<ui5-li
 					type="{{../_listItemsType}}"
+					info={{this.additionalText}}
 					?selected={{this.selected}}
 					data-ui5-token-id="{{this._id}}"
 					data-ui5-stable="{{this.stableDomRef}}"

packages/main/test/pages/MultiComboBox.html

@@ -279,6 +279,22 @@ <h3>MultiComboBox in Compact</h3>
 		</div>
 	</section>
 
+	<div class="demo-section">
+		<ui5-label>Two-column items </ui5-label>
+		<br/>
+		<ui5-multi-combobox id="mcb-two-column-layout" style="width: 360px;">
+			<ui5-mcb-item text="Algeria" additional-text="DZ"></ui5-mcb-item>
+			<ui5-mcb-item text="Argentina" additional-text="AR"></ui5-mcb-item>
+			<ui5-mcb-item text="Australia" additional-text="AU"></ui5-mcb-item>
+			<ui5-mcb-item text="Austria" additional-text="AT"></ui5-mcb-item>
+			<ui5-mcb-item text="Bahrain" additional-text="BH"></ui5-mcb-item>
+			<ui5-mcb-item text="Belgium" additional-text="BE"></ui5-mcb-item>
+			<ui5-mcb-item text="Brazil" additional-text="BR"></ui5-mcb-item>
+			<ui5-mcb-item text="Bulgaria" additional-text="BG"></ui5-mcb-item>
+			<ui5-mcb-item text="Canada" additional-text="CA"></ui5-mcb-item>
+			<ui5-mcb-item text="Chile" additional-text="CL"></ui5-mcb-item>
+		</ui5-multi-combobox>
+
 	<script>
 		var eventNameInput = document.getElementById("events-input");
 		var eventParamsInput = document.getElementById("events-parameters");

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

@@ -221,4 +221,20 @@ describe("MultiComboBox general interaction", () => {
 			assert.strictEqual(tokens.length, 2, "2 tokens are visible");
 		});
 	});
+
+	describe("keyboard handling", () => {
+		browser.url("http://localhost:8080/test-resources/pages/MultiComboBox.html");
+
+		it ("tests two-column layout", () => {
+			const mcb = $("#mcb-two-column-layout");
+			const staticAreaItemClassName = browser.getStaticAreaItemClassName("#mcb-two-column-layout");
+			const icon = mcb.shadow$("[input-icon]");
+			const popover = browser.$(`.${staticAreaItemClassName}`).shadow$(".ui5-multi-combobox-all-items-responsive-popover");
+			const listItem = popover.$("ui5-list").$$("ui5-li")[0];
+
+			icon.click();
+			assert.strictEqual(listItem.shadow$(".ui5-li-info").getText(), "DZ", "Additional item text should be displayed");
+			icon.click();
+		});
+	});
 });