ESLint plugin
The essential plugin for use with the Atlassian Design System.This plugin contains rules that should be used when working with the Atlassian Design System, (opens new window).
Rules
| Rule | Description | Recommended | Fixable | Suggestions |
|---|---|---|---|---|
| consistent-css-prop-usage | Ensures consistency with css and xcss prop usages | Yes | Yes | |
| enforce-inline-styles-in-select | Disallow unsupported CSS selectors in styles prop for @atlaskit/select and require inline styles only | |||
| ensure-avatar-tag-avatar-props | Ensures AvatarTag avatar prop does not include controlled props (size, borderColor, appearance) which are managed internally. | 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. | |||
| ensure-proper-xcss-usage | Enforces proper xcss usage: migrate from xcss() to cssMap() and use cssMap objects with specific keys. | |||
| expand-motion-shorthand | Expands transition and animation CSS shorthand properties into their individual sub-properties, so individual values can be replaced with motion tokens. | Yes | ||
| icon-label | Enforces accessible usage of icon labels when composed with Atlassian Design System components. | Yes | Yes | |
| lozenge-badge-tag-labelling-system-migration | Helps migrate Lozenge isBold prop, Badge appearance values, and SimpleTag/RemovableTag components as part of the Labelling System Phase 1 migration. | Yes | ||
| no-banned-imports | Disallow importing banned modules. | Yes | ||
| no-css-map-scoped | Disallows usage of the experimental cssMapScoped API from @compiled/react. This API is internal and is not part of the public Compiled CSS-in-JS interface. | Yes | ||
| no-css-tagged-template-expression | Disallows any css tagged template expressions that originate from Emotion, Styled Components or Compiled | Yes | ||
| 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-emotion-primitives | Ensures usage of Compiled Primitives import instead of Emotion entrypoint. | Yes | ||
| no-empty-icon-button-label | Ensures icon-only Atlassian Design System buttons do not have an empty accessible name. | 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-html-checkbox | Discourage direct usage of HTML checkbox elements in favor of the Atlassian Design System checkbox component. | Yes | Yes | |
| no-html-code | Discourage direct usage of HTML code elements in favor of the Atlassian Design System code component. | Yes | Yes | |
| no-html-heading | Discourage direct usage of HTML heading elements in favor of Atlassian Design System heading components. | Yes | Yes | |
| no-html-image | Discourage direct usage of HTML image elements in favor of the Atlassian Design System image component. | Yes | Yes | |
| no-html-radio | Discourage direct usage of HTML radio elements in favor of the Atlassian Design System radio component. | Yes | Yes | |
| no-html-range | Discourage direct usage of HTML range elements in favor of the Atlassian Design System range component. | Yes | Yes | |
| no-html-select | Discourage direct usage of HTML select elements in favor of the Atlassian Design System select component. | Yes | Yes | |
| no-html-text-input | Discourage direct usage of HTML text input elements in favor of the Atlassian Design System textfield component. | Yes | Yes | |
| no-html-textarea | Discourage direct usage of HTML textarea elements in favor of the Atlassian Design System textarea component. | Yes | Yes | |
| no-icon-spacing-prop | Disallows usage of the deprecated spacing prop on new icons. Use Flex with cssMap for spacing instead. | Yes | 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-margin | Disallow using the margin CSS property. | |||
| no-modal-label | Disallows usage of the label prop on Atlassian Design System modal dialog and modal entry-point triggers. | Yes | ||
| no-nested-styles | Disallows use of nested styles in css functions. | Yes | ||
| no-physical-properties | Disallow physical properties and values in css and cssMap function calls. | Yes | ||
| no-placeholder | Placeholders should not be used. If information should be given to the user about the proper type or formatting of a value, this should be included using a helper message that is associated to the input instead. | Yes | ||
| no-readonly-or-disabled-inputs | Inputs should almost always be interactive. Disabled and read-only inputs can usually be replaced by a more user-friendly design pattern. | 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-to-match-snapshot | Disallow using toMatchSnapshot() and toMatchInlineSnapshot() in unit tests. Snapshot assertions should be replaced with explicit assertions. | |||
| no-unsafe-design-token-usage | Enforces design token usage is statically and locally analyzable. | Yes | Yes | |
| no-unsafe-inline-snapshot | Enforce guardrails on toMatchInlineSnapshot usage: snapshots must not exceed 100 lines and must not contain internal implementation details like className or style attributes. | |||
| 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 | ||
| no-unused-css-map | Detects unused styles in cssMap objects to help keep code clean. | Yes | ||
| prefer-primitives | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. | |||
| use-button-group-label | Ensures button groups are described to assistive technology by a direct label or by another element. | Yes | Yes | |
| use-character-counter-field | Suggests using CharacterCounterField or CharacterCounter when Textfield or Textarea components have maxLength or minLength props. | Yes | ||
| use-correct-field | Ensure makers use appropriate field component for their respective form elements. | Yes | Yes | Yes |
| use-cx-function-in-xcss | Enforces cx function use to combine styles in xcss. | Yes | 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-field-message-wrapper | Encourage use of message wrapper component when using form message components. | Yes | Yes | |
| use-heading | Encourage the usage of heading components. | Yes | Yes | Yes |
| use-heading-level-in-section-message | The SectionMessage component in @atlaskit/section-message needs to be the correct level within the document flow. This is not something that can be automated and requires contextual knowledge of what is present in the experience. | 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-modal-dialog-close-button | Encourages makers to use close button in Atlassian Design System's modal dialog component. | Yes | Yes | Yes |
| use-modal-title | Encourages makers to include ModalTitle within ModalHeader when using Atlassian Design System modal dialog. | 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-pressable-motion | Suggests semantic motion tokens when Pressable or native buttons change interactive colours through local static styles. | Yes | ||
| use-primitives-text | Encourage the usage of text components. | Yes | Yes | Yes |
| use-should-render-to-parent | Encourages makers to use the shouldRenderToParent where possible in Atlassian Design System Popup and DropdownMenu components. | Yes | Yes | |
| use-simple-field | Encourage use of simple field for better developer experience and accessibility. | Yes | Yes | |
| use-simple-form | Encourage use of simple form for better developer experience and accessibility. | Yes | Yes | |
| use-spotlight-package | Discourage the use of @atlaskit/onboarding in favor of @atlaskit/spotlight. | 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-textfield-autocomplete | Enforce that Textfield components with type="email", "tel", or "url" have an appropriate autocomplete value for WCAG 2.2 SC 1.3.5 compliance (Identify Input Purpose). | Yes | Yes | |
| use-tokens-motion | Enforces usage of motion design tokens rather than hard-coded duration and easing values. | Yes | ||
| use-tokens-shape | Enforces usage of shape design tokens rather than hard-coded values. | 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 | Yes |
| use-visually-hidden | Enforce usage of the visually hidden component. | Yes | Yes |