fix invalid color

morewings · Dec 11, 2023 · 33c34ba · 33c34ba
1 parent 26e3e8f
commit 33c34ba
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 19 deletions.
diff --git a/src/lib/InputCheckbox/InputCheckbox.module.css b/src/lib/InputCheckbox/InputCheckbox.module.css
@@ -32,8 +32,8 @@
         width: var(--size);
     }
 
-    &:focus {
-        --borderColor: var(--gray400);
+    &:invalid {
+        --borderColor: red;
     }
 
     &:disabled {
@@ -45,10 +45,14 @@
     &:checked::before {
         --size: 10px;
     }
+
+    &:focus:not(:disabled, :invalid) {
+        --borderColor: var(--gray400);
+    }
 }
 
 .wrapper:hover {
-    .input {
+    .input:not(:disabled, :invalid) {
         --borderColor: var(--gray400);
     }
 }
@@ -64,6 +68,6 @@
     cursor: not-allowed;
 }
 
-.input:invalid + label {
-    color: var(--errorColor);
+.input:invalid + .label {
+    color: var(--colorError);
 }
diff --git a/src/lib/InputCheckbox/InputCheckbox.tsx b/src/lib/InputCheckbox/InputCheckbox.tsx
@@ -33,9 +33,7 @@ export const InputCheckbox = forwardRef<HTMLInputElement, Props>(
             defaultChecked,
             id,
             label,
-            validator = event => {
-                event.target.setCustomValidity('');
-            },
+            validator = () => {},
             ...nativeProps
         },
         ref
@@ -44,6 +42,7 @@ export const InputCheckbox = forwardRef<HTMLInputElement, Props>(
         const handleChange = useCallback(
             (event: ChangeEvent<HTMLInputElement>) => {
                 const nextValidationState = event.target.checkValidity() ? Validation.valid : Validation.error;
+                console.log('valid', event.target.checkValidity());
                 setValidity(nextValidationState);
                 onChange(event);
             },

diff --git a/src/lib/InputRadio/InputRadio.module.css b/src/lib/InputRadio/InputRadio.module.css
@@ -34,10 +34,6 @@
         width: var(--size);
     }
 
-    &:focus {
-        --borderColor: var(--gray400);
-    }
-
     &:invalid {
         --borderColor: red;
     }
@@ -51,10 +47,14 @@
     &:checked::before {
         --size: 10px;
     }
+
+    &:focus:not(:disabled, :invalid) {
+        --borderColor: var(--gray400);
+    }
 }
 
 .wrapper:hover {
-    .input {
+    .input:not(:disabled, :invalid) {
         --borderColor: var(--gray400);
     }
 }
@@ -69,6 +69,6 @@
     cursor: not-allowed;
 }
 
-/* .input:invalid + .label {
-    color: var(--errorColor);
-} */
+.input:invalid + .label {
+    color: var(--colorError);
+}
diff --git a/src/lib/InputRadio/InputRadio.tsx b/src/lib/InputRadio/InputRadio.tsx
@@ -33,9 +33,7 @@ export const InputRadio = forwardRef<HTMLInputElement, Props>(
             defaultChecked,
             id,
             label,
-            validator = event => {
-                event.target.setCustomValidity('');
-            },
+            validator = () => {},
             ...nativeProps
         },
         ref