Skip to content

Commit ed9d74f

Browse files
ivoplashkovivoplashkov
authored
fix(ui5-textarea): prevent valueState if maxlenght is exceeded (#5237)
1 parent 090b7e4 commit ed9d74f

File tree

2 files changed

+24
-31
lines changed

2 files changed

+24
-31
lines changed

‎packages/main/src/TextArea.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -568,7 +568,7 @@ class TextArea extends UI5Element {
568568
return {
569569
valueStateMsg: {
570570
"ui5-valuestatemessage--error": this.valueState === ValueState.Error,
571-
"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning || this.exceeding,
571+
"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
572572
"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
573573
},
574574
};
@@ -639,7 +639,7 @@ class TextArea extends UI5Element {
639639
}
640640

641641
get displayValueStateMessagePopover() {
642-
return !this.readonly && (this.hasCustomValueState || this.hasValueState || this.exceeding);
642+
return !this.readonly && (this.hasCustomValueState || this.hasValueState);
643643
}
644644

645645
get hasCustomValueState() {
@@ -655,7 +655,7 @@ class TextArea extends UI5Element {
655655
}
656656

657657
get valueStateText() {
658-
if (this.valueState !== ValueState.Error && this.exceeding) {
658+
if (this.valueState !== ValueState.Error) {
659659
return this.valueStateTextMappings()[ValueState.Warning];
660660
}
661661

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

Lines changed: 21 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -38,20 +38,19 @@
3838
outline-offset: var(--_ui5_textarea_focus_outline_offset);
3939
}
4040

41-
:host([focused]:not([exceeding])) .ui5-textarea-inner {
41+
:host([focused]) .ui5-textarea-inner {
4242
background-color: var(--sapField_Focus_Background);
4343
background-image: none;
4444
box-shadow: var(--_ui5_textarea_focus_box_shadow);
4545
}
4646

47-
:host(:not([value-state]):not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
47+
:host(:not([value-state]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
4848
box-shadow: var(--_ui5_textarea_hover_box_shadow);
4949
background: var(--sapField_Hover_BackgroundStyle);
5050
background-color: var(--sapField_Hover_Background);
5151
}
5252

53-
:host([value-state]:not([value-state="None"])[focused]) .ui5-textarea-inner,
54-
:host([exceeding]) .ui5-textarea-inner {
53+
:host([value-state]:not([value-state="None"])[focused]) .ui5-textarea-inner {
5554
outline: var(--_ui5_textarea_value_state_focus_outline);
5655
outline-offset: var(--_ui5_textarea_value_state_focus_outline_offset);
5756
}
@@ -198,16 +197,15 @@
198197
font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight);
199198
}
200199

201-
:host(:not([value-state]):not([exceeding]):not([readonly]):hover) {
200+
:host(:not([value-state]):not([readonly]):hover) {
202201
border-color: var(--sapField_Hover_BorderColor);
203202
}
204203

205-
:host(:not([value-state]):not([exceeding]):not([readonly]):hover) .ui5-textarea-inner {
204+
:host(:not([value-state]):not([readonly]):hover) .ui5-textarea-inner {
206205
background-color: var(--sapField_Hover_Background);
207206
}
208207

209-
:host([value-state]:not([value-state="None"])) .ui5-textarea-inner,
210-
:host([exceeding]) .ui5-textarea-inner {
208+
:host([value-state]:not([value-state="None"])) .ui5-textarea-inner {
211209
border-width: var(--_ui5_textarea_state_border_width);
212210
}
213211

@@ -220,20 +218,17 @@
220218
font-weight: var(--_ui5_input_warning_font_weight);
221219
}
222220

223-
:host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner,
224-
:host([exceeding]) .ui5-textarea-inner {
221+
:host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner {
225222
background: var(--sapField_WarningBackgroundStyle);
226223
background-color: var(--sapField_WarningBackground);
227224
}
228225

229-
:host([value-state="Warning"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner,
230-
:host([exceeding]:not([focused]):hover) .ui5-textarea-inner {
226+
:host([value-state="Warning"]:not([readonly]):not([focused]):hover) .ui5-textarea-inner {
231227
box-shadow: var(--sapContent_Critical_Shadow);
232228
background-color: var(--sapField_Hover_Background);
233229
}
234230

235-
:host([value-state="Warning"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner,
236-
:host([exceeding][focused]) .ui5-textarea-inner {
231+
:host([value-state="Warning"][focused]:not([readonly])) .ui5-textarea-inner {
237232
background-image: none;
238233
box-shadow: var(--_ui5_textarea_value_state_warning_focus_box_shadow);
239234
background-color: var(--sapField_Focus_Background);
@@ -245,12 +240,12 @@
245240
background-color: var(--sapField_InvalidBackground);
246241
}
247242

248-
:host([value-state="Error"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
243+
:host([value-state="Error"]:not([readonly]):not([focused]):hover) .ui5-textarea-inner {
249244
box-shadow: var(--sapContent_Negative_Shadow);
250245
background-color: var(--_ui5_textarea_error_hover_background_color);
251246
}
252247

253-
:host([value-state="Error"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner {
248+
:host([value-state="Error"][focused]:not([readonly])) .ui5-textarea-inner {
254249
background-image: none;
255250
box-shadow: var(--_ui5_textarea_value_state_error_focus_box_shadow);
256251
background-color: var(--_ui5_textarea_error_focused_background_color);
@@ -261,12 +256,12 @@
261256
background-color: var(--sapField_InformationBackground);
262257
}
263258

264-
:host([value-state="Information"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
259+
:host([value-state="Information"]:not([readonly]):not([focused]):hover) .ui5-textarea-inner {
265260
box-shadow: var(--sapContent_Informative_Shadow);
266261
background-color: var(--sapField_Hover_Background);
267262
}
268263

269-
:host([value-state="Information"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner {
264+
:host([value-state="Information"][focused]:not([readonly])) .ui5-textarea-inner {
270265
background-image: none;
271266
box-shadow: var(--_ui5_textarea_focus_box_shadow);
272267
background-color: var(--sapField_Focus_Background);
@@ -277,12 +272,12 @@
277272
background-color: var(--sapField_SuccessBackground);
278273
}
279274

280-
:host([value-state="Success"]:not([exceeding]):not([readonly]):not([focused]):hover) .ui5-textarea-inner {
275+
:host([value-state="Success"]:not([readonly]):not([focused]):hover) .ui5-textarea-inner {
281276
box-shadow: var(--sapContent_Positive_Shadow);
282277
background-color: var(--sapField_Hover_Background);
283278
}
284279

285-
:host([value-state="Success"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner {
280+
:host([value-state="Success"][focused]:not([readonly])) .ui5-textarea-inner {
286281
background-image: none;
287282
box-shadow: var(--_ui5_textarea_value_state_success_focus_box_shadow);
288283
background-color: var(--sapField_Focus_Background);
@@ -302,30 +297,28 @@
302297
border-style: var(--_ui5_input_error_warning_border_style);
303298
}
304299

305-
:host([value-state="Warning"]:not([readonly])),
306-
:host([exceeding]) {
300+
:host([value-state="Warning"]:not([readonly])) {
307301
border-color: var(--sapField_WarningColor);
308302
}
309303

310-
:host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner,
311-
:host([exceeding]) .ui5-textarea-inner {
304+
:host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner {
312305
background-color: var(--sapField_WarningBackground);
313306
}
314307

315-
:host([value-state="Success"]:not([readonly]):not([exceeding])) {
308+
:host([value-state="Success"]:not([readonly])) {
316309
border-color: var(--sapField_SuccessColor);
317310
}
318311

319-
:host([value-state="Success"]:not([readonly]):not([exceeding])) .ui5-textarea-inner {
312+
:host([value-state="Success"]:not([readonly])) .ui5-textarea-inner {
320313
background-color: var(--sapField_SuccessBackground);
321314
border-width: var(--_ui5_textarea_success_border_width);
322315
}
323316

324-
:host([value-state="Information"]:not([readonly]):not([exceeding])) {
317+
:host([value-state="Information"]:not([readonly])) {
325318
border-color: var(--sapField_InformationColor);
326319
}
327320

328-
:host([value-state="Information"]:not([readonly]):not([exceeding])) .ui5-textarea-inner {
321+
:host([value-state="Information"]:not([readonly])) .ui5-textarea-inner {
329322
background-color: var(--sapField_InformationBackground);
330323
border-width: var(--_ui5_textarea_information_border_width);
331324
}

0 commit comments

Comments
 (0)