Merge pull request #12805 from mfo/US/improve-ui-upload-spacers

amelioration: ETQ usager, j'aimerais un composant d'upload plus raccord ac l'UX de DS

Author: mfo

app/assets/stylesheets/attachment.scss

@@ -75,6 +75,14 @@
   .fr-download {
     margin-bottom: 0.5rem;
   }
+
+  li + li {
+    margin-top: 0.5rem;
+  }
+}
+
+.attachment-row:last-child {
+  margin-bottom: 0 !important;
 }
 
 // Legacy support
@@ -95,6 +103,13 @@ ul[data-file-input-reset-target='fileList'] {
       border-color 0.2s,
       border-style 0.2s,
       background-color 0.2s;
+
+    @media (max-width: 48em) {
+      border: none;
+      background-color: transparent;
+      text-align: left;
+      padding: 0 !important;
+    }
   }
   .fr-hr-or {
     max-width: 90px;

app/components/attachment/attachment_row_component/attachment_row_component.html.erb

@@ -1,5 +1,5 @@
 <div
-  class="fr-mt-3w"
+  class="fr-mt-0 fr-mb-3w attachment-row"
   id="<%= dom_id(attachment, :persisted_row) %>"
   data-attachment-row="true"
 >

app/components/attachment/file_field_component/file_field_component.html.erb

@@ -17,16 +17,24 @@
           class="<%= drop_zone_decorator.css_class %>"
         >
           <div
-            class="attachment-drop-area fr-p-3w"
+            class="attachment-drop-area fr-p-2w"
             role="button"
             tabindex="0"
             aria-label="<%= t('.drop_zone_aria_label') %>"
             data-action="click->drop-target#openFilePicker keydown.enter->drop-target#openFilePicker keydown.space->drop-target#openFilePicker"
           >
-            <span class="fr-icon-upload-line" aria-hidden="true"></span>
+            <span
+              class="fr-icon-upload-line fr-hidden fr-unhidden-md"
+              aria-hidden="true"
+            ></span>
 
-            <p><%= t('.drop_zone_label', count: @max) %></p>
-            <p class="fr-hr-or"><%= t('.or') %></p>
+            <p class="fr-mb-1v fr-hidden fr-unhidden-md">
+              <%= t('.drop_zone_label', count: @max) %>
+            </p>
+
+            <p class="fr-hr-or fr-mb-2v fr-hidden fr-unhidden-md">
+              <%= t('.or') %>
+            </p>
 
             <button
               class="fr-btn fr-btn--secondary fr-btn--sm"