From 32bdee9df845788abfd4fe0e4486202ae23709ac Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Mon, 28 Jun 2021 20:44:44 +0100
Subject: [PATCH] chore(deps): update dependency @gitlab/eslint-plugin to v9

This change does not fix the various chart types, as they are more
complicated, and their test coverage isn't sufficient to be confident
about changing them. They can be fixed later.

Also, there's a bug in the interaction between our GlPopover wrapper
component and the underlying BPopover component: naively replacing
`slot="title"` syntax with `#title` breaks title rendering. To work
around this, we need to only set up the title slot in GlPopover if the
consumer of GlPopover is passing that slot. We do this by iterating over
`$scopedSlots`/`$slots`, rather than statically declaring it. The same
fix could be achieved with something like:

    <template v-if="'title' in $slots" #title>

But the iteration approach is more future-proof.
---
 documentation/components/example_display.vue  | 30 ++++++++++---------
 package.json                                  |  2 +-
 src/components/base/carousel/carousel.vue     |  4 ++-
 .../base/carousel/carousel_slide.vue          |  4 ++-
 .../deprecated_dropdown.vue                   | 10 ++++---
 src/components/base/dropdown/dropdown.vue     | 18 ++++++-----
 .../base/form/form_group/form_group.vue       |  4 ++-
 .../form_select.mixed_options.example.vue     |  2 +-
 .../base/form/form_select/form_select.vue     |  4 ++-
 src/components/base/modal/modal.vue           |  3 ++
 .../paginated_list.with_row_slot.example.vue  |  2 +-
 src/components/base/popover/popover.vue       |  1 +
 .../search_box_by_click.vue                   |  2 +-
 .../examples/table.custom_fields.example.vue  | 15 ++++++----
 src/components/base/table/table.vue           |  4 +--
 src/components/base/tabs/tab/tab.vue          |  4 ++-
 .../examples/tabs.counterbadges.example.vue   |  6 ++--
 .../examples/tabs.custom_title.example.vue    |  2 +-
 .../base/tabs/tabs/scrollable_tabs.vue        |  4 ++-
 src/components/base/tabs/tabs/tabs.stories.js |  6 ++--
 src/components/base/tabs/tabs/tabs.vue        |  4 ++-
 src/components/charts/area/area.vue           |  3 ++
 src/components/charts/bar/bar.vue             |  1 +
 src/components/charts/column/column.vue       |  1 +
 .../discrete_scatter/discrete_scatter.vue     |  2 ++
 src/components/charts/line/line.vue           |  3 ++
 src/components/charts/sparkline/sparkline.vue |  2 ++
 .../charts/stacked_column/stacked_column.vue  |  1 +
 .../examples/chart_tooltip.basic.example.vue  |  4 ++-
 src/components/charts/tooltip/tooltip.vue     |  1 +
 yarn.lock                                     |  8 ++---
 31 files changed, 100 insertions(+), 57 deletions(-)

diff --git a/documentation/components/example_display.vue b/documentation/components/example_display.vue
index 6d98b8af30..db7cc6226c 100644
--- a/documentation/components/example_display.vue
+++ b/documentation/components/example_display.vue
@@ -174,21 +174,23 @@ export default {
   <div>
     <div v-if="currentExampleComponent">
       <b-card no-body>
-        <div slot="header">
-          <b-row>
-            <b-col>
-              <strong>{{ exampleName }}</strong>
-            </b-col>
-            <b-col class="text-right">
-              <b-button-group size="sm" class="mx-1">
-                <b-btn v-b-toggle.collapseSource>Source</b-btn>
-                <b-btn v-b-toggle.collapseHTML>HTML</b-btn>
-              </b-button-group>
-            </b-col>
-          </b-row>
-        </div>
+        <template #header>
+          <div>
+            <b-row>
+              <b-col>
+                <strong>{{ exampleName }}</strong>
+              </b-col>
+              <b-col class="text-right">
+                <b-button-group size="sm" class="mx-1">
+                  <b-btn v-b-toggle.collapseSource>Source</b-btn>
+                  <b-btn v-b-toggle.collapseHTML>HTML</b-btn>
+                </b-button-group>
+              </b-col>
+            </b-row>
+          </div>
+        </template>
         <b-card-body>
-          <div :is="currentExampleComponent" ref="compiled" />
+          <component :is="currentExampleComponent" ref="compiled" />
         </b-card-body>
         <b-list-group flush>
           <b-collapse id="collapseSource" class="mt-2">
diff --git a/package.json b/package.json
index 48c2ffb1eb..51cb92e66b 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,7 @@
     "@arkweid/lefthook": "^0.7.6",
     "@babel/core": "^7.10.2",
     "@babel/preset-env": "^7.10.2",
-    "@gitlab/eslint-plugin": "8.4.0",
+    "@gitlab/eslint-plugin": "9.0.0",
     "@gitlab/stylelint-config": "2.3.0",
     "@gitlab/svgs": "1.201.0",
     "@rollup/plugin-commonjs": "^11.1.0",
diff --git a/src/components/base/carousel/carousel.vue b/src/components/base/carousel/carousel.vue
index af67e14162..f632f24f4b 100644
--- a/src/components/base/carousel/carousel.vue
+++ b/src/components/base/carousel/carousel.vue
@@ -9,6 +9,8 @@ export default {
 </script>
 <template>
   <b-carousel v-bind="$attrs" v-on="$listeners">
-    <slot v-for="slot in Object.keys($slots)" :slot="slot" :name="slot"></slot>
+    <template v-for="slot in Object.keys($slots)" #[slot]>
+      <slot :name="slot"></slot>
+    </template>
   </b-carousel>
 </template>
diff --git a/src/components/base/carousel/carousel_slide.vue b/src/components/base/carousel/carousel_slide.vue
index 1d7ce02253..2aa2e009ef 100644
--- a/src/components/base/carousel/carousel_slide.vue
+++ b/src/components/base/carousel/carousel_slide.vue
@@ -9,6 +9,8 @@ export default {
 </script>
 <template>
   <b-carousel-slide v-bind="$attrs" v-on="$listeners">
-    <slot v-for="slot in Object.keys($slots)" :slot="slot" :name="slot"></slot>
+    <template v-for="slot in Object.keys($slots)" #[slot]>
+      <slot :name="slot"></slot>
+    </template>
   </b-carousel-slide>
 </template>
diff --git a/src/components/base/deprecated_dropdown/deprecated_dropdown.vue b/src/components/base/deprecated_dropdown/deprecated_dropdown.vue
index 7ef1943d42..2fa75b2dea 100644
--- a/src/components/base/deprecated_dropdown/deprecated_dropdown.vue
+++ b/src/components/base/deprecated_dropdown/deprecated_dropdown.vue
@@ -68,9 +68,11 @@ export default {
 <template>
   <b-dropdown ref="dropdown" class="gl-dropdown" v-bind="$attrs" :split="split" v-on="$listeners">
     <slot></slot>
-    <slot slot="button-content" name="button-content">
-      <span class="gl-dropdown-toggle-text">{{ text }}</span>
-      <gl-icon v-if="renderCaret" class="gl-dropdown-caret" name="chevron-down" />
-    </slot>
+    <template #button-content>
+      <slot name="button-content">
+        <span class="gl-dropdown-toggle-text">{{ text }}</span>
+        <gl-icon v-if="renderCaret" class="gl-dropdown-caret" name="chevron-down" />
+      </slot>
+    </template>
   </b-dropdown>
 </template>
diff --git a/src/components/base/dropdown/dropdown.vue b/src/components/base/dropdown/dropdown.vue
index c2b7d29bd4..4b1caddd56 100644
--- a/src/components/base/dropdown/dropdown.vue
+++ b/src/components/base/dropdown/dropdown.vue
@@ -200,13 +200,15 @@ export default {
         <slot name="footer"></slot>
       </div>
     </div>
-    <slot slot="button-content" name="button-content">
-      <gl-loading-icon v-if="loading" class="gl-mr-2" />
-      <gl-icon v-if="icon" class="dropdown-icon" :name="icon" />
-      <span class="gl-new-dropdown-button-text" :class="{ 'gl-sr-only': textSrOnly }">
-        <slot name="button-text">{{ buttonText }}</slot>
-      </span>
-      <gl-icon v-if="renderCaret" class="gl-button-icon dropdown-chevron" name="chevron-down" />
-    </slot>
+    <template #button-content>
+      <slot name="button-content">
+        <gl-loading-icon v-if="loading" class="gl-mr-2" />
+        <gl-icon v-if="icon" class="dropdown-icon" :name="icon" />
+        <span class="gl-new-dropdown-button-text" :class="{ 'gl-sr-only': textSrOnly }">
+          <slot name="button-text">{{ buttonText }}</slot>
+        </span>
+        <gl-icon v-if="renderCaret" class="gl-button-icon dropdown-chevron" name="chevron-down" />
+      </slot>
+    </template>
   </b-dropdown>
 </template>
diff --git a/src/components/base/form/form_group/form_group.vue b/src/components/base/form/form_group/form_group.vue
index e0d1d048c2..3ebd6c2784 100644
--- a/src/components/base/form/form_group/form_group.vue
+++ b/src/components/base/form/form_group/form_group.vue
@@ -54,6 +54,8 @@ export default {
       </gl-form-text>
     </template>
 
-    <slot v-for="slot in Object.keys($slots)" :slot="slot" :name="slot"></slot>
+    <template v-for="slot in Object.keys($slots)" #[slot]>
+      <slot :name="slot"></slot>
+    </template>
   </b-form-group>
 </template>
diff --git a/src/components/base/form/form_select/examples/form_select.mixed_options.example.vue b/src/components/base/form/form_select/examples/form_select.mixed_options.example.vue
index f0e8dd8e60..f18f84aafe 100644
--- a/src/components/base/form/form_select/examples/form_select.mixed_options.example.vue
+++ b/src/components/base/form/form_select/examples/form_select.mixed_options.example.vue
@@ -14,7 +14,7 @@ export default {
 
 <template>
   <gl-form-select v-model="selected" :options="options">
-    <template slot="first">
+    <template #first>
       <option :value="null" disabled>Select a dish</option>
     </template>
   </gl-form-select>
diff --git a/src/components/base/form/form_select/form_select.vue b/src/components/base/form/form_select/form_select.vue
index db28a656e9..06b935326e 100644
--- a/src/components/base/form/form_select/form_select.vue
+++ b/src/components/base/form/form_select/form_select.vue
@@ -10,6 +10,8 @@ export default {
 </script>
 <template>
   <b-form-select class="gl-form-select" v-bind="$attrs" v-on="$listeners">
-    <slot v-for="slot in Object.keys($slots)" :slot="slot" :name="slot"></slot>
+    <template v-for="slot in Object.keys($slots)" #[slot]>
+      <slot :name="slot"></slot>
+    </template>
   </b-form-select>
 </template>
diff --git a/src/components/base/modal/modal.vue b/src/components/base/modal/modal.vue
index 0bf9fdf9e1..7405171ade 100644
--- a/src/components/base/modal/modal.vue
+++ b/src/components/base/modal/modal.vue
@@ -163,8 +163,11 @@ export default {
       </slot>
       <close-button ref="close-button" :label="dismissLabel" @click="close" />
     </template>
+    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
     <slot slot="modal-ok" name="modal-ok"></slot>
+    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
     <slot slot="modal-cancel" name="modal-cancel"></slot>
+    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
     <slot slot="modal-footer" name="modal-footer">
       <gl-button
         v-if="actionCancel"
diff --git a/src/components/base/paginated_list/examples/paginated_list.with_row_slot.example.vue b/src/components/base/paginated_list/examples/paginated_list.with_row_slot.example.vue
index 2997348e0c..24d1b5773b 100644
--- a/src/components/base/paginated_list/examples/paginated_list.with_row_slot.example.vue
+++ b/src/components/base/paginated_list/examples/paginated_list.with_row_slot.example.vue
@@ -16,7 +16,7 @@
       { id: 'thud' },
     ]"
   >
-    <template slot-scope="{ listItem }">
+    <template #default="{ listItem }">
       <gl-button variant="success" class="order-1" @click="alert">
         {{ listItem.id }}
       </gl-button>
diff --git a/src/components/base/popover/popover.vue b/src/components/base/popover/popover.vue
index 4c08dfeaca..0367f7ed35 100644
--- a/src/components/base/popover/popover.vue
+++ b/src/components/base/popover/popover.vue
@@ -39,6 +39,7 @@ export default {
     v-bind="$attrs"
     v-on="$listeners"
   >
+    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
     <template slot="title">
       <slot name="title"></slot>
     </template>
diff --git a/src/components/base/search_box_by_click/search_box_by_click.vue b/src/components/base/search_box_by_click/search_box_by_click.vue
index 8728e4e0eb..db76f65c97 100644
--- a/src/components/base/search_box_by_click/search_box_by_click.vue
+++ b/src/components/base/search_box_by_click/search_box_by_click.vue
@@ -154,7 +154,7 @@ export default {
         category="secondary"
         :disabled="disabled"
       >
-        <template slot="button-content">
+        <template #button-content>
           <gl-icon name="history" class="gl-search-box-by-click-history-icon" />
           <gl-icon name="chevron-down" class="gl-search-box-by-click-history-icon-chevron" />
           <span class="gl-sr-only">Toggle history</span>
diff --git a/src/components/base/table/examples/table.custom_fields.example.vue b/src/components/base/table/examples/table.custom_fields.example.vue
index 7d07ccb1b6..97075125c7 100644
--- a/src/components/base/table/examples/table.custom_fields.example.vue
+++ b/src/components/base/table/examples/table.custom_fields.example.vue
@@ -5,9 +5,13 @@ export default {
       key: 'column_one',
       label: 'Column One',
     },
+    {
+      key: 'col_2',
+      label: 'Styled Column 2',
+    },
     {
       key: 'custom_markup',
-      label: 'Column 2',
+      label: 'Styled Virtual Column',
     },
   ],
   items: [
@@ -29,10 +33,11 @@ export default {
 
 <template>
   <gl-table :items="$options.items" :fields="$options.fields">
-    <template slot="custom_markup" slot-scope="items">
-      <div class="text-primary">
-        {{ items.item.col_2 }}
-      </div>
+    <template #cell(col_2)="{ value }">
+      <span class="gl-font-weight-bold gl-text-green-500">{{ value }}</span>
+    </template>
+    <template #cell(custom_markup)="{ index }">
+      <span class="gl-font-style-italic gl-text-red-500">Index: {{ index + 1 }}</span>
     </template>
   </gl-table>
 </template>
diff --git a/src/components/base/table/table.vue b/src/components/base/table/table.vue
index 232f1dfc91..923b9e0055 100644
--- a/src/components/base/table/table.vue
+++ b/src/components/base/table/table.vue
@@ -11,9 +11,7 @@ export default {
 
 <template>
   <b-table class="gl-table" v-bind="$attrs" v-on="$listeners">
-    <!-- This allows us to pass all slots and scoped slots to the bootstrap vue table's slots -->
-    <slot v-for="slot in Object.keys($slots)" :slot="slot" :name="slot"></slot>
-    <template v-for="slot in Object.keys($scopedSlots)" :slot="slot" slot-scope="scope">
+    <template v-for="slot in Object.keys($scopedSlots)" #[slot]="scope">
       <slot :name="slot" v-bind="scope"></slot>
     </template>
   </b-table>
diff --git a/src/components/base/tabs/tab/tab.vue b/src/components/base/tabs/tab/tab.vue
index 60f4699488..d245b66473 100644
--- a/src/components/base/tabs/tab/tab.vue
+++ b/src/components/base/tabs/tab/tab.vue
@@ -43,6 +43,8 @@ export default {
     v-bind="$attrs"
     v-on="$listeners"
   >
-    <slot v-for="slot in Object.keys($slots)" :slot="slot" :name="slot"></slot>
+    <template v-for="slot in Object.keys($slots)" #[slot]>
+      <slot :name="slot"></slot>
+    </template>
   </b-tab>
 </template>
diff --git a/src/components/base/tabs/tabs/examples/tabs.counterbadges.example.vue b/src/components/base/tabs/tabs/examples/tabs.counterbadges.example.vue
index b14d0182bf..06b36668c7 100644
--- a/src/components/base/tabs/tabs/examples/tabs.counterbadges.example.vue
+++ b/src/components/base/tabs/tabs/examples/tabs.counterbadges.example.vue
@@ -1,21 +1,21 @@
 <template>
   <gl-tabs>
     <gl-tab>
-      <template slot="title">
+      <template #title>
         <span>1st</span>
         <gl-badge size="sm" class="gl-tab-counter-badge">500</gl-badge>
       </template>
       first content
     </gl-tab>
     <gl-tab>
-      <template slot="title">
+      <template #title>
         <span>2nd</span>
         <gl-badge size="sm" class="gl-tab-counter-badge">250</gl-badge>
       </template>
       second content
     </gl-tab>
     <gl-tab>
-      <template slot="title">
+      <template #title>
         <span>3rd</span>
         <gl-badge size="sm" class="gl-tab-counter-badge">250</gl-badge>
       </template>
diff --git a/src/components/base/tabs/tabs/examples/tabs.custom_title.example.vue b/src/components/base/tabs/tabs/examples/tabs.custom_title.example.vue
index dca343969f..4169853f08 100644
--- a/src/components/base/tabs/tabs/examples/tabs.custom_title.example.vue
+++ b/src/components/base/tabs/tabs/examples/tabs.custom_title.example.vue
@@ -1,7 +1,7 @@
 <template>
   <gl-tabs>
     <gl-tab title="First">
-      <template slot="title"><i>custom</i> <strong>Title</strong></template>
+      <template #title><i>custom</i> <strong>Title</strong></template>
       first content
     </gl-tab>
     <gl-tab title="Second">second content</gl-tab>
diff --git a/src/components/base/tabs/tabs/scrollable_tabs.vue b/src/components/base/tabs/tabs/scrollable_tabs.vue
index a843510c15..30c5e53146 100644
--- a/src/components/base/tabs/tabs/scrollable_tabs.vue
+++ b/src/components/base/tabs/tabs/scrollable_tabs.vue
@@ -107,7 +107,9 @@ export default {
     v-bind="passthroughAttrs"
     v-on="$listeners"
   >
-    <slot v-for="slot in Object.keys($slots)" :slot="slot" :name="slot"></slot>
+    <template v-for="slot in Object.keys($slots)" #[slot]>
+      <slot :name="slot"></slot>
+    </template>
     <template #tabs-start>
       <li v-show="displayScrollLeft" class="gl-tabs-fade gl-tabs-fade-left">
         <button
diff --git a/src/components/base/tabs/tabs/tabs.stories.js b/src/components/base/tabs/tabs/tabs.stories.js
index a0c64e70e6..1130b2f5d1 100644
--- a/src/components/base/tabs/tabs/tabs.stories.js
+++ b/src/components/base/tabs/tabs/tabs.stories.js
@@ -148,21 +148,21 @@ documentedStoriesOf('base/tabs/tabs', docs)
     template: `
       <gl-tabs>
         <gl-tab>
-          <template slot="title">
+          <template #title>
             <span>1st</span>
             <gl-badge size="sm" class="gl-tab-counter-badge">500</gl-badge>
           </template>
           first content
         </gl-tab>
         <gl-tab>
-          <template slot="title">
+          <template #title>
             <span>2nd</span>
             <gl-badge size="sm" class="gl-tab-counter-badge">250</gl-badge>
           </template>
           second content
         </gl-tab>
         <gl-tab>
-          <template slot="title">
+          <template #title>
             <span>3rd</span>
           </template>
           third content
diff --git a/src/components/base/tabs/tabs/tabs.vue b/src/components/base/tabs/tabs/tabs.vue
index 52164d987a..3188070dbc 100644
--- a/src/components/base/tabs/tabs/tabs.vue
+++ b/src/components/base/tabs/tabs/tabs.vue
@@ -223,7 +223,9 @@ export default {
     v-bind="$attrs"
     v-on="listeners"
   >
-    <slot v-for="slot in Object.keys($slots)" :slot="slot" :name="slot"></slot>
+    <template v-for="slot in Object.keys($slots)" #[slot]>
+      <slot :name="slot"></slot>
+    </template>
 
     <template v-if="hasActions" #tabs-start>
       <div data-testid="actions-tabs-start" class="gl-actions-tabs-start">
diff --git a/src/components/charts/area/area.vue b/src/components/charts/area/area.vue
index 6fed696041..1e25238fec 100644
--- a/src/components/charts/area/area.vue
+++ b/src/components/charts/area/area.vue
@@ -342,6 +342,7 @@ export default {
       :left="annotationsTooltipPosition.left"
       placement="bottom"
     >
+      <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
       <div slot="title">{{ annotationsTooltipTitle }}</div>
       <div>{{ annotationsTooltipContent }}</div>
     </chart-tooltip>
@@ -356,10 +357,12 @@ export default {
       :left="dataTooltipPosition.left"
     >
       <template v-if="formatTooltipText">
+        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
         <slot slot="title" name="tooltip-title"></slot>
         <slot name="tooltip-content"></slot>
       </template>
       <template v-else>
+        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
         <div slot="title">
           {{ dataTooltipTitle }}
           <template v-if="options.xAxis.name">({{ options.xAxis.name }})</template>
diff --git a/src/components/charts/bar/bar.vue b/src/components/charts/bar/bar.vue
index 3b63ad419f..70391fe844 100644
--- a/src/components/charts/bar/bar.vue
+++ b/src/components/charts/bar/bar.vue
@@ -238,6 +238,7 @@ export default {
       :top="tooltipPosition.top"
       :left="tooltipPosition.left"
     >
+      <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
       <div slot="title">{{ tooltipTitle }} ({{ yAxisTitle }})</div>
       <tooltip-default-format :tooltip-content="tooltipContent" />
     </chart-tooltip>
diff --git a/src/components/charts/column/column.vue b/src/components/charts/column/column.vue
index 4f0a1286b5..4863654505 100644
--- a/src/components/charts/column/column.vue
+++ b/src/components/charts/column/column.vue
@@ -203,6 +203,7 @@ export default {
       :top="tooltipPosition.top"
       :left="tooltipPosition.left"
     >
+      <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
       <div slot="title">{{ tooltipTitle }} ({{ xAxisTitle }})</div>
       <tooltip-default-format :tooltip-content="tooltipContent" />
     </chart-tooltip>
diff --git a/src/components/charts/discrete_scatter/discrete_scatter.vue b/src/components/charts/discrete_scatter/discrete_scatter.vue
index d4ff54678c..bf2f24a84d 100644
--- a/src/components/charts/discrete_scatter/discrete_scatter.vue
+++ b/src/components/charts/discrete_scatter/discrete_scatter.vue
@@ -175,10 +175,12 @@ export default {
       :left="tooltipPosition.left"
     >
       <template v-if="formatTooltipText">
+        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
         <slot slot="title" name="tooltip-title"></slot>
         <slot name="tooltip-content"></slot>
       </template>
       <template v-else>
+        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
         <div slot="title">{{ tooltipTitle }} ({{ xAxisTitle }})</div>
         <tooltip-default-format :tooltip-content="tooltipContent" />
       </template>
diff --git a/src/components/charts/line/line.vue b/src/components/charts/line/line.vue
index a106f5738c..e7fe3e3193 100644
--- a/src/components/charts/line/line.vue
+++ b/src/components/charts/line/line.vue
@@ -339,6 +339,7 @@ export default {
       :left="annotationsTooltipPosition.left"
       placement="bottom"
     >
+      <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
       <div slot="title">{{ annotationsTooltipTitle }}</div>
       <div>{{ annotationsTooltipContent }}</div>
     </chart-tooltip>
@@ -353,10 +354,12 @@ export default {
       :left="dataTooltipPosition.left"
     >
       <template v-if="formatTooltipText">
+        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
         <slot slot="title" name="tooltip-title"></slot>
         <slot name="tooltip-content"></slot>
       </template>
       <template v-else>
+        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
         <div slot="title">
           {{ dataTooltipTitle }}
           <template v-if="options.xAxis.name">({{ options.xAxis.name }})</template>
diff --git a/src/components/charts/sparkline/sparkline.vue b/src/components/charts/sparkline/sparkline.vue
index bd4408448c..790c1d7391 100644
--- a/src/components/charts/sparkline/sparkline.vue
+++ b/src/components/charts/sparkline/sparkline.vue
@@ -205,7 +205,9 @@ export default {
         :style="{ pointerEvents: 'none' }"
         placement="top"
       >
+        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
         <div slot="title" class="js-tooltip-title text-nowrap">{{ tooltip.title }}</div>
+        <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
         <div slot="default" class="js-tooltip-content d-flex">
           <span v-if="tooltipLabel" class="pr-4 mr-auto">{{ tooltipLabel }}</span>
           <strong>{{ tooltip.content }}</strong>
diff --git a/src/components/charts/stacked_column/stacked_column.vue b/src/components/charts/stacked_column/stacked_column.vue
index 90142fa2a8..d198e68287 100644
--- a/src/components/charts/stacked_column/stacked_column.vue
+++ b/src/components/charts/stacked_column/stacked_column.vue
@@ -290,6 +290,7 @@ export default {
       :top="tooltipPosition.top"
       :left="tooltipPosition.left"
     >
+      <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
       <div slot="title">{{ tooltipTitle }} ({{ xAxisTitle }})</div>
       <tooltip-default-format :tooltip-content="tooltipContent" />
     </chart-tooltip>
diff --git a/src/components/charts/tooltip/examples/chart_tooltip.basic.example.vue b/src/components/charts/tooltip/examples/chart_tooltip.basic.example.vue
index 6e78f32a6c..b060e51847 100644
--- a/src/components/charts/tooltip/examples/chart_tooltip.basic.example.vue
+++ b/src/components/charts/tooltip/examples/chart_tooltip.basic.example.vue
@@ -23,7 +23,9 @@ export default {
       top="50%"
       left="0px"
     >
-      <div slot="title">Tooltip Title</div>
+      <template #title>
+        <div>Tooltip Title</div>
+      </template>
       Basic Tooltip Content
     </gl-chart-tooltip>
   </div>
diff --git a/src/components/charts/tooltip/tooltip.vue b/src/components/charts/tooltip/tooltip.vue
index 9a041ae5aa..47fbddf48e 100644
--- a/src/components/charts/tooltip/tooltip.vue
+++ b/src/components/charts/tooltip/tooltip.vue
@@ -81,6 +81,7 @@ export default {
       This is why `triggers` is currently set to an empty string
     -->
     <gl-popover v-bind="$attrs" :target="containerId" :container="containerId" triggers="">
+      <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
       <slot slot="title" name="title"></slot>
       <slot></slot>
     </gl-popover>
diff --git a/yarn.lock b/yarn.lock
index 365ba54e5b..ff25580425 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1239,10 +1239,10 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
-"@gitlab/eslint-plugin@8.4.0":
-  version "8.4.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/eslint-plugin/-/eslint-plugin-8.4.0.tgz#094fa4d41676a71146f82e1b19257a7ceabefd88"
-  integrity sha512-VE/c1yIMrj2igJWAALQtAKpnXL8fN5wJ1uKteZfi8xYbWouoUK6hizXSPrrEUWiM2FqcBI4Igcpz2JlJzDlAnA==
+"@gitlab/eslint-plugin@9.0.0":
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/eslint-plugin/-/eslint-plugin-9.0.0.tgz#0c872428e3237e0dbd2cbbe74317fc3786cefdf9"
+  integrity sha512-TaKLzaAFQbsJJIbetLTARkJNapIWuis8RyOp/arbVS5Fl8IjBK8m3hPmqIc5CwOz9qK8o5eSW1MA9clU/dLY3w==
   dependencies:
     babel-eslint "^10.0.3"
     eslint-config-airbnb-base "^14.2.1"
-- 
GitLab