Add gl-badge to CI badges

app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue

 <script>
-import { GlTooltipDirective, GlButton, GlLink, GlLoadingIcon } from '@gitlab/ui';
+import { GlTooltipDirective, GlButton, GlLink, GlLoadingIcon, GlBadge } from '@gitlab/ui';
 import CiStatus from '~/vue_shared/components/ci_icon.vue';
 import { __, sprintf } from '~/locale';
 import { accessValue } from './accessors';
@@ -15,6 +15,7 @@ export default {
     GlButton,
     GlLink,
     GlLoadingIcon,
+    GlBadge,
   },
   inject: {
     dataMethod: {
@@ -172,7 +173,9 @@ export default {
         </div>
       </div>
       <div class="gl-pt-2">
-        <span class="badge badge-primary" data-testid="downstream-pipeline-label">{{ label }}</span>
+        <gl-badge size="sm" variant="info" data-testid="downstream-pipeline-label">
+          {{ label }}
+        </gl-badge>
       </div>
       <gl-button
         :id="buttonId"

app/views/projects/ci/builds/_build.html.haml

@@ -43,16 +43,16 @@
     .label-container
       - if job.tags.any?
         - job.tags.each do |tag|
-          %span.badge.badge-primary
+          %span.badge.badge-pill.gl-badge.sm.badge-primary
             = tag
       - if job.try(:trigger_request)
-        %span.badge.badge-info= _('triggered')
+        %span.badge.badge-pill.gl-badge.sm.badge-info= _('triggered')
       - if job.try(:allow_failure) && !job.success?
-        %span.badge.badge-warning= _('allowed to fail')
+        %span.badge.badge-pill.gl-badge.sm.badge-warning= _('allowed to fail')
       - if job.schedulable?
-        %span.badge.badge-info= s_('DelayedJobs|delayed')
+        %span.badge.badge-pill.gl-badge.sm.badge-info= s_('DelayedJobs|delayed')
       - elsif job.action?
-        %span.badge.badge-info= _('manual')
+        %span.badge.badge-pill.gl-badge.sm.badge-info= _('manual')
 
   - if pipeline_link
     %td

app/views/projects/pipelines/_info.html.haml

@@ -21,24 +21,24 @@
     .icon-container
       = sprite_icon('flag')
     - if @pipeline.child?
-      %span.js-pipeline-child.badge.badge-primary.has-tooltip{ title: s_("Pipelines|This is a child pipeline within the parent pipeline") }
+      %span.js-pipeline-child.badge.badge-pill.gl-badge.sm.badge-primary.has-tooltip{ title: s_("Pipelines|This is a child pipeline within the parent pipeline") }
         = s_('Pipelines|Child pipeline')
         = surround '(', ')' do
           = link_to s_('Pipelines|parent'), pipeline_path(@pipeline.triggered_by_pipeline), class: 'text-white text-underline'
     - if @pipeline.latest?
-      %span.js-pipeline-url-latest.badge.badge-success.has-tooltip{ title: _("Latest pipeline for the most recent commit on this branch") }
+      %span.js-pipeline-url-latest.badge.badge-pill.gl-badge.sm.badge-success.has-tooltip{ title: _("Latest pipeline for the most recent commit on this branch") }
         latest
     - if @pipeline.has_yaml_errors?
-      %span.js-pipeline-url-yaml.badge.badge-danger.has-tooltip{ title: @pipeline.yaml_errors }
+      %span.js-pipeline-url-yaml.badge.badge-pill.gl-badge.sm.badge-danger.has-tooltip{ title: @pipeline.yaml_errors }
         yaml invalid
     - if @pipeline.failure_reason?
-      %span.js-pipeline-url-failure.badge.badge-danger.has-tooltip{ title: @pipeline.failure_reason }
+      %span.js-pipeline-url-failure.badge.badge-pill.gl-badge.sm.badge-danger.has-tooltip{ title: @pipeline.failure_reason }
         error
     - if @pipeline.auto_devops_source?
       - popover_title_text = html_escape(_('This pipeline makes use of a predefined CI/CD configuration enabled by %{b_open}Auto DevOps.%{b_close}')) % { b_open: '<b>'.html_safe, b_close: '</b>'.html_safe }
       - popover_content_url = help_page_path('topics/autodevops/index.md')
       - popover_content_text = _('Learn more about Auto DevOps')
-      %a.js-pipeline-url-autodevops.badge.badge-info.autodevops-badge{ href: "#", tabindex: "0", role: "button", data: { container: "body",
+      %a.js-pipeline-url-autodevops.badge.badge-pill.gl-badge.sm.badge-info.autodevops-badge{ href: "#", tabindex: "0", role: "button", data: { container: "body",
         toggle: "popover",
         placement: "top",
         html: "true",
@@ -48,10 +48,10 @@
       } }
         Auto DevOps
     - if @pipeline.detached_merge_request_pipeline?
-      %span.js-pipeline-url-mergerequest.badge.badge-info.has-tooltip{ title: _('Pipelines for merge requests are configured. A detached pipeline runs in the context of the merge request, and not against the merged result. Learn more in the documentation for Pipelines for Merged Results.') }
+      %span.js-pipeline-url-mergerequest.badge.badge-pill.gl-badge.sm.badge-info.has-tooltip{ title: _('Pipelines for merge requests are configured. A detached pipeline runs in the context of the merge request, and not against the merged result. Learn more in the documentation for Pipelines for Merged Results.') }
         detached
     - if @pipeline.stuck?
-      %span.js-pipeline-url-stuck.badge.badge-warning
+      %span.js-pipeline-url-stuck.badge.badge-pill.gl-badge.sm.badge-warning
         stuck
 
   .well-segment.branch-info

changelogs/unreleased/yo-gl-badge-ci.yml

+---
+title: Add gl-badge to CI badges
+merge_request: 51547
+author: Yogi (@yo)
+type: other