Merge branch '301246-graph-spacing' into 'master'

Resolve "Graphs in the contributor page should conform with spacing guidelines"

See merge request gitlab-org/gitlab!54431

app/assets/javascripts/contributors/components/contributors.vue

@@ -201,11 +201,12 @@ export default {
     </div>
 
     <div v-else-if="showChart" class="contributors-charts">
-      <h4>{{ __('Commits to') }} {{ branch }}</h4>
+      <h4 class="gl-mb-2 gl-mt-5">{{ __('Commits to') }} {{ branch }}</h4>
       <span>{{ __('Excluding merge commits. Limited to 6,000 commits.') }}</span>
       <resizable-chart-container>
         <gl-area-chart
           slot-scope="{ width }"
+          class="gl-mb-5"
           :width="width"
           :data="masterChartData"
           :option="masterChartOptions"
@@ -218,10 +219,12 @@ export default {
         <div
           v-for="(contributor, index) in individualChartsData"
           :key="index"
-          class="col-lg-6 col-12"
+          class="col-lg-6 col-12 gl-my-5"
         >
-          <h4>{{ contributor.name }}</h4>
-          <p>{{ n__('%d commit', '%d commits', contributor.commits) }} ({{ contributor.email }})</p>
+          <h4 class="gl-mb-2 gl-mt-0">{{ contributor.name }}</h4>
+          <p class="gl-mb-3">
+            {{ n__('%d commit', '%d commits', contributor.commits) }} ({{ contributor.email }})
+          </p>
           <resizable-chart-container>
             <gl-area-chart
               slot-scope="{ width }"

changelogs/unreleased/301246-graph-spacing.yml

+---
+title: Add space to graph in contributor page
+merge_request: 54431
+author: Yogi (@yo)
+type: changed

spec/frontend/contributors/component/__snapshots__/contributors_spec.js.snap

@@ -5,7 +5,9 @@ exports[`Contributors charts should render charts when loading completed and the
   <div
     class="contributors-charts"
   >
-    <h4>
+    <h4
+      class="gl-mb-2 gl-mt-5"
+    >
       Commits to master
     </h4>
      
@@ -16,6 +18,7 @@ exports[`Contributors charts should render charts when loading completed and the
     <div>
       <glareachart-stub
         annotations=""
+        class="gl-mb-5"
         data="[object Object]"
         height="264"
         includelegendavgmax="true"
@@ -34,14 +37,20 @@ exports[`Contributors charts should render charts when loading completed and the
       class="row"
     >
       <div
-        class="col-lg-6 col-12"
+        class="col-lg-6 col-12 gl-my-5"
       >
-        <h4>
+        <h4
+          class="gl-mb-2 gl-mt-0"
+        >
           John
         </h4>
          
-        <p>
+        <p
+          class="gl-mb-3"
+        >
+          
           2 commits (jawnnypoo@gmail.com)
+        
         </p>
          
         <div>