Skip to content

Commit 861a19b

Browse files
MapTo0MapTo0
authored
feat(ui5-mcb-item): initial implementation (#1254)
BREAKING CHANGE: - ui5-multi-combobox no longer accepts ui5-li for items use ui5-multi-combobox-item instead. - change the tag name from ui5-combobox-item to ui5-cb-item
1 parent 77f7293 commit 861a19b

12 files changed

+283
-221
lines changed

‎packages/main/bundle.esm.js

+1
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import Carousel from "./dist/Carousel.js";
3030
import CheckBox from "./dist/CheckBox.js";
3131
import ComboBox from "./dist/ComboBox.js";
3232
import ComboBoxItem from "./dist/ComboBoxItem.js";
33+
import MultiComboBoxItem from "./dist/MultiComboBoxItem.js";
3334
import DatePicker from "./dist/DatePicker.js";
3435
import Dialog from "./dist/Dialog.js";
3536
import FileUploader from "./dist/FileUploader.js";

‎packages/main/src/ComboBox.js

+1
Original file line numberDiff line numberDiff line change
@@ -242,6 +242,7 @@ const metadata = {
242242
* @alias sap.ui.webcomponents.main.ComboBox
243243
* @extends UI5Element
244244
* @tagname ui5-combobox
245+
* @appenddocs ComboBoxItem
245246
* @public
246247
* @since 1.0.0-rc.6
247248
*/

‎packages/main/src/ComboBoxItem.js

+22-3
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,19 @@ import ComboBoxItemTemplate from "./generated/templates/ComboBoxItemTemplate.lit
55
// Styles
66
import ComboBoxItemCss from "./generated/themes/ComboBoxItem.css.js";
77

8-
8+
/**
9+
* @public
10+
*/
911
const metadata = {
10-
tag: "ui5-combobox-item",
11-
properties: {
12+
tag: "ui5-cb-item",
13+
properties: /** @lends sap.ui.webcomponents.main.ComboBoxItem.prototype */ {
14+
/**
15+
* Defines the text of the <code>ui5-cb-item</code>.
16+
*
17+
* @type {string}
18+
* @defaultvalue ""
19+
* @public
20+
*/
1221
text: { type: String },
1322
},
1423
slots: {
@@ -19,6 +28,16 @@ const metadata = {
1928
},
2029
};
2130

31+
/**
32+
* @class
33+
* The <code>ui5-cb-item</code> represents the item for a <code>ui5-combobox</code>.
34+
*
35+
* @constructor
36+
* @author SAP SE
37+
* @alias sap.ui.webcomponents.main.ComboBoxItem
38+
* @extends UI5Element
39+
* @public
40+
*/
2241
class ComboBoxItem extends UI5Element {
2342
static get metadata() {
2443
return metadata;

‎packages/main/src/MultiComboBox.hbs

+1-1
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
data-ui5-id="{{this._id}}"
3030
part="token-{{@index}}"
3131
>
32-
{{this.textContent}}
32+
{{this.text}}
3333
</ui5-token>
3434
{{/if}}
3535
{{/each}}

‎packages/main/src/MultiComboBox.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -275,6 +275,7 @@ const metadata = {
275275
* @extends UI5Element
276276
* @tagname ui5-multi-combobox
277277
* @public
278+
* @appenddocs MultiComboBoxItem
278279
* @since 0.11.0
279280
*/
280281
class MultiComboBox extends UI5Element {
@@ -457,7 +458,7 @@ class MultiComboBox extends UI5Element {
457458

458459
_filterItems(value) {
459460
return this.items.filter(item => {
460-
return item.textContent && item.textContent.toLowerCase().startsWith(value.toLowerCase());
461+
return item.text && item.text.toLowerCase().startsWith(value.toLowerCase());
461462
});
462463
}
463464

‎packages/main/src/MultiComboBoxItem.js

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import ComboBoxItem from "./ComboBoxItem.js";
2+
3+
/**
4+
* @public
5+
*/
6+
const metadata = {
7+
tag: "ui5-mcb-item",
8+
properties: /** @lends sap.ui.webcomponents.main.MultiComboBoxItem.prototype */ {
9+
/**
10+
* Defines the selected state of the <code>ui5-mcb-item</code>.
11+
* @type {boolean}
12+
* @defaultvalue false
13+
* @public
14+
*/
15+
selected: { type: Boolean },
16+
},
17+
};
18+
19+
/**
20+
* @class
21+
* The <code>ui5-cb-item</code> represents the item for a <code>ui5-multi-combobox</code>.
22+
*
23+
* @constructor
24+
* @author SAP SE
25+
* @alias sap.ui.webcomponents.main.MultiComboBoxItem
26+
* @extends ComboBoxItem
27+
* @public
28+
*/
29+
class MultiComboBoxItem extends ComboBoxItem {
30+
/**
31+
* @public
32+
*/
33+
static get metadata() {
34+
return metadata;
35+
}
36+
}
37+
38+
MultiComboBoxItem.define();
39+
40+
export default MultiComboBoxItem;

‎packages/main/src/MultiComboBoxPopover.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
@ui5-selectionChange={{_listSelectionChange}}>
5353
{{#each items}}
5454
{{#if this.selected}}
55-
<ui5-li type="Active" data-ui5-token-id="{{this._id}}" .selected="{{../editable}}">{{this.textContent}}</ui5-li>
55+
<ui5-li type="Active" data-ui5-token-id="{{this._id}}" .selected="{{../editable}}">{{this.text}}</ui5-li>
5656
{{/if}}
5757
{{/each}}
5858
</ui5-list>
@@ -118,7 +118,7 @@
118118

119119
<ui5-list separators="None" mode="MultiSelect" class="ui5-multi-combobox-all-items-list">
120120
{{#each _filteredItems}}
121-
<ui5-li type="Active" ?selected={{this.selected}} data-ui5-token-id="{{this._id}}">{{this.textContent}}</ui5-li>
121+
<ui5-li type="Active" ?selected={{this.selected}} data-ui5-token-id="{{this._id}}">{{this.text}}</ui5-li>
122122
{{/each}}
123123
</ui5-list>
124124

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

+39-39
Original file line numberDiff line numberDiff line change
@@ -41,31 +41,31 @@
4141

4242
<div class="demo-section">
4343
<ui5-combobox id="combo" style="width: 360px;" value="Bulgaria">
44-
<ui5-combobox-item text="Algeria"></ui5-combobox-item>
45-
<ui5-combobox-item text="Argentina"></ui5-combobox-item>
46-
<ui5-combobox-item text="Australia"></ui5-combobox-item>
47-
<ui5-combobox-item text="Austria"></ui5-combobox-item>
48-
<ui5-combobox-item text="Bahrain"></ui5-combobox-item>
49-
<ui5-combobox-item text="Belgium"></ui5-combobox-item>
50-
<ui5-combobox-item text="Very long text that makes popover wider than the ComboBox"></ui5-combobox-item>
51-
<ui5-combobox-item text="Brazil"></ui5-combobox-item>
52-
<ui5-combobox-item text="Bulgaria"></ui5-combobox-item>
53-
<ui5-combobox-item text="Canada"></ui5-combobox-item>
54-
<ui5-combobox-item text="Chile"></ui5-combobox-item>
44+
<ui5-cb-item text="Algeria"></ui5-cb-item>
45+
<ui5-cb-item text="Argentina"></ui5-cb-item>
46+
<ui5-cb-item text="Australia"></ui5-cb-item>
47+
<ui5-cb-item text="Austria"></ui5-cb-item>
48+
<ui5-cb-item text="Bahrain"></ui5-cb-item>
49+
<ui5-cb-item text="Belgium"></ui5-cb-item>
50+
<ui5-cb-item text="Very long text that makes popover wider than the ComboBox"></ui5-cb-item>
51+
<ui5-cb-item text="Brazil"></ui5-cb-item>
52+
<ui5-cb-item text="Bulgaria"></ui5-cb-item>
53+
<ui5-cb-item text="Canada"></ui5-cb-item>
54+
<ui5-cb-item text="Chile"></ui5-cb-item>
5555
</ui5-combobox>
5656

5757
<ui5-combobox id="combo2" style="width: 360px;">
58-
<ui5-combobox-item text="Algeria"></ui5-combobox-item>
59-
<ui5-combobox-item text="Argentina"></ui5-combobox-item>
60-
<ui5-combobox-item text="Australia"></ui5-combobox-item>
61-
<ui5-combobox-item text="Austria"></ui5-combobox-item>
62-
<ui5-combobox-item text="Bahrain"></ui5-combobox-item>
63-
<ui5-combobox-item text="Belgium"></ui5-combobox-item>
64-
<ui5-combobox-item text="Bosnia and Herzegovina"></ui5-combobox-item>
65-
<ui5-combobox-item text="Brazil"></ui5-combobox-item>
66-
<ui5-combobox-item text="Bulgaria"></ui5-combobox-item>
67-
<ui5-combobox-item text="Canada"></ui5-combobox-item>
68-
<ui5-combobox-item text="Chile"></ui5-combobox-item>
58+
<ui5-cb-item text="Algeria"></ui5-cb-item>
59+
<ui5-cb-item text="Argentina"></ui5-cb-item>
60+
<ui5-cb-item text="Australia"></ui5-cb-item>
61+
<ui5-cb-item text="Austria"></ui5-cb-item>
62+
<ui5-cb-item text="Bahrain"></ui5-cb-item>
63+
<ui5-cb-item text="Belgium"></ui5-cb-item>
64+
<ui5-cb-item text="Bosnia and Herzegovina"></ui5-cb-item>
65+
<ui5-cb-item text="Brazil"></ui5-cb-item>
66+
<ui5-cb-item text="Bulgaria"></ui5-cb-item>
67+
<ui5-cb-item text="Canada"></ui5-cb-item>
68+
<ui5-cb-item text="Chile"></ui5-cb-item>
6969
</ui5-combobox>
7070

7171
<ui5-combobox id="" style="width: 360px;" disabled value="disabled"></ui5-combobox>
@@ -94,10 +94,10 @@
9494
<span>Change event testing</span>
9595

9696
<ui5-combobox id="change-cb" style="width: 360px;">
97-
<ui5-combobox-item text="Argentina"></ui5-combobox-item>
98-
<ui5-combobox-item text="Bulgaria"></ui5-combobox-item>
99-
<ui5-combobox-item text="Canada"></ui5-combobox-item>
100-
<ui5-combobox-item text="Germany"></ui5-combobox-item>
97+
<ui5-cb-item text="Argentina"></ui5-cb-item>
98+
<ui5-cb-item text="Bulgaria"></ui5-cb-item>
99+
<ui5-cb-item text="Canada"></ui5-cb-item>
100+
<ui5-cb-item text="Germany"></ui5-cb-item>
101101
</ui5-combobox>
102102

103103
<br>
@@ -114,32 +114,32 @@
114114
<span>Contains filter</span>
115115

116116
<ui5-combobox style="width: 360px;" filter="Contains" id="contains-cb">
117-
<ui5-combobox-item text="Argentina"></ui5-combobox-item>
118-
<ui5-combobox-item text="Bulgaria"></ui5-combobox-item>
119-
<ui5-combobox-item text="Canada"></ui5-combobox-item>
120-
<ui5-combobox-item text="Germany"></ui5-combobox-item>
117+
<ui5-cb-item text="Argentina"></ui5-cb-item>
118+
<ui5-cb-item text="Bulgaria"></ui5-cb-item>
119+
<ui5-cb-item text="Canada"></ui5-cb-item>
120+
<ui5-cb-item text="Germany"></ui5-cb-item>
121121
</ui5-combobox>
122122
</div>
123123

124124
<div class="demo-section">
125125
<span>StartsWith filter</span>
126126

127127
<ui5-combobox style="width: 360px;" filter="StartsWith" id="startswith-cb">
128-
<ui5-combobox-item text="Argentina"></ui5-combobox-item>
129-
<ui5-combobox-item text="United States of America"></ui5-combobox-item>
130-
<ui5-combobox-item text="Canada"></ui5-combobox-item>
131-
<ui5-combobox-item text="Germany"></ui5-combobox-item>
128+
<ui5-cb-item text="Argentina"></ui5-cb-item>
129+
<ui5-cb-item text="United States of America"></ui5-cb-item>
130+
<ui5-cb-item text="Canada"></ui5-cb-item>
131+
<ui5-cb-item text="Germany"></ui5-cb-item>
132132
</ui5-combobox>
133133
</div>
134134

135135
<section class="ui5-content-density-compact">
136136
<h3>ComboBox in Compact</h3>
137137
<div>
138138
<ui5-combobox>
139-
<ui5-combobox-item text="Argentina"></ui5-combobox-item>
140-
<ui5-combobox-item text="United States of America"></ui5-combobox-item>
141-
<ui5-combobox-item text="Canada"></ui5-combobox-item>
142-
<ui5-combobox-item text="Germany"></ui5-combobox-item>
139+
<ui5-cb-item text="Argentina"></ui5-cb-item>
140+
<ui5-cb-item text="United States of America"></ui5-cb-item>
141+
<ui5-cb-item text="Canada"></ui5-cb-item>
142+
<ui5-cb-item text="Germany"></ui5-cb-item>
143143
</ui5-combobox>
144144
</div>
145145
</section>
@@ -165,7 +165,7 @@ <h3>ComboBox in Compact</h3>
165165

166166
// fill new items
167167
items.map(data => {
168-
const element = document.createElement("ui5-combobox-item");
168+
const element = document.createElement("ui5-cb-item");
169169
element.setAttribute("text", data.name);
170170

171171
document.getElementById("lazy").appendChild(element);

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

+5-5
Original file line numberDiff line numberDiff line change
@@ -46,11 +46,11 @@ <h2>The way the components will be rendered out of the box</h2>
4646
</ui5-multi-combobox>
4747

4848
<ui5-combobox placeholder="I am combobox">
49-
<ui5-combobox-item text="Active"></ui5-combobox-item>
50-
<ui5-combobox-item text="Active"></ui5-combobox-item>
51-
<ui5-combobox-item text="Active"></ui5-combobox-item>
52-
<ui5-combobox-item text="Long sentence Long sentence Long sentence"></ui5-combobox-item>
53-
<ui5-combobox-item text="Some word"></ui5-combobox-item>
49+
<ui5-cb-item text="Active"></ui5-cb-item>
50+
<ui5-cb-item text="Active"></ui5-cb-item>
51+
<ui5-cb-item text="Active"></ui5-cb-item>
52+
<ui5-cb-item text="Long sentence Long sentence Long sentence"></ui5-cb-item>
53+
<ui5-cb-item text="Some word"></ui5-cb-item>
5454
</ui5-combobox>
5555
<hr>
5656
<h2>Explicitly width:auto set</h2>

0 commit comments

Comments
 (0)