feat: add icon-button-variant rule

Author: KaelWD

README.md

@@ -48,6 +48,7 @@ These rules will help you avoid deprecated components, props, and classes. They
 - Prevent the use of classes that have been removed from Vuetify ([`no-deprecated-classes`])
 - Prevent the use of the old theme class syntax ([`no-deprecated-colors`])
 - Prevent the use of deprecated import paths ([`no-deprecated-imports`])
+- Ensure icon buttons have a variant defined ([`icon-button-variant`])
 
 ### Grid system
 
@@ -63,6 +64,7 @@ These rules are designed to help migrate to the new grid system in Vuetify v2. T
 [`no-deprecated-classes`]: ./docs/rules/no-deprecated-classes.md
 [`no-deprecated-colors`]: ./docs/rules/no-deprecated-colors.md
 [`no-deprecated-imports`]: ./docs/rules/no-deprecated-imports.md
+[`icon-button-variant`]: ./docs/rules/icon-button-variant.md
 
 
 ## 💪 Supporting Vuetify

docs/rules/icon-button-variant.md

@@ -0,0 +1,31 @@
+# Ensure icon buttons have a variant defined (icon-button-variant)
+
+:wrench: This rule is fixable with `eslint --fix`
+
+## Rule Details
+
+Buttons in Vuetify 3 no longer have a different variant applied automatically.
+
+Examples of **incorrect** code for this rule:
+
+```html
+<v-btn icon />
+<v-btn icon="search" />
+```
+
+Examples of **correct** code for this rule:
+
+```js
+<v-btn icon variant="text" />
+<v-btn icon="search" variant="text" />
+```
+
+### Options
+
+A different variant other than `text` can be assigned:
+
+```js
+{
+  'vuetify/icon-button-variant': ['error', 'plain']
+}
+```

src/rules/icon-button-variant.js

@@ -0,0 +1,48 @@
+'use strict'
+
+const { classify, getAttributes } = require('../util/helpers')
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Ensure icon buttons have a variant defined.',
+      category: 'recommended',
+    },
+    fixable: 'code',
+    schema: [
+      { type: 'string' },
+    ],
+    messages: {
+      needsVariant: 'Icon buttons should have {{ a }} defined.',
+    },
+  },
+
+  create (context) {
+    return context.parserServices.defineTemplateBodyVisitor({
+      VElement (element) {
+        const tag = classify(element.rawName)
+        if (tag !== 'VBtn') return
+
+        const attributes = getAttributes(element)
+        const iconAttribute = attributes.find(attr => attr.name === 'icon')
+        if (!iconAttribute) return
+        if (attributes.some(attr => attr.name === 'variant')) return
+
+        const variant = `variant="${context.options[0] || 'text'}"`
+
+        context.report({
+          node: iconAttribute.node,
+          messageId: 'needsVariant',
+          data: { a: variant },
+          fix (fixer) {
+            return fixer.insertTextAfter(iconAttribute.node, ' ' + variant)
+          },
+        })
+      },
+    })
+  },
+}

tests/rules/icon-button-variant.js

@@ -0,0 +1,28 @@
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../src/rules/icon-button-variant')
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: { ecmaVersion: 2015 },
+})
+
+tester.run('icon-button-variant', rule, {
+  valid: [
+    '<template><v-btn /></template>',
+    '<template><v-btn variant="text" /></template>',
+    '<template><v-btn icon variant="text" /></template>',
+    '<template><v-btn icon="foo" variant="text" /></template>',
+  ],
+  invalid: [
+    {
+      code: '<template><v-btn icon /></template>',
+      output: '<template><v-btn icon variant="text" /></template>',
+      errors: [{ messageId: 'needsVariant' }],
+    },
+    {
+      code: '<template><v-btn icon="foo" /></template>',
+      output: '<template><v-btn icon="foo" variant="text" /></template>',
+      errors: [{ messageId: 'needsVariant' }],
+    },
+  ],
+})