@adyen/eslint-plugin-bento 2.11.0 → 2.13.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 2.13.0 (2026-05-20)
+
+This was a version bump only for eslint to align it with other projects, there were no code changes.
+
+
+## 2.12.0 (2026-05-12)
+
+### Features
+
+- added rule to deprecate `bento-date-range-picker` prop `has-actions` in eslint ([d594fcb72](https://github.com/Adyen/bento/commit/d594fcb72))
+
+### ❤️ Thank You
+
+- erice
+
+
 ## 2.11.0 (2026-05-06)
 
 ### Features

package/configs/vue-recommended.js

@@ -12,6 +12,7 @@ module.exports = [
         },
         rules: {
             '@adyen/bento/deprecation-bento-data-grid-cell-action-menu-item-handler': 'warn',
+            '@adyen/bento/deprecation-bento-date-range-picker-has-actions-prop': 'warn',
             '@adyen/bento/deprecation-input-filter-dropdown-options': 'warn',
             '@adyen/bento/deprecation-bento-dropdown-size-prop': 'warn',
             '@adyen/bento/deprecation-bento-timeline-item-variant-prop': 'warn',

package/configs/vue-strict.js

@@ -12,6 +12,7 @@ module.exports = [
         },
         rules: {
             '@adyen/bento/deprecation-bento-data-grid-cell-action-menu-item-handler': 'error',
+            '@adyen/bento/deprecation-bento-date-range-picker-has-actions-prop': 'error',
             '@adyen/bento/deprecation-input-filter-dropdown-options': 'error',
             '@adyen/bento/deprecation-bento-dropdown-size-prop': 'error',
             '@adyen/bento/deprecation-bento-timeline-item-variant-prop': 'error',

package/index.js

@@ -13,6 +13,7 @@ const plugin = {
     },
     rules: {
         'deprecation-bento-data-grid-cell-action-menu-item-handler': require('./rules/deprecation-bento-data-grid-cell-action-menu-item-handler/deprecation-bento-data-grid-cell-action-menu-item-handler'),
+        'deprecation-bento-date-range-picker-has-actions-prop': require('./rules/deprecation-bento-date-range-picker-has-actions-prop/deprecation-bento-date-range-picker-has-actions-prop'),
         'deprecation-input-filter-dropdown-options': require('./rules/deprecation-input-filter-dropdown-options/deprecation-input-filter-dropdown-options'),
         'deprecation-bento-dropdown-size-prop': require('./rules/deprecation-bento-dropdown-size-prop/deprecation-bento-dropdown-size-prop'),
         'deprecation-bento-timeline-item-variant-prop': require('./rules/deprecation-bento-timeline-item-variant-prop/deprecation-bento-timeline-item-variant-prop'),

package/package.json

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

package/rules/deprecation-bento-date-range-picker-has-actions-prop/README.md

@@ -0,0 +1,50 @@
+# deprecation-bento-date-range-picker-has-actions-prop
+
+## Description
+
+Manages the **temporary** `has-actions` prop on `bento-date-range-picker`.
+
+The `has-actions` prop is a temporary opt-in flag for the new actions behavior. This rule helps teams adopt it during
+the transition period, and later remove it once the behavior becomes the default.
+
+## Options
+
+| Option        | Type                  | Default | Description                                                    |
+| :------------ | :-------------------- | :------ | :------------------------------------------------------------- |
+| **`action`**  | `'add'` \| `'remove'` | `'add'` | `add` reports missing `has-actions`. `remove` reports present. |
+| **`autofix`** | `boolean`             | `false` | Enables auto-fixing.                                           |
+
+## Rule Details
+
+### Action: `add` (default)
+
+Reports `bento-date-range-picker` instances that are **missing** the `has-actions` prop.
+
+#### ❌ Incorrect
+
+```html
+<bento-date-range-picker label="Pick" />
+```
+
+#### ✅ Correct
+
+```html
+<bento-date-range-picker has-actions label="Pick" />
+```
+
+### Action: `remove`
+
+Reports `bento-date-range-picker` instances that **have** the `has-actions` prop, so it can be cleaned up once the
+behavior becomes permanent.
+
+#### ❌ Incorrect
+
+```html
+<bento-date-range-picker has-actions label="Pick" />
+```
+
+#### ✅ Correct
+
+```html
+<bento-date-range-picker label="Pick" />
+```

package/rules/deprecation-bento-date-range-picker-has-actions-prop/__tests__/deprecation-bento-date-range-picker-has-actions-prop.vue

@@ -0,0 +1,10 @@
+<template>
+    <div>
+        <!-- These should trigger the "add" action (missing has-actions) -->
+        <bento-date-range-picker label="Pick a date" />
+        <bento-date-range-picker label="Another picker" :min="minDate" />
+        <bento-date-range-picker v-model="value" />
+    </div>
+</template>
+
+<script setup></script>

package/rules/deprecation-bento-date-range-picker-has-actions-prop/__tests__/eslint.config.js

@@ -0,0 +1,29 @@
+// 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-date-range-picker-has-actions-prop': [
+                'warn',
+                { action: 'add', autofix: true },
+            ],
+        },
+        files: ['**/*.vue'],
+    },
+]);

package/rules/deprecation-bento-date-range-picker-has-actions-prop/__tests__/remove/deprecation-bento-date-range-picker-has-actions-prop.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>
+        <!-- These should trigger the "remove" action (has-actions present) -->
+        <bento-date-range-picker has-actions />
+        <bento-date-range-picker has-actions label="Pick a date" />
+        <bento-date-range-picker :has-actions="true" />
+        <bento-date-range-picker :has-actions="false" />
+    </div>
+</template>
+
+<script setup></script>

package/rules/deprecation-bento-date-range-picker-has-actions-prop/__tests__/remove/eslint.config.js

@@ -0,0 +1,29 @@
+// 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-date-range-picker-has-actions-prop': [
+                'warn',
+                { action: 'remove', autofix: true },
+            ],
+        },
+        files: ['**/*.vue'],
+    },
+]);

package/rules/deprecation-bento-date-range-picker-has-actions-prop/deprecation-bento-date-range-picker-has-actions-prop.integration.test.ts

@@ -0,0 +1,47 @@
+import path from 'node:path';
+import { execFileSyncEslintVueFiles } from '../../utils/exec-file-sync-eslint-vue-files';
+
+describe('@adyen/bento/deprecation-bento-date-range-picker-has-actions-prop', () => {
+    it('should lint with warning when has-actions is missing (add action)', () => {
+        const eslintrc = path.resolve(__dirname, '__tests__', 'eslint.config.js');
+        const vueFile = path.resolve(
+            __dirname,
+            '__tests__',
+            'deprecation-bento-date-range-picker-has-actions-prop.vue'
+        );
+
+        const result = JSON.parse(execFileSyncEslintVueFiles(eslintrc, vueFile));
+
+        // The test .vue file has 3 bento-date-range-picker instances without has-actions
+        expect(result[0].warningCount).toBe(3);
+
+        expect(result[0].messages[0]).toMatchObject({
+            ruleId: '@adyen/bento/deprecation-bento-date-range-picker-has-actions-prop',
+            severity: 1,
+            messageId: 'missingProp',
+            message: `The temporary "has-actions" prop is missing on bento-date-range-picker. Add it to opt in to the new actions behavior.`,
+        });
+    });
+
+    it('should lint with warning when has-actions is present (remove action)', () => {
+        const eslintrc = path.resolve(__dirname, '__tests__', 'remove', 'eslint.config.js');
+        const vueFile = path.resolve(
+            __dirname,
+            '__tests__',
+            'remove',
+            'deprecation-bento-date-range-picker-has-actions-prop.vue'
+        );
+
+        const result = JSON.parse(execFileSyncEslintVueFiles(eslintrc, vueFile));
+
+        // The test .vue file has 4 bento-date-range-picker instances with has-actions
+        expect(result[0].warningCount).toBe(4);
+
+        expect(result[0].messages[0]).toMatchObject({
+            ruleId: '@adyen/bento/deprecation-bento-date-range-picker-has-actions-prop',
+            severity: 1,
+            messageId: 'removeProp',
+            message: `The temporary "has-actions" prop should be removed from bento-date-range-picker.`,
+        });
+    });
+});

package/rules/deprecation-bento-date-range-picker-has-actions-prop/deprecation-bento-date-range-picker-has-actions-prop.js

@@ -0,0 +1,205 @@
+/**
+ * @typedef {import('eslint').Rule.RuleContext} RuleContext
+ */
+/**
+ * @typedef {import('eslint-plugin-vue/lib/utils').RuleModule} RuleModule
+ */
+
+const VueUtils = require('eslint-plugin-vue/lib/utils');
+
+const COMPONENT_SELECTOR = `VElement:matches([name="bento-date-range-picker"], [name="BentoDateRangePicker"])`;
+const STATIC_ATTR = `${COMPONENT_SELECTOR} > VStartTag > VAttribute[directive=false][key.name="has-actions"]`;
+const DYNAMIC_ATTR = `${COMPONENT_SELECTOR} > VStartTag > VAttribute[directive=true][key.name.name="bind"][key.argument.name="has-actions"]`;
+
+/**
+ * Checks whether a VElement already has the `has-actions` attribute set to a truthy value.
+ * Returns false if the prop is missing or explicitly set to false.
+ */
+function hasHasActionsTruthy(startTag) {
+    return startTag.attributes.some(attr => {
+        if (!attr.directive) {
+            // Static: has-actions (boolean) or has-actions="something"
+            // has-actions="false" is the string "false", still counts as explicitly false
+            if (attr.key.name !== 'has-actions') {
+                return false;
+            }
+            return !attr.value || attr.value.value !== 'false';
+        }
+        // Dynamic: :has-actions="expr" or v-bind:has-actions="expr"
+        if (
+            attr.key.name &&
+            attr.key.name.name === 'bind' &&
+            attr.key.argument &&
+            attr.key.argument.name === 'has-actions'
+        ) {
+            // :has-actions="false" → expression is a Literal with value false
+            const expr = attr.value && attr.value.expression;
+            if (expr && expr.type === 'Literal' && expr.value === false) {
+                return false;
+            }
+            return true;
+        }
+        return false;
+    });
+}
+
+/**
+ * Removes an attribute node. If the attribute is alone on its line,
+ * removes the entire line (including leading whitespace and trailing newline)
+ * to avoid leaving a blank line.
+ */
+function removeAttribute(fixer, node, sourceCode) {
+    const fullText = sourceCode.getText();
+    const lineStart = fullText.lastIndexOf('\n', node.range[0] - 1) + 1;
+    const lineEnd = node.range[1];
+
+    // Check if the attribute is the only non-whitespace content on its line
+    const textBefore = fullText.slice(lineStart, node.range[0]);
+    const textAfter = fullText.slice(node.range[1], fullText.indexOf('\n', node.range[1]));
+
+    if (textBefore.trim() === '' && textAfter.trim() === '') {
+        // Remove from end of previous line to end of this line
+        const removeEnd = fullText.indexOf('\n', lineEnd);
+        return fixer.removeRange([lineStart - 1, removeEnd >= 0 ? removeEnd : lineEnd]);
+    }
+
+    return fixer.remove(node);
+}
+
+/** @type {RuleModule} */
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description:
+                'Manages the temporary "has-actions" prop on bento-date-range-picker. Use action "add" to add it or "remove" to remove it.',
+            category: 'Deprecations',
+            url: 'https://github.com/Adyen/bento/blob/main/packages/eslint/rules/deprecation-bento-date-range-picker-has-actions-prop/README.md',
+            recommended: true,
+        },
+        messages: {
+            missingProp: `The temporary "has-actions" prop is missing on bento-date-range-picker. Add it to opt in to the new actions behavior.`,
+            removeProp: `The temporary "has-actions" prop should be removed from bento-date-range-picker.`,
+        },
+        fixable: 'code',
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    action: {
+                        type: 'string',
+                        enum: ['add', 'remove'],
+                        default: 'add',
+                    },
+                    autofix: {
+                        type: 'boolean',
+                        default: false,
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+    },
+
+    /** @param {RuleContext} context */
+    create(context) {
+        const options = context.options[0] || {};
+        const action = options.action || 'add';
+        const autofix = options.autofix === true;
+
+        if (action === 'remove') {
+            /* ------------------------------------------------ */
+            /* REMOVE: report and optionally remove has-actions  */
+            /* ------------------------------------------------ */
+            return VueUtils.defineTemplateBodyVisitor(context, {
+                [STATIC_ATTR](node) {
+                    context.report({
+                        node,
+                        messageId: 'removeProp',
+                        ...(autofix && {
+                            fix(fixer) {
+                                return removeAttribute(fixer, node, context.sourceCode);
+                            },
+                        }),
+                    });
+                },
+                [DYNAMIC_ATTR](node) {
+                    context.report({
+                        node,
+                        messageId: 'removeProp',
+                        ...(autofix && {
+                            fix(fixer) {
+                                return removeAttribute(fixer, node, context.sourceCode);
+                            },
+                        }),
+                    });
+                },
+            });
+        }
+
+        /* ------------------------------------------------ */
+        /* ADD: report components missing has-actions        */
+        /* ------------------------------------------------ */
+        return VueUtils.defineTemplateBodyVisitor(context, {
+            [COMPONENT_SELECTOR](node) {
+                if (hasHasActionsTruthy(node.startTag)) {
+                    return;
+                }
+
+                // Find if has-actions exists but is set to false
+                const falseAttr = node.startTag.attributes.find(attr => {
+                    if (!attr.directive) {
+                        return attr.key.name === 'has-actions' && attr.value && attr.value.value === 'false';
+                    }
+                    if (
+                        attr.key.name &&
+                        attr.key.name.name === 'bind' &&
+                        attr.key.argument &&
+                        attr.key.argument.name === 'has-actions'
+                    ) {
+                        const expr = attr.value && attr.value.expression;
+                        return expr && expr.type === 'Literal' && expr.value === false;
+                    }
+                    return false;
+                });
+
+                context.report({
+                    node: falseAttr || node.startTag,
+                    messageId: 'missingProp',
+                    ...(autofix && {
+                        fix(fixer) {
+                            // If has-actions="false" or :has-actions="false", replace with boolean has-actions
+                            if (falseAttr) {
+                                return fixer.replaceText(falseAttr, 'has-actions');
+                            }
+
+                            // Prop is completely missing – insert it
+                            const sourceCode = context.sourceCode;
+                            const fullText = sourceCode.getText();
+                            const firstAttr = node.startTag.attributes[0];
+                            if (firstAttr) {
+                                const isMultiLine = firstAttr.loc.start.line !== node.startTag.loc.start.line;
+                                if (isMultiLine) {
+                                    // Derive indentation from the actual whitespace before the first attribute
+                                    const lineStart = fullText.lastIndexOf('\n', firstAttr.range[0] - 1) + 1;
+                                    const indent = fullText.slice(lineStart, firstAttr.range[0]);
+                                    return fixer.insertTextBefore(firstAttr, `has-actions\n${indent}`);
+                                }
+                                return fixer.insertTextBefore(firstAttr, 'has-actions ');
+                            }
+
+                            // No attributes – insert before the closing > or />
+                            const startTagText = sourceCode.getText(node.startTag);
+                            const selfClosing = startTagText.endsWith('/>');
+                            const insertPos = node.startTag.range[1] - (selfClosing ? 2 : 1);
+                            // Only add a leading space if there isn't already whitespace before the insert position
+                            const charBefore = fullText[insertPos - 1];
+                            const leadingSpace = charBefore && /\s/.test(charBefore) ? '' : ' ';
+                            return fixer.insertTextBeforeRange([insertPos, insertPos], `${leadingSpace}has-actions `);
+                        },
+                    }),
+                });
+            },
+        });
+    },
+};

package/rules/deprecation-bento-date-range-picker-has-actions-prop/deprecation-bento-date-range-picker-has-actions-prop.test.ts

@@ -0,0 +1,176 @@
+import { RuleTester } from 'eslint';
+import vueParser from 'vue-eslint-parser';
+import tsParser from '@typescript-eslint/parser';
+import deprecationBentoDateRangePickerHasActionsProp from './deprecation-bento-date-range-picker-has-actions-prop';
+
+const ruleTester = new RuleTester({
+    languageOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        parser: vueParser,
+        parserOptions: {
+            parser: tsParser,
+        },
+    },
+});
+
+describe('@adyen/bento/deprecation-bento-date-range-picker-has-actions-prop', () => {
+    describe('action: add (default)', () => {
+        ruleTester.run(
+            'deprecation-bento-date-range-picker-has-actions-prop (add)',
+            deprecationBentoDateRangePickerHasActionsProp,
+            {
+                valid: [
+                    {
+                        name: 'Valid: component already has has-actions (static boolean)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker has-actions /></template>`,
+                    },
+                    {
+                        name: 'Valid: component already has has-actions (dynamic)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker :has-actions="true" /></template>`,
+                    },
+                    {
+                        name: 'Valid: unrelated component without has-actions',
+                        filename: 'test.vue',
+                        code: `<template><bento-button label="click" /></template>`,
+                    },
+                ],
+                invalid: [
+                    {
+                        name: 'Invalid: missing has-actions (no autofix)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker label="Pick" /></template>`,
+                        output: null,
+                        errors: [{ messageId: 'missingProp' }],
+                    },
+                    {
+                        name: 'Invalid: missing has-actions (autofix adds prop)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker label="Pick" /></template>`,
+                        output: `<template><bento-date-range-picker has-actions label="Pick" /></template>`,
+                        options: [{ action: 'add', autofix: true }],
+                        errors: [{ messageId: 'missingProp' }],
+                    },
+                    {
+                        name: 'Invalid: missing has-actions on self-closing tag without attrs (autofix)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker /></template>`,
+                        output: `<template><bento-date-range-picker has-actions /></template>`,
+                        options: [{ autofix: true }],
+                        errors: [{ messageId: 'missingProp' }],
+                    },
+                    {
+                        name: 'Invalid: missing has-actions on self-closing tag without space before /> (autofix)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker/></template>`,
+                        output: `<template><bento-date-range-picker has-actions /></template>`,
+                        options: [{ autofix: true }],
+                        errors: [{ messageId: 'missingProp' }],
+                    },
+                    {
+                        name: 'Invalid: has-actions="false" (static string false, no autofix)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker has-actions="false" /></template>`,
+                        output: null,
+                        errors: [{ messageId: 'missingProp' }],
+                    },
+                    {
+                        name: 'Invalid: has-actions="false" (static string false, autofix replaces)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker has-actions="false" label="Pick" /></template>`,
+                        output: `<template><bento-date-range-picker has-actions label="Pick" /></template>`,
+                        options: [{ autofix: true }],
+                        errors: [{ messageId: 'missingProp' }],
+                    },
+                    {
+                        name: 'Invalid: :has-actions="false" (dynamic false, autofix replaces)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker :has-actions="false" label="Pick" /></template>`,
+                        output: `<template><bento-date-range-picker has-actions label="Pick" /></template>`,
+                        options: [{ autofix: true }],
+                        errors: [{ messageId: 'missingProp' }],
+                    },
+                    {
+                        name: 'Invalid: multi-line component missing has-actions (autofix preserves indentation)',
+                        filename: 'test.vue',
+                        code: `<template>
+                            <bento-date-range-picker
+                                label="Pick"
+                            />
+                            </template>`,
+                        output: `<template>
+                            <bento-date-range-picker
+                                has-actions
+                                label="Pick"
+                            />
+                            </template>`,
+                        options: [{ autofix: true }],
+                        errors: [{ messageId: 'missingProp' }],
+                    },
+                ],
+            }
+        );
+    });
+
+    describe('action: remove', () => {
+        ruleTester.run(
+            'deprecation-bento-date-range-picker-has-actions-prop (remove)',
+            deprecationBentoDateRangePickerHasActionsProp,
+            {
+                valid: [
+                    {
+                        name: 'Valid: component without has-actions',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker label="Pick" /></template>`,
+                        options: [{ action: 'remove' }],
+                    },
+                ],
+                invalid: [
+                    {
+                        name: 'Invalid: has-actions present (static boolean, no autofix)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker has-actions /></template>`,
+                        output: null,
+                        options: [{ action: 'remove' }],
+                        errors: [{ messageId: 'removeProp' }],
+                    },
+                    {
+                        name: 'Invalid: has-actions present (static boolean, autofix removes)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker has-actions label="Pick" /></template>`,
+                        output: `<template><bento-date-range-picker  label="Pick" /></template>`,
+                        options: [{ action: 'remove', autofix: true }],
+                        errors: [{ messageId: 'removeProp' }],
+                    },
+                    {
+                        name: 'Invalid: has-actions present (dynamic, autofix removes)',
+                        filename: 'test.vue',
+                        code: `<template><bento-date-range-picker :has-actions="true" /></template>`,
+                        output: `<template><bento-date-range-picker  /></template>`,
+                        options: [{ action: 'remove', autofix: true }],
+                        errors: [{ messageId: 'removeProp' }],
+                    },
+                    {
+                        name: 'Invalid: multi-line has-actions on its own line (autofix removes entire line)',
+                        filename: 'test.vue',
+                        code: `<template>
+                            <bento-date-range-picker
+                                has-actions
+                                label="Pick"
+                            />
+                            </template>`,
+                        output: `<template>
+                            <bento-date-range-picker
+                                label="Pick"
+                            />
+                            </template>`,
+                        options: [{ action: 'remove', autofix: true }],
+                        errors: [{ messageId: 'removeProp' }],
+                    },
+                ],
+            }
+        );
+    });
+});