refactor: 🔥 Remove neutral color for ValidationMessage (#2895)

- `Field.Counter` now uses `Paragraph` instead of `ValidationMessage` - Fixed bug with `ValidationMessage` having wrong default element type - Removed `neutral` color mappings for `ValidationMessage` --------- Co-authored-by: Tobias Barsnes <[email protected]>
digdir · Dec 13, 2024 · aa344ec · aa344ec
1 parent 23450ce
commit aa344ec
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 19 deletions.
diff --git a/.changeset/fresh-planes-complain.md b/.changeset/fresh-planes-complain.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+Remove `neutral` color on `ValidationMessage`
diff --git a/.changeset/weak-keys-tap.md b/.changeset/weak-keys-tap.md
@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+ `ValidationMessage` now uses the `p`-element
diff --git a/packages/css/src/validation-message.css b/packages/css/src/validation-message.css
@@ -39,14 +39,4 @@
     --dsc-validation-message-icon-url: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M3.25 4A.75.75 0 0 1 4 3.25h16a.75.75 0 0 1 .75.75v16a.75.75 0 0 1-.75.75H4a.75.75 0 0 1-.75-.75zM11 7.75a1 1 0 1 1 2 0 1 1 0 0 1-2 0m-1.25 3a.75.75 0 0 1 .75-.75H12a.75.75 0 0 1 .75.75v4.75h.75a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1 0-1.5h.75v-4h-.75a.75.75 0 0 1-.75-.75'/%3E%3C/svg%3E");
     --dsc-validation-message-color: var(--ds-color-info-text-subtle);
   }
-
-  &[data-color='neutral'] {
-    --dsc-validation-message-icon-url: unset;
-    --dsc-validation-message-color: unset; /* This does not set the color to "neutral". This will inherit the closest `color` set. */
-    --dsc-validation-message-gap: 0; /* We don't display an icon for this */
-
-    &::before {
-      display: none;
-    }
-  }
 }
diff --git a/packages/react/src/components/Field/FieldCounter.tsx b/packages/react/src/components/Field/FieldCounter.tsx
@@ -1,4 +1,5 @@
 import { forwardRef, useEffect, useRef, useState } from 'react';
+import { Paragraph } from '../Paragraph';
 import {
   ValidationMessage,
   type ValidationMessageProps,
@@ -57,13 +58,15 @@ export const FieldCounter = forwardRef<HTMLParagraphElement, FieldCounterProps>(
         >
           {hasExceededLimit && label(over, remainder)}
         </div>
-        <ValidationMessage
-          data-color={hasExceededLimit ? 'danger' : 'neutral'}
-          ref={ref}
-          {...rest}
-        >
-          {label(hasExceededLimit ? over : under, remainder)}
-        </ValidationMessage>
+        {hasExceededLimit ? (
+          <ValidationMessage ref={ref} {...rest}>
+            {label(over, remainder)}
+          </ValidationMessage>
+        ) : (
+          <Paragraph ref={ref} {...rest} data-field='validation'>
+            {label(under, remainder)}
+          </Paragraph>
+        )}
       </>
     );
   },

diff --git a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx
@@ -13,7 +13,7 @@ export type ValidationMessageProps = MergeRight<
      * Sets color and icon.
      * @default 'danger'
      */
-    'data-color'?: SeverityColors | 'neutral';
+    'data-color'?: SeverityColors;
     /**
      * Change the default rendered element for the one passed as a child, merging their props and behavior.
      * @default false
@@ -27,7 +27,7 @@ export const ValidationMessage = forwardRef<
   HTMLParagraphElement,
   ValidationMessageProps
 >(function ValidationMessage({ className, asChild, ...rest }, ref) {
-  const Component = asChild ? Slot : 'div';
+  const Component = asChild ? Slot : 'p';
 
   return (
     <Component