@adyen/eslint-plugin-bento 2.22.0 → 2.24.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## 2.24.0 (2026-09-09)
+
+### Features
+
+- added `useBentoTranslationOverrides` composable to override translated strings in vue 3 ([e0cb22fc0](https://github.com/Adyen/bento/commit/e0cb22fc0))
+- added rule to deprecate `bento-tag` white variant ([20867ed09](https://github.com/Adyen/bento/commit/20867ed09))
+
+### Miscellaneous Chores
+
+- added `vue-prefer-no-redundant-v-if-for-dialog` eslint rule ([f21cf44a6](https://github.com/Adyen/bento/commit/f21cf44a6))
+
+### ❤️ Thank You
+
+- erice
+- gerald
+- mafalda
+
+
+## 2.23.0 (2026-08-17)
+
+### Features
+
+- updated `deprecation-filter-bar-deprecated-props` rule to check also for configs with enums ([5259ab283](https://github.com/Adyen/bento/commit/5259ab283))
+
+### Miscellaneous Chores
+
+- enabled strict `@adyen/eslint-plugin-bento` plugin ESLint rules to enforce deprecations ([974a8e49e](https://github.com/Adyen/bento/commit/974a8e49e))
+
+### ❤️ Thank You
+
+- daver
+
+
 ## 2.22.0 (2026-07-29)
 
 ### Bug Fixes

package/README.md

@@ -19,7 +19,7 @@ npm install --save-dev eslint@9 vue-eslint-parser@10 @adyen/eslint-plugin-bento@
 
 ### Flat config recommended (`eslint.config.js`)
 
-All rules are set to `warn`
+Deprecation rules are set to `warn`. Restricted APIs remain errors.
 
 ```javascript
 const { defineConfig } = require('eslint/config');
@@ -97,6 +97,12 @@ module.exports = defineConfig([
 
 ## Rules
 
+### `@adyen/bento/vue-no-use-bento-translation-overrides`
+
+Disallow importing the restricted `useBentoTranslationOverrides` composable without approval from the Bento team. This
+API is only intended for teams building SDKs or component libraries for external customers and must not be used in Adyen
+products.
+
 ### `@adyen/bento/vue-old-spacer-tokens`
 
 Disallow the use of ADL space utility classes in favor of Bento _spacer_ utility classes.
@@ -109,6 +115,12 @@ Disallow the use of the `default` slot in `bento-currency` instances.
 
 Disallow the use of the `default` slot in `bento-tag` instances.
 
+### `@adyen/bento/vue-no-redundant-dialog-v-if`
+
+Disallow a `v-if` that duplicates the `is-open` binding on `bento-modal`, `bento-modal-fullscreen` and
+`bento-sidepanel`. These components render a native `<dialog>`, so the `v-if` only unmounts them before their closing
+animation can run. Reported with an IDE suggestion to remove the directive, not an autofix.
+
 ### `@adyen/bento/tailwind-v3-to-bento`
 
 Replace Tailwind CSS v3 utility classes with Bento design token equivalents. Covers spacing, border radius, border
@@ -119,23 +131,27 @@ warning — use the `bento-typography` component instead.
 
 ### Recommended (`vue-recommended`)
 
-| 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`   |
+| 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-no-use-bento-translation-overrides` | `error`  |
+| `@adyen/bento/vue-no-redundant-dialog-v-if`           | `warn`   |
+| `@adyen/bento/vue-old-spacer-tokens`                  | `warn`   |
 
 ### Strict (`vue-strict`)
 
-| 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`  |
+| 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-no-use-bento-translation-overrides` | `error`  |
+| `@adyen/bento/vue-no-redundant-dialog-v-if`           | `error`  |
+| `@adyen/bento/vue-old-spacer-tokens`                  | `error`  |
 
 ### Tailwind (`tailwind`)
 

package/configs/vue-recommended.js

@@ -1,4 +1,17 @@
+/** @type {import('eslint').Linter.Config[]} */
 module.exports = [
+    {
+        name: '@bento/adyen/recommended-restricted-apis',
+        files: ['*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}', '**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}'],
+        plugins: {
+            get '@adyen/bento'() {
+                return require('../index');
+            },
+        },
+        rules: {
+            '@adyen/bento/vue-no-use-bento-translation-overrides': 'error',
+        },
+    },
     {
         name: '@bento/adyen/recommended',
         files: ['*.vue', '**/*.vue'],
@@ -11,6 +24,7 @@ module.exports = [
             },
         },
         rules: {
+            '@adyen/bento/deprecation-bento-tag-variant-enum': 'warn',
             '@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',
@@ -26,6 +40,8 @@ module.exports = [
             '@adyen/bento/deprecation-components-value-prop': 'warn',
             '@adyen/bento/deprecation-currency-default-slot': 'warn',
             '@adyen/bento/deprecation-tag-default-slot': 'warn',
+            '@adyen/bento/vue-no-use-bento-translation-overrides': 'error',
+            '@adyen/bento/vue-no-redundant-dialog-v-if': 'warn',
             '@adyen/bento/vue-old-spacer-tokens': 'warn',
         },
     },

package/configs/vue-strict.js

@@ -1,4 +1,17 @@
+/** @type {import('eslint').Linter.Config[]} */
 module.exports = [
+    {
+        name: '@bento/adyen/strict-restricted-apis',
+        files: ['*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}', '**/*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}'],
+        plugins: {
+            get '@adyen/bento'() {
+                return require('../index');
+            },
+        },
+        rules: {
+            '@adyen/bento/vue-no-use-bento-translation-overrides': 'error',
+        },
+    },
     {
         name: '@bento/adyen/strict',
         files: ['*.vue', '**/*.vue'],
@@ -11,8 +24,9 @@ module.exports = [
             },
         },
         rules: {
+            '@adyen/bento/deprecation-bento-tag-variant-enum': 'error',
             '@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-bento-date-range-picker-has-actions-prop': ['error', { action: 'remove' }],
             '@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',
@@ -26,6 +40,8 @@ module.exports = [
             '@adyen/bento/deprecation-components-value-prop': 'error',
             '@adyen/bento/deprecation-currency-default-slot': 'error',
             '@adyen/bento/deprecation-tag-default-slot': 'error',
+            '@adyen/bento/vue-no-use-bento-translation-overrides': 'error',
+            '@adyen/bento/vue-no-redundant-dialog-v-if': 'error',
             '@adyen/bento/vue-old-spacer-tokens': 'error',
         },
     },

package/index.js

@@ -12,6 +12,7 @@ const plugin = {
         tailwind: require('./configs/tailwind'),
     },
     rules: {
+        'deprecation-bento-tag-variant-enum': require('./rules/deprecation-bento-tag-variant-enum/deprecation-bento-tag-variant-enum'),
         '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'),
@@ -27,6 +28,8 @@ const plugin = {
         '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-no-use-bento-translation-overrides': require('./rules/vue-no-use-bento-translation-overrides/vue-no-use-bento-translation-overrides'),
+        'vue-no-redundant-dialog-v-if': require('./rules/vue-no-redundant-dialog-v-if/vue-no-redundant-dialog-v-if'),
         '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.22.0",
+  "version": "2.24.0",
   "description": "Adyen Bento ESLint rules",
   "main": "index.js",
   "files": [
@@ -30,8 +30,8 @@
     "@types/eslint": "9.6.1",
     "@types/estree": "1.0.6",
     "@types/node": "24.9.0",
-    "@typescript-eslint/eslint-plugin": "8.52.0",
-    "@typescript-eslint/parser": "8.52.0",
+    "@typescript-eslint/eslint-plugin": "8.61.0",
+    "@typescript-eslint/parser": "8.61.0",
     "@vitest/eslint-plugin": "1.1.25",
     "@vitest/coverage-v8": "3.2.6",
     "eslint": "9.39.0",

package/rules/deprecation-bento-tag-variant-enum/README.md

@@ -0,0 +1,69 @@
+# deprecation-bento-tag-variant-enum
+
+## Description
+
+The white `bento-tag` variant and the `BentoTagVariant.WHITE` enum member are deprecated. Use the `grey` variant or the
+`'grey'` string literal instead.
+
+## Rule details
+
+The rule reports and can autofix the following usages:
+
+- `BentoTagVariant.WHITE` in scripts and template expressions.
+- Static `variant="white"` attributes on `bento-tag` and `BentoTag`.
+- Named bindings such as `:variant="'white'"` and `v-bind:variant="'white'"`.
+- Object bindings such as `v-bind="{ variant: 'white' }"`.
+- `BentoTagProps` object literals whose `variant` is `'white'` or `BentoTagVariant.WHITE`.
+
+The rule does not report `variant="white"` on unrelated components or other `BentoTagVariant` members. Values that can
+only be determined at runtime cannot be safely autofixed.
+
+## Incorrect
+
+```vue
+<template>
+    <bento-tag variant="white" />
+    <bento-tag :variant="'white'" />
+    <bento-tag v-bind="{ variant: 'white' }" />
+    <bento-tag :variant="BentoTagVariant.WHITE" />
+</template>
+
+<script setup lang="ts">
+    import { type BentoTagProps, BentoTagVariant } from '@adyen/bento-vue2';
+
+    const tagProps: BentoTagProps = { variant: 'white' };
+    const enumTagProps: BentoTagProps = { variant: BentoTagVariant.WHITE };
+</script>
+```
+
+## Correct
+
+```vue
+<template>
+    <bento-tag variant="grey" />
+    <bento-tag :variant="'grey'" />
+    <bento-tag v-bind="{ variant: 'grey' }" />
+</template>
+
+<script setup lang="ts">
+    import type { BentoTagProps } from '@adyen/bento-vue2';
+
+    const tagProps: BentoTagProps = { variant: 'grey' };
+</script>
+```
+
+## Configuration
+
+The rule is enabled as a warning in the recommended Bento Vue config and as an error in the strict config.
+
+To enable autofix explicitly:
+
+```javascript
+export default [
+    {
+        rules: {
+            '@adyen/bento/deprecation-bento-tag-variant-enum': ['warn', { autofix: true }],
+        },
+    },
+];
+```

package/rules/deprecation-bento-tag-variant-enum/deprecation-bento-tag-variant-enum.js

@@ -0,0 +1,167 @@
+/**
+ * @typedef {import('eslint').Rule.RuleContext} RuleContext
+ */
+/**
+ * @typedef {import('eslint-plugin-vue/lib/utils').RuleModule} RuleModule
+ */
+
+const VueUtils = require('eslint-plugin-vue/lib/utils');
+
+const findWhiteVariantProperty = properties =>
+    properties.find(
+        property =>
+            property.type === 'Property' &&
+            !property.computed &&
+            ((property.key.type === 'Identifier' && property.key.name === 'variant') ||
+                (property.key.type === 'Literal' && property.key.value === 'variant')) &&
+            property.value.type === 'Literal' &&
+            property.value.value === 'white'
+    );
+
+/** @type {RuleModule} */
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description: 'Deprecates the white bento-tag variant and BentoTagVariant.WHITE',
+            category: 'Deprecations',
+            url: 'https://github.com/Adyen/bento/blob/main/packages/eslint/rules/deprecation-bento-tag-variant-enum/README.md',
+            recommended: true,
+        },
+        messages: {
+            deprecationWithReplacement: `The "{{name}}" enum member is deprecated. Please use "{{replacement}}" instead.`,
+            whiteVariant: `The "white" bento-tag variant is deprecated. Please use "grey" instead.`,
+        },
+        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;
+
+        const REPLACEMENT_MAP = {
+            WHITE: "'grey'",
+        };
+
+        const enumName = 'BentoTagVariant';
+
+        const visitor = {
+            [`MemberExpression[object.name="${enumName}"]`](node) {
+                if (node.computed && node.property.type !== 'Literal') {
+                    return;
+                }
+
+                const memberName = node.computed ? node.property.value : node.property.name;
+                const replacement = REPLACEMENT_MAP[memberName];
+                if (replacement) {
+                    context.report({
+                        node,
+                        messageId: 'deprecationWithReplacement',
+                        data: { name: `${enumName}.${memberName}`, replacement },
+                        ...(autofix && {
+                            fix(fixer) {
+                                return fixer.replaceText(node, replacement);
+                            },
+                        }),
+                    });
+                }
+            },
+            VariableDeclarator(node) {
+                const typeName = node.id?.typeAnnotation?.typeAnnotation?.typeName;
+                if (
+                    typeName?.type !== 'Identifier' ||
+                    typeName.name !== 'BentoTagProps' ||
+                    node.init?.type !== 'ObjectExpression'
+                ) {
+                    return;
+                }
+
+                const variantProperty = findWhiteVariantProperty(node.init.properties);
+                if (variantProperty?.type !== 'Property') {
+                    return;
+                }
+
+                context.report({
+                    node: variantProperty.value,
+                    messageId: 'whiteVariant',
+                    ...(autofix && {
+                        fix(fixer) {
+                            return fixer.replaceText(variantProperty.value, "'grey'");
+                        },
+                    }),
+                });
+            },
+            [`VElement:matches([name="bento-tag"], [name="BentoTag"]) > VStartTag > VAttribute[directive=false][key.name="variant"]`](
+                node
+            ) {
+                if (node.value?.value !== 'white') {
+                    return;
+                }
+
+                context.report({
+                    node,
+                    messageId: 'whiteVariant',
+                    ...(autofix && {
+                        fix(fixer) {
+                            return fixer.replaceText(node, 'variant="grey"');
+                        },
+                    }),
+                });
+            },
+            [`VElement:matches([name="bento-tag"], [name="BentoTag"]) > VStartTag > VAttribute[directive=true][key.name.name="bind"][key.argument.name="variant"]`](
+                node
+            ) {
+                const expression = node.value?.expression;
+                if (expression?.type !== 'Literal' || expression.value !== 'white') {
+                    return;
+                }
+
+                context.report({
+                    node,
+                    messageId: 'whiteVariant',
+                    ...(autofix && {
+                        fix(fixer) {
+                            return fixer.replaceText(expression, "'grey'");
+                        },
+                    }),
+                });
+            },
+            [`VElement:matches([name="bento-tag"], [name="BentoTag"]) > VStartTag > VAttribute[directive=true][key.name.name="bind"]`](
+                node
+            ) {
+                if (node.key.argument || node.value?.expression?.type !== 'ObjectExpression') {
+                    return;
+                }
+
+                const variantProperty = findWhiteVariantProperty(node.value.expression.properties);
+                if (variantProperty?.type !== 'Property') {
+                    return;
+                }
+
+                context.report({
+                    node: variantProperty.value,
+                    messageId: 'whiteVariant',
+                    ...(autofix && {
+                        fix(fixer) {
+                            return fixer.replaceText(variantProperty.value, "'grey'");
+                        },
+                    }),
+                });
+            },
+        };
+        return VueUtils.defineTemplateBodyVisitor(context, visitor, visitor);
+    },
+};

package/rules/deprecation-filter-bar-deprecated-props/README.md

@@ -61,4 +61,11 @@ const config = [
         options: { listboxItems: [] },
     },
 ];
+
+const values = [
+    {
+        field: 'status',
+        value: 'active',
+    },
+];
 ```

package/rules/deprecation-filter-bar-deprecated-props/deprecation-filter-bar-deprecated-props.js

@@ -20,6 +20,16 @@ function getStaticPropertyName(prop) {
     return prop.key.type === 'Identifier' ? prop.key.name : prop.key.type === 'Literal' ? String(prop.key.value) : null;
 }
 
+function isBentoFilterItemType(node) {
+    return (
+        node?.type === 'MemberExpression' &&
+        !node.computed &&
+        node.object.type === 'Identifier' &&
+        node.object.name === 'BentoFilterItemType' &&
+        node.property.type === 'Identifier'
+    );
+}
+
 /** @type {RuleModule} */
 module.exports = {
     meta: {
@@ -88,9 +98,10 @@ module.exports = {
             const filterType = propertyMap.type?.value;
             const isFilterConfig =
                 propertyMap.field &&
-                filterType?.type === 'Literal' &&
-                typeof filterType.value === 'string' &&
-                filterType.value.endsWith('Filter');
+                ((filterType?.type === 'Literal' &&
+                    typeof filterType.value === 'string' &&
+                    filterType.value.endsWith('Filter')) ||
+                    isBentoFilterItemType(filterType));
             if (!isFilterConfig) {
                 return;
             }

package/rules/vue-no-redundant-dialog-v-if/README.md

@@ -0,0 +1,55 @@
+# @adyen/bento/vue-no-redundant-dialog-v-if
+
+> Disallow a redundant `v-if` next to `is-open` on components rendering a native dialog
+
+- This rule is included in the `vue-recommended` (`warn`) and `vue-strict` (`error`) configurations
+- 💡 This rule provides an IDE suggestion (not an autofix), so `--fix` leaves the code untouched
+
+The following components render a native HTML `<dialog>` element:
+
+- `bento-modal`
+- `bento-modal-fullscreen`
+- `bento-sidepanel`
+
+A closed `<dialog>` is hidden by the browser and its content is not rendered, so `is-open` alone is enough to control
+visibility. Pairing it with a `v-if` on the same value unmounts the component the moment it closes, which cancels the
+closing animation.
+
+This rule only reports a `v-if` whose expression is identical to the `is-open` binding, because that is the only case
+where removing the directive provably keeps the same behaviour. A `v-if` driven by another condition (for example
+`v-if="hasPermission"`) is left alone, as is an element whose `v-if` is followed by a `v-else` or `v-else-if` branch.
+
+## ✗ BAD
+
+<!-- prettier-ignore -->
+```html
+<template>
+    <bento-modal v-if="isOpen" :is-open="isOpen" />
+
+    <bento-modal-fullscreen v-if="isOpen" :is-open="isOpen" />
+
+    <bento-sidepanel v-if="isOpen" :is-open="isOpen" />
+</template>
+```
+
+## ✓ Good
+
+<!-- prettier-ignore -->
+```html
+<template>
+    <bento-modal :is-open="isOpen" />
+
+    <bento-modal-fullscreen :is-open="isOpen" />
+
+    <bento-sidepanel :is-open="isOpen" />
+</template>
+```
+
+A `v-if` on an unrelated condition is still valid, since it does not duplicate `is-open`:
+
+<!-- prettier-ignore -->
+```html
+<template>
+    <bento-modal v-if="hasPermission" :is-open="isOpen" />
+</template>
+```