Merge branch '239861-pipeline-light-text-normal' into 'master'

Remove CSS that ligthens texts in the pipeline

See merge request gitlab-org/gitlab!45253

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

@@ -48,7 +48,9 @@ export default {
     >
       <ci-icon :status="group.status" />
 
-      <span class="ci-status-text text-truncate mw-70p gl-pl-2 d-inline-block align-bottom">
+      <span
+        class="gl-text-truncate mw-70p gl-pl-2 gl-display-inline-block gl-vertical-align-bottom"
+      >
         {{ group.name }}
       </span>
 

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

@@ -27,7 +27,7 @@ export default {
 <template>
   <span class="ci-job-name-component mw-100">
     <ci-icon :status="status" />
-    <span class="ci-status-text text-truncate mw-70p gl-pl-2 d-inline-block align-bottom">
+    <span class="gl-text-truncate mw-70p gl-pl-2 gl-display-inline-block gl-vertical-align-bottom">
       {{ name }}
     </span>
   </span>

app/assets/stylesheets/pages/pipelines.scss

@@ -89,11 +89,6 @@
   }
 }
 
-.ci-build-text,
-.ci-status-text {
-  font-weight: 200;
-}
-
 /**
  * Terminal
  */

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

@@ -8,12 +8,12 @@
 - if status.has_details?
   = link_to status.details_path, class: 'mini-pipeline-graph-dropdown-item d-flex', data: { toggle: 'tooltip', title: tooltip, container: 'body' } do
     %span{ class: klass }= sprite_icon(status.icon)
-    %span.ci-build-text.text-truncate.mw-70p.gl-pl-2= subject.name
+    %span.gl-text-truncate.mw-70p.gl-pl-2= subject.name
 
 - else
   .menu-item.mini-pipeline-graph-dropdown-item.d-flex{ data: { toggle: 'tooltip', title: tooltip, container: 'body' } }
     %span{ class: klass }= sprite_icon(status.icon)
-    %span.ci-build-text.text-truncate.mw-70p.gl-pl-2= subject.name
+    %span.gl-text-truncate.mw-70p.gl-pl-2= subject.name
 
 - if status.has_action?
   = link_to status.action_path, class: "gl-button ci-action-icon-container ci-action-icon-wrapper js-ci-action-icon", method: status.action_method, data: { toggle: 'tooltip', title: status.action_title, container: 'body' } do

changelogs/unreleased/239861-pipeline-light-text-normal.yml

+---
+title: Remove CSS that ligthens texts in the pipeline
+merge_request: 45253
+author:
+type: changed

spec/frontend/fixtures/static/pipeline_graph.html

@@ -10,7 +10,7 @@ Test
 <div class="curve"></div>
 <a>
 <svg></svg>
-<div class="ci-status-text">
+<div>
 stop_review
 </div>
 </a>

spec/frontend/mini_pipeline_graph_dropdown_spec.js

@@ -69,7 +69,7 @@ describe('Mini Pipeline Graph Dropdown', () => {
         html: `<li>
           <a class="mini-pipeline-graph-dropdown-item" href="#">
             <span class="ci-status-icon ci-status-icon-failed"></span>
-            <span class="ci-build-text">build</span>
+            <span>build</span>
           </a>
           <a class="ci-action-icon-wrapper js-ci-action-icon" href="#"></a>
         </li>`,

spec/frontend/pipelines/graph/job_item_spec.js

 import { mount } from '@vue/test-utils';
-import { trimText } from 'helpers/text_helper';
 import JobItem from '~/pipelines/components/graph/job_item.vue';
 
 describe('pipeline graph job item', () => {
@@ -65,7 +64,7 @@ describe('pipeline graph job item', () => {
 
         expect(wrapper.find('.ci-status-icon-success').exists()).toBe(true);
 
-        expect(trimText(wrapper.find('.ci-status-text').text())).toBe(mockJob.name);
+        expect(wrapper.text()).toBe(mockJob.name);
 
         done();
       });
@@ -85,7 +84,7 @@ describe('pipeline graph job item', () => {
       expect(wrapper.find('.ci-status-icon-success').exists()).toBe(true);
       expect(wrapper.find('a').exists()).toBe(false);
 
-      expect(trimText(wrapper.find('.ci-status-text').text())).toBe(mockJobWithoutDetails.name);
+      expect(wrapper.text()).toBe(mockJobWithoutDetails.name);
     });
 
     it('should apply hover class and provided class name', () => {

spec/frontend/pipelines/graph/job_name_component_spec.js

@@ -21,12 +21,7 @@ describe('job name component', () => {
   });
 
   it('should render the provided name', () => {
-    expect(
-      wrapper
-        .find('.ci-status-text')
-        .text()
-        .trim(),
-    ).toBe(propsData.name);
+    expect(wrapper.text()).toBe(propsData.name);
   });
 
   it('should render an icon with the provided status', () => {