@atlaskit/eslint-plugin-design-system 10.10.0 → 10.10.2

package/dist/esm/rules/use-visually-hidden/fix-vanilla.js

@@ -3,7 +3,7 @@
 import { getImportedNodeBySource } from '../utils/get-import-node-by-source';
 import { IMPORT_NAME, VISUALLY_HIDDEN_IMPORT, VISUALLY_HIDDEN_SOURCE } from './constants';
 import { getFirstImport } from './utils';
-export default (function (source, node) {
+var fixVanilla = function fixVanilla(source, node) {
   return function (fixer) {
     var fixes = [];
     var importedNode = getFirstImport(source);
@@ -19,4 +19,5 @@ export default (function (source, node) {
     }
     return fixes;
   };
-});
+};
+export default fixVanilla;

package/dist/types/rules/no-legacy-icons/helpers.d.ts

@@ -33,12 +33,6 @@ export declare const getMigrationMapObject: (iconPackage: string) => {
         library: string;
     } | undefined;
 } | null;
-/**
- * Returns the key of a legacy icon
- * @param iconPackage The name of the legacy icon package
- * @returns The unique identifier for the icon (the part after "@atlaskit/icon/glyph")
- */
-export declare const getIconKey: (iconPackage: string) => string;
 /**
  * Checks if a new icon can be auto-migrated based on guidance from the migration map
  */
@@ -46,7 +40,7 @@ export declare const canAutoMigrateNewIconBasedOnSize: (guidance?: string) => bo
 /**
  * Creates the written guidance for migrating a legacy icon to a new icon
  */
-export declare const createGuidance: (iconPackage: string, size?: Size) => string;
+export declare const createGuidance: (iconPackage: string, insideNewButton?: boolean, size?: Size) => string;
 /**
  * Checks if the color can be migrated
  * @param color String representing the color to check
@@ -61,16 +55,12 @@ export declare const findUNSAFEProp: (iconAttr: JSXAttribute, button: JSXOpening
     UNSAFE_propName: "UNSAFE_iconAfter_size" | "UNSAFE_iconBefore_size" | "UNSAFE_size" | null;
 };
 export declare const createCantMigrateUnsafeProp: (node: Node, propName: string, value: string, packageName: string, iconName: string, errors: errorsListManual) => void;
-export declare const createCantFindSuitableReplacementError: (node: Node, importSource: string, iconName: string, errors: errorsListManual) => void;
+export declare const createCantFindSuitableReplacementError: (node: Node, importSource: string, iconName: string, errors: errorsListManual, sizeIssue?: boolean) => void;
 export declare const createCantMigrateFunctionUnknownError: (node: Node, importSource: string, iconName: string, errors: errorsListManual) => void;
 export declare const createCantMigrateColorError: (node: Node, colorValue: string, errors: errorsListManual, importSource: string, iconName: string) => void;
 export declare const createCantMigrateSpreadPropsError: (node: Node, missingProps: string[], errors: errorsListManual, importSource: string, iconName: string) => void;
 export declare const createCantMigrateSizeUnknown: (node: Node, errors: errorsListManual, importSource: string, iconName: string) => void;
-export declare const createAutoMigrationError: (node: Node, importSource: string, iconName: string, newIcon: {
-    name: string;
-    type: string;
-    library: string;
-}, oldIconName: string, errors: errorsListAuto) => void;
+export declare const createAutoMigrationError: (node: Node, importSource: string, iconName: string, errors: errorsListAuto) => void;
 export declare const getLiteralStringValue: (value: any) => string | undefined;
 export declare const createHelpers: (context: Rule.RuleContext) => {
     /**

package/dist/types/rules/use-latest-xcss-syntax/transformers/style-property/supported.d.ts

@@ -1,6 +1,6 @@
-declare const _default: {
+declare const supported: {
     values: {
         ignore: string[];
     };
 };
-export default _default;
+export default supported;

package/dist/types/rules/use-tokens-space/transformers/style-property/supported.d.ts

@@ -1,6 +1,6 @@
-declare const _default: {
+declare const supported: {
     values: {
         ignore: (string | number)[];
     };
 };
-export default _default;
+export default supported;

package/dist/types/rules/use-visually-hidden/fix-jsx.d.ts

@@ -1,3 +1,3 @@
 import type { Rule, SourceCode } from 'eslint';
-declare const _default: (source: SourceCode, node: Rule.Node) => (fixer: Rule.RuleFixer) => Rule.Fix[];
-export default _default;
+declare const fixJsx: (source: SourceCode, node: Rule.Node) => (fixer: Rule.RuleFixer) => Rule.Fix[];
+export default fixJsx;

package/dist/types/rules/use-visually-hidden/fix-vanilla.d.ts

@@ -1,3 +1,3 @@
 import type { Rule, SourceCode } from 'eslint';
-declare const _default: (source: SourceCode, node: Rule.Node) => (fixer: Rule.RuleFixer) => Rule.Fix[];
-export default _default;
+declare const fixVanilla: (source: SourceCode, node: Rule.Node) => (fixer: Rule.RuleFixer) => Rule.Fix[];
+export default fixVanilla;

package/dist/types-ts4.5/rules/no-legacy-icons/helpers.d.ts

@@ -33,12 +33,6 @@ export declare const getMigrationMapObject: (iconPackage: string) => {
         library: string;
     } | undefined;
 } | null;
-/**
- * Returns the key of a legacy icon
- * @param iconPackage The name of the legacy icon package
- * @returns The unique identifier for the icon (the part after "@atlaskit/icon/glyph")
- */
-export declare const getIconKey: (iconPackage: string) => string;
 /**
  * Checks if a new icon can be auto-migrated based on guidance from the migration map
  */
@@ -46,7 +40,7 @@ export declare const canAutoMigrateNewIconBasedOnSize: (guidance?: string) => bo
 /**
  * Creates the written guidance for migrating a legacy icon to a new icon
  */
-export declare const createGuidance: (iconPackage: string, size?: Size) => string;
+export declare const createGuidance: (iconPackage: string, insideNewButton?: boolean, size?: Size) => string;
 /**
  * Checks if the color can be migrated
  * @param color String representing the color to check
@@ -61,16 +55,12 @@ export declare const findUNSAFEProp: (iconAttr: JSXAttribute, button: JSXOpening
     UNSAFE_propName: "UNSAFE_iconAfter_size" | "UNSAFE_iconBefore_size" | "UNSAFE_size" | null;
 };
 export declare const createCantMigrateUnsafeProp: (node: Node, propName: string, value: string, packageName: string, iconName: string, errors: errorsListManual) => void;
-export declare const createCantFindSuitableReplacementError: (node: Node, importSource: string, iconName: string, errors: errorsListManual) => void;
+export declare const createCantFindSuitableReplacementError: (node: Node, importSource: string, iconName: string, errors: errorsListManual, sizeIssue?: boolean) => void;
 export declare const createCantMigrateFunctionUnknownError: (node: Node, importSource: string, iconName: string, errors: errorsListManual) => void;
 export declare const createCantMigrateColorError: (node: Node, colorValue: string, errors: errorsListManual, importSource: string, iconName: string) => void;
 export declare const createCantMigrateSpreadPropsError: (node: Node, missingProps: string[], errors: errorsListManual, importSource: string, iconName: string) => void;
 export declare const createCantMigrateSizeUnknown: (node: Node, errors: errorsListManual, importSource: string, iconName: string) => void;
-export declare const createAutoMigrationError: (node: Node, importSource: string, iconName: string, newIcon: {
-    name: string;
-    type: string;
-    library: string;
-}, oldIconName: string, errors: errorsListAuto) => void;
+export declare const createAutoMigrationError: (node: Node, importSource: string, iconName: string, errors: errorsListAuto) => void;
 export declare const getLiteralStringValue: (value: any) => string | undefined;
 export declare const createHelpers: (context: Rule.RuleContext) => {
     /**

package/dist/types-ts4.5/rules/use-latest-xcss-syntax/transformers/style-property/supported.d.ts

@@ -1,6 +1,6 @@
-declare const _default: {
+declare const supported: {
     values: {
         ignore: string[];
     };
 };
-export default _default;
+export default supported;

package/dist/types-ts4.5/rules/use-tokens-space/transformers/style-property/supported.d.ts

@@ -1,6 +1,6 @@
-declare const _default: {
+declare const supported: {
     values: {
         ignore: (string | number)[];
     };
 };
-export default _default;
+export default supported;

package/dist/types-ts4.5/rules/use-visually-hidden/fix-jsx.d.ts

@@ -1,3 +1,3 @@
 import type { Rule, SourceCode } from 'eslint';
-declare const _default: (source: SourceCode, node: Rule.Node) => (fixer: Rule.RuleFixer) => Rule.Fix[];
-export default _default;
+declare const fixJsx: (source: SourceCode, node: Rule.Node) => (fixer: Rule.RuleFixer) => Rule.Fix[];
+export default fixJsx;

package/dist/types-ts4.5/rules/use-visually-hidden/fix-vanilla.d.ts

@@ -1,3 +1,3 @@
 import type { Rule, SourceCode } from 'eslint';
-declare const _default: (source: SourceCode, node: Rule.Node) => (fixer: Rule.RuleFixer) => Rule.Fix[];
-export default _default;
+declare const fixVanilla: (source: SourceCode, node: Rule.Node) => (fixer: Rule.RuleFixer) => Rule.Fix[];
+export default fixVanilla;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
 	"description": "The essential plugin for use with the Atlassian Design System.",
-	"version": "10.10.0",
+	"version": "10.10.2",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
 	"publishConfig": {
@@ -67,7 +67,7 @@
 		"jscodeshift": "^0.13.0",
 		"outdent": "^0.5.0",
 		"react": "^16.8.0",
-		"ts-jest": "26.5.6",
+		"ts-jest": "^29.2.2",
 		"ts-node": "^10.9.1",
 		"tsconfig-paths": "^4.2.0",
 		"typescript": "~5.4.2"

package/constellation/consistent-css-prop-usage/usage.mdx

@@ -1,210 +0,0 @@
-# consistent-css-prop-usage
-
-Ensures consistency with css prop usage.
-
-## Rationale
-
-Every product should be defining styles in the same way, using the same tools, enforced by the same
-linting rules, which we can then all evolve and scale together.
-
-## How the rule works
-
-This rule checks for the following cases:
-
-- Styles should not be defined inline; it should instead be in a standalone variable.
-  - The exception for this is style composition (e.g. `<div css={[baseStyles, moreStyles]} />`),
-    which is a way to combine styles from two variables.
-- Styles must be wrapped in a `css` function call.
-- Styles must be defined in the same file as their usage, and not be imported.
-- Styles should not contain spread operators (e.g. `css({ ...spreadStyles })`).
-- Styles must all be defined at the top of the file, or at the bottom of the file.
-
-This rule also has an autofixer that enforces and fixes the code (where practical) to meet the above
-requirements.
-
-All the above can also work for custom `css` functions, such as `xcss`
-(https://atlassian.design/components/primitives/xcss/).
-
-This rule has several options - see below.
-
-## Examples
-
-### Incorrect
-
-**Calling a css/xcss function or direct objects inside the JSX attribute.**
-
-```js
-function Button({ children }) {
-  return <div css={css({...})}>{children}</div>;
-                   ^^^^^^^ css function call used inline (performance issue)
-}
-```
-
-**Inserting a non css-function based object identifier into a css JSX attribute.**
-
-```js
-const container = {
-      ^^^^^^^^^ should be a css function call
-  zIndex: 10,
-};
-
-function Button({ children }) {
-  return <button css={container}>{children}</button>;
-}
-```
-
-**Importing styles from another file.**
-
-```js
-import { container } from './styles';
-         ^^^^^^^^^ styles should be local, not shared
-
-function Button({ children }) {
-  return <button css={container}>{children}</button>;
-}
-```
-
-**Nesting styles with objects instead of arrays.**
-
-```js
-const baseContainerStyles = css({
-  zIndex: 5,
-});
-
-const containerStyles = css({
-  ...baseContainerStyles,
-  ^^^^^^^^^^^^^^^^^^^^^^ compose styles by providing an array to the css call instead (see example below)
-  zIndex: 7,
-});
-
-function Button({ children }) {
-  return <button css={containerStyles}>{children}</button>;
-}
-```
-
-### Correct
-
-**Using the css() function to create a style object and passing it as a variable into the css={...}
-JSX attribute.**
-
-With the following options turned on:
-
-- cssFunctions = ['css']
-- stylesPlacement = 'top'
-
-```js
-const containerStyles = css({
-	zIndex: 1,
-});
-
-function Button({ children }) {
-	return <button css={containerStyles}>{children}</button>;
-}
-```
-
-**Technically correct usage of the cssMap function.**
-
-With the following options turned on:
-
-- cssFunctions = ['css']
-- stylesPlacement = 'top'
-
-```js
-const borderStyles = cssMap({
-  'solid': '1px solid';
-  'none': '0px';
-})
-
-function Button({ children }) {
-  return <button css={borderStyles[solid]}>{children}</button>;
-}
-```
-
-**Create composite styles with arrays, not objects.**
-
-With the following options turned on:
-
-- cssFunctions = ['css']
-- stylesPlacement = 'bottom'
-
-```js
-function Button({ children }) {
-	return <button css={[baseContainerStyles, containerStyles]}>{children}</button>;
-}
-
-const baseContainerStyles = css({
-	zIndex: 5,
-});
-
-const containerStyles = css({
-	zIndex: 7,
-});
-```
-
-**Ternaries can be used inline**
-
-```js
-const baseStyles = css({ color: token('color.text.primary') });
-const disabledStyles = css({ color: token('color.text.disabled') });
-
-<div css={props.disabled ? disabledStyles : baseStyles}></div>;
-```
-
-## Options
-
-This rule comes with options to support different repository configurations.
-
-### cssFunctions
-
-An array of function names the linting rule should target. Defaults to `['css', 'xcss']`. The
-functionality of `cssMap` will be linted regardless of the configuration of `cssFunctions`, as it
-can be used with either attribute.
-
-### stylesPlacement
-
-Either `top` or `bottom`.
-
-The rule prevents inline styles from being created. This option defines what the error message
-should say: "(...) styles at the top (...)" or "(...) styles at the bottom (...)". Defaults to
-`top`.
-
-### cssImportSource
-
-When auto-fixing the contents of the `css` attribute, this rule will wrap CSS styles in a `css(...)`
-function call or ``css`...` `` template expression, and it will add an import declaration for the
-`css` function. `cssImportSource` is a string that determines what package `css` should be imported
-from.
-
-This is `@compiled/react` by default.
-
-### xcssImportSource
-
-When auto-fixing the contents of the `xcss` attribute, this rule will wrap XCSS styles in a
-`xcss(...)` function call, and it will add an import declaration for the `xcss` function.
-`xcssImportSource` is a string that determines what package `xcss` should be imported from.
-
-This is `@atlaskit/primitives` by default.
-
-### excludeReactComponents
-
-Whether to exclude `css` attributes of React components from being affected by this ESLint rule. We
-assume that an element is a React component if its name starts with a capital letter, e.g.
-`<Button />`.
-
-This is `false` by default.
-
-### shouldAlwaysCheckXcss
-
-Overrides `excludeReactComponents` specifically for the `xcss` prop.
-
-This means that even if `excludeReactComponents` is `true`, you can still lint the `xcss` prop by
-setting `shouldAlwaysCheckXcss` to `true`.
-
-This is `false` by default.
-
-### autoFix
-
-When set to `true`, this rule will turn on the autofixer. Set this to `false` if you do not want the
-autofixers to run.
-
-This is `true` by default.

package/constellation/ensure-design-token-usage/usage.mdx

@@ -1,77 +0,0 @@
-# ensure-design-token-usage
-
-Using design tokens results in a harmonious experience for end users whilst providing theming and
-consistency. All experiences must use color tokens otherwise when switching between themes,
-unexpected incidents can occur where not all of the UI is themed. Space, and shape tokens are
-strongly recommended to further align our experiences and make future changes easier.
-
-## Examples
-
-Using anything other than design tokens such as hardcoded values or legacy theme colors will be
-considered violations.
-
-### Incorrect
-
-```js
-import { e100 } from '@atlaskit/theme/elevation';
-import { B100 } from '@atlaskit/theme/colors';
-
-css({ color: 'red' });
-              ^^^
-css({ boxShadow: '0px 1px 1px #161A1D32' });
-                              ^^^^^^^^^
-css`${e100};`;
-      ^^^^
-css({ color: B100 });
-             ^^^^
-```
-
-### Correct
-
-```js
-import { token } from '@atlaskit/tokens';
-
-css({ color: token('color.text.danger') });
-
-css({ boxShadow: token('elevation.shadow.card') });
-```
-
-### Incorrect
-
-```js
-css({ padding: '16px' });
-                ^^^
-css({ margin: gridSize() });
-              ^^^^^^^^^^
-```
-
-### Correct
-
-```js
-import { token } from '@atlaskit/tokens';
-
-css({ padding: token('space.100') });
-```
-
-## Options
-
-This rule comes with options to aid in migrating to design tokens.
-
-### domains
-
-An array specifiying which token domains to lint against (`color`, `spacing`, `shape`). Defaults to
-[`'color'`] if not provided.
-
-### applyImport
-
-When `true`, the rule when automatically add imports to the `@atlaskit/tokens` package where tokens
-are auto-fixed. Defaults to `true` if not provided.
-
-### shouldEnforceFallbacks
-
-When `true` the rule will add in stub fallbacks when choosing a suggestion in your IDE. Defaults to
-`false` if not provided.
-
-### exceptions
-
-An array specifying strings to ingore when linting.

package/constellation/ensure-design-token-usage-preview/usage.mdx

@@ -1,6 +0,0 @@
-# ensure-design-token-usage/preview
-
-This rule is a clone of `ensure-design-token-usage` and is intended to allow you to set some domains
-to `warn` before they are set to `error` in the main rule.
-
-See `ensure-design-token-usage` for full usage documentation.

package/constellation/icon-label/usage.mdx

@@ -1,41 +0,0 @@
-# icon-label
-
-Icon labels are used to describe what the icon is so the visually impaired can be described what the
-UI element is. There are cases where icons should have labels as well as cases where they shouldn't
-be labelled.
-
-## Examples
-
-This rule will find violations for when an icon label is or isn't needed when composed with other
-Design System components.
-
-### Incorrect
-
-```js
-import ActivityIcon from '@atlaskit/icon/glyph/activity'
-
-<ActivityIcon>
-^^^^^^^^^^^^^^ missing `label` prop
-
-<Button iconLeft={<ActivityIcon label="">} />
-                                ^^^^^ label should be defined
-
-<ButtonItem iconBefore={<ActivityIcon label="">}>
-                                      ^^^^^ label should not be defined
-  My activity
-</ButtonItem>
-```
-
-### Correct
-
-```js
-import ActivityIcon from '@atlaskit/icon/glyph/activity'
-
-<ActivityIcon label="Activity">
-
-<Button iconLeft={<ActivityIcon label="Activity">} />
-
-<ButtonItem iconBefore={<ActivityIcon label="">}>
-  My activity
-</ButtonItem>
-```

package/constellation/index/props.mdx

@@ -1,30 +0,0 @@
-Use the recommended config to get reasonable defaults recommended by the Atlassian Design System:
-
-```diff
-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.
-
-```diff
-module.exports = {
-  plugins: [
-+    '@atlaskit/design-system',
-  ],
-};
-```
-
-Enable the rules that you would like to use.
-
-```diff
-module.exports = {
-  rules: [
-+    '@atlaskit/design-system/no-deprecated-apis': 'error',
-  ],
-};
-```

package/constellation/index/usage.mdx

@@ -1,57 +0,0 @@
----
-order: 0
----
-
-This plugin contains rules that should be used when working with the
-[Atlassian Design System](https://atlassian.design).
-
-## Rules
-
-<!-- START_RULE_TABLE_CODEGEN -->
-<!-- @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen -->
-
-| Rule                                                                                                                                                | Description                                                                                                                                                                                                                                                                                                         | Recommended | Fixable | Suggestions |
-| --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |
-| <a href="/components/eslint-plugin-design-system/consistent-css-prop-usage/usage">consistent-css-prop-usage</a>                                     | Ensures consistency with `css` and `xcss` prop usages                                                                                                                                                                                                                                                               | Yes         | Yes     |             |
-| <a href="/components/eslint-plugin-design-system/ensure-design-token-usage/usage">ensure-design-token-usage</a>                                     | Enforces usage of design tokens rather than hard-coded values.                                                                                                                                                                                                                                                      | Yes         | Yes     | Yes         |
-| <a href="/components/eslint-plugin-design-system/ensure-design-token-usage-preview/usage">ensure-design-token-usage/preview</a>                     | Enforces usage of pre-release design tokens rather than hard-coded values.                                                                                                                                                                                                                                          |             | Yes     | Yes         |
-| <a href="/components/eslint-plugin-design-system/icon-label/usage">icon-label</a>                                                                   | Enforces accessible usage of icon labels when composed with Atlassian Design System components.                                                                                                                                                                                                                     | Yes         | Yes     |             |
-| <a href="/components/eslint-plugin-design-system/no-banned-imports/usage">no-banned-imports</a>                                                     | Disallow importing banned modules.                                                                                                                                                                                                                                                                                  | Yes         |         |             |
-| <a href="/components/eslint-plugin-design-system/no-css-tagged-template-expression/usage">no-css-tagged-template-expression</a>                     | Disallows any `css` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                          |             | Yes     |             |
-| <a href="/components/eslint-plugin-design-system/no-custom-icons/usage">no-custom-icons</a>                                                         | Enforces custom glyph icons are used.                                                                                                                                                                                                                                                                               |             |         |             |
-| <a href="/components/eslint-plugin-design-system/no-deprecated-apis/usage">no-deprecated-apis</a>                                                   | Disallow using deprecated APIs.                                                                                                                                                                                                                                                                                     | Yes         |         |             |
-| <a href="/components/eslint-plugin-design-system/no-deprecated-design-token-usage/usage">no-deprecated-design-token-usage</a>                       | Disallow using deprecated design tokens.                                                                                                                                                                                                                                                                            | Yes         | Yes     |             |
-| <a href="/components/eslint-plugin-design-system/no-deprecated-imports/usage">no-deprecated-imports</a>                                             | Disallow importing deprecated modules.                                                                                                                                                                                                                                                                              | Yes         |         |             |
-| <a href="/components/eslint-plugin-design-system/no-direct-use-of-web-platform-drag-and-drop/usage">no-direct-use-of-web-platform-drag-and-drop</a> | Disallow using direct use of native drag and drop (please use Pragmatic drag and drop)                                                                                                                                                                                                                              | Yes         |         |             |
-| <a href="/components/eslint-plugin-design-system/no-empty-styled-expression/usage">no-empty-styled-expression</a>                                   | Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX elements).                                                                                                                                                                                                      | Yes         |         |             |
-| <a href="/components/eslint-plugin-design-system/no-exported-css/usage">no-exported-css</a>                                                         | Forbid exporting `css` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.                                                                                                                                                              | Yes         |         |             |
-| <a href="/components/eslint-plugin-design-system/no-exported-keyframes/usage">no-exported-keyframes</a>                                             | Forbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.                                                                                                                                                        | Yes         |         |             |
-| <a href="/components/eslint-plugin-design-system/no-html-anchor/usage">no-html-anchor</a>                                                           | Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components.                                                                                                                                                                                                                |             |         |             |
-| <a href="/components/eslint-plugin-design-system/no-html-button/usage">no-html-button</a>                                                           | Discourage direct usage of HTML button elements in favor of Atlassian Design System button components.                                                                                                                                                                                                              | Yes         |         |             |
-| <a href="/components/eslint-plugin-design-system/no-invalid-css-map/usage">no-invalid-css-map</a>                                                   | Checks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript's type-checking.                                                                                                                                                                                          | Yes         |         |             |
-| <a href="/components/eslint-plugin-design-system/no-keyframes-tagged-template-expression/usage">no-keyframes-tagged-template-expression</a>         | Disallows any `keyframe` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                     |             | Yes     |             |
-| <a href="/components/eslint-plugin-design-system/no-legacy-icons/usage">no-legacy-icons</a>                                                         | Enforces no legacy icons are used.                                                                                                                                                                                                                                                                                  |             |         |             |
-| <a href="/components/eslint-plugin-design-system/no-margin/usage">no-margin</a>                                                                     | Disallow using the margin CSS property.                                                                                                                                                                                                                                                                             |             |         |             |
-| <a href="/components/eslint-plugin-design-system/no-nested-styles/usage">no-nested-styles</a>                                                       | Disallows use of nested styles in `css` functions.                                                                                                                                                                                                                                                                  | Yes         |         |             |
-| <a href="/components/eslint-plugin-design-system/no-physical-properties/usage">no-physical-properties</a>                                           | Disallow physical properties and values in `css` function calls.                                                                                                                                                                                                                                                    |             | Yes     |             |
-| <a href="/components/eslint-plugin-design-system/no-styled-tagged-template-expression/usage">no-styled-tagged-template-expression</a>               | Disallows any `styled` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                       |             | Yes     |             |
-| <a href="/components/eslint-plugin-design-system/no-unsafe-design-token-usage/usage">no-unsafe-design-token-usage</a>                               | Enforces design token usage is statically and locally analyzable.                                                                                                                                                                                                                                                   | Yes         | Yes     |             |
-| <a href="/components/eslint-plugin-design-system/no-unsafe-style-overrides/usage">no-unsafe-style-overrides</a>                                     | Discourage usage of unsafe style overrides used against the Atlassian Design System.                                                                                                                                                                                                                                | Yes         |         |             |
-| <a href="/components/eslint-plugin-design-system/no-unsupported-drag-and-drop-libraries/usage">no-unsupported-drag-and-drop-libraries</a>           | Disallow importing unsupported drag and drop modules.                                                                                                                                                                                                                                                               | Yes         |         |             |
-| <a href="/components/eslint-plugin-design-system/prefer-primitives/usage">prefer-primitives</a>                                                     | 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.                                                                                                                                    |             |         |             |
-| <a href="/components/eslint-plugin-design-system/use-button-group-label/usage">use-button-group-label</a>                                           | Ensures button groups are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                                | Yes         |         | Yes         |
-| <a href="/components/eslint-plugin-design-system/use-drawer-label/usage">use-drawer-label</a>                                                       | Encourages to provide accessible name for Atlassian Design System Drawer component.                                                                                                                                                                                                                                 | Yes         |         | Yes         |
-| <a href="/components/eslint-plugin-design-system/use-heading/usage">use-heading</a>                                                                 | Encourage the usage of heading components.                                                                                                                                                                                                                                                                          |             | Yes     | Yes         |
-| <a href="/components/eslint-plugin-design-system/use-heading-level-in-spotlight-card/usage">use-heading-level-in-spotlight-card</a>                 | 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     |             |
-| <a href="/components/eslint-plugin-design-system/use-href-in-link-item/usage">use-href-in-link-item</a>                                             | 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         |
-| <a href="/components/eslint-plugin-design-system/use-latest-xcss-syntax/usage">use-latest-xcss-syntax</a>                                           | Enforces usage of space design tokens rather than hard-coded values in xcss.                                                                                                                                                                                                                                        | Yes         | Yes     |             |
-| <a href="/components/eslint-plugin-design-system/use-latest-xcss-syntax-typography/usage">use-latest-xcss-syntax-typography</a>                     | Prohibits use of unsafe styling properties in xcss. Please use Text/Heading primitives instead.                                                                                                                                                                                                                     | Yes         | Yes     |             |
-| <a href="/components/eslint-plugin-design-system/use-menu-section-title/usage">use-menu-section-title</a>                                           | Encourages makers to provide accessible title for Atlassian Design System Menu Section component.                                                                                                                                                                                                                   | Yes         |         | Yes         |
-| <a href="/components/eslint-plugin-design-system/use-popup-label/usage">use-popup-label</a>                                                         | Encourages to provide accessible name for Atlassian Design System Popup component.                                                                                                                                                                                                                                  | Yes         |         | Yes         |
-| <a href="/components/eslint-plugin-design-system/use-primitives/usage">use-primitives</a>                                                           | Encourage the usage of primitives components.                                                                                                                                                                                                                                                                       |             | Yes     | Yes         |
-| <a href="/components/eslint-plugin-design-system/use-primitives-text/usage">use-primitives-text</a>                                                 | Encourage the usage of text components.                                                                                                                                                                                                                                                                             |             | Yes     | Yes         |
-| <a href="/components/eslint-plugin-design-system/use-tokens-space/usage">use-tokens-space</a>                                                       | Enforces usage of space design tokens rather than hard-coded values.                                                                                                                                                                                                                                                |             | Yes     | Yes         |
-| <a href="/components/eslint-plugin-design-system/use-tokens-typography/usage">use-tokens-typography</a>                                             | Enforces usage of design tokens for typography properties rather than hard-coded values.                                                                                                                                                                                                                            |             | Yes     | Yes         |
-| <a href="/components/eslint-plugin-design-system/use-visually-hidden/usage">use-visually-hidden</a>                                                 | Enforce usage of the visually hidden component.                                                                                                                                                                                                                                                                     | Yes         | Yes     |             |
-
-<!-- END_RULE_TABLE_CODEGEN -->