feat(ValidationMessage): icon when error (#2596)

this syncs code with figma

---------

Co-authored-by: Eirik Backer <[email protected]>
Co-authored-by: eirikbacker <[email protected]>

.changeset/clean-lizards-chew.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-css": patch
+---
+
+ValidationMessage: Add icon when `error={true}`

packages/css/alert.css

@@ -21,12 +21,10 @@
 
   & > :is(h1, h2, h3, h4, h5, h6):first-child::before /* If Alert starts with Heading, align icon to this */,
   &:not(:has(> :is(h1, h2, h3, h4, h5, h6):first-child))::before /* If there is no Heading, align icon to Alert itself */ {
-    background-color: var(--dsc-alert-icon-color);
+    background: var(--dsc-alert-icon-color);
     content: '';
-    display: block;
     height: var(--dsc-alert-icon-size);
     margin-inline: calc((var(--dsc-alert-icon-size) + var(--dsc-alert-gap)) * -1); /* Using margin instead of top/left to avoid position: relative and to support dir="rtl" */
-
     mask: var(--dsc-alert-icon-url) center / contain no-repeat;
     position: absolute;
     translate: 0 calc((1lh - var(--dsc-alert-icon-size)) / 2); /* Center icon to line height */

packages/css/validation-message.css

@@ -1,21 +1,45 @@
 .ds-validation-message {
-  margin: 0;
+  --dsc-validation-message-icon-url: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath fill-rule='evenodd' d='M11.15 4.5a.98.98 0 0 1 1.7 0l8.52 14.74a.98.98 0 0 1-.85 1.48H3.48a.98.98 0 0 1-.85-1.48L11.15 4.5ZM12 9.24a1 1 0 0 1 1 1V14a1 1 0 1 1-2 0v-3.75a1 1 0 0 1 1-1ZM12 18a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z' /%3E%3C/svg%3E");
+  --dsc-validation-message-icon-size: var(--ds-sizing-7);
+  --dsc-validation-message-gap: var(--ds-spacing-2);
+
+  margin: 0; /* Reset if rendered with <p> */
 
   @composes ds-validation-message--md from './base/base.css';
 
   &[data-size='xs'] {
+    --dsc-validation-message-icon-size: var(--ds-sizing-5);
+    --dsc-validation-message-gap: var(--ds-spacing-1);
+
     @composes ds-validation-message--xs from './base/base.css';
   }
 
   &[data-size='sm'] {
+    --dsc-validation-message-icon-size: var(--ds-sizing-6);
+
     @composes ds-validation-message--sm from './base/base.css';
   }
 
   &[data-size='lg'] {
+    --dsc-validation-message-icon-size: var(--ds-sizing-8);
+
     @composes ds-validation-message--lg from './base/base.css';
   }
 
-  &[data-error] {
+  /* Only render error icon if the ValidationMessage actually contains an error message */
+  &[data-error]:not(:empty) {
     color: var(--ds-color-danger-text-subtle);
+    padding-inline-start: calc(var(--dsc-validation-message-icon-size) + var(--dsc-validation-message-gap));
+
+    &::before {
+      background: currentcolor;
+      content: '';
+      height: var(--dsc-validation-message-icon-size);
+      margin-inline: calc((var(--dsc-validation-message-icon-size) + var(--dsc-validation-message-gap)) * -1); /* Using margin instead of top/left to avoid position: relative and to support dir="rtl" */
+      mask: var(--dsc-validation-message-icon-url) center / contain no-repeat;
+      position: absolute;
+      translate: 0 calc((1lh - var(--dsc-validation-message-icon-size)) / 2); /* Center icon to line height */
+      width: var(--dsc-validation-message-icon-size);
+    }
   }
 }