Skip to content

Commit 39ccf7b

Browse files
ilhan007ilhan007
authored
feat(ui5-input): introduce new SuggestionGroupItem (#3248)
Introduce a dedicated component SuggestionGroupItem to split the suggestions into groups. Previously the app developers had to use the standard SuggestionItem and set its "group" property. But, as the group item do not have most of the interactive features, we decided to introduce dedicated component for the purpose. Related to: #3107 BREAKING_CHANGE: The "group" property of the SuggestionItem is removed, use the SuggestionGroupItem component to create grouping as follows: ```html <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-input> ```
1 parent 5898eb8 commit 39ccf7b

File tree

6 files changed

+112
-36
lines changed

6 files changed

+112
-36
lines changed

‎packages/main/src/Input.js

+24-7
Original file line numberDiff line numberDiff line change
@@ -64,17 +64,34 @@ const metadata = {
6464
},
6565

6666
/**
67-
* Defines the component suggestion items.
67+
* Defines the suggestion items.
68+
* <br><br>
69+
* Example:
70+
* <br><br>
71+
* &lt;ui5-input show-suggestions><br>
72+
* &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-suggestion-item text="Item #1">&lt;/ui5-suggestion-item><br>
73+
* &nbsp;&nbsp;&nbsp;&nbsp;&lt;ui5-suggestion-item text="Item #2">&lt;/ui5-suggestion-item><br>
74+
* &lt;/ui5-input>
75+
* <br>
76+
* <ui5-input show-suggestions>
77+
* <ui5-suggestion-group-item text="Group #1"></ui5-suggestion-group-item>
78+
* <ui5-suggestion-item text="Item #1"></ui5-suggestion-item>
79+
* <ui5-suggestion-item text="Item #2"></ui5-suggestion-item>
80+
* <ui5-suggestion-group-item text="Group #2"></ui5-suggestion-group-item>
81+
* <ui5-suggestion-item text="Item #3"></ui5-suggestion-item>
82+
* <ui5-suggestion-item text="Item #4"></ui5-suggestion-item>
83+
* </ui5-input>
6884
* <br><br>
6985
* <b>Note:</b> The suggestion would be displayed only if the <code>showSuggestions</code>
7086
* property is set to <code>true</code>.
7187
* <br><br>
72-
* <b>Note:</b> The &lt;ui5-suggestion-item> is recommended to be used as a suggestion item.
73-
* Importing the Input Suggestions Support feature:
88+
* <b>Note:</b> The &lt;ui5-suggestion-item> and &lt;ui5-suggestion-group-item> are recommended to be used as suggestion items.
89+
* <br><br>
90+
* <b>Note:</b> Importing the Input Suggestions Support feature:
7491
* <br>
7592
* <code>import "@ui5/webcomponents/dist/features/InputSuggestions.js";</code>
7693
* <br>
77-
* also automatically imports the &lt;ui5-suggestion-item> for your convenience.
94+
* automatically imports the &lt;ui5-suggestion-item> and &lt;ui5-suggestion-group-item> for your convenience.
7895
*
7996
* @type {sap.ui.webcomponents.main.IInputSuggestionItem[]}
8097
* @slot suggestionItems
@@ -261,8 +278,8 @@ const metadata = {
261278
/**
262279
* Defines whether the component should show suggestions, if such are present.
263280
* <br><br>
264-
* <b>Note:</b>
265-
* Don`t forget to import the <code>InputSuggestions</code> module from <code>"@ui5/webcomponents/dist/features/InputSuggestions.js"</code> to enable this functionality.
281+
* <b>Note:</b> You need to import the <code>InputSuggestions</code> module
282+
* from <code>"@ui5/webcomponents/dist/features/InputSuggestions.js"</code> to enable this functionality.
266283
* @type {boolean}
267284
* @defaultvalue false
268285
* @public
@@ -441,7 +458,7 @@ const metadata = {
441458
* @alias sap.ui.webcomponents.main.Input
442459
* @extends sap.ui.webcomponents.base.UI5Element
443460
* @tagname ui5-input
444-
* @appenddocs SuggestionItem
461+
* @appenddocs SuggestionItem SuggestionGroupItem
445462
* @implements sap.ui.webcomponents.main.IInput
446463
* @public
447464
*/

‎packages/main/src/InputPopover.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -92,7 +92,7 @@
9292
{{#*inline "suggestionsList"}}
9393
<ui5-list separators="{{suggestionSeparators}}">
9494
{{#each suggestionsTexts}}
95-
{{#if group}}
95+
{{#if groupItem}}
9696
<ui5-li-groupheader data-ui5-key="{{key}}">{{{ this.text }}}</ui5-li-groupheader>
9797
{{else}}
9898
<ui5-li-suggestion-item

‎packages/main/src/SuggestionGroupItem.js

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
2+
import GroupHeaderListItem from "./GroupHeaderListItem.js";
3+
4+
/**
5+
* @public
6+
*/
7+
const metadata = {
8+
tag: "ui5-suggestion-group-item",
9+
properties: /** @lends sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
10+
/**
11+
* Defines the text of the <code>ui5-suggestion-group-item</code>.
12+
*
13+
* @type {string}
14+
* @defaultvalue ""
15+
* @public
16+
*/
17+
text: {
18+
type: String,
19+
},
20+
},
21+
slots: /** @lends sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
22+
},
23+
events: /** @lends sap.ui.webcomponents.main.SuggestionGroupItem.prototype */ {
24+
},
25+
};
26+
27+
/**
28+
* @class
29+
* The <code>ui5-suggestion-group-item</code> is type of suggestion item,
30+
* that can be used to split the <code>ui5-input</code> suggestions into groups.
31+
*
32+
* @constructor
33+
* @author SAP SE
34+
* @alias sap.ui.webcomponents.main.SuggestionGroupItem
35+
* @extends UI5Element
36+
* @tagname ui5-suggestion-group-item
37+
* @implements sap.ui.webcomponents.main.IInputSuggestionItem
38+
* @public
39+
* @since 1.0.0-rc.15
40+
*/
41+
class SuggestionItem extends UI5Element {
42+
static get metadata() {
43+
return metadata;
44+
}
45+
46+
static get dependencies() {
47+
return [
48+
GroupHeaderListItem,
49+
];
50+
}
51+
52+
/**
53+
* Indicates the "grouping" nature of the component
54+
* to avoid tag name checks tag name to diferenciate from the standard suggestion item.
55+
* @protected
56+
*/
57+
get groupItem() {
58+
return true;
59+
}
60+
}
61+
62+
SuggestionItem.define();
63+
64+
export default SuggestionItem;

‎packages/main/src/SuggestionItem.js

-16
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
22

33
import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
44
import SuggestionListItem from "./SuggestionListItem.js";
5-
import GroupHeaderListItem from "./GroupHeaderListItem.js";
65
import ListItemType from "./types/ListItemType.js";
76

87
/**
@@ -111,20 +110,6 @@ const metadata = {
111110
type: ValueState,
112111
defaultValue: ValueState.None,
113112
},
114-
115-
/**
116-
* Defines the item to be displayed as a group item.
117-
* <br><br>
118-
* <b>Note:</b>
119-
* When set, the other properties, such as <code>image</code>, <code>icon</code>, <code>description</code>, etc. will be omitted
120-
* and only the <code>text</code> will be displayed.
121-
* @type {boolean}
122-
* @defaultvalue false
123-
* @public
124-
*/
125-
group: {
126-
type: Boolean,
127-
},
128113
},
129114
slots: /** @lends sap.ui.webcomponents.main.SuggestionItem.prototype */ {
130115
},
@@ -152,7 +137,6 @@ class SuggestionItem extends UI5Element {
152137
static get dependencies() {
153138
return [
154139
SuggestionListItem,
155-
GroupHeaderListItem,
156140
];
157141
}
158142
}

‎packages/main/src/features/InputSuggestions.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
44
import List from "../List.js";
55
import ResponsivePopover from "../ResponsivePopover.js";
66
import SuggestionItem from "../SuggestionItem.js";
7+
import SuggestionGroupItem from "../SuggestionGroupItem.js";
78
import Button from "../Button.js";
89
import GroupHeaderListItem from "../GroupHeaderListItem.js";
910
import SuggestionListItem from "../SuggestionListItem.js";
@@ -66,7 +67,7 @@ class Suggestions {
6667
type: suggestion.type || undefined,
6768
additionalText: suggestion.additionalText || undefined,
6869
additionalTextState: suggestion.additionalTextState,
69-
group: suggestion.group,
70+
groupItem: suggestion.groupItem,
7071
key: idx,
7172
});
7273
});
@@ -416,6 +417,7 @@ class Suggestions {
416417
static get dependencies() {
417418
return [
418419
SuggestionItem,
420+
SuggestionGroupItem,
419421
ResponsivePopover,
420422
List,
421423
SuggestionListItem,

‎packages/main/test/pages/Input.html

+20-11
Original file line numberDiff line numberDiff line change
@@ -53,11 +53,11 @@ <h3>Input suggestions with ui5-li</h3>
5353
<br/>
5454
<h3>Input suggestions with grouping</h3>
5555
<ui5-input id="myInputGrouping" show-suggestions style="width: 100%">
56-
<ui5-suggestion-item group text="Content Density"></ui5-suggestion-item>
56+
<ui5-suggestion-group-item text="Content Density"></ui5-suggestion-group-item>
5757
<ui5-suggestion-item text="Compact"></ui5-suggestion-item>
5858
<ui5-suggestion-item text="Condensed"></ui5-suggestion-item>
5959
<ui5-suggestion-item text="Cozy"></ui5-suggestion-item>
60-
<ui5-suggestion-item group text="Themes"></ui5-suggestion-item>
60+
<ui5-suggestion-group-item text="Themes"></ui5-suggestion-group-item>
6161
<ui5-suggestion-item type="Inactive" text="Inactive Quartz"></ui5-suggestion-item>
6262
<ui5-suggestion-item type="Inactive" text="Inactive HCB"></ui5-suggestion-item>
6363
</ui5-input>
@@ -390,15 +390,24 @@ <h3>Test Backspace</h3>
390390
}
391391

392392
suggestionItems.forEach(function(item, idx) {
393-
var suggestion = document.createElement("ui5-suggestion-item");
394-
suggestion.id = item.key;
395-
suggestion.icon = "world";
396-
suggestion.additionalText = "explore";
397-
suggestion.group = item.text.length === 1;
398-
suggestion.additionalTextState = "Success";
399-
suggestion.description = "travel the world";
400-
suggestion.text = item.text
401-
input.appendChild(suggestion);
393+
let suggestion;
394+
const groupItem = item.text.length === 1;
395+
396+
if (groupItem) {
397+
suggestion = document.createElement("ui5-suggestion-group-item");
398+
suggestion.id = item.key;
399+
suggestion.text = item.text;
400+
input.appendChild(suggestion);
401+
} else {
402+
suggestion = document.createElement("ui5-suggestion-item");
403+
suggestion.id = item.key;
404+
suggestion.icon = "world";
405+
suggestion.description = "travel the world";
406+
suggestion.text = item.text
407+
suggestion.additionalText = "explore";
408+
suggestion.additionalTextState = "Success";
409+
input.appendChild(suggestion);
410+
}
402411
});
403412

404413
labelLiveChange.innerHTML = "Event [input] :: " + value;

0 commit comments

Comments
 (0)