Design System ESLint Plugin

This plugin contains rules that should be used when working with the Atlassian Design System.

Installation

yarn add @atlaskit/eslint-plugin-design-system -D

Configuration

Use the recommended config to get reasonable defaults recommended by the Atlassian Design System:

module.exports = {
  extends: [
+    'plugin:@atlaskit/design-system/recommended',
  ],
};

We don't recommended maintaining your own configuration. If you do not use our config you will need to specify individual rules and configuration. Add the plugin to your eslint.config.cjs file.

module.exports = {
  plugins: [
+    '@atlaskit/design-system',
  ],
};

Enable the rules that you would like to use.

module.exports = {
  rules: [
+    '@atlaskit/design-system/no-deprecated-apis': 'error',
  ],
};

Rules

| Rule | Description | Recommended | Fixable | Suggestions | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- | | consistent-css-prop-usage | Ensures consistency with css and xcss prop usages | Yes | Yes | | | ensure-design-token-usage | Enforces usage of design tokens rather than hard-coded values. | Yes | Yes | Yes | | ensure-design-token-usage/preview | Enforces usage of pre-release design tokens rather than hard-coded values. | | Yes | Yes | | ensure-icon-color | Enforces that upcoming icon components have a color prop set, to enable a migration of the default value. | | | | | icon-label | Enforces accessible usage of icon labels when composed with Atlassian Design System components. | Yes | Yes | | | no-banned-imports | Disallow importing banned modules. | Yes | | | | no-css-tagged-template-expression | Disallows any css tagged template expressions that originate from Emotion, Styled Components or Compiled | | Yes | | | no-custom-icons | Enforces custom glyph icons are used. | | | | | no-dark-theme-vr-tests | Disallow using dark colorScheme in VR tests. | | Yes | | | no-deprecated-apis | Disallow using deprecated APIs. | Yes | | | | no-deprecated-design-token-usage | Disallow using deprecated design tokens. | Yes | Yes | | | no-deprecated-imports | Disallow importing deprecated modules. | Yes | Yes | Yes | | no-direct-use-of-web-platform-drag-and-drop | Disallow using direct use of native drag and drop (please use Pragmatic drag and drop) | Yes | | | | no-empty-styled-expression | Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX elements). | | | | | no-exported-css | Forbid exporting css function calls. Exporting css function calls can result in unexpected behaviour at runtime, and is not statically analysable. | | | | | no-exported-keyframes | Forbid exporting keyframes function calls. Exporting css function calls can result in unexpected behaviour at runtime, and is not statically analysable. | | | | | no-html-anchor | Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components. | Yes | | Yes | | no-html-button | Discourage direct usage of HTML button elements in favor of Atlassian Design System button components. | Yes | | | | no-invalid-css-map | Checks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript's type-checking. | Yes | | | | no-keyframes-tagged-template-expression | Disallows any keyframe tagged template expressions that originate from Emotion, Styled Components or Compiled | | Yes | | | no-legacy-icons | Enforces no legacy icons are used. | | Yes | Yes | | no-margin | Disallow using the margin CSS property. | | | | | no-nested-styles | Disallows use of nested styles in css functions. | Yes | | | | no-physical-properties | Disallow physical properties and values in css function calls. | | Yes | | | no-separator-with-list-elements | Warn when the separator prop is used with as="li", as="ol", or as="dl" in the Inline component. | Yes | | | | no-styled-tagged-template-expression | Disallows any styled tagged template expressions that originate from Emotion, Styled Components or Compiled | | Yes | | | no-unsafe-design-token-usage | Enforces design token usage is statically and locally analyzable. | Yes | Yes | | | no-unsafe-style-overrides | Discourage usage of unsafe style overrides used against the Atlassian Design System. | Yes | | | | no-unsupported-drag-and-drop-libraries | Disallow importing unsupported drag and drop modules. | Yes | | | | prefer-primitives | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the use-primitives rule. | | | | | use-button-group-label | Ensures button groups are described to assistive technology by a direct label or by another element. | Yes | | Yes | | use-datetime-picker-calendar-button | Encourages makers to use calendar button in Atlassian Design System's date picker and datetime picker components. | Yes | Yes | Yes | | use-drawer-label | Encourages to provide accessible name for Atlassian Design System Drawer component. | Yes | | Yes | | use-heading | Encourage the usage of heading components. | | Yes | Yes | | use-heading-level-in-spotlight-card | Inform developers of eventual requirement of headingLevel prop in SpotlightCard component. The heading level should be the appropriate level according to the surrounding context. | Yes | Yes | | | use-href-in-link-item | Inform developers of eventual requirement of href prop in LinkItem component. Elements with a link role require an href attribute for users to properly navigate, particularly those using assistive technologies. If no valid href is required for your use case, consider using a ButtonItem instead. | Yes | Yes | Yes | | use-latest-xcss-syntax | Enforces usage of space design tokens rather than hard-coded values in xcss. | Yes | Yes | | | use-latest-xcss-syntax-typography | Prohibits use of unsafe styling properties in xcss. Please use Text/Heading primitives instead. | Yes | Yes | | | use-menu-section-title | Encourages makers to provide accessible title for Atlassian Design System Menu Section component. | Yes | | Yes | | use-onboarding-spotlight-label | Ensures onboarding spotlight dialogs are described to assistive technology by a direct label or by another element. | Yes | | Yes | | use-popup-label | Encourages to provide accessible name for Atlassian Design System Popup component. | Yes | | Yes | | use-primitives | Encourage the usage of primitives components. | | Yes | Yes | | use-primitives-text | Encourage the usage of text components. | | Yes | Yes | | use-tag-group-label | Ensures tag groups are described to assistive technology by a direct label or by another element. | Yes | | Yes | | use-tokens-space | Enforces usage of space design tokens rather than hard-coded values. | | Yes | Yes | | use-tokens-typography | Enforces usage of design tokens for typography properties rather than hard-coded values. | | Yes | Yes | | use-visually-hidden | Enforce usage of the visually hidden component. | Yes | Yes | |