@atlaskit/eslint-plugin-design-system NPM

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 .eslintrc.js 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
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-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-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

@atlaskit/eslint-utils @atlaskit/icon @atlaskit/tokens @babel/runtime @typescript-eslint/utils ajv eslint-codemod-utils esquery estraverse lodash semver

@atlaskit/eslint-plugin-ui-styling-standard @atlassian-partner-engineering/eslint-config

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

9 months ago

10 months ago

10 months ago

10 months ago

1 year ago

1 year ago

12 months ago

11 months ago

1 year ago

1 year ago

1 year ago

10 months ago

11 months ago

12 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

11 months ago

11 months ago

11 months ago

1 year ago

1 year ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

11 months ago

1 year ago

1 year ago

10 months ago

1 year ago

11 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago