Skip to content

Commit

Permalink
fix(ui5-textarea): prevent valueState if maxlenght is exceeded (#5237)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ivoplashkov
ivoplashkov authored May 18, 2022
1 parent 090b7e4 commit ed9d74f
Show file tree
Hide file tree
Showing 2 changed files with 24 additions and 31 deletions.
6 changes: 3 additions & 3 deletions packages/main/src/TextArea.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -568,7 +568,7 @@ class TextArea extends UI5Element {
return {
valueStateMsg: {
"ui5-valuestatemessage--error": this.valueState === ValueState.Error,
"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning || this.exceeding,
"ui5-valuestatemessage--warning": this.valueState === ValueState.Warning,
"ui5-valuestatemessage--information": this.valueState === ValueState.Information,
},
};
Expand Down Expand Up @@ -639,7 +639,7 @@ class TextArea extends UI5Element {
}

get displayValueStateMessagePopover() {
return !this.readonly && (this.hasCustomValueState || this.hasValueState || this.exceeding);
return !this.readonly && (this.hasCustomValueState || this.hasValueState);
}

get hasCustomValueState() {
Expand All @@ -655,7 +655,7 @@ class TextArea extends UI5Element {
}

get valueStateText() {
if (this.valueState !== ValueState.Error && this.exceeding) {
if (this.valueState !== ValueState.Error) {
return this.valueStateTextMappings()[ValueState.Warning];
}

Expand Down
49 changes: 21 additions & 28 deletions packages/main/src/themes/TextArea.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,20 +38,19 @@
outline-offset: var(--_ui5_textarea_focus_outline_offset);
}

:host([focused]:not([exceeding])) .ui5-textarea-inner {
:host([focused]) .ui5-textarea-inner {
background-color: var(--sapField_Focus_Background);
background-image: none;
box-shadow: var(--_ui5_textarea_focus_box_shadow);
}

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

:host([value-state]:not([value-state="None"])[focused]) .ui5-textarea-inner,
:host([exceeding]) .ui5-textarea-inner {
:host([value-state]:not([value-state="None"])[focused]) .ui5-textarea-inner {
outline: var(--_ui5_textarea_value_state_focus_outline);
outline-offset: var(--_ui5_textarea_value_state_focus_outline_offset);
}
Expand Down Expand Up @@ -198,16 +197,15 @@
font-weight: var(--_ui5_textarea_value_state_error_warning_placeholder_font_weight);
}

:host(:not([value-state]):not([exceeding]):not([readonly]):hover) {
:host(:not([value-state]):not([readonly]):hover) {
border-color: var(--sapField_Hover_BorderColor);
}

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

:host([value-state]:not([value-state="None"])) .ui5-textarea-inner,
:host([exceeding]) .ui5-textarea-inner {
:host([value-state]:not([value-state="None"])) .ui5-textarea-inner {
border-width: var(--_ui5_textarea_state_border_width);
}

Expand All @@ -220,20 +218,17 @@
font-weight: var(--_ui5_input_warning_font_weight);
}

:host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner,
:host([exceeding]) .ui5-textarea-inner {
:host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner {
background: var(--sapField_WarningBackgroundStyle);
background-color: var(--sapField_WarningBackground);
}

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

:host([value-state="Warning"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner,
:host([exceeding][focused]) .ui5-textarea-inner {
:host([value-state="Warning"][focused]:not([readonly])) .ui5-textarea-inner {
background-image: none;
box-shadow: var(--_ui5_textarea_value_state_warning_focus_box_shadow);
background-color: var(--sapField_Focus_Background);
Expand All @@ -245,12 +240,12 @@
background-color: var(--sapField_InvalidBackground);
}

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

:host([value-state="Error"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner {
:host([value-state="Error"][focused]:not([readonly])) .ui5-textarea-inner {
background-image: none;
box-shadow: var(--_ui5_textarea_value_state_error_focus_box_shadow);
background-color: var(--_ui5_textarea_error_focused_background_color);
Expand All @@ -261,12 +256,12 @@
background-color: var(--sapField_InformationBackground);
}

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

:host([value-state="Information"][focused]:not([exceeding]):not([readonly])) .ui5-textarea-inner {
:host([value-state="Information"][focused]:not([readonly])) .ui5-textarea-inner {
background-image: none;
box-shadow: var(--_ui5_textarea_focus_box_shadow);
background-color: var(--sapField_Focus_Background);
Expand All @@ -277,12 +272,12 @@
background-color: var(--sapField_SuccessBackground);
}

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

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

:host([value-state="Warning"]:not([readonly])),
:host([exceeding]) {
:host([value-state="Warning"]:not([readonly])) {
border-color: var(--sapField_WarningColor);
}

:host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner,
:host([exceeding]) .ui5-textarea-inner {
:host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner {
background-color: var(--sapField_WarningBackground);
}

:host([value-state="Success"]:not([readonly]):not([exceeding])) {
:host([value-state="Success"]:not([readonly])) {
border-color: var(--sapField_SuccessColor);
}

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

:host([value-state="Information"]:not([readonly]):not([exceeding])) {
:host([value-state="Information"]:not([readonly])) {
border-color: var(--sapField_InformationColor);
}

:host([value-state="Information"]:not([readonly]):not([exceeding])) .ui5-textarea-inner {
:host([value-state="Information"]:not([readonly])) .ui5-textarea-inner {
background-color: var(--sapField_InformationBackground);
border-width: var(--_ui5_textarea_information_border_width);
}
Expand Down

0 comments on commit ed9d74f

Please sign in to comment.