Merge branch '365718-pmg-icon-size' into 'master'

Mini pipeline graph dropdown - 16px icon size

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/104914



Merged-by: Natalia Tepluhina <ntepluhina@gitlab.com>
Approved-by: Libor Vanc <5022246-lvanc@users.noreply.gitlab.com>
Approved-by: Sheldon Led <sheldonled@gitlab.com>
Approved-by: Natalia Tepluhina <ntepluhina@gitlab.com>
Co-authored-by: Briley Sandlin <bsandlin@gitlab.com>

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

@@ -252,7 +252,7 @@ export default {
       @click="jobItemClick"
       @mouseout="hideTooltips"
     >
-      <div class="ci-job-name-component gl-display-flex gl-align-items-center">
+      <div class="gl-display-flex gl-align-items-center gl-flex-grow-1">
         <ci-icon :size="24" :status="job.status" class="gl-line-height-0" />
         <div class="gl-pl-3 gl-pr-3 gl-display-flex gl-flex-direction-column gl-pipeline-job-width">
           <div class="gl-text-truncate gl-pr-9 gl-line-height-normal">{{ job.name }}</div>

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

@@ -29,7 +29,7 @@ export default {
 };
 </script>
 <template>
-  <span class="ci-job-name-component mw-100 gl-display-flex gl-align-items-center">
+  <span class="mw-100 gl-display-flex gl-align-items-center gl-flex-grow-1">
     <ci-icon :size="iconSize" :status="status" class="gl-line-height-0" />
     <span class="gl-text-truncate mw-70p gl-pl-3 gl-display-inline-block">
       {{ name }}

app/assets/javascripts/pipelines/components/pipeline_mini_graph/job_item.vue

@@ -163,7 +163,7 @@ export default {
       @click.stop="hideTooltips"
       @mouseout="hideTooltips"
     >
-      <job-name-component :name="job.name" :status="job.status" :icon-size="24" />
+      <job-name-component :name="job.name" :status="job.status" />
     </gl-link>
 
     <div
@@ -175,7 +175,7 @@ export default {
       data-testid="job-without-link"
       @mouseout="hideTooltips"
     >
-      <job-name-component :name="job.name" :status="job.status" :icon-size="24" />
+      <job-name-component :name="job.name" :status="job.status" />
     </div>
 
     <action-component

app/assets/javascripts/pipelines/components/pipeline_mini_graph/pipeline_stage.vue

@@ -149,7 +149,7 @@ export default {
       class="js-builds-dropdown-list scrollable-menu"
       data-testid="mini-pipeline-graph-dropdown-menu-list"
     >
-      <div class="gl--flex-center gl-border-b gl-font-weight-bold gl-pb-3">
+      <div class="gl--flex-center gl-border-b gl-font-weight-bold gl-mb-3 gl-pb-3">
         <span class="gl-mr-1">{{ $options.i18n.stage }}</span>
         <span data-testid="pipeline-stage-dropdown-menu-title">{{ stageName }}</span>
       </div>

app/assets/stylesheets/framework/variables.scss

@@ -822,7 +822,6 @@ Pipeline Graph
 $ci-action-icon-size: 22px;
 $ci-action-icon-size-lg: 24px;
 $pipeline-dropdown-line-height: 20px;
-$pipeline-dropdown-status-icon-size: 18px;
 $ci-action-dropdown-button-size: 24px;
 $ci-action-dropdown-svg-size: 12px;
 

app/assets/stylesheets/page_bundles/_pipeline_mixins.scss

@@ -33,8 +33,8 @@
 
   .ci-action-icon-container {
     position: absolute;
-    right: 8px;
-    top: 8px;
+    right: 11px;
+    top: 7px;
 
     &.ci-action-icon-wrapper {
       height: $ci-action-dropdown-button-size;
@@ -84,25 +84,6 @@
       &.non-details-job-component {
         padding: $gl-padding-8 $gl-btn-horz-padding;
       }
-
-      .ci-job-name-component {
-        align-items: center;
-        display: flex;
-        flex: 1;
-      }
-
-      .ci-status-icon {
-        position: relative;
-
-        > svg {
-          width: $pipeline-dropdown-status-icon-size;
-          height: $pipeline-dropdown-status-icon-size;
-          margin: 3px 0;
-          position: relative;
-          overflow: visible;
-          display: block;
-        }
-      }
     }
 
     // ensure .mini-pipeline-graph-dropdown-item has hover style when action-icon is hovered