fix(Upload): unnecessary spacing when not providing title and text (

#4205)
dnbexperience · Oct 31, 2024 · 59845d0 · 59845d0
1 parent 476b60a
commit 59845d0
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 11 deletions.
diff --git a/packages/dnb-eufemia/src/components/upload/UploadInfo.tsx b/packages/dnb-eufemia/src/components/upload/UploadInfo.tsx
@@ -12,6 +12,7 @@ import Tr from '../table/TableTr'
 import Th from '../table/TableTh'
 import Td from '../table/TableTd'
 import { UploadAcceptedFileTypeObject, UploadProps } from './types'
+import Flex from '../../components/Flex'
 
 const prettifyAcceptedFileFormats = (acceptedFileTypes) =>
   acceptedFileTypes.sort().join(', ').toUpperCase()
@@ -57,19 +58,18 @@ const UploadInfo = () => {
     displayFilesAmountLimitItem
 
   return (
-    <>
-      {title && <Lead space="0">{title}</Lead>}
+    <Flex.Stack gap="small">
+      {(title || text) && (
+        <Flex.Stack gap="xx-small">
+          {title && <Lead space="0">{title}</Lead>}
 
-      {text && (
-        <P top="xx-small" className="dnb-upload__text">
-          {text}
-        </P>
+          {text && <P className="dnb-upload__text">{text}</P>}
+        </Flex.Stack>
       )}
-
       {children}
 
       {displayDl && (
-        <Dl top="small" bottom={0} layout="horizontal">
+        <Dl bottom={0} layout="horizontal">
           {displayAcceptedFileFormatsListItem && (
             <Dl.Item>
               <Dt>{fileTypeDescription}</Dt>
@@ -97,10 +97,11 @@ const UploadInfo = () => {
           )}
         </Dl>
       )}
+
       {displayAcceptedFileFormatsTable && (
         <UploadInfoAcceptedFileTypesTable />
       )}
-    </>
+    </Flex.Stack>
   )
 }
 

diff --git a/...s__/upload-for-sbanken-have-to-match-when-not-providing-title-and-text.snap.png b/...s__/upload-for-sbanken-have-to-match-when-not-providing-title-and-text.snap.png
diff --git a/...pshots__/upload-for-ui-have-to-match-when-not-providing-title-and-text.snap.png b/...pshots__/upload-for-ui-have-to-match-when-not-providing-title-and-text.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
@@ -852,7 +852,7 @@ button .dnb-form-status__text {
 .dnb-upload__accepted-file-types-table.dnb-table thead th {
   font-weight: var(--font-weight-medium);
   font-size: var(--font-size-basis);
-  padding-top: var(--spacing-small);
+  padding-top: 0;
 }
 .dnb-upload__accepted-file-types-table.dnb-table thead th:first-child {
   padding-left: 0;

diff --git a/packages/dnb-eufemia/src/components/upload/style/dnb-upload.scss b/packages/dnb-eufemia/src/components/upload/style/dnb-upload.scss
@@ -151,7 +151,7 @@
       & thead th {
         font-weight: var(--font-weight-medium);
         font-size: var(--font-size-basis);
-        padding-top: var(--spacing-small);
+        padding-top: 0;
         &:first-child {
           padding-left: 0;
         }