fix(FileUpload): remove excessive margins (#2242)

.changeset/witty-swans-impress.md

@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix(FileUpload): remove excessive margins

packages/blade/src/components/FileUpload/FileUpload.web.tsx

@@ -208,12 +208,7 @@ const _FileUpload: React.ForwardRefRenderFunction<BladeElementRef, FileUploadPro
             width: '100%',
           }}
         >
-          <BaseBox
-            display="flex"
-            flexDirection="column"
-            width="100%"
-            marginBottom={willRenderHintText ? 'spacing.0' : 'spacing.5'}
-          >
+          <BaseBox display="flex" flexDirection="column" width="100%">
             <StyledFileUploadWrapper
               size={size}
               isDisabled={isDisabled}
@@ -337,7 +332,6 @@ const _FileUpload: React.ForwardRefRenderFunction<BladeElementRef, FileUploadPro
           marginLeft={makeSize(
             label && isLabelLeftPositioned ? formHintLeftLabelMarginLeft[size] : 0,
           )}
-          marginBottom="spacing.5"
         >
           <BaseBox display="flex" flexDirection="row" justifyContent="'space-between">
             <FormHint
@@ -355,13 +349,13 @@ const _FileUpload: React.ForwardRefRenderFunction<BladeElementRef, FileUploadPro
         </BaseBox>
       )}
       {!isOneFileSelectedWithSingleUpload &&
-        selectedFiles.map((file) => (
+        selectedFiles.map((file, index) => (
           <BaseBox
             key={file.id}
             marginLeft={makeSize(
               label && isLabelLeftPositioned ? formHintLeftLabelMarginLeft[size] : 0,
             )}
-            marginBottom="spacing.3"
+            marginTop={index === 0 ? 'spacing.5' : 'spacing.3'}
           >
             <FileUploadItem
               file={file}

packages/blade/src/components/FileUpload/__tests__/__snapshots__/FileUpload.ssr.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<FileUpload /> should render in SSR 1`] = `"<div id="root"><div data-blade-component="file-upload" class="BaseBox-bmPWx iAvyvB"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><span style="width:auto;flex-shrink:0;margin-right:0px" id="fileuploadinput-undefined-label-undefined" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO kCEKIT" data-blade-component="text">Upload GST certificate</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">, Upload .jpg, .jpeg, or .png file only</p></div></div></div></span><label style="cursor:pointer;width:100%" data-blade-component="file-upload-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx bVySqA"><div data-comp="f" data-blade-component="base-box" class="BaseBox-bmPWx StyledFileUploadWrapper-sc-1wln1sx-0 guVuJK ktRDSa"><div data-blade-component="box" class="BaseBox-bmPWx cSvwKg"><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Drag files here or<!-- --> </p><input id="fileuploadinput-undefined-input-undefined" name="single-file-upload-input" type="file" accept="image/*" aria-required="false" aria-invalid="false" aria-disabled="false" aria-describedby="fileuploadinput-undefined-label-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 cYUiqI"/><div data-blade-component="box" class="BaseBox-bmPWx gTlwBH"><div data-blade-component="box" class="BaseBox-bmPWx jTWYOz"><p class="StyledBaseText-dVBfTO eRPBEA" data-blade-component="text">Upload</p></div></div></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx eSTmVF"><div data-blade-component="base-box" class="BaseBox-bmPWx xgVLl"><div id="fileuploadinput-undefined-helptext-undefined" data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><span class="StyledBaseText-dVBfTO csXxAx" data-blade-component="text">Upload .jpg, .jpeg, or .png file only</span></span></div></div></div></div></div>"`;
+exports[`<FileUpload /> should render in SSR 1`] = `"<div id="root"><div data-blade-component="file-upload" class="BaseBox-bmPWx iAvyvB"><div data-blade-component="base-box" class="BaseBox-bmPWx hqusWt"><span style="width:auto;flex-shrink:0;margin-right:0px" id="fileuploadinput-undefined-label-undefined" data-blade-component="form-label"><div data-blade-component="base-box" class="BaseBox-bmPWx fZlcZT"><div data-blade-component="base-box" class="BaseBox-bmPWx ikPXAQ"><p class="StyledBaseText-dVBfTO kCEKIT" data-blade-component="text">Upload GST certificate</p><div data-blade-component="visually-hidden" class="VisuallyHiddenweb__StyledVisuallyHidden-g3hls3-0 Fuolv"><p class="StyledBaseText-dVBfTO fAQkza" data-blade-component="text">, Upload .jpg, .jpeg, or .png file only</p></div></div></div></span><label style="cursor:pointer;width:100%" data-blade-component="file-upload-label" class="SelectorLabelweb__StyledSelectorLabel-sc-1yoi09a-0 ehaOvX"><div data-blade-component="base-box" class="BaseBox-bmPWx iAvyvB"><div data-comp="f" data-blade-component="base-box" class="BaseBox-bmPWx StyledFileUploadWrapper-sc-1wln1sx-0 guVuJK ktRDSa"><div data-blade-component="box" class="BaseBox-bmPWx cSvwKg"><p class="StyledBaseText-dVBfTO cYIHIH" data-blade-component="text">Drag files here or<!-- --> </p><input id="fileuploadinput-undefined-input-undefined" name="single-file-upload-input" type="file" accept="image/*" aria-required="false" aria-invalid="false" aria-disabled="false" aria-describedby="fileuploadinput-undefined-label-undefined" class="SelectorInputweb__StyledInput-sc-1bnkrae-0 cYUiqI"/><div data-blade-component="box" class="BaseBox-bmPWx gTlwBH"><div data-blade-component="box" class="BaseBox-bmPWx jTWYOz"><p class="StyledBaseText-dVBfTO eRPBEA" data-blade-component="text">Upload</p></div></div></div></div></div></label></div><div data-blade-component="base-box" class="BaseBox-bmPWx iARoiz"><div data-blade-component="base-box" class="BaseBox-bmPWx xgVLl"><div id="fileuploadinput-undefined-helptext-undefined" data-blade-component="base-box" class="BaseBox-bmPWx kzOBQv"><span style="word-break:break-all" data-blade-component="base-box" class="BaseBox-bmPWx fAEwZa"><span class="StyledBaseText-dVBfTO csXxAx" data-blade-component="text">Upload .jpg, .jpeg, or .png file only</span></span></div></div></div></div></div>"`;
 
 exports[`<FileUpload /> should render in SSR 2`] = `
 .c0.c0.c0.c0.c0 {
@@ -50,18 +50,6 @@ exports[`<FileUpload /> should render in SSR 2`] = `
 }
 
 .c8.c8.c8.c8.c8 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin-bottom: 0px;
-  width: 100%;
-}
-
-.c9.c9.c9.c9.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -82,7 +70,7 @@ exports[`<FileUpload /> should render in SSR 2`] = `
   border-style: solid;
 }
 
-.c11.c11.c11.c11.c11 {
+.c10.c10.c10.c10.c10 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -102,7 +90,7 @@ exports[`<FileUpload /> should render in SSR 2`] = `
   gap: 6px;
 }
 
-.c14.c14.c14.c14.c14 {
+.c13.c13.c13.c13.c13 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -121,7 +109,7 @@ exports[`<FileUpload /> should render in SSR 2`] = `
   border-radius: 2px;
 }
 
-.c15.c15.c15.c15.c15 {
+.c14.c14.c14.c14.c14 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -138,12 +126,11 @@ exports[`<FileUpload /> should render in SSR 2`] = `
   border-bottom-style: solid;
 }
 
-.c17.c17.c17.c17.c17 {
-  margin-bottom: 16px;
+.c16.c16.c16.c16.c16 {
   margin-left: 0px;
 }
 
-.c18.c18.c18.c18.c18 {
+.c17.c17.c17.c17.c17 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -155,11 +142,11 @@ exports[`<FileUpload /> should render in SSR 2`] = `
   -ms-flex-pack: 'justify;justify-content:'space-between;
 }
 
-.c19.c19.c19.c19.c19 {
+.c18.c18.c18.c18.c18 {
   margin-top: 4px;
 }
 
-.c20.c20.c20.c20.c20 {
+.c19.c19.c19.c19.c19 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -173,7 +160,7 @@ exports[`<FileUpload /> should render in SSR 2`] = `
   align-items: center;
 }
 
-.c10.c10.c10.c10.c10 {
+.c9.c9.c9.c9.c9 {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
@@ -190,7 +177,7 @@ exports[`<FileUpload /> should render in SSR 2`] = `
   border-color: hsla(214,28%,84%,1);
 }
 
-.c10.c10.c10.c10.c10:hover {
+.c9.c9.c9.c9.c9:hover {
   background-color: hsla(211,20%,52%,0.18);
 }
 
@@ -234,7 +221,7 @@ exports[`<FileUpload /> should render in SSR 2`] = `
   padding: 0;
 }
 
-.c12.c12.c12.c12.c12 {
+.c11.c11.c11.c11.c11 {
   color: hsla(211,26%,34%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -251,7 +238,7 @@ exports[`<FileUpload /> should render in SSR 2`] = `
   padding: 0;
 }
 
-.c16.c16.c16.c16.c16 {
+.c15.c15.c15.c15.c15 {
   color: hsla(227,100%,59%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.875rem;
@@ -268,7 +255,7 @@ exports[`<FileUpload /> should render in SSR 2`] = `
   padding: 0;
 }
 
-.c21.c21.c21.c21.c21 {
+.c20.c20.c20.c20.c20 {
   color: hsla(211,22%,56%,1);
   font-family: "Inter","Inter Fallback Arial",Arial;
   font-size: 0.6875rem;
@@ -311,7 +298,7 @@ exports[`<FileUpload /> should render in SSR 2`] = `
   word-wrap: normal;
 }
 
-.c13.c13.c13.c13.c13 {
+.c12.c12.c12.c12.c12 {
   border: 0;
   -webkit-clip: rect(0 0 0 0);
   clip: rect(0 0 0 0);
@@ -328,7 +315,7 @@ exports[`<FileUpload /> should render in SSR 2`] = `
   word-wrap: normal;
 }
 
-.c13.c13.c13.c13.c13:focus-visible + div {
+.c12.c12.c12.c12.c12:focus-visible + div {
   outline: 4px solid hsla(227,100%,59%,0.18);
   outline-offset: 1px;
   -webkit-transition-property: outline-width;
@@ -339,7 +326,7 @@ exports[`<FileUpload /> should render in SSR 2`] = `
   transition-timing-function: cubic-bezier(0.3,0,0.2,1);
 }
 
-.c13.c13.c13.c13.c13:hover + div {
+.c12.c12.c12.c12.c12:hover + div {
   border-color: hsla(214,28%,84%,1);
   background-color: hsla(0,0%,100%,0);
   -webkit-transition-timing-function: cubic-bezier(0.3,0,0.2,1);
@@ -349,77 +336,77 @@ exports[`<FileUpload /> should render in SSR 2`] = `
 }
 
 @media screen and (min-width:320px) {
-  .c9.c9.c9.c9.c9 {
+  .c8.c8.c8.c8.c8 {
     border-style: solid;
   }
 }
 
 @media screen and (min-width:480px) {
-  .c9.c9.c9.c9.c9 {
+  .c8.c8.c8.c8.c8 {
     border-style: solid;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c9.c9.c9.c9.c9 {
+  .c8.c8.c8.c8.c8 {
     border-style: solid;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c9.c9.c9.c9.c9 {
+  .c8.c8.c8.c8.c8 {
     border-style: solid;
   }
 }
 
 @media screen and (min-width:1200px) {
-  .c9.c9.c9.c9.c9 {
+  .c8.c8.c8.c8.c8 {
     border-style: solid;
   }
 }
 
 @media screen and (min-width:480px) {
-  .c11.c11.c11.c11.c11 {
+  .c10.c10.c10.c10.c10 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
   }
 }
 
 @media screen and (min-width:480px) {
-  .c14.c14.c14.c14.c14 {
+  .c13.c13.c13.c13.c13 {
     -webkit-flex-direction: row;
     -ms-flex-direction: row;
     flex-direction: row;
   }
 }
 
 @media screen and (min-width:320px) {
-  .c15.c15.c15.c15.c15 {
+  .c14.c14.c14.c14.c14 {
     border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:480px) {
-  .c15.c15.c15.c15.c15 {
+  .c14.c14.c14.c14.c14 {
     border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:768px) {
-  .c15.c15.c15.c15.c15 {
+  .c14.c14.c14.c14.c14 {
     border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1024px) {
-  .c15.c15.c15.c15.c15 {
+  .c14.c14.c14.c14.c14 {
     border-bottom-style: solid;
   }
 }
 
 @media screen and (min-width:1200px) {
-  .c15.c15.c15.c15.c15 {
+  .c14.c14.c14.c14.c14 {
     border-bottom-style: solid;
   }
 }
@@ -474,20 +461,20 @@ exports[`<FileUpload /> should render in SSR 2`] = `
         style="cursor:pointer;width:100%"
       >
         <div
-          class="c8"
+          class="c0"
           data-blade-component="base-box"
         >
           <div
-            class="c9 c10"
+            class="c8 c9"
             data-blade-component="base-box"
             data-comp="f"
           >
             <div
-              class="c11"
+              class="c10"
               data-blade-component="box"
             >
               <p
-                class="c12"
+                class="c11"
                 data-blade-component="text"
               >
                 Drag files here or
@@ -500,21 +487,21 @@ exports[`<FileUpload /> should render in SSR 2`] = `
                 aria-disabled="false"
                 aria-invalid="false"
                 aria-required="false"
-                class="c13"
+                class="c12"
                 id="fileuploadinput-1-input-2"
                 name="single-file-upload-input"
                 type="file"
               />
               <div
-                class="c14"
+                class="c13"
                 data-blade-component="box"
               >
                 <div
-                  class="c15"
+                  class="c14"
                   data-blade-component="box"
                 >
                   <p
-                    class="c16"
+                    class="c15"
                     data-blade-component="text"
                   >
                     Upload
@@ -527,25 +514,25 @@ exports[`<FileUpload /> should render in SSR 2`] = `
       </label>
     </div>
     <div
-      class="c17"
+      class="c16"
       data-blade-component="base-box"
     >
       <div
-        class="c18"
+        class="c17"
         data-blade-component="base-box"
       >
         <div
-          class="c19"
+          class="c18"
           data-blade-component="base-box"
           id="fileuploadinput-1-helptext-4"
         >
           <span
-            class="c20"
+            class="c19"
             data-blade-component="base-box"
             style="word-break:break-all"
           >
             <span
-              class="c21"
+              class="c20"
               data-blade-component="text"
             >
               Upload .jpg, .jpeg, or .png file only