Add compact setting to AttachmentField (#9052)

packages/bbui/src/Form/Core/Dropzone.svelte

@@ -15,6 +15,7 @@
   export let value = []
   export let id = null
   export let disabled = false
+  export let compact = false
   export let fileSizeLimit = BYTES_IN_MB * 20
   export let processFiles = null
   export let deleteAttachments = null
@@ -239,6 +240,7 @@
           bind:this={fileInput}
           on:change={handleFile}
         />
+        {#if !compact}
           <svg
             class="spectrum-IllustratedMessage-illustration"
             width="125"
@@ -303,6 +305,7 @@
           >
             Drag and drop your file
           </h2>
+        {/if}
         {#if !disabled}
           <p
             class="spectrum-Body spectrum-Body--sizeS spectrum-IllustratedMessage-description"
@@ -310,8 +313,10 @@
             <label for={fieldId} class="spectrum-Link">
               Select a file to upload
             </label>
+            {#if !compact}
               <br />
               from your computer
+            {/if}
           </p>
           {#if fileTags.length}
             <Tags>

packages/client/manifest.json

@@ -3440,6 +3440,12 @@
           }
         ]
       },
+      {
+        "type": "boolean",
+        "label": "Compact",
+        "key": "compact",
+        "defaultValue": false
+      },
       {
         "type": "boolean",
         "label": "Disabled",
@@ -3785,7 +3791,6 @@
         "defaultValue": false,
         "info": "Row selection is only compatible with internal or SQL tables"
       },
-
       {
         "section": true,
         "name": "On Row Click",

packages/client/src/components/app/forms/AttachmentField.svelte

@@ -6,6 +6,7 @@
   export let field
   export let label
   export let disabled = false
+  export let compact = false
   export let validation
   export let extensions
   export let onChange
@@ -89,6 +90,7 @@
         {handleTooManyFiles}
         {maximum}
         {extensions}
+        {compact}
       />
     {/if}
   </div>
@@ -96,6 +98,6 @@
 
 <style>
   .minHeightWrapper {
-    min-height: 220px;
+    min-height: 80px;
   }
 </style>