Skip to content

Commit 77f7293

Browse files
ilhan007ilhan007
authored
feat(ui5-input): provide "Information" value state (#1261)
1 parent 6a72021 commit 77f7293

17 files changed

+71
-3
lines changed

‎packages/base/src/types/ValueState.js

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ const ValueStates = {
88
Success: "Success",
99
Warning: "Warning",
1010
Error: "Error",
11+
Information: "Information",
1112
};
1213

1314
class ValueState extends DataType {

‎packages/main/src/themes/Input.css

+6
Original file line numberDiff line numberDiff line change
@@ -163,6 +163,12 @@
163163
:host([value-state="Success"]:not([readonly])) {
164164
background-color: var(--sapField_SuccessBackground);
165165
border-color: var(--sapField_SuccessColor);
166+
border-width: 1px;
167+
}
168+
169+
:host([value-state="Information"]:not([readonly])) {
170+
background-color: var(--sapField_InformationBackground);
171+
border-color: var(--sapField_InformationColor);
166172
}
167173

168174
/* Remove IE's defaut clear button */

‎packages/main/src/themes/TextArea.css

+8
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,14 @@
177177
border-width: 1px;
178178
}
179179

180+
:host([value-state="Information"]:not([readonly])) {
181+
border-color: var(--sapField_InformationColor);
182+
}
183+
184+
:host([value-state="Information"]:not([readonly])) .ui5-textarea-inner {
185+
background-color: var(--sapField_InformationBackground);
186+
}
187+
180188
.ui5-textarea-exceeded-text {
181189
overflow: hidden;
182190
align-self: flex-end;

‎packages/main/test/pages/Input.html

+20
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,11 @@ <h3> Input valueState Success</h3>
6363
<ui5-icon slot="icon" name="message-success"></ui5-icon>
6464
</ui5-input>
6565

66+
<h3> Input valueState Information</h3>
67+
<ui5-input value-state="Information" placeholder="Info state ...">
68+
<ui5-icon slot="icon" name="message-information"></ui5-icon>
69+
</ui5-input>
70+
6671
<h3> Test 'change' event</h3>
6772
<ui5-input id="input1" value-state="Warning" placeholder="Warning state ...">
6873
<ui5-icon slot="icon" name="message-warning"></ui5-icon>
@@ -119,6 +124,12 @@ <h3> Inputs alignment</h3>
119124
title='Delivery Date!'>
120125
</ui5-datepicker>
121126

127+
<ui5-datepicker
128+
placeholder='Delivery Date...'
129+
value-state="Information"
130+
title='Delivery Date!'>
131+
</ui5-datepicker>
132+
122133
<ui5-select id="mySelect2">
123134
<ui5-option>Cozy</ui5-option>
124135
<ui5-option selected>Compact</ui5-option>
@@ -128,12 +139,21 @@ <h3> Inputs alignment</h3>
128139
<ui5-input value="input" value-state="Error">
129140
<ui5-icon slot="icon" name="message-warning"></ui5-icon>
130141
</ui5-input>
142+
131143
<ui5-select id="mySelect2" value-state="Error">
132144
<ui5-option>Cozy</ui5-option>
133145
<ui5-option selected>Compact</ui5-option>
134146
<ui5-option>Condensed</ui5-option>
135147
</ui5-select>
148+
149+
<ui5-select value-state="Information">
150+
<ui5-option>Cozy</ui5-option>
151+
<ui5-option selected>Compact</ui5-option>
152+
<ui5-option>Condensed</ui5-option>
153+
</ui5-select>
154+
136155
<ui5-multi-combobox value-state="Error"></ui5-multi-combobox>
156+
<ui5-multi-combobox value-state="Information"></ui5-multi-combobox>
137157

138158
<h3> Input with multiple icons</h3>
139159
<ui5-input id="input3" placeholder="Search ...">

‎packages/main/test/pages/TextArea.html

+4
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,10 @@
8383
<ui5-textarea id="basic-textarea-success" value="Test" value-state="Success"></ui5-textarea>
8484
<br>
8585
<br>
86+
87+
<br>
88+
<br>
89+
<ui5-textarea id="basic-textarea-error" value="Test" value-state="Information"></ui5-textarea>
8690
</section>
8791

8892
<section class="group">

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

+2
Original file line numberDiff line numberDiff line change
@@ -120,11 +120,13 @@ <h3>Input with Value State</h3>
120120
<ui5-input class="samples-margin samples-responsive-margin-bottom" value="Success" value-state="Success"></ui5-input>
121121
<ui5-input class="samples-margin samples-responsive-margin-bottom" value="Warning" value-state="Warning"></ui5-input>
122122
<ui5-input class="samples-margin samples-responsive-margin-bottom" value="Error" value-state="Error"></ui5-input>
123+
<ui5-input class="samples-margin samples-responsive-margin-bottom" value="Information" value-state="Information"></ui5-input>
123124
</div>
124125
<pre class="prettyprint lang-html"><xmp>
125126
<ui5-input value="Success" value-state="Success"></ui5-input>
126127
<ui5-input value="Warning" value-state="Warning"></ui5-input>
127128
<ui5-input value="Error" value-state="Error"></ui5-input>
129+
<ui5-input class="samples-margin samples-responsive-margin-bottom" value="Information" value-state="Information"></ui5-input>
128130
</xmp></pre>
129131
</section>
130132

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

+10
Original file line numberDiff line numberDiff line change
@@ -69,6 +69,11 @@ <h3>Select with Value State</h3>
6969
<ui5-option icon="meal">Tomato</ui5-option>
7070
<ui5-option icon="meal" selected>Red Chili Pepper</ui5-option>
7171
</ui5-select>
72+
<ui5-select value-state="Information" class="select">
73+
<ui5-option icon="meal">Blueberry</ui5-option>
74+
<ui5-option icon="meal">Grape</ui5-option>
75+
<ui5-option icon="meal" selected>Plum</ui5-option>
76+
</ui5-select>
7277
</div>
7378
<pre class="prettyprint lang-html"><xmp>
7479
<ui5-select value-state="Success" class="select">
@@ -85,6 +90,11 @@ <h3>Select with Value State</h3>
8590
<ui5-option icon="meal">Strawberry</ui5-option>
8691
<ui5-option icon="meal">Tomato</ui5-option>
8792
<ui5-option icon="meal" selected>Red Chili Pepper</ui5-option>
93+
</ui5-select>
94+
<ui5-select value-state="Information" class="select">
95+
<ui5-option icon="meal">Blueberry</ui5-option>
96+
<ui5-option icon="meal">Grape</ui5-option>
97+
<ui5-option icon="meal" selected>Plum</ui5-option>
8898
</ui5-select>
8999
</xmp></pre>
90100
</section>

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

+2
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,8 @@
176176
--sapField_SuccessColor: @sapField_SuccessColor;
177177
--sapField_SuccessBackground: @sapField_SuccessBackground;
178178
--sapField_PlaceholderTextColor: @sapField_PlaceholderTextColor;
179+
--sapField_InformationColor: @sapField_InformationColor;
180+
--sapField_InformationBackground: @sapField_InformationBackground;
179181

180182
--sapGroup_TitleBackground: @sapGroup_TitleBackground;
181183
--sapGroup_BorderWidth: @sapGroup_BorderWidth;

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

+2
Original file line numberDiff line numberDiff line change
@@ -183,6 +183,8 @@
183183
@sapField_SuccessBackground: @sapField_Background;
184184
@sapField_ReadOnly_Background: fade(darken(@sapField_Background, 5), 50);
185185
@sapField_PlaceholderTextColor: lighten(@sapField_TextColor, 46);
186+
@sapField_InformationColor: @sapInformationBorderColor;
187+
@sapField_InformationBackground: @sapField_Background;
186188

187189
@sapGroup_TitleBackground: transparent;
188190
@sapGroup_BorderWidth: @sapElement_BorderWidth;

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

+2
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,8 @@
203203
--sapField_SuccessColor: @sapField_SuccessColor;
204204
--sapField_SuccessBackground: @sapField_SuccessBackground;
205205
--sapField_PlaceholderTextColor: @sapField_PlaceholderTextColor;
206+
--sapField_InformationColor: @sapField_InformationColor;
207+
--sapField_InformationBackground: @sapField_InformationBackground;
206208

207209
--sapGroup_TitleBackground: @sapGroup_TitleBackground;
208210
--sapGroup_TitleBorderColor: @sapGroup_TitleBorderColor;

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

+2
Original file line numberDiff line numberDiff line change
@@ -204,6 +204,8 @@
204204
@sapField_SuccessColor: @sapField_BorderColor;
205205
@sapField_SuccessBackground: @sapField_Background;
206206
@sapField_PlaceholderTextColor: @sapField_TextColor;
207+
@sapField_InformationColor: @sapInformationBorderColor;
208+
@sapField_InformationBackground: @sapField_Background;
207209

208210
@sapGroup_TitleBackground: @sapBackgroundColor;
209211
@sapGroup_TitleBorderColor: @sapHC_StandardForeground;

‎packages/theme-base/src/themes/sap_belize_hcw/base-parameters-vars.less

+2
Original file line numberDiff line numberDiff line change
@@ -203,6 +203,8 @@
203203
--sapField_SuccessColor: @sapField_SuccessColor;
204204
--sapField_SuccessBackground: @sapField_SuccessBackground;
205205
--sapField_PlaceholderTextColor: @sapField_PlaceholderTextColor;
206+
--sapField_InformationColor: @sapField_InformationColor;
207+
--sapField_InformationBackground: @sapField_InformationBackground;
206208

207209
--sapGroup_TitleBackground: @sapGroup_TitleBackground;
208210
--sapGroup_TitleBorderColor: @sapGroup_TitleBorderColor;

‎packages/theme-base/src/themes/sap_belize_hcw/base-parameters.less

+2
Original file line numberDiff line numberDiff line change
@@ -205,6 +205,8 @@
205205
@sapField_SuccessColor: @sapField_BorderColor;
206206
@sapField_SuccessBackground: @sapField_Background;
207207
@sapField_PlaceholderTextColor: @sapField_TextColor;
208+
@sapField_InformationColor: @sapInformationBorderColor;
209+
@sapField_InformationBackground: @sapField_Background;
208210

209211
@sapGroup_TitleBackground: @sapBackgroundColor;
210212
@sapGroup_TitleBorderColor: @sapHC_StandardForeground;

‎packages/theme-base/src/themes/sap_fiori_3/base-parameters-vars.less

+2
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,8 @@
125125
--sapField_WarningBackground: @sapField_WarningBackground;
126126
--sapField_SuccessColor: @sapField_SuccessColor;
127127
--sapField_SuccessBackground: @sapField_SuccessBackground;
128+
--sapField_InformationColor: @sapField_InformationColor;
129+
--sapField_InformationBackground: @sapField_InformationBackground;
128130

129131
--sapGroup_TitleBackground: @sapGroup_TitleBackground;
130132

‎packages/theme-base/src/themes/sap_fiori_3/base-parameters.less

+2
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,8 @@
125125
@sapField_WarningBackground: @sapField_Background;
126126
@sapField_SuccessColor: @sapSuccessBorderColor;
127127
@sapField_SuccessBackground: @sapField_Background;
128+
@sapField_InformationColor: @sapInformationBorderColor;
129+
@sapField_InformationBackground: @sapField_Background;
128130

129131
@sapGroup_TitleBackground: transparent;
130132
@sapGroup_ContentBackground: @sapBaseColor;

‎packages/theme-base/src/themes/sap_fiori_3_dark/base-parameters-vars.less

+2-2
Original file line numberDiff line numberDiff line change
@@ -169,8 +169,8 @@
169169
--sapField_WarningBackground: @sapField_WarningBackground;
170170
--sapField_SuccessColor: @sapField_SuccessColor;
171171
--sapField_SuccessBackground: @sapField_SuccessBackground;
172-
173-
172+
--sapField_InformationColor: @sapField_InformationColor;
173+
--sapField_InformationBackground: @sapField_InformationBackground;
174174

175175
--sapGroup_TitleBackground: @sapGroup_TitleBackground;
176176
--sapGroup_ContentBackground: @sapGroup_ContentBackground;

‎packages/theme-base/src/themes/sap_fiori_3_dark/base-parameters.less

+2-1
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,8 @@
175175
@sapField_WarningBackground: @sapField_Background;
176176
@sapField_SuccessColor: @sapSuccessBorderColor;
177177
@sapField_SuccessBackground: @sapField_Background;
178-
178+
@sapField_InformationColor: @sapInformationBorderColor;
179+
@sapField_InformationBackground: @sapField_Background;
179180

180181
@sapGroup_TitleBackground: transparent;
181182
@sapGroup_ContentBackground: @sapBaseColor;

0 commit comments

Comments
 (0)