Merge branch '384237-incident-timeline-ui-cleanup-improve-spacing' into 'master'

Resolve "Incident timeline UI cleanup - improve spacing"

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



Merged-by: Tristan Read <tread@gitlab.com>
Approved-by: Emily Bauman <ebauman@gitlab.com>
Approved-by: James Rushford <jrushford@gitlab.com>
Approved-by: Tristan Read <tread@gitlab.com>
Co-authored-by: psjakubowska <psedlak-jakubowska@gitlab.com>

app/assets/javascripts/issues/show/components/incidents/create_timeline_event.vue

@@ -113,13 +113,13 @@ export default {
   >
     <div
       v-if="hasTimelineEvents"
-      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-align-self-start gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-mt-2 gl-mr-3 gl-w-8 gl-h-8 gl-z-index-1"
+      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-align-self-start gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-mt-2 gl-w-8 gl-h-8 gl-z-index-1"
     >
       <gl-icon name="comment" class="note-icon" />
     </div>
     <timeline-events-form
       ref="eventForm"
-      :class="{ 'gl-border-gray-50 gl-border-t': hasTimelineEvents }"
+      :class="{ 'gl-border-gray-50 gl-border-t gl-pt-3': hasTimelineEvents }"
       :is-event-processed="createTimelineEventActive"
       show-save-and-add
       @save-event="createIncidentTimelineEvent"

app/assets/javascripts/issues/show/components/incidents/edit_timeline_event.vue

@@ -28,9 +28,9 @@ export default {
 </script>
 
 <template>
-  <div class="gl-relative gl-display-flex gl-align-items-center">
+  <div class="edit-timeline-event gl-relative gl-display-flex gl-align-items-center">
     <div
-      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-align-self-start gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-mt-2 gl-mr-3 gl-w-8 gl-h-8 gl-z-index-1"
+      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-align-self-start gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-mt-2 gl-w-8 gl-h-8 gl-z-index-1"
     >
       <gl-icon name="comment" class="note-icon" />
     </div>

app/assets/javascripts/issues/show/components/incidents/timeline_events_form.vue

@@ -166,11 +166,11 @@ export default {
 
 <template>
   <form class="gl-flex-grow-1 gl-border-gray-50">
-    <div class="gl-display-flex gl-flex-direction-column gl-sm-flex-direction-row">
-      <gl-form-group :label="__('Date')" class="gl-mt-5 gl-mr-5">
+    <div class="gl-display-flex gl-flex-direction-column gl-sm-flex-direction-row gl-mt-3">
+      <gl-form-group :label="__('Date')" class="gl-mr-5">
         <gl-datepicker id="incident-date" ref="datepicker" v-model="datePickerInput" />
       </gl-form-group>
-      <div class="gl-display-flex gl-mt-5">
+      <div class="gl-display-flex">
         <gl-form-group :label="__('Time')">
           <div class="gl-display-flex">
             <label label-for="timeline-input-hours" class="sr-only"></label>

app/assets/javascripts/issues/show/components/incidents/timeline_events_item.vue

@@ -51,12 +51,12 @@ export default {
 <template>
   <div class="timeline-event gl-display-grid">
     <div
-      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-mt-2 gl-mr-3 gl-w-8 gl-h-8 gl-p-3 gl-z-index-1"
+      class="gl-display-flex gl-align-items-center gl-justify-content-center gl-bg-white gl-text-gray-200 gl-border-gray-100 gl-border-1 gl-border-solid gl-rounded-full gl-mt-2 gl-w-8 gl-h-8 gl-p-3 gl-z-index-1"
     >
       <gl-icon :name="getEventIcon(action)" class="note-icon" />
     </div>
     <div class="timeline-event-note timeline-event-border" data-testid="event-text-container">
-      <div class="gl-display-flex gl-flex-wrap gl-align-items-center gl-gap-3 gl-mb-3">
+      <div class="gl-display-flex gl-flex-wrap gl-align-items-center gl-gap-3 gl-mb-2">
         <h3
           class="timeline-event-note-date gl-font-weight-bold gl-font-sm gl-my-0"
           data-testid="event-time"

app/assets/javascripts/issues/show/components/incidents/timeline_events_list.vue

@@ -144,11 +144,11 @@ export default {
         {{ eventDate }}
       </h2>
 
-      <ul class="notes main-notes-list gl-pt-2!">
+      <ul class="notes main-notes-list">
         <li
           v-for="(event, eventIndex) in events"
           :key="eventIndex"
-          class="timeline-entry-vertical-line timeline-entry note system-note note-wrapper gl-my-2! gl-pr-0!"
+          class="timeline-entry-vertical-line timeline-entry note system-note note-wrapper gl-my-0! gl-pr-0!"
         >
           <edit-timeline-event
             v-if="eventToEdit === event.id"

app/assets/stylesheets/page_bundles/incidents.scss

@@ -7,7 +7,13 @@
 }
 
 .timeline-event {
-  grid-template-columns: #{$gl-spacing-scale-9} minmax(0, 1fr) #{$gl-spacing-scale-7};
+  grid-template-columns: auto minmax(0, 1fr) #{$gl-spacing-scale-7};
+}
+
+.create-timeline-event,
+.edit-timeline-event,
+.timeline-event {
+  gap: $gl-spacing-scale-5;
 }
 
 /**
@@ -51,8 +57,10 @@
 }
 
 .timeline-entry:not(:last-child) {
+  @include gl-pb-0;
+
   .timeline-event-border {
-    @include gl-pb-5;
+    @include gl-pb-3;
     @include gl-border-gray-50;
     @include gl-border-1;
     @include gl-border-b-solid;