fix: form field validation for variants (#436)

* fix: invalid styling #419 #423 * docs: enabled invalid checkbox stylings
db-ui · May 15, 2023 · 3ef4231 · 3ef4231
1 parent 37f203b
commit 3ef4231
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 43 deletions.
diff --git a/source/_patterns/01-elements/_form-elements.scss b/source/_patterns/01-elements/_form-elements.scss
@@ -33,38 +33,6 @@
 	}
 }
 
-// Validation
-// We need to differentiate here for select elements, that we couldn't handle by :placeholder-shown
-// TODO: maybe we could totally restructure this, work with a :not(select) instead, differentiate in between user-invalid and provide a fallback (https://github.com/db-ui/mono/pull/893), etc.
-%form-element-validation {
-	// listing the relevant form attributes related to form validation
-	&:is(:required, [pattern], [min], [max], [step], [minlength], [maxlength]) {
-		&,
-		// workaround for the DB UI Core selectors
-		&[data-variant] {
-			&:not([aria-invalid]) {
-				&:not(:placeholder-shown) {
-					&:valid {
-						--formElement---borderColor: #{$db-color-green-600};
-					}
-
-					&:invalid {
-						--formElement---borderColor: #{$db-color-red-500};
-					}
-				}
-			}
-		}
-	}
-}
-%form-element-validation-programmatic {
-	&[aria-invalid="true"] {
-		&,
-		&[data-variant] {
-			--formElement---borderColor: #{$db-color-red-500};
-		}
-	}
-}
-
 // ### Style variations
 // Semitransparent
 %form-element-semitransparent {
@@ -114,3 +82,25 @@
 	border-right: $form-elements---borderRight;
 	border-top: $form-elements---borderTop;
 }
+
+// Validation
+// We need to differentiate here because of any non-textual input elements like select, radio and checkbox, that we couldn't handle by :placeholder-shown
+// TODO: maybe we could totally restructure this, work with a :not(select) instead, differentiate in between user-invalid and provide a fallback (https://github.com/db-ui/mono/pull/893), etc.
+%form-element-validation {
+	&:not([aria-invalid]) {
+		&:not(:placeholder-shown) {
+			&:valid {
+				--formElement---borderColor: #{$db-color-green-600};
+			}
+
+			&:invalid {
+				--formElement---borderColor: #{$db-color-red-500};
+			}
+		}
+	}
+}
+%form-element-validation-programmatic {
+	&[aria-invalid="true"] {
+		--formElement---borderColor: #{$db-color-red-500};
+	}
+}
diff --git a/source/_patterns/01-elements/checkbox/checkbox.hbs b/source/_patterns/01-elements/checkbox/checkbox.hbs
@@ -3,7 +3,8 @@
 	id="{{ id }}"{{#if checked}} checked{{/if }}
 	{{#if disabled}} disabled{{/if }}
 	value="{{ value }}"
-	{{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }}>
+	{{#if describedbyid }} aria-describedby="{{ describedbyid }}"{{/if }}
+	{{#if invalid }} aria-invalid="{{ invalid }}"{{/if }}>
 <label class="elm-label" for="{{ id }}">{{ label }}</label>
 {{#if indeterminate}}
 <script>

diff --git a/source/_patterns/01-elements/input/input.scss b/source/_patterns/01-elements/input/input.scss
@@ -107,11 +107,6 @@
 			color: $db-color-cool-gray-500;
 		}
 
-		/* stylelint-disable order/order */
-		@extend %form-element-validation;
-		@extend %form-element-validation-programmatic;
-		/* stylelint-enable order/order */
-
 		// ### Style variations
 		&[data-variant="semitransparent"] {
 			@extend %form-element-semitransparent;
@@ -128,6 +123,12 @@
 		&[data-variant="outline"] {
 			@extend %form-element-outline;
 		}
+
+		// Validation
+		/* stylelint-disable order/order */
+		@extend %form-element-validation;
+		@extend %form-element-validation-programmatic;
+		/* stylelint-enable order/order */
 	}
 
 	&[type="search"] {

diff --git a/source/_patterns/01-elements/textarea/textarea.scss b/source/_patterns/01-elements/textarea/textarea.scss
@@ -56,11 +56,6 @@
 		}
 	}
 
-	/* stylelint-disable order/order */
-	@extend %form-element-validation;
-	@extend %form-element-validation-programmatic;
-	/* stylelint-enable order/order */
-
 	// TODO: Evaluate whether those could get moved to ../_form-elements.scss
 	& + output {
 		// amount of signs output
@@ -94,4 +89,10 @@
 	&[data-variant="outline"] {
 		@extend %form-element-outline;
 	}
+
+	// Validation
+	/* stylelint-disable order/order */
+	@extend %form-element-validation;
+	@extend %form-element-validation-programmatic;
+	/* stylelint-enable order/order */
 }