@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
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-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).	Yes
no-exported-css	Forbid exporting `css` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.	Yes
no-exported-keyframes	Forbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.	Yes
no-html-anchor	Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components.
no-html-button	Discourage direct usage of HTML button elements in favor of Atlassian Design System button components.
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-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-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-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-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/tokens @babel/runtime @typescript-eslint/utils ajv eslint-codemod-utils esquery estraverse lodash semver

@atlassian-partner-engineering/eslint-config

6 days ago

8 days ago

11 days ago

13 days ago

15 days ago

21 days ago

25 days ago

28 days ago

29 days ago

1 month ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

10 months ago

9 months ago

10 months ago

7 months ago

7 months ago

8 months ago

8 months ago

11 months ago

11 months ago

11 months ago

11 months ago

10 months ago

10 months ago

7 months ago

7 months ago

8 months ago

9 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

8 months ago

7 months ago

8 months ago

9 months ago

11 months ago

11 months ago

10 months ago

11 months ago

12 months ago

11 months ago

12 months ago

12 months ago

12 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

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

1 year ago

1 year ago

1 year ago

2 years ago

2 years 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

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