Merge branch '25910-convert-manual-action-icons-to-svg-to-propperly-position-them' into 'master'

Convert pipeline action icons to svg to have them propperly positioned

Closes #25910

See merge request !8766

app/assets/stylesheets/pages/pipelines.scss

@@ -494,31 +494,27 @@
 
     // Action Icons in big pipeline-graph nodes
     > .ci-action-icon-container .ci-action-icon-wrapper {
-      i {
-        color: $border-color;
-        border-radius: 100%;
-        border: 1px solid $border-color;
-        padding: 5px 6px;
-        font-size: 13px;
-        background: $white-light;
-        height: 30px;
-        width: 30px;
-
-        &::before {
-          position: relative;
-          top: 3px;
-          left: 3px;
-        }
+      height: 30px;
+      width: 30px;
+      background: $white-light;
+      border: 1px solid $border-color;
+      border-radius: 100%;
+      display: block;
 
-        &:hover {
-          color: $gl-text-color;
-          background-color: $stage-hover-bg;
-          border: 1px solid $stage-hover-bg;
-        }
+      &:hover {
+        background-color: $stage-hover-bg;
+        border: 1px solid $stage-hover-bg;
+      }
+
+      svg {
+        fill: $border-color;
+        position: relative;
+        left: -1px;
+        top: -1px;
       }
 
-      .ci-play-icon {
-        padding: 5px 5px 5px 7px;
+      &:hover svg {
+        fill: $gl-text-color;
       }
     }
 
@@ -657,7 +653,7 @@
   font-weight: 100;
   font-size: 15px;
   position: absolute;
-  right: 5px;
+  right: 13px;
   top: 8px;
 }
 
@@ -825,11 +821,23 @@
 
     &:hover,
     &:focus {
-      text-decoration: none;
-      color: $gl-text-color;
       background-color: $stage-hover-bg;
       border: 1px solid transparent;
     }
+
+    svg {
+      width: 22px;
+      height: 22px;
+      left: -6px;
+      position: relative;
+      top: -3px;
+      fill: $action-icon-color;
+    }
+
+    &:hover svg,
+    &:focus svg {
+      fill: $gl-text-color;
+    }
   }
 
   // link to the build

app/views/ci/status/_dropdown_graph_badge.html.haml

@@ -16,4 +16,4 @@
 
 - if status.has_action?
   = link_to status.action_path, class: 'ci-action-icon-wrapper js-ci-action-icon', method: status.action_method, data: { toggle: 'tooltip', title: status.action_title }  do
-    = icon(status.action_icon, class: status.action_class)
+    = custom_icon(status.action_icon)

app/views/ci/status/_graph_badge.html.haml

@@ -2,7 +2,7 @@
 
 - subject = local_assigns.fetch(:subject)
 - status = subject.detailed_status(current_user)
-- klass = "ci-status-icon ci-status-icon-#{status.group}"
+- klass = "ci-status-icon ci-status-icon-#{status.group} js-ci-status-icon-#{status.group}"
 - tooltip = "#{subject.name} - #{status.label}"
 
 - if status.has_details?
@@ -16,5 +16,5 @@
 
 - if status.has_action?
   = link_to status.action_path, class: 'ci-action-icon-container has-tooltip', method: status.action_method, data: { toggle: 'tooltip', title: status.action_title }  do
-    %i.ci-action-icon-wrapper
-      = icon(status.action_icon, class: status.action_class)
+    %i.ci-action-icon-wrapper{ class: "js-#{status.action_icon.dasherize}" }
+      = custom_icon(status.action_icon)

app/views/shared/icons/_icon_action_cancel.svg

+<svg width="30px" height="30px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path d="M19.25,14.9765625 C19.25,14.1380166 19.0234398,13.3697952 18.5703125,12.671875 L12.6796875,18.5546875 C13.3932327,19.0182315 14.1666625,19.25 15,19.25 C15.5781279,19.25 16.1289036,19.1367199 16.6523438,18.9101562 C17.1757839,18.6835926 17.6276023,18.3802102 18.0078125,18 C18.3880227,17.6197898 18.690103,17.1653672 18.9140625,16.6367188 C19.138022,16.1080703 19.25,15.5546904 19.25,14.9765625 Z M11.4453125,17.3125 L17.34375,11.421875 C16.6406215,10.9479143 15.8593793,10.7109375 15,10.7109375 C14.2291628,10.7109375 13.5182324,10.9010398 12.8671875,11.28125 C12.2161426,11.6614602 11.7005227,12.1796842 11.3203125,12.8359375 C10.9401023,13.4921908 10.75,14.2057253 10.75,14.9765625 C10.75,15.8203167 10.9817685,16.5989548 11.4453125,17.3125 Z M21,14.9765625 C21,15.7942749 20.8411474,16.5755171 20.5234375,17.3203125 C20.2057276,18.0651079 19.7799506,18.7057265 19.2460938,19.2421875 C18.7122369,19.7786485 18.0742225,20.2057276 17.3320312,20.5234375 C16.58984,20.8411474 15.8125041,21 15,21 C14.1874959,21 13.41016,20.8411474 12.6679688,20.5234375 C11.9257775,20.2057276 11.2877631,19.7786485 10.7539062,19.2421875 C10.2200494,18.7057265 9.79427242,18.0651079 9.4765625,17.3203125 C9.15885258,16.5755171 9,15.7942749 9,14.9765625 C9,14.1588501 9.15885258,13.37891 9.4765625,12.6367188 C9.79427242,11.8945275 10.2200494,11.255211 10.7539062,10.71875 C11.2877631,10.182289 11.9257775,9.75520992 12.6679688,9.4375 C13.41016,9.11979008 14.1874959,8.9609375 15,8.9609375 C15.8125041,8.9609375 16.58984,9.11979008 17.3320312,9.4375 C18.0742225,9.75520992 18.7122369,10.182289 19.2460938,10.71875 C19.7799506,11.255211 20.2057276,11.8945275 20.5234375,12.6367188 C20.8411474,13.37891 21,14.1588501 21,14.9765625 Z"></path></svg>

app/views/shared/icons/_icon_action_play.svg

+<svg width="30px" height="30px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path d="M21.5401786,15.2320328 L11.90625,20.5858274 C11.7950143,20.6486998 11.6994982,20.6559541 11.6196987,20.6075908 C11.5398992,20.5592275 11.5,20.4721748 11.5,20.3464301 L11.5,9.66785867 C11.5,9.54211399 11.5398992,9.45506129 11.6196987,9.40669795 C11.6994982,9.35833462 11.7950143,9.36558901 11.90625,9.42846135 L21.5401786,14.782256 C21.6514142,14.8451283 21.7070312,14.9200904 21.7070312,15.0071444 C21.7070312,15.0941984 21.6514142,15.1691604 21.5401786,15.2320328 Z"></path></svg>

app/views/shared/icons/_icon_action_retry.svg

+<svg width="30px" height="30px" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg"><path d="M20.6114971,16.0821413 C20.6114971,16.106323 20.6090789,16.1232499 20.6042426,16.1329226 C20.2947172,17.42906 19.6466582,18.4797378 18.6600462,19.2849873 C17.6734341,20.0902369 16.5175677,20.4928556 15.1924122,20.4928556 C14.4863075,20.4928556 13.8031856,20.3598584 13.1430261,20.0938601 C12.4828665,19.8278617 11.8940517,19.4482152 11.376564,18.9549092 L10.4407381,19.8907351 C10.3488478,19.9826254 10.2400319,20.0285699 10.1142872,20.0285699 C9.98854256,20.0285699 9.87972669,19.9826254 9.78783635,19.8907351 C9.69594601,19.7988447 9.65000153,19.6900289 9.65000153,19.5642842 L9.65000153,16.3142842 C9.65000153,16.1885395 9.69594601,16.0797236 9.78783635,15.9878333 C9.87972669,15.895943 9.98854256,15.8499985 10.1142872,15.8499985 L13.3642872,15.8499985 C13.4900319,15.8499985 13.5988478,15.895943 13.6907381,15.9878333 C13.7826285,16.0797236 13.828573,16.1885395 13.828573,16.3142842 C13.828573,16.4400289 13.7826285,16.5488447 13.6907381,16.6407351 L12.6968765,17.6345967 C13.0402562,17.9537947 13.4295752,18.200444 13.8648453,18.374552 C14.3001153,18.5486601 14.7523057,18.6357128 15.2214301,18.6357128 C15.8694988,18.6357128 16.4740315,18.4785343 17.0350462,18.1641726 C17.5960609,17.8498109 18.0458332,17.4169655 18.3843765,16.8656235 C18.4375762,16.7834058 18.5657371,16.5004845 18.7688631,16.0168512 C18.8075538,15.9056155 18.8800977,15.8499985 18.9864971,15.8499985 L20.3793542,15.8499985 C20.4422265,15.8499985 20.4966345,15.8729707 20.5425797,15.9189159 C20.5885248,15.9648611 20.6114971,16.019269 20.6114971,16.0821413 Z M20.7928587,10.2785699 L20.7928587,13.5285699 C20.7928587,13.6543146 20.7469142,13.7631305 20.6550238,13.8550208 C20.5631335,13.9469111 20.4543176,13.9928556 20.328573,13.9928556 L17.078573,13.9928556 C16.9528283,13.9928556 16.8440124,13.9469111 16.7521221,13.8550208 C16.6602317,13.7631305 16.6142872,13.6543146 16.6142872,13.5285699 C16.6142872,13.4028252 16.6602317,13.2940094 16.7521221,13.202119 L17.7532381,12.2010029 C17.0374607,11.5384252 16.1935332,11.2071413 15.2214301,11.2071413 C14.5733614,11.2071413 13.9688287,11.3643198 13.407814,11.6786815 C12.8467993,11.9930432 12.397027,12.4258886 12.0584837,12.9772306 C12.005284,13.0594483 11.8771231,13.3423696 11.6739971,13.8260029 C11.6353064,13.9372386 11.5627625,13.9928556 11.4563631,13.9928556 L10.0127247,13.9928556 C9.9498524,13.9928556 9.89544446,13.9698834 9.84949929,13.9239382 C9.80355412,13.877993 9.78058188,13.8235851 9.78058188,13.7607128 L9.78058188,13.7099315 C10.0949436,12.4137941 10.7478388,11.3631163 11.7392872,10.5578668 C12.7307356,9.75261722 13.8914383,9.34999847 15.2214301,9.34999847 C15.9275348,9.34999847 16.6142839,9.48420472 17.281698,9.75262124 C17.949112,10.0210378 18.541554,10.3994752 19.0590417,10.8879449 L20.0021221,9.95211901 C20.0940124,9.86022867 20.2028283,9.81428419 20.328573,9.81428419 C20.4543176,9.81428419 20.5631335,9.86022867 20.6550238,9.95211901 C20.7469142,10.0440094 20.7928587,10.1528252 20.7928587,10.2785699 Z"></path></svg>

app/views/shared/icons/_icon_action_stop.svg

+<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M20.1357204,10.2985704 L20.1357204,19.7271418 C20.1357204,19.8432138 20.0933101,19.9436592 20.0084882,20.0284811 C19.9236664,20.1133029 19.823221,20.1557132 19.707149,20.1557132 L10.2785775,20.1557132 C10.1625055,20.1557132 10.0620601,20.1133029 9.97723825,20.0284811 C9.89241639,19.9436592 9.8500061,19.8432138 9.8500061,19.7271418 L9.8500061,10.2985704 C9.8500061,10.1824984 9.89241639,10.0820529 9.97723825,9.99723107 C10.0620601,9.91240922 10.1625055,9.86999893 10.2785775,9.86999893 L19.707149,9.86999893 C19.823221,9.86999893 19.9236664,9.91240922 20.0084882,9.99723107 C20.0933101,10.0820529 20.1357204,10.1824984 20.1357204,10.2985704 Z"></path></svg>

changelogs/unreleased/25910-convert-manual-action-icons-to-svg-to-propperly-position-them.yml

+---
+title: Convert pipeline action icons to svg to have them propperly positioned
+merge_request:
+author:

lib/gitlab/ci/status/build/cancelable.rb

@@ -10,7 +10,7 @@ module Gitlab
           end
 
           def action_icon
-            'ban'
+            'icon_action_cancel'
           end
 
           def action_path

lib/gitlab/ci/status/build/play.rb

@@ -26,17 +26,13 @@ module Gitlab
           end
 
           def action_icon
-            'play'
+            'icon_action_play'
           end
 
           def action_title
             'Play'
           end
 
-          def action_class
-            'ci-play-icon'
-          end
-
           def action_path
             play_namespace_project_build_path(subject.project.namespace,
                                               subject.project,

lib/gitlab/ci/status/build/retryable.rb

@@ -10,7 +10,7 @@ module Gitlab
           end
 
           def action_icon
-            'refresh'
+            'icon_action_retry'
           end
 
           def action_title

lib/gitlab/ci/status/build/stop.rb

@@ -26,7 +26,7 @@ module Gitlab
           end
 
           def action_icon
-            'stop'
+            'icon_action_stop'
           end
 
           def action_title

lib/gitlab/ci/status/core.rb

@@ -42,9 +42,6 @@ module Gitlab
           raise NotImplementedError
         end
 
-        def action_class
-        end
-
         def action_path
           raise NotImplementedError
         end

spec/features/projects/pipelines/pipeline_spec.rb

@@ -66,8 +66,8 @@ describe 'Pipeline', :feature, :js do
       context 'when pipeline has running builds' do
         it 'shows a running icon and a cancel action for the running build' do
           page.within('#ci-badge-deploy') do
-            expect(page).to have_selector('.ci-status-icon-running')
-            expect(page).to have_selector('.ci-action-icon-container .fa-ban')
+            expect(page).to have_selector('.js-ci-status-icon-running')
+            expect(page).to have_selector('.js-icon-action-cancel')
             expect(page).to have_content('deploy')
           end
         end
@@ -82,12 +82,12 @@ describe 'Pipeline', :feature, :js do
       context 'when pipeline has successful builds' do
         it 'shows the success icon and a retry action for the successful build' do
           page.within('#ci-badge-build') do
-            expect(page).to have_selector('.ci-status-icon-success')
+            expect(page).to have_selector('.js-ci-status-icon-success')
             expect(page).to have_content('build')
           end
 
           page.within('#ci-badge-build .ci-action-icon-container') do
-            expect(page).to have_selector('.ci-action-icon-container .fa-refresh')
+            expect(page).to have_selector('.js-icon-action-retry')
           end
         end
 
@@ -101,12 +101,12 @@ describe 'Pipeline', :feature, :js do
       context 'when pipeline has failed builds' do
         it 'shows the failed icon and a retry action for the failed build' do
           page.within('#ci-badge-test') do
-            expect(page).to have_selector('.ci-status-icon-failed')
+            expect(page).to have_selector('.js-ci-status-icon-failed')
             expect(page).to have_content('test')
           end
 
           page.within('#ci-badge-test .ci-action-icon-container') do
-            expect(page).to have_selector('.ci-action-icon-container .fa-refresh')
+            expect(page).to have_selector('.js-icon-action-retry')
           end
         end
 
@@ -120,12 +120,12 @@ describe 'Pipeline', :feature, :js do
       context 'when pipeline has manual builds' do
         it 'shows the skipped icon and a play action for the manual build' do
           page.within('#ci-badge-manual-build') do
-            expect(page).to have_selector('.ci-status-icon-manual')
+            expect(page).to have_selector('.js-ci-status-icon-manual')
             expect(page).to have_content('manual')
           end
 
           page.within('#ci-badge-manual-build .ci-action-icon-container') do
-            expect(page).to have_selector('.ci-action-icon-container .fa-play')
+            expect(page).to have_selector('.js-icon-action-play')
           end
         end
 
@@ -138,7 +138,7 @@ describe 'Pipeline', :feature, :js do
 
       context 'when pipeline has external build' do
         it 'shows the success icon and the generic comit status build' do
-          expect(page).to have_selector('.ci-status-icon-success')
+          expect(page).to have_selector('.js-ci-status-icon-success')
           expect(page).to have_content('jenkins')
           expect(page).to have_link('jenkins', href: 'http://gitlab.com/status')
         end

spec/lib/gitlab/ci/status/build/cancelable_spec.rb

@@ -62,7 +62,7 @@ describe Gitlab::Ci::Status::Build::Cancelable do
     end
 
     describe '#action_icon' do
-      it { expect(subject.action_icon).to eq 'ban' }
+      it { expect(subject.action_icon).to eq 'icon_action_cancel' }
     end
 
     describe '#action_title' do

spec/lib/gitlab/ci/status/build/play_spec.rb

@@ -44,7 +44,7 @@ describe Gitlab::Ci::Status::Build::Play do
     end
 
     describe '#action_icon' do
-      it { expect(subject.action_icon).to eq 'play' }
+      it { expect(subject.action_icon).to eq 'icon_action_play' }
     end
 
     describe '#action_title' do

spec/lib/gitlab/ci/status/build/retryable_spec.rb

@@ -62,7 +62,7 @@ describe Gitlab::Ci::Status::Build::Retryable do
     end
 
     describe '#action_icon' do
-      it { expect(subject.action_icon).to eq 'refresh' }
+      it { expect(subject.action_icon).to eq 'icon_action_retry' }
     end
 
     describe '#action_title' do

spec/lib/gitlab/ci/status/build/stop_spec.rb

@@ -46,7 +46,7 @@ describe Gitlab::Ci::Status::Build::Stop do
     end
 
     describe '#action_icon' do
-      it { expect(subject.action_icon).to eq 'stop' }
+      it { expect(subject.action_icon).to eq 'icon_action_stop' }
     end
 
     describe '#action_title' do