fix invalid border not showing (hybrid version)

BrightspaceUI · Feb 13, 2019 · 5bdfa49 · 5bdfa49
1 parent 804b74a
commit 5bdfa49
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/d2l-input-shared-styles.html b/d2l-input-shared-styles.html
@@ -16,9 +16,11 @@
 				--d2l-input-padding-focus: calc(0.4rem - 1px) calc(0.75rem - 1px);
 				--d2l-input-color: var(--d2l-color-ferrite);
 				--d2l-input-placeholder-color: var(--d2l-color-mica);
+
 				--d2l-input-common: {
 					border-radius: var(--d2l-input-border-radius);
 					border-style: solid;
+					border-color: var(--d2l-input-border-color);
 					box-sizing: border-box;
 					display: inline-block;
 					margin: 0;
@@ -115,12 +117,14 @@
 			textarea.d2l-input:hover, textarea.d2l-input:focus {
 				@apply --d2l-input-hover-focus;
 			}
-			input.d2l-input[aria-invalid='true'],
+			input[aria-invalid="true"].d2l-input,
+			input[aria-invalid="true"].d2l-input:hover,
+			input[aria-invalid="true"].d2l-input:focus,
 			input[type="text"].d2l-input:invalid, input[type="search"].d2l-input:invalid,
 			input[type="tel"].d2l-input:invalid, input[type="url"].d2l-input:invalid,
 			input[type="email"].d2l-input:invalid, input[type="password"].d2l-input:invalid,
 			input[type="number"].d2l-input:invalid,
-			textarea.d2l-input[aria-invalid='true'], textarea.d2l-input:invalid {
+			textarea[aria-invalid='true'].d2l-input, textarea.d2l-input:invalid {
 				@apply --d2l-input-invalid;
 			}
 			input[type="text"].d2l-input:hover:disabled, input[type="search"].d2l-input:hover:disabled,

diff --git a/demo/d2l-input-text.html b/demo/d2l-input-text.html
@@ -50,6 +50,13 @@ <h3>Invalid</h3>
 					<d2l-input-text type="email" value="foo@"></d2l-input-text>
 				</template>
 			</demo-snippet>
+
+			<h3>Aria-Invalid</h3>
+			<demo-snippet>
+				<template>
+					<d2l-input-text type="text" aria-invalid="true"></d2l-input-text>
+				</template>
+			</demo-snippet>
 		</div>
 		<script>
 			document.body.addEventListener('change', function(e) {