Merge branch 'justin_ho-fix-gitlab-svg-icons-vertical-alignment' into 'master'

Fix vertical alignment of GitLab SVG icons

See merge request gitlab-org/gitlab!38059

app/assets/stylesheets/framework/buttons.scss

@@ -274,8 +274,6 @@
   svg {
     height: 15px;
     width: 15px;
-    position: relative;
-    top: 2px;
   }
 
   svg,

app/assets/stylesheets/framework/images.scss

@@ -48,4 +48,12 @@ svg {
       @include svg-size(#{$svg-size}px);
     }
   }
+
+  &.s12 {
+    vertical-align: -1px;
+  }
+
+  &.s16 {
+    vertical-align: -3px;
+  }
 }

app/assets/stylesheets/pages/projects.scss

@@ -159,7 +159,7 @@
     font-weight: bold;
 
     .icon {
-      font-size: $gl-font-size-large;
+      vertical-align: -1px;
     }
 
     .home-panel-topic-list {

app/assets/stylesheets/pages/tree.scss

@@ -138,12 +138,6 @@
   }
 
   .tree-item {
-    .file-icon,
-    .folder-icon {
-      position: relative;
-      top: 2px;
-    }
-
     .link-container {
       padding: 0;
 

app/helpers/icons_helper.rb

@@ -45,7 +45,7 @@ module IconsHelper
     ActionController::Base.helpers.image_path('file_icons.svg', host: sprite_base_url)
   end
 
-  def sprite_icon(icon_name, size: nil, css_class: nil)
+  def sprite_icon(icon_name, size: DEFAULT_ICON_SIZE, css_class: nil)
     if known_sprites&.exclude?(icon_name)
       exception = ArgumentError.new("#{icon_name} is not a known icon in @gitlab-org/gitlab-svg")
       Gitlab::ErrorTracking.track_and_raise_for_dev_exception(exception)
@@ -117,7 +117,9 @@ module IconsHelper
         'earth'
       end
 
-    sprite_icon(name, size: DEFAULT_ICON_SIZE, css_class: 'gl-vertical-align-text-bottom')
+    css_class = options.delete(:class)
+
+    sprite_icon(name, size: DEFAULT_ICON_SIZE, css_class: css_class)
   end
 
   def file_type_icon_class(type, mode, name)

app/views/projects/_home_panel.html.haml

@@ -13,7 +13,7 @@
           %h1.home-panel-title.gl-mt-3.gl-mb-2{ data: { qa_selector: 'project_name_content' } }
             = @project.name
             %span.visibility-icon.text-secondary.gl-ml-2.has-tooltip{ data: { container: 'body' }, title: visibility_icon_description(@project) }
-              = visibility_level_icon(@project.visibility_level, options: {class: 'icon'})
+              = visibility_level_icon(@project.visibility_level, options: { class: 'icon' })
             = render_if_exists 'compliance_management/compliance_framework/compliance_framework_badge', project: @project
         .home-panel-metadata.d-flex.flex-wrap.text-secondary
           - if can?(current_user, :read_project, @project)

spec/helpers/icons_helper_spec.rb

@@ -48,8 +48,13 @@ RSpec.describe IconsHelper do
   describe 'sprite_icon' do
     icon_name = 'clock'
 
-    it 'returns svg icon html' do
+    it 'returns svg icon html with DEFAULT_ICON_SIZE' do
       expect(sprite_icon(icon_name).to_s)
+        .to eq "<svg class=\"s#{IconsHelper::DEFAULT_ICON_SIZE}\" data-testid=\"#{icon_name}-icon\"><use xlink:href=\"#{icons_path}##{icon_name}\"></use></svg>"
+    end
+
+    it 'returns svg icon html without size class' do
+      expect(sprite_icon(icon_name, size: nil).to_s)
         .to eq "<svg data-testid=\"#{icon_name}-icon\"><use xlink:href=\"#{icons_path}##{icon_name}\"></use></svg>"
     end