From e8569df8cf1b60ef0725c4afaa7bbe6d9686faf6 Mon Sep 17 00:00:00 2001 From: Martin Hristov Date: Thu, 27 Feb 2020 11:23:42 +0200 Subject: [PATCH 1/4] feat(ui5-multi-combobox-item): initial implementation BREAKING CHANGE: ui5-multi-combobox no longer accepts ui5-li for items use ui5-multi-combobox-item instead. --- packages/main/bundle.esm.js | 1 + packages/main/src/MultiComboBox.hbs | 2 +- packages/main/src/MultiComboBox.js | 2 +- packages/main/src/MultiComboBoxItem.js | 16 +++ packages/main/src/MultiComboBoxPopover.hbs | 4 +- packages/main/test/pages/MultiComboBox.html | 108 ++++++++++---------- 6 files changed, 75 insertions(+), 58 deletions(-) create mode 100644 packages/main/src/MultiComboBoxItem.js diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js index 89b76caf79ed..601573e85a7f 100644 --- a/packages/main/bundle.esm.js +++ b/packages/main/bundle.esm.js @@ -30,6 +30,7 @@ import Carousel from "./dist/Carousel.js"; import CheckBox from "./dist/CheckBox.js"; import ComboBox from "./dist/ComboBox.js"; import ComboBoxItem from "./dist/ComboBoxItem.js"; +import MultiComboBoxItem from "./dist/MultiComboBoxItem.js"; import DatePicker from "./dist/DatePicker.js"; import Dialog from "./dist/Dialog.js"; import FileUploader from "./dist/FileUploader.js"; diff --git a/packages/main/src/MultiComboBox.hbs b/packages/main/src/MultiComboBox.hbs index cb0ded292bb1..85a585ffce7e 100644 --- a/packages/main/src/MultiComboBox.hbs +++ b/packages/main/src/MultiComboBox.hbs @@ -29,7 +29,7 @@ data-ui5-id="{{this._id}}" part="token-{{@index}}" > - {{this.textContent}} + {{this.text}} {{/if}} {{/each}} diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js index 56449db15117..e9aa4d6f2318 100644 --- a/packages/main/src/MultiComboBox.js +++ b/packages/main/src/MultiComboBox.js @@ -459,7 +459,7 @@ class MultiComboBox extends UI5Element { _filterItems(value) { return this.items.filter(item => { - return item.textContent && item.textContent.toLowerCase().startsWith(value.toLowerCase()); + return item.text && item.text.toLowerCase().startsWith(value.toLowerCase()); }); } diff --git a/packages/main/src/MultiComboBoxItem.js b/packages/main/src/MultiComboBoxItem.js new file mode 100644 index 000000000000..f2307a1d9b0d --- /dev/null +++ b/packages/main/src/MultiComboBoxItem.js @@ -0,0 +1,16 @@ +import ComboBoxItem from "./ComboBoxItem.js"; + +class MultiComboBoxItem extends ComboBoxItem { + static get metadata() { + return { + tag: "ui5-multi-combobox-item", + properties: { + selected: { type: Boolean }, + }, + }; + } +} + +MultiComboBoxItem.define(); + +export default MultiComboBoxItem; diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs index f589fb287441..52bd727a90a5 100644 --- a/packages/main/src/MultiComboBoxPopover.hbs +++ b/packages/main/src/MultiComboBoxPopover.hbs @@ -52,7 +52,7 @@ @ui5-selectionChange={{_listSelectionChange}}> {{#each items}} {{#if this.selected}} - {{this.textContent}} + {{this.text}} {{/if}} {{/each}} @@ -118,7 +118,7 @@ {{#each _filteredItems}} - {{this.textContent}} + {{this.text}} {{/each}} diff --git a/packages/main/test/pages/MultiComboBox.html b/packages/main/test/pages/MultiComboBox.html index d372bc019f89..fc7f71d543cf 100644 --- a/packages/main/test/pages/MultiComboBox.html +++ b/packages/main/test/pages/MultiComboBox.html @@ -84,10 +84,10 @@
- Cosy - Compact - Condensed - Longest word in the world + + + + @@ -96,10 +96,10 @@
- Cosy - Compact - Condensed - Longest word in the world + + + + @@ -108,10 +108,10 @@
- Cosy - Compact - Condensed - Longest word in the world + + + + @@ -120,10 +120,10 @@
- Cosy - Compact - Condensed - Longest word in the world + + + + @@ -133,10 +133,10 @@
- Cosy - Compact - Condensed - Longest word in the world + + + + @@ -146,10 +146,10 @@
- Cosy - Compact - Condensed - Longest word in the world + + + + @@ -159,10 +159,10 @@
- Cosy - Compact - Condensed - Longest word in the world + + + + @@ -171,10 +171,10 @@
- Cosy - Compact - Condensed - Longest word in the world + + + + @@ -183,12 +183,12 @@
- Cosy - Compact - Condensed - Longest word in the world - Longest word in the world 1 - Longest word in the world 2 + + + + + + @@ -197,10 +197,10 @@
- Cosy - Compact - Condensed - Longest word in the world + + + + @@ -208,10 +208,10 @@ MultiComboBox n more
- Cosy - Compact - Condensed - Longest word in the world + + + + @@ -220,10 +220,10 @@
- Cosy - Compact - Condensed - Longest word in the world + + + + @@ -257,10 +257,10 @@

MultiComboBox in Compact

- Cosy - Compact - Condensed - Longest word in the world + + + +
From 28fd7a6f4a98ea51cc4e8b0ee113d554078bb476 Mon Sep 17 00:00:00 2001 From: Martin Hristov Date: Thu, 27 Feb 2020 11:58:15 +0200 Subject: [PATCH 2/4] adjust sample page --- .../test/samples/MultiComboBox.sample.html | 128 +++++++++--------- 1 file changed, 64 insertions(+), 64 deletions(-) diff --git a/packages/main/test/samples/MultiComboBox.sample.html b/packages/main/test/samples/MultiComboBox.sample.html index 4716d4e8574c..f5e09ad70dff 100644 --- a/packages/main/test/samples/MultiComboBox.sample.html +++ b/packages/main/test/samples/MultiComboBox.sample.html @@ -25,26 +25,26 @@

MultiComboBox

Basic MultiComboBox

- UI5 + - UI5 + - UI5 + 

 <ui5-multi-combobox placeholder="Type your value">
-	<ui5-li selected>UI5</ui5-li>
+	<ui5-multi-combobox-item selected text="UI5"></ui5-multi-combobox-item>
 </ui5-multi-combobox>
 
 <ui5-multi-combobox readonly value="Readonly combo">
-	<ui5-li selected>UI5</ui5-li>
+	<ui5-multi-combobox-item selected text="UI5"></ui5-multi-combobox-item>
 </ui5-multi-combobox>
 
 <ui5-multi-combobox disabled value="Disabled combo">
-	<ui5-li selected>UI5</ui5-li>
+	<ui5-multi-combobox-item selected text="UI5"></ui5-multi-combobox-item>
 </ui5-multi-combobox>
@@ -53,30 +53,30 @@

Basic MultiComboBox

MultiComboBox with items

- Argentina - Bulgaria - Denmark - England - Albania - Morocco - Portugal - Germany - Philippines - Paraguay + + + + + + + + + + 

 <ui5-multi-combobox placeholder="Choose your countries">
-	<ui5-li selected>Argentina</ui5-li>
-	<ui5-li>Bulgaria</ui5-li>
-	<ui5-li>Denmark</ui5-li>
-	<ui5-li>England</ui5-li>
-	<ui5-li>Albania</ui5-li>
-	<ui5-li>Morocco</ui5-li>
-	<ui5-li>Portugal</ui5-li>
-	<ui5-li>Germany</ui5-li>
-	<ui5-li>Philippines</ui5-li>
-	<ui5-li>Paraguay</ui5-li>
+	<ui5-multi-combobox-item selected text="Argentina"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item text="Bulgaria"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item text="Denmark"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item text="England"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item text="Albania"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item text="Morocco"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item text="Portugal"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item text="Germany"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item text="Philippines"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item text="Paraguay"></ui5-multi-combobox-item>
 </ui5-multi-combobox>
@@ -85,30 +85,30 @@

MultiComboBox with items

MultiComboBox with free text input

- Argentina - Bulgaria - Denmark - England - Albania - Morocco - Portugal - Germany - Philippines - Paraguay + + + + + + + + + + 

 <ui5-multi-combobox placeholder="Choose your countries">
-	<ui5-li>Argentina</ui5-li>
-	<ui5-li selected>Bulgaria</ui5-li>
-	<ui5-li>Denmark</ui5-li>
-	<ui5-li selected>England</ui5-li>
-	<ui5-li>Albania</ui5-li>
-	<ui5-li>Morocco</ui5-li>
-	<ui5-li>Portugal</ui5-li>
-	<ui5-li selected>Germany</ui5-li>
-	<ui5-li>Philippines</ui5-li>
-	<ui5-li>Paraguay</ui5-li>
+	<ui5-multi-combobox-item text="Argentina"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item selected text="Bulgaria"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item text="Denmark"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item selected text="England"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item text="Albania"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item text="Morocco"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item text="Portugal"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item selected text="Germany"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item text="Philippines"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item text="Paraguay"></ui5-multi-combobox-item>
 </ui5-multi-combobox>
@@ -117,40 +117,40 @@

MultiComboBox with free text input

MultiComboBox with Value State

- Fortune - Luck - Success + + + - Attention - Caution - Warning + + + - Fault - Error - Mistake + + + 

 <ui5-multi-combobox value-state="Success">
-	<ui5-li>Fortune</ui5-li>
-	<ui5-li>Luck</ui5-li>
-	<ui5-li selected>Success</ui5-li>
+	<ui5-multi-combobox-item text="Fortune"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item text="Luck"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item selected text="Success"></ui5-multi-combobox-item>
 </ui5-multi-combobox>
 
 <ui5-multi-combobox value-state="Warning">
-	<ui5-li>Attention</ui5-li>
-	<ui5-li>Caution</ui5-li>
-	<ui5-li selected>Warning</ui5-li>
+	<ui5-multi-combobox-item text="Attention"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item text="Caution"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item selected text="Warning"></ui5-multi-combobox-item>
 </ui5-multi-combobox>
 
 <ui5-multi-combobox value-state="Error">
-	<ui5-li>Fault</ui5-li>
-	<ui5-li selected>Error</ui5-li>
-	<ui5-li>Mistake</ui5-li>
+	<ui5-multi-combobox-item text="Fault"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item selected text="Error"></ui5-multi-combobox-item>
+	<ui5-multi-combobox-item text="Mistake"></ui5-multi-combobox-item>
 </ui5-multi-combobox>
From b3f86f005156fa66c917c8107a3eb6fad97333b8 Mon Sep 17 00:00:00 2001 From: Martin Hristov Date: Thu, 27 Feb 2020 16:59:03 +0200 Subject: [PATCH 3/4] - ui5-multi-combobox-item renamed to ui5-mcb-item - docs are added to item classes BREAKING CHANGE: Change the tag name from ui5-combobox-item to ui5-cb-item --- packages/main/src/ComboBox.js | 1 + packages/main/src/ComboBoxItem.js | 25 +++- packages/main/src/MultiComboBox.js | 1 + packages/main/src/MultiComboBoxItem.js | 36 ++++- packages/main/test/pages/ComboBox.html | 78 +++++------ packages/main/test/pages/InputsAlignment.html | 10 +- packages/main/test/pages/MultiComboBox.html | 108 +++++++-------- .../main/test/samples/ComboBox.sample.html | 104 +++++++------- .../test/samples/MultiComboBox.sample.html | 128 +++++++++--------- 9 files changed, 268 insertions(+), 223 deletions(-) diff --git a/packages/main/src/ComboBox.js b/packages/main/src/ComboBox.js index d2321ee05a52..3f35c81a7114 100644 --- a/packages/main/src/ComboBox.js +++ b/packages/main/src/ComboBox.js @@ -244,6 +244,7 @@ const metadata = { * @alias sap.ui.webcomponents.main.ComboBox * @extends UI5Element * @tagname ui5-combobox + * @appenddocs ComboBoxItem * @public * @since 1.0.0-rc.6 */ diff --git a/packages/main/src/ComboBoxItem.js b/packages/main/src/ComboBoxItem.js index cb27705f0e45..26735c2d7a9a 100644 --- a/packages/main/src/ComboBoxItem.js +++ b/packages/main/src/ComboBoxItem.js @@ -5,10 +5,19 @@ import ComboBoxItemTemplate from "./generated/templates/ComboBoxItemTemplate.lit // Styles import ComboBoxItemCss from "./generated/themes/ComboBoxItem.css.js"; - +/** + * @public + */ const metadata = { - tag: "ui5-combobox-item", - properties: { + tag: "ui5-cb-item", + properties: /** @lends sap.ui.webcomponents.main.ComboBoxItem.prototype */ { + /** + * Defines the text of the ui5-cb-item. + * + * @type {string} + * @defaultvalue "" + * @public + */ text: { type: String }, }, slots: { @@ -19,6 +28,16 @@ const metadata = { }, }; +/** + * @class + * The ui5-cb-item represents the item for a ui5-combobox. + * + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.main.ComboBoxItem + * @extends UI5Element + * @public + */ class ComboBoxItem extends UI5Element { static get metadata() { return metadata; diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js index e9aa4d6f2318..9570ab486526 100644 --- a/packages/main/src/MultiComboBox.js +++ b/packages/main/src/MultiComboBox.js @@ -277,6 +277,7 @@ const metadata = { * @extends UI5Element * @tagname ui5-multi-combobox * @public + * @appenddocs MultiComboBoxItem * @since 0.11.0 */ class MultiComboBox extends UI5Element { diff --git a/packages/main/src/MultiComboBoxItem.js b/packages/main/src/MultiComboBoxItem.js index f2307a1d9b0d..2fafa738c4b0 100644 --- a/packages/main/src/MultiComboBoxItem.js +++ b/packages/main/src/MultiComboBoxItem.js @@ -1,13 +1,37 @@ import ComboBoxItem from "./ComboBoxItem.js"; +/** + * @public + */ +const metadata = { + tag: "ui5-mcb-item", + properties: /** @lends sap.ui.webcomponents.main.MultiComboBoxItem.prototype */ { + /** + * Defines the selected state of the ui5-mcb-item. + * @type {boolean} + * @defaultvalue false + * @public + */ + selected: { type: Boolean }, + }, +}; + +/** + * @class + * The ui5-cb-item represents the item for a ui5-combobox. + * + * @constructor + * @author SAP SE + * @alias sap.ui.webcomponents.main.MultiComboBoxItem + * @extends ComboBoxItem + * @public + */ class MultiComboBoxItem extends ComboBoxItem { + /** + * @public + */ static get metadata() { - return { - tag: "ui5-multi-combobox-item", - properties: { - selected: { type: Boolean }, - }, - }; + return metadata; } } diff --git a/packages/main/test/pages/ComboBox.html b/packages/main/test/pages/ComboBox.html index 90fc787bd721..b7ba32a8388c 100644 --- a/packages/main/test/pages/ComboBox.html +++ b/packages/main/test/pages/ComboBox.html @@ -41,31 +41,31 @@
- - - - - - - - - - - + + + + + + + + + + + - - - - - - - - - - - + + + + + + + + + + + @@ -94,10 +94,10 @@ Change event testing - - - - + + + +
@@ -114,10 +114,10 @@ Contains filter - - - - + + + +
@@ -125,10 +125,10 @@ StartsWith filter - - - - + + + + @@ -136,10 +136,10 @@

ComboBox in Compact

- - - - + + + +
@@ -165,7 +165,7 @@

ComboBox in Compact

// fill new items items.map(data => { - const element = document.createElement("ui5-combobox-item"); + const element = document.createElement("ui5-cb-item"); element.setAttribute("text", data.name); document.getElementById("lazy").appendChild(element); diff --git a/packages/main/test/pages/InputsAlignment.html b/packages/main/test/pages/InputsAlignment.html index 8ef48acf3fcb..13222a817c26 100644 --- a/packages/main/test/pages/InputsAlignment.html +++ b/packages/main/test/pages/InputsAlignment.html @@ -46,11 +46,11 @@

The way the components will be rendered out of the box

- - - - - + + + + +

Explicitly width:auto set

diff --git a/packages/main/test/pages/MultiComboBox.html b/packages/main/test/pages/MultiComboBox.html index fc7f71d543cf..195475cbea8c 100644 --- a/packages/main/test/pages/MultiComboBox.html +++ b/packages/main/test/pages/MultiComboBox.html @@ -84,10 +84,10 @@
- - - - + + + + @@ -96,10 +96,10 @@
- - - - + + + + @@ -108,10 +108,10 @@
- - - - + + + + @@ -120,10 +120,10 @@
- - - - + + + + @@ -133,10 +133,10 @@
- - - - + + + + @@ -146,10 +146,10 @@
- - - - + + + + @@ -159,10 +159,10 @@
- - - - + + + + @@ -171,10 +171,10 @@
- - - - + + + + @@ -183,12 +183,12 @@
- - - - - - + + + + + + @@ -197,10 +197,10 @@
- - - - + + + + @@ -208,10 +208,10 @@ MultiComboBox n more
- - - - + + + + @@ -220,10 +220,10 @@
- - - - + + + + @@ -257,10 +257,10 @@

MultiComboBox in Compact

- - - - + + + +
diff --git a/packages/main/test/samples/ComboBox.sample.html b/packages/main/test/samples/ComboBox.sample.html index fa1e22bfd6fb..2eb48608843b 100644 --- a/packages/main/test/samples/ComboBox.sample.html +++ b/packages/main/test/samples/ComboBox.sample.html @@ -23,52 +23,52 @@

Basic Example

- - - + + + - - - + + + - - - + + + - - - + + + 

 <ui5-combobox placeholder="Enter value">
-	<ui5-combobox-item text="Item 1"></ui5-combobox-item>
-	<ui5-combobox-item text="Item 2"></ui5-combobox-item>
-	<ui5-combobox-item text="Item 3"></ui5-combobox-item>
+	<ui5-cb-item text="Item 1"></ui5-cb-item>
+	<ui5-cb-item text="Item 2"></ui5-cb-item>
+	<ui5-cb-item text="Item 3"></ui5-cb-item>
 </ui5-combobox>
 
 <ui5-combobox value-state="Success" value="Item 1">
-	<ui5-combobox-item text="Item 1"></ui5-combobox-item>
-	<ui5-combobox-item text="Item 2"></ui5-combobox-item>
-	<ui5-combobox-item text="Item 3"></ui5-combobox-item>
+	<ui5-cb-item text="Item 1"></ui5-cb-item>
+	<ui5-cb-item text="Item 2"></ui5-cb-item>
+	<ui5-cb-item text="Item 3"></ui5-cb-item>
 </ui5-combobox>
 
 <ui5-combobox value-state="Warning" value="Item 2">
-	<ui5-combobox-item text="Item 1"></ui5-combobox-item>
-	<ui5-combobox-item text="Item 2"></ui5-combobox-item>
-	<ui5-combobox-item text="Item 3"></ui5-combobox-item>
+	<ui5-cb-item text="Item 1"></ui5-cb-item>
+	<ui5-cb-item text="Item 2"></ui5-cb-item>
+	<ui5-cb-item text="Item 3"></ui5-cb-item>
 </ui5-combobox>
 
 <ui5-combobox value-state="Error" value="Item 3">
-	<ui5-combobox-item text="Item 1"></ui5-combobox-item>
-	<ui5-combobox-item text="Item 2"></ui5-combobox-item>
-	<ui5-combobox-item text="Item 3"></ui5-combobox-item>
+	<ui5-cb-item text="Item 1"></ui5-cb-item>
+	<ui5-cb-item text="Item 2"></ui5-cb-item>
+	<ui5-cb-item text="Item 3"></ui5-cb-item>
 </ui5-combobox>
@@ -78,15 +78,15 @@

Disabled and Readonly properties

- - - + + + - - - + + +
@@ -95,37 +95,37 @@

Disabled and Readonly properties

Filters (StartsWithPerTerm(default), StartsWith, Contains)

- - - - - + + + + + - - - - - + + + + + - - - - - + + + + + 

 <ui5-combobox placeholder="Contains" filter="Contains">
-	<ui5-combobox-item text="Austria"></ui5-combobox-item>
-	<ui5-combobox-item text="Bulgaria"></ui5-combobox-item>
-	<ui5-combobox-item text="Germany"></ui5-combobox-item>
-	<ui5-combobox-item text="United Kingdom"></ui5-combobox-item>
-	<ui5-combobox-item text="Kazakhstan"></ui5-combobox-item>
+	<ui5-cb-item text="Austria"></ui5-cb-item>
+	<ui5-cb-item text="Bulgaria"></ui5-cb-item>
+	<ui5-cb-item text="Germany"></ui5-cb-item>
+	<ui5-cb-item text="United Kingdom"></ui5-cb-item>
+	<ui5-cb-item text="Kazakhstan"></ui5-cb-item>
 </ui5-combobox>
@@ -155,7 +155,7 @@

Lazy loading

.then(function (list) { list.forEach(function (country) { - const element = document.createElement("ui5-combobox-item"); + const element = document.createElement("ui5-cb-item"); element.setAttribute("text", country.name); combo.appendChild(element); @@ -189,7 +189,7 @@

Lazy loading

.then(function (list) { list.forEach(function (country) { - const element = document.createElement("ui5-combobox-item"); + const element = document.createElement("ui5-cb-item"); element.setAttribute("text", country.name); combo.appendChild(element); diff --git a/packages/main/test/samples/MultiComboBox.sample.html b/packages/main/test/samples/MultiComboBox.sample.html index f5e09ad70dff..f9df6139a2fe 100644 --- a/packages/main/test/samples/MultiComboBox.sample.html +++ b/packages/main/test/samples/MultiComboBox.sample.html @@ -25,26 +25,26 @@

MultiComboBox

Basic MultiComboBox

- + - + - + 

 <ui5-multi-combobox placeholder="Type your value">
-	<ui5-multi-combobox-item selected text="UI5"></ui5-multi-combobox-item>
+	<ui5-mcb-item selected text="UI5"></ui5-mcb-item>
 </ui5-multi-combobox>
 
 <ui5-multi-combobox readonly value="Readonly combo">
-	<ui5-multi-combobox-item selected text="UI5"></ui5-multi-combobox-item>
+	<ui5-mcb-item selected text="UI5"></ui5-mcb-item>
 </ui5-multi-combobox>
 
 <ui5-multi-combobox disabled value="Disabled combo">
-	<ui5-multi-combobox-item selected text="UI5"></ui5-multi-combobox-item>
+	<ui5-mcb-item selected text="UI5"></ui5-mcb-item>
 </ui5-multi-combobox>
@@ -53,30 +53,30 @@

Basic MultiComboBox

MultiComboBox with items

- - - - - - - - - - + + + + + + + + + + 

 <ui5-multi-combobox placeholder="Choose your countries">
-	<ui5-multi-combobox-item selected text="Argentina"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item text="Bulgaria"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item text="Denmark"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item text="England"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item text="Albania"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item text="Morocco"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item text="Portugal"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item text="Germany"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item text="Philippines"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item text="Paraguay"></ui5-multi-combobox-item>
+	<ui5-mcb-item selected text="Argentina"></ui5-mcb-item>
+	<ui5-mcb-item text="Bulgaria"></ui5-mcb-item>
+	<ui5-mcb-item text="Denmark"></ui5-mcb-item>
+	<ui5-mcb-item text="England"></ui5-mcb-item>
+	<ui5-mcb-item text="Albania"></ui5-mcb-item>
+	<ui5-mcb-item text="Morocco"></ui5-mcb-item>
+	<ui5-mcb-item text="Portugal"></ui5-mcb-item>
+	<ui5-mcb-item text="Germany"></ui5-mcb-item>
+	<ui5-mcb-item text="Philippines"></ui5-mcb-item>
+	<ui5-mcb-item text="Paraguay"></ui5-mcb-item>
 </ui5-multi-combobox>
@@ -85,30 +85,30 @@

MultiComboBox with items

MultiComboBox with free text input

- - - - - - - - - - + + + + + + + + + + 

 <ui5-multi-combobox placeholder="Choose your countries">
-	<ui5-multi-combobox-item text="Argentina"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item selected text="Bulgaria"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item text="Denmark"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item selected text="England"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item text="Albania"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item text="Morocco"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item text="Portugal"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item selected text="Germany"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item text="Philippines"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item text="Paraguay"></ui5-multi-combobox-item>
+	<ui5-mcb-item text="Argentina"></ui5-mcb-item>
+	<ui5-mcb-item selected text="Bulgaria"></ui5-mcb-item>
+	<ui5-mcb-item text="Denmark"></ui5-mcb-item>
+	<ui5-mcb-item selected text="England"></ui5-mcb-item>
+	<ui5-mcb-item text="Albania"></ui5-mcb-item>
+	<ui5-mcb-item text="Morocco"></ui5-mcb-item>
+	<ui5-mcb-item text="Portugal"></ui5-mcb-item>
+	<ui5-mcb-item selected text="Germany"></ui5-mcb-item>
+	<ui5-mcb-item text="Philippines"></ui5-mcb-item>
+	<ui5-mcb-item text="Paraguay"></ui5-mcb-item>
 </ui5-multi-combobox>
@@ -117,40 +117,40 @@

MultiComboBox with free text input

MultiComboBox with Value State

- - - + + + - - - + + + - - - + + + 

 <ui5-multi-combobox value-state="Success">
-	<ui5-multi-combobox-item text="Fortune"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item text="Luck"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item selected text="Success"></ui5-multi-combobox-item>
+	<ui5-mcb-item text="Fortune"></ui5-mcb-item>
+	<ui5-mcb-item text="Luck"></ui5-mcb-item>
+	<ui5-mcb-item selected text="Success"></ui5-mcb-item>
 </ui5-multi-combobox>
 
 <ui5-multi-combobox value-state="Warning">
-	<ui5-multi-combobox-item text="Attention"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item text="Caution"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item selected text="Warning"></ui5-multi-combobox-item>
+	<ui5-mcb-item text="Attention"></ui5-mcb-item>
+	<ui5-mcb-item text="Caution"></ui5-mcb-item>
+	<ui5-mcb-item selected text="Warning"></ui5-mcb-item>
 </ui5-multi-combobox>
 
 <ui5-multi-combobox value-state="Error">
-	<ui5-multi-combobox-item text="Fault"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item selected text="Error"></ui5-multi-combobox-item>
-	<ui5-multi-combobox-item text="Mistake"></ui5-multi-combobox-item>
+	<ui5-mcb-item text="Fault"></ui5-mcb-item>
+	<ui5-mcb-item selected text="Error"></ui5-mcb-item>
+	<ui5-mcb-item text="Mistake"></ui5-mcb-item>
 </ui5-multi-combobox>
From 147fa57091dfcaa352adfb8e8cce8d81202c63d4 Mon Sep 17 00:00:00 2001 From: Martin Date: Fri, 28 Feb 2020 15:20:09 +0200 Subject: [PATCH 4/4] Update MultiComboBoxItem.js --- packages/main/src/MultiComboBoxItem.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/main/src/MultiComboBoxItem.js b/packages/main/src/MultiComboBoxItem.js index 2fafa738c4b0..442d7a8f6d92 100644 --- a/packages/main/src/MultiComboBoxItem.js +++ b/packages/main/src/MultiComboBoxItem.js @@ -18,7 +18,7 @@ const metadata = { /** * @class - * The ui5-cb-item represents the item for a ui5-combobox. + * The ui5-cb-item represents the item for a ui5-multi-combobox. * * @constructor * @author SAP SE