feat(ui5-input): provide "Information" value state (#1261)

Author: ilhan007

packages/base/src/types/ValueState.js

@@ -8,6 +8,7 @@ const ValueStates = {
 	Success: "Success",
 	Warning: "Warning",
 	Error: "Error",
+	Information: "Information",
 };
 
 class ValueState extends DataType {

packages/main/src/themes/Input.css

@@ -163,6 +163,12 @@
 :host([value-state="Success"]:not([readonly])) {
 	background-color: var(--sapField_SuccessBackground);
 	border-color: var(--sapField_SuccessColor);
+	border-width: 1px;
+}
+
+:host([value-state="Information"]:not([readonly])) {
+	background-color: var(--sapField_InformationBackground);
+	border-color: var(--sapField_InformationColor);
 }
 
 /* Remove IE's defaut clear button */

packages/main/src/themes/TextArea.css

@@ -177,6 +177,14 @@
 	border-width: 1px;
 }
 
+:host([value-state="Information"]:not([readonly])) {
+	border-color: var(--sapField_InformationColor);
+}
+
+:host([value-state="Information"]:not([readonly])) .ui5-textarea-inner {
+	background-color: var(--sapField_InformationBackground);
+}
+
 .ui5-textarea-exceeded-text {
 	overflow: hidden;
 	align-self: flex-end;

packages/main/test/pages/Input.html

@@ -63,6 +63,11 @@ <h3> Input valueState Success</h3>
 		<ui5-icon slot="icon" name="message-success"></ui5-icon>
 	</ui5-input>
 
+	<h3> Input valueState Information</h3>
+	<ui5-input value-state="Information" placeholder="Info state ...">
+		<ui5-icon slot="icon" name="message-information"></ui5-icon>
+	</ui5-input>
+
 	<h3> Test 'change' event</h3>
 	<ui5-input id="input1" value-state="Warning" placeholder="Warning state ...">
 		<ui5-icon slot="icon" name="message-warning"></ui5-icon>
@@ -119,6 +124,12 @@ <h3> Inputs alignment</h3>
 			title='Delivery Date!'>
 	</ui5-datepicker>
 
+	<ui5-datepicker
+			placeholder='Delivery Date...'
+			value-state="Information"
+			title='Delivery Date!'>
+	</ui5-datepicker>
+
 	<ui5-select id="mySelect2">
 		<ui5-option>Cozy</ui5-option>
 		<ui5-option selected>Compact</ui5-option>
@@ -128,12 +139,21 @@ <h3> Inputs alignment</h3>
 	<ui5-input  value="input" value-state="Error">
 		<ui5-icon slot="icon" name="message-warning"></ui5-icon>
 	</ui5-input>
+
 	<ui5-select id="mySelect2" value-state="Error">
 		<ui5-option>Cozy</ui5-option>
 		<ui5-option selected>Compact</ui5-option>
 		<ui5-option>Condensed</ui5-option>
 	</ui5-select>
+
+	<ui5-select value-state="Information">
+		<ui5-option>Cozy</ui5-option>
+		<ui5-option selected>Compact</ui5-option>
+		<ui5-option>Condensed</ui5-option>
+	</ui5-select>
+
 	<ui5-multi-combobox value-state="Error"></ui5-multi-combobox>
+	<ui5-multi-combobox value-state="Information"></ui5-multi-combobox>
 
 	<h3> Input with multiple icons</h3>
 	<ui5-input id="input3" placeholder="Search ...">

packages/main/test/pages/TextArea.html

@@ -83,6 +83,10 @@
 			<ui5-textarea id="basic-textarea-success" value="Test" value-state="Success"></ui5-textarea>
 			<br>
 			<br>
+
+			<br>
+			<br>
+			<ui5-textarea id="basic-textarea-error" value="Test" value-state="Information"></ui5-textarea>
 		</section>
 
 	<section class="group">

packages/main/test/samples/Input.sample.html

@@ -120,11 +120,13 @@ <h3>Input with Value State</h3>
 		<ui5-input class="samples-margin samples-responsive-margin-bottom" value="Success" value-state="Success"></ui5-input>
 		<ui5-input class="samples-margin samples-responsive-margin-bottom" value="Warning" value-state="Warning"></ui5-input>
 		<ui5-input class="samples-margin samples-responsive-margin-bottom" value="Error" value-state="Error"></ui5-input>
+		<ui5-input class="samples-margin samples-responsive-margin-bottom" value="Information" value-state="Information"></ui5-input>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
 <ui5-input value="Success" value-state="Success"></ui5-input>
 <ui5-input value="Warning" value-state="Warning"></ui5-input>
 <ui5-input value="Error" value-state="Error"></ui5-input>
+<ui5-input class="samples-margin samples-responsive-margin-bottom" value="Information" value-state="Information"></ui5-input>
 	</xmp></pre>
 </section>
 

packages/main/test/samples/Select.sample.html

@@ -69,6 +69,11 @@ <h3>Select with Value State</h3>
 				<ui5-option icon="meal">Tomato</ui5-option>
 				<ui5-option icon="meal" selected>Red Chili Pepper</ui5-option>
 		</ui5-select>
+		<ui5-select value-state="Information" class="select">
+			<ui5-option icon="meal">Blueberry</ui5-option>
+			<ui5-option icon="meal">Grape</ui5-option>
+			<ui5-option icon="meal" selected>Plum</ui5-option>
+		</ui5-select>
 	</div>
 	<pre class="prettyprint lang-html"><xmp>
 <ui5-select value-state="Success" class="select">
@@ -85,6 +90,11 @@ <h3>Select with Value State</h3>
 	<ui5-option icon="meal">Strawberry</ui5-option>
 	<ui5-option icon="meal">Tomato</ui5-option>
 	<ui5-option icon="meal" selected>Red Chili Pepper</ui5-option>
+</ui5-select>
+<ui5-select value-state="Information" class="select">
+	<ui5-option icon="meal">Blueberry</ui5-option>
+	<ui5-option icon="meal">Grape</ui5-option>
+	<ui5-option icon="meal" selected>Plum</ui5-option>
 </ui5-select>
 	</xmp></pre>
 </section>

packages/theme-base/src/themes/sap_belize/base-parameters-vars.less

@@ -176,6 +176,8 @@
   --sapField_SuccessColor: @sapField_SuccessColor;
   --sapField_SuccessBackground: @sapField_SuccessBackground;
   --sapField_PlaceholderTextColor: @sapField_PlaceholderTextColor;
+  --sapField_InformationColor: @sapField_InformationColor;
+  --sapField_InformationBackground: @sapField_InformationBackground;
 
   --sapGroup_TitleBackground: @sapGroup_TitleBackground;
   --sapGroup_BorderWidth: @sapGroup_BorderWidth;

packages/theme-base/src/themes/sap_belize/base-parameters.less

@@ -183,6 +183,8 @@
 @sapField_SuccessBackground: @sapField_Background;
 @sapField_ReadOnly_Background: fade(darken(@sapField_Background, 5), 50);
 @sapField_PlaceholderTextColor: lighten(@sapField_TextColor, 46);
+@sapField_InformationColor: @sapInformationBorderColor;
+@sapField_InformationBackground: @sapField_Background;
 
 @sapGroup_TitleBackground: transparent;
 @sapGroup_BorderWidth: @sapElement_BorderWidth;

packages/theme-base/src/themes/sap_belize_hcb/base-parameters-vars.less

@@ -203,6 +203,8 @@
 	--sapField_SuccessColor: @sapField_SuccessColor;
 	--sapField_SuccessBackground: @sapField_SuccessBackground;
 	--sapField_PlaceholderTextColor: @sapField_PlaceholderTextColor;
+	--sapField_InformationColor: @sapField_InformationColor;
+	--sapField_InformationBackground: @sapField_InformationBackground;
 
 	--sapGroup_TitleBackground: @sapGroup_TitleBackground;
 	--sapGroup_TitleBorderColor: @sapGroup_TitleBorderColor;