fix(ui5-multi-combobox): adjust storybook sample (#7441)

Author: niyap

packages/main/src/MultiComboBox.ts

@@ -305,13 +305,6 @@ class MultiComboBox extends UI5Element {
 	 * Defines the value state of the component.
 	 * <br><br>
 	 * Available options are:
-	 * <ul>
-	 * <li><code>None</code></li>
-	 * <li><code>Error</code></li>
-	 * <li><code>Warning</code></li>
-	 * <li><code>Success</code></li>
-	 * <li><code>Information</code></li>
-	 * </ul>
 	 *
 	 * @type {sap.ui.webc.base.types.ValueState}
 	 * @name sap.ui.webc.main.MultiComboBox.prototype.valueState
@@ -377,7 +370,7 @@ class MultiComboBox extends UI5Element {
 	 *
 	 * @type {string}
 	 * @name sap.ui.webc.main.MultiComboBox.prototype.accessibleName
-	 * @defaultvalue: ""
+	 * @defaultvalue ""
 	 * @public
 	 * @since 1.4.0
 	 */

packages/playground/_stories/main/MultiComboBox/MultiComboBox.stories.ts

@@ -15,7 +15,7 @@ import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 const component = "ui5-multi-combobox";
 
 export default {
-    title: "Main/MultiComboBox",
+    title: "Main/Multi-Combo Box",
     component: "MultiComboBox",
     subcomponents: {'MultiComboBoxItem' : 'MultiComboBoxItem', 'MultiComboBoxGroupItem' : 'MultiComboBoxGroupItem'},
     parameters: {
@@ -47,32 +47,24 @@ const Template: UI5StoryArgs<MultiComboBox, StoryArgsSlots> = (args) => html`
 </ui5-multi-combobox>`;
 
 
-export const BasicMultiComboBox = Template.bind({});
-BasicMultiComboBox.args = {
+export const Basic = Template.bind({});
+Basic.args = {
 	placeholder: 'Type your value',
-	default: `<ui5-mcb-item selected="" text="UI5"></ui5-mcb-item>`
-};
-
-export const MultiComboBoxItems = Template.bind({});
-MultiComboBoxItems.args = {
-	placeholder: 'Choose your countries',
 	default: `
+	<ui5-mcb-item text="Albania"></ui5-mcb-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-mcb-item text="Portugal"></ui5-mcb-item>
+	<ui5-mcb-item text="The United Kingdom of Great Britain and Northern Ireland"></ui5-mcb-item>
+	`
 };
 
-MultiComboBoxItems.storyName = "Multi Combo Box with items";
-
-export const MultiComboBoxFreeTextInput = Template.bind({});
-MultiComboBoxFreeTextInput.args = {
+export const MultiComboBoxCustomValue= Template.bind({});
+MultiComboBoxCustomValue.args = {
 	placeholder: 'Choose your state',
 	valueState: ValueState.Success,
 	allowCustomValues: true,
@@ -87,10 +79,10 @@ MultiComboBoxFreeTextInput.args = {
 	<ui5-mcb-item text="Error"></ui5-mcb-item>
 	<ui5-mcb-item text="Mistake"></ui5-mcb-item>`
 };
-MultiComboBoxFreeTextInput.storyName = "Multi Combo Box with free text input";
+MultiComboBoxCustomValue.storyName = "Custom Value";
 
-export const MultiComboBoxGroupingItems = Template.bind({});
-MultiComboBoxGroupingItems.args = {
+export const MultiComboBoxGrouping = Template.bind({});
+MultiComboBoxGrouping.args = {
 	placeholder: 'Select a country',
 	default: `
 	<ui5-mcb-group-item text="Asia"></ui5-mcb-group-item>
@@ -103,17 +95,18 @@ MultiComboBoxGroupingItems.args = {
 	<ui5-mcb-item text="Bulgaria"></ui5-mcb-item>
 	<ui5-mcb-item text="Germany"></ui5-mcb-item>
 	<ui5-mcb-item text="Italy"></ui5-mcb-item>
+	<ui5-mcb-item text="The United Kingdom of Great Britain and Northern Ireland"></ui5-mcb-item>
 	<ui5-mcb-group-item text="North America"></ui5-mcb-group-item>
 	<ui5-mcb-item text="Canada"></ui5-mcb-item>
 	<ui5-mcb-item text="Granada"></ui5-mcb-item>
 	<ui5-mcb-item text="Haiti"></ui5-mcb-item>
 	<ui5-mcb-item text="United States"></ui5-mcb-item>`
 };
-MultiComboBoxGroupingItems.storyName = "Multi Combo Box with Grouping of Items";
+MultiComboBoxGrouping.storyName = "Grouping";
 
-export const MultiComboBoxLongText = Template.bind({});
-MultiComboBoxLongText.args = {
+export const MultiComboBoxLongToken = Template.bind({});
+MultiComboBoxLongToken.args = {
 	placeholder: 'MultiComboBox with single long token',
 	default: `<ui5-mcb-item selected="" text="Very long long long long long long long text"></ui5-mcb-item>`
 };
-MultiComboBoxLongText.storyName = "Multi Combo Box with single long token";
+MultiComboBoxLongToken.storyName = "Single Long Token";