From db67090489bef9570abd768f661f2d35d7475db8 Mon Sep 17 00:00:00 2001 From: Martin Date: Wed, 31 Jul 2024 16:42:35 +0300 Subject: [PATCH] fix(ui5-textarea): fix negative textarea growing (#8883) FIXES: #8767 --- packages/main/src/themes/TextArea.css | 37 ++++++++------------------ packages/main/test/pages/TextArea.html | 7 ++++- 2 files changed, 17 insertions(+), 27 deletions(-) diff --git a/packages/main/src/themes/TextArea.css b/packages/main/src/themes/TextArea.css index 6a9d7660290e..3249595ce049 100644 --- a/packages/main/src/themes/TextArea.css +++ b/packages/main/src/themes/TextArea.css @@ -49,7 +49,6 @@ border-radius: inherit; border-color: inherit; position: relative; - outline: none; } .ui5-textarea-wrapper { @@ -142,7 +141,7 @@ :host([growing]) .ui5-textarea-inner { box-sizing: border-box; height: 100%; - position: absolute; + position: absolute; top: 0; left: 0; } @@ -183,34 +182,28 @@ } :host([growing-max-rows]:not([growing-max-rows="0"])) .ui5-textarea-mirror { - max-height: calc((var(--_textarea_growing_max_rows) * var(--_ui5_textarea_line_height)) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom)); + max-height: calc((var(--_textarea_growing_max_rows) * var(--_ui5_textarea_line_height)) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom)); } :host([rows="1"]) .ui5-textarea-inner { - min-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom)); + min-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom)); } :host([growing-max-rows="1"]) .ui5-textarea-inner, :host([growing-max-rows="1"]) .ui5-textarea-mirror { - max-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom)); - min-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom)); + max-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom)); + min-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom)); } :host([rows="1"][growing-max-rows]) .ui5-textarea-inner, :host([rows="1"][growing-max-rows]) .ui5-textarea-mirror { - min-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom)); - max-height: calc((var(--_textarea_growing_max_rows) * var(--_ui5_textarea_line_height)) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom)); -} - -:host([rows="1"][value-state="Negative"]:not([readonly]):not([disabled])) .ui5-textarea-inner, -:host([rows="1"][value-state="Critical"]:not([readonly]):not([disabled])) .ui5-textarea-inner { - height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_error_warning)); - min-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_error_warning)); + min-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom)); + max-height: calc((var(--_textarea_growing_max_rows) * var(--_ui5_textarea_line_height)) * var(--sapFontSize) + var(--_ui5_textarea_padding_top) + var(--_ui5_textarea_padding_bottom)); } :host([value-state="Negative"]) .ui5-textarea-mirror, :host([value-state="Critical"]) .ui5-textarea-mirror { padding-top: var(--_ui5_textarea_padding_top_error_warning); padding-bottom: var(--_ui5_textarea_padding_bottom_error_warning); - min-height: calc(var(--_textarea_rows) * var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_error_warning)); + min-height: calc(var(--_textarea_rows) * var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_error_warning) + var(--_ui5_textarea_padding_bottom_error_warning)); } :host([growing-max-rows="1"][value-state="Negative"]) .ui5-textarea-inner, :host([growing-max-rows="1"][value-state="Negative"]) .ui5-textarea-mirror @@ -222,12 +215,7 @@ :host([value-state="Information"]) .ui5-textarea-mirror { padding-top: var(--_ui5_textarea_padding_top_information); padding-bottom: var(--_ui5_textarea_padding_bottom_information); - min-height: calc(var(--_textarea_rows) * var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_information) + var(--_ui5_textarea_padding_bottom_information)); -} - -:host([rows="1"][value-state="Information"]:not([readonly]):not([disabled])) .ui5-textarea-inner { - height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_information) + var(--_ui5_textarea_padding_bottom_information)); - min-height: calc(var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_information) + var(--_ui5_textarea_padding_bottom_information)); + min-height: calc(var(--_textarea_rows) * var(--_ui5_textarea_line_height) * var(--sapFontSize) + var(--_ui5_textarea_padding_top_information) + var(--_ui5_textarea_padding_bottom_information)); } :host([growing-max-rows="1"][value-state="Information"]) .ui5-textarea-inner, :host([growing-max-rows="1"][value-state="Information"]) .ui5-textarea-mirror { @@ -401,6 +389,8 @@ border-color: var(--sapField_InformationColor); box-shadow: var(--sapField_InformationShadow); padding: var(--_ui5_textarea_information_wrapper_padding); + border-width: var(--_ui5_textarea_information_border_width); + border-style: var(--_ui5_textarea_error_warning_border_style); } :host([value-state="Information"][focused]:not([readonly])) .ui5-textarea-wrapper { @@ -408,11 +398,6 @@ border-color: var(--sapField_InformationColor); } -:host([value-state="Information"]:not([readonly]):not([disabled])) .ui5-textarea-wrapper { - border-width: var(--_ui5_textarea_information_border_width); - border-style: var(--_ui5_textarea_error_warning_border_style); -} - :host([value-state="Information"]:not([readonly]):not([disabled]):not([focused]):hover) .ui5-textarea-wrapper { background-color: var(--sapField_Hover_Background); box-shadow: var(--sapField_Hover_InformationShadow); diff --git a/packages/main/test/pages/TextArea.html b/packages/main/test/pages/TextArea.html index f8e75488522d..d5bee0c0ec28 100644 --- a/packages/main/test/pages/TextArea.html +++ b/packages/main/test/pages/TextArea.html @@ -39,7 +39,12 @@
Value State Message
- + +
Information message. This is a Link. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.
+ + +
+
Information message. This is a Link. Extra long text used as an information message. Extra long text used as an information message - 2. Extra long text used as an information message - 3.