fix(ui5-textarea): fix bg-color in IE (#1210)

- All themes and browsers: readonly textarea does not change its background on hover - Quartz Dark and IE: the textarea has proper dark background, not a white one as used to.
SAP · Feb 14, 2020 · c047da7 · c047da7
1 parent 5d4e594
commit c047da7
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 43 deletions.
diff --git a/packages/main/src/themes/TextArea.css b/packages/main/src/themes/TextArea.css
@@ -8,6 +8,7 @@
 	background-color: var(--sapField_Background);
 	font-size: var(--sapFontMediumSize);
 	font-family: var(--sapFontFamily);
+	border: 1px solid var(--sapField_BorderColor);
 	border-radius: var(--_ui5_input_wrapper_border_radius);
 	box-sizing: border-box;
 }
@@ -51,15 +52,15 @@
 	line-height: 1.4;
 	box-sizing: border-box;
 	color: inherit;
-	background: inherit;
 	font-size: inherit;
 	font-family: inherit;
 	-webkit-appearance: none;
 	-moz-appearance: textfield;
 	overflow: auto;
 	resize: none;
-    border: 1px solid var(--sapField_BorderColor);
-    border-radius: inherit;
+	border: inherit;
+	border-radius: inherit;
+	background: transparent;
 }
 
 :host([growing]) .ui5-textarea-root {
@@ -113,13 +114,13 @@
 	color: var(--sapField_PlaceholderTextColor);
 }
 
-:host(:not([value-state]):not([exceeding]):hover) .ui5-textarea-inner {
+:host(:not([value-state]):not([exceeding]):not([readonly]):hover) {
 	background-color: var(--sapField_Hover_Background);
 	border-color: var(--sapField_Hover_BorderColor);
 }
 
-:host([value-state]:not([value-state="None"])) .ui5-textarea-inner,
-:host([exceeding]) .ui5-textarea-inner {
+:host([value-state]:not([value-state="None"])),
+:host([exceeding]) {
 	border-width: var(--_ui5_input_state_border_width);
 }
 
@@ -132,23 +133,23 @@
 	font-weight: var(--_ui5_input_error_font_weight);
 }
 
-:host([value-state="Error"]:not([readonly])) .ui5-textarea-inner {
+:host([value-state="Error"]:not([readonly])) {
 	background-color: var(--sapField_InvalidBackground);
 	border-color: var(--sapField_InvalidColor);
 }
 
-:host([value-state="Error"]:not([readonly]):not([disabled])) .ui5-textarea-inner,
-:host([value-state="Warning"]:not([readonly]):not([disabled])) .ui5-textarea-inner {
+:host([value-state="Error"]:not([readonly]):not([disabled])),
+:host([value-state="Warning"]:not([readonly]):not([disabled])) {
 	border-style: var(--_ui5_input_error_warning_border_style);
 }
 
-:host([value-state="Warning"]:not([readonly])) .ui5-textarea-inner,
-:host([exceeding]) .ui5-textarea-inner {
+:host([value-state="Warning"]:not([readonly])),
+:host([exceeding]) {
 	background-color: var(--sapField_WarningBackground);
 	border-color: var(--sapField_WarningColor);
 }
 
-:host([value-state="Success"]:not([readonly])) .ui5-textarea-inner {
+:host([value-state="Success"]:not([readonly])) {
 	background-color: var(--sapField_SuccessBackground);
 	border-color: var(--sapField_SuccessColor);
 }

diff --git a/packages/main/test/pages/TextArea.html b/packages/main/test/pages/TextArea.html
@@ -37,20 +37,8 @@
 			background: #3f5161;
 		}
 
-		.header-title {
-			color: #fafafa;
-			margin: 0;
-			padding: 0;
-			line-height: 3rem;
-			font-size: 1.375rem;
-			font-weight: normal;
-			text-shadow: 0 0 0.125rem #ffffff;
-			font-family: "72", Arial, Helvetica, sans-serif;
-		}
-
 		.group {
 			padding: 1rem;
-			background: #fafafa;
 		}
 
 		.group-title {
@@ -61,10 +49,6 @@
 			margin: 2px;
 		}
 
-		.group_colored {
-			background: #eff4f9;
-		}
-
 		.fixed-width {
 			display: inline-block;
 			width: 280px;
@@ -79,11 +63,11 @@
 	<body style="background-color: var(--sapBackgroundColor);">
 
 	<header class="header">
-		<h2 class="header-title">Evoground</h2>
+		<ui5-title class="header-title">Evoground</ui5-title>
 	</header>
 
 	<section class="group">
-			<h2>Simple TextArea</h2>
+			<ui5-title>Simple TextArea</ui5-title>
 			<ui5-textarea id="basic-textarea" placeholder="Basic text area"></ui5-textarea>
 
 			<br>
@@ -102,7 +86,7 @@ <h2>Simple TextArea</h2>
 		</section>
 
 	<section class="group">
-		<h2>TextArea with value</h2>
+		<ui5-title>TextArea with value</ui5-title>
 		<ui5-textarea id="fix-width-textarea" class="fixed-width" rows="8" value="Lorem ipsum dolor st amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
 		magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd
 		gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing
@@ -112,65 +96,65 @@ <h2>TextArea with value</h2>
 	</section>
 
 	<section class="group">
-		<h2>Disabled TextArea</h2>
+		<ui5-title>Disabled TextArea</ui5-title>
 		<ui5-textarea id="disabled-textarea" class="fixed-width" disabled placeholder="Example of disabled text area"></ui5-textarea>
 	</section>
 
 	<section class="group">
-		<h2>Readonly TextArea</h2>
+		<ui5-title>Readonly TextArea</ui5-title>
 		<ui5-textarea id="readonly-textarea" class="fixed-width" readonly placeholder="Example of a read-only text area"></ui5-textarea>
 	</section>
 
 	<section class="group">
-		<h2>Required TextArea</h2>
+		<ui5-title>Required TextArea</ui5-title>
 		<ui5-textarea id="required-textarea" class="fixed-width" required placeholder="Example of a required text area"></ui5-textarea>
 	</section>
 
 	<section class="group">
-		<h2>Text Area: Growing</h2>
+		<ui5-title>Text Area: Growing</ui5-title>
 		<ui5-textarea class="fixed-width" growing placeholder="Growing Text Area"></ui5-textarea>
 	</section>
 
 	<section class="group">
-		<h2>Text Area: Growing with 8 initial rows</h2>
+		<ui5-title>Text Area: Growing with 8 initial rows</ui5-title>
 		<ui5-textarea id="eight-rows-textarea" class="fixed-width" growing placeholder="Growing Text Area" rows="8"></ui5-textarea>
 	</section>
 
 	<section class="group">
-		<h2>Text Area: Growing up to 4</h2>
+		<ui5-title>Text Area: Growing up to 4</ui5-title>
 		<ui5-textarea id="growing-ta-to-four" class="fixed-width" growing-max-lines="4" growing placeholder="Growing Text Area"></ui5-textarea>
 	</section>
 
 	<section class="group">
-		<h2>Text Area: Growing with initial rows 4 and growing up to 12</h2>
+		<ui5-title>Text Area: Growing with initial rows 4 and growing up to 12</ui5-title>
 		<ui5-textarea class="fixed-width" growing placeholder="Growing Text Area" growing-max-lines="12" rows="4"></ui5-textarea>
 	</section>
 
 	<section class="group">
-		<h2>Text Area: growing with max length 20 characters </h2>
+		<ui5-title>Text Area: growing with max length 20 characters </ui5-title>
 		<ui5-textarea id="ta-max-length" class="fixed-width" growing maxlength="20" placeholder="Max length"></ui5-textarea>
 	</section>
 
 	<section class="group">
-		<h2>Text Area: max length 20 characters </h2>
+		<ui5-title>Text Area: max length 20 characters </ui5-title>
 		<ui5-textarea class="fixed-width" maxlength="20" placeholder="Max length"></ui5-textarea>
 	</section>
 
 	<section class="group">
-		<h2>Text Area: showExceededText with maxlength</h2>
+		<ui5-title>Text Area: showExceededText with maxlength</ui5-title>
 		<ui5-textarea id="show-max-length" class="fixed-width fixed-height" maxlength="20" show-exceeded-text placeholder="Max length and Show Exceeded Text"></ui5-textarea>
 	</section>
 
 	<section class="group">
-		<h2>Text Area: change event</h2>
+		<ui5-title>Text Area: change event</ui5-title>
 		<ui5-textarea id="textarea-change" class="fixed-width fixed-height" placeholder="Test change event"></ui5-textarea>
 	</section>
 	<section class="group">
 		<ui5-input id="changeResult" class="fixed-width"></ui5-input>
 	</section>
 
 	<section class="group">
-		<h2>Text Area: input event</h2>
+		<ui5-title>Text Area: input event</ui5-title>
 		<ui5-textarea id="textarea-input" class="fixed-width fixed-height" placeholder="Test input event"></ui5-textarea>
 	</section>
 	<section class="group">