Remove "borderless" in MR Widget CI Icon

As having both `borderless` and `.add-border` class in the same element
is contradictory, this change removed both from the MR widget icon.

The appearance is almost the same, however, as the circle border
is shown by the icon svg.

app/assets/javascripts/pipelines/components/test_reports/test_suite_table.vue

@@ -114,7 +114,7 @@ export default {
           <div role="rowheader" class="table-mobile-header">{{ __('Status') }}</div>
           <div class="table-mobile-content text-center">
             <div
-              class="add-border ci-status-icon d-flex align-items-center justify-content-end justify-content-md-center"
+              class="ci-status-icon d-flex align-items-center justify-content-end justify-content-md-center"
               :class="`ci-status-icon-${testCase.status}`"
             >
               <gl-icon :size="24" :name="testCase.icon" />

app/assets/javascripts/pipelines/stores/test_reports/utils.js

@@ -4,16 +4,16 @@ import { TestStatus } from '../../constants';
 export function iconForTestStatus(status) {
   switch (status) {
     case TestStatus.SUCCESS:
-      return 'status_success_borderless';
+      return 'status_success';
     case TestStatus.FAILED:
-      return 'status_failed_borderless';
+      return 'status_failed';
     case TestStatus.ERROR:
-      return 'status_warning_borderless';
+      return 'status_warning';
     case TestStatus.SKIPPED:
-      return 'status_skipped_borderless';
+      return 'status_skipped';
     case TestStatus.UNKNOWN:
     default:
-      return 'status_notfound_borderless';
+      return 'status_notfound';
   }
 }
 

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue

@@ -177,7 +177,7 @@ export default {
     </template>
     <template v-else-if="hasPipeline">
       <a :href="status.details_path" class="align-self-start gl-mr-3">
-        <ci-icon :status="status" :size="24" :borderless="true" class="add-border" />
+        <ci-icon :status="status" :size="24" />
       </a>
       <div class="ci-widget-container d-flex">
         <div class="ci-widget-content">

app/assets/stylesheets/framework/icons.scss

@@ -3,10 +3,6 @@
   svg {
     fill: $green-500;
   }
-
-  &.add-border {
-    @include borderless-status-icon($green-500);
-  }
 }
 
 .ci-status-icon-error,
@@ -14,10 +10,6 @@
   svg {
     fill: $red-500;
   }
-
-  &.add-border {
-    @include borderless-status-icon($red-500);
-  }
 }
 
 .ci-status-icon-pending,
@@ -27,31 +19,21 @@
   svg {
     fill: $orange-500;
   }
-
-  &.add-border {
-    @include borderless-status-icon($orange-500);
-  }
 }
 
 .ci-status-icon-running {
   svg {
     fill: $blue-400;
   }
-
-  &.add-border {
-    @include borderless-status-icon($blue-400);
-  }
 }
 
 .ci-status-icon-canceled,
-.ci-status-icon-disabled {
+.ci-status-icon-disabled,
+.ci-status-icon-scheduled,
+.ci-status-icon-manual {
   svg {
     fill: $gl-text-color;
   }
-
-  &.add-border {
-    @include borderless-status-icon($gl-text-color);
-  }
 }
 
 .ci-status-icon-preparing,
@@ -61,17 +43,6 @@
   svg {
     fill: var(--gray-400, $gray-400);
   }
-
-  &.add-border {
-    @include borderless-status-icon(var(--gray-400, $gray-400));
-  }
-}
-
-.ci-status-icon-scheduled,
-.ci-status-icon-manual {
-  svg {
-    fill: $gl-text-color;
-  }
 }
 
 .icon-link {

app/assets/stylesheets/framework/mixins.scss

@@ -354,13 +354,6 @@
   }
 }
 
-@mixin borderless-status-icon($color) {
-  svg {
-    border: 1px solid $color;
-    border-radius: 50%;
-  }
-}
-
 @mixin emoji-menu-toggle-button {
   line-height: 1;
   padding: 0;

changelogs/unreleased/299559-remove-add-border-borderless-prop-from-ci-icon-when-used-together.yml

+---
+title: Make CI Icon in merge request pipeline detail consistent with other widget
+  icons
+merge_request: 52516
+author:
+type: fixed