[#58160] fix visual glitch with leading icon in action button

opf · Dec 9, 2024 · 80bd36d · 80bd36d
1 parent 86532c6
commit 80bd36d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 2 deletions.
diff --git a/app/helpers/sort_helper.rb b/app/helpers/sort_helper.rb
@@ -417,9 +417,14 @@ def action_menu(column, table_columns, caption, default_order, filter_column_map
   end
 
   def action_button(menu, column, caption, favorite: false)
+    additional_menu_classes = ["generic-table--action-menu-button",
+                               column.respond_to?(:action_menu_classes) ? column.action_menu_classes : nil]
+                                .compact
+                                .join(" ")
+
     menu.with_show_button(scheme: :link, color: :default, text_transform: :uppercase,
                           underline: false, display: :inline_flex,
-                          classes: "generic-table--action-menu-button") do |button|
+                          classes: additional_menu_classes) do |button|
       if favorite
         # This column only shows an icon, no text.
         render Primer::Beta::Octicon.new(icon: "star-fill", color: :subtle, "aria-label": I18n.t(:label_favorite))

diff --git a/app/models/queries/projects/selects/life_cycle_step.rb b/app/models/queries/projects/selects/life_cycle_step.rb
@@ -61,14 +61,19 @@ def available?
   def action_menu_header(button)
     # Show the proper icon for the definition with the correct color.
     icon = life_cycle_step.is_a?(Project::StageDefinition) ? :"git-commit" : :diamond
-    button.with_leading_visual_icon(icon:, classes: helpers.hl_inline_class("life_cycle_step_definition", life_cycle_step))
+    classes = helpers.hl_inline_class("life_cycle_step_definition", life_cycle_step)
+    button.with_leading_visual_icon(icon:, classes:)
 
     # As all other action menu headers, we will show an action icon and the caption:
     button.with_trailing_action_icon(icon: :"triangle-down")
 
     caption.to_s
   end
 
+  def action_menu_classes
+    "leading-visual-icon-header"
+  end
+
   private
 
   def helpers

diff --git a/frontend/src/global_styles/content/_table.sass b/frontend/src/global_styles/content/_table.sass
@@ -76,6 +76,7 @@ $input-elements: input, 'input.form--text-field', select, 'select.form--select',
     &.ng-leave
       @include animation(0.5s fade-out)
 
+
 table.generic-table
   border-collapse: collapse
   width:  100%
@@ -381,3 +382,8 @@ thead.-sticky th
 
   p:last-child
     margin-bottom: 0
+
+.generic-table
+  &--action-menu-button.leading-visual-icon-header
+    position: relative
+    top: 2px