From 2a85732d1b7c3d31a6dd01d53c46ab20ad9f1454 Mon Sep 17 00:00:00 2001
From: Julian Nymark <julian.nymark@nav.no>
Date: Mon, 9 Dec 2024 16:32:06 +0100
Subject: [PATCH 01/20] change: support icon in ErrorMessage + warning icon for
 textarea error

---
 .../css/darkside/form/textarea.darkside.css   | 23 ++++++++++++
 .../core/react/src/form/textarea/Textarea.tsx | 13 ++++++-
 .../react/src/typography/ErrorMessage.tsx     | 37 +++++++++++--------
 3 files changed, 56 insertions(+), 17 deletions(-)

diff --git a/@navikt/core/css/darkside/form/textarea.darkside.css b/@navikt/core/css/darkside/form/textarea.darkside.css
index 2e3bd00d5a..37137050ce 100644
--- a/@navikt/core/css/darkside/form/textarea.darkside.css
+++ b/@navikt/core/css/darkside/form/textarea.darkside.css
@@ -94,6 +94,29 @@
   border-color: var(--ax-border-danger);
 }
 
+.navds-textarea--error {
+  .navds-form-field__error {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    line-height: 20px;
+  }
+
+  &.navds-form-field {
+    .navds-error-message {
+      gap: 0;
+
+      &::before {
+        content: "";
+      }
+    }
+
+    svg {
+      margin-bottom: 2px;
+    }
+  }
+}
+
 @media (forced-colors: active) {
   .navds-textarea__input {
     background-color: field;
diff --git a/@navikt/core/react/src/form/textarea/Textarea.tsx b/@navikt/core/react/src/form/textarea/Textarea.tsx
index 6836c9cd84..5388378de5 100644
--- a/@navikt/core/react/src/form/textarea/Textarea.tsx
+++ b/@navikt/core/react/src/form/textarea/Textarea.tsx
@@ -1,5 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
+import { ExclamationmarkTriangleFillIcon } from "@navikt/aksel-icons";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
 import TextareaAutosize from "../../util/TextareaAutoSize";
@@ -192,7 +193,17 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           aria-live="polite"
         >
           {showErrorMsg && (
-            <ErrorMessage size={size}>{props.error}</ErrorMessage>
+            <ErrorMessage
+              size={size}
+              icon={
+                <ExclamationmarkTriangleFillIcon
+                  color="var(--ax-text-danger)"
+                  aria-hidden
+                />
+              }
+            >
+              {props.error}
+            </ErrorMessage>
           )}
         </div>
       </div>
diff --git a/@navikt/core/react/src/typography/ErrorMessage.tsx b/@navikt/core/react/src/typography/ErrorMessage.tsx
index e89ddb4f0d..ba5c7ca783 100644
--- a/@navikt/core/react/src/typography/ErrorMessage.tsx
+++ b/@navikt/core/react/src/typography/ErrorMessage.tsx
@@ -16,6 +16,8 @@ export interface ErrorMessageProps
    * Error text.
    */
   children: React.ReactNode;
+
+  icon?: React.ReactNode;
 }
 
 /**
@@ -36,22 +38,25 @@ export const ErrorMessage: OverridableComponent<
   ErrorMessageProps,
   HTMLParagraphElement
 > = forwardRef(
-  ({ className, size, spacing, as: Component = "p", ...rest }, ref) => (
-    <Component
-      {...rest}
-      ref={ref}
-      className={cl(
-        "navds-error-message",
-        "navds-label",
-        className,
-        typoClassNames({
-          spacing,
-        }),
-        {
-          "navds-label--small": size === "small",
-        },
-      )}
-    />
+  ({ className, size, spacing, as: Component = "p", icon, ...rest }, ref) => (
+    <>
+      {icon}
+      <Component
+        {...rest}
+        ref={ref}
+        className={cl(
+          "navds-error-message",
+          "navds-label",
+          className,
+          typoClassNames({
+            spacing,
+          }),
+          {
+            "navds-label--small": size === "small",
+          },
+        )}
+      />
+    </>
   ),
 );
 

From b27488897252ad91826d4ee7a817104272af61fd Mon Sep 17 00:00:00 2001
From: Julian Nymark <julian.nymark@nav.no>
Date: Tue, 10 Dec 2024 12:06:22 +0100
Subject: [PATCH 02/20] change: ignore icon on old CSS + tweaks

---
 .../css/darkside/form/textarea.darkside.css   | 16 +++++++++++++---
 @navikt/core/css/form/textarea.css            |  6 ++++++
 .../src/form/textarea/textarea.stories.tsx    | 19 +++++++++++++++++++
 3 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/@navikt/core/css/darkside/form/textarea.darkside.css b/@navikt/core/css/darkside/form/textarea.darkside.css
index 37137050ce..ef7fb1b238 100644
--- a/@navikt/core/css/darkside/form/textarea.darkside.css
+++ b/@navikt/core/css/darkside/form/textarea.darkside.css
@@ -97,9 +97,8 @@
 .navds-textarea--error {
   .navds-form-field__error {
     display: flex;
-    align-items: center;
+    align-items: flex-start;
     gap: 4px;
-    line-height: 20px;
   }
 
   &.navds-form-field {
@@ -112,7 +111,18 @@
     }
 
     svg {
-      margin-bottom: 2px;
+      margin-top: 1px;
+      width: 18px;
+      flex: 1 0 auto;
+    }
+  }
+}
+
+.navds-textarea--error.navds-form-field--small {
+  &.navds-form-field {
+    svg {
+      margin-top: 0;
+      width: 16px;
     }
   }
 }
diff --git a/@navikt/core/css/form/textarea.css b/@navikt/core/css/form/textarea.css
index 9918e0a845..8bfd562081 100644
--- a/@navikt/core/css/form/textarea.css
+++ b/@navikt/core/css/form/textarea.css
@@ -116,6 +116,12 @@
   border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
 }
 
+.navds-textarea--error {
+  svg {
+    display: none;
+  }
+}
+
 @supports not selector(:focus-visible) {
   .navds-textarea--error .navds-textarea__input:not(:hover, :focus, :disabled) {
     box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
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"
       />
 
+      <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."

From db98b9d99c57f6e0e71bf3d23bd6163809457730 Mon Sep 17 00:00:00 2001
From: Julian Nymark <julian.nymark@nav.no>
Date: Tue, 10 Dec 2024 15:00:35 +0100
Subject: [PATCH 03/20] change: do not nest in old css

---
 @navikt/core/css/form/textarea.css | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/@navikt/core/css/form/textarea.css b/@navikt/core/css/form/textarea.css
index 8bfd562081..d4072932be 100644
--- a/@navikt/core/css/form/textarea.css
+++ b/@navikt/core/css/form/textarea.css
@@ -116,10 +116,8 @@
   border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
 }
 
-.navds-textarea--error {
-  svg {
-    display: none;
-  }
+.navds-textarea--error svg {
+  display: none;
 }
 
 @supports not selector(:focus-visible) {

From b2cc53f53f6cb2d3e4c6f4b59012c57638f2635f Mon Sep 17 00:00:00 2001
From: Julian Nymark <julian.nymark@nav.no>
Date: Wed, 18 Dec 2024 15:39:53 +0100
Subject: [PATCH 04/20] wip commit (works nicely)

---
 .../css/darkside/form/textarea.darkside.css   | 33 -------------------
 .../core/css/darkside/typography.darkside.css | 25 +++++++++++++-
 @navikt/core/css/form/textarea.css            |  4 ---
 .../core/react/src/form/textarea/Textarea.tsx | 11 +------
 .../react/src/typography/ErrorMessage.tsx     | 33 +++++++++++++++----
 .../react/src/typography/ErrorMessageIcon.tsx | 19 +++++++++++
 6 files changed, 71 insertions(+), 54 deletions(-)
 create mode 100644 @navikt/core/react/src/typography/ErrorMessageIcon.tsx

diff --git a/@navikt/core/css/darkside/form/textarea.darkside.css b/@navikt/core/css/darkside/form/textarea.darkside.css
index ef7fb1b238..2e3bd00d5a 100644
--- a/@navikt/core/css/darkside/form/textarea.darkside.css
+++ b/@navikt/core/css/darkside/form/textarea.darkside.css
@@ -94,39 +94,6 @@
   border-color: var(--ax-border-danger);
 }
 
-.navds-textarea--error {
-  .navds-form-field__error {
-    display: flex;
-    align-items: flex-start;
-    gap: 4px;
-  }
-
-  &.navds-form-field {
-    .navds-error-message {
-      gap: 0;
-
-      &::before {
-        content: "";
-      }
-    }
-
-    svg {
-      margin-top: 1px;
-      width: 18px;
-      flex: 1 0 auto;
-    }
-  }
-}
-
-.navds-textarea--error.navds-form-field--small {
-  &.navds-form-field {
-    svg {
-      margin-top: 0;
-      width: 16px;
-    }
-  }
-}
-
 @media (forced-colors: active) {
   .navds-textarea__input {
     background-color: field;
diff --git a/@navikt/core/css/darkside/typography.darkside.css b/@navikt/core/css/darkside/typography.darkside.css
index 6868934f2c..8b39ec5cc1 100644
--- a/@navikt/core/css/darkside/typography.darkside.css
+++ b/@navikt/core/css/darkside/typography.darkside.css
@@ -202,8 +202,31 @@
   margin-bottom: var(--ax-spacing-2);
 }
 
-.navds-error-message {
+.navds-error-message-wrapper {
+  align-items: flex-start;
   color: var(--ax-text-danger);
+
+  & svg {
+    margin-top: 2px;
+    flex: 1 0 auto;
+    width: 1em;
+    height: 1em;
+  }
+
+  & .navds-error-message.navds-error-message {
+    gap: 0;
+
+    &::before {
+      content: "";
+    }
+  }
+}
+
+.navds-error-message-wrapper--small {
+  & svg {
+    margin-top: 2px;
+    flex: 1 0 auto;
+  }
 }
 
 /* -------------------------------- Utilities ------------------------------- */
diff --git a/@navikt/core/css/form/textarea.css b/@navikt/core/css/form/textarea.css
index d4072932be..9918e0a845 100644
--- a/@navikt/core/css/form/textarea.css
+++ b/@navikt/core/css/form/textarea.css
@@ -116,10 +116,6 @@
   border-color: var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
 }
 
-.navds-textarea--error svg {
-  display: none;
-}
-
 @supports not selector(:focus-visible) {
   .navds-textarea--error .navds-textarea__input:not(:hover, :focus, :disabled) {
     box-shadow: 0 0 0 1px var(--ac-textarea-error-border, var(--__ac-textarea-error-border, var(--a-border-danger)));
diff --git a/@navikt/core/react/src/form/textarea/Textarea.tsx b/@navikt/core/react/src/form/textarea/Textarea.tsx
index e825a95017..0589c8df52 100644
--- a/@navikt/core/react/src/form/textarea/Textarea.tsx
+++ b/@navikt/core/react/src/form/textarea/Textarea.tsx
@@ -1,6 +1,5 @@
 import cl from "clsx";
 import React, { forwardRef, useState } from "react";
-import { ExclamationmarkTriangleFillIcon } from "@navikt/aksel-icons";
 import { BodyShort, ErrorMessage, Label } from "../../typography";
 import { omit } from "../../util";
 import TextareaAutosize from "../../util/TextareaAutoSize";
@@ -194,15 +193,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           aria-live="polite"
         >
           {showErrorMsg && (
-            <ErrorMessage
-              size={size}
-              icon={
-                <ExclamationmarkTriangleFillIcon
-                  color="var(--ax-text-danger)"
-                  aria-hidden
-                />
-              }
-            >
+            <ErrorMessage size={size} icon>
               {props.error}
             </ErrorMessage>
           )}
diff --git a/@navikt/core/react/src/typography/ErrorMessage.tsx b/@navikt/core/react/src/typography/ErrorMessage.tsx
index ba5c7ca783..c8635f2d2a 100644
--- a/@navikt/core/react/src/typography/ErrorMessage.tsx
+++ b/@navikt/core/react/src/typography/ErrorMessage.tsx
@@ -1,6 +1,7 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/types";
+import { ErrorMessageIcon } from "./ErrorMessageIcon";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 
@@ -17,7 +18,10 @@ export interface ErrorMessageProps
    */
   children: React.ReactNode;
 
-  icon?: React.ReactNode;
+  /**
+   * Render a triangular warning icon.
+   */
+  icon?: boolean;
 }
 
 /**
@@ -38,9 +42,23 @@ export const ErrorMessage: OverridableComponent<
   ErrorMessageProps,
   HTMLParagraphElement
 > = forwardRef(
-  ({ className, size, spacing, as: Component = "p", icon, ...rest }, ref) => (
-    <>
-      {icon}
+  (
+    {
+      children,
+      className,
+      size,
+      spacing,
+      as: Component = "p",
+      icon = false,
+      ...rest
+    },
+    ref,
+  ) => (
+    <span
+      className={cl("navds-error-message-wrapper", {
+        "navds-error-message-wrapper--small": size === "small",
+      })}
+    >
       <Component
         {...rest}
         ref={ref}
@@ -55,8 +73,11 @@ export const ErrorMessage: OverridableComponent<
             "navds-label--small": size === "small",
           },
         )}
-      />
-    </>
+      >
+        {icon && <ErrorMessageIcon />}
+        {children}
+      </Component>
+    </span>
   ),
 );
 
diff --git a/@navikt/core/react/src/typography/ErrorMessageIcon.tsx b/@navikt/core/react/src/typography/ErrorMessageIcon.tsx
new file mode 100644
index 0000000000..515079b3cd
--- /dev/null
+++ b/@navikt/core/react/src/typography/ErrorMessageIcon.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+
+export const ErrorMessageIcon = ({ ...props }) => (
+  <svg
+    viewBox="0 0 17 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    focusable={false}
+    aria-hidden
+    {...props}
+  >
+    <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>
+);

From f39ca8f2d286c6f3203df96f2d13da1952ab1dfb Mon Sep 17 00:00:00 2001
From: Julian Nymark <julian.nymark@nav.no>
Date: Wed, 18 Dec 2024 15:54:17 +0100
Subject: [PATCH 05/20] clean up css for errormessage, remove it from form.css

---
 .../core/css/darkside/form/form.darkside.css  | 13 ------
 .../core/css/darkside/typography.darkside.css | 13 ++----
 .../react/src/typography/ErrorMessage.tsx     | 40 ++++++++-----------
 3 files changed, 20 insertions(+), 46 deletions(-)

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 8b39ec5cc1..3b66ce679d 100644
--- a/@navikt/core/css/darkside/typography.darkside.css
+++ b/@navikt/core/css/darkside/typography.darkside.css
@@ -202,9 +202,10 @@
   margin-bottom: var(--ax-spacing-2);
 }
 
-.navds-error-message-wrapper {
-  align-items: flex-start;
+.navds-error-message.navds-error-message {
+  display: flex;
   color: var(--ax-text-danger);
+  gap: var(--ax-spacing-1);
 
   & svg {
     margin-top: 2px;
@@ -212,14 +213,6 @@
     width: 1em;
     height: 1em;
   }
-
-  & .navds-error-message.navds-error-message {
-    gap: 0;
-
-    &::before {
-      content: "";
-    }
-  }
 }
 
 .navds-error-message-wrapper--small {
diff --git a/@navikt/core/react/src/typography/ErrorMessage.tsx b/@navikt/core/react/src/typography/ErrorMessage.tsx
index c8635f2d2a..ed7d751e0e 100644
--- a/@navikt/core/react/src/typography/ErrorMessage.tsx
+++ b/@navikt/core/react/src/typography/ErrorMessage.tsx
@@ -54,30 +54,24 @@ export const ErrorMessage: OverridableComponent<
     },
     ref,
   ) => (
-    <span
-      className={cl("navds-error-message-wrapper", {
-        "navds-error-message-wrapper--small": size === "small",
-      })}
+    <Component
+      {...rest}
+      ref={ref}
+      className={cl(
+        "navds-error-message",
+        "navds-label",
+        className,
+        typoClassNames({
+          spacing,
+        }),
+        {
+          "navds-label--small": size === "small",
+        },
+      )}
     >
-      <Component
-        {...rest}
-        ref={ref}
-        className={cl(
-          "navds-error-message",
-          "navds-label",
-          className,
-          typoClassNames({
-            spacing,
-          }),
-          {
-            "navds-label--small": size === "small",
-          },
-        )}
-      >
-        {icon && <ErrorMessageIcon />}
-        {children}
-      </Component>
-    </span>
+      {icon && <ErrorMessageIcon />}
+      {children}
+    </Component>
   ),
 );
 

From 832b8c0a5bea96dd063b0b84c8e18d4919011db5 Mon Sep 17 00:00:00 2001
From: Julian Nymark <julian.nymark@nav.no>
Date: Wed, 18 Dec 2024 16:01:22 +0100
Subject: [PATCH 06/20] :bug: tweaks + use icon in Search

---
 @navikt/core/css/darkside/typography.darkside.css | 11 ++---------
 @navikt/core/react/src/form/search/Search.tsx     |  4 +++-
 2 files changed, 5 insertions(+), 10 deletions(-)

diff --git a/@navikt/core/css/darkside/typography.darkside.css b/@navikt/core/css/darkside/typography.darkside.css
index 3b66ce679d..bfac50cf3f 100644
--- a/@navikt/core/css/darkside/typography.darkside.css
+++ b/@navikt/core/css/darkside/typography.darkside.css
@@ -208,20 +208,13 @@
   gap: var(--ax-spacing-1);
 
   & svg {
-    margin-top: 2px;
-    flex: 1 0 auto;
+    margin-top: 0.15em;
+    flex: 0 0 auto;
     width: 1em;
     height: 1em;
   }
 }
 
-.navds-error-message-wrapper--small {
-  & svg {
-    margin-top: 2px;
-    flex: 1 0 auto;
-  }
-}
-
 /* -------------------------------- Utilities ------------------------------- */
 .navds-typo--truncate {
   overflow: hidden;
diff --git a/@navikt/core/react/src/form/search/Search.tsx b/@navikt/core/react/src/form/search/Search.tsx
index ce77637ddd..021f4d5361 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<HTMLInputElement, SearchProps>(
           aria-live="polite"
         >
           {showErrorMsg && (
-            <ErrorMessage size={size}>{props.error}</ErrorMessage>
+            <ErrorMessage size={size} icon>
+              {props.error}
+            </ErrorMessage>
           )}
         </div>
       </div>

From 465824e7b966e06ec4002616c064f232bcd14dac Mon Sep 17 00:00:00 2001
From: Julian Nymark <julian.nymark@nav.no>
Date: Wed, 18 Dec 2024 16:13:27 +0100
Subject: [PATCH 07/20] use icon for the rest of our form components

---
 .../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/select/Select.tsx |  4 +++-
 .../react/src/form/textfield/TextField.tsx    |  4 +++-
 .../stories/error-message.stories.tsx         | 23 +++++++++++++++++++
 8 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/@navikt/core/react/src/date/parts/DateInput.tsx b/@navikt/core/react/src/date/parts/DateInput.tsx
index 9302829bcd..3cea77d654 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<HTMLInputElement, DateInputProps>((props, ref) => {
         aria-relevant="additions removals"
         aria-live="polite"
       >
-        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
+        {showErrorMsg && (
+          <ErrorMessage size={size} icon>
+            {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
index f4d8f837a8..e45a04d7cc 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 && <ErrorMessage size={size}>{error}</ErrorMessage>}
+        {showErrorMsg && (
+          <ErrorMessage size={size} icon>
+            {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
index bd2e0b85d3..12deedc36d 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<
         </Checkbox>
       </div>
       <div className="navds-form-field__error" id={errorId} role="alert">
-        {showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
+        {showErrorMsg && (
+          <ErrorMessage size={size} icon>
+            {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
index 6e6bccff46..2592f6f3af 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<HTMLFieldSetElement, FieldsetProps>(
             className="navds-fieldset__error"
           >
             {showErrorMsg && (
-              <ErrorMessage size={size}>{props.error}</ErrorMessage>
+              <ErrorMessage size={size} icon>
+                {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
index 9eae612dc4..e2129d2192 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<HTMLInputElement, FileUploadDropzoneProps>(
           aria-relevant="additions removals"
           aria-live="polite"
         >
-          {showErrorMsg && <ErrorMessage>{error}</ErrorMessage>}
+          {showErrorMsg && <ErrorMessage icon>{error}</ErrorMessage>}
         </div>
       </div>
     );
diff --git a/@navikt/core/react/src/form/select/Select.tsx b/@navikt/core/react/src/form/select/Select.tsx
index c14b7a80fc..e3a92b8b61 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<HTMLSelectElement, SelectProps>(
           aria-live="polite"
         >
           {showErrorMsg && (
-            <ErrorMessage size={size}>{props.error}</ErrorMessage>
+            <ErrorMessage size={size} icon>
+              {props.error}
+            </ErrorMessage>
           )}
         </div>
       </div>
diff --git a/@navikt/core/react/src/form/textfield/TextField.tsx b/@navikt/core/react/src/form/textfield/TextField.tsx
index df9ed5bdd9..710032daee 100644
--- 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} icon>
+              {props.error}
+            </ErrorMessage>
           )}
         </div>
       </div>
diff --git a/@navikt/core/react/src/typography/stories/error-message.stories.tsx b/@navikt/core/react/src/typography/stories/error-message.stories.tsx
index c7d22c8055..28650df9e7 100644
--- 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,25 @@ export const OverrideTag: Story = {
   },
 };
 
+export const WithIcon: Story = {
+  render: () => (
+    <VStack gap="2">
+      <ErrorMessage size="medium" icon>
+        {lorem}
+      </ErrorMessage>
+      <ErrorMessage size="medium" icon>
+        {lorem}
+      </ErrorMessage>
+      <ErrorMessage size="small" icon>
+        {lorem}
+      </ErrorMessage>
+      <ErrorMessage size="small" icon>
+        {lorem}
+      </ErrorMessage>
+    </VStack>
+  ),
+};
+
 export const Chromatic: Story = {
   render: (...props) => (
     <div>
@@ -114,6 +133,10 @@ export const Chromatic: Story = {
         <h2>Override Tag</h2>
         {OverrideTag.render?.(...props)}
       </div>
+      <div>
+        <h2>With Icon</h2>
+        {WithIcon.render?.(...props)}
+      </div>
     </div>
   ),
   parameters: {

From 4395e28882d3fe469ddb878352f75da2f6bc28a9 Mon Sep 17 00:00:00 2001
From: Julian Nymark <julian.nymark@nav.no>
Date: Wed, 18 Dec 2024 16:23:49 +0100
Subject: [PATCH 08/20] backport new css to old form.css

---
 @navikt/core/css/form/form.css  | 13 -------------
 @navikt/core/css/typography.css | 11 ++++++++++-
 2 files changed, 10 insertions(+), 14 deletions(-)

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..2c0c03f9ad 100644
--- a/@navikt/core/css/typography.css
+++ b/@navikt/core/css/typography.css
@@ -212,8 +212,17 @@
   margin-bottom: var(--a-spacing-2);
 }
 
-.navds-error-message {
+.navds-error-message.navds-error-message {
+  display: flex;
   color: var(--ac-typo-error-text, var(--__ac-typo-error-text, var(--a-text-danger)));
+  gap: var(--a-spacing-1);
+}
+
+.navds-error-message.navds-error-message svg {
+  margin-top: 0.15em;
+  flex: 0 0 auto;
+  width: 1em;
+  height: 1em;
 }
 
 .navds-typo--truncate {

From 595bda5b981ecddbc885b542b20397805a36e96d Mon Sep 17 00:00:00 2001
From: Julian Nymark <julian.nymark@nav.no>
Date: Wed, 18 Dec 2024 16:37:07 +0100
Subject: [PATCH 09/20] :fire: remove unnecessary specification bump

---
 @navikt/core/css/darkside/typography.darkside.css | 2 +-
 @navikt/core/css/typography.css                   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/@navikt/core/css/darkside/typography.darkside.css b/@navikt/core/css/darkside/typography.darkside.css
index bfac50cf3f..54ba046d32 100644
--- a/@navikt/core/css/darkside/typography.darkside.css
+++ b/@navikt/core/css/darkside/typography.darkside.css
@@ -202,7 +202,7 @@
   margin-bottom: var(--ax-spacing-2);
 }
 
-.navds-error-message.navds-error-message {
+.navds-error-message {
   display: flex;
   color: var(--ax-text-danger);
   gap: var(--ax-spacing-1);
diff --git a/@navikt/core/css/typography.css b/@navikt/core/css/typography.css
index 2c0c03f9ad..bfc68d67c1 100644
--- a/@navikt/core/css/typography.css
+++ b/@navikt/core/css/typography.css
@@ -212,13 +212,13 @@
   margin-bottom: var(--a-spacing-2);
 }
 
-.navds-error-message.navds-error-message {
+.navds-error-message {
   display: flex;
   color: var(--ac-typo-error-text, var(--__ac-typo-error-text, var(--a-text-danger)));
   gap: var(--a-spacing-1);
 }
 
-.navds-error-message.navds-error-message svg {
+.navds-error-message svg {
   margin-top: 0.15em;
   flex: 0 0 auto;
   width: 1em;

From 0d6b00bebd36eb71862bacb5d2dd6103466c552b Mon Sep 17 00:00:00 2001
From: Julian Nymark <julian.nymark@nav.no>
Date: Wed, 18 Dec 2024 16:46:17 +0100
Subject: [PATCH 10/20] cleaner example story

---
 .../react/src/typography/stories/error-message.stories.tsx  | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/@navikt/core/react/src/typography/stories/error-message.stories.tsx b/@navikt/core/react/src/typography/stories/error-message.stories.tsx
index 28650df9e7..f071db1d90 100644
--- a/@navikt/core/react/src/typography/stories/error-message.stories.tsx
+++ b/@navikt/core/react/src/typography/stories/error-message.stories.tsx
@@ -99,12 +99,6 @@ export const WithIcon: Story = {
       <ErrorMessage size="medium" icon>
         {lorem}
       </ErrorMessage>
-      <ErrorMessage size="medium" icon>
-        {lorem}
-      </ErrorMessage>
-      <ErrorMessage size="small" icon>
-        {lorem}
-      </ErrorMessage>
       <ErrorMessage size="small" icon>
         {lorem}
       </ErrorMessage>

From 1a7d96cf74eb53b1fa096ec599d3c8115247df2e Mon Sep 17 00:00:00 2001
From: Julian Nymark <julian.nymark@nav.no>
Date: Wed, 18 Dec 2024 16:57:56 +0100
Subject: [PATCH 11/20] changeset

---
 .changeset/six-islands-exercise.md | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)
 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..aad31f263a
--- /dev/null
+++ b/.changeset/six-islands-exercise.md
@@ -0,0 +1,17 @@
+---
+"@navikt/ds-react": minor
+"@navikt/ds-css": minor
+---
+
+ErrorSummary: :sparkles: new prop to prefix error with a warning icon.
+Typography: replace warning dot with warning icon
+DateInput: replace warning dot with warning icon
+Combobox: replace warning dot with warning icon
+Combobox: replace warning dot with warning icon
+ConfirmationPanel: replace warning dot with warning icon
+Fieldset: replace warning dot with warning icon
+DropZone: replace warning dot with warning icon
+Search: replace warning dot with warning icon
+Select: replace warning dot with warning icon
+Textarea: replace warning dot with warning icon
+TextField: replace warning dot with warning icon

From 83023042b0c8d02fd77da0dcd694922f167e2dfe Mon Sep 17 00:00:00 2001
From: Julian Nymark <julian.nymark@nav.no>
Date: Wed, 18 Dec 2024 17:02:47 +0100
Subject: [PATCH 12/20] :recycle: icon -> showIcon

---
 @navikt/core/react/src/date/parts/DateInput.tsx             | 2 +-
 @navikt/core/react/src/form/combobox/Combobox.tsx           | 2 +-
 .../react/src/form/confirmation-panel/ConfirmationPanel.tsx | 2 +-
 @navikt/core/react/src/form/fieldset/Fieldset.tsx           | 2 +-
 .../react/src/form/file-upload/parts/dropzone/Dropzone.tsx  | 2 +-
 @navikt/core/react/src/form/search/Search.tsx               | 2 +-
 @navikt/core/react/src/form/select/Select.tsx               | 2 +-
 @navikt/core/react/src/form/textarea/Textarea.tsx           | 2 +-
 @navikt/core/react/src/form/textfield/TextField.tsx         | 2 +-
 @navikt/core/react/src/typography/ErrorMessage.tsx          | 6 +++---
 10 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/@navikt/core/react/src/date/parts/DateInput.tsx b/@navikt/core/react/src/date/parts/DateInput.tsx
index 3cea77d654..2ae265b192 100644
--- a/@navikt/core/react/src/date/parts/DateInput.tsx
+++ b/@navikt/core/react/src/date/parts/DateInput.tsx
@@ -151,7 +151,7 @@ const DateInput = forwardRef<HTMLInputElement, DateInputProps>((props, ref) => {
         aria-live="polite"
       >
         {showErrorMsg && (
-          <ErrorMessage size={size} icon>
+          <ErrorMessage size={size} showIcon>
             {props.error}
           </ErrorMessage>
         )}
diff --git a/@navikt/core/react/src/form/combobox/Combobox.tsx b/@navikt/core/react/src/form/combobox/Combobox.tsx
index e45a04d7cc..ee680a04f0 100644
--- a/@navikt/core/react/src/form/combobox/Combobox.tsx
+++ b/@navikt/core/react/src/form/combobox/Combobox.tsx
@@ -72,7 +72,7 @@ export const Combobox = forwardRef<
         aria-live="polite"
       >
         {showErrorMsg && (
-          <ErrorMessage size={size} icon>
+          <ErrorMessage size={size} showIcon>
             {error}
           </ErrorMessage>
         )}
diff --git a/@navikt/core/react/src/form/confirmation-panel/ConfirmationPanel.tsx b/@navikt/core/react/src/form/confirmation-panel/ConfirmationPanel.tsx
index 12deedc36d..567d14ba1a 100644
--- a/@navikt/core/react/src/form/confirmation-panel/ConfirmationPanel.tsx
+++ b/@navikt/core/react/src/form/confirmation-panel/ConfirmationPanel.tsx
@@ -92,7 +92,7 @@ export const ConfirmationPanel = forwardRef<
       </div>
       <div className="navds-form-field__error" id={errorId} role="alert">
         {showErrorMsg && (
-          <ErrorMessage size={size} icon>
+          <ErrorMessage size={size} showIcon>
             {props.error}
           </ErrorMessage>
         )}
diff --git a/@navikt/core/react/src/form/fieldset/Fieldset.tsx b/@navikt/core/react/src/form/fieldset/Fieldset.tsx
index 2592f6f3af..003aac15f3 100644
--- a/@navikt/core/react/src/form/fieldset/Fieldset.tsx
+++ b/@navikt/core/react/src/form/fieldset/Fieldset.tsx
@@ -113,7 +113,7 @@ export const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
             className="navds-fieldset__error"
           >
             {showErrorMsg && (
-              <ErrorMessage size={size} icon>
+              <ErrorMessage size={size} showIcon>
                 {props.error}
               </ErrorMessage>
             )}
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 e2129d2192..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<HTMLInputElement, FileUploadDropzoneProps>(
           aria-relevant="additions removals"
           aria-live="polite"
         >
-          {showErrorMsg && <ErrorMessage icon>{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
index 021f4d5361..5c5cd68bb7 100644
--- a/@navikt/core/react/src/form/search/Search.tsx
+++ b/@navikt/core/react/src/form/search/Search.tsx
@@ -263,7 +263,7 @@ export const Search = forwardRef<HTMLInputElement, SearchProps>(
           aria-live="polite"
         >
           {showErrorMsg && (
-            <ErrorMessage size={size} icon>
+            <ErrorMessage size={size} showIcon>
               {props.error}
             </ErrorMessage>
           )}
diff --git a/@navikt/core/react/src/form/select/Select.tsx b/@navikt/core/react/src/form/select/Select.tsx
index e3a92b8b61..0f217c6fcb 100644
--- a/@navikt/core/react/src/form/select/Select.tsx
+++ b/@navikt/core/react/src/form/select/Select.tsx
@@ -151,7 +151,7 @@ export const Select = forwardRef<HTMLSelectElement, SelectProps>(
           aria-live="polite"
         >
           {showErrorMsg && (
-            <ErrorMessage size={size} icon>
+            <ErrorMessage size={size} showIcon>
               {props.error}
             </ErrorMessage>
           )}
diff --git a/@navikt/core/react/src/form/textarea/Textarea.tsx b/@navikt/core/react/src/form/textarea/Textarea.tsx
index 0589c8df52..730d4c5b1b 100644
--- a/@navikt/core/react/src/form/textarea/Textarea.tsx
+++ b/@navikt/core/react/src/form/textarea/Textarea.tsx
@@ -193,7 +193,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
           aria-live="polite"
         >
           {showErrorMsg && (
-            <ErrorMessage size={size} icon>
+            <ErrorMessage size={size} showIcon>
               {props.error}
             </ErrorMessage>
           )}
diff --git a/@navikt/core/react/src/form/textfield/TextField.tsx b/@navikt/core/react/src/form/textfield/TextField.tsx
index 710032daee..34db65b9a3 100644
--- a/@navikt/core/react/src/form/textfield/TextField.tsx
+++ b/@navikt/core/react/src/form/textfield/TextField.tsx
@@ -127,7 +127,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
           aria-live="polite"
         >
           {showErrorMsg && (
-            <ErrorMessage size={size} icon>
+            <ErrorMessage size={size} showIcon>
               {props.error}
             </ErrorMessage>
           )}
diff --git a/@navikt/core/react/src/typography/ErrorMessage.tsx b/@navikt/core/react/src/typography/ErrorMessage.tsx
index ed7d751e0e..21a83a79e7 100644
--- a/@navikt/core/react/src/typography/ErrorMessage.tsx
+++ b/@navikt/core/react/src/typography/ErrorMessage.tsx
@@ -21,7 +21,7 @@ export interface ErrorMessageProps
   /**
    * Render a triangular warning icon.
    */
-  icon?: boolean;
+  showIcon?: boolean;
 }
 
 /**
@@ -49,7 +49,7 @@ export const ErrorMessage: OverridableComponent<
       size,
       spacing,
       as: Component = "p",
-      icon = false,
+      showIcon = false,
       ...rest
     },
     ref,
@@ -69,7 +69,7 @@ export const ErrorMessage: OverridableComponent<
         },
       )}
     >
-      {icon && <ErrorMessageIcon />}
+      {showIcon && <ErrorMessageIcon />}
       {children}
     </Component>
   ),

From 5eddff85579d2cac482bdf5f7a76fc3b25b48a4c Mon Sep 17 00:00:00 2001
From: Julian Nymark <julian.nymark@nav.no>
Date: Thu, 19 Dec 2024 12:19:26 +0100
Subject: [PATCH 13/20] make flex & gap opt-in with 'icon'

---
 @navikt/core/css/darkside/typography.darkside.css        | 9 ++++++---
 @navikt/core/css/typography.css                          | 7 +++++--
 @navikt/core/react/src/typography/ErrorMessage.tsx       | 1 +
 .../src/typography/stories/error-message.stories.tsx     | 8 +++++---
 4 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/@navikt/core/css/darkside/typography.darkside.css b/@navikt/core/css/darkside/typography.darkside.css
index 54ba046d32..fbb5a91af0 100644
--- a/@navikt/core/css/darkside/typography.darkside.css
+++ b/@navikt/core/css/darkside/typography.darkside.css
@@ -203,11 +203,14 @@
 }
 
 .navds-error-message {
-  display: flex;
   color: var(--ax-text-danger);
-  gap: var(--ax-spacing-1);
 
-  & svg {
+  &.navds-error-message--show-icon {
+    display: flex;
+    gap: var(--ax-spacing-1);
+  }
+
+  &.navds-error-message--show-icon svg {
     margin-top: 0.15em;
     flex: 0 0 auto;
     width: 1em;
diff --git a/@navikt/core/css/typography.css b/@navikt/core/css/typography.css
index bfc68d67c1..dcf51e1fa2 100644
--- a/@navikt/core/css/typography.css
+++ b/@navikt/core/css/typography.css
@@ -213,12 +213,15 @@
 }
 
 .navds-error-message {
-  display: flex;
   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 svg {
+.navds-error-message.navds-error-message--show-icon svg {
   margin-top: 0.15em;
   flex: 0 0 auto;
   width: 1em;
diff --git a/@navikt/core/react/src/typography/ErrorMessage.tsx b/@navikt/core/react/src/typography/ErrorMessage.tsx
index 21a83a79e7..02a3a5038c 100644
--- a/@navikt/core/react/src/typography/ErrorMessage.tsx
+++ b/@navikt/core/react/src/typography/ErrorMessage.tsx
@@ -66,6 +66,7 @@ export const ErrorMessage: OverridableComponent<
         }),
         {
           "navds-label--small": size === "small",
+          "navds-error-message--show-icon": showIcon,
         },
       )}
     >
diff --git a/@navikt/core/react/src/typography/stories/error-message.stories.tsx b/@navikt/core/react/src/typography/stories/error-message.stories.tsx
index f071db1d90..47ddf5fba6 100644
--- a/@navikt/core/react/src/typography/stories/error-message.stories.tsx
+++ b/@navikt/core/react/src/typography/stories/error-message.stories.tsx
@@ -93,15 +93,17 @@ export const OverrideTag: Story = {
   },
 };
 
-export const WithIcon: Story = {
+export const WithAndWithoutIcon: Story = {
   render: () => (
     <VStack gap="2">
-      <ErrorMessage size="medium" icon>
+      <ErrorMessage size="medium" showIcon>
         {lorem}
       </ErrorMessage>
-      <ErrorMessage size="small" icon>
+      <ErrorMessage size="small" showIcon>
         {lorem}
       </ErrorMessage>
+      <ErrorMessage size="medium">{lorem}</ErrorMessage>
+      <ErrorMessage size="small">{lorem}</ErrorMessage>
     </VStack>
   ),
 };

From 13fed06f028589cf6c44b64e41db424b59819bf8 Mon Sep 17 00:00:00 2001
From: Julian Nymark <julian.nymark@nav.no>
Date: Thu, 19 Dec 2024 12:23:54 +0100
Subject: [PATCH 14/20] change: inline ErrorMessageIcon

---
 .../react/src/typography/ErrorMessage.tsx     | 18 ++++++++++++++++--
 .../react/src/typography/ErrorMessageIcon.tsx | 19 -------------------
 2 files changed, 16 insertions(+), 21 deletions(-)
 delete mode 100644 @navikt/core/react/src/typography/ErrorMessageIcon.tsx

diff --git a/@navikt/core/react/src/typography/ErrorMessage.tsx b/@navikt/core/react/src/typography/ErrorMessage.tsx
index 02a3a5038c..e61f0003d2 100644
--- a/@navikt/core/react/src/typography/ErrorMessage.tsx
+++ b/@navikt/core/react/src/typography/ErrorMessage.tsx
@@ -1,7 +1,6 @@
 import cl from "clsx";
 import React, { forwardRef } from "react";
 import { OverridableComponent } from "../util/types";
-import { ErrorMessageIcon } from "./ErrorMessageIcon";
 import { TypoProps } from "./types";
 import { typoClassNames } from "./util";
 
@@ -70,7 +69,22 @@ export const ErrorMessage: OverridableComponent<
         },
       )}
     >
-      {showIcon && <ErrorMessageIcon />}
+      {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/ErrorMessageIcon.tsx b/@navikt/core/react/src/typography/ErrorMessageIcon.tsx
deleted file mode 100644
index 515079b3cd..0000000000
--- a/@navikt/core/react/src/typography/ErrorMessageIcon.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from "react";
-
-export const ErrorMessageIcon = ({ ...props }) => (
-  <svg
-    viewBox="0 0 17 16"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    focusable={false}
-    aria-hidden
-    {...props}
-  >
-    <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>
-);

From 1e07e1169b4251e40513e7aa25fbb9f8dc2a8a79 Mon Sep 17 00:00:00 2001
From: Julian Nymark <julian.nymark@nav.no>
Date: Thu, 19 Dec 2024 12:27:26 +0100
Subject: [PATCH 15/20] change: nest css more

---
 @navikt/core/css/darkside/typography.darkside.css | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/@navikt/core/css/darkside/typography.darkside.css b/@navikt/core/css/darkside/typography.darkside.css
index fbb5a91af0..df677cf240 100644
--- a/@navikt/core/css/darkside/typography.darkside.css
+++ b/@navikt/core/css/darkside/typography.darkside.css
@@ -208,13 +208,13 @@
   &.navds-error-message--show-icon {
     display: flex;
     gap: var(--ax-spacing-1);
-  }
 
-  &.navds-error-message--show-icon svg {
-    margin-top: 0.15em;
-    flex: 0 0 auto;
-    width: 1em;
-    height: 1em;
+    & svg {
+      margin-top: 0.15em;
+      flex: 0 0 auto;
+      width: 1em;
+      height: 1em;
+    }
   }
 }
 

From dc58c0df7f962e1a0478a238541c40a476d8c77c Mon Sep 17 00:00:00 2001
From: Julian Nymark <julian.nymark@nav.no>
Date: Thu, 19 Dec 2024 12:47:02 +0100
Subject: [PATCH 16/20] revert test changes (utility in multiple variants on
 one for DOM diffing, but probably no longer useful)

---
 .../react/src/typography/stories/error-message.stories.tsx    | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/@navikt/core/react/src/typography/stories/error-message.stories.tsx b/@navikt/core/react/src/typography/stories/error-message.stories.tsx
index 47ddf5fba6..1770f1f459 100644
--- a/@navikt/core/react/src/typography/stories/error-message.stories.tsx
+++ b/@navikt/core/react/src/typography/stories/error-message.stories.tsx
@@ -93,7 +93,7 @@ export const OverrideTag: Story = {
   },
 };
 
-export const WithAndWithoutIcon: Story = {
+export const WithIcon: Story = {
   render: () => (
     <VStack gap="2">
       <ErrorMessage size="medium" showIcon>
@@ -102,8 +102,6 @@ export const WithAndWithoutIcon: Story = {
       <ErrorMessage size="small" showIcon>
         {lorem}
       </ErrorMessage>
-      <ErrorMessage size="medium">{lorem}</ErrorMessage>
-      <ErrorMessage size="small">{lorem}</ErrorMessage>
     </VStack>
   ),
 };

From 499220ea178627ebe41630717e4f1aaf637d125a Mon Sep 17 00:00:00 2001
From: Julian Nymark <julian.nymark@nav.no>
Date: Thu, 19 Dec 2024 12:47:30 +0100
Subject: [PATCH 17/20] debloat changeset

---
 .changeset/six-islands-exercise.md | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/.changeset/six-islands-exercise.md b/.changeset/six-islands-exercise.md
index aad31f263a..7ed2fe98aa 100644
--- a/.changeset/six-islands-exercise.md
+++ b/.changeset/six-islands-exercise.md
@@ -4,14 +4,3 @@
 ---
 
 ErrorSummary: :sparkles: new prop to prefix error with a warning icon.
-Typography: replace warning dot with warning icon
-DateInput: replace warning dot with warning icon
-Combobox: replace warning dot with warning icon
-Combobox: replace warning dot with warning icon
-ConfirmationPanel: replace warning dot with warning icon
-Fieldset: replace warning dot with warning icon
-DropZone: replace warning dot with warning icon
-Search: replace warning dot with warning icon
-Select: replace warning dot with warning icon
-Textarea: replace warning dot with warning icon
-TextField: replace warning dot with warning icon

From a058f4e439620290f55837ee7be7ae96fa1b1781 Mon Sep 17 00:00:00 2001
From: Julian Nymark <julian.nymark@nav.no>
Date: Thu, 19 Dec 2024 14:07:08 +0100
Subject: [PATCH 18/20] mention form components in changeset

---
 .changeset/six-islands-exercise.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.changeset/six-islands-exercise.md b/.changeset/six-islands-exercise.md
index 7ed2fe98aa..53ddfd4d88 100644
--- a/.changeset/six-islands-exercise.md
+++ b/.changeset/six-islands-exercise.md
@@ -4,3 +4,4 @@
 ---
 
 ErrorSummary: :sparkles: new prop to prefix error with a warning icon.
+all form components: replace dot with warning icon in error message.message

From 7d7b100b9173e2c4223b0c394fe864297ada6f80 Mon Sep 17 00:00:00 2001
From: Julian Nymark <julian.nymark@nav.no>
Date: Thu, 19 Dec 2024 14:07:49 +0100
Subject: [PATCH 19/20] change: typo in changeset

---
 .changeset/six-islands-exercise.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/six-islands-exercise.md b/.changeset/six-islands-exercise.md
index 53ddfd4d88..2b350d0c98 100644
--- a/.changeset/six-islands-exercise.md
+++ b/.changeset/six-islands-exercise.md
@@ -4,4 +4,4 @@
 ---
 
 ErrorSummary: :sparkles: new prop to prefix error with a warning icon.
-all form components: replace dot with warning icon in error message.message
+All form components: replace dot with warning icon in error message.message.

From 6646541a45f5f1432c7c6d2c94b85af562d4fb97 Mon Sep 17 00:00:00 2001
From: Julian Nymark <julian.nymark@nav.no>
Date: Thu, 19 Dec 2024 14:08:19 +0100
Subject: [PATCH 20/20] change: typo in changeset

---
 .changeset/six-islands-exercise.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/six-islands-exercise.md b/.changeset/six-islands-exercise.md
index 2b350d0c98..14916b5b18 100644
--- a/.changeset/six-islands-exercise.md
+++ b/.changeset/six-islands-exercise.md
@@ -4,4 +4,4 @@
 ---
 
 ErrorSummary: :sparkles: new prop to prefix error with a warning icon.
-All form components: replace dot with warning icon in error message.message.
+All form components: replace dot with warning icon in error message.