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

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

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

@@ -1,210 +0,0 @@
-# no-invalid-css-map
-
-Ensure that all usages of the `cssMap` API are valid, and enforces the format of the object that is
-passed to `cssMap`.
-
-Please refer to the [Compiled documentation](https://compiledcssinjs.com/docs/api-cssmap) for more
-details and some examples.
-
-Note that this version of the `no-invalid-css-map` rule differs from
-`@compiled/eslint-plugin/no-invalid-css-map` in that this will apply to both `@compiled/react` and
-`@atlaskit/css`.
-
-This is intended to be used in conjunction with type checking (through TypeScript).
-
-## Examples
-
-### Incorrect
-
-```tsx
-import React from 'react';
-import { cssMap } from '@compiled/react';
-
-// cssMap needs to be declared in the top-most scope.
-// (not within a function, class, etc.)
-
-const Foo = () => {
-	const bar = cssMap({
-		danger: {
-			color: 'red',
-		},
-	});
-};
-```
-
-```tsx
-import React from 'react';
-import { cssMap } from '@compiled/react';
-import { importedVariable, importedFunction } from 'another-package';
-
-// Cannot use imported functions as values in cssMap.
-
-const myVariable = importedFunction();
-
-const styles = cssMap({
-	danger: {
-		// Both invalid because they rely on an imported function.
-		color: myVariable,
-		padding: importedFunction(),
-	},
-});
-```
-
-```tsx
-import React from 'react';
-import { cssMap } from '@compiled/react';
-
-// Cannot export usages of cssMap.
-// Any usages of cssMap must be in the same file.
-
-export const foo = cssMap({
-	danger: {
-		color: 'red',
-	},
-});
-```
-
-```tsx
-import React from 'react';
-import { cssMap } from '@compiled/react';
-import { token } from '@atlaskit/tokens';
-
-// Functions and object methods are not allowed as
-// values in cssMap.
-
-const styles = cssMap({
-	// Object method
-	get danger() {
-		return { color: '#123456' };
-	},
-});
-
-const styles2 = cssMap({
-	// Arrow function
-	danger: () => {
-		color: '#123456';
-	},
-});
-
-function customFunction(...args) {
-	return arguments.join('');
-}
-
-const styles3 = cssMap({
-	danger: {
-		// Locally defined function
-		color: customFunction('red', 'blue'),
-		backgroundColor: 'red',
-	},
-});
-```
-
-```tsx
-import React from 'react';
-import { cssMap } from '@compiled/react';
-
-// Spread elements ("...") cannot be used in cssMap.
-
-const base = {
-	success: {
-		color: 'green',
-	},
-};
-
-const bar = cssMap({
-	...base,
-	danger: {
-		color: 'red',
-	},
-});
-```
-
-### Correct
-
-```tsx
-import React from 'react';
-import { cssMap } from '@compiled/react';
-
-// Literals (strings, numbers, etc.) are used as values
-// in cssMap.
-
-const styles = cssMap({
-	danger: {
-		color: 'red',
-		backgroundColor: 'red',
-	},
-	success: {
-		color: 'green',
-		backgroundColor: 'green',
-	},
-});
-```
-
-```tsx
-import React from 'react';
-import { cssMap } from '@compiled/react';
-
-// A statically evaluable variable (known at build time)
-// is used here.
-
-const bap = 'blue';
-
-const styles = cssMap({
-	danger: {
-		color: bap,
-	},
-});
-```
-
-### Options
-
-#### `allowedFunctionCalls`: [string, string][]
-
-Normally, this ESLint rule forbids all function calls from being used inside the `cssMap(...)`
-function call. For example, this would be invalid using default settings:
-
-```tsx
-import React from 'react';
-import { cssMap } from '@compiled/react';
-import { token } from '@atlaskit/tokens';
-
-const styles = cssMap({
-	danger: {
-		color: token('my-color'),
-		backgroundColor: 'red',
-	},
-	success: {
-		color: 'green',
-	},
-});
-```
-
-If you would like to whitelist certain functions (e.g. `token` from `@atlaskit/tokens`), you can
-include the names of the functions as part of the `allowedFunctionCalls` argument. Each function
-should be represented as a two-element array, with the first element being the package the function
-is from, and the second element being the name of the function.
-
-For example, with the below configuration, the above code example would be okay.
-
-```tsx
-// .eslintrc.js
-
-// ...
-      rules: {
-        '@atlaskit/eslint-plugin-design-system/no-invalid-css-map': [
-          'error',
-          {
-            allowedFunctionCalls: [
-              ['@atlaskit/tokens', 'token'],
-            ]
-          },
-        ],
-        // ...
-      },
-// ...
-```
-
-Please note that this ESLint rule only supports whitelisting imports in the form
-`import { myFunctionOrVariable } from 'my-package'`; we do not currently support whitelisting
-default imports, so `import myFunctionOrVariable from 'my-package'` would always be invalid when
-used in `cssMap`.

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

@@ -1,80 +0,0 @@
-# no-keyframes-tagged-template-expression
-
-Disallows any `keyframes` 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.
-
-Thank you to the
-[Compiled team for their rule](https://github.com/atlassian-labs/compiled/tree/master/packages/eslint-plugin/src/rules/no-keyframes-tagged-template-expression)
-from which this was ported.
-
-The `--fix` option on the command line automatically fixes problems reported by this rule.
-
-## Examples
-
-### Incorrect
-
-```js
-import { keyframes } from '@compiled/react';
-
-keyframes`to { opacity: 0 }`;
-
-const fadeOut = keyframes`
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-`;
-```
-
-### Correct
-
-```js
-import { keyframes } from '@compiled/react';
-
-keyframes({ to: { opacity: 0 } });
-
-const fadeOut = keyframes({
-	from: {
-		opacity: 1,
-	},
-	to: {
-		opacity: 0,
-	},
-});
-```
-
-## 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``;
-```
-
-## Limitations
-
-- Comments are not fixable

package/constellation/no-legacy-icons/usage.mdx

@@ -1,42 +0,0 @@
-# no-legacy-icons
-
-Icons are being updated with new designs, a simplified set of available icons and sizes, as well as
-more consistent padding and spacing.
-
-The new icon components allows your components to align with the new visual language - either by
-default, or when enabled via a feature flag.
-
-## Examples
-
-This rule identifies usages of legacy icons from `@atlaskit/icon/glyph` and `@atlaskit/icon-object`,
-that aren't yet migrated to the new icon API. Legacy icons are only permitted when passed into a new
-"core" or "utility" icon from `@atlaskit/icon` or `@atlassian/icon-lab`, via the
-`LEGACY_fallbackIcon` prop.
-
-### Incorrect
-
-```js
-import ActivityIcon from '@atlaskit/icon/glyph/activity'
-                          ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ legacy icon import
-
-import { IconButton } from '@atlaskit/button/new'
-
-<ActivityIcon label="Activity">
-^^^^^^^^^^^^^^^^^^^^^^^ legacy icon
-
-<IconButton icon={ActivityIcon} label="Activity"/>
-                  ^^^^^^^^^^^^^ legacy icon
-```
-
-### Correct
-
-```js
-import AddIcon from '@atlaskit/icon/core/add';
-import { IconButton } from '@atlaskit/button/new';
-
-<AddIcon label="" />;
-<IconButton
-	icon={(iconProps) => <AddIcon LEGACY_fallbackIcon={AddIconLegacy} {...iconProps} />}
-	label="Add to Cart"
-/>;
-```

package/constellation/no-margin/usage.mdx

@@ -1,21 +0,0 @@
-# no-margin
-
-Using margins to define spacing results in components that can't be readily reused in other contexts
-breaking the composition model. Instead defining spacing in parents with flex and grid using the
-`gap` property will result in more resilient experiences.
-
-## Examples
-
-This rule will mark all margin use as violations.
-
-### Incorrect
-
-```tsx
-css({ margin: '10px' });
-```
-
-### Correct
-
-```tsx
-css({ gap: token('spacing.100') });
-```

package/constellation/no-nested-styles/usage.mdx

@@ -1,47 +0,0 @@
-# no-nested-styles
-
-Disallows using nested styles. Nested styles can change unexpectedly when child markup changes and
-result in duplicates when extracting to CSS.
-
-## Examples
-
-This rule checks for nested styles inside `css` objects. This rule has no options.
-
-### Incorrect
-
-```js
-css({
-	div: {
-		color: 'red',
-	},
-});
-```
-
-```js
-css({
-	'@media (min-width: 480px)': {
-		color: 'red',
-	},
-});
-```
-
-### Correct
-
-```js
-css({
-	color: 'red',
-	':hover': {
-		color: 'black',
-	},
-});
-```
-
-```js
-import { media } from '@atlaskit/primitives';
-
-css({
-	[media.above.xs]: {
-		color: 'red',
-	},
-});
-```

package/constellation/no-physical-properties/usage.mdx

@@ -1,53 +0,0 @@
-# no-physical-properties
-
-Disallows using physical properties. Physical properties prevent correct support for different
-reading modes and languages and should be avoided. Rule will autofix applicable physical properties
-to instead use
-[logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values/Basic_concepts_of_logical_properties_and_values).
-
-## Examples
-
-This rule checks for physical property usage inside of `css` function calls.
-
-### Incorrect
-
-```js
-css({
-	left: 0,
-	right: 0,
-	top: 0,
-	bottom: 0,
-});
-```
-
-```js
-css({
-	marginLeft: 0,
-});
-```
-
-```js
-css({
-	textAlign: 'left',
-});
-```
-
-### Correct
-
-```js
-css({
-	inset: 0,
-});
-```
-
-```js
-css({
-	marginInlineStart: 0,
-});
-```
-
-```js
-css({
-	textAlign: 'start',
-});
-```

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.