Add latest changes from gitlab-org/gitlab@master

12 files changed, 48 insertions, 33 deletions

diff --git a/app/assets/javascripts/boards/components/board_add_new_column_form.vue b/app/assets/javascripts/boards/components/board_add_new_column_form.vue
index c4a2f83ab50..1899d42fa4d 100644
--- a/app/assets/javascripts/boards/components/board_add_new_column_form.vue
+++ b/app/assets/javascripts/boards/components/board_add_new_column_form.vue
@@ -102,7 +102,7 @@ export default {
     data-qa-selector="board_add_new_list"
   >
     <div
-      class="board-inner gl-display-flex gl-flex-direction-column gl-relative gl-h-full gl-rounded-base"
+      class="board-inner gl-display-flex gl-flex-direction-column gl-relative gl-h-full gl-rounded-base gl-bg-gray-50"
     >
       <h3 class="gl-font-size-h2 gl-px-5 gl-py-5 gl-m-0" data-testid="board-add-column-form-title">
         {{ $options.i18n.newList }}
diff --git a/app/assets/javascripts/boards/components/board_blocked_icon.vue b/app/assets/javascripts/boards/components/board_blocked_icon.vue
index b81edb4dfe6..73b3db3b387 100644
--- a/app/assets/javascripts/boards/components/board_blocked_icon.vue
+++ b/app/assets/javascripts/boards/components/board_blocked_icon.vue
@@ -154,7 +154,7 @@ export default {
       :id="glIconId"
       ref="icon"
       name="issue-block"
-      class="issue-blocked-icon gl-mr-2 gl-cursor-pointer"
+      class="issue-blocked-icon gl-mr-2 gl-cursor-pointer gl-text-red-500"
       data-testid="issue-blocked-icon"
       @mouseenter="handleMouseEnter"
     />
diff --git a/app/assets/javascripts/boards/components/board_card.vue b/app/assets/javascripts/boards/components/board_card.vue
index 192bc4b5d25..4456f5a0d2e 100644
--- a/app/assets/javascripts/boards/components/board_card.vue
+++ b/app/assets/javascripts/boards/components/board_card.vue
@@ -81,10 +81,10 @@ export default {
     data-qa-selector="board_card"
     :class="[
       {
-        'multi-select': multiSelectVisible,
+        'multi-select gl-bg-blue-50 gl-border-blue-200': multiSelectVisible,
         'gl-cursor-grab': isDraggable,
         'is-disabled': isDisabled,
-        'is-active': isActive,
+        'is-active gl-bg-blue-50': isActive,
         'gl-cursor-not-allowed gl-bg-gray-10': item.isLoading,
       },
       colorClass,
@@ -95,7 +95,7 @@ export default {
     :data-item-path="item.referencePath"
     :style="cardStyle"
     data-testid="board_card"
-    class="board-card gl-p-5 gl-rounded-base"
+    class="board-card gl-p-5 gl-rounded-base gl-line-height-normal gl-relative gl-mb-3"
     @click="toggleIssue($event)"
   >
     <board-card-inner :list="list" :item="item" :update-filters="true" :index="index" />
diff --git a/app/assets/javascripts/boards/components/board_card_inner.vue b/app/assets/javascripts/boards/components/board_card_inner.vue
index a9a4912d9e9..055ed912663 100644
--- a/app/assets/javascripts/boards/components/board_card_inner.vue
+++ b/app/assets/javascripts/boards/components/board_card_inner.vue
@@ -208,7 +208,7 @@ export default {
 <template>
   <div>
     <div class="gl-display-flex" dir="auto">
-      <h4 class="board-card-title gl-mb-0 gl-mt-0 gl-mr-3">
+      <h4 class="board-card-title gl-mb-0 gl-mt-0 gl-mr-3 gl-font-base gl-overflow-break-word">
         <board-blocked-icon
           v-if="item.blocked"
           :item="item"
@@ -221,7 +221,7 @@ export default {
           v-gl-tooltip
           name="eye-slash"
           :title="__('Confidential')"
-          class="confidential-icon gl-mr-2"
+          class="confidential-icon gl-mr-2 gl-text-orange-500 gl-cursor-help"
           :aria-label="__('Confidential')"
         />
         <gl-icon
@@ -229,14 +229,14 @@ export default {
           v-gl-tooltip
           name="spam"
           :title="__('This issue is hidden because its author has been banned')"
-          class="gl-mr-2 hidden-icon"
+          class="gl-mr-2 hidden-icon gl-text-orange-500 gl-cursor-help"
           data-testid="hidden-icon"
         />
         <a
           :href="item.path || item.webUrl || ''"
           :title="item.title"
           :class="{ 'gl-text-gray-400!': item.isLoading }"
-          class="js-no-trigger"
+          class="js-no-trigger gl-text-body gl-hover-text-gray-900"
           @mousemove.stop
           >{{ item.title }}</a
         >
@@ -247,7 +247,7 @@ export default {
       <template v-for="label in orderedLabels">
         <gl-label
           :key="label.id"
-          class="js-no-trigger"
+          class="js-no-trigger gl-mt-2 gl-mr-2"
           :background-color="label.color"
           :title="label.title"
           :description="label.description"
@@ -267,7 +267,7 @@ export default {
         <gl-loading-icon v-if="item.isLoading" size="lg" class="gl-mt-5" />
         <span
           v-if="item.referencePath"
-          class="board-card-number gl-overflow-hidden gl-display-flex gl-mr-3 gl-mt-3"
+          class="board-card-number gl-overflow-hidden gl-display-flex gl-mr-3 gl-mt-3 gl-text-secondary"
           :class="{ 'gl-font-base': isEpicBoard }"
         >
           <tooltip-on-truncate
@@ -328,7 +328,10 @@ export default {
               </p>
             </gl-tooltip>
 
-            <span ref="countBadge" class="board-card-info gl-mr-0 gl-pr-0 gl-pl-3">
+            <span
+              ref="countBadge"
+              class="board-card-info gl-mr-0 gl-pr-0 gl-pl-3 gl-text-secondary gl-cursor-help"
+            >
               <span v-if="allowSubEpics" class="gl-mr-3">
                 <gl-icon name="epic" />
                 {{ totalEpicsCount }}
@@ -346,7 +349,7 @@ export default {
             <span
               v-if="shouldRenderEpicProgress"
               ref="progressBadge"
-              class="board-card-info gl-pl-0"
+              class="board-card-info gl-pl-0 gl-text-secondary gl-cursor-help"
             >
               <span class="gl-mr-3" data-testid="epic-progress">
                 <gl-icon name="progress" />
@@ -369,7 +372,7 @@ export default {
           </span>
         </span>
       </div>
-      <div class="board-card-assignee gl-display-flex gl-gap-3">
+      <div class="board-card-assignee gl-display-flex gl-gap-3 gl-mb-n2">
         <user-avatar-link
           v-for="assignee in cappedAssignees"
           :key="assignee.id"
@@ -377,7 +380,7 @@ export default {
           :img-alt="avatarUrlTitle(assignee)"
           :img-src="avatarUrl(assignee)"
           :img-size="avatarSize"
-          class="js-no-trigger"
+          class="js-no-trigger user-avatar-link"
           tooltip-placement="bottom"
           :enforce-gl-avatar="true"
         >
@@ -391,7 +394,7 @@ export default {
           v-if="shouldRenderCounter"
           v-gl-tooltip
           :title="assigneeCounterTooltip"
-          class="avatar-counter"
+          class="avatar-counter gl-bg-gray-400 gl-cursor-help gl-font-weight-bold gl-ml-n4 gl-border-0 gl-line-height-24"
           data-placement="bottom"
           >{{ assigneeCounterLabel }}</span
         >
diff --git a/app/assets/javascripts/boards/components/board_column.vue b/app/assets/javascripts/boards/components/board_column.vue
index bcf5b12b209..8fc76c02e14 100644
--- a/app/assets/javascripts/boards/components/board_column.vue
+++ b/app/assets/javascripts/boards/components/board_column.vue
@@ -76,7 +76,7 @@ export default {
   <div
     :class="{
       'is-draggable': isListDraggable,
-      'is-collapsed': list.collapsed,
+      'is-collapsed gl-w-10': list.collapsed,
       'board-type-assignee': list.listType === 'assignee',
     }"
     :data-list-id="list.id"
@@ -84,7 +84,7 @@ export default {
     data-qa-selector="board_list"
   >
     <div
-      class="board-inner gl-display-flex gl-flex-direction-column gl-relative gl-h-full gl-rounded-base"
+      class="board-inner gl-display-flex gl-flex-direction-column gl-relative gl-h-full gl-rounded-base gl-bg-gray-50"
       :class="{ 'board-column-highlighted': highlighted }"
     >
       <board-list-header :list="list" :disabled="disabled" />
diff --git a/app/assets/javascripts/boards/components/board_content.vue b/app/assets/javascripts/boards/components/board_content.vue
index 8868b9b2f3e..d99afa8455d 100644
--- a/app/assets/javascripts/boards/components/board_content.vue
+++ b/app/assets/javascripts/boards/components/board_content.vue
@@ -75,7 +75,7 @@ export default {
       v-if="!isSwimlanesOn"
       ref="list"
       v-bind="draggableOptions"
-      class="boards-list gl-w-full gl-py-5 gl-pr-3 gl-white-space-nowrap"
+      class="boards-list gl-w-full gl-py-5 gl-pr-3 gl-white-space-nowrap gl-overflow-x-scroll"
       @end="moveList"
     >
       <board-column
diff --git a/app/assets/javascripts/boards/components/board_list.vue b/app/assets/javascripts/boards/components/board_list.vue
index 66388f4eb43..1d265874bf2 100644
--- a/app/assets/javascripts/boards/components/board_list.vue
+++ b/app/assets/javascripts/boards/components/board_list.vue
@@ -265,7 +265,7 @@ export default {
 <template>
   <div
     v-show="!list.collapsed"
-    class="board-list-component gl-relative gl-h-full gl-display-flex gl-flex-direction-column"
+    class="board-list-component gl-relative gl-h-full gl-display-flex gl-flex-direction-column gl-min-h-0"
     data-qa-selector="board_list_cards_area"
   >
     <div
@@ -287,7 +287,7 @@ export default {
       :data-board-type="list.listType"
       :class="{ 'bg-danger-100': boardItemsSizeExceedsMax }"
       draggable=".board-card"
-      class="board-list gl-w-full gl-h-full gl-list-style-none gl-mb-0 gl-p-3 gl-pt-0"
+      class="board-list gl-w-full gl-h-full gl-list-style-none gl-mb-0 gl-p-3 gl-pt-0 gl-overflow-y-auto gl-overflow-x-hidden"
       data-testid="tree-root-wrapper"
       @start="handleDragOnStart"
       @end="handleDragOnEnd"
@@ -303,7 +303,11 @@ export default {
         :disabled="disabled"
       />
       <gl-intersection-observer @appear="onReachingListBottom">
-        <li v-if="showCount" class="board-list-count gl-text-center" data-issue-id="-1">
+        <li
+          v-if="showCount"
+          class="board-list-count gl-text-center gl-text-secondary gl-py-4"
+          data-issue-id="-1"
+        >
           <gl-loading-icon
             v-if="loadingMore"
             size="sm"
diff --git a/app/assets/javascripts/boards/components/board_list_header.vue b/app/assets/javascripts/boards/components/board_list_header.vue
index e3012f5b36d..230fa4e1e0f 100644
--- a/app/assets/javascripts/boards/components/board_list_header.vue
+++ b/app/assets/javascripts/boards/components/board_list_header.vue
@@ -252,7 +252,7 @@ export default {
   <header
     :class="{
       'gl-h-full': list.collapsed,
-      'board-inner gl-rounded-top-left-base gl-rounded-top-right-base': isSwimlanesHeader,
+      'board-inner gl-rounded-top-left-base gl-rounded-top-right-base gl-bg-gray-50': isSwimlanesHeader,
     }"
     :style="headerStyle"
     class="board-header gl-relative"
@@ -267,14 +267,15 @@ export default {
         'gl-py-2': list.collapsed && isSwimlanesHeader,
         'gl-flex-direction-column': list.collapsed,
       }"
-      class="board-title gl-m-0 gl-display-flex gl-align-items-center gl-font-base gl-px-3"
+      class="board-title gl-m-0 gl-display-flex gl-align-items-center gl-font-base gl-px-3 gl-h-9"
     >
       <gl-button
         v-gl-tooltip.hover
         :aria-label="chevronTooltip"
         :title="chevronTooltip"
         :icon="chevronIcon"
-        class="board-title-caret no-drag gl-cursor-pointer"
+        class="board-title-caret no-drag gl-cursor-pointer gl-hover-bg-gray-50"
+        :class="{ 'gl-mt-1': list.collapsed, 'gl-mr-2': !list.collapsed }"
         category="tertiary"
         size="small"
         data-testid="board-title-caret"
@@ -307,6 +308,7 @@ export default {
           'gl-display-none': list.collapsed && isSwimlanesHeader,
           'gl-flex-grow-0 gl-my-3 gl-mx-0': list.collapsed,
           'gl-flex-grow-1': !list.collapsed,
+          'gl-rotate-90': list.collapsed,
         }"
       >
         <!-- EE start -->
@@ -324,7 +326,7 @@ export default {
         <span
           v-if="listType === 'assignee'"
           v-show="!list.collapsed"
-          class="gl-ml-2 gl-font-weight-normal gl-text-gray-500"
+          class="gl-ml-2 gl-font-weight-normal gl-text-secondary"
         >
           @{{ listAssignee }}
         </span>
@@ -345,7 +347,7 @@ export default {
         v-if="isSwimlanesHeader && list.collapsed"
         ref="collapsedInfo"
         aria-hidden="true"
-        class="board-header-collapsed-info-icon gl-cursor-pointer gl-text-gray-500"
+        class="board-header-collapsed-info-icon gl-cursor-pointer gl-text-secondary gl-hover-text-gray-900"
       >
         <gl-icon name="information" />
       </span>
@@ -369,14 +371,14 @@ export default {
       <!-- EE end -->
 
       <div
-        class="issue-count-badge gl-display-inline-flex gl-pr-2 no-drag gl-text-gray-500"
+        class="issue-count-badge gl-display-inline-flex gl-pr-2 no-drag gl-text-secondary"
         data-testid="issue-count-badge"
         :class="{
           'gl-display-none!': list.collapsed && isSwimlanesHeader,
           'gl-p-0': list.collapsed,
         }"
       >
-        <span class="gl-display-inline-flex">
+        <span class="gl-display-inline-flex" :class="{ 'gl-rotate-90': list.collapsed }">
           <gl-tooltip :target="() => $refs.itemCount" :title="itemsTooltipLabel" />
           <span ref="itemCount" class="gl-display-inline-flex gl-align-items-center">
             <gl-icon class="gl-mr-2" :name="countIcon" :size="16" />
diff --git a/app/assets/javascripts/boards/components/board_new_item.vue b/app/assets/javascripts/boards/components/board_new_item.vue
index 600917683cd..084b7519d1f 100644
--- a/app/assets/javascripts/boards/components/board_new_item.vue
+++ b/app/assets/javascripts/boards/components/board_new_item.vue
@@ -69,7 +69,7 @@ export default {
 </script>
 
 <template>
-  <div class="board-new-issue-form">
+  <div class="board-new-issue-form gl-z-index-3 gl-m-3">
     <div class="board-card position-relative gl-p-5 rounded">
       <gl-form @submit.prevent="handleFormSubmit" @reset="handleFormCancel">
         <label :for="inputFieldId" class="gl-font-weight-bold">{{ __('Title') }}</label>
diff --git a/app/assets/javascripts/boards/components/issue_due_date.vue b/app/assets/javascripts/boards/components/issue_due_date.vue
index 73ec008c2b6..373866e36ff 100644
--- a/app/assets/javascripts/boards/components/issue_due_date.vue
+++ b/app/assets/javascripts/boards/components/issue_due_date.vue
@@ -85,7 +85,11 @@ export default {
 
 <template>
   <span>
-    <span ref="issueDueDate" :class="cssClass" class="board-card-info card-number">
+    <span
+      ref="issueDueDate"
+      :class="cssClass"
+      class="board-card-info gl-mr-3 gl-text-secondary gl-cursor-help"
+    >
       <gl-icon
         :class="{ 'text-danger': isPastDue }"
         class="board-card-info-icon gl-mr-2"
diff --git a/app/assets/javascripts/boards/components/issue_time_estimate.vue b/app/assets/javascripts/boards/components/issue_time_estimate.vue
index 9312db06efe..bc12717a92d 100644
--- a/app/assets/javascripts/boards/components/issue_time_estimate.vue
+++ b/app/assets/javascripts/boards/components/issue_time_estimate.vue
@@ -36,7 +36,7 @@ export default {
 
 <template>
   <span>
-    <span ref="issueTimeEstimate" class="board-card-info card-number">
+    <span ref="issueTimeEstimate" class="board-card-info gl-mr-3 gl-text-secondary gl-cursor-help">
       <gl-icon name="hourglass" class="board-card-info-icon gl-mr-2" />
       <time class="board-card-info-text">{{ timeEstimate }}</time>
     </span>
diff --git a/app/assets/javascripts/boards/components/item_count.vue b/app/assets/javascripts/boards/components/item_count.vue
index a11c23e5625..dab82abb646 100644
--- a/app/assets/javascripts/boards/components/item_count.vue
+++ b/app/assets/javascripts/boards/components/item_count.vue
@@ -30,7 +30,9 @@ export default {
       {{ itemsSize }}
     </span>
     <span v-if="isMaxLimitSet" class="max-issue-size">
-      {{ maxIssueCount }}
+      <!-- eslint-disable @gitlab/vue-require-i18n-strings -->
+      {{ `/ ${maxIssueCount}` }}
+      <!-- eslint-enable @gitlab/vue-require-i18n-strings -->
     </span>
   </div>
 </template>