[Darkside] Quality assurance P6 (Fileupload) (#3524)

* 📝 Update FileUpload CSS-artifacts * 🐛 Synced release-text with updated role-colors
navikt · Jan 28, 2025 · a8cbd92 · a8cbd92
1 parent 2700f7a
commit a8cbd92
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 28 deletions.
diff --git 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,28 +202,15 @@ 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;
   transition-timing-function: cubic-bezier(0, 0.3, 0.15, 1);
   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
@@ -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>