Merge branch '61613-spacing-mr-widgets' into 'master'

Align merge request icons and text

Closes #61613

See merge request gitlab-org/gitlab-ce!28561

app/assets/javascripts/reports/components/issue_status_icon.vue

@@ -16,7 +16,7 @@ export default {
     statusIconSize: {
       type: Number,
       required: false,
-      default: 32,
+      default: 24,
     },
   },
   computed: {

app/assets/javascripts/reports/components/report_item.vue

@@ -27,7 +27,7 @@ export default {
     statusIconSize: {
       type: Number,
       required: false,
-      default: 32,
+      default: 24,
     },
     isNew: {
       type: Boolean,
@@ -43,12 +43,15 @@ export default {
 };
 </script>
 <template>
-  <li :class="{ 'is-dismissed': issue.isDismissed }" class="report-block-list-issue">
+  <li
+    :class="{ 'is-dismissed': issue.isDismissed }"
+    class="report-block-list-issue justify-content-center align-items-center"
+  >
     <issue-status-icon
       v-if="showReportSectionStatusIcon"
       :status="status"
       :status-icon-size="statusIconSize"
-      class="append-right-5"
+      class="append-right-default"
     />
 
     <component :is="component" v-if="component" :issue="issue" :status="status" :is-new="isNew" />

app/assets/javascripts/reports/components/report_section.vue

@@ -165,8 +165,8 @@ export default {
 <template>
   <section class="media-section">
     <div class="media">
-      <status-icon :status="statusIconName" />
-      <div class="media-body d-flex flex-align-self-center">
+      <status-icon :status="statusIconName" :size="24" />
+      <div class="media-body d-flex flex-align-self-center prepend-left-default">
         <span class="js-code-text code-text">
           {{ headerText }}
           <slot :name="slotName"></slot>

app/assets/javascripts/reports/components/summary_row.vue

@@ -44,10 +44,16 @@ export default {
 };
 </script>
 <template>
-  <div class="report-block-list-issue report-block-list-issue-parent">
-    <div class="report-block-list-icon append-right-10 prepend-left-5">
-      <gl-loading-icon v-if="statusIcon === 'loading'" css-class="report-block-list-loading-icon" />
-      <ci-icon v-else :status="iconStatus" />
+  <div
+    class="report-block-list-issue report-block-list-issue-parent justify-content-center align-items-center"
+  >
+    <div class="report-block-list-icon append-right-default">
+      <gl-loading-icon
+        v-if="statusIcon === 'loading'"
+        css-class="report-block-list-loading-icon"
+        size="md"
+      />
+      <ci-icon v-else :status="iconStatus" :size="24" />
     </div>
 
     <div class="report-block-list-issue-description">

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

@@ -14,6 +14,6 @@ export default {
 
 <template>
   <div class="circle-icon-container append-right-default align-self-start align-self-lg-center">
-    <icon :name="name" />
+    <icon :name="name" :size="24" />
   </div>
 </template>

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

@@ -96,16 +96,14 @@ export default {
 <template>
   <div class="ci-widget media js-ci-widget">
     <template v-if="!hasPipeline || hasCIError">
-      <div
-        class="add-border ci-status-icon ci-status-icon-failed ci-error js-ci-error append-right-default"
-      >
-        <icon :size="32" name="status_failed_borderless" />
+      <div class="add-border ci-status-icon ci-status-icon-failed ci-error js-ci-error">
+        <icon :size="24" name="status_failed_borderless" />
       </div>
-      <div class="media-body" v-html="errorText"></div>
+      <div class="media-body prepend-left-default" v-html="errorText"></div>
     </template>
     <template v-else-if="hasPipeline">
       <a :href="status.details_path" class="align-self-start append-right-default">
-        <ci-icon :status="status" :size="32" :borderless="true" class="add-border" />
+        <ci-icon :status="status" :size="24" :borderless="true" class="add-border" />
       </a>
       <div class="ci-widget-container d-flex">
         <div class="ci-widget-content">

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

@@ -32,8 +32,8 @@ export default {
 };
 </script>
 <template>
-  <div class="space-children d-flex append-right-10 widget-status-icon">
-    <div v-if="isLoading" class="mr-widget-icon"><gl-loading-icon size="md" /></div>
+  <div class="d-flex widget-status-icon">
+    <div v-if="isLoading" class="mr-widget-icon"><gl-loading-icon size="sm" /></div>
 
     <ci-icon v-else :status="statusObj" :size="24" />
 

app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue

@@ -83,7 +83,7 @@ export default {
       <gl-button
         :aria-label="ariaLabel"
         variant="blank"
-        class="commit-edit-toggle square s24 mr-2"
+        class="commit-edit-toggle square s24 append-right-default"
         @click.stop="toggle()"
       >
         <icon :name="collapseIcon" :size="16" />

app/assets/javascripts/vue_merge_request_widget/components/states/nothing_to_merge.vue

@@ -18,7 +18,9 @@ export default {
 <template>
   <div class="mr-widget-body mr-widget-empty-state">
     <div class="row">
-      <div class="artwork col-md-5 order-md-last col-12 text-center">
+      <div
+        class="artwork col-md-5 order-md-last col-12 text-center d-flex justify-content-center align-items-center"
+      >
         <span v-html="emptyStateSVG"></span>
       </div>
       <div class="text col-md-7 order-md-first col-12">

app/assets/stylesheets/framework/icons.scss

@@ -88,8 +88,5 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border: $border-size solid $gray-400;
-  border-radius: 50%;
-  padding: $gl-padding-8 - $border-size;
   color: $gray-700;
 }

app/assets/stylesheets/pages/merge_requests.scss

@@ -10,8 +10,8 @@
     float: left;
   }
 
-  > *:not(:last-child) {
-    margin-right: 10px;
+  > *:not(:first-child) {
+    margin-left: 10px;
   }
 }
 
@@ -69,7 +69,7 @@
     content: '';
     border-left: 1px solid $gray-200;
     position: absolute;
-    left: 32px;
+    left: 28px;
     top: -17px;
     height: 16px;
   }
@@ -114,7 +114,7 @@
       padding: $gl-padding;
 
       @include media-breakpoint-up(md) {
-        padding-left: $gl-padding-50;
+        padding-left: $gl-padding-8 * 7;
       }
     }
   }
@@ -264,6 +264,10 @@
 
   .widget-status-icon {
     align-self: flex-start;
+
+    button {
+      margin-left: $gl-padding;
+    }
   }
 
   .mr-widget-body {
@@ -271,8 +275,8 @@
 
     @include clearfix;
 
-    &.media > *:first-child {
-      margin-right: 10px;
+    button {
+      margin-left: $gl-padding;
     }
 
     .approve-btn {
@@ -312,6 +316,7 @@
     .bold {
       font-weight: $gl-font-weight-bold;
       color: $gl-gray-light;
+      margin-left: 10px;
     }
 
     .state-label {
@@ -377,9 +382,13 @@
 
     &.mr-widget-empty-state {
       line-height: 20px;
+      padding: $gl-padding;
 
       .artwork {
-        margin-bottom: $gl-padding;
+
+        @include media-breakpoint-down(md) {
+          margin-bottom: $gl-padding;
+        }
       }
 
       .text {
@@ -395,7 +404,7 @@
   }
 
   .mr-widget-help {
-    padding: 10px 16px 10px $gl-padding-50;
+    padding: 10px 16px 10px ($gl-padding-8 * 7);
     font-style: italic;
   }
 
@@ -913,7 +922,7 @@
   .media-body {
     min-width: 0;
     font-size: 12px;
-    margin-left: 48px;
+    margin-left: 40px;
   }
 
   &:not(:last-child) {

app/assets/stylesheets/pages/pipelines.scss

@@ -588,8 +588,8 @@
     }
 
     .ci-status-icon svg {
-      height: 20px;
-      width: 20px;
+      height: 24px;
+      width: 24px;
     }
 
     .dropdown-menu-toggle {

app/assets/stylesheets/pages/reports.scss

@@ -57,7 +57,7 @@
 
 .report-block-container {
   border-top: 1px solid $border-color;
-  padding: $gl-padding-top;
+  padding: $gl-padding - 2;
   background-color: $gray-light;
 
   // Clean MR widget CSS
@@ -96,17 +96,14 @@
 
   .ci-status-icon {
     svg {
-      width: 16px;
-      height: 16px;
-      left: -2px;
+      width: 24px;
+      height: 24px;
     }
   }
 }
 
 .report-block-list-issue {
   display: flex;
-  align-items: flex-start;
-  align-content: flex-start;
 }
 
 .is-dismissed .report-block-list-issue-description,

changelogs/unreleased/61613-spacing-mr-widgets.yml

+---
+title: Left align mr widget icons and text
+merge_request: 28561
+author: 
+type: fixed