[Darkside] Warning triangle icon in error messages

.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.

@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;

@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 ------------------------------- */

@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;

@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;

@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>
   );

@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>
   );

@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>
   );

@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>

@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>
     );

@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>

@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>

@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>

@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."

@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>

@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>
   ),
 );
 

@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: {