@atlaskit/eslint-plugin-design-system 10.4.2 → 10.4.4

package/README.md

@@ -63,7 +63,7 @@ module.exports = {
 | <a href="./src/rules/no-exported-css/README.md">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="./src/rules/no-exported-keyframes/README.md">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="./src/rules/no-html-anchor/README.md">no-html-anchor</a>                                                           | Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components.                                                                                                                                                                                                                |             |         |             |
-| <a href="./src/rules/no-html-button/README.md">no-html-button</a>                                                           | Discourage direct usage of HTML button elements in favor of Atlassian Design System button components.                                                                                                                                                                                                              |             |         |             |
+| <a href="./src/rules/no-html-button/README.md">no-html-button</a>                                                           | Discourage direct usage of HTML button elements in favor of Atlassian Design System button components.                                                                                                                                                                                                              | Yes         |         |             |
 | <a href="./src/rules/no-invalid-css-map/README.md">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="./src/rules/no-keyframes-tagged-template-expression/README.md">no-keyframes-tagged-template-expression</a>         | Disallows any `keyframe` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                     |             | Yes     |             |
 | <a href="./src/rules/no-margin/README.md">no-margin</a>                                                                     | Disallow using the margin CSS property.                                                                                                                                                                                                                                                                             |             |         |             |

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

@@ -11,13 +11,13 @@ linting rules, which we can then all evolve and scale together.
 
 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.
+- 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.
@@ -89,16 +89,16 @@ JSX attribute.**
 
 With the following options turned on:
 
--   cssFunctions = ['css']
--   stylesPlacement = 'top'
+- cssFunctions = ['css']
+- stylesPlacement = 'top'
 
 ```js
 const containerStyles = css({
-    zIndex: 1,
+	zIndex: 1,
 });
 
 function Button({ children }) {
-    return <button css={containerStyles}>{children}</button>;
+	return <button css={containerStyles}>{children}</button>;
 }
 ```
 
@@ -106,8 +106,8 @@ function Button({ children }) {
 
 With the following options turned on:
 
--   cssFunctions = ['css']
--   stylesPlacement = 'top'
+- cssFunctions = ['css']
+- stylesPlacement = 'top'
 
 ```js
 const borderStyles = cssMap({
@@ -124,20 +124,20 @@ function Button({ children }) {
 
 With the following options turned on:
 
--   cssFunctions = ['css']
--   stylesPlacement = 'bottom'
+- cssFunctions = ['css']
+- stylesPlacement = 'bottom'
 
 ```js
 function Button({ children }) {
-    return <button css={[baseContainerStyles, containerStyles]}>{children}</button>;
+	return <button css={[baseContainerStyles, containerStyles]}>{children}</button>;
 }
 
 const baseContainerStyles = css({
-    zIndex: 5,
+	zIndex: 5,
 });
 
 const containerStyles = css({
-    zIndex: 7,
+	zIndex: 7,
 });
 ```
 

package/constellation/index/usage.mdx

@@ -26,7 +26,7 @@ This plugin contains rules that should be used when working with the
 | <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.                                                                                                                                                                                                              |             |         |             |
+| <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-margin/usage">no-margin</a>                                                                     | Disallow using the margin CSS property.                                                                                                                                                                                                                                                                             |             |         |             |

package/constellation/no-css-tagged-template-expression/usage.mdx

@@ -18,12 +18,12 @@ from which this was ported.
 import { css } from '@emotion/react';
 
 css`
-    color: blue;
+	color: blue;
 `;
 
 const styles = css`
-    color: blue;
-    font-weight: 500;
+	color: blue;
+	font-weight: 500;
 `;
 ```
 
@@ -35,8 +35,8 @@ import { css } from '@emotion/react';
 css({ color: 'blue' });
 
 const styles = css({
-    color: 'blue',
-    fontWeight: 500,
+	color: 'blue',
+	fontWeight: 500,
 });
 ```
 
@@ -46,13 +46,13 @@ const styles = css({
 
 By default, this rule will check `css` usages from:
 
--   `@atlaskit/css`
--   `@atlaskit/primitives`
--   `@compiled/react`
--   `@emotion/react`
--   `@emotion/core`
--   `@emotion/styled`
--   `styled-components`
+- `@atlaskit/css`
+- `@atlaskit/primitives`
+- `@compiled/react`
+- `@emotion/react`
+- `@emotion/core`
+- `@emotion/styled`
+- `styled-components`
 
 To change this list of libraries, you can define a custom set of `importSources`, which accepts an
 array of package names (strings).
@@ -68,4 +68,4 @@ export const styles = css``;
 
 ## Limitations
 
--   Comments are not auto-fixable. You will need to manually convert usages containing functions.
+- Comments are not auto-fixable. You will need to manually convert usages containing functions.

package/constellation/no-deprecated-apis/usage.mdx

@@ -27,21 +27,21 @@ config. If provided the rule will use the passed in config instead.
 
 The following fields can be defined in the config:
 
--   `deprecatedProp`, which is the deprecated props. Each prop has the following fields:
-    -   `moduleSpecifier`, which is the module specifier of the package in which the prop was
-        deprecated. For example: `@atlaskit/button`.
-    -   `namedSpecifier` **(optional)**, which is an array of named specifiers of the package in
-        which the prop was deprecated. For example: `Button`.
-    -   `actionableVersion` **(optional)**, which is the version of the package in which the prop
-        can be actioned on. For example: `1.0.0`.
+- `deprecatedProp`, which is the deprecated props. Each prop has the following fields:
+  - `moduleSpecifier`, which is the module specifier of the package in which the prop was
+    deprecated. For example: `@atlaskit/button`.
+  - `namedSpecifier` **(optional)**, which is an array of named specifiers of the package in which
+    the prop was deprecated. For example: `Button`.
+  - `actionableVersion` **(optional)**, which is the version of the package in which the prop can be
+    actioned on. For example: `1.0.0`.
 
 ```json
 {
-    "cssFn": [
-        {
-            "moduleSpecifier": "@atlaskit/menu"
-        }
-    ]
+	"cssFn": [
+		{
+			"moduleSpecifier": "@atlaskit/menu"
+		}
+	]
 }
 ```
 
@@ -49,20 +49,20 @@ The following fields can be defined in the config:
 import { configs } from '@atlaskit/eslint-plugin-design-system';
 
 module.exports = {
-    rules: {
-        '@atlaskit/design-system/no-deprecated-api': [
-            'error',
-            {
-                deprecatedConfig: {
-                    cssFn: [
-                        {
-                            moduleSpecifier: '@atlaskit/menu',
-                        },
-                    ],
-                },
-            },
-        ],
-    },
+	rules: {
+		'@atlaskit/design-system/no-deprecated-api': [
+			'error',
+			{
+				deprecatedConfig: {
+					cssFn: [
+						{
+							moduleSpecifier: '@atlaskit/menu',
+						},
+					],
+				},
+			},
+		],
+	},
 };
 ```
 

package/constellation/no-deprecated-imports/usage.mdx

@@ -25,23 +25,23 @@ config. If provided the rule will use the passed in config instead.
 
 The following fields can be defined in the config:
 
--   `packagePath`, which is the name of the package. For example: `@atlaskit/navigation-next` and
-    `@atlaskit/navigation`. With the package path as the key, you can either provide the values as:
-    -   `message` **(optional)**, the message to display when the deprecated packages path is used.
-        For example: `multi-select is deprecated. Please use '@atlaskit/select' instead.` Or as:
-    -   `imports`, which is an array of named imports to be deprecated. Each named import has the
-        following fields:
-        -   `importName`, which is the name of the import to be deprecated. For example: `assistive`
-            and `visuallyHidden`.
-        -   `message` **(optional)**, which is the message to display when the deprecated import is
-            used. For example:
-            `The assistive mixin is deprecated. Please use `@atlaskit/visually-hidden` instead.`.
+- `packagePath`, which is the name of the package. For example: `@atlaskit/navigation-next` and
+  `@atlaskit/navigation`. With the package path as the key, you can either provide the values as:
+  - `message` **(optional)**, the message to display when the deprecated packages path is used. For
+    example: `multi-select is deprecated. Please use '@atlaskit/select' instead.` Or as:
+  - `imports`, which is an array of named imports to be deprecated. Each named import has the
+    following fields:
+    - `importName`, which is the name of the import to be deprecated. For example: `assistive` and
+      `visuallyHidden`.
+    - `message` **(optional)**, which is the message to display when the deprecated import is used.
+      For example:
+      `The assistive mixin is deprecated. Please use `@atlaskit/visually-hidden` instead.`.
 
 ```json
 {
-    "@atlaskit/navigation-next": {
-        "message": "navigation-next is deprecated. Please use '@atlaskit/atlassian-navigation' instead."
-    }
+	"@atlaskit/navigation-next": {
+		"message": "navigation-next is deprecated. Please use '@atlaskit/atlassian-navigation' instead."
+	}
 }
 ```
 
@@ -49,18 +49,18 @@ The following fields can be defined in the config:
 import packageJson from './package.json';
 
 module.exports = {
-    rules: {
-        '@atlaskit/design-system/no-deprecated-imports': [
-            'error',
-            {
-                deprecatedConfig: {
-                    '@atlaskit/navigation-next': {
-                        message:
-                            "navigation-next is deprecated. Please use '@atlaskit/atlassian-navigation' instead.",
-                    },
-                },
-            },
-        ],
-    },
+	rules: {
+		'@atlaskit/design-system/no-deprecated-imports': [
+			'error',
+			{
+				deprecatedConfig: {
+					'@atlaskit/navigation-next': {
+						message:
+							"navigation-next is deprecated. Please use '@atlaskit/atlassian-navigation' instead.",
+					},
+				},
+			},
+		],
+	},
 };
 ```

package/constellation/no-direct-use-of-web-platform-drag-and-drop/usage.mdx

@@ -130,11 +130,11 @@ Leveraging Pragmatic drag and drop for web platform drag and drop.
 import { monitor } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 
 monitor({
-    onGenerateDragPreview: fn,
-    onDragStart: fn,
-    onDropTargetChange: fn,
-    onDrag: fn,
-    onDrop: fn,
+	onGenerateDragPreview: fn,
+	onDragStart: fn,
+	onDropTargetChange: fn,
+	onDrag: fn,
+	onDrop: fn,
 });
 ```
 

package/constellation/no-empty-styled-expression/usage.mdx

@@ -24,10 +24,10 @@ const EmptyStyledExpressionArgument = styled.div([]);
 
 ```tsx
 const Wrapper = styled.div({
-    backgroundColor: 'red',
-    MyComponent: {
-        backgroundColor: 'green',
-    },
+	backgroundColor: 'red',
+	MyComponent: {
+		backgroundColor: 'green',
+	},
 });
 ```
 
@@ -61,13 +61,13 @@ const Wrapper = styled.div({
 
 By default, this rule will check `styled` usages from:
 
--   `@atlaskit/css`
--   `@atlaskit/primitives`
--   `@compiled/react`
--   `@emotion/react`
--   `@emotion/core`
--   `@emotion/styled`
--   `styled-components`
+- `@atlaskit/css`
+- `@atlaskit/primitives`
+- `@compiled/react`
+- `@emotion/react`
+- `@emotion/core`
+- `@emotion/styled`
+- `styled-components`
 
 To change this list of libraries, you can define a custom set of `importSources`, which accepts an
 array of package names (strings).

package/constellation/no-exported-css/usage.mdx

@@ -34,13 +34,13 @@ const styles = css({});
 
 By default, this rule will check `css` usages from:
 
--   `@atlaskit/css`
--   `@atlaskit/primitives`
--   `@compiled/react`
--   `@emotion/react`
--   `@emotion/core`
--   `@emotion/styled`
--   `styled-components`
+- `@atlaskit/css`
+- `@atlaskit/primitives`
+- `@compiled/react`
+- `@emotion/react`
+- `@emotion/core`
+- `@emotion/styled`
+- `styled-components`
 
 To change this list of libraries, you can define a custom set of `importSources`, which accepts an
 array of package names (strings).

package/constellation/no-exported-keyframes/usage.mdx

@@ -34,13 +34,13 @@ const animation = keyframes({});
 
 By default, this rule will check `keyframes` usages from:
 
--   `@atlaskit/css`
--   `@atlaskit/primitives`
--   `@compiled/react`
--   `@emotion/react`
--   `@emotion/core`
--   `@emotion/styled`
--   `styled-components`
+- `@atlaskit/css`
+- `@atlaskit/primitives`
+- `@compiled/react`
+- `@emotion/react`
+- `@emotion/core`
+- `@emotion/styled`
+- `styled-components`
 
 To change this list of libraries, you can define a custom set of `importSources`, which accepts an
 array of package names (strings).

package/constellation/no-invalid-css-map/usage.mdx

@@ -24,11 +24,11 @@ import { cssMap } from '@compiled/react';
 // (not within a function, class, etc.)
 
 const Foo = () => {
-    const bar = cssMap({
-        danger: {
-            color: 'red',
-        },
-    });
+	const bar = cssMap({
+		danger: {
+			color: 'red',
+		},
+	});
 };
 ```
 
@@ -42,11 +42,11 @@ import { importedVariable, importedFunction } from 'another-package';
 const myVariable = importedFunction();
 
 const styles = cssMap({
-    danger: {
-        // Both invalid because they rely on an imported function.
-        color: myVariable,
-        padding: importedFunction(),
-    },
+	danger: {
+		// Both invalid because they rely on an imported function.
+		color: myVariable,
+		padding: importedFunction(),
+	},
 });
 ```
 
@@ -58,9 +58,9 @@ import { cssMap } from '@compiled/react';
 // Any usages of cssMap must be in the same file.
 
 export const foo = cssMap({
-    danger: {
-        color: 'red',
-    },
+	danger: {
+		color: 'red',
+	},
 });
 ```
 
@@ -73,29 +73,29 @@ import { token } from '@atlaskit/tokens';
 // values in cssMap.
 
 const styles = cssMap({
-    // Object method
-    get danger() {
-        return { color: '#123456' };
-    },
+	// Object method
+	get danger() {
+		return { color: '#123456' };
+	},
 });
 
 const styles2 = cssMap({
-    // Arrow function
-    danger: () => {
-        color: '#123456';
-    },
+	// Arrow function
+	danger: () => {
+		color: '#123456';
+	},
 });
 
 function customFunction(...args) {
-    return arguments.join('');
+	return arguments.join('');
 }
 
 const styles3 = cssMap({
-    danger: {
-        // Locally defined function
-        color: customFunction('red', 'blue'),
-        backgroundColor: 'red',
-    },
+	danger: {
+		// Locally defined function
+		color: customFunction('red', 'blue'),
+		backgroundColor: 'red',
+	},
 });
 ```
 
@@ -106,16 +106,16 @@ import { cssMap } from '@compiled/react';
 // Spread elements ("...") cannot be used in cssMap.
 
 const base = {
-    success: {
-        color: 'green',
-    },
+	success: {
+		color: 'green',
+	},
 };
 
 const bar = cssMap({
-    ...base,
-    danger: {
-        color: 'red',
-    },
+	...base,
+	danger: {
+		color: 'red',
+	},
 });
 ```
 
@@ -129,14 +129,14 @@ import { cssMap } from '@compiled/react';
 // in cssMap.
 
 const styles = cssMap({
-    danger: {
-        color: 'red',
-        backgroundColor: 'red',
-    },
-    success: {
-        color: 'green',
-        backgroundColor: 'green',
-    },
+	danger: {
+		color: 'red',
+		backgroundColor: 'red',
+	},
+	success: {
+		color: 'green',
+		backgroundColor: 'green',
+	},
 });
 ```
 
@@ -150,9 +150,9 @@ import { cssMap } from '@compiled/react';
 const bap = 'blue';
 
 const styles = cssMap({
-    danger: {
-        color: bap,
-    },
+	danger: {
+		color: bap,
+	},
 });
 ```
 
@@ -169,13 +169,13 @@ import { cssMap } from '@compiled/react';
 import { token } from '@atlaskit/tokens';
 
 const styles = cssMap({
-    danger: {
-        color: token('my-color'),
-        backgroundColor: 'red',
-    },
-    success: {
-        color: 'green',
-    },
+	danger: {
+		color: token('my-color'),
+		backgroundColor: 'red',
+	},
+	success: {
+		color: 'green',
+	},
 });
 ```
 

package/constellation/no-keyframes-tagged-template-expression/usage.mdx

@@ -40,12 +40,12 @@ import { keyframes } from '@compiled/react';
 keyframes({ to: { opacity: 0 } });
 
 const fadeOut = keyframes({
-    from: {
-        opacity: 1,
-    },
-    to: {
-        opacity: 0,
-    },
+	from: {
+		opacity: 1,
+	},
+	to: {
+		opacity: 0,
+	},
 });
 ```
 
@@ -55,13 +55,13 @@ const fadeOut = keyframes({
 
 By default, this rule will check `keyframes` usages from:
 
--   `@atlaskit/css`
--   `@atlaskit/primitives`
--   `@compiled/react`
--   `@emotion/react`
--   `@emotion/core`
--   `@emotion/styled`
--   `styled-components`
+- `@atlaskit/css`
+- `@atlaskit/primitives`
+- `@compiled/react`
+- `@emotion/react`
+- `@emotion/core`
+- `@emotion/styled`
+- `styled-components`
 
 To change this list of libraries, you can define a custom set of `importSources`, which accepts an
 array of package names (strings).
@@ -77,4 +77,4 @@ export const animation = keyframes``;
 
 ## Limitations
 
--   Comments are not fixable
+- Comments are not fixable