Dialtone ESLint plugin

Find deprecated Dialtone APIs, migration work, and accessibility issues in Vue templates.

@dialpad/eslint-plugin-dialtone checks Vue templates for deprecated Dialtone APIs, migration work, and a small set of accessibility requirements.

The plugin does not provide a recommended preset. Enable the rules that match the checks you want your project to enforce.

Installation

Install the plugin and its parser alongside ESLint:

npm install --save-dev eslint vue-eslint-parser @dialpad/eslint-plugin-dialtone

If your project already uses ESLint and vue-eslint-parser, install only the Dialtone plugin.

Flat config

Add the plugin to eslint.config.mjs, then configure its rules by name:

import dialtone from "@dialpad/eslint-plugin-dialtone";
import vueParser from "vue-eslint-parser";

export default [
  {
    files: ["**/*.vue"],
    languageOptions: {
      parser: vueParser,
    },
    plugins: {
      "@dialpad/dialtone": dialtone,
    },
    rules: {
      "@dialpad/dialtone/deprecated-dialtone-component": "warn",
      "@dialpad/dialtone/focusgroup-requires-label": "error",
      "@dialpad/dialtone/focusgroup-requires-role": "error",
    },
  },
];

If another config already assigns vue-eslint-parser to Vue files, keep that parser configuration and add the plugins and rules entries.

Legacy config

For an eslintrc configuration:

{
  "parser": "vue-eslint-parser",
  "plugins": ["@dialpad/dialtone"],
  "rules": {
    "@dialpad/dialtone/deprecated-dialtone-component": "warn",
    "@dialpad/dialtone/focusgroup-requires-label": "error",
    "@dialpad/dialtone/focusgroup-requires-role": "error"
  }
}

Rules

Rule What it checks Autofix
custom-implementation Detects custom implementations of Dialtone icons. No
deprecated-base-color-classes Detects usage of deprecated base-color utility classes. No
deprecated-class-props Detects usage of removed structural class props on Dialtone Vue components. Yes
deprecated-component Detects usage of deprecated components that should be replaced with Dialtone Vue components. No
deprecated-dialtone-component Detects usage of deprecated Dialtone components that have newer alternatives. No
deprecated-directive Detects usage of deprecated Vue directives that have Dialtone replacements. No
deprecated-flex-gap-classes Detects usage of deprecated d-flg* flex-gap utilities. No
deprecated-grid-gap-classes Detects usage of deprecated d-gg*, d-grg*, and d-gcg* grid-gap utilities. No
deprecated-headline-sizes Detects deprecated xxl and xxxl headline sizes. Yes
deprecated-icons Detects deprecated SVG and Vue icon imports. No
deprecated-link-styling-classes Detects legacy link and button classes that should use DtButton or DtLink props. No
deprecated-list-styling-classes Detects legacy list utilities that should use DtTextList. No
deprecated-physical-naming Detects deprecated physical direction names in Dialtone slots, props, prop values, and events. No
deprecated-pixel-utility-classes Detects deprecated pixel-named utilities that have token-stop equivalents. Yes
deprecated-radius-utility-classes Detects legacy border-radius utilities that have logical, token-stop names. Yes
deprecated-stack-alignment-classes Detects alignment utilities on DtStack that should be component props. No
deprecated-stack-flow-classes Detects sibling-margin utilities that should use the DtStack gap prop. No
deprecated-success-color-classes Detects deprecated success color utilities that have positive replacements. No
deprecated-tshirt-sizes Detects deprecated T-shirt component sizes that have numeric or current typography values. Yes
focusgroup-requires-label Detects v-dt-focusgroup elements without an accessible label. No
focusgroup-requires-role Detects v-dt-focusgroup elements without a role. No
prefer-stack-over-flex Detects flex utility layouts that should use DtStack. No
recommend-typography-style Detects separate typography utilities that should use a composed typography utility. No

Open a rule's link for its accepted patterns, reported failures, and migration examples.

Apply available fixes

Rules marked Yes in the Autofix column provide automatic fixes.

Run ESLint with --fix to apply them:

npx eslint . --fix

Review the resulting diff. The remaining findings need a decision about the intended component, token, or layout.

Dialtone ESLint plugin documentation last updated Friday, September 4, 2026

fix/popover-modal-zindex-scope