Add latest changes from gitlab-org/gitlab@master

1 files changed, 33 insertions, 39 deletions

diff --git a/app/assets/javascripts/issuable/components/related_issuable_item.vue b/app/assets/javascripts/issuable/components/related_issuable_item.vue
index 608c1deac64..ded54d60d1d 100644
--- a/app/assets/javascripts/issuable/components/related_issuable_item.vue
+++ b/app/assets/javascripts/issuable/components/related_issuable_item.vue
@@ -101,26 +101,22 @@ export default {
     :class="{
       'issuable-info-container': !canReorder,
       'card-body': canReorder,
-      'gl-pr-2': canRemove,
     }"
-    class="item-body d-flex align-items-center gl-py-3 gl-px-5"
+    class="item-body gl-display-flex gl-align-items-center gl-gap-3 gl-px-3 gl-py-2 py-xl-0 gl-mx-n2"
   >
     <div
-      class="item-contents gl-display-flex gl-align-items-center gl-flex-wrap gl-flex-grow-1 flex-xl-nowrap gl-min-h-7"
+      class="item-contents gl-display-flex gl-align-items-center gl-flex-wrap gl-flex-grow-1 gl-gap-2 flex-xl-nowrap gl-min-h-7"
     >
       <!-- Title area: Status icon (XL) and title -->
-      <div class="item-title d-flex align-items-xl-center mb-xl-0 gl-min-w-0">
-        <div ref="iconElementXL">
-          <gl-icon
-            v-if="hasState"
-            ref="iconElementXL"
-            class="gl-mr-3"
-            :class="iconClasses"
-            :name="iconName"
-            :title="stateTitle"
-            :aria-label="state"
-          />
-        </div>
+      <div class="item-title gl-display-flex gl-gap-3 gl-min-w-0">
+        <gl-icon
+          v-if="hasState"
+          ref="iconElementXL"
+          :class="iconClasses"
+          :name="iconName"
+          :title="stateTitle"
+          :aria-label="state"
+        />
         <gl-tooltip :target="() => $refs.iconElementXL">
           <span v-safe-html="stateTitle"></span>
         </gl-tooltip>
@@ -129,42 +125,46 @@ export default {
           v-gl-tooltip
           name="eye-slash"
           :title="__('Confidential')"
-          class="confidential-icon gl-mr-2 align-self-baseline align-self-md-auto mt-xl-0"
+          class="confidential-icon"
           :aria-label="__('Confidential')"
         />
-        <gl-link
-          :href="computedPath"
-          class="sortable-link gl-font-weight-normal"
-          @click="handleTitleClick"
-        >
+        <gl-link :href="computedPath" class="sortable-link" @click="handleTitleClick">
           {{ title }}
         </gl-link>
       </div>
 
       <!-- Info area: meta, path, and assignees -->
-      <div class="item-info-area d-flex flex-xl-grow-1 flex-shrink-0">
+      <div
+        class="item-info-area gl-display-flex gl-flex-grow-1 gl-flex-shrink-0 gl-gap-3 gl-ml-6 ml-xl-0"
+      >
         <!-- Meta area: path and attributes -->
         <!-- If there is no room beside the path, meta attributes are put ABOVE it (flex-wrap-reverse). -->
         <!-- See design: https://gitlab-org.gitlab.io/gitlab-design/hosted/pedro/%2383-issue-mr-rows-cards-spec-previews/#artboard16 -->
         <div
-          class="item-meta d-flex flex-wrap-reverse justify-content-start justify-content-md-between"
+          class="item-meta gl-display-flex gl-md-justify-content-space-between gl-gap-3 gl-flex-wrap-wrap-reverse"
         >
           <!-- Path area: status icon (<XL), path, issue # -->
           <div
-            class="item-path-area item-path-id d-flex align-items-center mr-2 mt-2 mt-xl-0 ml-xl-2"
+            class="item-path-area item-path-id gl-display-flex gl-align-items-center gl-flex-wrap gl-gap-3"
           >
             <gl-tooltip :target="() => $refs.iconElement">
               <span v-safe-html="stateTitle"></span>
             </gl-tooltip>
-            <span v-gl-tooltip :title="itemPath" class="path-id-text d-inline-block">{{
-              itemPath
-            }}</span>
+            <span
+              v-if="itemPath"
+              v-gl-tooltip
+              :title="itemPath"
+              class="path-id-text d-inline-block"
+              >{{ itemPath }}</span
+            >
             <span>{{ pathIdSeparator }}{{ itemId }}</span>
           </div>
 
           <!-- Attributes area: CI, epic count, weight, milestone -->
           <!-- They have a different order on large screen sizes -->
-          <div class="item-attributes-area d-flex align-items-center mt-2 mt-xl-0">
+          <div
+            class="item-attributes-area gl-display-flex gl-align-items-center gl-flex-wrap gl-gap-3"
+          >
             <span v-if="hasPipeline" class="mr-ci-status order-md-last">
               <a :href="pipelineStatus.details_path">
                 <ci-icon v-gl-tooltip :status="pipelineStatus" :title="pipelineStatusTooltip" />
@@ -174,7 +174,7 @@ export default {
             <issue-milestone
               v-if="hasMilestone"
               :milestone="milestone"
-              class="d-flex align-items-center item-milestone order-md-first ml-md-0"
+              class="item-milestone gl-font-sm gl-display-flex gl-align-items-center order-md-first"
             />
 
             <!-- Flex order for slots is defined in the parent component: e.g. related_issues_block.vue -->
@@ -198,24 +198,17 @@ export default {
             <issue-assignees
               v-if="hasAssignees"
               :assignees="assignees"
-              class="item-assignees align-items-center align-self-end flex-shrink-0 order-md-2 d-none d-md-flex"
+              class="item-assignees gl-display-flex gl-align-items-center gl-align-self-end gl-flex-shrink-0 order-md-2"
             />
           </div>
         </div>
-
-        <!-- Assignees. On small layouts, these are put here, at the end of the card. -->
-        <issue-assignees
-          v-if="assignees.length !== 0"
-          :assignees="assignees"
-          class="item-assignees d-flex align-items-center align-self-end flex-shrink-0 d-md-none gl-ml-3"
-        />
       </div>
     </div>
 
     <span
       v-if="isLocked"
       v-gl-tooltip
-      class="gl-px-3 gl-display-inline-block gl-cursor-not-allowed"
+      class="gl-display-inline-block gl-cursor-not-allowed"
       :title="lockedMessage"
       data-testid="lockIcon"
     >
@@ -226,8 +219,9 @@ export default {
       v-gl-tooltip
       icon="close"
       category="tertiary"
+      size="small"
       :disabled="removeDisabled"
-      class="js-issue-item-remove-button gl-ml-3"
+      class="js-issue-item-remove-button"
       data-qa-selector="remove_related_issue_button"
       :title="__('Remove')"
       :aria-label="__('Remove')"