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

SAP · Mar 2, 2020 · 77f7293 · 77f7293
1 parent 6a72021
commit 77f7293
Show file tree

Hide file tree

Showing 17 changed files with 71 additions and 3 deletions.
diff --git a/packages/base/src/types/ValueState.js b/packages/base/src/types/ValueState.js
@@ -8,6 +8,7 @@ const ValueStates = {
 	Success: "Success",
 	Warning: "Warning",
 	Error: "Error",
+	Information: "Information",
 };
 
 class ValueState extends DataType {

diff --git a/packages/main/src/themes/Input.css b/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 */

diff --git a/packages/main/src/themes/TextArea.css b/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;

diff --git a/packages/main/test/pages/Input.html b/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 ...">

diff --git a/packages/main/test/pages/TextArea.html b/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">

diff --git a/packages/main/test/samples/Input.sample.html b/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>
 

diff --git a/packages/main/test/samples/Select.sample.html b/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>

diff --git a/packages/theme-base/src/themes/sap_belize/base-parameters-vars.less b/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;

diff --git a/packages/theme-base/src/themes/sap_belize/base-parameters.less b/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;

diff --git a/packages/theme-base/src/themes/sap_belize_hcb/base-parameters-vars.less b/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;

diff --git a/packages/theme-base/src/themes/sap_belize_hcb/base-parameters.less b/packages/theme-base/src/themes/sap_belize_hcb/base-parameters.less
@@ -204,6 +204,8 @@
 @sapField_SuccessColor: @sapField_BorderColor;
 @sapField_SuccessBackground: @sapField_Background;
 @sapField_PlaceholderTextColor: @sapField_TextColor;
+@sapField_InformationColor: @sapInformationBorderColor;
+@sapField_InformationBackground: @sapField_Background;
 
 @sapGroup_TitleBackground: @sapBackgroundColor;
 @sapGroup_TitleBorderColor: @sapHC_StandardForeground;

diff --git a/packages/theme-base/src/themes/sap_belize_hcw/base-parameters-vars.less b/packages/theme-base/src/themes/sap_belize_hcw/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;

diff --git a/packages/theme-base/src/themes/sap_belize_hcw/base-parameters.less b/packages/theme-base/src/themes/sap_belize_hcw/base-parameters.less
@@ -205,6 +205,8 @@
 @sapField_SuccessColor: @sapField_BorderColor;
 @sapField_SuccessBackground: @sapField_Background;
 @sapField_PlaceholderTextColor: @sapField_TextColor;
+@sapField_InformationColor: @sapInformationBorderColor;
+@sapField_InformationBackground: @sapField_Background;
 
 @sapGroup_TitleBackground: @sapBackgroundColor;
 @sapGroup_TitleBorderColor: @sapHC_StandardForeground;

diff --git a/packages/theme-base/src/themes/sap_fiori_3/base-parameters-vars.less b/packages/theme-base/src/themes/sap_fiori_3/base-parameters-vars.less
@@ -125,6 +125,8 @@
   --sapField_WarningBackground: @sapField_WarningBackground;
   --sapField_SuccessColor: @sapField_SuccessColor;
   --sapField_SuccessBackground: @sapField_SuccessBackground;
+  --sapField_InformationColor: @sapField_InformationColor;
+  --sapField_InformationBackground: @sapField_InformationBackground;
 
   --sapGroup_TitleBackground: @sapGroup_TitleBackground;
 

diff --git a/packages/theme-base/src/themes/sap_fiori_3/base-parameters.less b/packages/theme-base/src/themes/sap_fiori_3/base-parameters.less
@@ -125,6 +125,8 @@
 @sapField_WarningBackground: @sapField_Background;
 @sapField_SuccessColor: @sapSuccessBorderColor;
 @sapField_SuccessBackground: @sapField_Background;
+@sapField_InformationColor: @sapInformationBorderColor;
+@sapField_InformationBackground: @sapField_Background;
 
 @sapGroup_TitleBackground: transparent;
 @sapGroup_ContentBackground: @sapBaseColor;

diff --git a/packages/theme-base/src/themes/sap_fiori_3_dark/base-parameters-vars.less b/packages/theme-base/src/themes/sap_fiori_3_dark/base-parameters-vars.less
@@ -169,8 +169,8 @@
   --sapField_WarningBackground: @sapField_WarningBackground;
   --sapField_SuccessColor: @sapField_SuccessColor;
   --sapField_SuccessBackground: @sapField_SuccessBackground;
-
-
+  --sapField_InformationColor: @sapField_InformationColor;
+  --sapField_InformationBackground: @sapField_InformationBackground;
 
   --sapGroup_TitleBackground: @sapGroup_TitleBackground;
   --sapGroup_ContentBackground: @sapGroup_ContentBackground;

diff --git a/packages/theme-base/src/themes/sap_fiori_3_dark/base-parameters.less b/packages/theme-base/src/themes/sap_fiori_3_dark/base-parameters.less
@@ -175,7 +175,8 @@
 @sapField_WarningBackground: @sapField_Background;
 @sapField_SuccessColor: @sapSuccessBorderColor;
 @sapField_SuccessBackground: @sapField_Background;
-
+@sapField_InformationColor: @sapInformationBorderColor;
+@sapField_InformationBackground: @sapField_Background;
 
 @sapGroup_TitleBackground: transparent;
 @sapGroup_ContentBackground: @sapBaseColor;