[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 * 🐛 tweaks + use icon in Search * use icon for the rest of our form components * backport new css to old form.css * 🔥 remove unnecessary specification bump * cleaner example story * changeset * ♻️ 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
navikt · Dec 19, 2024 · c90abe7 · c90abe7
1 parent ea19081
commit c90abe7
Show file tree

Hide file tree

Showing 17 changed files with 135 additions and 37 deletions.
diff --git a/.changeset/six-islands-exercise.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -150,7 +150,11 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
         aria-relevant="additions removals"
         aria-live="polite"
       >
-        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
+        {showErrorMsg && (
+          <ErrorMessage size={size} showIcon>
+            {props.error}
+          </ErrorMessage>
+        )}
       </div>
     </div>
   );

diff --git 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 && <ErrorMessage size={size}>{error}</ErrorMessage>}
+        {showErrorMsg && (
+          <ErrorMessage size={size} showIcon>
+            {error}
+          </ErrorMessage>
+        )}
       </div>
     </ComboboxWrapper>
   );

diff --git 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<
         </Checkbox>
       </div>
       <div className="navds-form-field__error" id={errorId} role="alert">
-        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
+        {showErrorMsg && (
+          <ErrorMessage size={size} showIcon>
+            {props.error}
+          </ErrorMessage>
+        )}
       </div>
     </div>
   );

diff --git 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<HTMLFieldSetElement, FieldsetProps>(
             className="navds-fieldset__error"
           >
             {showErrorMsg && (
-              <ErrorMessage size={size}>{props.error}</ErrorMessage>
+              <ErrorMessage size={size} showIcon>
+                {props.error}
+              </ErrorMessage>
             )}
           </div>
         </fieldset>

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
@@ -177,7 +177,7 @@ const Dropzone = forwardRef<HTMLInputElement, FileUploadDropzoneProps>(
           aria-relevant="additions removals"
           aria-live="polite"
         >
-          {showErrorMsg && <ErrorMessage>{error}</ErrorMessage>}
+          {showErrorMsg && <ErrorMessage showIcon>{error}</ErrorMessage>}
         </div>
       </div>
     );

diff --git 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<HTMLInputElement, SearchProps>(
           aria-live="polite"
         >
           {showErrorMsg && (
-            <ErrorMessage size={size}>{props.error}</ErrorMessage>
+            <ErrorMessage size={size} showIcon>
+              {props.error}
+            </ErrorMessage>
           )}
         </div>
       </div>

diff --git 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<HTMLSelectElement, SelectProps>(
           aria-live="polite"
         >
           {showErrorMsg && (
-            <ErrorMessage size={size}>{props.error}</ErrorMessage>
+            <ErrorMessage size={size} showIcon>
+              {props.error}
+            </ErrorMessage>
           )}
         </div>
       </div>

diff --git 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<HTMLTextAreaElement, TextareaProps>(
           aria-live="polite"
         >
           {showErrorMsg && (
-            <ErrorMessage size={size}>{props.error}</ErrorMessage>
+            <ErrorMessage size={size} showIcon>
+              {props.error}
+            </ErrorMessage>
           )}
         </div>
       </div>

diff --git 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"
       />
 
+      <VStack
+        style={{
+          maxWidth: "400px",
+        }}
+        gap="4"
+      >
+        <Textarea
+          label="Ipsum enim quis culpa"
+          error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
+        />
+
+        <Textarea
+          label="Ipsum enim quis culpa"
+          error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."
+          size="small"
+        />
+      </VStack>
+
       <Textarea
         label="Ipsum enim quis culpa"
         error="Consectetur labore velit eiusmod Lorem ut nostrud mollit labore ullamco laboris laboris in."

diff --git a/@navikt/core/react/src/form/textfield/TextField.tsx b/@navikt/core/react/src/form/textfield/TextField.tsx
@@ -127,7 +127,9 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           aria-live="polite"
         >
           {showErrorMsg && (
-            <ErrorMessage size={size}>{props.error}</ErrorMessage>
+            <ErrorMessage size={size} showIcon>
+              {props.error}
+            </ErrorMessage>
           )}
         </div>
       </div>

diff --git a/@navikt/core/react/src/typography/ErrorMessage.tsx b/@navikt/core/react/src/typography/ErrorMessage.tsx
@@ -16,6 +16,11 @@ export interface ErrorMessageProps
    * Error text.
    */
   children: React.ReactNode;
+
+  /**
+   * Render a triangular warning icon.
+   */
+  showIcon?: boolean;
 }
 
 /**
@@ -36,7 +41,18 @@ export const ErrorMessage: OverridableComponent<
   ErrorMessageProps,
   HTMLParagraphElement
 > = forwardRef(
-  ({ className, size, spacing, as: Component = "p", ...rest }, ref) => (
+  (
+    {
+      children,
+      className,
+      size,
+      spacing,
+      as: Component = "p",
+      showIcon = false,
+      ...rest
+    },
+    ref,
+  ) => (
     <Component
       {...rest}
       ref={ref}
@@ -49,9 +65,28 @@ export const ErrorMessage: OverridableComponent<
         }),
         {
           "navds-label--small": size === "small",
+          "navds-error-message--show-icon": showIcon,
         },
       )}
-    />
+    >
+      {showIcon && (
+        <svg
+          viewBox="0 0 17 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          focusable={false}
+          aria-hidden
+        >
+          <path
+            fillRule="evenodd"
+            clipRule="evenodd"
+            d="M3.49209 11.534L8.11398 2.7594C8.48895 2.04752 9.50833 2.04743 9.88343 2.75924L14.5073 11.5339C14.8582 12.1998 14.3753 13 13.6226 13H4.37685C3.6242 13 3.14132 12.1999 3.49209 11.534ZM9.74855 10.495C9.74855 10.9092 9.41276 11.245 8.99855 11.245C8.58433 11.245 8.24855 10.9092 8.24855 10.495C8.24855 10.0808 8.58433 9.74497 8.99855 9.74497C9.41276 9.74497 9.74855 10.0808 9.74855 10.495ZM9.49988 5.49997C9.49988 5.22383 9.27602 4.99997 8.99988 4.99997C8.72373 4.99997 8.49988 5.22383 8.49988 5.49997V7.99997C8.49988 8.27611 8.72373 8.49997 8.99988 8.49997C9.27602 8.49997 9.49988 8.27611 9.49988 7.99997V5.49997Z"
+            fill="currentColor"
+          />
+        </svg>
+      )}
+      {children}
+    </Component>
   ),
 );
 

diff --git a/@navikt/core/react/src/typography/stories/error-message.stories.tsx b/@navikt/core/react/src/typography/stories/error-message.stories.tsx
@@ -93,6 +93,19 @@ export const OverrideTag: Story = {
   },
 };
 
+export const WithIcon: Story = {
+  render: () => (
+    <VStack gap="2">
+      <ErrorMessage size="medium" showIcon>
+        {lorem}
+      </ErrorMessage>
+      <ErrorMessage size="small" showIcon>
+        {lorem}
+      </ErrorMessage>
+    </VStack>
+  ),
+};
+
 export const Chromatic: Story = {
   render: (...props) => (
     <div>
@@ -114,6 +127,10 @@ export const Chromatic: Story = {
         <h2>Override Tag</h2>
         {OverrideTag.render?.(...props)}
       </div>
+      <div>
+        <h2>With Icon</h2>
+        {WithIcon.render?.(...props)}
+      </div>
     </div>
   ),
   parameters: {