refactor(editor): Improve linting for component and prop names (no-changelog) (#8169)

packages/editor-ui/src/components/banners/BaseBanner.vue

@@ -33,8 +33,8 @@ async function onCloseClick() {
 	<n8n-callout
 		:theme="props.theme"
 		:icon="props.customIcon"
-		iconSize="medium"
-		:roundCorners="false"
+		icon-size="medium"
+		:round-corners="false"
 		:data-test-id="`banners-${props.name}`"
 	>
 		<div :class="[$style.mainContent, !hasTrailingContent ? $style.keepSpace : '']">

packages/editor-ui/src/components/banners/EmailConfirmationBanner.vue

@@ -31,7 +31,7 @@ async function onConfirmEmailClick() {
 </script>
 
 <template>
-	<base-banner name="EMAIL_CONFIRMATION" theme="warning">
+	<BaseBanner name="EMAIL_CONFIRMATION" theme="warning">
 		<template #mainContent>
 			<span>
 				{{ locale.baseText('banners.confirmEmail.message.1') }}
@@ -42,13 +42,13 @@ async function onConfirmEmailClick() {
 		<template #trailingContent>
 			<n8n-button
 				type="success"
-				@click="onConfirmEmailClick"
 				icon="envelope"
 				size="small"
 				data-test-id="confirm-email-button"
+				@click="onConfirmEmailClick"
 			>
 				{{ locale.baseText('banners.confirmEmail.button') }}
 			</n8n-button>
 		</template>
-	</base-banner>
+	</BaseBanner>
 </template>

packages/editor-ui/src/components/banners/NonProductionLicenseBanner.vue

@@ -4,9 +4,9 @@ import { i18n as locale } from '@/plugins/i18n';
 </script>
 
 <template>
-	<base-banner name="NON_PRODUCTION_LICENSE" :dismissible="false">
+	<BaseBanner name="NON_PRODUCTION_LICENSE" :dismissible="false">
 		<template #mainContent>
 			<span>{{ locale.baseText('banners.nonProductionLicense.message') }}</span>
 		</template>
-	</base-banner>
+	</BaseBanner>
 </template>

packages/editor-ui/src/components/banners/TrialBanner.vue

@@ -23,14 +23,14 @@ function onUpdatePlanClick() {
 </script>
 
 <template>
-	<base-banner name="TRIAL" theme="custom">
+	<BaseBanner name="TRIAL" theme="custom">
 		<template #mainContent>
 			<span>{{ messageText }}</span>
 		</template>
 		<template #trailingContent>
-			<n8n-button type="success" @click="onUpdatePlanClick" icon="gem" size="small">{{
+			<n8n-button type="success" icon="gem" size="small" @click="onUpdatePlanClick">{{
 				locale.baseText('generic.upgradeNow')
 			}}</n8n-button>
 		</template>
-	</base-banner>
+	</BaseBanner>
 </template>

packages/editor-ui/src/components/banners/TrialOverBanner.vue

@@ -9,14 +9,14 @@ function onUpdatePlanClick() {
 </script>
 
 <template>
-	<base-banner customIcon="info-circle" theme="warning" name="TRIAL_OVER">
+	<BaseBanner custom-icon="info-circle" theme="warning" name="TRIAL_OVER">
 		<template #mainContent>
 			<span>{{ locale.baseText('banners.trialOver.message') }}</span>
 		</template>
 		<template #trailingContent>
-			<n8n-button type="success" @click="onUpdatePlanClick" icon="gem" size="small">{{
+			<n8n-button type="success" icon="gem" size="small" @click="onUpdatePlanClick">{{
 				locale.baseText('generic.upgradeNow')
 			}}</n8n-button>
 		</template>
-	</base-banner>
+	</BaseBanner>
 </template>

packages/editor-ui/src/components/banners/V1Banner.vue

@@ -15,19 +15,19 @@ const hasOwnerPermission = computed(() => hasPermission(['instanceOwner']));
 </script>
 
 <template>
-	<base-banner customIcon="info-circle" theme="warning" name="V1" :class="$style.v1container">
+	<BaseBanner custom-icon="info-circle" theme="warning" name="V1" :class="$style.v1container">
 		<template #mainContent>
 			<span v-html="locale.baseText('banners.v1.message')"></span>
 			<a
 				v-if="hasOwnerPermission"
 				:class="$style.link"
-				@click="dismissPermanently"
 				data-test-id="banner-confirm-v1"
+				@click="dismissPermanently"
 			>
 				<span v-html="locale.baseText('generic.dontShowAgain')"></span>
 			</a>
 		</template>
-	</base-banner>
+	</BaseBanner>
 </template>
 
 <style lang="scss" module>

packages/editor-ui/src/components/banners/__tests__/__snapshots__/V1Banner.spec.ts.snap

@@ -6,8 +6,8 @@ exports[`V1 Banner > should render banner 1`] = `
     class="v1container"
     data-test-id="banners-V1"
     icon="info-circle"
-    iconsize="medium"
-    roundcorners="false"
+    icon-size="medium"
+    round-corners="false"
     theme="warning"
   >
     <div
@@ -37,8 +37,8 @@ exports[`V1 Banner > should render banner with dismiss call if user is owner 1`]
     class="v1container"
     data-test-id="banners-V1"
     icon="info-circle"
-    iconsize="medium"
-    roundcorners="false"
+    icon-size="medium"
+    round-corners="false"
     theme="warning"
   >
     <div