From a8cbd92e1c9a21c92be440c4906d44a08b7ea7d7 Mon Sep 17 00:00:00 2001
From: Ken <26967723+KenAJoh@users.noreply.github.com>
Date: Tue, 28 Jan 2025 20:38:29 +0100
Subject: [PATCH] [Darkside] Quality assurance P6 (Fileupload) (#3524)

* :memo: Update FileUpload CSS-artifacts

* :bug: Synced release-text with updated role-colors
---
 .../darkside/form/file-upload.darkside.css    | 31 +++++++------------
 .../src/form/file-upload/parts/item/Item.tsx  | 11 ++-----
 2 files changed, 14 insertions(+), 28 deletions(-)

diff --git a/@navikt/core/css/darkside/form/file-upload.darkside.css b/@navikt/core/css/darkside/form/file-upload.darkside.css
index a63deb1d19..08186fd858 100644
--- a/@navikt/core/css/darkside/form/file-upload.darkside.css
+++ b/@navikt/core/css/darkside/form/file-upload.darkside.css
@@ -26,19 +26,23 @@
     border-color: var(--ax-border-accent-strong);
 
     & > .navds-dropzone__area-button {
-      color: var(--ax-text-accent-strong);
       background-color: var(--ax-bg-accent-moderate-hover);
       box-shadow: inset 0 0 0 2px var(--ax-bg-accent-strong-hover);
     }
   }
 
-  &:active .navds-dropzone__area-button {
-    background-color: var(--ax-bg-accent-strong-pressed);
-    color: var(--ax-text-accent-contrast);
-    box-shadow: none;
+  &:active:not([data-disabled="true"]) {
+    & > .navds-dropzone__area-button {
+      background-color: var(--ax-bg-accent-strong-pressed);
+      color: var(--ax-text-accent-contrast);
+      box-shadow: none;
+    }
   }
 
   &[data-disabled="true"] {
+    --__axc-dropzone-background: var(--ax-bg-soft);
+
+    border-color: var(--ax-border-subtleA);
     cursor: default;
   }
 }
@@ -130,7 +134,7 @@
 }
 
 .navds-dropzone--dragging .navds-dropzone__area-release {
-  color: var(--ax-text-accent-strong);
+  color: var(--ax-text-accent);
   top: 50%;
   transform: translateY(-50%);
 }
@@ -198,7 +202,6 @@ li.navds-file-item {
 }
 
 .navds-file-item__error {
-  color: var(--ax-text-danger);
   display: grid;
   transition-property: grid-template-rows, padding-top;
   transition-duration: 250ms;
@@ -206,20 +209,8 @@ li.navds-file-item {
   overflow: hidden;
   grid-template-rows: 0fr;
 
-  & .navds-file-item__error {
+  .navds-file-item--error & {
     grid-template-rows: 1fr;
     padding-top: var(--ax-space-4);
   }
 }
-
-.navds-file-item__error-content {
-  min-height: 0;
-  display: flex;
-  gap: var(--ax-space-4);
-
-  & > svg {
-    flex-shrink: 0;
-    height: 1rem;
-    margin-top: 0.1rem;
-  }
-}
diff --git a/@navikt/core/react/src/form/file-upload/parts/item/Item.tsx b/@navikt/core/react/src/form/file-upload/parts/item/Item.tsx
index fa12aae2f4..4053b5cb35 100644
--- a/@navikt/core/react/src/form/file-upload/parts/item/Item.tsx
+++ b/@navikt/core/react/src/form/file-upload/parts/item/Item.tsx
@@ -1,7 +1,6 @@
 import cl from "clsx";
 import React, { MouseEvent, forwardRef } from "react";
-import { ExclamationmarkTriangleIcon } from "@navikt/aksel-icons";
-import { BodyShort } from "../../../../typography";
+import { BodyShort, ErrorMessage } from "../../../../typography";
 import { OverridableComponent } from "../../../../util";
 import { useI18n } from "../../../../util/i18n/i18n.hooks";
 import { ComponentTranslation } from "../../../../util/i18n/i18n.types";
@@ -125,13 +124,9 @@ export const Item: OverridableComponent<FileUploadItemProps, HTMLDivElement> =
                 aria-live="polite"
               >
                 {showError && (
-                  <BodyShort
-                    size="small"
-                    className="navds-file-item__error-content"
-                  >
-                    <ExclamationmarkTriangleIcon aria-hidden />
+                  <ErrorMessage size="small" showIcon>
                     {error}
-                  </BodyShort>
+                  </ErrorMessage>
                 )}
               </div>
             </div>