Add latest changes from gitlab-org/gitlab@14-8-stable-eev14.8.0-rc42

11 files changed, 82 insertions, 254 deletions

diff --git a/app/assets/stylesheets/framework/blank.scss b/app/assets/stylesheets/framework/blank.scss
deleted file mode 100644
index 7dd7ab339dd..00000000000
--- a/app/assets/stylesheets/framework/blank.scss
+++ /dev/null
@@ -1,118 +0,0 @@
-.blank-state-parent-container {
-  .section-container {
-    padding: 10px;
-  }
-
-  .section-body {
-    width: 100%;
-    height: 100%;
-    padding-bottom: 25px;
-    border-radius: $border-radius-default;
-  }
-}
-
-.blank-state-row {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-}
-
-.blank-state-welcome {
-  text-align: center;
-  padding: $gl-padding 0 ($gl-padding * 2);
-
-  .blank-state-welcome-title {
-    font-size: 24px;
-  }
-
-  .blank-state-text {
-    margin-bottom: 0;
-  }
-}
-
-.blank-state-link {
-  color: $gl-text-color;
-  margin-bottom: 15px;
-
-  &:hover {
-    background-color: $gray-light;
-    text-decoration: none;
-    color: $gl-text-color;
-  }
-}
-
-.blank-state-center {
-  padding-top: 20px;
-  padding-bottom: 20px;
-  text-align: center;
-}
-
-.blank-state {
-  display: flex;
-  align-items: center;
-  padding: 20px 50px;
-  border: 1px solid $border-color;
-  border-radius: $border-radius-default;
-  min-height: 240px;
-  margin-bottom: $gl-padding;
-  width: calc(50% - #{$gl-padding-8});
-
-  @include media-breakpoint-down(sm) {
-    width: 100%;
-    flex-direction: column;
-    justify-content: center;
-    padding: 50px 20px;
-
-    .column-small & {
-      width: 100%;
-    }
-
-  }
-}
-
-.blank-state,
-.blank-state-center {
-  .blank-state-icon {
-    svg {
-      display: block;
-      margin: auto;
-    }
-  }
-
-  .blank-state-title {
-    margin-top: 0;
-    font-size: 18px;
-  }
-
-  .blank-state-body {
-    @include media-breakpoint-down(sm) {
-      text-align: center;
-      margin-top: 20px;
-    }
-
-    @include media-breakpoint-up(sm) {
-      padding-left: 20px;
-    }
-  }
-}
-
-@include media-breakpoint-up(lg) {
-  .column-large {
-    flex: 2;
-  }
-
-  .column-small {
-    flex: 1;
-    margin-bottom: 15px;
-
-    .blank-state {
-      max-width: 400px;
-      flex-wrap: wrap;
-      margin-left: 15px;
-    }
-
-    .blank-state-icon {
-      margin-bottom: 30px;
-    }
-  }
-}
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index e0e9043ae24..9cebd4f49a4 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -158,12 +158,6 @@
     line-height: $gl-btn-small-line-height;
   }
 
-  &.btn-xs {
-    padding: 2px $gl-btn-padding;
-    font-size: $gl-btn-xs-font-size;
-    line-height: $gl-btn-xs-line-height;
-  }
-
   &.btn-success {
     @include btn-green;
   }
@@ -372,29 +366,6 @@
     background-color: transparent;
     border-color: transparent;
   }
-
-  &.btn-secondary-hover-link,
-  &.btn-default-hover-link {
-    color: $gl-text-color-secondary;
-
-    &:hover,
-    &:active,
-    &:focus {
-      color: $blue-600;
-      text-decoration: none;
-    }
-  }
-
-  &.btn-primary-hover-link {
-    color: inherit;
-
-    &:hover,
-    &:active,
-    &:focus {
-      color: $blue-600;
-      text-decoration: none;
-    }
-  }
 }
 
 // The .btn-svg class is available for legacy icon buttons to
@@ -438,10 +409,6 @@ fieldset[disabled] .btn,
   cursor: default;
 }
 
-.btn-no-padding {
-  padding: 0;
-}
-
 // This class helps convert `.gl-button` children so that they consistently
 // match the style of `.btn` elements which might be around them. Ideally we
 // wouldn't need this class.
diff --git a/app/assets/stylesheets/framework/contextual_sidebar.scss b/app/assets/stylesheets/framework/contextual_sidebar.scss
index 2a3ed29258a..7b4f68e7a44 100644
--- a/app/assets/stylesheets/framework/contextual_sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual_sidebar.scss
@@ -267,6 +267,8 @@
 
     .nav-item-name {
       flex: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
 
     > a,
@@ -336,7 +338,8 @@
 .nav-sidebar-inner-scroll {
   @include gl-h-full;
   @include gl-w-full;
-  @include gl-overflow-auto;
+  @include gl-overflow-x-hidden;
+  @include gl-overflow-y-auto;
 
   > div.context-header {
     @include gl-mt-2;
diff --git a/app/assets/stylesheets/framework/diffs.scss b/app/assets/stylesheets/framework/diffs.scss
index ffacac07517..f0495fdc94e 100644
--- a/app/assets/stylesheets/framework/diffs.scss
+++ b/app/assets/stylesheets/framework/diffs.scss
@@ -582,6 +582,25 @@ table.code {
   }
 }
 
+.diff-expansion-cell {
+  flex: 1 1;
+  min-width: max-content;
+}
+
+.diff-expansion-cell-middle {
+  flex: 0 1 max-content;
+}
+
+@media only screen and (min-width: $breakpoint-xl) {
+  .diff-expansion-cell-start {
+    text-align: right;
+  }
+
+  .diff-expansion-cell-end {
+    text-align: left;
+  }
+}
+
 // Merge request diff grid layout
 .diff-grid {
   .diff-td {
@@ -603,6 +622,14 @@ table.code {
     grid-template-columns: 50px 8px 0 1fr;
   }
 
+  .diff-grid-3-col {
+    grid-template-columns: 50px 1fr !important;
+  }
+
+  &.inline-diff-view .diff-grid-3-col {
+    grid-template-columns: 50px 50px 1fr !important;
+  }
+
   .diff-grid-comments {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -832,6 +859,8 @@ table.code {
 }
 
 .diff-files-changed {
+  background-color: $body-bg;
+
   .inline-parallel-buttons {
     @include gl-relative;
     z-index: 1;
@@ -840,7 +869,6 @@ table.code {
   @include media-breakpoint-up(sm) {
     @include gl-sticky;
     top: calc(#{$header-height} + #{$mr-tabs-height});
-    @include gl-bg-white;
     z-index: 200;
 
     .with-performance-bar & {
@@ -1064,24 +1092,6 @@ table.code {
   }
 }
 
-.frame .badge.badge-pill,
-.image-diff-avatar-link .badge.badge-pill,
-.user-avatar-link .badge.badge-pill,
-.notes > .badge.badge-pill {
-  position: absolute;
-  background-color: $blue-400;
-  color: $white;
-  border: $white 1px solid;
-  min-height: $gl-padding;
-  padding: 5px 8px;
-  border-radius: 12px;
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.frame .badge.badge-pill,
 .frame .image-comment-badge,
 .frame .comment-indicator {
   // Center align badges on the frame
@@ -1113,11 +1123,6 @@ table.code {
   }
 }
 
-.notes > .badge.badge-pill {
-  display: none;
-  left: -13px;
-}
-
 .discussion-notes {
   min-height: 35px;
 
@@ -1126,18 +1131,22 @@ table.code {
     min-height: 25px;
   }
 
+  .diff-notes-expand {
+    display: none;
+  }
+
   &.collapsed {
     background-color: $white;
 
+    .diff-notes-expand {
+      display: initial;
+    }
+
     .diff-notes-collapse,
     .note,
     .discussion-reply-holder {
       display: none;
     }
-
-    .notes > .badge.badge-pill {
-      display: block;
-    }
   }
 }
 
@@ -1183,7 +1192,7 @@ table.code {
   }
 }
 
-@media (max-width: map-get($grid-breakpoints, md)-1) {
+@media (max-width: map-get($grid-breakpoints, lg)-1) {
   .diffs .files {
     @include fixed-width-container;
     flex-direction: column;
diff --git a/app/assets/stylesheets/framework/files.scss b/app/assets/stylesheets/framework/files.scss
index 9209a0c2173..9387500e66f 100644
--- a/app/assets/stylesheets/framework/files.scss
+++ b/app/assets/stylesheets/framework/files.scss
@@ -411,11 +411,6 @@ span.idiff {
   margin-right: 1.5em;
 }
 
-.label-lfs {
-  color: $common-gray-light;
-  border: 1px solid $common-gray-light;
-}
-
 .preview-container {
   overflow: auto;
 
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index 2a46e50f0da..4d0d64ae723 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -150,6 +150,10 @@ label {
   margin-bottom: 0;
   margin-top: #{$grid-size / 2};
   font-size: $gl-font-size;
+
+  .invisible {
+    visibility: hidden;
+  }
 }
 
 .gl-field-error,
diff --git a/app/assets/stylesheets/framework/header.scss b/app/assets/stylesheets/framework/header.scss
index 68535badd78..1004383cfd3 100644
--- a/app/assets/stylesheets/framework/header.scss
+++ b/app/assets/stylesheets/framework/header.scss
@@ -150,7 +150,7 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
       }
 
       li {
-        .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
+        .badge.badge-pill:not(.gl-badge) {
           box-shadow: none;
           font-weight: $gl-font-weight-bold;
         }
@@ -415,49 +415,6 @@ $top-nav-hover-bg: var(--indigo-900-alpha-008, $indigo-900-alpha-008) !important
   }
 }
 
-.title-container,
-.navbar-nav {
-  .badge.badge-pill:not(.merge-request-badge):not(.version-check-badge) {
-    position: inherit;
-    font-weight: $gl-font-weight-normal;
-    margin-left: -6px;
-    font-size: 11px;
-    color: var(--gray-950, $white);
-    padding: 0 5px;
-    line-height: 12px;
-    border-radius: 7px;
-    box-shadow: 0 1px 0 rgba($gl-header-color, 0.2);
-
-    &.green-badge {
-      background-color: var(--green-400, $green-400);
-    }
-
-    &.merge-requests-count {
-      background-color: var(--orange-400, $orange-400);
-    }
-
-    &.todos-count {
-      background-color: var(--blue-400, $blue-400);
-    }
-  }
-
-  .canary-badge {
-    .badge {
-      font-size: $gl-font-size-small;
-      line-height: $gl-line-height;
-      padding: 0 $grid-size;
-    }
-
-    &:hover {
-      text-decoration: none;
-
-      .badge {
-        text-decoration: none;
-      }
-    }
-  }
-}
-
 @include media-breakpoint-down(xs) {
   .navbar-gitlab .container-fluid {
     font-size: 18px;
diff --git a/app/assets/stylesheets/framework/markdown_area.scss b/app/assets/stylesheets/framework/markdown_area.scss
index c6e52c13e83..7731ec751c9 100644
--- a/app/assets/stylesheets/framework/markdown_area.scss
+++ b/app/assets/stylesheets/framework/markdown_area.scss
@@ -67,6 +67,27 @@
       }
     }
   }
+
+  .gl-tabs-nav {
+    @include media-breakpoint-down(xs) {
+      .nav-item {
+        flex: 1;
+        border-bottom: 1px solid $border-color;
+      }
+
+      .gl-tab-nav-item {
+        padding-top: $gl-padding-4;
+        padding-bottom: $gl-padding-8;
+      }
+
+      .md-header-toolbar {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: $gl-padding-8;
+      }
+    }
+  }
 }
 
 .md-header-tab {
diff --git a/app/assets/stylesheets/framework/secondary_navigation_elements.scss b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
index 563075b911c..8cad55f414a 100644
--- a/app/assets/stylesheets/framework/secondary_navigation_elements.scss
+++ b/app/assets/stylesheets/framework/secondary_navigation_elements.scss
@@ -18,7 +18,6 @@
       line-height: 28px;
       color: $gl-text-color-secondary;
       border: 0;
-      border-bottom: 2px solid transparent;
       white-space: nowrap;
 
       &:hover,
@@ -26,7 +25,7 @@
       &:focus {
         text-decoration: none;
         color: $black;
-        border-bottom: 2px solid $gray-darkest;
+        box-shadow: inset 0 -2px 0 0 $gray-darkest;
       }
     }
 
@@ -40,7 +39,7 @@
     a.active {
       color: $black;
       font-weight: $gl-font-weight-bold;
-      border-bottom: 2px solid var(--gl-theme-accent, $theme-indigo-500);
+      box-shadow: inset 0 -2px 0 0 var(--gl-theme-accent, $theme-indigo-500);
 
       .badge.badge-pill {
         color: $black;
diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss
index 51c41c46f61..feedc40b487 100644
--- a/app/assets/stylesheets/framework/typography.scss
+++ b/app/assets/stylesheets/framework/typography.scss
@@ -47,6 +47,10 @@
     margin-bottom: $gl-spacing-scale-2;
   }
 
+  img {
+    max-width: 100%;
+  }
+
   img:not(.emoji) {
     margin: 0 0 8px;
   }
@@ -62,15 +66,6 @@
     min-width: inherit;
     min-height: inherit;
     background-color: inherit;
-    max-width: 100%;
-  }
-
-  &:not(.md) img:not(.emoji) {
-    border: 1px solid $white-normal;
-    padding: 5px;
-    margin: 5px 0;
-    // Ensure that image does not exceed viewport
-    max-height: calc(100vh - 100px);
   }
 
   details {
@@ -375,7 +370,8 @@
     // Loose lists need bottom margin added back
     p ~ ol,
     p ~ ul {
-      margin-bottom: 16px;
    }
+      margin-bottom: 16px;
+    }
   }
 
   ul:dir(rtl),
@@ -521,32 +517,26 @@
     -moz-osx-font-smoothing: grayscale;
   }
 
-  .fa-2x,
   .admonitionblock td.icon [class^='fa icon-'] {
     font-size: 2em;
   }
 
-  .fa-exclamation-triangle::before,
   .admonitionblock td.icon .icon-warning::before {
     content: '⚠';
   }
 
-  .fa-exclamation-circle::before,
   .admonitionblock td.icon .icon-important::before {
     content: '❗';
   }
 
-  .fa-lightbulb-o::before,
   .admonitionblock td.icon .icon-tip::before {
     content: '💡';
   }
 
-  .fa-thumb-tack::before,
   .admonitionblock td.icon .icon-note::before {
     content: '📌';
   }
 
-  .fa-fire::before,
   .admonitionblock td.icon .icon-caution::before {
     content: '🔥';
   }
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 21add43ad3f..31ef5ae0646 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -52,6 +52,11 @@ $spacing-scale: (
   5: #{4 * $grid-size}
 );
 
+/* Will be moved to @gitlab/ui by https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1709 */
+$gl-spacing-scale-48: 48 * $grid-size;
+$gl-spacing-scale-75: 75 * $grid-size;
+/* End gitlab-ui#1709 */
+
 /*
  * Why another sizing scale???
  * Great question, friend!
@@ -589,8 +594,6 @@ $gl-btn-vert-padding: 8px;
 $gl-btn-horz-padding: 12px;
 $gl-btn-small-font-size: 13px;
 $gl-btn-small-line-height: 18px;
-$gl-btn-xs-font-size: 13px;
-$gl-btn-xs-line-height: 13px;
 
 /*
 * Badges
@@ -722,7 +725,7 @@ $calendar-activity-colors: (
   #7fa8c9,
   #527ba0,
   #254e77,
-);
+) !default;
 
 /*
 * Commit Page
@@ -931,8 +934,6 @@ Merge requests
 */
 $mr-tabs-height: 48px;
 $mr-version-controls-height: 56px;
-$mr-widget-margin-left: 40px;
-$mr-review-bar-height: calc(2rem + 13px);
 
 /*
 Compare Branches