From 464742d706c6a42de44c0ddef17204b309c4d321 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Fri, 13 Dec 2024 13:17:31 +0100 Subject: [PATCH 1/6] refactor: :recycle: Use `Paragraph` instead of `ValidationMessage` in `FieldCounter` Testing how using `Paragraph` instead of `ValidationMessage` would work inside `Field.Counter` --- .../src/components/Field/FieldCounter.tsx | 19 ++++++++++++------- .../ValidationMessage/ValidationMessage.tsx | 2 +- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/packages/react/src/components/Field/FieldCounter.tsx b/packages/react/src/components/Field/FieldCounter.tsx index c7e355ca3a..fc99f80505 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,17 @@ 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..2da609f82d 100644 --- a/packages/react/src/components/ValidationMessage/ValidationMessage.tsx +++ b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx @@ -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 ( Date: Fri, 13 Dec 2024 13:20:54 +0100 Subject: [PATCH 2/6] format --- packages/react/src/components/Field/FieldCounter.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/react/src/components/Field/FieldCounter.tsx b/packages/react/src/components/Field/FieldCounter.tsx index fc99f80505..c98d13a219 100644 --- a/packages/react/src/components/Field/FieldCounter.tsx +++ b/packages/react/src/components/Field/FieldCounter.tsx @@ -63,9 +63,7 @@ export const FieldCounter = forwardRef( {label(over, remainder)} ) : ( - + {label(under, remainder)} )} From b81a259f9337dcc42f4b4f8d429bdb0a5e22c765 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Fri, 13 Dec 2024 14:08:13 +0100 Subject: [PATCH 3/6] remove neutral color on validationmessage --- packages/css/src/validation-message.css | 10 ---------- .../components/ValidationMessage/ValidationMessage.tsx | 2 +- 2 files changed, 1 insertion(+), 11 deletions(-) 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/ValidationMessage/ValidationMessage.tsx b/packages/react/src/components/ValidationMessage/ValidationMessage.tsx index 2da609f82d..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 From 4c51a36902034dc608aa7d44902fc2771fca96f2 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Fri, 13 Dec 2024 14:08:59 +0100 Subject: [PATCH 4/6] validationmessage is default danger --- packages/react/src/components/Field/FieldCounter.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react/src/components/Field/FieldCounter.tsx b/packages/react/src/components/Field/FieldCounter.tsx index c98d13a219..caca586f10 100644 --- a/packages/react/src/components/Field/FieldCounter.tsx +++ b/packages/react/src/components/Field/FieldCounter.tsx @@ -59,7 +59,7 @@ export const FieldCounter = forwardRef( {hasExceededLimit && label(over, remainder)} {hasExceededLimit ? ( - + {label(over, remainder)} ) : ( From 9bbb0407a7dfa7e17fac4fd6a45ccf0b2a81d88a Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Fri, 13 Dec 2024 14:25:10 +0100 Subject: [PATCH 5/6] add changesets --- .changeset/fresh-planes-complain.md | 5 +++++ .changeset/weak-keys-tap.md | 5 +++++ 2 files changed, 10 insertions(+) create mode 100644 .changeset/fresh-planes-complain.md create mode 100644 .changeset/weak-keys-tap.md 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..ac1d9a8b04 --- /dev/null +++ b/.changeset/weak-keys-tap.md @@ -0,0 +1,5 @@ +--- +"@digdir/designsystemet-react": patch +--- + +fix: `ValidationMessage` should now have correct default element type From de97db0b14b9b188990ba30f65749ca51cfd5284 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Fri, 13 Dec 2024 14:47:19 +0100 Subject: [PATCH 6/6] Update .changeset/weak-keys-tap.md Co-authored-by: Tobias Barsnes --- .changeset/weak-keys-tap.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/weak-keys-tap.md b/.changeset/weak-keys-tap.md index ac1d9a8b04..6556fee9ed 100644 --- a/.changeset/weak-keys-tap.md +++ b/.changeset/weak-keys-tap.md @@ -2,4 +2,4 @@ "@digdir/designsystemet-react": patch --- -fix: `ValidationMessage` should now have correct default element type + `ValidationMessage` now uses the `p`-element