Merge branch...

Merge branch '299559-remove-add-border-borderless-prop-from-ci-icon-when-used-together' into 'master'

Remove redundant borderless state  for CI Icon in MR widget pipeline and Tests tab

See merge request gitlab-org/gitlab!52516

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