fix: issue with user-valid for form-components

db-ui · Apr 11, 2024 · 72b081e · 72b081e
1 parent e6f091d
commit 72b081e
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 33 deletions.
diff --git a/packages/components/src/components/checkbox/checkbox.scss b/packages/components/src/components/checkbox/checkbox.scss
@@ -6,7 +6,7 @@
 @use "../../styles/form-components";
 
 .db-checkbox {
-	@extend %check-element;
+	@include form-components.set-default-check-element(check);
 
 	input {
 		border-radius: variables.$db-border-radius-sm;

diff --git a/packages/components/src/components/radio/radio.scss b/packages/components/src/components/radio/radio.scss
@@ -3,7 +3,7 @@
 @use "../../styles/form-components";
 
 .db-radio {
-	@extend %check-element;
+	@include form-components.set-default-check-element(radio);
 
 	input {
 		border-color: currentColor;

diff --git a/packages/components/src/styles/_form-components.scss b/packages/components/src/styles/_form-components.scss
@@ -136,33 +136,24 @@ $floating-label-size: calc(
 	}
 }
 
-@function get-validations($selector, $key) {
-	$has-selectors: "";
+// This doesn't contain text, search and password, because they don't have an auto-validation
+$input-valid-types: "color", "date", "datetime-local", "email", "file", "hidden",
+	"month", "number", "range", "tel", "time", "url", "week";
 
+@function get-validations($selector, $key) {
 	$validations: ":required";
-	$user: "user-";
-
-	// Differentiating form elements
-	@if ($selector == select or $selector == check) {
-		$user: "";
-	} @else {
-		// TODO: add validations for input & textarea as well
-		//  https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation
-		$validations: ":required";
-	}
 
-	// We need to do a more complicated check for non-typed-input-elements
 	@if ($selector == input) {
-		$validations: ':not([type="text"], [type="password"], [type="search"]),:is([type="text"], [type="password"], [type="search"]):required';
-	}
-
-	// Check elements (radio and checkbox) should get selected by their native HTML tag `input`
-	@if ($selector == check) {
-		$selector: input;
+		// https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation#using_built-in_form_validation
+		$validations: ":required, [minlength], [maxlength], [pattern]";
+		@each $type in $input-valid-types {
+			$validations: $validations + ", [type=#{$type}]";
+		}
+	} @else if($selector == textarea) {
+		$validations: ":required, [minlength], [maxlength]";
 	}
 
-	$has-selectors: $has-selectors +
-		"&:has(#{$selector}:not([aria-invalid]):is(#{$validations}):#{$user}#{$key}),";
+	$has-selectors: "&:has(#{$selector}:not([aria-invalid]):is(#{$validations}):user-#{$key}),";
 
 	@return string.unquote(string.slice($has-selectors, 1, -2));
 }
@@ -173,17 +164,19 @@ $floating-label-size: calc(
 		$boolean: "false";
 	}
 
-	#{get-validations($selector,$key)} {
-		@content;
+	$user: "";
+	@if ($selector == check) {
+		$user: "user-";
 	}
 
-	@if ($selector == check) {
+	@if ($selector == check or $selector == radio) {
 		$selector: input;
-	}
 
-	// :user-valid or :user-invalid workaround
-	@supports not selector(:user-#{$key}) {
-		&:has(#{$selector}:not([aria-invalid]):required:#{$key}) {
+		&:has(#{$selector}:not([aria-invalid]):required:#{$user}#{$key}) {
+			@content;
+		}
+	} @else {
+		#{get-validations($selector,$key)} {
 			@content;
 		}
 	}
@@ -367,13 +360,13 @@ $floating-label-size: calc(
 	}
 }
 
-%check-element {
+@mixin set-default-check-element($selector) {
 	@include set-required-label(input);
 
-	@include get-validity(check) {
+	@include get-validity($selector) {
 		@include get-validity-color-check("valid");
 	}
-	@include get-validity(check, "invalid") {
+	@include get-validity($selector, "invalid") {
 		@include get-validity-color-check("invalid");
 	}