feat: add utrecht-form-field__error-message class name

nl-design-system · Oct 12, 2024 · 9ba132c · 9ba132c
1 parent df443c2
commit 9ba132c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/.changeset/beige-yaks-tease.md b/.changeset/beige-yaks-tease.md
@@ -0,0 +1,7 @@
+---
+"@utrecht/form-field-css": minor
+---
+
+Add `utrecht-form-field__error-message` class name and mixin.
+
+Deprecate the `utrecht-form-field__description--invalid` mixin.
diff --git a/components/form-field/src/_mixin.scss b/components/form-field/src/_mixin.scss
@@ -35,7 +35,7 @@
   --utrecht-space-around: 0;
 
   display: grid;
-  grid-template-areas: "label" "description" "description-before" "description-invalid" "input" "description-after";
+  grid-template-areas: "label" "description" "description-before" "error-message" "input" "description-after";
 }
 
 @mixin utrecht-form-field--option {
@@ -83,11 +83,16 @@
   order: 2;
 }
 
-@mixin utrecht-form-field__description--invalid {
-  grid-area: description-invalid;
+@mixin utrecht-form-field__error-message {
+  grid-area: error-message;
   order: 3;
 }
 
+/** @deprecated */
+@mixin utrecht-form-field__description--invalid {
+  @include utrecht-form-field__error-message;
+}
+
 @mixin utrecht-form-field__description--after {
   grid-area: description-after;
   order: 6;
@@ -101,7 +106,7 @@
 @mixin utrecht-form-field--checkbox {
   display: grid;
   gap: 0 var(--utrecht-checkbox-margin-inline-end, 12px);
-  grid-template-areas: "input label" "input description" "input description-invalid";
+  grid-template-areas: "input label" "input description" "input error-message";
   grid-template-columns: var(--utrecht-checkbox-size) 100fr;
 
   /*
@@ -123,7 +128,7 @@
 @mixin utrecht-form-field--radio {
   display: grid;
   gap: 0 var(--utrecht-radio-button-margin-inline-end, 12px);
-  grid-template-areas: "input label" "input description" "input description-invalid";
+  grid-template-areas: "input label" "input description" "input error-message";
   grid-template-columns: var(--utrecht-radio-button-size) 100fr;
 
   /*

diff --git a/components/form-field/src/index.scss b/components/form-field/src/index.scss
@@ -42,7 +42,7 @@
 }
 
 .utrecht-form-field .utrecht-form-field-description--invalid {
-  @include utrecht-form-field__description--invalid;
+  @include utrecht-form-field__error-message;
 }
 
 .utrecht-form-field__description {
@@ -52,3 +52,7 @@
 .utrecht-form-field__description--before {
   @include utrecht-form-field__description--before;
 }
+
+.utrecht-form-field__error-message {
+  @include utrecht-form-field__error-message;
+}