Merge branch 'fix-attach-file-icon-margin' into 'master'

Replace attach icon and address space

Closes #223187

See merge request gitlab-org/gitlab!34401

app/assets/javascripts/vue_shared/components/markdown/toolbar.vue

@@ -61,7 +61,7 @@ export default {
     <span v-if="canAttachFile" class="uploading-container">
       <span class="uploading-progress-container hide">
         <template>
-          <gl-icon name="media" :size="16" />
+          <gl-icon name="media" :size="16" class="gl-vertical-align-text-bottom" />
         </template>
         <span class="attaching-file-message"></span>
         <!-- eslint-disable-next-line @gitlab/vue-require-i18n-strings -->
@@ -71,7 +71,7 @@ export default {
       <span class="uploading-error-container hide">
         <span class="uploading-error-icon">
           <template>
-            <gl-icon name="media" :size="16" />
+            <gl-icon name="media" :size="16" class="gl-vertical-align-text-bottom" />
           </template>
         </span>
         <span class="uploading-error-message"></span>

app/assets/stylesheets/pages/note_form.scss

@@ -489,6 +489,7 @@ table {
   border: 0;
   font-size: 14px;
   line-height: 16px;
+  vertical-align: initial;
 
   &:hover,
   &:focus {
@@ -498,6 +499,10 @@ table {
       text-decoration: underline;
     }
   }
+
+  .gl-icon:not(:last-child) {
+    margin-right: 0;
+  }
 }
 
 .markdown-selector {

app/views/shared/notes/_hints.html.haml

@@ -12,7 +12,7 @@
 
   %span.uploading-container
     %span.uploading-progress-container.hide
-      = icon('file-image-o', class: 'toolbar-button-icon')
+      = sprite_icon('media', size: 16, css_class: 'gl-icon gl-vertical-align-text-bottom')
       %span.attaching-file-message
         -# Populated by app/assets/javascripts/dropzone_input.js
       %span.uploading-progress 0%
@@ -21,15 +21,15 @@
 
     %span.uploading-error-container.hide
       %span.uploading-error-icon
-        = icon('file-image-o', class: 'toolbar-button-icon')
+        = sprite_icon('media', size: 16, css_class: 'gl-icon gl-vertical-align-text-bottom')
       %span.uploading-error-message
         -# Populated by app/assets/javascripts/dropzone_input.js
       %button.retry-uploading-link{ type: 'button' }= _("Try again")
       or
       %button.attach-new-file.markdown-selector{ type: 'button' }= _("attach a new file")
 
-    %button.markdown-selector.button-attach-file.btn-link{ type: 'button' }
-      = icon('file-image-o', class: 'toolbar-button-icon')
+    %button.btn.markdown-selector.button-attach-file.btn-link{ type: 'button', tabindex: '-1' }
+      = sprite_icon('media', size: 16)
       %span.text-attach-file<>
         = _("Attach a file")
 

changelogs/unreleased/fix-attach-file-icon-margin.yml

+---
+title: Update icon associated with attach a file actions
+merge_request: 34401
+author:
+type: other