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

package/constellation/no-unsafe-style-overrides/usage.mdx

@@ -1,52 +0,0 @@
-# no-unsafe-style-overrides
-
-Unsafe style overrides cause friction and incidents when internals of the component you're
-overriding change. They're inherently unbounded and everything is API that can change at a moments
-notice.
-
-Instead, lean on composition, primitive components, and safe style overrides via the `xcss` prop
-where component authors declare what styles they want to support.
-
-## Examples
-
-### Incorrect
-
-```tsx
-import Button from '@atlaskit/button';
-
-<Button css={{ fontWeight: 500 }}>foo</Button>;
-        ^^^
-```
-
-```tsx
-import { LinkItem } from '@atlaskit/menu';
-
-<LinkItem cssFn={() => ({ '> div > div': { padding: 2 } })} />;
-          ^^^^^
-```
-
-```tsx
-import { ButtonItem } from '@atlaskit/side-navigation';
-
-<ButtonItem className="text-neutral-400" />;
-            ^^^^^^^^^
-```
-
-### Correct
-
-```tsx
-<Button>
-	<strong>foo</strong>
-</Button>
-```
-
-```tsx
-const styles = css({ padding: 'var(--ds-space-100)' });
-
-<Box as="a" xcss={styles}>
-	<Stack>
-		<Inline />
-		<Inline />
-	</Stack>
-</Box>;
-```

package/constellation/no-unsupported-drag-and-drop-libraries/usage.mdx

@@ -1,23 +0,0 @@
-# no-unsupported-drag-and-drop-libraries
-
-We encourage the use of Pragmatic drag and drop to power all drag and drop experiences - from table
-to external files. Pragmatic drag and drop is a performance optimised drag and drop framework that
-has been designed to power any drag and drop experience on any tech stack. Please avoid using
-alternative drag and drop libraries as it will lead to poorer performance, increased maintenance
-costs, (likely) worse accessibility and fragmented user experiences. See
-https://staging.atlassian.design/components/pragmatic-drag-and-drop/
-
-## Examples
-
-Libraries such as `react-beautiful-dnd` and `@atlassian/jira-dnd` that are no longer supported, as
-well as external libraries such as `react-dnd` and `react-sortable-hoc`.
-
-### Incorrect
-
-```ts
-import { DraggableLocation } from 'react-beautiful-dnd';
-                                   ^^^^^^^^^^^^^^^^^^^
-
-import { useDrag } from 'react-dnd'
-                         ^^^^^^^^^
-```

package/constellation/prefer-primitives/usage.mdx

@@ -1,32 +0,0 @@
-# prefer-primitives
-
-Using primitives allows you to delete bespoke component code and replace it with ready made
-solutions made by the Atlassian Design System Team.
-
-## Examples
-
-This rule marks code as violations when it may be able to be replaced with a primitive component.
-
-### Incorrect
-
-```js
-<div />
-^^^^^^^
-
-<Component>
-  <div css={someStyles}></div>
-  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
-</Component>
-```
-
-### Correct
-
-```js
-<Box />
-```
-
-```js
-<Component>
-	<Box xcss={someStyles}></Box>
-</Component>
-```

package/constellation/use-button-group-label/usage.mdx

@@ -1,60 +0,0 @@
-# use-button-group-label
-
-ButtonGroup should have an accessible name or a reference to it, so that upon opening, users of
-assistive technologies could have contextual information of interaction with current element.
-
-## Examples
-
-This rule will indicate user with warning to strongly recommend usage of either `label` or `titleId`
-prop.
-
-### Incorrect
-
-```tsx
-<ButtonGroup>
- ^^^^^^^^^^^ Missing either `label` or `titleId` prop.
-  <Button>Save</Button>
-  <Button>Edit</Button>
-  <Button>Delete</Button>
-</ButtonGroup>
-
-<ButtonGroup label="">
-             ^^^^^ `label` prop is missing accessible name value.
-  <Button>Save</Button>
-  <Button>Edit</Button>
-  <Button>Delete</Button>
-</ButtonGroup>
-
-<h2 id="button-group-title">ButtonGroup content title</hi>
-<ButtonGroup titleId="">
-             ^^^^^^^ `titleId` prop is missing reference value.
-  <Button>Save</Button>
-  <Button>Edit</Button>
-  <Button>Delete</Button>
-</ButtonGroup>
-
-<h2 id="button-group-title">ButtonGroup content title</h2>
-<ButtonGroup titleId="button-group-title" label="">
-             ^^^^^^^                      ^^^^^ Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.
-  <Button>Save</Button>
-  <Button>Edit</Button>
-  <Button>Delete</Button>
-</ButtonGroup>
-```
-
-### Correct
-
-```tsx
-<ButtonGroup label="ButtonGroup content title">
-  <Button>Save</Button>
-  <Button>Edit</Button>
-  <Button>Delete</Button>
-</ButtonGroup>
-
-<h2 id="button-group-title">ButtonGroup content title</h2>
-<ButtonGroup titleId="button-group-title">
-  <Button>Save</Button>
-  <Button>Edit</Button>
-  <Button>Delete</Button>
-</ButtonGroup>
-```

package/constellation/use-drawer-label/usage.mdx

@@ -1,55 +0,0 @@
-# use-drawer-label
-
-Drawer should have an accessible name or a reference to it, so that upon opening, users of assistive
-technologies could have contextual information of interaction with current element.
-
-## Examples
-
-This rule will indicate user with warning to strongly recommend usage of either `label` or `titleId`
-prop.
-
-### Incorrect
-
-```tsx
-<Drawer>
- ^^^^^^ Missing either `label` or `titleId` prop.
-  Drawer content
-</Drawer>
-
-<Drawer label>
-        ^^^^^ `label` prop is missing value.
-  Drawer content
-</Drawer>
-
-<Drawer label="">
-        ^^^^^ `label` prop is missing accessible name value.
-  Drawer content
-</Drawer>
-
-<Drawer titleId>
-        ^^^^^^^ `titleId` prop is missing reference value.
-  <h1 id="drawer-title">Drawer content title</hi>
-</Drawer>
-
-<Drawer titleId="">
-        ^^^^^^^ `titleId` prop is missing reference value.
-  <h1 id="drawer-title">Drawer content title</hi>
-</Drawer>
-
-<Drawer titleId="drawer-title" label="">
-        ^^^^^^^                ^^^^^ Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.
-  <h1 id="drawer-title">Drawer content title</hi>
-</Drawer>
-```
-
-### Correct
-
-```tsx
-<Drawer label="Drawer content title">
-  Drawer content
-</Drawer>
-
-<Drawer titleId="drawer-title">
-  <h1 id="drawer-title">Drawer content title</hi>
-</Drawer>
-```

package/constellation/use-heading/usage.mdx

@@ -1,31 +0,0 @@
-# use-heading
-
-Using primitives allows you to delete bespoke component code and replace it with ready made
-solutions made by the Atlassian Design System Team.
-
-## Examples
-
-This rule marks code as violations when it can be replaced 1:1 with a heading component.
-
-### Incorrect
-
-```jsx
-<div>
-  <h1>text</hi>
-  <p>content</p>
-</div>
-^^^^
-```
-
-### Correct
-
-```jsx
-<div>
-	<Heading size="xlarge">text</Heading>
-	<p>content</p>
-</div>
-```
-
-Currently, the rule is extremely defensive, only reporting on `h1`, `h2`, `h3`, `h4`, `h5` and `h6`
-elements that don't have any props outside of `key`, `id` and `data-testid`. We're only targeting
-instances that are the first child of their siblings.

package/constellation/use-heading-level-in-spotlight-card/usage.mdx

@@ -1,21 +0,0 @@
-# use-heading-level-in-spotlight-card
-
-The `SpotlightCard` component in `@atlaskit/onboarding` will be requiring the `headingLevel` prop in
-future releases.
-
-## Examples
-
-### Incorrect
-
-```tsx
-<SpotlightCard heading="Heading">Spotlight card contents</SpotlightCard>
- ^^^^^^^^^^^^^
-```
-
-### Correct
-
-```tsx
-<SpotlightCard heading="Heading" headingLevel={2}>
-	Spotlight card contents
-</SpotlightCard>
-```

package/constellation/use-href-in-link-item/usage.mdx

@@ -1,19 +0,0 @@
-# use-href-in-link-item
-
-The `LinkItem` component in `@atlaskit/menu` will be requiring the `href` prop in future releases.
-If no valid `href` prop is required, consider using the `ButtonItem` component.
-
-## Examples
-
-### Incorrect
-
-```tsx
-<LinkItem>Button</LinkItem>
- ^^^^^^^^
-```
-
-### Correct
-
-```tsx
-<LinkItem href="http://example.com">Link</LinkItem>
-```

package/constellation/use-latest-xcss-syntax/usage.mdx

@@ -1,33 +0,0 @@
-# use-latest-xcss-syntax
-
-## Description
-
-Soon, non-token values for the following properties will raise TypeScript errors. This rule prevents
-new violations from being written until blockers are resolved.
-
-## Examples
-
-### Incorrect
-
-```jsx
-const someStyles = xcss({
-  margin: '8px';
-          ^^^^^
-})
-```
-
-### Correct
-
-```jsx
-const someStyles = xcss({
-  margin: 'space.100';
-})
-```
-
-See the list of available space tokens on the
-[ADS website](https://atlassian.design/foundations/spacing#space-tokens).
-
-For Atlassians:
-
-- See [go/xcss-spacing](https://go.atlassian.com/xcss-spacing) for context on why this is happening,
-  and how you can prepare.

package/constellation/use-latest-xcss-syntax-typography/usage.mdx

@@ -1,34 +0,0 @@
-# use-latest-xcss-syntax-typography
-
-## Description
-
-Soon, applying `fontSize`, `lineHeight`, `fontWeight` with `xcss` will be deprecated. Please refrain
-from adding new usages, as you will need to remove them soon anyway. As an alternative, you can use
-the `Text` and `Heading` primitives.
-
-## Examples
-
-### Incorrect
-
-```jsx
-const myStyles = xcss({
-	fontSize: '14px',
-	^^^^^^^^^^^^^^^^
-	lineHeight: '20px',
-	^^^^^^^^^^^^^^^^^^
-	fontWeight: 500,
-	^^^^^^^^^^^^^^^
-});
-
-<Box as="p" xcss={myStyles}>
-	...
-</Box>;
-```
-
-### Correct
-
-```jsx
-import { Text } from '@atlaskit/primitives';
-
-<Text weight="medium">...</Text>;
-```

package/constellation/use-menu-section-title/usage.mdx

@@ -1,55 +0,0 @@
-# use-menu-section-title
-
-Section should have an accessible title or a reference to it, so that users of assistive
-technologies could have contextual information of interaction with current element.
-
-## Examples
-
-This rule will indicate user with warning to strongly recommend usage of either `title` or `titleId`
-prop.
-
-### Incorrect
-
-```tsx
-<Section>
- ^^^^^^ Missing either `title` or `titleId` prop.
-  Section content
-</Section>
-
-<Section title>
-         ^^^^^ `title` prop is missing value.
-  Section content
-</Section>
-
-<Section title="">
-         ^^^^^ `title` prop is missing accessible name value.
-  Section content
-</Section>
-
-<Section titleId>
-         ^^^^^^^ `titleId` prop is missing reference value.
-  <h1 id="section-title">Section content title</hi>
-</Section>
-
-<Section titleId="">
-         ^^^^^^^ `titleId` prop is missing reference value.
-  <h1 id="section-title">Section content title</hi>
-</Section>
-
-<Section titleId="section-title" title="Accessible title">
-         ^^^^^^^                 ^^^^^ Do not include both `titleId` and `title` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `title` to provide accessible name explicitly.
-  <h1 id="section-title">Section content title</hi>
-</Section>
-```
-
-### Correct
-
-```tsx
-<Section title="Section content title">
-  Section content
-</Section>
-
-<Section titleId="section-title">
-  <h1 id="section-title">Section content title</hi>
-</Section>
-```

package/constellation/use-popup-label/usage.mdx

@@ -1,56 +0,0 @@
-# use-popup-label
-
-Popup should have an accessible name or a reference to it when `role="dialog"`, so that upon
-opening, users of assistive technologies could have contextual information of interaction with
-current element.
-
-## Examples
-
-This rule will indicate user with warning to strongly recommend usage of either `label` or `titleId`
-prop.
-
-### Incorrect
-
-```tsx
-<Popup role="dialog">
- ^^^^^^ Missing either `label` or `titleId` prop.
-  Popup content
-</Popup>
-
-<Popup role="dialog" label>
-                     ^^^^^ `label` prop is missing value.
-  Popup content
-</Popup>
-
-<Popup role="dialog" label="">
-                     ^^^^^ `label` prop is missing accessible name value.
-  Popup content
-</Popup>
-
-<Popup role="dialog" titleId>
-                     ^^^^^^^ `titleId` prop is missing reference value.
-  <h1 id="popup-title">Popup content title</hi>
-</Popup>
-
-<Popup role="dialog" titleId="">
-                     ^^^^^^^ `titleId` prop is missing reference value.
-  <h1 id="popup-title">Popup content title</hi>
-</Popup>
-
-<Popup role="dialog" titleId="popup-title" label="">
-                     ^^^^^^^               ^^^^^ Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.
-  <h1 id="popup-title">Popup content title</hi>
-</Popup>
-```
-
-### Correct
-
-```tsx
-<Popup role="dialog" label="Popup content title">
-  Popup content
-</Popup>
-
-<Popup role="dialog" titleId="popup-title">
-  <h1 id="popup-title">Popup content title</hi>
-</Popup>
-```

package/constellation/use-primitives/usage.mdx

@@ -1,78 +0,0 @@
-# use-primitives
-
-Using primitives allows you to delete bespoke component code and replace it with ready made
-solutions made by the Atlassian Design System Team.
-
-## Examples
-
-This rule marks code as violations when it can be replaced 1:1 with a primitive component.
-
-### Incorrect
-
-```jsx
-const someStyles = css({
-  padding: '8px';
-})
-
-<div css={someStyles}>
-^^^^^^^^^^^^^^^^^^^^^^
-  // ...
-</div>
-```
-
-### Correct
-
-```jsx
-const someStyles = xcss({
-  padding: 'space.100';
-})
-
-<Box xcss={someStyles}>
-  // ...
-</Box>
-```
-
-Currently, the rule is extremely defensive, only reporting on `css` styles that contain:
-
-- one, and only one, style property from this list:
-
-  - padding
-  - paddingBlock
-  - paddingBlockEnd
-  - paddingBlockStart
-  - paddingBottom
-  - paddingInline
-  - paddingInlineEnd
-  - paddingInlineStart
-  - paddingLeft
-  - paddingRight
-  - paddingTop
-  - margin
-  - marginBlock
-  - marginBlockEnd
-  - marginBlockStart
-  - marginBottom
-  - marginInline
-  - marginInlineEnd
-  - marginInlineStart
-  - marginLeft
-  - marginRight
-  - marginTop
-
-- and where the style value is one of:
-  - 0px
-  - 2px
-  - 4px
-  - 6px
-  - 8px
-  - 12px
-  - 16px
-  - 20px
-  - 24px
-  - 32px
-  - 40px
-  - 48px
-  - 64px
-  - 80px
-
-If these conditions are not met, then no violation will be reported.

package/constellation/use-primitives-text/usage.mdx

@@ -1,35 +0,0 @@
-# use-primitives-text
-
-Using primitives allows you to delete bespoke component code and replace it with ready made
-solutions made by the Atlassian Design System Team.
-
-## Examples
-
-This rule marks code as violations when it can be replaced 1:1 with one or multiple primitive
-components.
-
-### Incorrect
-
-```jsx
-<span>text</span>
-^^^^^^
-<p>text</p>
-^^^
-<strong>text</strong>
-^^^^^^^^
-<em>text</em>
-^^^^
-```
-
-### Correct
-
-```jsx
-<Text>text</Text>
-<Text as="p">text</Text>
-<Text as="strong">text</Text>
-<Text as="em">text</Text>
-```
-
-Currently, the rule is extremely defensive, only reporting on `span`, `p`, `strong` and `em`
-elements that don't have any props outside of `key`, `id` and `data-testid`. For `span` elements
-we're only targeting instances that almost certainly only have text as children.

package/constellation/use-tokens-space/usage.mdx

@@ -1,34 +0,0 @@
-# use-tokens-space
-
-## Examples
-
-This rule marks code as violations when a space token should be used. It will auto-fix values that
-can be mapped 1:1 with an ADS space token. Values that can't be mapped to a token will still be
-reported, however no auto-fix will happen.
-
-### Incorrect
-
-```jsx
-const someStyles = css({
-  padding: '8px';
-           ^^^^^
-})
-```
-
-### Correct
-
-```jsx
-import { token } from '@atlaskit/tokens'
-
-const someStyles = css({
-  padding: token('space.100');
-})
-```
-
-See the list of available space tokens on the
-[ADS website](https://atlassian.design/foundations/spacing#space-tokens).
-
-For Atlassians:
-
-- See the [Token Migration Guide](https://go.atlassian.com/space-token-migration) for instructions
-  on how to migrate to tokens when a suggestion is not provided by the ESLint rule.

package/constellation/use-tokens-typography/usage.mdx

@@ -1,55 +0,0 @@
-# use-tokens-typography
-
-Enforces the use of design tokens for typography properties.
-
-Using design tokens results in a harmonious experience for end users whilst providing theming and
-consistency. Typography tokens are strongly recommended to further align our experiences and make
-future changes easier.
-
-Note: This rule is fairly defensive when it comes to replacing values with tokens. It will only run
-over style blocks that contain a fontSize property. It will then attempt to match that font size to
-a token. If multiple matching tokens are found it then tries to match on font weight. If a token can
-be found to match the font size but not font weight, the token is applied and then a font weight
-token override is applied to ensure the tokenised styles match the original. One main exception is
-line height - **this rule will match against tokens that have a different line height**. Letter
-spacing values are also ignored.
-
-## Examples
-
-Using anything other than design tokens such as hardcoded values or legacy theme constants will be
-considered violations.
-
-### Incorrect
-
-```js
-import { fontSize } from '@atlaskit/theme/constants';
-
-css({ fontSize: fontSize() });
-                ^^^^^^^^^^
-
-css({ fontSize: '14px' });
-                ^^^^^^
-
-css({
-  fontSize: '14px',
-            ^^^^^^
-  lineHeight: '20px',
-  fontWeight: 600
-});
-
-```
-
-### Correct
-
-```js
-import { token } from '@atlaskit/tokens';
-
-css({ font: token('font.heading.large') });
-
-css({ font: token('font.body') });
-```
-
-## Options
-
-`shouldEnforceFallbacks`: Set to `false` to ensure token fallback values are not added. Defaults to
-`true`.