Update Action Icons

10 files changed, 20 insertions, 25 deletions

diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue
index 59a944f74a9..781cc9222de 100644
--- a/app/assets/javascripts/pipelines/components/graph/action_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue
@@ -1,6 +1,5 @@
 <script>
-  import getActionIcon from '../../../vue_shared/ci_action_icons';
-  import tooltip from '../../../vue_shared/directives/tooltip';
+    import tooltip from '../../../vue_shared/directives/tooltip';
   import icon from '../../../vue_shared/components/icon.vue';
 
   /**
@@ -39,12 +38,8 @@
     },
 
     computed: {
-      actionIconSvg() {
-        return getActionIcon(this.actionIcon);
-      },
-
       cssClass() {
-        return `js-${gl.text.dasherize(this.actionIcon)}`;
+        return `${gl.text.dasherize(this.actionIcon)} js-${gl.text.dasherize(this.actionIcon)}`;
       },
     },
   };
@@ -59,7 +54,6 @@
     :class="cssClass"
     data-container="body">
     <icon
-      name="stop"
-      size="16"/>
+      :name="actionIcon"/>
   </a>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue b/app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue
index 7c3409b1e5e..a9be6e08f2e 100644
--- a/app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/dropdown_action_component.vue
@@ -37,13 +37,6 @@
     directives: {
       tooltip,
     },
-
-    computed: {
-      actionIconSvg() {
-        alert('LA');
-        return getActionIcon(this.actionIcon);
-      },
-    },
   };
 </script>
 <template>
@@ -56,8 +49,7 @@
     class="ci-action-icon-wrapper js-ci-status-icon"
     data-container="body"
     aria-label="Job's action">
-    {{actionIcon}}
     <icon
-      name="retry"/>
+      :name="actionIcon"/>
   </a>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/icon.vue b/app/assets/javascripts/vue_shared/components/icon.vue
index 53e30829b2f..01c33869b23 100644
--- a/app/assets/javascripts/vue_shared/components/icon.vue
+++ b/app/assets/javascripts/vue_shared/components/icon.vue
@@ -40,7 +40,7 @@
       },
       fullCssClass() {
         let classString = '' || this.cssClass;
-        // if (this.size) classString += `s${this.size}`
+        if (this.size) classString += `s${this.size}`
         return classString;
       },
     },
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 53d8d3cbb9a..c0e16b37ad7 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -734,6 +734,15 @@ button.mini-pipeline-graph-dropdown-toggle {
       &:focus svg {
         fill: $gl-text-color;
       }
+
+      &.icon-action-retry,
+      &.icon-action-play {
+        svg {
+          width: calc($ci-action-icon-size-6);
+          height: calc($ci-action-icon-size-6);
+          left: 8px;
+        }
+      }
     }
 
     // link to the build
diff --git a/lib/gitlab/ci/status/build/cancelable.rb b/lib/gitlab/ci/status/build/cancelable.rb
index 8ad3e57e59d..2d9166d6bdd 100644
--- a/lib/gitlab/ci/status/build/cancelable.rb
+++ b/lib/gitlab/ci/status/build/cancelable.rb
@@ -8,7 +8,7 @@ module Gitlab
           end
 
           def action_icon
-            'icon_action_cancel'
+            'cancel'
           end
 
           def action_path
diff --git a/lib/gitlab/ci/status/build/failed_allowed.rb b/lib/gitlab/ci/status/build/failed_allowed.rb
index e42d3574357..d71e63e73eb 100644
--- a/lib/gitlab/ci/status/build/failed_allowed.rb
+++ b/lib/gitlab/ci/status/build/failed_allowed.rb
@@ -8,7 +8,7 @@ module Gitlab
           end
 
           def icon
-            'icon_status_warning'
+            'warning'
           end
 
           def group
diff --git a/lib/gitlab/ci/status/build/play.rb b/lib/gitlab/ci/status/build/play.rb
index c7726543599..b7b45466d3b 100644
--- a/lib/gitlab/ci/status/build/play.rb
+++ b/lib/gitlab/ci/status/build/play.rb
@@ -12,7 +12,7 @@ module Gitlab
           end
 
           def action_icon
-            'icon_action_play'
+            'play'
           end
 
           def action_title
diff --git a/lib/gitlab/ci/status/build/retryable.rb b/lib/gitlab/ci/status/build/retryable.rb
index 8c8fdc56d75..44ffe783e50 100644
--- a/lib/gitlab/ci/status/build/retryable.rb
+++ b/lib/gitlab/ci/status/build/retryable.rb
@@ -8,7 +8,7 @@ module Gitlab
           end
 
           def action_icon
-            'icon_action_retry'
+            'retry'
           end
 
           def action_title
diff --git a/lib/gitlab/ci/status/build/stop.rb b/lib/gitlab/ci/status/build/stop.rb
index d464738deaf..46e730797e4 100644
--- a/lib/gitlab/ci/status/build/stop.rb
+++ b/lib/gitlab/ci/status/build/stop.rb
@@ -12,7 +12,7 @@ module Gitlab
           end
 
           def action_icon
-            'icon_action_stop'
+            'stop'
           end
 
           def action_title
diff --git a/spec/javascripts/pipelines/graph/dropdown_action_component_spec.js b/spec/javascripts/pipelines/graph/dropdown_action_component_spec.js
index 25fd18b197e..ba721bc53c6 100644
--- a/spec/javascripts/pipelines/graph/dropdown_action_component_spec.js
+++ b/spec/javascripts/pipelines/graph/dropdown_action_component_spec.js
@@ -11,7 +11,7 @@ describe('action component', () => {
         tooltipText: 'bar',
         link: 'foo',
         actionMethod: 'post',
-        actionIcon: 'icon_action_cancel',
+        actionIcon: 'cancel',
       },
     }).$mount();