Add latest changes from gitlab-org/gitlab@master

25 files changed, 38 insertions, 92 deletions

diff --git a/app/assets/javascripts/boards/components/issue_time_estimate.vue b/app/assets/javascripts/boards/components/issue_time_estimate.vue
index 3385aad5b11..5c33ba9461c 100644
--- a/app/assets/javascripts/boards/components/issue_time_estimate.vue
+++ b/app/assets/javascripts/boards/components/issue_time_estimate.vue
@@ -34,7 +34,7 @@ export default {
 <template>
   <span>
     <span ref="issueTimeEstimate" class="board-card-info card-number">
-      <icon name="hourglass" css-classes="board-card-info-icon align-top" /><time
+      <icon name="hourglass" class="board-card-info-icon align-top" /><time
         class="board-card-info-text"
         >{{ timeEstimate }}</time
       >
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_card_list_item.vue b/app/assets/javascripts/cycle_analytics/components/stage_card_list_item.vue
index 63549596fac..fc6d83bf96c 100644
--- a/app/assets/javascripts/cycle_analytics/components/stage_card_list_item.vue
+++ b/app/assets/javascripts/cycle_analytics/components/stage_card_list_item.vue
@@ -34,7 +34,7 @@ export default {
         class="more-actions-toggle btn btn-transparent p-0"
         data-toggle="dropdown"
       >
-        <icon css-classes="icon" name="ellipsis_v" />
+        <icon class="icon" name="ellipsis_v" />
       </gl-button>
       <ul class="more-actions-dropdown dropdown-menu dropdown-open-left">
         <slot name="dropdown-options"></slot>
diff --git a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
index b1d568532a6..1d54c4a4264 100644
--- a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
+++ b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
@@ -100,7 +100,7 @@ export default {
 
           <template slot="lastSeen" slot-scope="errors">
             <div class="d-flex align-items-center">
-              <icon name="calendar" css-classes="text-secondary mr-1" />
+              <icon name="calendar" class="text-secondary mr-1" />
               <time-ago :time="errors.item.lastSeen" class="text-secondary" />
             </div>
           </template>
diff --git a/app/assets/javascripts/groups/components/item_actions.vue b/app/assets/javascripts/groups/components/item_actions.vue
index cafd22731b1..4b569970204 100644
--- a/app/assets/javascripts/groups/components/item_actions.vue
+++ b/app/assets/javascripts/groups/components/item_actions.vue
@@ -56,7 +56,7 @@ export default {
       class="leave-group btn btn-xs no-expand"
       @click.prevent="onLeaveGroup"
     >
-      <icon name="leave" css-classes="position-top-0" />
+      <icon name="leave" class="position-top-0" />
     </a>
     <a
       v-if="group.canEdit"
@@ -68,7 +68,7 @@ export default {
       data-placement="bottom"
       class="edit-group btn btn-xs no-expand"
     >
-      <icon name="settings" css-classes="position-top-0" />
+      <icon name="settings" class="position-top-0" />
     </a>
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue
index 3156a398113..b6fc567f8cc 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue
@@ -86,7 +86,7 @@ export default {
       data-placement="left"
       class="append-bottom-10"
     >
-      <icon :name="additionIconName" :size="18" :css-classes="addedFilesIconClass" />
+      <icon :name="additionIconName" :size="18" :class="addedFilesIconClass" />
     </div>
     {{ addedFilesLength }}
     <div
@@ -96,7 +96,7 @@ export default {
       data-placement="left"
       class="prepend-top-10 append-bottom-10"
     >
-      <icon :name="modifiedIconName" :size="18" :css-classes="modifiedFilesClass" />
+      <icon :name="modifiedIconName" :size="18" :class="modifiedFilesClass" />
     </div>
     {{ modifiedFilesLength }}
   </div>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index 302adccd759..47b205f0a75 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -114,7 +114,7 @@ export default {
       </span>
       <div class="ml-auto d-flex align-items-center">
         <div class="d-flex align-items-center ide-commit-list-changed-icon">
-          <icon :name="iconName" :size="16" :css-classes="iconClass" />
+          <icon :name="iconName" :size="16" :class="iconClass" />
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/ide/components/external_link.vue b/app/assets/javascripts/ide/components/external_link.vue
index d1857f0176a..558da9b706e 100644
--- a/app/assets/javascripts/ide/components/external_link.vue
+++ b/app/assets/javascripts/ide/components/external_link.vue
@@ -28,7 +28,7 @@ export default {
       rel="noopener noreferrer"
     >
       <span class="vertical-align-middle">{{ __('Open in file view') }}</span>
-      <icon :size="16" name="external-link" css-classes="vertical-align-middle space-right" />
+      <icon :size="16" name="external-link" class="vertical-align-middle space-right" />
     </a>
   </div>
 </template>
diff --git a/app/assets/javascripts/ide/components/file_row_extra.vue b/app/assets/javascripts/ide/components/file_row_extra.vue
index 48be97c8952..5819999a459 100644
--- a/app/assets/javascripts/ide/components/file_row_extra.vue
+++ b/app/assets/javascripts/ide/components/file_row_extra.vue
@@ -79,7 +79,7 @@ export default {
         data-container="body"
         data-placement="right"
         name="file-modified"
-        css-classes="prepend-left-5 ide-file-modified"
+        class="prepend-left-5 ide-file-modified"
       />
     </span>
     <changed-file-icon
diff --git a/app/assets/javascripts/ide/components/jobs/stage.vue b/app/assets/javascripts/ide/components/jobs/stage.vue
index b1be25ea602..9ad9d4455b5 100644
--- a/app/assets/javascripts/ide/components/jobs/stage.vue
+++ b/app/assets/javascripts/ide/components/jobs/stage.vue
@@ -77,7 +77,7 @@ export default {
       <div v-if="!stage.isLoading || stage.jobs.length" class="append-right-8 prepend-left-4">
         <span class="badge badge-pill"> {{ jobsCount }} </span>
       </div>
-      <icon :name="collapseIcon" css-classes="ide-stage-collapse-icon" />
+      <icon :name="collapseIcon" class="ide-stage-collapse-icon" />
     </div>
     <div v-show="!stage.isCollapsed" class="card-body">
       <gl-loading-icon v-if="showLoadingIcon" />
diff --git a/app/assets/javascripts/ide/components/mr_file_icon.vue b/app/assets/javascripts/ide/components/mr_file_icon.vue
index 821be319cce..cf8a1abbde4 100644
--- a/app/assets/javascripts/ide/components/mr_file_icon.vue
+++ b/app/assets/javascripts/ide/components/mr_file_icon.vue
@@ -18,6 +18,6 @@ export default {
     :title="__('Part of merge request changes')"
     :size="12"
     name="git-merge"
-    css-classes="append-right-8"
+    class="append-right-8"
   />
 </template>
diff --git a/app/assets/javascripts/ide/components/new_dropdown/button.vue b/app/assets/javascripts/ide/components/new_dropdown/button.vue
index 062a64a19d7..5bd6642930c 100644
--- a/app/assets/javascripts/ide/components/new_dropdown/button.vue
+++ b/app/assets/javascripts/ide/components/new_dropdown/button.vue
@@ -52,7 +52,7 @@ export default {
     class="btn-blank"
     @click.stop.prevent="clicked"
   >
-    <icon :name="icon" :css-classes="iconClasses" />
+    <icon :name="icon" :class="iconClasses" />
     <template v-if="showLabel">
       {{ label }}
     </template>
diff --git a/app/assets/javascripts/ide/components/repo_file_status_icon.vue b/app/assets/javascripts/ide/components/repo_file_status_icon.vue
index 84a962bfc7d..9773e835a5c 100644
--- a/app/assets/javascripts/ide/components/repo_file_status_icon.vue
+++ b/app/assets/javascripts/ide/components/repo_file_status_icon.vue
@@ -29,6 +29,6 @@ export default {
 
 <template>
   <span v-if="file.file_lock" v-tooltip :title="lockTooltip" data-container="body">
-    <icon name="lock" css-classes="file-status-icon" />
+    <icon name="lock" class="file-status-icon" />
   </span>
 </template>
diff --git a/app/assets/javascripts/notes/components/note_actions.vue b/app/assets/javascripts/notes/components/note_actions.vue
index 6cc873359da..89d434a60ba 100644
--- a/app/assets/javascripts/notes/components/note_actions.vue
+++ b/app/assets/javascripts/notes/components/note_actions.vue
@@ -149,9 +149,9 @@ export default {
         title="Add reaction"
         data-position="right"
       >
-        <icon css-classes="link-highlight award-control-icon-neutral" name="slight-smile" />
-        <icon css-classes="link-highlight award-control-icon-positive" name="smiley" />
-        <icon css-classes="link-highlight award-control-icon-super-positive" name="smiley" />
+        <icon class="link-highlight award-control-icon-neutral" name="slight-smile" />
+        <icon class="link-highlight award-control-icon-positive" name="smiley" />
+        <icon class="link-highlight award-control-icon-super-positive" name="smiley" />
       </a>
     </div>
     <reply-button
@@ -168,7 +168,7 @@ export default {
         class="note-action-button js-note-edit btn btn-transparent qa-note-edit-button"
         @click="onEdit"
       >
-        <icon name="pencil" css-classes="link-highlight" />
+        <icon name="pencil" class="link-highlight" />
       </button>
     </div>
     <div v-if="showDeleteAction" class="note-actions-item">
@@ -191,7 +191,7 @@ export default {
         data-toggle="dropdown"
         @click="closeTooltip"
       >
-        <icon css-classes="icon" name="ellipsis_v" />
+        <icon class="icon" name="ellipsis_v" />
       </button>
       <ul class="dropdown-menu more-actions-dropdown dropdown-open-left">
         <li v-if="canReportAsAbuse">
diff --git a/app/assets/javascripts/notes/components/note_actions/reply_button.vue b/app/assets/javascripts/notes/components/note_actions/reply_button.vue
index 8bdee759a23..20551279aec 100644
--- a/app/assets/javascripts/notes/components/note_actions/reply_button.vue
+++ b/app/assets/javascripts/notes/components/note_actions/reply_button.vue
@@ -26,7 +26,7 @@ export default {
       :title="__('Reply to comment')"
       @click="$emit('startReplying')"
     >
-      <icon name="comment" css-classes="link-highlight" />
+      <icon name="comment" class="link-highlight" />
     </gl-button>
   </div>
 </template>
diff --git a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
index 35eba266625..396ecc3e291 100644
--- a/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
+++ b/app/assets/javascripts/set_status_modal/set_status_modal_wrapper.vue
@@ -194,9 +194,9 @@ export default {
                 v-show="noEmoji"
                 class="js-no-emoji-placeholder no-emoji-placeholder position-relative"
               >
-                <icon name="slight-smile" css-classes="award-control-icon-neutral" />
-                <icon name="smiley" css-classes="award-control-icon-positive" />
-                <icon name="smile" css-classes="award-control-icon-super-positive" />
+                <icon name="slight-smile" class="award-control-icon-neutral" />
+                <icon name="smiley" class="award-control-icon-positive" />
+                <icon name="smile" class="award-control-icon-super-positive" />
               </span>
             </button>
           </span>
diff --git a/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue b/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue
index e6f2fe2b5fc..3d96405896d 100644
--- a/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue
+++ b/app/assets/javascripts/sidebar/components/todo_toggle/todo.vue
@@ -82,11 +82,7 @@ export default {
     data-boundary="viewport"
     @click="handleButtonClick"
   >
-    <icon
-      v-show="collapsed"
-      :css-classes="collapsedButtonIconClasses"
-      :name="collapsedButtonIcon"
-    />
+    <icon v-show="collapsed" :class="collapsedButtonIconClasses" :name="collapsedButtonIcon" />
     <span v-show="!collapsed" class="issuable-todo-inner"> {{ buttonLabel }} </span>
     <gl-loading-icon v-show="isActionActive" :inline="true" />
   </button>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue b/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue
index 457a71cab95..75f557d05dd 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue
@@ -19,6 +19,6 @@ export default {
 </script>
 <template>
   <a :href="link" target="_blank" rel="noopener noreferrer nofollow" :class="cssClass">
-    {{ __('View app') }} <icon css-classes="fgray" name="external-link" />
+    {{ __('View app') }} <icon class="fgray" name="external-link" />
   </a>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
index a97538d813a..54cd0c9c642 100644
--- a/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/changed_file_icon.vue
@@ -83,7 +83,7 @@ export default {
     :class="{ 'ml-auto': isCentered }"
     class="file-changed-icon d-inline-block"
   >
-    <icon v-if="showIcon" :name="changedIcon" :size="size" :css-classes="changedIconClass" />
+    <icon v-if="showIcon" :name="changedIcon" :size="size" :class="changedIconClass" />
   </span>
 </template>
 
diff --git a/app/assets/javascripts/vue_shared/components/ci_icon.vue b/app/assets/javascripts/vue_shared/components/ci_icon.vue
index 5d373e179b2..162cfc02959 100644
--- a/app/assets/javascripts/vue_shared/components/ci_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/ci_icon.vue
@@ -66,5 +66,5 @@ export default {
 };
 </script>
 <template>
-  <span :class="cssClass"> <icon :name="icon" :size="size" :css-classes="cssClasses" /> </span>
+  <span :class="cssClass"> <icon :name="icon" :size="size" :class="cssClasses" /> </span>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
index c6d61d6ee62..fe1a2a092ad 100644
--- a/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/content_viewer/viewers/download_viewer.vue
@@ -40,7 +40,7 @@ export default {
         </template>
       </p>
       <gl-link :href="path" class="btn btn-default" rel="nofollow" download target="_blank">
-        <icon :size="16" name="download" css-classes="float-left append-right-8" />
+        <icon :size="16" name="download" class="float-left append-right-8" />
         {{ __('Download') }}
       </gl-link>
     </div>
diff --git a/app/assets/javascripts/vue_shared/components/file_icon.vue b/app/assets/javascripts/vue_shared/components/file_icon.vue
index b69ecc1dce6..952ffa1fa0e 100644
--- a/app/assets/javascripts/vue_shared/components/file_icon.vue
+++ b/app/assets/javascripts/vue_shared/components/file_icon.vue
@@ -75,7 +75,7 @@ export default {
     <svg v-if="!loading && !folder" :class="[iconSizeClass, cssClasses]">
       <use v-bind="{ 'xlink:href': spriteHref }" />
     </svg>
-    <icon v-if="!loading && folder" :name="folderIconName" :size="size" css-classes="folder-icon" />
+    <icon v-if="!loading && folder" :name="folderIconName" :size="size" class="folder-icon" />
     <gl-loading-icon v-if="loading" :inline="true" />
   </span>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/icon.vue b/app/assets/javascripts/vue_shared/components/icon.vue
index fa89473da62..73f4dfef062 100644
--- a/app/assets/javascripts/vue_shared/components/icon.vue
+++ b/app/assets/javascripts/vue_shared/components/icon.vue
@@ -27,7 +27,7 @@ if (process.env.NODE_ENV !== 'production') {
  *  <icon
  *    name="retry"
  *    :size="32"
- *    css-classes="top"
+ *    class="top"
  *  />
  */
 export default {
@@ -42,45 +42,7 @@ export default {
       type: Number,
       required: false,
       default: 16,
-      validator(value) {
-        return validSizes.includes(value);
-      },
-    },
-
-    cssClasses: {
-      type: String,
-      required: false,
-      default: '',
-    },
-
-    width: {
-      type: Number,
-      required: false,
-      default: null,
-    },
-
-    height: {
-      type: Number,
-      required: false,
-      default: null,
-    },
-
-    y: {
-      type: Number,
-      required: false,
-      default: null,
-    },
-
-    x: {
-      type: Number,
-      required: false,
-      default: null,
-    },
-
-    tabIndex: {
-      type: String,
-      required: false,
-      default: null,
+      validator: value => validSizes.includes(value),
     },
   },
 
@@ -99,15 +61,7 @@ export default {
 </script>
 
 <template>
-  <svg
-    :class="[iconSizeClass, iconTestClass, cssClasses]"
-    :width="width"
-    :height="height"
-    :x="x"
-    :y="y"
-    :tabindex="tabIndex"
-    aria-hidden="true"
-  >
+  <svg :class="[iconSizeClass, iconTestClass]" aria-hidden="true">
     <use v-bind="{ 'xlink:href': spriteHref }" />
   </svg>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
index 61239a564a8..5d7e9557aff 100644
--- a/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
+++ b/app/assets/javascripts/vue_shared/components/issue/related_issuable_item.vue
@@ -63,7 +63,7 @@ export default {
           <icon
             v-if="hasState"
             ref="iconElementXL"
-            :css-classes="iconClass"
+            :class="iconClass"
             :name="iconName"
             :size="16"
             :title="stateTitle"
@@ -100,7 +100,7 @@ export default {
             <span ref="iconElement">
               <icon
                 v-if="hasState"
-                :css-classes="iconClass"
+                :class="iconClass"
                 :name="iconName"
                 :title="stateTitle"
                 :aria-label="state"
diff --git a/app/assets/javascripts/vue_shared/components/toggle_button.vue b/app/assets/javascripts/vue_shared/components/toggle_button.vue
index de70fa2182b..1de866bed37 100644
--- a/app/assets/javascripts/vue_shared/components/toggle_button.vue
+++ b/app/assets/javascripts/vue_shared/components/toggle_button.vue
@@ -74,7 +74,7 @@ export default {
       @click="toggleFeature"
     >
       <gl-loading-icon class="loading-icon" />
-      <span class="toggle-icon"> <icon :name="toggleIcon" css-classes="toggle-icon-svg" /> </span>
+      <span class="toggle-icon"> <icon :name="toggleIcon" class="toggle-icon-svg" /> </span>
     </button>
   </label>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
index a60d5eb491e..7c7d46ee759 100644
--- a/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
+++ b/app/assets/javascripts/vue_shared/components/user_popover/user_popover.vue
@@ -71,15 +71,11 @@ export default {
         </div>
         <div class="text-secondary">
           <div v-if="user.bio" class="js-bio d-flex mb-1">
-            <icon name="profile" css-classes="category-icon flex-shrink-0" />
+            <icon name="profile" class="category-icon flex-shrink-0" />
             <span class="ml-1">{{ user.bio }}</span>
           </div>
           <div v-if="user.organization" class="js-organization d-flex mb-1">
-            <icon
-              v-show="!jobInfoIsLoading"
-              name="work"
-              css-classes="category-icon flex-shrink-0"
-            />
+            <icon v-show="!jobInfoIsLoading" name="work" class="category-icon flex-shrink-0" />
             <span class="ml-1">{{ user.organization }}</span>
           </div>
           <gl-skeleton-loading
@@ -92,7 +88,7 @@ export default {
           <icon
             v-show="!locationIsLoading && user.location"
             name="location"
-            css-classes="category-icon flex-shrink-0"
+            class="category-icon flex-shrink-0"
           />
           <span class="ml-1">{{ user.location }}</span>
           <gl-skeleton-loading