From c90abe7c23e2520e5131d138f3193a4de0e28b9d Mon Sep 17 00:00:00 2001 From: Julian Nymark Date: Thu, 19 Dec 2024 14:17:50 +0100 Subject: [PATCH] [Darkside] Warning triangle icon in error messages (#3445) * change: support icon in ErrorMessage + warning icon for textarea error * change: ignore icon on old CSS + tweaks * change: do not nest in old css * wip commit (works nicely) * clean up css for errormessage, remove it from form.css * :bug: tweaks + use icon in Search * use icon for the rest of our form components * backport new css to old form.css * :fire: remove unnecessary specification bump * cleaner example story * changeset * :recycle: icon -> showIcon * make flex & gap opt-in with 'icon' * change: inline ErrorMessageIcon * change: nest css more * revert test changes (utility in multiple variants on one for DOM diffing, but probably no longer useful) * debloat changeset * mention form components in changeset * change: typo in changeset * change: typo in changeset --- .changeset/six-islands-exercise.md | 7 ++++ .../core/css/darkside/form/form.darkside.css | 13 ------- .../core/css/darkside/typography.darkside.css | 12 ++++++ @navikt/core/css/form/form.css | 13 ------- @navikt/core/css/typography.css | 12 ++++++ .../core/react/src/date/parts/DateInput.tsx | 6 ++- .../core/react/src/form/combobox/Combobox.tsx | 6 ++- .../confirmation-panel/ConfirmationPanel.tsx | 6 ++- .../core/react/src/form/fieldset/Fieldset.tsx | 4 +- .../file-upload/parts/dropzone/Dropzone.tsx | 2 +- @navikt/core/react/src/form/search/Search.tsx | 4 +- @navikt/core/react/src/form/select/Select.tsx | 4 +- .../core/react/src/form/textarea/Textarea.tsx | 4 +- .../src/form/textarea/textarea.stories.tsx | 19 +++++++++ .../react/src/form/textfield/TextField.tsx | 4 +- .../react/src/typography/ErrorMessage.tsx | 39 ++++++++++++++++++- .../stories/error-message.stories.tsx | 17 ++++++++ 17 files changed, 135 insertions(+), 37 deletions(-) create mode 100644 .changeset/six-islands-exercise.md diff --git a/.changeset/six-islands-exercise.md b/.changeset/six-islands-exercise.md new file mode 100644 index 0000000000..14916b5b18 --- /dev/null +++ b/.changeset/six-islands-exercise.md @@ -0,0 +1,7 @@ +--- +"@navikt/ds-react": minor +"@navikt/ds-css": minor +--- + +ErrorSummary: :sparkles: new prop to prefix error with a warning icon. +All form components: replace dot with warning icon in error message. diff --git a/@navikt/core/css/darkside/form/form.darkside.css b/@navikt/core/css/darkside/form/form.darkside.css index c730a8d99c..7d4e4814c4 100644 --- a/@navikt/core/css/darkside/form/form.darkside.css +++ b/@navikt/core/css/darkside/form/form.darkside.css @@ -9,19 +9,6 @@ color: var(--ax-text-subtle); } -.navds-form-field .navds-error-message, -.navds-fieldset .navds-error-message, -.navds-file-item .navds-error-message { - display: flex; - gap: var(--ax-spacing-2); -} - -.navds-form-field .navds-error-message::before, -.navds-fieldset .navds-error-message::before, -.navds-file-item .navds-error-message::before { - content: "•"; -} - .navds-form-field--disabled { opacity: var(--ax-opacity-disabled); cursor: not-allowed; diff --git a/@navikt/core/css/darkside/typography.darkside.css b/@navikt/core/css/darkside/typography.darkside.css index 6868934f2c..df677cf240 100644 --- a/@navikt/core/css/darkside/typography.darkside.css +++ b/@navikt/core/css/darkside/typography.darkside.css @@ -204,6 +204,18 @@ .navds-error-message { color: var(--ax-text-danger); + + &.navds-error-message--show-icon { + display: flex; + gap: var(--ax-spacing-1); + + & svg { + margin-top: 0.15em; + flex: 0 0 auto; + width: 1em; + height: 1em; + } + } } /* -------------------------------- Utilities ------------------------------- */ diff --git a/@navikt/core/css/form/form.css b/@navikt/core/css/form/form.css index 6e84fe6970..d49713702f 100644 --- a/@navikt/core/css/form/form.css +++ b/@navikt/core/css/form/form.css @@ -17,19 +17,6 @@ color: var(--ac-form-description, var(--__ac-form-description, var(--a-text-subtle))); } -.navds-form-field .navds-error-message, -.navds-fieldset .navds-error-message, -.navds-file-item .navds-error-message { - display: flex; - gap: var(--a-spacing-2); -} - -.navds-form-field .navds-error-message::before, -.navds-fieldset .navds-error-message::before, -.navds-file-item .navds-error-message::before { - content: "•"; -} - .navds-form-field--disabled { opacity: 0.3; cursor: not-allowed; diff --git a/@navikt/core/css/typography.css b/@navikt/core/css/typography.css index 0cd3c0c62f..dcf51e1fa2 100644 --- a/@navikt/core/css/typography.css +++ b/@navikt/core/css/typography.css @@ -216,6 +216,18 @@ color: var(--ac-typo-error-text, var(--__ac-typo-error-text, var(--a-text-danger))); } +.navds-error-message.navds-error-message--show-icon { + display: flex; + gap: var(--a-spacing-1); +} + +.navds-error-message.navds-error-message--show-icon svg { + margin-top: 0.15em; + flex: 0 0 auto; + width: 1em; + height: 1em; +} + .navds-typo--truncate { overflow: hidden; white-space: nowrap; diff --git a/@navikt/core/react/src/date/parts/DateInput.tsx b/@navikt/core/react/src/date/parts/DateInput.tsx index 9302829bcd..2ae265b192 100644 --- a/@navikt/core/react/src/date/parts/DateInput.tsx +++ b/@navikt/core/react/src/date/parts/DateInput.tsx @@ -150,7 +150,11 @@ const DateInput = forwardRef((props, ref) => { aria-relevant="additions removals" aria-live="polite" > - {showErrorMsg && {props.error}} + {showErrorMsg && ( + + {props.error} + + )} ); diff --git a/@navikt/core/react/src/form/combobox/Combobox.tsx b/@navikt/core/react/src/form/combobox/Combobox.tsx index f4d8f837a8..ee680a04f0 100644 --- a/@navikt/core/react/src/form/combobox/Combobox.tsx +++ b/@navikt/core/react/src/form/combobox/Combobox.tsx @@ -71,7 +71,11 @@ export const Combobox = forwardRef< aria-relevant="additions removals" aria-live="polite" > - {showErrorMsg && {error}} + {showErrorMsg && ( + + {error} + + )} ); diff --git a/@navikt/core/react/src/form/confirmation-panel/ConfirmationPanel.tsx b/@navikt/core/react/src/form/confirmation-panel/ConfirmationPanel.tsx index bd2e0b85d3..567d14ba1a 100644 --- a/@navikt/core/react/src/form/confirmation-panel/ConfirmationPanel.tsx +++ b/@navikt/core/react/src/form/confirmation-panel/ConfirmationPanel.tsx @@ -91,7 +91,11 @@ export const ConfirmationPanel = forwardRef< ); diff --git a/@navikt/core/react/src/form/fieldset/Fieldset.tsx b/@navikt/core/react/src/form/fieldset/Fieldset.tsx index 6e6bccff46..003aac15f3 100644 --- a/@navikt/core/react/src/form/fieldset/Fieldset.tsx +++ b/@navikt/core/react/src/form/fieldset/Fieldset.tsx @@ -113,7 +113,9 @@ export const Fieldset = forwardRef( className="navds-fieldset__error" > {showErrorMsg && ( - {props.error} + + {props.error} + )} diff --git a/@navikt/core/react/src/form/file-upload/parts/dropzone/Dropzone.tsx b/@navikt/core/react/src/form/file-upload/parts/dropzone/Dropzone.tsx index 9eae612dc4..ff84bdadad 100644 --- a/@navikt/core/react/src/form/file-upload/parts/dropzone/Dropzone.tsx +++ b/@navikt/core/react/src/form/file-upload/parts/dropzone/Dropzone.tsx @@ -177,7 +177,7 @@ const Dropzone = forwardRef( aria-relevant="additions removals" aria-live="polite" > - {showErrorMsg && {error}} + {showErrorMsg && {error}} ); diff --git a/@navikt/core/react/src/form/search/Search.tsx b/@navikt/core/react/src/form/search/Search.tsx index b6f7029734..5df8593063 100644 --- a/@navikt/core/react/src/form/search/Search.tsx +++ b/@navikt/core/react/src/form/search/Search.tsx @@ -263,7 +263,9 @@ export const Search = forwardRef( aria-live="polite" > {showErrorMsg && ( - {props.error} + + {props.error} + )} diff --git a/@navikt/core/react/src/form/select/Select.tsx b/@navikt/core/react/src/form/select/Select.tsx index c14b7a80fc..0f217c6fcb 100644 --- a/@navikt/core/react/src/form/select/Select.tsx +++ b/@navikt/core/react/src/form/select/Select.tsx @@ -151,7 +151,9 @@ export const Select = forwardRef( aria-live="polite" > {showErrorMsg && ( - {props.error} + + {props.error} + )} diff --git a/@navikt/core/react/src/form/textarea/Textarea.tsx b/@navikt/core/react/src/form/textarea/Textarea.tsx index 42af135d80..730d4c5b1b 100644 --- a/@navikt/core/react/src/form/textarea/Textarea.tsx +++ b/@navikt/core/react/src/form/textarea/Textarea.tsx @@ -193,7 +193,9 @@ export const Textarea = forwardRef( aria-live="polite" > {showErrorMsg && ( - {props.error} + + {props.error} + )} diff --git a/@navikt/core/react/src/form/textarea/textarea.stories.tsx b/@navikt/core/react/src/form/textarea/textarea.stories.tsx index 1f4fc315a4..13772cdb50 100644 --- a/@navikt/core/react/src/form/textarea/textarea.stories.tsx +++ b/@navikt/core/react/src/form/textarea/textarea.stories.tsx @@ -2,6 +2,7 @@ import { Meta, StoryFn, StoryObj } from "@storybook/react"; import { expect, userEvent, within } from "@storybook/test"; import React, { useState } from "react"; import { Button } from "../../button"; +import { VStack } from "../../layout/stack"; import { Modal } from "../../modal"; import { Textarea } from "./index"; @@ -74,6 +75,24 @@ export const WithError: StoryFn = () => { size="small" /> + +