Fix vue/no-deprecated-slot-attribute violation(s) in src/components/charts/bar/bar.vue
The file src/components/charts/bar/bar.vue
violates the recently enabled vue/no-deprecated-slot-attribute
rule.
Migrating to the newer slot syntax is a requirement for us to be able to adopt Vue 3.
What to do
In broad strokes, migrating this component will involve:
- Updating the template to use the newer slot syntax
- Fixing tests and/or adding tests in GitLab UI
- Creating an integration MR with GitLab, and fixing its tests
Updating the template
This is the easy part! It's usually as simple as one of these example diffs:
- <template slot="first">
+ <template #first>
- <div slot="foo">Slot content</div>
+ <template #foo>
+ <div>Slot content</div>
+ </template>
- <slot slot="foo" name="foo">Slot default content</slot>
+ <template #foo>
+ <slot name="foo">Slot default content</slot>
+ </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>
- <slot v-for="slot in Object.keys($scopedSlots)" :slot="slot" :name="slot" slot-scope="scope"></slot>
+ <template v-for="slot in Object.keys($scopedSlots)" #[slot]="scope">
+ <slot :name="slot" v-bind="scope"></slot>
+ </template>
Some components will require more work if they have conditional slot rendering.
Fixing GitLab UI tests
- If there are no failing tests, verify that the slot content is actually being tested somehow, and write a new test covering this if not.
- If there are failing tests, fix them!
Creating an integration MR with GitLab
- Once your MR for GitLab UI is in good shape, create an integration MR against GitLab using the
create_integration_branch
manual CI job. - Fix any test failures.