@atlaskit/eslint-plugin-design-system 4.19.0 → 4.20.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 4.20.0
+
+### Minor Changes
+
+- [`fa50be73bfe`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fa50be73bfe) - [ux] Spacing rule now also looks at and attempts to parse additional properties.
+
+## 4.19.1
+
+### Patch Changes
+
+- [`0047d204889`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0047d204889) - Docs are now generated from source.
+
 ## 4.19.0
 
 ### Minor Changes

package/README.md

@@ -44,7 +44,7 @@ module.exports = {
 
 ## Rules
 
-<!-- START_RULE_CODEGEN -->
+<!-- START_RULE_TABLE_CODEGEN -->
 <!-- @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen -->
 
 | Rule                                                                                                    | Description                                                                                     | Recommended | Fixable | Suggestions |
@@ -61,4 +61,4 @@ module.exports = {
 | <a href="./src/rules/use-primitives/README.md">use-primitives</a>                                       | Encourage the usage of primitives components.                                                   |             | Yes     |             |
 | <a href="./src/rules/use-visually-hidden/README.md">use-visually-hidden</a>                             | Enforce usage of the visually hidden component.                                                 | Yes         | Yes     |             |
 
-<!-- END_CODEGEN -->
+<!-- END_RULE_TABLE_CODEGEN -->

package/constellation/index/usage.mdx

@@ -8,7 +8,7 @@ This plugin contains rules that should be used when working with the [Atlassian
 
 ## Rules
 
-<!-- START_RULE_CODEGEN -->
+<!-- START_RULE_TABLE_CODEGEN -->
 <!-- @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen -->
 
 | Rule                                                                               | Description                                                                                     | Recommended | Fixable | Suggestions |
@@ -25,333 +25,415 @@ This plugin contains rules that should be used when working with the [Atlassian
 | <a href="#use-primitives">use-primitives</a>                                       | Encourage the usage of primitives components.                                                   |             | Yes     |             |
 | <a href="#use-visually-hidden">use-visually-hidden</a>                             | Enforce usage of the visually hidden component.                                                 | Yes         | Yes     |             |
 
-<!-- END_CODEGEN -->
+<!-- END_RULE_TABLE_CODEGEN -->
+
+<!-- START_RULE_CONTENT_CODEGEN -->
+<!-- @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen -->
 
 ## ensure-design-token-usage
 
-Ensures that the codebase uses the global `token` function for colors, rather than hard-coded values. This ruleset is great for codebases that are starting to adopt color tokens and those that have already adopted color tokens. This ruleset also prevents new contributors from accidentally adding hard-coded color values.
+Using color design tokens enables our experiences to be themed and harmonious.
+All experiences must use these design tokens otherwise when switching between themes unexpected incidents can occur where not all of the UI is themed.
 
-<h3 id="ensure-design-token-usage-do">Do</h3>
+<h3>Examples</h3>
 
-Use the global `token` function, and design tokens.
+Using anything other than design tokens such as hardcoded values or legacy theme colors will be considered violations.
 
-```jsx
-import { token } from '@atlaskit/tokens';
+#### Incorrect
 
-css({
-  boxShadow: token('elevation.shadow.card'),
-});
+```js
+import { e100 } from '@atlaskit/theme/elevation';
+import { B100 } from '@atlaskit/theme/colors';
+
+css({ color: 'red' });
+              ^^^
+css({ boxShadow: '0px 1px 1px #161A1D32' });
+                          ^^^^^^^^^
+css`${e100};`;
+      ^^^^
+css({ color: B100 });
+             ^^^^
 ```
 
-```jsx
+#### Correct
+
+```js
 import { token } from '@atlaskit/tokens';
 
-css`
-  color: ${token('color.text.highemphasis')};
-`;
+css({ boxShadow: token('elevation.shadow.card') });
 ```
 
-<h3 id="ensure-design-token-usage-dont">Don't</h3>
+## ensure-design-token-usage-spacing
 
-Don't use hard-coded values, such as hexadecimal, CSS colors, or base color values.
+Using spacing,
+typography,
+and shape design tokens results in a harmonious experience for end users.
 
-```jsx
-css({
-  color: 'red',
-          ^^^
-});
-```
+<h3>Examples</h3>
 
-```jsx
-css({
-  boxShadow: '0px 1px 1px #161A1D32',
-                          ^^^^^^^^^
-})
-```
+Using anything other than design tokens such as hardcoded values or legacy theme colors will be considered violations.
 
-```jsx
-import { e100 } from '@atlaskit/theme/elevation';
+#### Incorrect
 
-css`
-  ${e100};
-    ^^^^
-`;
+```js
+css({  padding: 'red' });
+                 ^^^
+css({ margin: gridSize() });
+              ^^^^^^^^^^
 ```
 
-```jsx
-import { B100 } from '@atlaskit/theme/colors';
+#### Correct
 
-css({
-  color: B100,
-         ^^^^
-});
+```js
+import { token } from '@atlaskit/tokens';
+
+css({ padding: token('space.100') });
 ```
 
-## ensure-design-token-usage-spacing
+<h3>Options</h3>
 
-Ensures that the codebase uses the global `token` function for spacing, rather than hard-coded values. This ruleset is great for codebases that are starting to adopt space tokens and those that have already adopted space tokens. This ruleset also prevents new contributors from accidentally adding hard-coded space values.
+This rule comes with options to aid in migrating to design tokens.
 
-<h3 id="ensure-design-token-usage-spacing-do">Do</h3>
+#### shouldEnforceFallbacks
 
-Use the global `token` function, and design tokens.
+When `true` the rule will add in stub fallbacks when choosing a suggestion in your IDE.
 
-```jsx
-import { token } from '@atlaskit/tokens';
+## icon-label
 
-css({
-  padding: token('space.200'),
-});
-```
+Icon labels are used to describe what the icon is so the visually impaired can be described what the UI element is.
+There are cases where icons should have labels as well as cases where they shouldn't be labelled.
 
-```jsx
-import { token } from '@atlaskit/tokens';
+<h3>Examples</h3>
 
-css`
-  gap: ${token('space.100')};
-`;
-```
+This rule will find violations for when an icon label is or isn't needed when composed with other Design System components.
 
-<h3 id="ensure-design-token-usage-spacing-dont">Don't</h3>
+#### Incorrect
 
-Don't use hard-coded values, such as pixel values, relative units, or legacy `gridSize` functions.
+```js
+import ActivityIcon from '@atlaskit/icon/glyph/activity'
 
-```jsx
-css({
-  padding: '8px',
-            ^^^
-});
-```
+<ActivityIcon>
+^^^^^^^^^^^^^^ missing `label` prop
 
-```jsx
-css({
-  paddingLeft: gridSize(),
-               ^^^^^^^^^^
-})
+<Button iconLeft={<ActivityIcon label="">} />
+                                ^^^^^ label should be defined
+
+<ButtonItem iconBefore={<ActivityIcon label="">}>
+                                      ^^^^^ label should not be defined
+  My activity
+</ButtonItem>
 ```
 
-## no-deprecated-design-token-usage
+#### Correct
+
+```js
+import ActivityIcon from '@atlaskit/icon/glyph/activity'
+
+<ActivityIcon label="Activity">
+
+<Button iconLeft={<ActivityIcon label="Activity">} />
 
-Will catch deprecated token usage and autofix a replacement.
+<ButtonItem iconBefore={<ActivityIcon label="">}>
+  My activity
+</ButtonItem>
+```
 
-It's recommended to set this rule to "warn" on error to allow for new and old tokens to exist side-by-side for the duration of the deprecation period and avoid big-bang migrations.
+## no-banned-imports
 
-Once the deprecation period is over for a token, it will be moved into a `deleted` state, at which point the counterpart of this rule `eslint-plugin-design-system/no-unsafe-design-token-usage` will begin to throw errors.
+Using private or experimental packages is dangerous as they are not supported across major versions meaning you will not be able to migrate easily causing friction for yourself and the Atlassian Design System team.
 
-Run `eslint --fix` to automatically apply replacement tokens.
+<h3>Examples</h3>
 
-<h3 id="no-deprecated-design-token-usage-dont">Don't</h3>
+Anything that is considered private or experimental will be marked as violations.
 
-Don't use deprecated tokens.
+#### Incorrect
 
-```jsx
-import { token } from '@atlaskit/tokens';
+```ts
+import noop from '@atlaskit/ds-lib/noop';
+                  ^^^^^^^^^^^^^^^^^^^^^
 
-css({
-  color: token('i.am.deprecated'), // will warn on deprecated tokens
-});
+import { Text } from '@atlaskit/ds-explorations';
+                      ^^^^^^^^^^^^^^^^^^^^^^^^^
 ```
 
-## no-unsafe-design-token-usage
+## no-deprecated-apis
 
-Ensures usages of the `token` function are done correctly, so that current token names are being used, and the resulting `var(--some-token)` statements aren't being used. This ruleset is great for codebases that have already adopted tokens.
+Props 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.
 
-<h3 id="no-unsafe-design-token-usage-do">Do</h3>
+<h3>Examples</h3>
 
-Use the `token` function and token naming functions correctly.
+Anything that can be used as props from Atlassian Design System components can be violations when marked as deprecated.
 
-```jsx
-import { token } from '@atlaskit/tokens';
+#### Incorrect
 
-css({
-  boxShadow: token('elevation.shadow.card'),
-});
+```tsx
+<ButtonItem cssFn={cssFn()} />
+            ^^^^
+
+<Drawer overrides={overrides} />
+        ^^^^^^^^^
 ```
 
-```jsx
-import { token } from '@atlaskit/tokens';
+<h3>Options</h3>
 
-css`
-  color: ${(token('color.text.highemphasis'), N20)};
-`;
-```
+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.
 
-<h3 id="no-unsafe-design-token-usage-dont">Don't</h3>
+#### deprecatedConfig
 
-Don’t use outdated token names, or use tokens without the `token` function.
+The following fields can be defined in the config:
 
-```jsx
-const textColor = 'red';
+- `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`.
 
-css({
-  color: textColor,
-         ^^^^^^^^^
-});
+```json
+{
+  "cssFn": [
+    {
+      "moduleSpecifier": "@atlaskit/menu"
+    }
+  ]
+}
 ```
 
-```jsx
-css({
-  boxShadow: '0px 1px 1px var(--ds-accent-subtleBlue)',
-                          ^^^^^^^^^^^^^^^^^^^^^^^^^^
-})
+```js
+import { configs } from '@atlaskit/eslint-plugin-design-system';
+
+module.exports = {
+  rules: {
+    '@atlaskit/design-system/no-deprecated-api': [
+      'error',
+      {
+        deprecatedConfig: {
+          cssFn: [
+            {
+              moduleSpecifier: '@atlaskit/menu',
+            },
+          ],
+        },
+      },
+    ],
+  },
+};
 ```
 
-## icon-label
+The plugin also provides a `filterActionableDeprecations` util function that accepts the `deprecated APIs config` and your root `package.json` as params and will filter the default deprecated APIs config based on the package versions installed.
 
-Enforces accessible usage of icon labels when composed with other Design System components.
+```js
+import { configs, filterActionableDeprecations } from '@atlaskit/eslint-plugin-design-system';
+import packageJson from './package.json';
 
-<h3 id="icon-label-do">Do</h3>
+rules: {
+  '@atlaskit/design-system/no-deprecated-api': ['error', {
+    'deprecatedConfig': filterActionableDeprecations(configs.deprecatedConfig, packageJson),
+  }]
+}
+```
 
-Use the icon label prop to ensure accessibility of Design System icons.
+## no-deprecated-design-token-usage
 
-```jsx
-import ActivityIcon from '@atlaskit/icon/glyph/activity'
+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.
 
-<ActivityIcon label="Activity">
-```
+<h3>Examples</h3>
 
-```jsx
-import ActivityIcon from '@atlaskit/icon/glyph/activity'
+This rule will mark usage of deprecated design tokens as violations.
 
-<Button iconLeft={<ActivityIcon label="Activity">} />
-```
+<h3>Incorrect</h3>
 
-```jsx
-import ActivityIcon from '@atlaskit/icon/glyph/activity'
+```js
+import { token } from '@atlaskit/tokens';
 
-<ButtonItem iconBefore={<ActivityIcon label="">}>
-  My activity
-</ButtonItem>
+css({ color: token('i.am.deprecated') });
+                    ^^^^^^^^^^^^^^^
+css({ color: token('i.am.a.token') });
+                    ^^^^^^^^^^^^^
 ```
 
-<h3 id="icon-label-dont">Don't</h3>
+<h3>Options</h3>
 
-Don't ignore labels for icons.
+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.
 
-```jsx
-import ActivityIcon from '@atlaskit/icon/glyph/activity'
+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.
 
-<ActivityIcon>
-^^^^^^^^^^^^^^ missing `label` prop
-```
+Running `eslint --fix` will automatically apply replacement tokens if present.
 
-```jsx
-import ActivityIcon from '@atlaskit/icon/glyph/activity'
+## no-deprecated-imports
 
-<Button iconLeft={<ActivityIcon label="">} />
-                                ^^^^^ label should be defined
-```
+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.
 
-```jsx
-import ActivityIcon from '@atlaskit/icon/glyph/activity'
+<h3>Examples</h3>
 
-<ButtonItem iconBefore={<ActivityIcon label="">}>
-                                      ^^^^^ label should not be defined
-  My activity
-</ButtonItem>
+This rule will mark usage of deprecated modules as violations.
+
+#### Incorrect
+
+```ts
+import Item from '@atlaskit/item';
+                  ^^^^^^^^^^^^^^
+import GlobalNav from '@atlaskit/global-navigation';
+                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
 ```
 
-## no-banned-imports
+<h3>Options</h3>
 
-Prevents usage of private or experimental Atlassian Design System packages.
+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.
 
-<h3 id="no-banned-imports-dont">Don't</h3>
+#### deprecatedConfig
 
-Don't import or use private or experimental ADS packages.
+The following fields can be defined in the config:
 
-```ts
-import noop from '@atlaskit/ds-lib/noop';
-                  ^^^^^^^^^^^^^^^^^^^^^
+- `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."
+  }
+}
 ```
 
-```ts
-import { Text } from '@atlaskit/ds-explorations';
-                      ^^^^^^^^^^^^^^^^^^^^^^^^^
+```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.",
+          },
+        },
+      },
+    ],
+  },
+};
 ```
 
-## no-deprecated-api-usage
+## no-margin
 
-Ensures usage of current Atlassian Design System APIs.
+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.
 
-<h3 id="no-deprecated-api-usage-do">Do</h3>
+<h3>Examples</h3>
 
-```jsx
-import { SomeElement } from 'some-other-library';
+This rule will mark all margin use as violations.
 
-const Element = () => <SomeElement cssFn={cssFn()} />;
+#### Incorrect
+
+```tsx
+css({ margin: '10px' });
 ```
 
-```jsx
-import { ButtonItem } from '@atlaskit/menu';
+#### Correct
 
-const Element = () => <ButtonItem />;
+```tsx
+css({ gap: token('spacing.100') });
 ```
 
-```jsx
-import Drawer from '@atlaskit/drawer';
+## 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.
 
-const Element = () => <Drawer />;
-```
+<h3>Examples</h3>
 
-<h3 id="no-deprecated-api-usage-dont">Don't</h3>
+This rule will mark design token usage that is not statically and locally analyzable,
+as well as design tokens that are considered deleted.
 
-```jsx
-import { ButtonItem } from '@atlaskit/menu';
+<h3>Incorrect</h3>
 
-const Element = () => (
-  <ButtonItem cssFn={cssFn()} />
-              ^^^^
-);
-```
+```js
+const textColor = 'red';
 
-```jsx
-import Drawer from '@atlaskit/drawer';
+css({ color: textColor });
+             ^^^^^^^^^ must be a string literal
+```
 
-const Element = () => (
-  <Drawer overrides={overrides} />
-          ^^^^^^^^^
-);
+```js
+css({ boxShadow: '0px 1px 1px var(--ds-accent-subtleBlue)' });
+                              ^^^^^^^^^^^^^^^^^^^^^^^^^^ must use the token() function
 ```
 
-## no-deprecated-imports
+<h3>Correct</h3>
 
-Ensures usage of current Atlassian Design System dependencies.
+```js
+import { token } from '@atlaskit/tokens';
 
-<h3 id="no-deprecated-imports-do">Do</h3>
+css({ boxShadow: token('elevation.shadow.card') });
 
-```ts
-import Modal from '@atlaskit/modal-dialog';
+css`
+  color: ${(token('color.text.highemphasis'), N20)};
+`;
 ```
 
-```ts
-import { ButtonItem } from '@atlaskit/menu';
+<h3>Options</h3>
+
+This rule comes with options to aid in migrating to design tokens.
+
+#### shouldEnforceFallbacks
+
+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.
+
+## 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.
+
+<h3>Examples</h3>
+
+This rule marks code as violations when it can be replaced 1:1 with a primitive component.
+
+#### Incorrect
+
+```js
+<div />
+^^^^^^^
+
+<Component>
+  <div css={someStyles}></div>
+  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+</Component>
 ```
 
-<h3 id="no-deprecated-imports-dont">Don't</h3>
+#### Correct
 
-```ts
-import Item from '@atlaskit/item';
-                  ^^^^^^^^^^^^^^
+```js
+<Box />
 ```
 
-```ts
-import GlobalNav from '@atlaskit/global-navigation';
-                      ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+```js
+<Component>
+  <Box css={someStyles}></Box>
+</Component>
 ```
 
 ## use-visually-hidden
 
-This rule makes Design System consumers aware of existing solutions.
+Using the visually hidden component allows you to delete bespoke or legacy theme code and replace it with a ready made solution by the Atlassian Design System Team.
 
-<h3 id="use-visually-hidden-do">Do</h3>
+<h3>Examples</h3>
 
-```jsx
-import VisuallyHidden from '@atlaskit/visually-hidden';
-```
+This rule marks code as violations when it can be replaced 1:1 with the visually hidden component.
 
-<h3 id="use-visually-hidden-dont">Don't</h3>
+#### Incorrect
 
-```jsx
+```js
 import { css } from '@emotion/core';
+import { visuallyHidden } from '@atlaskit/theme/constants';
 
 const visuallyHiddenStyles = css({
   width: '1px',
@@ -363,28 +445,15 @@ const visuallyHiddenStyles = css({
   overflow: 'hidden',
   whiteSpace: 'nowrap',
 });
-^^^^
-```
 
-```jsx
-import styled from '@emotion/styled';
-
-const VisuallyHidden = styled.span`
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  position: absolute;
-  border: 0;
-  clip: rect(1px, 1px, 1px, 1px);
-  overflow: hidden;
-  whiteSpace: nowrap;
-`;
-^^^^
+const VisuallyHidden = styled.span`${visuallyHidden()}`;
+                                     ^^^^^^^^^^^^^^
 ```
 
-```jsx
-import { visuallyHidden } from '@atlaskit/theme/constants';
+#### Correct
 
-const VisuallyHidden = styled.span`${visuallyHidden()}`;
-                                     ^^^^^^^^^^^^^^
+```js
+import VisuallyHidden from '@atlaskit/visually-hidden';
 ```
+
+<!-- END_RULE_CONTENT_CODEGEN -->

package/dist/cjs/rules/ensure-design-token-usage-spacing/utils.js

@@ -28,7 +28,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _tokensRaw = require("@atlaskit/tokens/tokens-raw");
 var typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
-var properties = ['padding', 'paddingBlock', 'paddingInline', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd', 'margin', 'gap', 'rowGap', 'gridRowGap', 'columnGap', 'gridColumnGap'];
+var properties = ['padding', 'paddingBlock', 'paddingInline', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd', 'margin', 'gap', 'rowGap', 'gridRowGap', 'columnGap', 'gridColumnGap', 'top', 'left', 'right', 'bottom', 'inlineStart', 'inlineEnd', 'blockStart', 'blockEnd', 'outline-offset'];
 /**
  * Currently we have a wide range of experimental spacing tokens that we are testing.
  * We only want transforms to apply to the stable scale values, not the rest.

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
-	"version": "4.19.0",
+	"version": "4.20.0",
 	"sideEffects": false
 }

package/dist/es2019/rules/ensure-design-token-usage-spacing/utils.js

@@ -1,7 +1,7 @@
 import { callExpression, identifier, insertAtStartOfFile, insertImportDeclaration, isNodeOfType, literal } from 'eslint-codemod-utils';
 import { spacing as spacingScale, typography as typographyTokens } from '@atlaskit/tokens/tokens-raw';
 const typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
-const properties = ['padding', 'paddingBlock', 'paddingInline', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd', 'margin', 'gap', 'rowGap', 'gridRowGap', 'columnGap', 'gridColumnGap'];
+const properties = ['padding', 'paddingBlock', 'paddingInline', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd', 'margin', 'gap', 'rowGap', 'gridRowGap', 'columnGap', 'gridColumnGap', 'top', 'left', 'right', 'bottom', 'inlineStart', 'inlineEnd', 'blockStart', 'blockEnd', 'outline-offset'];
 /**
  * Currently we have a wide range of experimental spacing tokens that we are testing.
  * We only want transforms to apply to the stable scale values, not the rest.

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
-	"version": "4.19.0",
+	"version": "4.20.0",
 	"sideEffects": false
 }

package/dist/esm/rules/ensure-design-token-usage-spacing/utils.js

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { callExpression, identifier, insertAtStartOfFile, insertImportDeclaration, isNodeOfType, literal } from 'eslint-codemod-utils';
 import { spacing as spacingScale, typography as typographyTokens } from '@atlaskit/tokens/tokens-raw';
 var typographyProperties = ['fontSize', 'fontWeight', 'fontFamily', 'lineHeight'];
-var properties = ['padding', 'paddingBlock', 'paddingInline', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd', 'margin', 'gap', 'rowGap', 'gridRowGap', 'columnGap', 'gridColumnGap'];
+var properties = ['padding', 'paddingBlock', 'paddingInline', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd', 'margin', 'gap', 'rowGap', 'gridRowGap', 'columnGap', 'gridColumnGap', 'top', 'left', 'right', 'bottom', 'inlineStart', 'inlineEnd', 'blockStart', 'blockEnd', 'outline-offset'];
 /**
  * Currently we have a wide range of experimental spacing tokens that we are testing.
  * We only want transforms to apply to the stable scale values, not the rest.

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
-	"version": "4.19.0",
+	"version": "4.20.0",
 	"sideEffects": false
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/eslint-plugin-design-system",
   "description": "The essential plugin for use with the Atlassian Design System.",
-  "version": "4.19.0",
+  "version": "4.20.0",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"