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

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

@@ -1,135 +0,0 @@
-# no-styled-tagged-template-expression
-
-Disallows any `styled` tagged template expressions that originate from a CSS-in-JS library,
-including `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
-
-Tagged template expressions are difficult to parse correctly (which can lead to more frequent build
-failures or invalid CSS generation), have limited type safety, and lack syntax highlighting. These
-problems can be avoided by using the preferred call expression syntax instead.
-
-The `--fix` option on the command line automatically fixes problems reported by this rule.
-
-## Examples
-
-### Incorrect
-
-```js
-import { styled } from '@compiled/react';
-
-const InlinedStyles = styled.div`
-	color: blue;
-`;
-
-const MultilineStyles = styled.div`
-	color: blue;
-	font-weight: 500;
-`;
-
-const ComposedStyles = styled(InlinedStyles)`
-	font-weight: 500;
-`;
-
-const DynamicStyles = styled.div`
-	color: ${(props) => props.color};
-	${(props) => (props.disabled ? 'opacity: 0.8' : 'opacity: 1')}
-`;
-```
-
-### Correct
-
-```js
-import { styled } from '@compiled/react';
-
-const InlinedStyles = styled.div({
-	color: 'blue',
-});
-
-const MultilineStyles = styled.div({
-	color: 'blue',
-	fontWeight: 500,
-});
-
-const ComposedStyles = styled(InlinedStyles)({
-	fontWeight: 500,
-});
-
-const DynamicStyles = styled.div(
-	{
-		color: (props) => props.color,
-	},
-	(props) => (props.disabled ? 'opacity: 0.8' : 'opacity: 1'),
-);
-```
-
-## 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``;
-```
-
-## Limitations
-
-- Comments are not fixable.
-- Component selectors are not fixable for `styled-components`.
-
-Do not migrate to this object syntax manually, it is invalid `styled-components`.
-
-```tsx
-const Button = styled.button``;
-const Wrapper = styled.div({
-  color: 'red',
-  [`${Button}`]: {
-    color: 'blue',
-  },
-});
-<Wrapper><Button /><Wrapper>
-```
-
-Instead, style the button directly—make it clear that you're styling that button.
-
-```tsx
-const buttonStyles = css({ color: 'blue' });
-const Wrapper = styled.div({
-	color: 'red',
-});
-
-<Wrapper>
-	<button css={buttonStyles} />
-</Wrapper>;
-```
-
-If that's not feasible, you can use data attributes, but these will result in failing the UI Styling
-Standard around nested styles, pushing the error down the road.
-
-```tsx
-const Wrapper = styled.div({
-	color: 'red',
-	'[data-component-selector="my.button"]': {
-		color: 'blue',
-	},
-});
-
-<Wrapper>
-	<button data-component-selector="my.button" />
-</Wrapper>;
-```

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

@@ -1,50 +0,0 @@
-# no-unsafe-design-token-usage
-
-Using design tokens in an unsafe way risks the health of the system and will effect how fast your
-codebase can migrate between versions.
-
-## Examples
-
-This rule will mark design token usage that is not statically and locally analyzable, as well as
-design tokens that are considered deleted.
-
-## Incorrect
-
-```js
-const textColor = 'red';
-
-css({ color: textColor });
-             ^^^^^^^^^ must be a string literal
-```
-
-```js
-css({ boxShadow: '0px 1px 1px var(--ds-accent-subtleBlue)' });
-                              ^^^^^^^^^^^^^^^^^^^^^^^^^^ must use the token() function
-```
-
-## Correct
-
-```js
-import { token } from '@atlaskit/tokens';
-
-css({ boxShadow: token('elevation.shadow.card') });
-
-css`
-	color: ${(token('color.text.highemphasis'), N20)};
-`;
-```
-
-## Options
-
-This rule comes with options to aid in migrating to design tokens.
-
-### fallbackUsage
-
-- `forced`: Fallback values must always be provided
-- `none`: Fallback values must never be provided. (Fixer will remove if provided)
-- `optional`: Fallbacks are optional
-
-### shouldEnforceFallbacks (deprecated)
-
-When `true` the rule will mark token function usage as violations when fallbacks aren't defined.
-When `false` the rule will mark token function usage as violations when fallbacks are defined.

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>
-```