Remove animation from pipeline status icon buttons

The expansion hover animation caused a number of layout headaches; this
commit removes the animation and replaces them with hover/active/focus
styles.

Related issue:
https://gitlab.com/gitlab-org/gitlab-ce/issues/42769

app/assets/javascripts/pipelines/components/stage.vue

@@ -172,8 +172,6 @@ export default {
       <span :aria-label="stage.title" aria-hidden="true" class="no-pointer-events">
         <icon :name="borderlessIcon" />
       </span>
-
-      <i class="fa fa-caret-down" aria-hidden="true"> </i>
     </button>
 
     <div

app/assets/stylesheets/pages/pipelines.scss

@@ -256,14 +256,25 @@
     }
   }
 
-  .mini-pipeline-graph-dropdown-toggle svg {
+  .mini-pipeline-graph-dropdown-toggle {
-    height: $ci-action-icon-size;
+    svg {
-    width: $ci-action-icon-size;
+      height: $ci-action-icon-size;
-    position: absolute;
+      width: $ci-action-icon-size;
-    top: -1px;
+      position: absolute;
-    left: -1px;
+      top: -1px;
-    z-index: 2;
+      left: -1px;
-    overflow: visible;
+      z-index: 2;
+      overflow: visible;
+    }
+
+    &:hover,
+    &:active,
+    &:focus {
+      svg {
+        top: -2px;
+        left: -2px;
+      }
+    }
   }
 
   .stage-container {
@@ -293,7 +304,7 @@
         width: 7px;
         position: absolute;
         right: -7px;
-        top: 10px;
+        top: 11px;
         border-bottom: 2px solid $border-color;
       }
     }
@@ -708,21 +719,43 @@
   font-weight: $gl-font-weight-normal;
 }
 
-@mixin mini-pipeline-graph-color($color-light, $color-main, $color-dark) {
+@mixin mini-pipeline-graph-color(
-  border-color: $color-main;
+  $color-background-default,
-  color: $color-main;
+  $color-background-hover-focus,
+  $color-background-active,
+  $color-foreground-default,
+  $color-foreground-hover-focus,
+  $color-foreground-active
+) {
+  background-color: $color-background-default;
+  border-color: $color-foreground-default;
+
+  svg {
+    fill: $color-foreground-default;
+  }
 
   &:hover,
-  &:focus,
+  &:focus {
-  &:active {
+    background-color: $color-background-hover-focus;
-    background-color: $color-light;
+    border-color: $color-foreground-hover-focus;
-    border-color: $color-dark;
-    color: $color-dark;
 
     svg {
-      fill: $color-dark;
+      fill: $color-foreground-hover-focus;
     }
   }
+
+  &:active {
+    background-color: $color-background-active;
+    border-color: $color-foreground-active;
+
+    svg {
+      fill: $color-foreground-active;
+    }
+  }
+
+  &:focus {
+    box-shadow: 0 0 4px 1px $blue-300;
+  }
 }
 
 @mixin mini-pipeline-item() {
@@ -734,26 +767,32 @@
   height: $ci-action-icon-size;
   margin: 0;
   padding: 0;
-  transition: all 0.2s linear;
   position: relative;
   vertical-align: middle;
 
+  &:hover,
+  &:active,
+  &:focus {
+    outline: none;
+    border-width: 2px;
+  }
+
   // Dropdown button animation in mini pipeline graph
   &.ci-status-icon-success {
-    @include mini-pipeline-graph-color($green-100, $green-500, $green-600);
+    @include mini-pipeline-graph-color($white, $green-100, $green-200, $green-500, $green-600, $green-700);
   }
 
   &.ci-status-icon-failed {
-    @include mini-pipeline-graph-color($red-100, $red-500, $red-600);
+    @include mini-pipeline-graph-color($white, $red-100, $red-200, $red-500, $red-600, $red-700);
   }
 
   &.ci-status-icon-pending,
   &.ci-status-icon-success_with_warnings {
-    @include mini-pipeline-graph-color($orange-100, $orange-500, $orange-600);
+    @include mini-pipeline-graph-color($white, $orange-100, $orange-200, $orange-500, $orange-600, $orange-700);
   }
 
   &.ci-status-icon-running {
-    @include mini-pipeline-graph-color($blue-100, $blue-400, $blue-600);
+    @include mini-pipeline-graph-color($white, $blue-100, $blue-200, $blue-500, $blue-600, $blue-700);
   }
 
   &.ci-status-icon-canceled,
@@ -761,42 +800,18 @@
   &.ci-status-icon-disabled,
   &.ci-status-icon-not-found,
   &.ci-status-icon-manual {
-    @include mini-pipeline-graph-color(rgba($gl-text-color, 0.1), $gl-text-color, $gl-text-color);
+    @include mini-pipeline-graph-color($white, $gray-700, $gray-800, $gray-900, $gray-950, $black);
   }
 
   &.ci-status-icon-created,
   &.ci-status-icon-skipped {
-    @include mini-pipeline-graph-color(rgba($gray-darkest, 0.1), $gray-darkest, $gray-darkest);
+    @include mini-pipeline-graph-color($white, $gray-200, $gray-300, $gray-500, $gray-600, $gray-700);
   }
 }
 
 // Dropdown button in mini pipeline graph
 button.mini-pipeline-graph-dropdown-toggle {
   @include mini-pipeline-item();
-
-  > .fa.fa-caret-down {
-    position: absolute;
-    left: 20px;
-    top: 5px;
-    display: inline-block;
-    visibility: hidden;
-    opacity: 0;
-    color: inherit;
-    font-size: 12px;
-    transition: visibility 0.1s, opacity 0.1s linear;
-  }
-
-  &:active,
-  &:focus,
-  &:hover {
-    outline: none;
-    width: 35px;
-
-    .fa.fa-caret-down {
-      visibility: visible;
-      opacity: 1;
-    }
-  }
 }
 
 /**

app/views/shared/_mini_pipeline_graph.html.haml

@@ -7,7 +7,6 @@
       .stage-container.dropdown{ class: klass }
         %button.mini-pipeline-graph-dropdown-toggle.has-tooltip.js-builds-dropdown-button{ class: "ci-status-icon-#{detailed_status.group}", type: 'button', data: { toggle: 'dropdown', title: "#{stage.name}: #{detailed_status.label}", placement: 'top', "stage-endpoint" => stage_ajax_project_pipeline_path(pipeline.project, pipeline, stage: stage.name) } }
           = sprite_icon(icon_status)
-          = icon('caret-down')
 
         %ul.dropdown-menu.mini-pipeline-graph-dropdown-menu.js-builds-dropdown-container
           %li.js-builds-dropdown-list.scrollable-menu

changelogs/unreleased/42769-remove-expansion-hover-animation-from-status-icon-buttons.yml

@@ -0,0 +1,5 @@
+---
+title: Remove expansion hover animation from pipeline status icon buttons
+merge_request: 24268
+author: Nathan Friend
+type: changed

spec/features/merge_request/user_sees_mini_pipeline_graph_spec.rb

@@ -51,22 +51,52 @@ describe 'Merge request < User sees mini pipeline graph', :js do
       first('.mini-pipeline-graph-dropdown-toggle')
     end
 
-    it 'expands when hovered' do
+    # Status icon button styles should update as described in
+    # https://gitlab.com/gitlab-org/gitlab-ce/issues/42769
+    it 'has unique styles for default, :hover, :active, and :focus states' do
       find('.mini-pipeline-graph-dropdown-toggle')
-      before_width = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').outerWidth();")
+      default_background_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('background-color');")
+      default_foreground_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible svg').css('fill');")
+      default_box_shadow = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('box-shadow');")
 
       toggle.hover
 
       find('.mini-pipeline-graph-dropdown-toggle')
-      after_width = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').outerWidth();")
+      hover_background_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('background-color');")
+      hover_foreground_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible svg').css('fill');")
+      hover_box_shadow = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('box-shadow');")
 
-      expect(before_width).to be < after_width
+      page.driver.browser.action.click_and_hold(toggle.native).perform
-    end
 
-    it 'shows dropdown caret when hovered' do
+      find('.mini-pipeline-graph-dropdown-toggle')
-      toggle.hover
+      active_background_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('background-color');")
+      active_foreground_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible svg').css('fill');")
+      active_box_shadow = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('box-shadow');")
 
-      expect(toggle).to have_selector('.fa-caret-down')
+      page.driver.browser.action.release(toggle.native)
+                                .move_by(100, 100)
+                                .perform
+
+      find('.mini-pipeline-graph-dropdown-toggle')
+      focus_background_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('background-color');")
+      focus_foreground_color = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible svg').css('fill');")
+      focus_box_shadow = evaluate_script("$('.mini-pipeline-graph-dropdown-toggle:visible').css('box-shadow');")
+
+      expect(default_background_color).not_to eq(hover_background_color)
+      expect(hover_background_color).not_to eq(active_background_color)
+      expect(default_background_color).not_to eq(active_background_color)
+
+      expect(default_foreground_color).not_to eq(hover_foreground_color)
+      expect(hover_foreground_color).not_to eq(active_foreground_color)
+      expect(default_foreground_color).not_to eq(active_foreground_color)
+
+      expect(focus_background_color).to eq(hover_background_color)
+      expect(focus_foreground_color).to eq(hover_foreground_color)
+
+      expect(default_box_shadow).to eq('none')
+      expect(hover_box_shadow).to eq('none')
+      expect(active_box_shadow).not_to eq('none')
+      expect(focus_box_shadow).not_to eq('none')
     end
 
     it 'shows tooltip when hovered' do