Merge pull request #2446 from SpareBank1/main_fjern-aria-invalid-styl…

…ing-input-group feat(ffe-form): move invalid styling to components
SpareBank1 · Dec 16, 2024 · 8154128 · 8154128
2 parents 4465142 + bb5553a
commit 8154128
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 22 deletions.
diff --git a/packages/ffe-form/less/input-field.less b/packages/ffe-form/less/input-field.less
@@ -43,10 +43,10 @@
     }
 
     &--condensed {
-        height: 38px;
+        height: 2.25rem;
     }
 
-    &--text-like {
+    &--text-like.ffe-input-field {
         border: none;
         border-bottom: 2px solid var(--ffe-g-border-color);
         border-radius: 4px 4px 0 0;
@@ -62,6 +62,14 @@
             box-shadow: none;
             border-color: var(--ffe-g-primary-color);
         }
+
+        &[aria-invalid='true'] {
+            border-bottom: 2px solid;
+            border-color: var(--ffe-g-error-color);
+            border-left-style: none;
+            border-right-style: none;
+            border-top-style: none;
+        }
     }
 
     &::-ms-clear {
@@ -73,3 +81,13 @@
         opacity: 1;
     }
 }
+.ffe-input-field--invalid,
+:where(input).ffe-input-field[aria-invalid='true'] {
+    border-color: var(--ffe-g-error-color);
+    border-style: solid;
+
+    &:focus {
+        border-color: var(--ffe-v-input-bg-color);
+        box-shadow: 0 0 0 2px var(--ffe-g-error-color);
+    }
+}
diff --git a/packages/ffe-form/less/input-group.less b/packages/ffe-form/less/input-group.less
@@ -3,26 +3,6 @@
     position: relative;
     padding: 0 0 calc(1lh + var(--ffe-spacing-xs));
 
-    [aria-invalid='true'] {
-        border-color: var(--ffe-g-error-color);
-        border-style: solid;
-
-        &:focus {
-            border-color: var(--ffe-v-input-bg-color);
-            box-shadow: 0 0 0 2px var(--ffe-g-error-color);
-        }
-    }
-
-    .ffe-input-field--text-like {
-        &[aria-invalid='true'] {
-            border-bottom: 2px solid;
-            border-color: var(--ffe-g-error-color);
-            border-left-style: none;
-            border-right-style: none;
-            border-top-style: none;
-        }
-    }
-
     > * {
         margin-top: 0;
         margin-bottom: var(--ffe-spacing-xs);

diff --git a/packages/ffe-form/less/textarea.less b/packages/ffe-form/less/textarea.less
@@ -29,3 +29,14 @@
         opacity: 1;
     }
 }
+
+.ffe-textarea--invalid,
+:where(textarea).ffe-textarea[aria-invalid='true'] {
+    border-color: var(--ffe-g-error-color);
+    border-style: solid;
+
+    &:focus {
+        border-color: var(--ffe-v-input-bg-color);
+        box-shadow: 0 0 0 2px var(--ffe-g-error-color);
+    }
+}