Add latest changes from gitlab-org/gitlab@master

4f288fdc · GitLab Bot · f67f18d9 · 4f288fdc · 4f288fdc · 4f288fdc
--- a/app/assets/javascripts/ide/components/ide_review.vue
+++ b/app/assets/javascripts/ide/components/ide_review.vue
@@ -53,7 +53,7 @@ export default {
          @click="updateViewer"
        />
      </div>
-      <div class="prepend-top-5 ide-review-sub-header">
+      <div class="gl-mt-2 ide-review-sub-header">
        <template v-if="showLatestChangesText">
          {{ __('Latest changes') }}
        </template>

--- a/app/assets/javascripts/monitoring/components/dashboard_panel.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard_panel.vue
@@ -339,7 +339,6 @@ export default {
      <h5
        ref="graphTitle"
        class="prometheus-graph-title gl-font-lg font-weight-bold text-truncate gl-mr-3"
-        tabindex="0"
      >
        {{ title }}
      </h5>

--- a/app/assets/javascripts/monitoring/components/graph_group.vue
+++ b/app/assets/javascripts/monitoring/components/graph_group.vue
@@ -52,7 +52,7 @@ export default {
 </script>

 <template>
-  <div v-if="showPanels" ref="graph-group" class="card prometheus-panel" tabindex="0">
+  <div v-if="showPanels" ref="graph-group" class="card prometheus-panel">
    <div class="card-header d-flex align-items-center">
      <h4 class="flex-grow-1">{{ name }}</h4>
      <a

--- a/app/assets/javascripts/reports/accessibility_report/components/accessibility_issue_body.vue
+++ b/app/assets/javascripts/reports/accessibility_report/components/accessibility_issue_body.vue
@@ -36,7 +36,7 @@ export default {
 };
 </script>
 <template>
-  <div class="report-block-list-issue-description prepend-top-5 gl-mb-2">
+  <div class="report-block-list-issue-description gl-mt-2 gl-mb-2">
    <div ref="accessibility-issue-description" class="report-block-list-issue-description-text">
      <div v-if="isNew" ref="accessibility-issue-is-new-badge" class="badge badge-danger gl-mr-2">
        {{ s__('AccessibilityReport|New') }}

--- a/app/assets/javascripts/reports/components/report_section.vue
+++ b/app/assets/javascripts/reports/components/report_section.vue
@@ -91,6 +91,11 @@ export default {
      required: false,
      default: undefined,
    },
+    shouldEmitToggleEvent: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
  },

  data() {
@@ -157,6 +162,9 @@ export default {
  },
  methods: {
    toggleCollapsed() {
+      if (this.shouldEmitToggleEvent) {
+        this.$emit('toggleEvent');
+      }
      this.isCollapsed = !this.isCollapsed;
    },
  },

--- a/app/assets/javascripts/reports/components/test_issue_body.vue
+++ b/app/assets/javascripts/reports/components/test_issue_body.vue
@@ -25,7 +25,7 @@ export default {
 };
 </script>
 <template>
-  <div class="report-block-list-issue-description prepend-top-5 gl-mb-2">
+  <div class="report-block-list-issue-description gl-mt-2 gl-mb-2">
    <div class="report-block-list-issue-description-text" data-testid="test-issue-body-description">
      <button
        type="button"

--- a/app/assets/javascripts/vue_shared/components/file_finder/item.vue
+++ b/app/assets/javascripts/vue_shared/components/file_finder/item.vue
@@ -88,7 +88,7 @@ export default {
        >
        </span>
      </strong>
-      <span class="diff-changed-file-path prepend-top-5">
+      <span class="diff-changed-file-path gl-mt-2">
        <span
          v-for="(char, charIndex) in pathWithEllipsis.split('')"
          :key="charIndex + char"

--- a/app/assets/stylesheets/application.scss
+++ b/app/assets/stylesheets/application.scss
@@ -11,30 +11,30 @@
 // like a table or typography then make changes in the framework/ directory.
 // If you need to add unique style that should affect only one page - use pages/
 // directory.
-@import "@gitlab/at.js/dist/css/jquery.atwho";
-@import "dropzone/dist/basic";
-@import "select2/select2";
+@import '@gitlab/at.js/dist/css/jquery.atwho';
+@import 'dropzone/dist/basic';
+@import 'select2/select2';

 // GitLab UI framework
-@import "framework";
+@import 'framework';

 // Font icons
-@import "font-awesome";
+@import 'font-awesome';

 // Page specific styles (issues, projects etc):
-@import "pages/**/*";
+@import 'pages/**/*';

 // Component specific styles, will be moved to gitlab-ui
-@import "components/**/*";
+@import 'components/**/*';

 // Vendors specific styles
-@import "vendors/**/*";
+@import 'vendors/**/*';

 // Styles for JS behaviors.
-@import "behaviors";
+@import 'behaviors';

 // EE-only stylesheets
-@import "application_ee";
+@import 'application_ee';

 // CSS util classes
 /**
@@ -42,12 +42,12 @@
  Please check https://unpkg.com/browse/@gitlab/ui/src/scss/utilities.scss
  to see the available utility classes.
 **/
-@import "utilities";
+@import 'utilities';

 // Gitlab UI util classes
-@import "@gitlab/ui/src/scss/utilities";
+@import '@gitlab/ui/src/scss/utilities';

 /* print styles */
 @media print {
-  @import "print";
+  @import 'print';
 }
--- a/app/assets/stylesheets/application_dark.scss
+++ b/app/assets/stylesheets/application_dark.scss
-@import "./themes/dark";
+@import './themes/dark';

-@import "./application";
+@import './application';
--- a/app/assets/stylesheets/behaviors.scss
+++ b/app/assets/stylesheets/behaviors.scss
@@ -16,6 +16,7 @@
 .js-toggler-container {
  .turn-on { display: block; }
  .turn-off { display: none; }
+
  &.on {
    .turn-on { display: none; }
    .turn-off { display: block; }
@@ -23,6 +24,6 @@
 }

 // Hide element if Vue is still working on rendering it fully.
-[v-cloak="true"] {
+[v-cloak='true'] {
  display: none !important;
 }
--- a/app/assets/stylesheets/bootstrap_migration.scss
+++ b/app/assets/stylesheets/bootstrap_migration.scss
@@ -23,7 +23,7 @@ body,
  // Override default font size used in non-csslab UI
  // Use rem to keep default font-size at 14px on body so 1rem still
  // fits 8px grid, but also allow users to change browser font size
-  font-size: .875rem;
+  font-size: 0.875rem;
 }

 legend {
@@ -32,11 +32,12 @@ legend {
 }

 button,
-html [type="button"],
-[type="reset"],
-[type="submit"],
-[role="button"] {
+html [type='button'],
+[type='reset'],
+[type='submit'],
+[role='button'] {
  // Override bootstrap reboot
+  /* stylelint-disable-next-line property-no-vendor-prefix */
  -webkit-appearance: inherit;
  cursor: pointer;
 }
@@ -77,7 +78,7 @@ h5,
  font-size: $gl-font-size;
 }

-input[type="file"] {
+input[type='file'] {
  // Bootstrap 4 file input height is taller by default
  // which makes them look ugly
  line-height: 1;

--- a/app/assets/stylesheets/disable_animations.scss
+++ b/app/assets/stylesheets/disable_animations.scss
 * {
+  /* stylelint-disable property-no-vendor-prefix */
  -o-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
@@ -9,6 +10,7 @@
  -o-animation: none !important;
  -ms-animation: none !important;
  animation: none !important;
+  /* stylelint-enable property-no-vendor-prefix */
 }

 // Disable sticky changes bar for tests

--- a/app/assets/stylesheets/emoji_sprites.scss
+++ b/app/assets/stylesheets/emoji_sprites.scss
--- a/app/assets/stylesheets/errors.scss
+++ b/app/assets/stylesheets/errors.scss
@@ -15,9 +15,9 @@ $header-color: #456;
 body {
  color: $body-color;
  text-align: center;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: auto;
-  font-size: .875rem;
+  font-size: 0.875rem;
 }

 h1 {
@@ -105,7 +105,6 @@ a {
  }

  @include media-breakpoint-up(sm) {
-
    li {
      display: inline-block;
      padding-bottom: 0;

--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -68,6 +68,6 @@
 @import 'framework/read_more';
 @import 'framework/flex_grid';
 @import 'framework/system_messages';
-@import "framework/spinner";
+@import 'framework/spinner';
 @import 'framework/card';
 @import 'framework/editor-lite';
--- a/app/assets/stylesheets/framework/common.scss
+++ b/app/assets/stylesheets/framework/common.scss
@@ -396,7 +396,6 @@ img.emoji {
  🚨 Do not use these classes — they are deprecated and being removed. 🚨
  See https://gitlab.com/gitlab-org/gitlab/-/issues/217418 for more details.
 **/
-.prepend-top-5 { margin-top: 5px; }
 .prepend-top-10 { margin-top: 10px; }
 .prepend-top-15 { margin-top: 15px; }
 .prepend-top-20 { margin-top: 20px; }

--- a/app/assets/stylesheets/highlight/themes/dark.scss
+++ b/app/assets/stylesheets/highlight/themes/dark.scss
 /* https://github.com/MozMorris/tomorrow-pygments */

-@import "../common";
+@import '../common';

 /*
 * Dark syntax colors
@@ -223,11 +223,20 @@ $dark-il: #de935f;
  .cs { color: $dark-cs; } /* Comment.Special */
  .gd { color: $dark-gd; } /* Generic.Deleted */
  .ge { font-style: italic; } /* Generic.Emph */
-  .gh { color: $dark-gh; font-weight: $gl-font-weight-bold; } /* Generic.Heading */
+  .gh { /* Generic.Heading */
+    color: $dark-gh;
+    font-weight: $gl-font-weight-bold;
+  }
  .gi { color: $dark-gi; } /* Generic.Inserted */
-  .gp { color: $dark-gp; font-weight: $gl-font-weight-bold; } /* Generic.Prompt */
+  .gp { /* Generic.Prompt */
+    color: $dark-gp;
+    font-weight: $gl-font-weight-bold;
+  }
  .gs { font-weight: $gl-font-weight-bold; } /* Generic.Strong */
-  .gu { color: $dark-gu; font-weight: $gl-font-weight-bold; } /* Generic.Subheading */
+  .gu { /* Generic.Subheading */
+    color: $dark-gu;
+    font-weight: $gl-font-weight-bold;
+  }
  .kc { color: $dark-kc; } /* Keyword.Constant */
  .kd { color: $dark-kd; } /* Keyword.Declaration */
  .kn { color: $dark-kn; } /* Keyword.Namespace */

--- a/app/assets/stylesheets/highlight/themes/monokai.scss
+++ b/app/assets/stylesheets/highlight/themes/monokai.scss
 /* https://github.com/richleland/pygments-css/blob/master/monokai.css */

-@import "../common";
+@import '../common';

 /*
 * Monokai Colors
@@ -211,7 +211,10 @@ $monokai-gi: #a6e22e;

  .hll { background-color: $monokai-hll; }
  .c { color: $monokai-c; } /* Comment */
-  .err { color: $monokai-err-color; background-color: $monokai-err-bg; } /* Error */
+  .err { /* Error */
+    color: $monokai-err-color;
+    background-color: $monokai-err-bg;
+  }
  .k { color: $monokai-k; } /* Keyword */
  .l { color: $monokai-l; } /* Literal */
  .n { color: $monokai-n; } /* Name */

--- a/app/assets/stylesheets/highlight/themes/none.scss
+++ b/app/assets/stylesheets/highlight/themes/none.scss
@@ -2,7 +2,7 @@
 * None Syntax Colors
 */

-@import "../common";
+@import '../common';

 @mixin match-line {
  color: $black-transparent;
@@ -10,7 +10,7 @@
 }

 .code.none {
-    // Line numbers
+  // Line numbers
  .line-numbers,
  .diff-line-num {
    background-color: $gray-light;
@@ -44,7 +44,6 @@
  $none-expanded-bg: #e0e0e0;

  .line_holder {
-
    &.match .line_content,
    .new-nonewline.line_content,
    .old-nonewline.line_content {
@@ -149,12 +148,12 @@
    background-color: $white-normal;
  }

-    // Search result highlight
+  // Search result highlight
  span.highlight_word {
    background-color: $white-normal;
  }

-    // Links to URLs, emails, or dependencies
+  // Links to URLs, emails, or dependencies
  .line a {
    color: $gl-text-color;
    text-decoration: underline;

--- a/app/assets/stylesheets/highlight/themes/solarized-dark.scss
+++ b/app/assets/stylesheets/highlight/themes/solarized-dark.scss
 /* https://gist.github.com/qguv/7936275 */

-@import "../common";
+@import '../common';

 /*
 * Solarized dark colors
@@ -244,13 +244,19 @@ $solarized-dark-il: #2aa198;
  .c1 { color: $solarized-dark-c1; } /* Comment.Single */
  .cs { color: $solarized-dark-cs; } /* Comment.Special */
  .gd { color: $solarized-dark-gd; } /* Generic.Deleted */
-  .ge { color: $solarized-dark-ge; font-style: italic; } /* Generic.Emph */
+  .ge { /* Generic.Emph */
+    color: $solarized-dark-ge;
+    font-style: italic;
+  }
  .gr { color: $solarized-dark-gr; } /* Generic.Error */
  .gh { color: $solarized-dark-gh; } /* Generic.Heading */
  .gi { color: $solarized-dark-gi; } /* Generic.Inserted */
  .go { color: $solarized-dark-go; } /* Generic.Output */
  .gp { color: $solarized-dark-gp; } /* Generic.Prompt */
-  .gs { color: $solarized-dark-gs; font-weight: $gl-font-weight-bold; } /* Generic.Strong */
+  .gs { /* Generic.Strong */
+    color: $solarized-dark-gs;
+    font-weight: $gl-font-weight-bold;
+  }
  .gu { color: $solarized-dark-gu; } /* Generic.Subheading */
  .gt { color: $solarized-dark-gt; } /* Generic.Traceback */
  .kc { color: $solarized-dark-kc; } /* Keyword.Constant */