fix(ui5-input): enhance storybook samples (#7532)

Author: niyap

packages/main/src/Input.ts

@@ -336,8 +336,6 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 
 	/**
 	 * Defines the HTML type of the component.
-	 * Available options are: <code>Text</code>, <code>Email</code>,
-	 * <code>Number</code>, <code>Password</code>, <code>Tel</code>, and <code>URL</code>.
 	 * <br><br>
 	 * <b>Notes:</b>
 	 * <ul>
@@ -384,15 +382,6 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 
 	/**
 	 * 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.Input.prototype.valueState

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

@@ -55,14 +55,13 @@ const Template: UI5StoryArgs<Input, StoryArgsSlots> = (args) => html`
 </ui5-input>`;
 
 
-export const BasicInput = Template.bind({});
-BasicInput.args = {
-	showClearIcon: true,
+export const Basic = Template.bind({});
+Basic.args = {
 	value: "Input"
 };
 
-export const InputSuggestions = Template.bind({});
-InputSuggestions.decorators = [
+export const WithSuggestions = Template.bind({});
+WithSuggestions.decorators = [
 	(story) => {
 		return html`
 		${story()}
@@ -75,7 +74,7 @@ InputSuggestions.decorators = [
 		"Austria",  "Australia", "Bulgaria", "Canada", "Columbia", "Croatia", "Denmark",
 		"England", "Finland", "France", "Germany", "Hungary", "Ireland", "Italy", "Kuwait",
 		"Luxembourg", "Mexico", "Morocco", "Norway", "Paraguay", "Philippines", "Portugal",
-		"Spain", "Sweden", "Sri Lanka", "Senegal", "United Kingdom", "USA" ];
+		"Spain", "Sweden", "Sri Lanka", "Senegal", "Thailand", "The United Kingdom of Great Britain and Northern Ireland", "USA" ];
 
 		if (value) {
 			suggestionItems = ui5_database_entries.filter((item) => {
@@ -87,26 +86,21 @@ InputSuggestions.decorators = [
 		});
 		suggestionItems.forEach((item) => {
 			const li = document.createElement("ui5-suggestion-item");
-			li.icon = "world";
-			li.additionalText = "explore";
-			li.additionalTextState = "Success";
-			li.description = "travel the world";
 			li.text = item;
 			input${index}.appendChild(li);
 		});
 	});
 </script>`;
 	}
 ]
-InputSuggestions.args = {
+WithSuggestions.args = {
 	placeholder: "Start typing country name",
 	showSuggestions: true,
 	showClearIcon: true
 };
-InputSuggestions.storyName = "Input With Suggestions (note: the usage depends on the framework you are using)";
 
-export const InputSuggestionsValueStateMessage = Template.bind({});
-InputSuggestionsValueStateMessage.args = {
+export const WithValueStateMessage = Template.bind({});
+WithValueStateMessage.args = {
 	default: `
 	<ui5-li>Cozy</ui5-li>
 	<ui5-li>Compact</ui5-li>
@@ -116,39 +110,31 @@ InputSuggestionsValueStateMessage.args = {
 	valueState: ValueState.Error,
 	valueStateMessage: '<div slot="valueStateMessage">This is an error message. Extra long text used as an error message.</div>'
 };
-InputSuggestionsValueStateMessage.storyName = "Input with Suggestions and Value State Message";
 
-export const InputLabel = Template.bind({});
-InputLabel.decorators = [
+export const WithLabel = Template.bind({});
+WithLabel.decorators = [
 	(story) => {
 		return html`
 			<ui5-label class="samples-big-margin-right" for="input-${index + 1}" required="" show-colon="">Secret Code</ui5-label>
 			${story()}
 		`;
 	}
 ]
-InputLabel.args = {
+WithLabel.args = {
 	type: InputType.Password,
-	valueState: ValueState.Error,
 	placeholder: "Enter your Secret Code",
 	required: true
 };
-InputLabel.storyName = "Input with Label";
 
-export const InputWithVHD: StoryFn = () => html`
+export const WithValueHelpDialog: StoryFn = () => html`
 <ui5-input id="valueHelpInput" placeholder="Enter product" show-suggestions="">
 	<ui5-icon id="valueHelpIcon" slot="icon" name="value-help"></ui5-icon>
 </ui5-input>
 <ui5-dialog id="dialog" accessible-name="Products Value Help">
 	<div slot="header" id="dialogHeader" style="width: 100%; padding: 0 1rem 0.5rem 1rem;">
-		<div id="titleBar" style="
-			display: flex;
-			justify-content: space-between;
-			align-items: center;">
+		<div id="titleBar" style="display: flex; justify-content: space-between; align-items: center;">
 			<h2 id="headerTitle" style="
-				margin-top: 1em !important;
-				font-size: 1rem;
-				font-weight: 500;">
+				margin-top: 1em !important; font-size: 1rem; font-weight: 500;">
 				Products
 			</h2>
 			<ui5-button design="Transparent" id="clearButton">Clear</ui5-button>
@@ -253,14 +239,12 @@ export const InputWithVHD: StoryFn = () => html`
 	itemsList${index}.addEventListener("item-click", handleItemClick);
 </script>
 `;
-InputWithVHD.parameters = {
+WithValueHelpDialog.parameters = {
 	docs: {
 		story: {
 			// Opt-out of inline rendering
 			inline: false,
 			iframeHeight: "500px",
 		},
 	}
-};
-
-InputWithVHD.storyName = "Input With Value Help Dialog";
+};