@atlaskit/eslint-plugin-design-system 10.16.0 → 10.17.1

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 10.17.1
+
+### Patch Changes
+
+- [#133643](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/133643)
+  [`1ab5ca9bddc97`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1ab5ca9bddc97) -
+  Updated the list of upcoming icons after a new set of icons were added
+- Updated dependencies
+
+## 10.17.0
+
+### Minor Changes
+
+- [#131211](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/131211)
+  [`9877a261592a7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9877a261592a7) -
+  Added an autofixer for `no-legacy-icons` eslint rule which migrates icons in the "Auto Migration"
+  category to new icons. Use `shouldUseMigrationPath` option to control the import path of the new
+  icon.
+
 ## 10.16.0
 
 ### Minor Changes

package/README.md

@@ -68,7 +68,7 @@ module.exports = {
 | <a href="./src/rules/no-html-button/README.md">no-html-button</a>                                                           | Discourage direct usage of HTML button elements in favor of Atlassian Design System button components.                                                                                                                                                                                                              | Yes         |         |             |
 | <a href="./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="./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="./src/rules/no-legacy-icons/README.md">no-legacy-icons</a>                                                         | Enforces no legacy icons are used.                                                                                                                                                                                                                                                                                  |             |         |             |
+| <a href="./src/rules/no-legacy-icons/README.md">no-legacy-icons</a>                                                         | Enforces no legacy icons are used.                                                                                                                                                                                                                                                                                  |             | Yes     |             |
 | <a href="./src/rules/no-margin/README.md">no-margin</a>                                                                     | Disallow using the margin CSS property.                                                                                                                                                                                                                                                                             |             |         |             |
 | <a href="./src/rules/no-nested-styles/README.md">no-nested-styles</a>                                                       | Disallows use of nested styles in `css` functions.                                                                                                                                                                                                                                                                  | Yes         |         |             |
 | <a href="./src/rules/no-physical-properties/README.md">no-physical-properties</a>                                           | Disallow physical properties and values in `css` function calls.                                                                                                                                                                                                                                                    |             | Yes     |             |

package/dist/cjs/rules/no-legacy-icons/checks.js

@@ -5,9 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createChecks = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _helpers = require("./helpers");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
@@ -17,15 +21,19 @@ var createChecks = exports.createChecks = function createChecks(context) {
     getPrimaryColor = _createHelpers.getPrimaryColor,
     getConfigFlag = _createHelpers.getConfigFlag;
   var legacyIconImports = {};
+  var migrationIconImports = {};
   var newButtonImports = new Set();
+  var legacyButtonImports = new Set();
   var errorsManual = {};
   var errorsAuto = {};
   var guidance = {};
+  var autoIconJSXElementOccurrenceCount = 0;
 
   // Extract parameters
   var shouldErrorForManualMigration = getConfigFlag('shouldErrorForManualMigration', true);
   var shouldErrorForAutoMigration = getConfigFlag('shouldErrorForAutoMigration', true);
   var isQuietMode = getConfigFlag('quiet', false);
+  var shouldUseMigrationPath = getConfigFlag('shouldUseMigrationPath', true);
 
   // Sorted list of ranges
   var errorRanges = [];
@@ -49,7 +57,8 @@ var createChecks = exports.createChecks = function createChecks(context) {
           if (spec.local.name) {
             legacyIconImports[spec.local.name] = {
               packageName: moduleSource,
-              exported: false
+              exported: false,
+              importNode: node
             };
           }
         }
@@ -60,6 +69,19 @@ var createChecks = exports.createChecks = function createChecks(context) {
       }
     }
 
+    // Find the imports for icons that import from migration path
+    if (moduleSource && typeof moduleSource === 'string' && (moduleSource.startsWith('@atlaskit/icon/core/migration/') || moduleSource.startsWith('@atlaskit/icon/utility/migration/')) && node.specifiers.length) {
+      node.specifiers.forEach(function (spec) {
+        if (spec.local.name) {
+          migrationIconImports[spec.local.name] = {
+            packageName: moduleSource,
+            exported: false,
+            importNode: node
+          };
+        }
+      });
+    }
+
     // Find the imports for new button and IconButton
     if (typeof moduleSource === 'string' && moduleSource.startsWith('@atlaskit/button/new') && node.specifiers.length) {
       var _iterator2 = _createForOfIteratorHelper(node.specifiers),
@@ -79,6 +101,24 @@ var createChecks = exports.createChecks = function createChecks(context) {
         _iterator2.f();
       }
     }
+
+    // Find the imports for legacy default button
+    if (typeof moduleSource === 'string' && (moduleSource === '@atlaskit/button' || moduleSource === '@atlaskit/button/standard-button' || moduleSource === '@atlaskit/button/loading-button' || moduleSource === '@atlaskit/button/custom-theme-button') && node.specifiers.length) {
+      var _iterator3 = _createForOfIteratorHelper(node.specifiers),
+        _step3;
+      try {
+        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
+          var _spec2 = _step3.value;
+          if (_spec2.type === 'ImportDefaultSpecifier') {
+            legacyButtonImports.add(_spec2.local.name);
+          }
+        }
+      } catch (err) {
+        _iterator3.e(err);
+      } finally {
+        _iterator3.f();
+      }
+    }
   };
 
   /**
@@ -88,11 +128,11 @@ var createChecks = exports.createChecks = function createChecks(context) {
   var checkVariableDeclarations = function checkVariableDeclarations(node) {
     if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'VariableDeclaration')) {
       var isExported = node.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'ExportNamedDeclaration');
-      var _iterator3 = _createForOfIteratorHelper(node.declarations),
-        _step3;
+      var _iterator4 = _createForOfIteratorHelper(node.declarations),
+        _step4;
       try {
-        for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
-          var decl = _step3.value;
+        for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
+          var decl = _step4.value;
           if ((0, _eslintCodemodUtils.isNodeOfType)(decl, 'VariableDeclarator') && Object.keys(decl).includes('init') && Object.keys(decl).includes('id') && decl.init && decl.id && 'name' in decl.id && decl.id.name && (0, _eslintCodemodUtils.isNodeOfType)(decl.init, 'Identifier')) {
             if (Object.keys(legacyIconImports).includes(decl.init.name)) {
               legacyIconImports[decl.id.name] = {
@@ -105,9 +145,9 @@ var createChecks = exports.createChecks = function createChecks(context) {
           }
         }
       } catch (err) {
-        _iterator3.e(err);
+        _iterator4.e(err);
       } finally {
-        _iterator3.f();
+        _iterator4.f();
       }
     }
   };
@@ -130,7 +170,10 @@ var createChecks = exports.createChecks = function createChecks(context) {
     }
     (0, _helpers.createCantMigrateReExportError)(node, packageName, exportName, errorsManual);
     (0, _helpers.addToListOfRanges)(node, errorRanges);
-    guidance[(0, _helpers.locToString)(node)] = (0, _helpers.createGuidance)(packageName);
+    guidance[(0, _helpers.locToString)(node)] = (0, _helpers.createGuidance)({
+      iconPackage: packageName,
+      shouldUseMigrationPath: shouldUseMigrationPath
+    });
   };
 
   /**
@@ -144,38 +187,44 @@ var createChecks = exports.createChecks = function createChecks(context) {
       if (typeof moduleSource === 'string' && ['@atlaskit/icon/glyph/', '@atlaskit/icon-object/glyph/'].find(function (val) {
         return moduleSource.startsWith(val);
       }) && node.specifiers.length) {
-        var _iterator4 = _createForOfIteratorHelper(node.specifiers),
-          _step4;
+        var _iterator5 = _createForOfIteratorHelper(node.specifiers),
+          _step5;
         try {
-          for (_iterator4.s(); !(_step4 = _iterator4.n()).done;) {
-            var spec = _step4.value;
+          for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
+            var spec = _step5.value;
             (0, _helpers.createCantMigrateReExportError)(spec, moduleSource, spec.exported.name, errorsManual);
             (0, _helpers.addToListOfRanges)(spec, errorRanges);
-            guidance[(0, _helpers.locToString)(spec)] = (0, _helpers.createGuidance)(moduleSource);
+            guidance[(0, _helpers.locToString)(spec)] = (0, _helpers.createGuidance)({
+              iconPackage: moduleSource,
+              shouldUseMigrationPath: shouldUseMigrationPath
+            });
           }
         } catch (err) {
-          _iterator4.e(err);
+          _iterator5.e(err);
         } finally {
-          _iterator4.f();
+          _iterator5.f();
         }
       }
     } else if (node.declaration && (0, _eslintCodemodUtils.isNodeOfType)(node.declaration, 'VariableDeclaration')) {
       // export const Icon = AddIcon;
-      var _iterator5 = _createForOfIteratorHelper(node.declaration.declarations),
-        _step5;
+      var _iterator6 = _createForOfIteratorHelper(node.declaration.declarations),
+        _step6;
       try {
-        for (_iterator5.s(); !(_step5 = _iterator5.n()).done;) {
-          var decl = _step5.value;
+        for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
+          var decl = _step6.value;
           if ((0, _eslintCodemodUtils.isNodeOfType)(decl, 'VariableDeclarator') && Object.keys(decl).includes('init') && decl.init && (0, _eslintCodemodUtils.isNodeOfType)(decl.init, 'Identifier') && Object.keys(legacyIconImports).includes(decl.init.name)) {
             (0, _helpers.createCantMigrateReExportError)(node, legacyIconImports[decl.init.name].packageName, decl.init.name, errorsManual);
             (0, _helpers.addToListOfRanges)(node, errorRanges);
-            guidance[(0, _helpers.locToString)(node)] = (0, _helpers.createGuidance)(legacyIconImports[decl.init.name].packageName);
+            guidance[(0, _helpers.locToString)(node)] = (0, _helpers.createGuidance)({
+              iconPackage: legacyIconImports[decl.init.name].packageName,
+              shouldUseMigrationPath: shouldUseMigrationPath
+            });
           }
         }
       } catch (err) {
-        _iterator5.e(err);
+        _iterator6.e(err);
       } finally {
-        _iterator5.f();
+        _iterator6.f();
       }
     } else if (!node.source && node.specifiers && node.specifiers.length > 0) {
       /**
@@ -184,26 +233,29 @@ var createChecks = exports.createChecks = function createChecks(context) {
        * const crossIcon = LegacyIcon2;
        * export { AddIcon, CrossIcon as default }
        */
-      var _iterator6 = _createForOfIteratorHelper(node.specifiers),
-        _step6;
+      var _iterator7 = _createForOfIteratorHelper(node.specifiers),
+        _step7;
       try {
-        for (_iterator6.s(); !(_step6 = _iterator6.n()).done;) {
-          var _spec2 = _step6.value;
-          if (Object.keys(legacyIconImports).includes(_spec2.local.name)) {
+        for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
+          var _spec3 = _step7.value;
+          if (Object.keys(legacyIconImports).includes(_spec3.local.name)) {
             //update legacy imports to be exported
-            legacyIconImports[_spec2.local.name] = {
-              packageName: legacyIconImports[_spec2.local.name].packageName,
+            legacyIconImports[_spec3.local.name] = {
+              packageName: legacyIconImports[_spec3.local.name].packageName,
               exported: true
             };
-            (0, _helpers.createCantMigrateReExportError)(_spec2, legacyIconImports[_spec2.local.name].packageName, _spec2.exported.name, errorsManual);
-            (0, _helpers.addToListOfRanges)(_spec2, errorRanges);
-            guidance[(0, _helpers.locToString)(_spec2)] = (0, _helpers.createGuidance)(legacyIconImports[_spec2.local.name].packageName);
+            (0, _helpers.createCantMigrateReExportError)(_spec3, legacyIconImports[_spec3.local.name].packageName, _spec3.exported.name, errorsManual);
+            (0, _helpers.addToListOfRanges)(_spec3, errorRanges);
+            guidance[(0, _helpers.locToString)(_spec3)] = (0, _helpers.createGuidance)({
+              iconPackage: legacyIconImports[_spec3.local.name].packageName,
+              shouldUseMigrationPath: shouldUseMigrationPath
+            });
           }
         }
       } catch (err) {
-        _iterator6.e(err);
+        _iterator7.e(err);
       } finally {
-        _iterator6.f();
+        _iterator7.f();
       }
     }
   };
@@ -219,7 +271,10 @@ var createChecks = exports.createChecks = function createChecks(context) {
     if (node.name && Object.keys(legacyIconImports).includes(node.name) && legacyIconImports[node.name].packageName) {
       (0, _helpers.createCantMigrateIdentifierMapOrArrayError)(node, legacyIconImports[node.name].packageName, node.name, errorsManual);
       (0, _helpers.addToListOfRanges)(node, errorRanges);
-      guidance[(0, _helpers.locToString)(node)] = (0, _helpers.createGuidance)(legacyIconImports[node.name].packageName);
+      guidance[(0, _helpers.locToString)(node)] = (0, _helpers.createGuidance)({
+        iconPackage: legacyIconImports[node.name].packageName,
+        shouldUseMigrationPath: shouldUseMigrationPath
+      });
     }
   };
 
@@ -245,29 +300,59 @@ var createChecks = exports.createChecks = function createChecks(context) {
       var isNewIconMigratable = (0, _helpers.canAutoMigrateNewIconBasedOnSize)(upcomingIcon ? upcomingIcon.sizeGuidance.medium : migrationMapObject === null || migrationMapObject === void 0 || (_migrationMapObject$s = migrationMapObject.sizeGuidance) === null || _migrationMapObject$s === void 0 ? void 0 : _migrationMapObject$s.medium);
       var isInNewButton = (0, _eslintCodemodUtils.isNodeOfType)(node.parent.parent.parent.name, 'JSXIdentifier') && newButtonImports.has(node.parent.parent.parent.name.name);
       if (newIcon && isInNewButton && isNewIconMigratable || upcomingIcon && isInNewButton && isNewIconMigratable) {
-        (0, _helpers.createAutoMigrationError)(node, legacyIconImports[node.name].packageName, node.name, errorsAuto);
+        (0, _helpers.createAutoMigrationError)({
+          node: node,
+          importSource: legacyIconImports[node.name].packageName,
+          iconName: node.name,
+          errors: errorsAuto
+        });
         (0, _helpers.addToListOfRanges)(node, errorRanges);
-        guidance[(0, _helpers.locToString)(node)] = (0, _helpers.createGuidance)(legacyIconImports[node.name].packageName, isInNewButton, 'medium');
+        guidance[(0, _helpers.locToString)(node)] = (0, _helpers.createGuidance)({
+          iconPackage: legacyIconImports[node.name].packageName,
+          insideNewButton: true,
+          size: 'medium',
+          shouldUseMigrationPath: shouldUseMigrationPath
+        });
       } else if (!newIcon && !upcomingIcon || !isNewIconMigratable) {
         (0, _helpers.createCantFindSuitableReplacementError)(node, legacyIconImports[node.name].packageName, node.name, errorsManual);
         (0, _helpers.addToListOfRanges)(node, errorRanges);
-        guidance[(0, _helpers.locToString)(node)] = (0, _helpers.createGuidance)(legacyIconImports[node.name].packageName, isInNewButton);
+        guidance[(0, _helpers.locToString)(node)] = (0, _helpers.createGuidance)({
+          iconPackage: legacyIconImports[node.name].packageName,
+          insideNewButton: isInNewButton,
+          shouldUseMigrationPath: shouldUseMigrationPath
+        });
       } else if (!isInNewButton) {
         (0, _helpers.createCantMigrateFunctionUnknownError)(node, legacyIconImports[node.name].packageName, node.name, errorsManual);
         (0, _helpers.addToListOfRanges)(node, errorRanges);
-        guidance[(0, _helpers.locToString)(node)] = (0, _helpers.createGuidance)(legacyIconImports[node.name].packageName, isInNewButton);
+        guidance[(0, _helpers.locToString)(node)] = (0, _helpers.createGuidance)({
+          iconPackage: legacyIconImports[node.name].packageName,
+          insideNewButton: false,
+          shouldUseMigrationPath: shouldUseMigrationPath
+        });
       }
     }
   };
   var checkIconReference = function checkIconReference(node) {
-    //check the reference to see if it's a legacy icon, if not exit early
-    if (!Object.keys(legacyIconImports).includes(node.name)) {
-      return;
-    }
     //if this is an import statement then exit early
     if (node.parent && ((0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'ImportSpecifier') || (0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'ImportDefaultSpecifier'))) {
       return;
     }
+
+    // Flag icons imported from migration path
+    if (!shouldUseMigrationPath && Object.keys(migrationIconImports).includes(node.name)) {
+      (0, _helpers.createAutoMigrationError)({
+        node: node,
+        importSource: migrationIconImports[node.name].packageName,
+        iconName: node.name,
+        errors: errorsAuto
+      });
+    }
+
+    //check the reference to see if it's a legacy icon, if not exit early
+    if (!Object.keys(legacyIconImports).includes(node.name)) {
+      return;
+    }
+
     //if in Fallback prop, do not error
     if (node.parent && node.parent.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.parent, 'JSXAttribute') && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.parent.name, 'JSXIdentifier') && node.parent.parent.name.name === 'LEGACY_fallbackIcon') {
       return;
@@ -291,15 +376,38 @@ var createChecks = exports.createChecks = function createChecks(context) {
       return;
     }
     var name = node.openingElement.name.name;
+
+    // Flag icons imported from migration path
+    if (!shouldUseMigrationPath && Object.keys(migrationIconImports).includes(name)) {
+      var _sizeProp$value;
+      var sizeProp = node.openingElement.attributes.find(function (attribute) {
+        return attribute.type === 'JSXAttribute' && (attribute.name.name === 'size' || attribute.name.name === 'LEGACY_size');
+      });
+      var insideNewButton = (0, _helpers.isInsideNewButton)(node, newButtonImports);
+      // Add spacious spacing if:
+      // 1. size is medium, or not set (default is medium)
+      // 2. not inside a new or legacy button
+      var shouldAddSpaciousSpacing = (sizeProp && sizeProp.type === 'JSXAttribute' && ((_sizeProp$value = sizeProp.value) === null || _sizeProp$value === void 0 ? void 0 : _sizeProp$value.type) === 'Literal' && sizeProp.value.value === 'medium' || !sizeProp) && !(0, _helpers.isInsideNewButton)(node, newButtonImports) && !(0, _helpers.isInsideLegacyButton)(node, legacyButtonImports);
+      (0, _helpers.createAutoMigrationError)({
+        node: node,
+        importSource: migrationIconImports[name].packageName,
+        iconName: name,
+        errors: errorsAuto,
+        shouldAddSpaciousSpacing: shouldAddSpaciousSpacing,
+        insideNewButton: insideNewButton
+      });
+    }
+
     // Legacy icons rendered as JSX elements
     if (Object.keys(legacyIconImports).includes(name)) {
-      var _node$parent2, _node$parent3, _size, _size2;
+      var _size, _size2, _sizeProp$value2;
       // Determine if inside a new button - if so:
       // - Assume spread props are safe - still error if props explicitly set to unmigratable values
-      var insideNewButton = false;
-      if (node.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'ArrowFunctionExpression') && (_node$parent2 = node.parent) !== null && _node$parent2 !== void 0 && (_node$parent2 = _node$parent2.parent) !== null && _node$parent2 !== void 0 && _node$parent2.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.parent.parent, 'JSXAttribute') && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.parent.parent.name, 'JSXIdentifier') && (_node$parent3 = node.parent) !== null && _node$parent3 !== void 0 && (_node$parent3 = _node$parent3.parent) !== null && _node$parent3 !== void 0 && (_node$parent3 = _node$parent3.parent) !== null && _node$parent3 !== void 0 && _node$parent3.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.parent.parent.parent, 'JSXOpeningElement') && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.parent.parent.parent.name, 'JSXIdentifier') && newButtonImports.has(node.parent.parent.parent.parent.name.name)) {
-        insideNewButton = true;
-      }
+      var _insideNewButton = (0, _helpers.isInsideNewButton)(node, newButtonImports);
+
+      // Determine if inside a legacy default button - if so:
+      // the auto fixer will add spacing prop to the medium size icon
+      var insideLegacyButton = (0, _helpers.isInsideLegacyButton)(node, legacyButtonImports);
 
       // Find size prop on node
       var size = 'medium';
@@ -308,11 +416,11 @@ var createChecks = exports.createChecks = function createChecks(context) {
       var requiredAttributesAfterSpread = new Set(['size', 'primaryColor', 'secondaryColor']);
       var hasSpread = false;
       var hasPrimaryColorProp = false;
-      var _iterator7 = _createForOfIteratorHelper(node.openingElement.attributes),
-        _step7;
+      var _iterator8 = _createForOfIteratorHelper(node.openingElement.attributes),
+        _step8;
       try {
-        for (_iterator7.s(); !(_step7 = _iterator7.n()).done;) {
-          var attr = _step7.value;
+        for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
+          var attr = _step8.value;
           // Detect spread props
           if ((0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXSpreadAttribute')) {
             // In case there are more spread props
@@ -345,9 +453,9 @@ var createChecks = exports.createChecks = function createChecks(context) {
           }
         }
       } catch (err) {
-        _iterator7.e(err);
+        _iterator8.e(err);
       } finally {
-        _iterator7.f();
+        _iterator8.f();
       }
       var hasManualMigration = false;
       if (primaryColor && !(0, _helpers.canMigrateColor)(primaryColor) || hasPrimaryColorProp && !primaryColor) {
@@ -364,7 +472,7 @@ var createChecks = exports.createChecks = function createChecks(context) {
       // Do a set comparison - is requiredAttributesAfterSpread a subset of afterSpreadSet?
       if (hasSpread === true && !Array.from(requiredAttributesAfterSpread).every(function (val) {
         return afterSpreadSet.has(val);
-      }) && !insideNewButton) {
+      }) && !_insideNewButton) {
         var missingProps = Array.from(requiredAttributesAfterSpread).filter(function (val) {
           return !afterSpreadSet.has(val);
         });
@@ -380,13 +488,34 @@ var createChecks = exports.createChecks = function createChecks(context) {
       var upcomingIcon = (0, _helpers.getUpcomingIcons)(legacyIconImports[name].packageName);
       var newIcon = migrationMapObject === null || migrationMapObject === void 0 ? void 0 : migrationMapObject.newIcon;
       var isNewIconMigratable = (0, _helpers.canAutoMigrateNewIconBasedOnSize)(upcomingIcon ? upcomingIcon.sizeGuidance[(_size = size) !== null && _size !== void 0 ? _size : 'medium'] : migrationMapObject === null || migrationMapObject === void 0 ? void 0 : migrationMapObject.sizeGuidance[(_size2 = size) !== null && _size2 !== void 0 ? _size2 : 'medium']);
+
+      // Add spacious spacing if:
+      // 1. size is medium, or not set (default is medium)
+      // 2. not inside a new or legacy button
+      var _sizeProp = node.openingElement.attributes.find(function (attribute) {
+        return attribute.type === 'JSXAttribute' && (attribute.name.name === 'size' || attribute.name.name === 'LEGACY_size');
+      });
+      var _shouldAddSpaciousSpacing = (_sizeProp && _sizeProp.type === 'JSXAttribute' && ((_sizeProp$value2 = _sizeProp.value) === null || _sizeProp$value2 === void 0 ? void 0 : _sizeProp$value2.type) === 'Literal' && _sizeProp.value.value === 'medium' || !_sizeProp) && !_insideNewButton && !insideLegacyButton;
       if (!hasManualMigration && (newIcon || upcomingIcon) && isNewIconMigratable) {
-        (0, _helpers.createAutoMigrationError)(node, legacyIconImports[name].packageName, name, errorsAuto);
+        autoIconJSXElementOccurrenceCount++;
+        (0, _helpers.createAutoMigrationError)({
+          node: node,
+          importSource: legacyIconImports[name].packageName,
+          iconName: name,
+          errors: errorsAuto,
+          shouldAddSpaciousSpacing: _shouldAddSpaciousSpacing,
+          insideNewButton: _insideNewButton
+        });
       } else if ((!newIcon && !upcomingIcon || !isNewIconMigratable) && size) {
         (0, _helpers.createCantFindSuitableReplacementError)(node, legacyIconImports[name].packageName, name, errorsManual, upcomingIcon ? true : migrationMapObject ? true : false);
       }
       (0, _helpers.addToListOfRanges)(node, errorRanges);
-      guidance[(0, _helpers.locToString)(node)] = (0, _helpers.createGuidance)(legacyIconImports[name].packageName, insideNewButton, size && (0, _helpers.isSize)(size) ? size : undefined);
+      guidance[(0, _helpers.locToString)(node)] = (0, _helpers.createGuidance)({
+        iconPackage: legacyIconImports[name].packageName,
+        insideNewButton: _insideNewButton,
+        size: size && (0, _helpers.isSize)(size) ? size : undefined,
+        shouldUseMigrationPath: shouldUseMigrationPath
+      });
     }
   };
 
@@ -396,21 +525,24 @@ var createChecks = exports.createChecks = function createChecks(context) {
    */
   var checkCallExpression = function checkCallExpression(node) {
     if (Object.keys(node).includes('arguments') && node.arguments.length) {
-      var _iterator8 = _createForOfIteratorHelper(node.arguments),
-        _step8;
+      var _iterator9 = _createForOfIteratorHelper(node.arguments),
+        _step9;
       try {
-        for (_iterator8.s(); !(_step8 = _iterator8.n()).done;) {
-          var arg = _step8.value;
+        for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
+          var arg = _step9.value;
           if ((0, _eslintCodemodUtils.isNodeOfType)(arg, 'Identifier') && Object.keys(legacyIconImports).includes(arg.name) && legacyIconImports[arg.name].packageName) {
             (0, _helpers.createCantMigrateFunctionUnknownError)(node, legacyIconImports[arg.name].packageName, arg.name, errorsManual);
             (0, _helpers.addToListOfRanges)(node, errorRanges);
-            guidance[(0, _helpers.locToString)(node)] = (0, _helpers.createGuidance)(legacyIconImports[arg.name].packageName);
+            guidance[(0, _helpers.locToString)(node)] = (0, _helpers.createGuidance)({
+              iconPackage: legacyIconImports[arg.name].packageName,
+              shouldUseMigrationPath: shouldUseMigrationPath
+            });
           }
         }
       } catch (err) {
-        _iterator8.e(err);
+        _iterator9.e(err);
       } finally {
-        _iterator8.f();
+        _iterator9.f();
       }
     }
   };
@@ -445,19 +577,19 @@ var createChecks = exports.createChecks = function createChecks(context) {
               }
             });
             if (!isQuietMode) {
-              var _iterator9 = _createForOfIteratorHelper(errorList.errors),
-                _step9;
+              var _iterator10 = _createForOfIteratorHelper(errorList.errors),
+                _step10;
               try {
-                for (_iterator9.s(); !(_step9 = _iterator9.n()).done;) {
-                  var error = _step9.value;
+                for (_iterator10.s(); !(_step10 = _iterator10.n()).done;) {
+                  var error = _step10.value;
                   if ('messageId' in error && (error.messageId !== 'cantMigrateIdentifier' || error.messageId === 'cantMigrateIdentifier' && !isInRange)) {
                     context.report(error);
                   }
                 }
               } catch (err) {
-                _iterator9.e(err);
+                _iterator10.e(err);
               } finally {
-                _iterator9.f();
+                _iterator10.f();
               }
             }
           }
@@ -465,28 +597,84 @@ var createChecks = exports.createChecks = function createChecks(context) {
       }
     }
     if (shouldErrorForAutoMigration) {
-      for (var _i2 = 0, _Object$entries2 = Object.entries(errorsAuto); _i2 < _Object$entries2.length; _i2++) {
+      var _loop = function _loop() {
         var _Object$entries2$_i = (0, _slicedToArray2.default)(_Object$entries2[_i2], 2),
-          _key2 = _Object$entries2$_i[0],
-          _error = _Object$entries2$_i[1];
+          key = _Object$entries2$_i[0],
+          error = _Object$entries2$_i[1];
         // If there's a manual error that exists for this same component,
         // don't throw the auto error
-        if (Object.keys(errorsManual).includes(_key2)) {
-          var _cantMigrateIdentifierError = errorsManual[_key2].errors.find(function (x) {
+        if (Object.keys(errorsManual).includes(key)) {
+          var _cantMigrateIdentifierError = errorsManual[key].errors.find(function (x) {
             return 'messageId' in x && x.messageId === 'cantMigrateIdentifier';
           });
-          if (!_cantMigrateIdentifierError || _cantMigrateIdentifierError && errorsManual[_key2].errors.length > 1) {
-            delete errorsAuto[_key2];
-            continue;
+          if (!_cantMigrateIdentifierError || _cantMigrateIdentifierError && errorsManual[key].errors.length > 1) {
+            delete errorsAuto[key];
+            return 1; // continue
           }
         }
-        var _node2 = 'node' in _error ? _error.node : null;
-        if (_node2) {
-          var _guidanceMessage = Object.keys(guidance).includes(_key2) ? guidance[_key2] : '';
-          if (Object.keys(_error).includes('data') && _error.data) {
-            _error.data.guidance = _guidanceMessage;
+        var node = 'node' in error ? error.node : null;
+        if (node) {
+          var _guidanceMessage = Object.keys(guidance).includes(key) ? guidance[key] : '';
+          if (Object.keys(error).includes('data') && error.data) {
+            error.data.guidance = _guidanceMessage;
           }
-          context.report(_error);
+          context.report(_objectSpread(_objectSpread({}, error), {}, {
+            fix: function fix(fixer) {
+              var _legacyIconImports$er, _migrationIconImports;
+              // don't migration if the new icon is not available
+              if (!error.data || shouldUseMigrationPath && !(0, _helpers.checkIfNewIconExist)(error)) {
+                return [];
+              }
+              var fixArguments = {
+                metadata: error.data,
+                legacyImportNode: (_legacyIconImports$er = legacyIconImports[error.data.iconName]) === null || _legacyIconImports$er === void 0 ? void 0 : _legacyIconImports$er.importNode,
+                migrationImportNode: (_migrationIconImports = migrationIconImports[error.data.iconName]) === null || _migrationIconImports === void 0 ? void 0 : _migrationIconImports.importNode,
+                shouldUseMigrationPath: shouldUseMigrationPath
+              };
+              var propsFixes = (0, _helpers.createPropFixes)(_objectSpread(_objectSpread({}, fixArguments), {}, {
+                node: node,
+                fixer: fixer
+              }));
+              var importFixes = [];
+              // Otherwise if there are multiple occurrences of the icon, import path will be handled after the prop fix
+              if (autoIconJSXElementOccurrenceCount <= 1) {
+                importFixes = (0, _helpers.createImportFix)(_objectSpread(_objectSpread({}, fixArguments), {}, {
+                  fixer: fixer
+                }));
+              }
+              return [].concat((0, _toConsumableArray2.default)(propsFixes), (0, _toConsumableArray2.default)(importFixes));
+            }
+          }));
+        }
+      };
+      for (var _i2 = 0, _Object$entries2 = Object.entries(errorsAuto); _i2 < _Object$entries2.length; _i2++) {
+        if (_loop()) continue;
+      }
+
+      // Update import path at the end if there are multiple occurrences of the icon
+      if (autoIconJSXElementOccurrenceCount > 1) {
+        var _loop2 = function _loop2() {
+          var _Object$entries3$_i = (0, _slicedToArray2.default)(_Object$entries3[_i3], 2),
+            _ = _Object$entries3$_i[0],
+            error = _Object$entries3$_i[1];
+          context.report(_objectSpread(_objectSpread({}, error), {}, {
+            fix: function fix(fixer) {
+              var _legacyIconImports$er2, _migrationIconImports2;
+              if (!error.data || shouldUseMigrationPath && !(0, _helpers.checkIfNewIconExist)(error)) {
+                return [];
+              }
+              return (0, _helpers.createImportFix)({
+                metadata: error.data,
+                fixer: fixer,
+                legacyImportNode: (_legacyIconImports$er2 = legacyIconImports[error.data.iconName]) === null || _legacyIconImports$er2 === void 0 ? void 0 : _legacyIconImports$er2.importNode,
+                migrationImportNode: (_migrationIconImports2 = migrationIconImports[error.data.iconName]) === null || _migrationIconImports2 === void 0 ? void 0 : _migrationIconImports2.importNode,
+                shouldUseMigrationPath: shouldUseMigrationPath
+              });
+            }
+          }));
+        };
+        for (var _i3 = 0, _Object$entries3 = Object.entries(errorsAuto); _i3 < _Object$entries3.length; _i3++) {
+          _loop2();
         }
       }
     }