Kebab case slot names

Apply kebab-case to slot names to align with GitLab UI changes

app/assets/javascripts/monitoring/components/charts/time_series.vue

@@ -402,21 +402,21 @@ export default {
       @updated="onChartUpdated"
     >
       <template v-if="tooltip.type === 'deployments'">
-        <template slot="tooltipTitle">
+        <template slot="tooltip-title">
           {{ __('Deployed') }}
         </template>
-        <div slot="tooltipContent" class="d-flex align-items-center">
+        <div slot="tooltip-content" class="d-flex align-items-center">
           <gl-icon name="commit" class="mr-2" />
           <gl-link :href="tooltip.commitUrl">{{ tooltip.sha }}</gl-link>
         </div>
       </template>
       <template v-else>
-        <template slot="tooltipTitle">
+        <template slot="tooltip-title">
           <div class="text-nowrap">
             {{ tooltip.title }}
           </div>
         </template>
-        <template slot="tooltipContent" :tooltip="tooltip">
+        <template slot="tooltip-content" :tooltip="tooltip">
           <div
             v-for="(content, key) in tooltip.content"
             :key="key"

app/assets/javascripts/pages/projects/graphs/components/code_coverage.vue

@@ -153,10 +153,10 @@ export default {
       :option="chartOptions"
       :format-tooltip-text="formatTooltipText"
     >
-      <template v-if="canShowData" #tooltipTitle>
+      <template v-if="canShowData" #tooltip-title>
         {{ tooltipTitle }}
       </template>
-      <template v-if="canShowData" #tooltipContent>
+      <template v-if="canShowData" #tooltip-content>
         <gl-sprintf :message="__('Code Coverage: %{coveragePercentage}%{percentSymbol}')">
           <template #coveragePercentage>
             {{ coveragePercentage }}

app/assets/javascripts/serverless/components/area.vue

@@ -138,8 +138,8 @@ export default {
       :width="width"
       :include-legend-avg-max="false"
     >
-      <template #tooltipTitle>{{ tooltipPopoverTitle }}</template>
-      <template #tooltipContent>{{ tooltipPopoverContent }}</template>
+      <template #tooltip-title>{{ tooltipPopoverTitle }}</template>
+      <template #tooltip-content>{{ tooltipPopoverContent }}</template>
     </gl-area-chart>
   </div>
 </template>

ee/app/assets/javascripts/analytics/shared/components/scatterplot.vue

@@ -89,8 +89,8 @@ export default {
     :x-axis-title="xAxisTitle"
     :format-tooltip-text="renderTooltip"
   >
-    <div slot="tooltipTitle">{{ tooltipTitle }} ({{ xAxisTitle }})</div>
-    <div slot="tooltipContent" class="d-flex">
+    <div slot="tooltip-title">{{ tooltipTitle }} ({{ xAxisTitle }})</div>
+    <div slot="tooltip-content" class="d-flex">
       <div class="flex-grow-1">{{ yAxisTitle }}:&nbsp;</div>
       <div class="font-weight-bold">{{ tooltipContent }}</div>
     </div>

ee/app/assets/javascripts/burndown_chart/components/burndown_chart.vue

@@ -141,8 +141,8 @@ export default {
         :format-tooltip-text="formatTooltipText"
         :include-legend-avg-max="false"
       >
-        <template slot="tooltipTitle">{{ tooltip.title }}</template>
-        <template slot="tooltipContent">{{ tooltip.content }}</template>
+        <template slot="tooltip-title">{{ tooltip.title }}</template>
+        <template slot="tooltip-content">{{ tooltip.content }}</template>
       </gl-line-chart>
     </resizable-chart-container>
   </div>

ee/app/assets/javascripts/burndown_chart/components/burnup_chart.vue

@@ -121,8 +121,8 @@ export default {
         :format-tooltip-text="formatTooltipText"
         :include-legend-avg-max="false"
       >
-        <template slot="tooltipTitle">{{ tooltip.title }}</template>
-        <template slot="tooltipContent">
+        <template slot="tooltip-title">{{ tooltip.title }}</template>
+        <template slot="tooltip-content">
           <div>{{ tooltip.total }}</div>
           <div>{{ tooltip.completed }}</div>
         </template>

ee/app/assets/javascripts/threat_monitoring/components/statistics_history.vue

@@ -105,11 +105,11 @@ export default {
     :format-tooltip-text="formatTooltipText"
     @created="onChartCreated"
   >
-    <template #tooltipTitle>
+    <template #tooltip-title>
       <div>{{ tooltipTitle }} ({{ chartOptions.xAxis.name }})</div>
     </template>
 
-    <template #tooltipContent>
+    <template #tooltip-content>
       <div v-for="series in tooltipSeriesData" :key="series.seriesName" class="d-flex">
         <div class="flex-grow-1 mr-5">{{ series.seriesName }}</div>
         <div class="font-weight-bold">{{ series.value[1] }}</div>

ee/spec/frontend/threat_monitoring/components/statistics_history_spec.js

@@ -133,8 +133,8 @@ describe('StatisticsHistory component', () => {
               },
               template: `
                 <div>
-                  <slot name="tooltipTitle"></slot>
-                  <slot name="tooltipContent"></slot>
+                  <slot name="tooltip-title"></slot>
+                  <slot name="tooltip-content"></slot>
                 </div>`,
             },
           },

package.json

@@ -44,7 +44,7 @@
     "@babel/preset-env": "^7.10.1",
     "@gitlab/at.js": "1.5.5",
     "@gitlab/svgs": "1.175.0",
-    "@gitlab/ui": "23.8.0",
+    "@gitlab/ui": "23.9.0",
     "@gitlab/visual-review-tools": "1.6.1",
     "@rails/actioncable": "^6.0.3-3",
     "@rails/ujs": "^6.0.3-2",

spec/frontend/monitoring/components/charts/time_series_spec.js

@@ -226,7 +226,7 @@ describe('Time series component', () => {
               ]);
 
               expect(
-                shallowWrapperContainsSlotText(wrapper.find(GlLineChart), 'tooltipContent', value),
+                shallowWrapperContainsSlotText(wrapper.find(GlLineChart), 'tooltip-content', value),
               ).toBe(true);
             });
 
@@ -651,7 +651,7 @@ describe('Time series component', () => {
 
             return wrapper.vm.$nextTick(() => {
               expect(
-                shallowWrapperContainsSlotText(findChartComponent(), 'tooltipTitle', mockTitle),
+                shallowWrapperContainsSlotText(findChartComponent(), 'tooltip-title', mockTitle),
               ).toBe(true);
             });
           });
@@ -671,7 +671,7 @@ describe('Time series component', () => {
 
             it('uses deployment title', () => {
               expect(
-                shallowWrapperContainsSlotText(findChartComponent(), 'tooltipTitle', 'Deployed'),
+                shallowWrapperContainsSlotText(findChartComponent(), 'tooltip-title', 'Deployed'),
               ).toBe(true);
             });
 

yarn.lock

@@ -866,10 +866,10 @@
   resolved "https://registry.yarnpkg.com/@gitlab/svgs/-/svgs-1.175.0.tgz#734f341784af1cd1d62d160a17bcdfb61ff7b04d"
   integrity sha512-gXpc87TGSXIzfAr4QER1Qw1v3P47pBO6BXkma52blgwXVmcFNe3nhQzqsqt66wKNzrIrk3lAcB4GUyPHbPVXpg==
 
-"@gitlab/ui@23.8.0":
-  version "23.8.0"
-  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-23.8.0.tgz#fe1807877c191e9e38b476d2cdfc4261facbb36b"
-  integrity sha512-5CF2jU/d5EX5a1qLHzJujYOTaCze1ZvE9ovK1TbhJ7Va1O0SKB/N53XT8iPOb4MwOzj/zBWDOdsIs+xXxCeOcg==
+"@gitlab/ui@23.9.0":
+  version "23.9.0"
+  resolved "https://registry.yarnpkg.com/@gitlab/ui/-/ui-23.9.0.tgz#e21966130b41e624dbe4505911a79afb731c2d6b"
+  integrity sha512-IfaiIcRw6iKE9Fxx36LQ1Afa/fcdmvRQCJO9igc+wWD3MFZGU/ggsQw3SExkkYI6XYmDUr56CT/o+HYlCDjgZQ==
   dependencies:
     "@babel/standalone" "^7.0.0"
     "@gitlab/vue-toasted" "^1.3.0"