@adyen/eslint-plugin-bento 2.7.7 → 2.9.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## 2.9.0 (2026-04-22)
+
+### Features
+
+- added deprecation rule for `bento-filter-bar` props ([7044b0346](https://github.com/Adyen/bento/commit/7044b0346))
+- added deprecation rule for `size` for `bento-dropdown` ([11effcdff](https://github.com/Adyen/bento/commit/11effcdff))
+- added deprecation rule for `error` property ([97327a416](https://github.com/Adyen/bento/commit/97327a416))
+- added `autofix` option to ESLint deprecation rules and generator ([70f4b9890](https://github.com/Adyen/bento/commit/70f4b9890))
+
+### ❤️ Thank You
+
+- daver
+- gerald
+
+
+## 2.8.0 (2026-04-15)
+
+### Features
+
+- added `tailwind-v3-to-bento` ESlint rule to help with the migration to Bento's Tailwind plugin ([d941b691a](https://github.com/Adyen/bento/commit/d941b691a))
+
+### ❤️ Thank You
+
+- daver
+
+
 ## 2.7.7 (2026-04-08)
 
 This was a version bump only for eslint to align it with other projects, there were no code changes.

package/README.md

@@ -51,6 +51,22 @@ module.exports = defineConfig([
 ]);
 ```
 
+### Flat config tailwind
+
+For projects migrating from Tailwind CSS v3 to Bento design tokens:
+
+```javascript
+const { defineConfig } = require('eslint/config');
+const bento = require('@adyen/eslint-plugin-bento');
+
+module.exports = defineConfig([
+    {
+        // Other configs
+    },
+    ...bento.configs['tailwind'],
+]);
+```
+
 ### Custom
 
 Without the recommended configs:
@@ -70,8 +86,9 @@ module.exports = defineConfig([
         },
         rules: {
             '@adyen/bento/vue-old-spacer-tokens': 'warn',
-            '@adyen/bento/deprecation-currency-default-slot': 'warn'
-            '@adyen/bento/deprecation-tag-default-slot': 'warn'
+            '@adyen/bento/deprecation-currency-default-slot': 'warn',
+            '@adyen/bento/deprecation-tag-default-slot': 'warn',
+            '@adyen/bento/tailwind-v3-to-bento': 'warn',
         },
         files: ['**/*.vue'],
     },
@@ -84,28 +101,44 @@ module.exports = defineConfig([
 
 Disallow the use of ADL space utility classes in favor of Bento _spacer_ utility classes.
 
-### Recommended
+### `@adyen/bento/deprecation-currency-default-slot`
 
-The recommended configuration contains pre-configured rules and their severity
+Disallow the use of the `default` slot in `bento-currency` instances.
 
-- `@adyen/bento/vue-old-spacer-tokens`: `warn`
+### `@adyen/bento/deprecation-tag-default-slot`
 
-### `@adyen/bento/deprecation-currency-default-slot`
+Disallow the use of the `default` slot in `bento-tag` instances.
 
-Disallow the use of the `default` slot in `bento-currency` instances
+### `@adyen/bento/tailwind-v3-to-bento`
 
-### Recommended
+Replace Tailwind CSS v3 utility classes with Bento design token equivalents. Covers spacing, border radius, border
+width, box shadows, breakpoints, and colors (auto-fixable via `eslint --fix`). Typography classes are flagged with a
+warning — use the `bento-typography` component instead.
 
-The recommended configuration contains pre-configured rules and their severity
+## Configurations
 
-- `@adyen/bento/deprecation-currency-default-slot`: `warn`
+### Recommended (`vue-recommended`)
 
-### `@adyen/bento/deprecation-tag-default-slot`
+| Rule                                             | Severity |
+| ------------------------------------------------ | -------- |
+| `@adyen/bento/deprecation-components-input-emit` | `warn`   |
+| `@adyen/bento/deprecation-components-value-prop` | `warn`   |
+| `@adyen/bento/deprecation-currency-default-slot` | `warn`   |
+| `@adyen/bento/deprecation-tag-default-slot`      | `warn`   |
+| `@adyen/bento/vue-old-spacer-tokens`             | `warn`   |
 
-Disallow the use of the `default` slot in `bento-tag` instances
+### Strict (`vue-strict`)
 
-### Recommended
+| Rule                                             | Severity |
+| ------------------------------------------------ | -------- |
+| `@adyen/bento/deprecation-components-input-emit` | `error`  |
+| `@adyen/bento/deprecation-components-value-prop` | `error`  |
+| `@adyen/bento/deprecation-currency-default-slot` | `error`  |
+| `@adyen/bento/deprecation-tag-default-slot`      | `error`  |
+| `@adyen/bento/vue-old-spacer-tokens`             | `error`  |
 
-The recommended configuration contains pre-configured rules and their severity
+### Tailwind (`tailwind`)
 
-- `@adyen/bento/deprecation-tag-default-slot`: `warn`
+| Rule                                | Severity |
+| ----------------------------------- | -------- |
+| `@adyen/bento/tailwind-v3-to-bento` | `warn`   |

package/configs/tailwind.js

@@ -0,0 +1,17 @@
+module.exports = [
+    {
+        name: '@bento/adyen/tailwind',
+        files: ['*.vue', '**/*.vue'],
+        languageOptions: {
+            parser: require('vue-eslint-parser'),
+        },
+        plugins: {
+            get '@adyen/bento'() {
+                return require('../index');
+            },
+        },
+        rules: {
+            '@adyen/bento/tailwind-v3-to-bento': 'warn',
+        },
+    },
+];

package/configs/vue-recommended.js

@@ -11,6 +11,9 @@ module.exports = [
             },
         },
         rules: {
+            '@adyen/bento/deprecation-bento-dropdown-size-prop': 'warn',
+            '@adyen/bento/deprecation-components-error-prop': 'warn',
+            '@adyen/bento/deprecation-filter-bar-deprecated-props': 'warn',
             '@adyen/bento/deprecation-components-input-emit': 'warn',
             '@adyen/bento/deprecation-components-value-prop': 'warn',
             '@adyen/bento/deprecation-currency-default-slot': 'warn',

package/configs/vue-strict.js

@@ -11,6 +11,9 @@ module.exports = [
             },
         },
         rules: {
+            '@adyen/bento/deprecation-bento-dropdown-size-prop': 'error',
+            '@adyen/bento/deprecation-components-error-prop': 'error',
+            '@adyen/bento/deprecation-filter-bar-deprecated-props': 'error',
             '@adyen/bento/deprecation-components-input-emit': 'error',
             '@adyen/bento/deprecation-components-value-prop': 'error',
             '@adyen/bento/deprecation-currency-default-slot': 'error',

package/index.js

@@ -9,13 +9,18 @@ const plugin = {
     configs: {
         'vue-recommended': require('./configs/vue-recommended'),
         'vue-strict': require('./configs/vue-strict'),
+        tailwind: require('./configs/tailwind'),
     },
     rules: {
+        'deprecation-bento-dropdown-size-prop': require('./rules/deprecation-bento-dropdown-size-prop/deprecation-bento-dropdown-size-prop'),
+        'deprecation-components-error-prop': require('./rules/deprecation-components-error-prop/deprecation-components-error-prop'),
+        'deprecation-filter-bar-deprecated-props': require('./rules/deprecation-filter-bar-deprecated-props/deprecation-filter-bar-deprecated-props'),
         'deprecation-components-input-emit': require('./rules/deprecation-components-input-emit/deprecation-components-input-emit'),
         'deprecation-components-value-prop': require('./rules/deprecation-components-value-prop/deprecation-components-value-prop'),
         'deprecation-currency-default-slot': require('./rules/deprecation-currency-default-slot/deprecation-currency-default-slot'),
         'deprecation-tag-default-slot': require('./rules/deprecation-tag-default-slot/deprecation-tag-default-slot'),
         'vue-old-spacer-tokens': require('./rules/vue-old-spacer-tokens/vue-old-spacer-tokens'),
+        'tailwind-v3-to-bento': require('./rules/tailwind-v3-to-bento/tailwind-v3-to-bento'),
     },
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adyen/eslint-plugin-bento",
-  "version": "2.7.7",
+  "version": "2.9.0",
   "description": "Adyen Bento ESLint rules",
   "main": "index.js",
   "files": [

package/rules/deprecation-bento-dropdown-size-prop/README.md

@@ -0,0 +1,25 @@
+# deprecation-bento-dropdown-size-prop
+
+## Description
+
+The `size` prop in the following components is deprecated:
+
+- `bento-dropdown`
+
+Only the `default` size is supported. Remove the `size` prop entirely.
+
+## Rule Details
+
+This rule reports usages of the deprecated `size` prop.
+
+### ❌ Incorrect
+
+```html
+<bento-dropdown size="small" /> <bento-dropdown :size="BentoDropdownSize.SMALL" />
+```
+
+### ✅ Correct
+
+```html
+<bento-dropdown />
+```

package/rules/deprecation-bento-dropdown-size-prop/__tests__/deprecation-bento-dropdown-size-prop.vue

@@ -0,0 +1,9 @@
+<template>
+    <div>
+        <bento-dropdown size="value" />
+        <bento-dropdown :size="value" />
+        <bento-dropdown :size="value" />
+    </div>
+</template>
+
+<script setup></script>

package/rules/deprecation-bento-dropdown-size-prop/__tests__/eslint.config.js

@@ -0,0 +1,26 @@
+// eslint.config.js
+const { defineConfig } = require('eslint/config');
+const vueParser = require('vue-eslint-parser');
+const tsParser = require('@typescript-eslint/parser');
+const adyenBento = require('@adyen/eslint-plugin-bento');
+
+module.exports = defineConfig([
+    {
+        languageOptions: {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            parser: vueParser,
+            parserOptions: {
+                parser: tsParser,
+            },
+        },
+        plugins: {
+            '@adyen/bento': adyenBento,
+        },
+        rules: {
+            // Register the specific rule we are testing
+            '@adyen/bento/deprecation-bento-dropdown-size-prop': ['warn', { autofix: true }],
+        },
+        files: ['**/*.vue'],
+    },
+]);

package/rules/deprecation-bento-dropdown-size-prop/deprecation-bento-dropdown-size-prop.integration.test.ts

@@ -0,0 +1,33 @@
+import path from 'node:path';
+import { execFileSyncEslintVueFiles } from '../../utils/exec-file-sync-eslint-vue-files';
+
+describe('@adyen/bento/deprecation-bento-dropdown-size-prop', () => {
+    it('should lint with warning', () => {
+        // Load .eslintrc
+        const eslintrc = path.resolve(__dirname, '__tests__', 'eslint.config.js');
+        // Load the test file generated alongside this one
+        const vueFile = path.resolve(__dirname, '__tests__', 'deprecation-bento-dropdown-size-prop.vue');
+
+        // Execute the linter
+        const result = JSON.parse(execFileSyncEslintVueFiles(eslintrc, vueFile));
+
+        /* ------------------------------------------------ */
+        /* CASE 2: SINGLE REPLACEMENT                       */
+        /* ------------------------------------------------ */
+
+        // For props, we generate 3 examples (static, shorthand, longhand) FOR EACH component.
+        // Total = (Number of Components) * 3
+        const numberOfComponents = 1;
+        expect(result[0].warningCount).toBe(numberOfComponents * 3);
+
+        // Verify the message structure on the first error found.
+        // Since the rule is the same for all components, checking the first one confirms the message is correct.
+        expect(result[0].messages[0]).toMatchObject({
+            ruleId: '@adyen/bento/deprecation-bento-dropdown-size-prop',
+            severity: 1,
+
+            messageId: 'deprecation',
+            message: `The "size" prop is deprecated.`,
+        });
+    });
+});

package/rules/deprecation-bento-dropdown-size-prop/deprecation-bento-dropdown-size-prop.js

@@ -0,0 +1,78 @@
+/**
+ * @typedef {import('eslint').Rule.RuleContext} RuleContext
+ */
+/**
+ * @typedef {import('eslint-plugin-vue/lib/utils').RuleModule} RuleModule
+ */
+
+const VueUtils = require('eslint-plugin-vue/lib/utils');
+
+/** @type {RuleModule} */
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Deprecates usage of size prop in bento-dropdown',
+            category: 'Deprecations',
+            url: 'https://github.com/Adyen/bento/blob/main/packages/eslint/rules/deprecation-bento-dropdown-size-prop/README.md',
+            recommended: true,
+        },
+        messages: {
+            deprecation: `The "size" prop is deprecated.`,
+        },
+        fixable: 'code',
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    autofix: {
+                        type: 'boolean',
+                        default: false,
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+    },
+
+    /** @param {RuleContext} context */
+    create(context) {
+        const options = context.options[0] || {};
+        const autofix = options.autofix === true;
+
+        /* ------------------------------------------------ */
+        /* CASE 2: PROP DEPRECATION (Multiple Components)   */
+        /* ------------------------------------------------ */
+        return VueUtils.defineTemplateBodyVisitor(context, {
+            // 1. STATIC: size="foo"
+            [`VElement:matches([name="bento-dropdown"], [name="BentoDropdown"]) > VStartTag > VAttribute[directive=false][key.name="size"]`](
+                node
+            ) {
+                context.report({
+                    node,
+                    messageId: 'deprecation',
+                    ...(autofix && {
+                        fix(fixer) {
+                            return fixer.remove(node);
+                        },
+                    }),
+                });
+            },
+
+            // 2. DYNAMIC: :size="foo" or v-bind:size="foo"
+            [`VElement:matches([name="bento-dropdown"], [name="BentoDropdown"]) > VStartTag > VAttribute[directive=true][key.name.name="bind"][key.argument.name="size"]`](
+                node
+            ) {
+                context.report({
+                    node,
+                    messageId: 'deprecation',
+                    ...(autofix && {
+                        fix(fixer) {
+                            return fixer.remove(node);
+                        },
+                    }),
+                });
+            },
+        });
+    },
+};

package/rules/deprecation-bento-dropdown-size-prop/deprecation-bento-dropdown-size-prop.test.ts

@@ -0,0 +1,101 @@
+import { RuleTester } from 'eslint';
+import vueParser from 'vue-eslint-parser';
+import tsParser from '@typescript-eslint/parser';
+import deprecationBentoDropdownSizeProp from './deprecation-bento-dropdown-size-prop';
+
+const ruleTester = new RuleTester({
+    languageOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        parser: vueParser,
+        parserOptions: {
+            parser: tsParser,
+        },
+    },
+});
+
+describe('@adyen/bento/deprecation-bento-dropdown-size-prop', () => {
+    ruleTester.run('deprecation-bento-dropdown-size-prop', deprecationBentoDropdownSizeProp, {
+        valid: [
+            {
+                name: 'Valid usage for bento-dropdown',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-dropdown other-prop="val" />
+                </template>
+                `,
+            },
+        ],
+        invalid: [
+            // bento-dropdown: Static
+            {
+                name: 'Invalid: Static prop on bento-dropdown',
+                filename: 'test.vue',
+                code: `<template><bento-dropdown size="small" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            // bento-dropdown: Shorthand
+            {
+                name: 'Invalid: Dynamic prop on bento-dropdown',
+                filename: 'test.vue',
+                code: `<template><bento-dropdown :size="dropdownSize" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            // bento-dropdown: v-bind longhand
+            {
+                name: 'Invalid: v-bind longhand prop on bento-dropdown',
+                filename: 'test.vue',
+                code: `<template><bento-dropdown v-bind:size="dropdownSize" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+        ],
+    });
+
+    /* ------------------------------------------------ */
+    /* AUTOFIX TESTS                                    */
+    /* ------------------------------------------------ */
+    ruleTester.run('deprecation-bento-dropdown-size-prop (autofix enabled)', deprecationBentoDropdownSizeProp, {
+        valid: [
+            {
+                name: 'Valid: no size prop (autofix enabled)',
+                filename: 'test.vue',
+                options: [{ autofix: true }],
+                code: `<template><bento-dropdown :items="items" /></template>`,
+            },
+        ],
+        invalid: [
+            {
+                name: 'Autofix: removes static size prop',
+                filename: 'test.vue',
+                options: [{ autofix: true }],
+                code: `<template><bento-dropdown size="small" /></template>`,
+                output: `<template><bento-dropdown  /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Autofix: removes dynamic size prop',
+                filename: 'test.vue',
+                options: [{ autofix: true }],
+                code: `<template><bento-dropdown :size="dropdownSize" /></template>`,
+                output: `<template><bento-dropdown  /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Autofix: removes v-bind longhand size prop',
+                filename: 'test.vue',
+                options: [{ autofix: true }],
+                code: `<template><bento-dropdown v-bind:size="dropdownSize" /></template>`,
+                output: `<template><bento-dropdown  /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+            {
+                name: 'Autofix: does not fix when autofix is false',
+                filename: 'test.vue',
+                options: [{ autofix: false }],
+                code: `<template><bento-dropdown size="small" other="x" /></template>`,
+                errors: [{ messageId: 'deprecation' }],
+            },
+        ],
+    });
+});

package/rules/deprecation-components-error-prop/README.md

@@ -0,0 +1,43 @@
+# deprecation-components-error-prop
+
+## Description
+
+The `error` prop in the following components is deprecated:
+
+- `bento-dropdown`
+- `bento-input-field`
+- `bento-input-field-phone-number`
+
+Please use `error-message` instead.
+
+## Rule Details
+
+This rule reports usages of the deprecated item.
+
+### ❌ Incorrect
+
+```html
+<bento-dropdown error="value" /> <bento-dropdown :error="value" />
+```
+
+```html
+<bento-input-field error="value" /> <bento-input-field :error="value" />
+```
+
+```html
+<bento-input-field-phone-number error="value" /> <bento-input-field-phone-number :error="value" />
+```
+
+### ✅ Correct
+
+```html
+<bento-dropdown error-message="value" />
+```
+
+```html
+<bento-input-field error-message="value" />
+```
+
+```html
+<bento-input-field-phone-number error-message="value" />
+```

package/rules/deprecation-components-error-prop/__tests__/deprecation-components-error-prop.vue

@@ -0,0 +1,17 @@
+<template>
+    <div>
+        <bento-dropdown error="value" />
+        <bento-dropdown :error="value" />
+        <bento-dropdown :error="value" />
+
+        <bento-input-field error="value" />
+        <bento-input-field :error="value" />
+        <bento-input-field :error="value" />
+
+        <bento-input-field-phone-number error="value" />
+        <bento-input-field-phone-number :error="value" />
+        <bento-input-field-phone-number :error="value" />
+    </div>
+</template>
+
+<script setup></script>

package/rules/deprecation-components-error-prop/__tests__/eslint.config.js

@@ -0,0 +1,26 @@
+// eslint.config.js
+const { defineConfig } = require('eslint/config');
+const vueParser = require('vue-eslint-parser');
+const tsParser = require('@typescript-eslint/parser');
+const adyenBento = require('@adyen/eslint-plugin-bento');
+
+module.exports = defineConfig([
+    {
+        languageOptions: {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            parser: vueParser,
+            parserOptions: {
+                parser: tsParser,
+            },
+        },
+        plugins: {
+            '@adyen/bento': adyenBento,
+        },
+        rules: {
+            // Register the specific rule we are testing
+            '@adyen/bento/deprecation-components-error-prop': ['warn', { autofix: true }],
+        },
+        files: ['**/*.vue'],
+    },
+]);

package/rules/deprecation-components-error-prop/deprecation-components-error-prop.integration.test.ts

@@ -0,0 +1,37 @@
+import path from 'node:path';
+import { execFileSyncEslintVueFiles } from '../../utils/exec-file-sync-eslint-vue-files';
+
+describe('@adyen/bento/deprecation-components-error-prop', () => {
+    it('should lint with warning', () => {
+        // Load .eslintrc
+        const eslintrc = path.resolve(__dirname, '__tests__', 'eslint.config.js');
+        // Load the test file generated alongside this one
+        const vueFile = path.resolve(__dirname, '__tests__', 'deprecation-components-error-prop.vue');
+
+        // Execute the linter
+        const result = JSON.parse(execFileSyncEslintVueFiles(eslintrc, vueFile));
+
+        /* ------------------------------------------------ */
+        /* CASE 2: SINGLE REPLACEMENT                       */
+        /* ------------------------------------------------ */
+
+        // For props, we generate 3 examples (static, shorthand, longhand) FOR EACH component.
+        // Total = (Number of Components) * 3
+        const numberOfComponents = 3;
+        expect(result[0].warningCount).toBe(numberOfComponents * 3);
+
+        // Verify the message structure on the first error found.
+        // Since the rule is the same for all components, checking the first one confirms the message is correct.
+        expect(result[0].messages[0]).toMatchObject({
+            ruleId: '@adyen/bento/deprecation-components-error-prop',
+            severity: 1,
+
+            messageId: 'deprecation',
+            message: `The "error" prop is deprecated. Please use "error-message" instead.`,
+
+            fix: expect.objectContaining({
+                text: expect.stringContaining('error-message'),
+            }),
+        });
+    });
+});