fix(Upload): add gap between file and remove button (#4382)

dnbexperience · Dec 11, 2024 · 04c1f6a · 04c1f6a
1 parent 43a64d4
commit 04c1f6a
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 17 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/upload/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/upload/Examples.tsx
@@ -44,7 +44,7 @@ export const UploadPrefilledFileList = () => (
               errorMessage: 'This is no real file!',
             },
           ])
-        }, [])
+        }, [setFiles])
 
         return <Upload acceptedFileTypes={['jpg', 'png']} id="file-list" />
       }
@@ -128,7 +128,7 @@ export const UploadRemoveFile = () => (
 
               reader.readAsDataURL(file)
             })
-          }, [files])
+          }, [files, images])
 
           return (
             <Section aria-label="List of chosen images">
@@ -368,8 +368,15 @@ export const UploadOnFileClick = () => (
             {
               file: createMockFile('1501870.jpg', 123, 'image/png'),
             },
+            {
+              file: createMockFile(
+                'file-name-that-is-very-long-and-has-letters.png',
+                123,
+                'image/png',
+              ),
+            },
           ])
-        }, [])
+        }, [setFiles])
 
         async function mockAsyncFileFetching({ fileItem }) {
           const request = createRequest()
@@ -385,13 +392,11 @@ export const UploadOnFileClick = () => (
         }
 
         return (
-          <>
-            <Upload
-              acceptedFileTypes={['jpg', 'png']}
-              id="upload-on-file-click"
-              onFileClick={mockAsyncFileFetching}
-            />
-          </>
+          <Upload
+            acceptedFileTypes={['jpg', 'png']}
+            id="upload-on-file-click"
+            onFileClick={mockAsyncFileFetching}
+          />
         )
       }
 

diff --git a/...upload-for-sbanken-have-to-match-anchor-looks-when-displaying-a-button.snap.png b/...upload-for-sbanken-have-to-match-anchor-looks-when-displaying-a-button.snap.png
diff --git a/...ts__/upload-for-ui-have-to-match-anchor-looks-when-displaying-a-button.snap.png b/...ts__/upload-for-ui-have-to-match-anchor-looks-when-displaying-a-button.snap.png
diff --git a/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap b/packages/dnb-eufemia/src/components/upload/__tests__/__snapshots__/Upload.test.tsx.snap
@@ -818,13 +818,13 @@ button .dnb-form-status__text {
 }
 .dnb-upload__file-cell__content {
   display: flex;
-  flex-direction: row;
+  column-gap: var(--spacing-small);
   justify-content: space-between;
   align-items: center;
 }
 .dnb-upload__file-cell__content__left {
   display: flex;
-  flex-direction: row;
+  column-gap: var(--spacing-small);
   align-items: center;
 }
 .dnb-upload__file-cell__content__left .dnb-icon {
@@ -839,7 +839,6 @@ button .dnb-form-status__text {
 .dnb-upload__file-cell__text-container {
   display: flex;
   flex-direction: column;
-  margin-left: var(--spacing-small);
 }
 .dnb-upload__file-cell__text-container--loading {
   font-size: var(--font-size-basis);

diff --git a/packages/dnb-eufemia/src/components/upload/style/dnb-upload.scss b/packages/dnb-eufemia/src/components/upload/style/dnb-upload.scss
@@ -106,14 +106,14 @@
 
     &__content {
       display: flex;
-      flex-direction: row;
+      column-gap: var(--spacing-small);
 
       justify-content: space-between;
       align-items: center;
 
       &__left {
         display: flex;
-        flex-direction: row;
+        column-gap: var(--spacing-small);
         align-items: center;
 
         .dnb-icon {
@@ -134,8 +134,6 @@
       display: flex;
       flex-direction: column;
 
-      margin-left: var(--spacing-small);
-
       &--loading {
         font-size: var(--font-size-basis);
       }