diff --git a/.changeset/fresh-planes-complain.md b/.changeset/fresh-planes-complain.md new file mode 100644 index 0000000000..98e8dc9d68 --- /dev/null +++ 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 new file mode 100644 index 0000000000..6556fee9ed --- /dev/null +++ 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 index 526807076b..34b003c8ce 100644 --- 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 index c7e355ca3a..caca586f10 100644 --- 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( > {hasExceededLimit && label(over, remainder)} - - {label(hasExceededLimit ? over : under, remainder)} - + {hasExceededLimit ? ( + + {label(over, remainder)} + + ) : ( + + {label(under, remainder)} + + )} ); }, diff --git a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx index 421d6e65e8..7bd9070f58 100644 --- 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 (