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

package/constellation/no-deprecated-design-token-usage/usage.mdx

@@ -1,30 +0,0 @@
-# no-deprecated-design-token-usage
-
-Using deprecated design tokens is dangerous as they will eventually be deleted after the sunset
-period. This rule helps you move to non-deprecated design tokens.
-
-## Examples
-
-This rule will mark usage of deprecated design tokens as violations.
-
-## Incorrect
-
-```js
-import { token } from '@atlaskit/tokens';
-
-css({ color: token('i.am.deprecated') });
-                    ^^^^^^^^^^^^^^^
-css({ color: token('i.am.a.token') });
-                    ^^^^^^^^^^^^^
-```
-
-## Options
-
-It's recommended to set this rule to "warn" to allow for new and old tokens to exist side-by-side
-for the duration of the deprecation period and avoid big-bang migrations.
-
-Once the deprecation period is over for a design token it will be moved into `deleted` state at
-which point the counterpart of this rule `no-unsafe-design-token-usage` will mark violations as
-errors.
-
-Running `eslint --fix` will automatically apply replacement tokens if present.

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

@@ -1,66 +0,0 @@
-# no-deprecated-imports
-
-Packages across the Atlassian Design System can be deprecated when they are deemed no-longer fit for
-purporse or dangerous and risk effective use at scale.
-
-## Examples
-
-This rule will mark usage of deprecated modules as violations.
-
-### Incorrect
-
-```ts
-import Item from '@atlaskit/item';
-                  ^^^^^^^^^^^^^^
-import GlobalNav from '@atlaskit/global-navigation';
-                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-```
-
-## Options
-
-The rule can take one option: `deprecatedConfig`, if not provided the rule will use an internal
-config. If provided the rule will use the passed in config instead.
-
-### deprecatedConfig
-
-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.`.
-
-```json
-{
-	"@atlaskit/navigation-next": {
-		"message": "navigation-next is deprecated. Please use '@atlaskit/atlassian-navigation' instead."
-	}
-}
-```
-
-```js
-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.",
-					},
-				},
-			},
-		],
-	},
-};
-```

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

@@ -1,149 +0,0 @@
-# no-direct-use-of-web-platform-drag-and-drop
-
-Block the usage of web platform drag and drop functionality directly. Use Pragmatic drag and drop.
-
-## Rationale
-
-The web platform has powerful drag and drop functionality built in. However, it is hard to be
-successful with web platform drag and drop due to bugs, inconsistencies and usage friction. Rather
-than leveraging the web platform API directly, the rule enforces the usage of
-[Pragmatic drag and drop](https://atlassian.design/components/pragmatic-drag-and-drop), which allows
-people to easily and successfully leverage web platform drag and drop.
-
-## Examples
-
-This rule marks direct usage of web platform drag events as violations.
-
-### Incorrect
-
-Adding drag related event listeners on intrinsic `react` elements (eg `div`, `span`, `strong` and so
-on).
-
-```tsx
-<div onDragStart={fn}>{children}</div>
-     ^^^^^^^^^^^
-<div onDragEnter={fn}>{children}</div>
-     ^^^^^^^^^^^
-<div onDragLeave={fn}>{children}</div>
-     ^^^^^^^^^^^
-<div onDragOver={fn}>{children}</div>
-     ^^^^^^^^^^^
-<div onDrag={fn}>{children}</div>
-     ^^^^^^
-<div onDrop={fn}>{children}</div>
-     ^^^^^^
-<div onDragEnd={fn}>{children}</div>
-     ^^^^^^^^^
-```
-
-Adding drag related event listeners on our `<Box>` primitive.
-
-```tsx
-import { Box } from '@atlaskit/primitives';
-
-<Box onDragStart={fn}>{children}</Box>
-     ^^^^^^^^^^^
-<Box onDragEnter={fn}>{children}</Box>
-     ^^^^^^^^^^^
-<Box onDragLeave={fn}>{children}</Box>
-     ^^^^^^^^^^^
-<Box onDragOver={fn}>{children}</Box>
-     ^^^^^^^^^^^
-<Box onDrag={fn}>{children}</Box>
-     ^^^^^^
-<Box onDrop={fn}>{children}</Box>
-     ^^^^^^
-<Box onDragEnd={fn}>{children}</Box>
-     ^^^^^^^^^
-```
-
-Binding drag related events using `eventTarget.addEventListener()`
-
-```ts
-window.addEventListener('dragstart', fn);
-                        ^^^^^^^^^^^
-window.addEventListener('dragenter', fn);
-                        ^^^^^^^^^^^
-window.addEventListener('dragleave', fn);
-                        ^^^^^^^^^^^
-window.addEventListener('dragover', fn);
-                        ^^^^^^^^^^
-window.addEventListener('drag', fn);
-                        ^^^^^^
-window.addEventListener('drop', fn);
-                        ^^^^^^
-window.addEventListener('dragend', fn);
-                        ^^^^^^^^^
-```
-
-Binding drag related events using `bind()` from
-[bind-event-listener](https://github.com/alexreardon/bind-event-listener)
-
-```ts
-import {bind} from 'bind-event-listener';
-
-bind(element, { type: 'dragstart', listener: fn });
-                      ^^^^^^^^^^^
-bind(element, { type: 'dragenter', listener: fn });
-                      ^^^^^^^^^^^
-bind(element, { type: 'dragleave', listener: fn });
-                      ^^^^^^^^^^^
-bind(element, { type: 'dragover', listener: fn });
-                      ^^^^^^^^^^
-bind(element, { type: 'drag', listener: fn });
-                      ^^^^^^
-bind(element, { type: 'drop', listener: fn });
-                      ^^^^^^
-bind(element, { type: 'dragend', listener: fn });
-                      ^^^^^^^^^
-```
-
-Binding drag related events using `bindAll()` from
-[bind-event-listener](https://github.com/alexreardon/bind-event-listener)
-
-```ts
-import {bindAll} from 'bind-event-listener';
-
-bindAll(window, [
-  { type: 'dragstart', listener: fn },
-          ^^^^^^^^^^
-  { type: 'dragenter', listener: fn },
-          ^^^^^^^^^^
-  { type: 'dragleave', listener: fn },
-          ^^^^^^^^^^
-  { type: 'dragover', listener: fn },
-          ^^^^^^^^^^
-  { type: 'drag', listener: fn },
-          ^^^^^^
-  { type: 'drop', listener: fn },
-          ^^^^^^
-  { type: 'dragend', listener: fn },
-          ^^^^^^^^^
-]);
-```
-
-### Correct
-
-Leveraging Pragmatic drag and drop for web platform drag and drop.
-
-```ts
-import { monitor } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-
-monitor({
-	onGenerateDragPreview: fn,
-	onDragStart: fn,
-	onDropTargetChange: fn,
-	onDrag: fn,
-	onDrop: fn,
-});
-```
-
-> See the
-> [Pragmatic drag and drop documentation](https://atlassian.design/components/pragmatic-drag-and-drop)
-> for more information about it's usage.
-
-Using blocked JSX attributes on custom `react` components
-
-```tsx
-<MyComponent onDragStart={fn}>
-```

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

@@ -1,82 +0,0 @@
-# no-empty-styled-expression
-
-Disallows/discourages passing empty arguments to any `styled` expression when using a CSS-in-JS
-library, including `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
-
-If Compiled is used in the file, passing an empty object or no object at all causes Compiled to
-build extra `div/span` elements, as opposed to simply using a `div`. This leads to reduced
-performance and is greatly discouraged. If a wrapper is necessary, opt to use a `div` or wrap it in
-the empty React fragment `<> <YourComponentHere></YourComponentHere> </>`.
-
-## Examples
-
-### Incorrect
-
-```tsx
-const EmptyStyledExpression = styled.div();
-
-const EmptyStyledExpressionArgument = styled.div({});
-
-const EmptyStyledExpressionArgument = styled.div([]);
-```
-
-### Correct
-
-```tsx
-const Wrapper = styled.div({
-	backgroundColor: 'red',
-	MyComponent: {
-		backgroundColor: 'green',
-	},
-});
-```
-
-## What to do instead?
-
-### Use elements directly
-
-```diff
-- const Wrapper = styled.div({});
-
-   function App() {
--    return <Wrapper>hello world</Wrapper>;
-+    return <div>hello world</div>;
-  }
-```
-
-### Use a React fragment
-
-```diff
-- const Wrapper = styled.div({});
-
-   function App() {
--    return <Wrapper>hello world</Wrapper>;
-+    return <>hello world</>;
-  }
-```
-
-## Options
-
-### importSources
-
-By default, this rule will check `styled` usages from:
-
-- `@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).
-
-```tsx
-// [{ importSources: ['other-lib'] }]
-
-import { styled } from 'other-lib';
-
-// Invalid!
-export const Component = styled.div({});
-```

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

@@ -1,55 +0,0 @@
-# no-exported-css
-
-Disallows `css` export declarations that originate from a CSS-in-JS library, including
-`@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
-
-In Compiled (`@atlaskit/css` and `@compiled/react`), exporting `css` declarations may result in
-unexpected errors when imported, because its value will be `null` at runtime. Additionally,
-co-locating `css` definitions with their usage is considered best practice in order to improve code
-readability and build performance.
-
-## Examples
-
-### Incorrect
-
-```tsx
-import { css } from '@compiled/react';
-
-export const styles = css({});
-
-export default css({});
-```
-
-### Correct
-
-```tsx
-import { css } from '@compiled/react';
-
-const styles = css({});
-```
-
-## Options
-
-### importSources
-
-By default, this rule will check `css` usages from:
-
-- `@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).
-
-```tsx
-// [{ importSources: ['other-lib'] }]
-
-import { css } from 'other-lib';
-
-// Invalid!
-export const styles = css({});
-```

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

@@ -1,55 +0,0 @@
-# no-exported-keyframes
-
-Disallows `keyframes` export declarations that originate from a CSS-in-JS library, including
-`@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
-
-In Compiled (`@atlaskit/css` and `@compiled/react`), exporting `keyframes` declarations may result
-in unexpected errors when imported, because its value will be `null` at runtime. Additionally,
-co-locating `keyframes` definitions with their usage is considered best practice in order to improve
-code readability and build performance.
-
-## Examples
-
-### Incorrect
-
-```tsx
-import { keyframes } from '@compiled/react';
-
-export const animation = keyframes({});
-
-export default keyframes({});
-```
-
-### Correct
-
-```tsx
-import { keyframes } from '@compiled/react';
-
-const animation = keyframes({});
-```
-
-## Options
-
-### importSources
-
-By default, this rule will check `keyframes` usages from:
-
-- `@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).
-
-```tsx
-// [{ importSources: ['other-lib'] }]
-
-import { keyframes } from 'other-lib';
-
-// Invalid!
-export const animation = keyframes({});
-```

package/constellation/no-html-anchor/usage.mdx

@@ -1,46 +0,0 @@
-# no-html-anchor
-
-Don't use native HTML anchors. The Atlassian Design System provides ready-made link components that
-include event tracking, automatic router configuration, ensure accessible implementations, and
-provide access to ADS styling features like design tokens.
-
-Use Atlassian Design System components such as the [Link](/components/link/) or
-[LinkButton](/components/button/link-button/) components when suitable. There may also be other
-components better-suited depending on the use case. If these components aren't suitable, use the
-[Anchor primitive](/components/primitives/anchor/) which helps you build custom links with Atlassian
-Design System styling.
-
-## Examples
-
-This rule marks code as violations when it finds native HTML anchor elements.
-
-### Incorrect
-
-```jsx
-<a href="/">
- ^ Using a native HTML `<a>`
-  Hello, World!
-</a>
-
-<div role="link" tabIndex="0" data-href="https://www.atlassian.com">
-     ^^^^^^^^^^^ Using `role="link"` to create links
-  Hello, World!
-</div>
-
-```
-
-### Correct
-
-```jsx
-import Anchor from '@atlaskit/primitives/anchor';
-
-<Anchor href="/">Hello, World!</Anchor>;
-
-import Link from '@atlaskit/link';
-
-<Link href="/">Hello, World!</Link>;
-
-import { LinkButton } from '@atlaskit/button/new';
-
-<LinkButton href="/">Hello, World!</LinkButton>;
-```

package/constellation/no-html-button/usage.mdx

@@ -1,52 +0,0 @@
-# no-html-button
-
-Don't use native HTML buttons. The Atlassian Design System provides ready-made button components
-that include event tracking, ensure accessible implementations, and provide access to ADS styling
-features like design tokens.
-
-Use Atlassian Design System components such as the [Button component](/components/button/) when
-suitable. There may also be other components better-suited depending on the use case. If these
-components aren't suitable, use the [Pressable primitive](/components/primitives/pressable/) which
-helps you build custom buttons with Atlassian Design System styling.
-
-## Examples
-
-This rule marks code as violations when it finds native HTML button elements.
-
-### Incorrect
-
-```jsx
-<button>
- ^^^^^^ Using a native HTML `<button>`
-  Hello, World!
-</button>
-
-<div role="button" tabIndex="0">
-     ^^^^^^^^^^^^^ Using `role="button"` to create buttons
-  Hello, World!
-</div>
-
-<input type="button" value="Button" />
-       ^^^^^^^^^^^^^ Using a `<input>` as a button
-
-<input type="submit" value="Submit" />
-       ^^^^^^^^^^^^^ Using a `<input>` as a button
-
-<input type="reset" value="Reset" />
-       ^^^^^^^^^^^^ Using a `<input>` as a button
-
-<input type="image" alt="Submit" src="/submit-button.png" />
-       ^^^^^^^^^^^^ Using a `<input>` as a button
-```
-
-### Correct
-
-```jsx
-import Pressable from '@atlaskit/primitives/pressable';
-
-<Pressable>Hello, World!</Pressable>;
-
-import Button from '@atlaskit/button/new';
-
-<Button>Hello, World!</Button>;
-```