@atlaskit/eslint-plugin-design-system 13.40.4 → 13.41.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 13.41.1
+
+### Patch Changes
+
+- [`af619ffaf19e1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/af619ffaf19e1) -
+  Add `no-icon-spacing-prop` ESLint rule to flag and suggest migration of deprecated `spacing` prop
+  on icon components.
+- Updated dependencies
+
+## 13.41.0
+
+### Minor Changes
+
+- [`dcbccb3da71a6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dcbccb3da71a6) -
+  The `use-side-nav-items-package` rule has been removed.
+
 ## 13.40.4
 
 ### Patch Changes

package/README.md

@@ -82,6 +82,7 @@ module.exports = {
 | <a href="./packages/design-system/eslint-plugin/src/rules/no-html-select/README.md">no-html-select</a>                                                             | Discourage direct usage of HTML select elements in favor of the Atlassian Design System select component.                                                                                                                                                                                                           | Yes         |         | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/no-html-text-input/README.md">no-html-text-input</a>                                                     | Discourage direct usage of HTML text input elements in favor of the Atlassian Design System textfield component.                                                                                                                                                                                                    | Yes         |         | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/no-html-textarea/README.md">no-html-textarea</a>                                                         | Discourage direct usage of HTML textarea elements in favor of the Atlassian Design System textarea component.                                                                                                                                                                                                       | Yes         |         | Yes         |
+| <a href="./packages/design-system/eslint-plugin/src/rules/no-icon-spacing-prop/README.md">no-icon-spacing-prop</a>                                                 | Disallows usage of the deprecated spacing prop on new icons. Use Box with cssMap for spacing instead.                                                                                                                                                                                                               | Yes         |         | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/no-invalid-css-map/README.md">no-invalid-css-map</a>                                                     | Checks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript's type-checking.                                                                                                                                                                                          | Yes         |         |             |
 | <a href="./packages/design-system/eslint-plugin/src/rules/no-keyframes-tagged-template-expression/README.md">no-keyframes-tagged-template-expression</a>           | Disallows any `keyframe` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                     |             | Yes     |             |
 | <a href="./packages/design-system/eslint-plugin/src/rules/no-legacy-icons/README.md">no-legacy-icons</a>                                                           | Enforces no legacy icons are used.                                                                                                                                                                                                                                                                                  |             | Yes     | Yes         |
@@ -117,7 +118,6 @@ module.exports = {
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-primitives/README.md">use-primitives</a>                                                             | Encourage the usage of primitives components.                                                                                                                                                                                                                                                                       |             | Yes     | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-primitives-text/README.md">use-primitives-text</a>                                                   | Encourage the usage of text components.                                                                                                                                                                                                                                                                             | Yes         | Yes     | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-should-render-to-parent/README.md">use-should-render-to-parent</a>                                   | Encourages makers to use the `shouldRenderToParent` where possible in Atlassian Design System `Popup` and `DropdownMenu` components.                                                                                                                                                                                | Yes         |         | Yes         |
-| <a href="./packages/design-system/eslint-plugin/src/rules/use-side-nav-items-package/README.md">use-side-nav-items-package</a>                                     | Use @atlaskit/side-nav-items instead of @atlaskit/navigation-system/side-nav-items.                                                                                                                                                                                                                                 | Yes         | Yes     | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-simple-field/README.md">use-simple-field</a>                                                         | Encourage use of simple field for better developer experience and accessibility.                                                                                                                                                                                                                                    | Yes         |         | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-simple-form/README.md">use-simple-form</a>                                                           | Encourage use of simple form for better developer experience and accessibility.                                                                                                                                                                                                                                     | Yes         |         | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-spotlight-package/README.md">use-spotlight-package</a>                                               | Discourage the use of @atlaskit/onboarding in favor of @atlaskit/spotlight.                                                                                                                                                                                                                                         |             | Yes     | Yes         |

package/dist/cjs/presets/all-flat.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::82ab0b678e51fc2eba27b6725ea60840>>
+ * @codegen <<SignedSource::6a7b233fc5b211ee3868899e1525bbdb>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -44,6 +44,7 @@ var rules = {
     '@atlaskit/design-system/no-html-select': 'warn',
     '@atlaskit/design-system/no-html-text-input': 'warn',
     '@atlaskit/design-system/no-html-textarea': 'warn',
+    '@atlaskit/design-system/no-icon-spacing-prop': 'warn',
     '@atlaskit/design-system/no-invalid-css-map': ['error', {
       allowedFunctionCalls: [['@atlaskit/tokens', 'token']]
     }],
@@ -81,7 +82,6 @@ var rules = {
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',
     '@atlaskit/design-system/use-should-render-to-parent': 'warn',
-    '@atlaskit/design-system/use-side-nav-items-package': 'warn',
     '@atlaskit/design-system/use-simple-field': 'warn',
     '@atlaskit/design-system/use-simple-form': 'warn',
     '@atlaskit/design-system/use-spotlight-package': 'warn',

package/dist/cjs/presets/all.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7ee6b956e557a4528e187fef69ff1014>>
+ * @codegen <<SignedSource::69b963bac3d18247c1cba21a3bca7bb4>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -43,6 +43,7 @@ var rules = {
     '@atlaskit/design-system/no-html-select': 'warn',
     '@atlaskit/design-system/no-html-text-input': 'warn',
     '@atlaskit/design-system/no-html-textarea': 'warn',
+    '@atlaskit/design-system/no-icon-spacing-prop': 'warn',
     '@atlaskit/design-system/no-invalid-css-map': ['error', {
       allowedFunctionCalls: [['@atlaskit/tokens', 'token']]
     }],
@@ -80,7 +81,6 @@ var rules = {
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',
     '@atlaskit/design-system/use-should-render-to-parent': 'warn',
-    '@atlaskit/design-system/use-side-nav-items-package': 'warn',
     '@atlaskit/design-system/use-simple-field': 'warn',
     '@atlaskit/design-system/use-simple-form': 'warn',
     '@atlaskit/design-system/use-spotlight-package': 'warn',

package/dist/cjs/presets/recommended-flat.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7c689115fea10ca7f4a4d36b687d0d4b>>
+ * @codegen <<SignedSource::6f0d931df90a4eea8dc4201b3a8e0866>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -35,6 +35,7 @@ var rules = {
     '@atlaskit/design-system/no-html-select': 'warn',
     '@atlaskit/design-system/no-html-text-input': 'warn',
     '@atlaskit/design-system/no-html-textarea': 'warn',
+    '@atlaskit/design-system/no-icon-spacing-prop': 'warn',
     '@atlaskit/design-system/no-invalid-css-map': ['error', {
       allowedFunctionCalls: [['@atlaskit/tokens', 'token']]
     }],
@@ -63,7 +64,6 @@ var rules = {
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',
     '@atlaskit/design-system/use-should-render-to-parent': 'warn',
-    '@atlaskit/design-system/use-side-nav-items-package': 'warn',
     '@atlaskit/design-system/use-simple-field': 'warn',
     '@atlaskit/design-system/use-simple-form': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',

package/dist/cjs/presets/recommended.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::70131b79da4231aaa59e2822b38790c1>>
+ * @codegen <<SignedSource::aa118aeb6a9c0d954f6e3a5ea7bd10af>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -34,6 +34,7 @@ var rules = {
     '@atlaskit/design-system/no-html-select': 'warn',
     '@atlaskit/design-system/no-html-text-input': 'warn',
     '@atlaskit/design-system/no-html-textarea': 'warn',
+    '@atlaskit/design-system/no-icon-spacing-prop': 'warn',
     '@atlaskit/design-system/no-invalid-css-map': ['error', {
       allowedFunctionCalls: [['@atlaskit/tokens', 'token']]
     }],
@@ -62,7 +63,6 @@ var rules = {
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',
     '@atlaskit/design-system/use-should-render-to-parent': 'warn',
-    '@atlaskit/design-system/use-side-nav-items-package': 'warn',
     '@atlaskit/design-system/use-simple-field': 'warn',
     '@atlaskit/design-system/use-simple-form': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',

package/dist/cjs/rules/index.codegen.js

@@ -38,6 +38,7 @@ var _noHtmlRange = _interopRequireDefault(require("./no-html-range"));
 var _noHtmlSelect = _interopRequireDefault(require("./no-html-select"));
 var _noHtmlTextInput = _interopRequireDefault(require("./no-html-text-input"));
 var _noHtmlTextarea = _interopRequireDefault(require("./no-html-textarea"));
+var _noIconSpacingProp = _interopRequireDefault(require("./no-icon-spacing-prop"));
 var _noInvalidCssMap = _interopRequireDefault(require("./no-invalid-css-map"));
 var _noKeyframesTaggedTemplateExpression = _interopRequireDefault(require("./no-keyframes-tagged-template-expression"));
 var _noLegacyIcons = _interopRequireDefault(require("./no-legacy-icons"));
@@ -73,7 +74,6 @@ var _usePopupLabel = _interopRequireDefault(require("./use-popup-label"));
 var _usePrimitives = _interopRequireDefault(require("./use-primitives"));
 var _usePrimitivesText = _interopRequireDefault(require("./use-primitives-text"));
 var _useShouldRenderToParent = _interopRequireDefault(require("./use-should-render-to-parent"));
-var _useSideNavItemsPackage = _interopRequireDefault(require("./use-side-nav-items-package"));
 var _useSimpleField = _interopRequireDefault(require("./use-simple-field"));
 var _useSimpleForm = _interopRequireDefault(require("./use-simple-form"));
 var _useSpotlightPackage = _interopRequireDefault(require("./use-spotlight-package"));
@@ -84,7 +84,7 @@ var _useTokensTypography = _interopRequireDefault(require("./use-tokens-typograp
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9644eafd202e31d1b6f6c9b86ad519a2>>
+ * @codegen <<SignedSource::5d0d1213db83267889fa81e0aab419f7>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -122,6 +122,7 @@ var rules = exports.rules = {
   'no-html-select': _noHtmlSelect.default,
   'no-html-text-input': _noHtmlTextInput.default,
   'no-html-textarea': _noHtmlTextarea.default,
+  'no-icon-spacing-prop': _noIconSpacingProp.default,
   'no-invalid-css-map': _noInvalidCssMap.default,
   'no-keyframes-tagged-template-expression': _noKeyframesTaggedTemplateExpression.default,
   'no-legacy-icons': _noLegacyIcons.default,
@@ -157,7 +158,6 @@ var rules = exports.rules = {
   'use-primitives': _usePrimitives.default,
   'use-primitives-text': _usePrimitivesText.default,
   'use-should-render-to-parent': _useShouldRenderToParent.default,
-  'use-side-nav-items-package': _useSideNavItemsPackage.default,
   'use-simple-field': _useSimpleField.default,
   'use-simple-form': _useSimpleForm.default,
   'use-spotlight-package': _useSpotlightPackage.default,

package/dist/cjs/rules/no-icon-spacing-prop/helpers.js

@@ -0,0 +1,250 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TOKEN_IMPORT_MODULE = exports.SPACING_TO_PADDING = exports.CSS_IMPORT_MODULE = exports.CSSMAP_VARIABLE_NAME = exports.BOX_IMPORT_MODULE_NON_COMPILED = exports.BOX_IMPORT_MODULE = void 0;
+exports.getCssMapKey = getCssMapKey;
+exports.getIconSize = getIconSize;
+exports.getSpacingAttribute = getSpacingAttribute;
+exports.getStaticAttributeValue = getStaticAttributeValue;
+exports.hasSpreadProps = hasSpreadProps;
+exports.upsertBoxImport = upsertBoxImport;
+exports.upsertCssMapImport = upsertCssMapImport;
+exports.upsertCssMapVariable = upsertCssMapVariable;
+exports.upsertTokenImport = upsertTokenImport;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _contextCompat = require("@atlaskit/eslint-utils/context-compat");
+var ast = _interopRequireWildcard(require("../../ast-nodes"));
+var _import = require("../../ast-nodes/import");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var BOX_IMPORT_MODULE = exports.BOX_IMPORT_MODULE = '@atlaskit/primitives/compiled';
+var BOX_IMPORT_MODULE_NON_COMPILED = exports.BOX_IMPORT_MODULE_NON_COMPILED = '@atlaskit/primitives';
+var TOKEN_IMPORT_MODULE = exports.TOKEN_IMPORT_MODULE = '@atlaskit/tokens';
+var CSS_IMPORT_MODULE = exports.CSS_IMPORT_MODULE = '@atlaskit/css';
+var CSSMAP_VARIABLE_NAME = exports.CSSMAP_VARIABLE_NAME = 'iconSpacingStyles';
+
+/**
+ * Padding token mapping based on icon size and spacing value.
+ * Same mapping as the codemod `icon-spacing-to-box-primitive`.
+ */
+var SPACING_TO_PADDING = exports.SPACING_TO_PADDING = {
+  medium: {
+    compact: 'space.050',
+    spacious: 'space.050'
+  },
+  small: {
+    compact: 'space.025',
+    spacious: 'space.075'
+  }
+};
+
+/**
+ * Maps a padding token to a cssMap key name.
+ * e.g. 'space.050' → 'space050'
+ */
+function getCssMapKey(paddingToken) {
+  return paddingToken.replace('space.', 'space');
+}
+
+/**
+ * Returns the `spacing` JSXAttribute from an icon element, or undefined.
+ */
+function getSpacingAttribute(node) {
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(node.openingElement, 'JSXOpeningElement')) {
+    return undefined;
+  }
+  return node.openingElement.attributes.find(function (a) {
+    return a.type === 'JSXAttribute' && a.name.name === 'spacing';
+  });
+}
+
+/**
+ * Returns the static string value of a JSXAttribute, or undefined if dynamic.
+ */
+function getStaticAttributeValue(attr) {
+  if (attr.value && attr.value.type === 'Literal' && typeof attr.value.value === 'string') {
+    return attr.value.value;
+  }
+  return undefined;
+}
+
+/**
+ * Returns the static `size` prop value, defaulting to 'medium' if not present.
+ */
+function getIconSize(node) {
+  if (!(0, _eslintCodemodUtils.isNodeOfType)(node.openingElement, 'JSXOpeningElement')) {
+    return 'medium';
+  }
+  var sizeAttr = node.openingElement.attributes.find(function (a) {
+    return a.type === 'JSXAttribute' && a.name.name === 'size';
+  });
+  if (!sizeAttr) {
+    return 'medium';
+  }
+  return getStaticAttributeValue(sizeAttr);
+}
+
+/**
+ * Returns true if the element has any JSXSpreadAttribute.
+ */
+function hasSpreadProps(node) {
+  return node.openingElement.attributes.some(function (a) {
+    return a.type === 'JSXSpreadAttribute';
+  });
+}
+
+/**
+ * Upserts `Box` from `@atlaskit/primitives/compiled`, handling:
+ * 1. Already imported from `/compiled` → add Box if missing
+ * 2. Import from `@atlaskit/primitives` (non-compiled) → migrate path + add Box
+ * 3. No import → insert new `import { Box } from '@atlaskit/primitives/compiled'`
+ */
+function upsertBoxImport(context, fixer) {
+  var root = (0, _contextCompat.getSourceCode)(context).ast.body;
+  var findExactImports = function findExactImports(module) {
+    return root.filter(function (node) {
+      return node.type === 'ImportDeclaration' && node.source.value === module;
+    });
+  };
+  var compiledImports = findExactImports(BOX_IMPORT_MODULE);
+  if (compiledImports.length > 0) {
+    var decl = compiledImports[0];
+    if (_import.Import.containsNamedSpecifier(decl, 'Box')) {
+      return undefined;
+    }
+    var specifiers = decl.specifiers.filter(function (s) {
+      return s.type === 'ImportSpecifier';
+    }).map(function (s) {
+      return s.local.name;
+    });
+    specifiers.push('Box');
+    return fixer.replaceText(decl, "import { ".concat(specifiers.join(', '), " } from '").concat(BOX_IMPORT_MODULE, "';"));
+  }
+  var nonCompiledImports = findExactImports(BOX_IMPORT_MODULE_NON_COMPILED);
+  if (nonCompiledImports.length > 0) {
+    var _decl = nonCompiledImports[0];
+    var _specifiers = _decl.specifiers.filter(function (s) {
+      return s.type === 'ImportSpecifier';
+    }).map(function (s) {
+      return s.local.name;
+    });
+    if (!_specifiers.includes('Box')) _specifiers.push('Box');
+    return fixer.replaceText(_decl, "import { ".concat(_specifiers.join(', '), " } from '").concat(BOX_IMPORT_MODULE, "';"));
+  }
+  return ast.Root.upsertNamedImportDeclaration({
+    module: BOX_IMPORT_MODULE,
+    specifiers: ['Box']
+  }, context, fixer);
+}
+
+/**
+ * Upserts `cssMap` from `@atlaskit/css`, handling:
+ * 1. Already imported → no-op
+ * 2. `@atlaskit/css` exists but missing `cssMap` → add specifier
+ * 3. No import → insert new `import { cssMap } from '@atlaskit/css'`
+ */
+function upsertCssMapImport(context, fixer) {
+  var root = (0, _contextCompat.getSourceCode)(context).ast.body;
+  var cssImports = root.filter(function (node) {
+    return node.type === 'ImportDeclaration' && node.source.value === CSS_IMPORT_MODULE;
+  });
+  if (cssImports.length > 0) {
+    var decl = cssImports[0];
+    var hasCssMap = _import.Import.containsNamedSpecifier(decl, 'cssMap');
+    if (hasCssMap) {
+      return undefined;
+    }
+    var specifiers = decl.specifiers.filter(function (s) {
+      return s.type === 'ImportSpecifier';
+    }).map(function (s) {
+      return s.local.name;
+    });
+    if (!hasCssMap) specifiers.push('cssMap');
+    return fixer.replaceText(decl, "import { ".concat(specifiers.join(', '), " } from '").concat(CSS_IMPORT_MODULE, "';"));
+  }
+  return ast.Root.upsertNamedImportDeclaration({
+    module: CSS_IMPORT_MODULE,
+    specifiers: ['cssMap']
+  }, context, fixer);
+}
+
+/**
+ * Upserts `token` from `@atlaskit/tokens`, handling:
+ * 1. Already imported → no-op
+ * 2. `@atlaskit/tokens` exists but missing `token` → add specifier
+ * 3. No import → insert new `import { token } from '@atlaskit/tokens'`
+ */
+function upsertTokenImport(context, fixer) {
+  var root = (0, _contextCompat.getSourceCode)(context).ast.body;
+  var tokenImports = root.filter(function (node) {
+    return node.type === 'ImportDeclaration' && node.source.value === TOKEN_IMPORT_MODULE;
+  });
+  if (tokenImports.length > 0) {
+    var decl = tokenImports[0];
+    if (_import.Import.containsNamedSpecifier(decl, 'token')) {
+      return undefined;
+    }
+    var specifiers = decl.specifiers.filter(function (s) {
+      return s.type === 'ImportSpecifier';
+    }).map(function (s) {
+      return s.local.name;
+    });
+    specifiers.push('token');
+    return fixer.replaceText(decl, "import { ".concat(specifiers.join(', '), " } from '").concat(TOKEN_IMPORT_MODULE, "';"));
+  }
+  return ast.Root.upsertNamedImportDeclaration({
+    module: TOKEN_IMPORT_MODULE,
+    specifiers: ['token']
+  }, context, fixer);
+}
+
+/**
+ * Inserts or updates `const iconSpacingStyles = cssMap({ spaceXXX: { padding: token('space.XXX') } })`
+ * after the last import statement.
+ *
+ * If `iconSpacingStyles` already exists, adds the new key to the existing cssMap object.
+ * If it doesn't exist, inserts a new declaration after the last import.
+ */
+function upsertCssMapVariable(context, fixer, paddingToken) {
+  var sourceCode = (0, _contextCompat.getSourceCode)(context);
+  var body = sourceCode.ast.body;
+  var key = getCssMapKey(paddingToken);
+  var keyValuePair = "  ".concat(key, ": { paddingTop: token('").concat(paddingToken, "'), paddingRight: token('").concat(paddingToken, "'), paddingBottom: token('").concat(paddingToken, "'), paddingLeft: token('").concat(paddingToken, "') }");
+
+  // Check if iconSpacingStyles cssMap variable already exists
+  var existingVar = body.find(function (node) {
+    var _node$declarations$, _node$declarations$0$;
+    return node.type === 'VariableDeclaration' && ((_node$declarations$ = node.declarations[0]) === null || _node$declarations$ === void 0 ? void 0 : _node$declarations$.type) === 'VariableDeclarator' && ((_node$declarations$0$ = node.declarations[0].id) === null || _node$declarations$0$ === void 0 ? void 0 : _node$declarations$0$.name) === CSSMAP_VARIABLE_NAME;
+  });
+  if (existingVar) {
+    // Check if the key already exists in the cssMap
+    var varText = sourceCode.getText(existingVar);
+    if (varText.includes(key + ':') || varText.includes("'".concat(key, "'"))) {
+      return undefined;
+    }
+    // Add the key to the existing cssMap — insert before the closing }
+    var closingBrace = sourceCode.getText(existingVar).lastIndexOf('}');
+    var existingVarStart = existingVar.range[0];
+    return fixer.insertTextAfterRange([existingVarStart, existingVarStart + closingBrace], ",\n".concat(keyValuePair, "\n"));
+  }
+
+  // Find last import to insert after it
+  var lastImport = (0, _toConsumableArray2.default)(body).reverse().find(function (n) {
+    return n.type === 'ImportDeclaration';
+  });
+  var declaration = "\nconst ".concat(CSSMAP_VARIABLE_NAME, " = cssMap({\n").concat(keyValuePair, ",\n});");
+  if (lastImport) {
+    return fixer.insertTextAfter(lastImport, declaration);
+  }
+
+  // No imports — insert at the start of the file
+  var firstNode = body[0];
+  if (firstNode) {
+    return fixer.insertTextBefore(firstNode, declaration);
+  }
+  return undefined;
+}

package/dist/cjs/rules/no-icon-spacing-prop/index.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _isFromImportSource = require("../no-custom-icons/checks/is-from-import-source");
+var _createRule = require("../utils/create-rule");
+var _errorBoundary = require("../utils/error-boundary");
+var _helpers = require("./helpers");
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'no-icon-spacing-prop',
+    hasSuggestions: true,
+    type: 'suggestion',
+    docs: {
+      description: 'Disallows usage of the deprecated spacing prop on new icons. Use Box with cssMap for spacing instead.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      noSpacingProp: "The `spacing` prop on icon component '{{iconName}}' is deprecated. Wrap the icon in a `<Box xcss={iconSpacingStyles.spaceXXX}>` using `cssMap` from `@atlaskit/css` instead.",
+      noSpacingPropManual: "The `spacing` prop on icon component '{{iconName}}' is deprecated but cannot be auto-fixed ({{reason}}). Manually wrap the icon in a `<Box xcss={...}>` using `cssMap` from `@atlaskit/css`.",
+      suggestRemoveSpacing: 'Remove the `spacing` prop.',
+      suggestWrapInBox: 'Wrap in `<Box xcss={{{cssMapVarName}}.{{cssMapKey}}}>` and remove the `spacing` prop.'
+    }
+  },
+  create: function create(context) {
+    var isNewIcon = (0, _isFromImportSource.createIsFromImportSourceFor)(/^@(atlaskit\/icon|atlaskit\/icon-lab|atlassian\/icon-private)\/core\//);
+    return (0, _errorBoundary.errorBoundary)({
+      JSXElement: function JSXElement(node) {
+        var _SPACING_TO_PADDING$s;
+        if (!isNewIcon(node)) {
+          return;
+        }
+        var spacingAttr = (0, _helpers.getSpacingAttribute)(node);
+        if (!spacingAttr) {
+          return;
+        }
+        var iconName = node.openingElement.name.type === 'JSXIdentifier' ? node.openingElement.name.name : 'Unknown';
+        var spacingValue = (0, _helpers.getStaticAttributeValue)(spacingAttr);
+        var hasSpread = (0, _helpers.hasSpreadProps)(node);
+        if (!spacingValue || hasSpread) {
+          var reason = hasSpread ? 'spread props present' : 'dynamic spacing value';
+          context.report({
+            node: node.openingElement,
+            messageId: 'noSpacingPropManual',
+            data: {
+              iconName: iconName,
+              reason: reason
+            }
+          });
+          return;
+        }
+        if (spacingValue === 'none') {
+          context.report({
+            node: node.openingElement,
+            messageId: 'noSpacingProp',
+            data: {
+              iconName: iconName
+            },
+            suggest: [{
+              messageId: 'suggestRemoveSpacing',
+              fix: function fix(fixer) {
+                return fixer.remove(spacingAttr);
+              }
+            }]
+          });
+          return;
+        }
+        var size = (0, _helpers.getIconSize)(node);
+        if (!size || !((_SPACING_TO_PADDING$s = _helpers.SPACING_TO_PADDING[size]) !== null && _SPACING_TO_PADDING$s !== void 0 && _SPACING_TO_PADDING$s[spacingValue])) {
+          context.report({
+            node: node.openingElement,
+            messageId: 'noSpacingPropManual',
+            data: {
+              iconName: iconName,
+              reason: "unknown size '".concat(size, "' or spacing '").concat(spacingValue, "'")
+            }
+          });
+          return;
+        }
+        var paddingToken = _helpers.SPACING_TO_PADDING[size][spacingValue];
+        var cssMapKey = (0, _helpers.getCssMapKey)(paddingToken);
+        context.report({
+          node: node.openingElement,
+          messageId: 'noSpacingProp',
+          data: {
+            iconName: iconName
+          },
+          suggest: [{
+            messageId: 'suggestWrapInBox',
+            data: {
+              cssMapVarName: _helpers.CSSMAP_VARIABLE_NAME,
+              cssMapKey: cssMapKey
+            },
+            fix: function fix(fixer) {
+              var fixes = [];
+
+              // 1. Remove spacing prop
+              fixes.push(fixer.remove(spacingAttr));
+
+              // 2. Wrap in Box with cssMap reference
+              fixes.push(fixer.insertTextBefore(node, "<Box xcss={".concat(_helpers.CSSMAP_VARIABLE_NAME, ".").concat(cssMapKey, "}>")));
+              fixes.push(fixer.insertTextAfter(node, "</Box>"));
+
+              // 3. Insert/update cssMap variable after last import
+              var cssMapFix = (0, _helpers.upsertCssMapVariable)(context, fixer, paddingToken);
+              if (cssMapFix) {
+                fixes.push(cssMapFix);
+              }
+
+              // 4. Add/update @atlaskit/css import (cssMap)
+              var cssFix = (0, _helpers.upsertCssMapImport)(context, fixer);
+              if (cssFix) {
+                fixes.push(cssFix);
+              }
+
+              // 5. Add Box to @atlaskit/primitives/compiled
+              var boxFix = (0, _helpers.upsertBoxImport)(context, fixer);
+              if (boxFix) {
+                fixes.push(boxFix);
+              }
+
+              // 6. Add token from @atlaskit/tokens
+              var tokenFix = (0, _helpers.upsertTokenImport)(context, fixer);
+              if (tokenFix) {
+                fixes.push(tokenFix);
+              }
+              return fixes;
+            }
+          }]
+        });
+      },
+      ImportDeclaration: isNewIcon.importDeclarationHook
+    });
+  }
+});
+var _default = exports.default = rule;

package/dist/es2019/presets/all-flat.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::82ab0b678e51fc2eba27b6725ea60840>>
+ * @codegen <<SignedSource::6a7b233fc5b211ee3868899e1525bbdb>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -38,6 +38,7 @@ const rules = {
     '@atlaskit/design-system/no-html-select': 'warn',
     '@atlaskit/design-system/no-html-text-input': 'warn',
     '@atlaskit/design-system/no-html-textarea': 'warn',
+    '@atlaskit/design-system/no-icon-spacing-prop': 'warn',
     '@atlaskit/design-system/no-invalid-css-map': ['error', {
       allowedFunctionCalls: [['@atlaskit/tokens', 'token']]
     }],
@@ -75,7 +76,6 @@ const rules = {
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',
     '@atlaskit/design-system/use-should-render-to-parent': 'warn',
-    '@atlaskit/design-system/use-side-nav-items-package': 'warn',
     '@atlaskit/design-system/use-simple-field': 'warn',
     '@atlaskit/design-system/use-simple-form': 'warn',
     '@atlaskit/design-system/use-spotlight-package': 'warn',

package/dist/es2019/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7ee6b956e557a4528e187fef69ff1014>>
+ * @codegen <<SignedSource::69b963bac3d18247c1cba21a3bca7bb4>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -37,6 +37,7 @@ const rules = {
     '@atlaskit/design-system/no-html-select': 'warn',
     '@atlaskit/design-system/no-html-text-input': 'warn',
     '@atlaskit/design-system/no-html-textarea': 'warn',
+    '@atlaskit/design-system/no-icon-spacing-prop': 'warn',
     '@atlaskit/design-system/no-invalid-css-map': ['error', {
       allowedFunctionCalls: [['@atlaskit/tokens', 'token']]
     }],
@@ -74,7 +75,6 @@ const rules = {
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',
     '@atlaskit/design-system/use-should-render-to-parent': 'warn',
-    '@atlaskit/design-system/use-side-nav-items-package': 'warn',
     '@atlaskit/design-system/use-simple-field': 'warn',
     '@atlaskit/design-system/use-simple-form': 'warn',
     '@atlaskit/design-system/use-spotlight-package': 'warn',

package/dist/es2019/presets/recommended-flat.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7c689115fea10ca7f4a4d36b687d0d4b>>
+ * @codegen <<SignedSource::6f0d931df90a4eea8dc4201b3a8e0866>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -29,6 +29,7 @@ const rules = {
     '@atlaskit/design-system/no-html-select': 'warn',
     '@atlaskit/design-system/no-html-text-input': 'warn',
     '@atlaskit/design-system/no-html-textarea': 'warn',
+    '@atlaskit/design-system/no-icon-spacing-prop': 'warn',
     '@atlaskit/design-system/no-invalid-css-map': ['error', {
       allowedFunctionCalls: [['@atlaskit/tokens', 'token']]
     }],
@@ -57,7 +58,6 @@ const rules = {
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',
     '@atlaskit/design-system/use-should-render-to-parent': 'warn',
-    '@atlaskit/design-system/use-side-nav-items-package': 'warn',
     '@atlaskit/design-system/use-simple-field': 'warn',
     '@atlaskit/design-system/use-simple-form': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',