feat(ui5-input): introduce new SuggestionGroupItem

packages/main/src/Input.js

@@ -64,17 +64,34 @@ const metadata = {
 		},
 
 		/**
-		 * Defines the component suggestion items.
+		 * Defines the suggestion items.
+		 * <br><br>
+		 * Example:
+		 * <br><br>
+		 * &lt;ui5-input show-suggestions><br>
+		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-suggestion-item text="Item #1">&lt;/ui5-suggestion-item><br>
+		 * &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-suggestion-item text="Item #2">&lt;/ui5-suggestion-item><br>
+		 * &lt;/ui5-input>
+		 * <br>
+		 * <ui5-input show-suggestions>
+		 * <ui5-suggestion-group-item text="Group #1"></ui5-suggestion-group-item>
+		 * <ui5-suggestion-item text="Item #1"></ui5-suggestion-item>
+		 * <ui5-suggestion-item text="Item #2"></ui5-suggestion-item>
+		 * <ui5-suggestion-group-item text="Group #2"></ui5-suggestion-group-item>
+		 * <ui5-suggestion-item text="Item #3"></ui5-suggestion-item>
+		 * <ui5-suggestion-item text="Item #4"></ui5-suggestion-item>
+		 * </ui5-input>
 		 * <br><br>
 		 * <b>Note:</b> The suggestion would be displayed only if the <code>showSuggestions</code>
 		 * property is set to <code>true</code>.
 		 * <br><br>
-		 * <b>Note:</b> The &lt;ui5-suggestion-item> is recommended to be used as a suggestion item.
-		 * Importing the Input Suggestions Support feature:
+		 * <b>Note:</b> The &lt;ui5-suggestion-item> and &lt;ui5-suggestion-group-item> are recommended to be used as suggestion items.
+		 * <br><br>
+		 * <b>Note:</b> Importing the Input Suggestions Support feature:
 		 * <br>
 		 * <code>import "@ui5/webcomponents/dist/features/InputSuggestions.js";</code>
 		 * <br>
-		 * also automatically imports the &lt;ui5-suggestion-item> for your convenience.
+		 * automatically imports the &lt;ui5-suggestion-item> and &lt;ui5-suggestion-group-item> for your convenience.
 		 *
 		 * @type {sap.ui.webcomponents.main.IInputSuggestionItem[]}
 		 * @slot suggestionItems
@@ -261,8 +278,8 @@ const metadata = {
 		/**
 		 * Defines whether the component should show suggestions, if such are present.
 		 * <br><br>
-		 * <b>Note:</b>
-		 * Don`t forget to import the <code>InputSuggestions</code> module from <code>"@ui5/webcomponents/dist/features/InputSuggestions.js"</code> to enable this functionality.
+		 * <b>Note:</b> You need to import the <code>InputSuggestions</code> module
+		 * from <code>"@ui5/webcomponents/dist/features/InputSuggestions.js"</code> to enable this functionality.
 		 * @type {boolean}
 		 * @defaultvalue false
 		 * @public
@@ -441,7 +458,7 @@ const metadata = {
  * @alias sap.ui.webcomponents.main.Input
  * @extends sap.ui.webcomponents.base.UI5Element
  * @tagname ui5-input
- * @appenddocs SuggestionItem
+ * @appenddocs SuggestionItem SuggestionGroupItem
  * @implements sap.ui.webcomponents.main.IInput
  * @public
  */

packages/main/src/InputPopover.hbs

@@ -92,7 +92,7 @@
 {{#*inline "suggestionsList"}}
 	<ui5-list separators="{{suggestionSeparators}}">
 		{{#each suggestionsTexts}}
-			{{#if group}}
+			{{#if groupItem}}
 				<ui5-li-groupheader data-ui5-key="{{key}}">{{{ this.text }}}</ui5-li-groupheader>
 			{{else}}
 				<ui5-li-suggestion-item

packages/main/src/SuggestionGroupItem.js

@@ -0,0 +1,64 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import GroupHeaderListItem from "./GroupHeaderListItem.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-suggestion-group-item",
+	properties: /** @lends  sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
+		/**
+		 * Defines the text of the <code>ui5-suggestion-group-item</code>.
+		 *
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		text: {
+			type: String,
+		},
+	},
+	slots: /** @lends  sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
+	},
+	events: /** @lends  sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
+	},
+};
+
+/**
+ * @class
+ * The <code>ui5-suggestion-group-item</code> is type of suggestion item,
+ * that can be used to split the <code>ui5-input</code> suggestions into groups.
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.SuggestionGroupItem
+ * @extends UI5Element
+ * @tagname ui5-suggestion-group-item
+ * @implements sap.ui.webcomponents.main.IInputSuggestionItem
+ * @public
+ * @since 1.0.0-rc.15
+ */
+class SuggestionItem extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get dependencies() {
+		return [
+			GroupHeaderListItem,
+		];
+	}
+
+	/**
+	 * Indicates the "grouping" nature of the component
+	 * to avoid tag name checks tag name to diferenciate from the standard suggestion item.
+	 * @protected
+	 */
+	get groupItem() {
+		return true;
+	}
+}
+
+SuggestionItem.define();
+
+export default SuggestionItem;

packages/main/src/SuggestionItem.js

@@ -2,7 +2,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import SuggestionListItem from "./SuggestionListItem.js";
-import GroupHeaderListItem from "./GroupHeaderListItem.js";
 import ListItemType from "./types/ListItemType.js";
 
 /**
@@ -111,20 +110,6 @@ const metadata = {
 			type: ValueState,
 			defaultValue: ValueState.None,
 		},
-
-		/**
-		 * Defines the item to be displayed as a group item.
-		 * <br><br>
-		 * <b>Note:</b>
-		 * When set, the other properties, such as <code>image</code>, <code>icon</code>, <code>description</code>, etc. will be omitted
-		 * and only the <code>text</code> will be displayed.
-		 * @type {boolean}
-         * @defaultvalue false
-		 * @public
-		 */
-		group: {
-			type: Boolean,
-		},
 	},
 	slots: /** @lends  sap.ui.webcomponents.main.SuggestionItem.prototype */ {
 	},
@@ -152,7 +137,6 @@ class SuggestionItem extends UI5Element {
 	static get dependencies() {
 		return [
 			SuggestionListItem,
-			GroupHeaderListItem,
 		];
 	}
 }

packages/main/src/features/InputSuggestions.js

@@ -4,6 +4,7 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import List from "../List.js";
 import ResponsivePopover from "../ResponsivePopover.js";
 import SuggestionItem from "../SuggestionItem.js";
+import SuggestionGroupItem from "../SuggestionGroupItem.js";
 import Button from "../Button.js";
 import GroupHeaderListItem from "../GroupHeaderListItem.js";
 import SuggestionListItem from "../SuggestionListItem.js";
@@ -66,7 +67,7 @@ class Suggestions {
 				type: suggestion.type || undefined,
 				additionalText: suggestion.additionalText || undefined,
 				additionalTextState: suggestion.additionalTextState,
-				group: suggestion.group,
+				groupItem: suggestion.groupItem,
 				key: idx,
 			});
 		});
@@ -416,6 +417,7 @@ class Suggestions {
 	static get dependencies() {
 		return [
 			SuggestionItem,
+			SuggestionGroupItem,
 			ResponsivePopover,
 			List,
 			SuggestionListItem,

packages/main/test/pages/Input.html

@@ -53,11 +53,11 @@ <h3>Input suggestions with ui5-li</h3>
 	<br/>
 	<h3>Input suggestions with grouping</h3>
 	<ui5-input id="myInputGrouping" show-suggestions style="width: 100%">
-		<ui5-suggestion-item group text="Content Density"></ui5-suggestion-item>
+		<ui5-suggestion-group-item text="Content Density"></ui5-suggestion-group-item>
 		<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
 		<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
 		<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
-		<ui5-suggestion-item group text="Themes"></ui5-suggestion-item>
+		<ui5-suggestion-group-item text="Themes"></ui5-suggestion-group-item>
 		<ui5-suggestion-item type="Inactive" text="Inactive Quartz"></ui5-suggestion-item>
 		<ui5-suggestion-item type="Inactive" text="Inactive HCB"></ui5-suggestion-item>
 	</ui5-input>
@@ -390,15 +390,24 @@ <h3>Test Backspace</h3>
 			}
 
 			suggestionItems.forEach(function(item, idx) {
-				var suggestion = document.createElement("ui5-suggestion-item");
-				suggestion.id = item.key;
-				suggestion.icon = "world";
-				suggestion.additionalText = "explore";
-				suggestion.group = item.text.length === 1;
-				suggestion.additionalTextState = "Success";
-				suggestion.description = "travel the world";
-				suggestion.text = item.text
-				input.appendChild(suggestion);
+				let suggestion;
+				const groupItem = item.text.length === 1;
+
+				if (groupItem) {
+					suggestion = document.createElement("ui5-suggestion-group-item");
+					suggestion.id = item.key;
+					suggestion.text = item.text;
+					input.appendChild(suggestion);
+				} else {
+					suggestion = document.createElement("ui5-suggestion-item");
+					suggestion.id = item.key;
+					suggestion.icon = "world";
+					suggestion.description = "travel the world";
+					suggestion.text = item.text
+					suggestion.additionalText = "explore";
+					suggestion.additionalTextState = "Success";
+					input.appendChild(suggestion);
+				}
 			});
 
 			labelLiveChange.innerHTML = "Event [input] :: " + value;