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

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

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.locToString = exports.isSize = exports.isInRangeList = exports.getUpcomingIcons = exports.getMigrationMapObject = exports.getLiteralStringValue = exports.createHelpers = exports.createGuidance = exports.createCantMigrateSpreadPropsError = exports.createCantMigrateSizeUnknown = exports.createCantMigrateReExportError = exports.createCantMigrateIdentifierMapOrArrayError = exports.createCantMigrateIdentifierError = exports.createCantMigrateFunctionUnknownError = exports.createCantMigrateColorError = exports.createCantFindSuitableReplacementError = exports.createAutoMigrationError = exports.canMigrateColor = exports.canAutoMigrateNewIconBasedOnSize = exports.addToListOfRanges = void 0;
+exports.locToString = exports.isSize = exports.isInsideNewButton = exports.isInsideLegacyButton = exports.isInRangeList = exports.getUpcomingIcons = exports.getNewIconNameAndImportPath = exports.getMigrationMapObject = exports.getLiteralStringValue = exports.createPropFixes = exports.createImportFix = exports.createHelpers = exports.createGuidance = exports.createCantMigrateSpreadPropsError = exports.createCantMigrateSizeUnknown = exports.createCantMigrateReExportError = exports.createCantMigrateIdentifierMapOrArrayError = exports.createCantMigrateIdentifierError = exports.createCantMigrateFunctionUnknownError = exports.createCantMigrateColorError = exports.createCantFindSuitableReplacementError = exports.createAutoMigrationError = exports.checkIfNewIconExist = exports.canMigrateColor = exports.canAutoMigrateNewIconBasedOnSize = exports.addToListOfRanges = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _UNSAFE_migrationMap = _interopRequireWildcard(require("@atlaskit/icon/UNSAFE_migration-map"));
@@ -63,12 +63,33 @@ var canAutoMigrateNewIconBasedOnSize = exports.canAutoMigrateNewIconBasedOnSize
   return ['swap', 'swap-slight-visual-change', 'swap-visual-change', 'swap-size-shift-utility'].includes(guidance || '');
 };
 
+/**
+ *
+ * @param iconPackage string
+ * @returns object of new icon name and import path
+ */
+var getNewIconNameAndImportPath = exports.getNewIconNameAndImportPath = function getNewIconNameAndImportPath(iconPackage, shouldUseMigrationPath) {
+  var legacyIconName = getIconKey(iconPackage);
+  var migrationMapObject = getMigrationMapObject(iconPackage);
+  if (!migrationMapObject || !migrationMapObject.newIcon) {
+    return {};
+  }
+  var newIcon = migrationMapObject.newIcon;
+  var migrationPath = newIcon.name === legacyIconName ? "".concat(newIcon.package, "/").concat(newIcon.type, "/migration/").concat(newIcon.name) : "".concat(newIcon.package, "/").concat(newIcon.type, "/migration/").concat(newIcon.name, "--").concat(legacyIconName.replaceAll('/', '-'));
+  return {
+    iconName: newIcon.name,
+    importPath: shouldUseMigrationPath ? migrationPath : "".concat(newIcon.package, "/").concat(newIcon.type, "/").concat(newIcon.name)
+  };
+};
+
 /**
  * Creates the written guidance for migrating a legacy icon to a new icon
  */
-var createGuidance = exports.createGuidance = function createGuidance(iconPackage) {
-  var insideNewButton = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  var size = arguments.length > 2 ? arguments[2] : undefined;
+var createGuidance = exports.createGuidance = function createGuidance(_ref) {
+  var iconPackage = _ref.iconPackage,
+    insideNewButton = _ref.insideNewButton,
+    size = _ref.size,
+    shouldUseMigrationPath = _ref.shouldUseMigrationPath;
   var migrationMapObject = getMigrationMapObject(iconPackage);
   var upcomingIcon = getUpcomingIcons(iconPackage);
   if (upcomingIcon) {
@@ -100,21 +121,24 @@ var createGuidance = exports.createGuidance = function createGuidance(iconPackag
     if (!newIcon) {
       return 'No equivalent icon in new set. An option is to contribute a custom icon into icon-labs package instead.\n';
     }
+    var _getNewIconNameAndImp = getNewIconNameAndImportPath(iconPackage, shouldUseMigrationPath),
+      iconName = _getNewIconNameAndImp.iconName,
+      importPath = _getNewIconNameAndImp.importPath;
     var buttonGuidanceStr = "Please set 'spacing' property of the new icon to 'none', to ensure appropriate spacing inside `@atlaskit/button`.\n";
     var _guidance = '';
     if (size) {
       if (migrationMapObject.sizeGuidance[size] && canAutoMigrateNewIconBasedOnSize(migrationMapObject.sizeGuidance[size])) {
-        _guidance += "Fix: Use ".concat(newIcon.name, " from ").concat(newIcon.package, "/").concat(newIcon.type, "/").concat(newIcon.name, " instead.");
+        _guidance += "Fix: Use ".concat(iconName, " from ").concat(importPath, " instead.");
       } else {
         _guidance += "No equivalent icon for this size, ".concat(size, ", in new set.");
       }
       _guidance += "".concat(Object.keys(_UNSAFE_migrationMap.migrationOutcomeDescriptionMap).includes(migrationMapObject.sizeGuidance[size]) ? " Please: ".concat(_UNSAFE_migrationMap.migrationOutcomeDescriptionMap[migrationMapObject.sizeGuidance[size]]) : ' No migration size advice given.', "\n");
     } else {
-      _guidance = "Use ".concat(newIcon.name, " from ").concat(newIcon.package, "/").concat(newIcon.type, "/").concat(newIcon.name, " instead.\nMigration suggestions, depending on the legacy icon size:\n");
-      Object.entries(migrationMapObject.sizeGuidance).forEach(function (_ref) {
-        var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
-          size = _ref2[0],
-          value = _ref2[1];
+      _guidance = "Use ".concat(iconName, " from ").concat(importPath, " instead.\nMigration suggestions, depending on the legacy icon size:\n");
+      Object.entries(migrationMapObject.sizeGuidance).forEach(function (_ref2) {
+        var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
+          size = _ref3[0],
+          value = _ref3[1];
         _guidance += "\t- ".concat(size, ": ");
         if (!Object.keys(_UNSAFE_migrationMap.migrationOutcomeDescriptionMap).includes(value)) {
           _guidance += 'No migration advice given.\n';
@@ -244,13 +268,22 @@ var createCantMigrateSizeUnknown = exports.createCantMigrateSizeUnknown = functi
   };
   pushManualError(locToString(node), errors, myError, importSource, iconName);
 };
-var createAutoMigrationError = exports.createAutoMigrationError = function createAutoMigrationError(node, importSource, iconName, errors) {
+var createAutoMigrationError = exports.createAutoMigrationError = function createAutoMigrationError(_ref4) {
+  var node = _ref4.node,
+    importSource = _ref4.importSource,
+    iconName = _ref4.iconName,
+    errors = _ref4.errors,
+    shouldAddSpaciousSpacing = _ref4.shouldAddSpaciousSpacing,
+    insideNewButton = _ref4.insideNewButton;
   var myError = {
     node: node,
     messageId: 'noLegacyIconsAutoMigration',
     data: {
       importSource: importSource,
-      iconName: iconName
+      iconName: iconName,
+      spacing: shouldAddSpaciousSpacing ? 'spacious' : '',
+      // value type need to be a string in Rule.ReportDescriptor
+      insideNewButton: String(insideNewButton)
     }
   };
   errors[locToString(node)] = myError;
@@ -314,9 +347,9 @@ var createHelpers = exports.createHelpers = function createHelpers(context) {
      * Extracts the primaryColor value from a JSXAttribute
      */
     getPrimaryColor: function getPrimaryColor(attr) {
-      var _ref3, _getLiteralStringValu;
+      var _ref5, _getLiteralStringValu;
       var value = attr.value;
-      return (_ref3 = (_getLiteralStringValu = getLiteralStringValue(value)) !== null && _getLiteralStringValu !== void 0 ? _getLiteralStringValu : getTokenCallValue(value)) !== null && _ref3 !== void 0 ? _ref3 : null;
+      return (_ref5 = (_getLiteralStringValu = getLiteralStringValue(value)) !== null && _getLiteralStringValu !== void 0 ? _getLiteralStringValu : getTokenCallValue(value)) !== null && _ref5 !== void 0 ? _ref5 : null;
     },
     getTokenCallValue: getTokenCallValue,
     getConfigFlag: getConfigFlag
@@ -339,4 +372,171 @@ var isInRangeList = exports.isInRangeList = function isInRangeList(node, sortedL
     return range[0] >= currRange.start && range[1] <= currRange.end;
   });
   return !!found;
+};
+
+/**
+ *
+ * @param node Icon JSXelement
+ * @param newButtonImports list of new button import specifiers
+ * @returns if Icon is inside a new button
+ */
+var isInsideNewButton = exports.isInsideNewButton = function isInsideNewButton(node, newButtonImports) {
+  var _node$parent, _node$parent2;
+  var insideNewButton = false;
+  if (node.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'ArrowFunctionExpression') && (_node$parent = node.parent) !== null && _node$parent !== void 0 && (_node$parent = _node$parent.parent) !== null && _node$parent !== void 0 && _node$parent.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.parent.parent, 'JSXAttribute') && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.parent.parent.name, 'JSXIdentifier') && (_node$parent2 = node.parent) !== null && _node$parent2 !== void 0 && (_node$parent2 = _node$parent2.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.parent, 'JSXOpeningElement') && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.parent.parent.parent.name, 'JSXIdentifier') && newButtonImports.has(node.parent.parent.parent.parent.name.name)) {
+    insideNewButton = true;
+  }
+  return insideNewButton;
+};
+
+/**
+ *
+ * @param node Icon JSXelement
+ * @param newButtonImports list of legacy button import specifiers
+ * @returns if Icon is inside a legacy button
+ */
+var isInsideLegacyButton = exports.isInsideLegacyButton = function isInsideLegacyButton(node, legacyButtonImports) {
+  var _node$parent3, _node$parent4, _node$parent5, _node$parent6;
+  var insideLegacyButton = false;
+  if (node.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'JSXExpressionContainer') && (_node$parent3 = node.parent) !== null && _node$parent3 !== void 0 && _node$parent3.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.parent, 'JSXAttribute') && (node.parent.parent.name.name === 'iconBefore' || node.parent.parent.name.name === 'iconAfter') && (0, _eslintCodemodUtils.isNodeOfType)((_node$parent4 = node.parent) === null || _node$parent4 === void 0 || (_node$parent4 = _node$parent4.parent) === null || _node$parent4 === void 0 ? void 0 : _node$parent4.parent, 'JSXOpeningElement') && (0, _eslintCodemodUtils.isNodeOfType)((_node$parent5 = node.parent) === null || _node$parent5 === void 0 || (_node$parent5 = _node$parent5.parent) === null || _node$parent5 === void 0 ? void 0 : _node$parent5.parent.name, 'JSXIdentifier') && legacyButtonImports.has((_node$parent6 = node.parent) === null || _node$parent6 === void 0 || (_node$parent6 = _node$parent6.parent) === null || _node$parent6 === void 0 ? void 0 : _node$parent6.parent.name.name)) {
+    insideLegacyButton = true;
+  }
+  return insideLegacyButton;
+};
+var findProp = function findProp(attributes, propName) {
+  return attributes.find(function (attr) {
+    return attr.type === 'JSXAttribute' && attr.name.name === propName;
+  });
+};
+
+/**
+ *
+ * Creates a list of fixers to update the icon import path
+ * @param metadata Metadata including the import source and spacing
+ * @param fixer The original fix function
+ * @param legacyImportNode The import declaration node to replace
+ * @param shouldUseMigrationPath The eslint rule config, whether to use migration entrypoint or not
+ * @param migrationImportNode The migration import declaration node to replace, only present if shouldUseMigrationPath is false
+ * @returns A list of fixers to migrate the icon
+ */
+var createImportFix = exports.createImportFix = function createImportFix(_ref6) {
+  var fixer = _ref6.fixer,
+    legacyImportNode = _ref6.legacyImportNode,
+    metadata = _ref6.metadata,
+    shouldUseMigrationPath = _ref6.shouldUseMigrationPath,
+    migrationImportNode = _ref6.migrationImportNode;
+  var fixes = [];
+  var importSource = metadata.importSource;
+  var importPath = migrationImportNode ? importSource.replace('/migration', '').split('--')[0] : getNewIconNameAndImportPath(importSource, shouldUseMigrationPath).importPath;
+
+  // replace old icon import with icon import
+  if (legacyImportNode && importPath) {
+    fixes.push(fixer.replaceText(legacyImportNode.source, "'".concat((0, _eslintCodemodUtils.literal)(importPath), "'")));
+  }
+  if (migrationImportNode && !shouldUseMigrationPath && importPath) {
+    fixes.push(fixer.replaceText(migrationImportNode.source, "'".concat((0, _eslintCodemodUtils.literal)(importPath), "'")));
+  }
+  return fixes;
+};
+
+/**
+ * Creates a list of fixers to update the icon props
+ * @param node The Icon element to migrate
+ * @param metadata Metadata including the import source and spacing
+ * @param fixer The original fix function
+ * @param legacyImportNode The import declaration node to replace
+ * @param shouldUseMigrationPath The eslint rule config, whether to use migration entrypoint or not
+ * @param migrationImportNode The migration import declaration node to replace, only present if shouldUseMigrationPath is false
+ * @returns A list of fixers to migrate the icon
+ */
+var createPropFixes = exports.createPropFixes = function createPropFixes(_ref7) {
+  var node = _ref7.node,
+    fixer = _ref7.fixer,
+    legacyImportNode = _ref7.legacyImportNode,
+    metadata = _ref7.metadata,
+    shouldUseMigrationPath = _ref7.shouldUseMigrationPath,
+    migrationImportNode = _ref7.migrationImportNode;
+  var fixes = [];
+  var importSource = metadata.importSource,
+    spacing = metadata.spacing,
+    insideNewButton = metadata.insideNewButton;
+  if (shouldUseMigrationPath && !legacyImportNode) {
+    return fixes;
+  }
+  var importPath = migrationImportNode ? importSource.replace('/migration', '').split('--')[0] : getNewIconNameAndImportPath(importSource, shouldUseMigrationPath).importPath;
+  var iconType = importPath !== null && importPath !== void 0 && importPath.startsWith('@atlaskit/icon/core') ? 'core' : 'utility';
+  if (node.type === 'JSXElement') {
+    var openingElement = node.openingElement;
+    var attributes = openingElement.attributes;
+
+    // replace primaryColor prop with color
+    var primaryColor = findProp(attributes, 'primaryColor');
+    if (primaryColor && primaryColor.type === 'JSXAttribute') {
+      fixes.push(fixer.replaceText(primaryColor.name, 'color'));
+    }
+
+    // add color="currentColor" if
+    // 1. primaryColor prop is not set
+    // 2. icon is not imported from migration entrypoint
+    // 3. icon element is not inside a new button
+    if (legacyImportNode && !primaryColor && !migrationImportNode &&
+    // value type need to be a string in Rule.ReportDescriptor
+    insideNewButton !== 'true') {
+      fixes.push(fixer.insertTextAfter(openingElement.name, " color=\"currentColor\""));
+    }
+
+    // rename or remove size prop based on shouldUseMigrationPath,
+    // add spacing="spacious" if
+    // 1. it's in error metadata, which means size is medium
+    // 2. no existing spacing prop
+    // 3. iconType is "core"
+    // 4. icon is not imported from migration entrypoint
+    var sizeProp = findProp(attributes, 'size');
+    var spacingProp = findProp(attributes, 'spacing');
+    if (spacing && !spacingProp && iconType === 'core' && !migrationImportNode) {
+      fixes.push(fixer.insertTextAfter(sizeProp || openingElement.name, " spacing=\"".concat(spacing, "\"")));
+    }
+    if (sizeProp && sizeProp.type === 'JSXAttribute') {
+      fixes.push(shouldUseMigrationPath ?
+      // replace size prop with LEGACY_size,
+      fixer.replaceText(sizeProp.name, 'LEGACY_size') :
+      // remove size prop if shouldUseMigrationPath is false
+      fixer.remove(sizeProp));
+    }
+
+    // rename or remove secondaryColor prop based on shouldUseMigrationPath
+    var secondaryColorProp = findProp(attributes, 'secondaryColor');
+    if (secondaryColorProp && secondaryColorProp.type === 'JSXAttribute') {
+      fixes.push(shouldUseMigrationPath ?
+      // replace secondaryColor prop with LEGACY_secondaryColor
+      fixer.replaceText(secondaryColorProp.name, 'LEGACY_secondaryColor') :
+      // remove secondaryColor prop if shouldUseMigrationPath is false
+      fixer.remove(secondaryColorProp));
+    }
+
+    // remove LEGACY props
+    if (!shouldUseMigrationPath) {
+      ['LEGACY_size', 'LEGACY_margin', 'LEGACY_fallbackIcon', 'LEGACY_secondaryColor'].forEach(function (propName) {
+        var legacyProp = findProp(attributes, propName);
+        if (legacyProp && legacyProp.type === 'JSXAttribute') {
+          fixes.push(fixer.remove(legacyProp));
+        }
+      });
+    }
+  }
+  return fixes;
+};
+
+/**
+ * Check if the new icon exists in the migration map
+ */
+var checkIfNewIconExist = exports.checkIfNewIconExist = function checkIfNewIconExist(error) {
+  var _error$data;
+  if (!((_error$data = error.data) !== null && _error$data !== void 0 && _error$data.importSource)) {
+    return false;
+  }
+  var iconKey = getIconKey(error.data.importSource);
+  var _ref8 = _UNSAFE_migrationMap.default[iconKey] || {},
+    newIcon = _ref8.newIcon;
+  return Boolean(newIcon);
 };

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

@@ -11,6 +11,7 @@ var _helpers = require("./helpers");
 var rule = (0, _createRule.createLintRule)({
   meta: {
     name: 'no-legacy-icons',
+    fixable: 'code',
     type: 'problem',
     docs: {
       description: 'Enforces no legacy icons are used.',
@@ -28,6 +29,9 @@ var rule = (0, _createRule.createLintRule)({
         },
         quiet: {
           type: 'boolean'
+        },
+        shouldUseMigrationPath: {
+          type: 'boolean'
         }
       },
       additionalProperties: false

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

@@ -4,4 +4,4 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.upcomingIcons = void 0;
-var upcomingIcons = exports.upcomingIcons = ['app-switcher', 'check-circle-outline', 'export', 'file', 'flag-filled', 'lightbulb-filled', 'lock-filled', 'menu-expand', 'menu', 'notification-direct', 'notification', 'people-group', 'people', 'refresh', 'switcher', 'editor/align-image-center', 'editor/align-image-left', 'editor/align-image-right', 'editor/background-color', 'editor/bold', 'editor/indent', 'editor/italic', 'editor/horizontal-rule', 'editor-layout-three-equal', 'editor-layout-three-with-sidebars', 'editor/layout-two-equal', 'editor/layout-two-left-sidebars', 'editor/layout-two-right-sidebar', 'editor/media-center', 'editor/media-full-width', 'editor/media-wide', 'editor/number-list', 'emoji/activity', 'editor/file', 'emoji/flags', 'emoji/food', 'emoji/nature', 'emoji/people', 'emoji/productivity', 'emoji/travel', 'bitbucket/repos'];
+var upcomingIcons = exports.upcomingIcons = [];

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

@@ -1,5 +1,5 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
-import { addToListOfRanges, canAutoMigrateNewIconBasedOnSize, canMigrateColor, createAutoMigrationError, createCantFindSuitableReplacementError, createCantMigrateColorError, createCantMigrateFunctionUnknownError, createCantMigrateIdentifierError, createCantMigrateIdentifierMapOrArrayError, createCantMigrateReExportError, createCantMigrateSizeUnknown, createCantMigrateSpreadPropsError, createGuidance, createHelpers, getMigrationMapObject, getUpcomingIcons, isInRangeList, isSize, locToString } from './helpers';
+import { addToListOfRanges, canAutoMigrateNewIconBasedOnSize, canMigrateColor, checkIfNewIconExist, createAutoMigrationError, createCantFindSuitableReplacementError, createCantMigrateColorError, createCantMigrateFunctionUnknownError, createCantMigrateIdentifierError, createCantMigrateIdentifierMapOrArrayError, createCantMigrateReExportError, createCantMigrateSizeUnknown, createCantMigrateSpreadPropsError, createGuidance, createHelpers, createImportFix, createPropFixes, getMigrationMapObject, getUpcomingIcons, isInRangeList, isInsideLegacyButton, isInsideNewButton, isSize, locToString } from './helpers';
 export const createChecks = context => {
   //create global variables to be shared by the checks
   const {
@@ -7,15 +7,19 @@ export const createChecks = context => {
     getConfigFlag
   } = createHelpers(context);
   const legacyIconImports = {};
+  const migrationIconImports = {};
   const newButtonImports = new Set();
+  const legacyButtonImports = new Set();
   const errorsManual = {};
   const errorsAuto = {};
   let guidance = {};
+  let autoIconJSXElementOccurrenceCount = 0;
 
   // Extract parameters
   const shouldErrorForManualMigration = getConfigFlag('shouldErrorForManualMigration', true);
   const shouldErrorForAutoMigration = getConfigFlag('shouldErrorForAutoMigration', true);
   const isQuietMode = getConfigFlag('quiet', false);
+  const shouldUseMigrationPath = getConfigFlag('shouldUseMigrationPath', true);
 
   // Sorted list of ranges
   let errorRanges = [];
@@ -33,12 +37,26 @@ export const createChecks = context => {
         if (spec.local.name) {
           legacyIconImports[spec.local.name] = {
             packageName: moduleSource,
-            exported: false
+            exported: false,
+            importNode: node
           };
         }
       }
     }
 
+    // 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(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) {
       for (const spec of node.specifiers) {
@@ -49,6 +67,15 @@ export const createChecks = context => {
         }
       }
     }
+
+    // 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) {
+      for (const spec of node.specifiers) {
+        if (spec.type === 'ImportDefaultSpecifier') {
+          legacyButtonImports.add(spec.local.name);
+        }
+      }
+    }
   };
 
   /**
@@ -91,7 +118,10 @@ export const createChecks = context => {
     }
     createCantMigrateReExportError(node, packageName, exportName, errorsManual);
     addToListOfRanges(node, errorRanges);
-    guidance[locToString(node)] = createGuidance(packageName);
+    guidance[locToString(node)] = createGuidance({
+      iconPackage: packageName,
+      shouldUseMigrationPath
+    });
   };
 
   /**
@@ -106,7 +136,10 @@ export const createChecks = context => {
         for (const spec of node.specifiers) {
           createCantMigrateReExportError(spec, moduleSource, spec.exported.name, errorsManual);
           addToListOfRanges(spec, errorRanges);
-          guidance[locToString(spec)] = createGuidance(moduleSource);
+          guidance[locToString(spec)] = createGuidance({
+            iconPackage: moduleSource,
+            shouldUseMigrationPath
+          });
         }
       }
     } else if (node.declaration && isNodeOfType(node.declaration, 'VariableDeclaration')) {
@@ -115,7 +148,10 @@ export const createChecks = context => {
         if (isNodeOfType(decl, 'VariableDeclarator') && Object.keys(decl).includes('init') && decl.init && isNodeOfType(decl.init, 'Identifier') && Object.keys(legacyIconImports).includes(decl.init.name)) {
           createCantMigrateReExportError(node, legacyIconImports[decl.init.name].packageName, decl.init.name, errorsManual);
           addToListOfRanges(node, errorRanges);
-          guidance[locToString(node)] = createGuidance(legacyIconImports[decl.init.name].packageName);
+          guidance[locToString(node)] = createGuidance({
+            iconPackage: legacyIconImports[decl.init.name].packageName,
+            shouldUseMigrationPath
+          });
         }
       }
     } else if (!node.source && node.specifiers && node.specifiers.length > 0) {
@@ -134,7 +170,10 @@ export const createChecks = context => {
           };
           createCantMigrateReExportError(spec, legacyIconImports[spec.local.name].packageName, spec.exported.name, errorsManual);
           addToListOfRanges(spec, errorRanges);
-          guidance[locToString(spec)] = createGuidance(legacyIconImports[spec.local.name].packageName);
+          guidance[locToString(spec)] = createGuidance({
+            iconPackage: legacyIconImports[spec.local.name].packageName,
+            shouldUseMigrationPath
+          });
         }
       }
     }
@@ -151,7 +190,10 @@ export const createChecks = context => {
     if (node.name && Object.keys(legacyIconImports).includes(node.name) && legacyIconImports[node.name].packageName) {
       createCantMigrateIdentifierMapOrArrayError(node, legacyIconImports[node.name].packageName, node.name, errorsManual);
       addToListOfRanges(node, errorRanges);
-      guidance[locToString(node)] = createGuidance(legacyIconImports[node.name].packageName);
+      guidance[locToString(node)] = createGuidance({
+        iconPackage: legacyIconImports[node.name].packageName,
+        shouldUseMigrationPath
+      });
     }
   };
 
@@ -177,29 +219,59 @@ export const createChecks = context => {
       const isNewIconMigratable = canAutoMigrateNewIconBasedOnSize(upcomingIcon ? upcomingIcon.sizeGuidance.medium : migrationMapObject === null || migrationMapObject === void 0 ? void 0 : (_migrationMapObject$s = migrationMapObject.sizeGuidance) === null || _migrationMapObject$s === void 0 ? void 0 : _migrationMapObject$s.medium);
       const isInNewButton = isNodeOfType(node.parent.parent.parent.name, 'JSXIdentifier') && newButtonImports.has(node.parent.parent.parent.name.name);
       if (newIcon && isInNewButton && isNewIconMigratable || upcomingIcon && isInNewButton && isNewIconMigratable) {
-        createAutoMigrationError(node, legacyIconImports[node.name].packageName, node.name, errorsAuto);
+        createAutoMigrationError({
+          node,
+          importSource: legacyIconImports[node.name].packageName,
+          iconName: node.name,
+          errors: errorsAuto
+        });
         addToListOfRanges(node, errorRanges);
-        guidance[locToString(node)] = createGuidance(legacyIconImports[node.name].packageName, isInNewButton, 'medium');
+        guidance[locToString(node)] = createGuidance({
+          iconPackage: legacyIconImports[node.name].packageName,
+          insideNewButton: true,
+          size: 'medium',
+          shouldUseMigrationPath
+        });
       } else if (!newIcon && !upcomingIcon || !isNewIconMigratable) {
         createCantFindSuitableReplacementError(node, legacyIconImports[node.name].packageName, node.name, errorsManual);
         addToListOfRanges(node, errorRanges);
-        guidance[locToString(node)] = createGuidance(legacyIconImports[node.name].packageName, isInNewButton);
+        guidance[locToString(node)] = createGuidance({
+          iconPackage: legacyIconImports[node.name].packageName,
+          insideNewButton: isInNewButton,
+          shouldUseMigrationPath
+        });
       } else if (!isInNewButton) {
         createCantMigrateFunctionUnknownError(node, legacyIconImports[node.name].packageName, node.name, errorsManual);
         addToListOfRanges(node, errorRanges);
-        guidance[locToString(node)] = createGuidance(legacyIconImports[node.name].packageName, isInNewButton);
+        guidance[locToString(node)] = createGuidance({
+          iconPackage: legacyIconImports[node.name].packageName,
+          insideNewButton: false,
+          shouldUseMigrationPath
+        });
       }
     }
   };
   const 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 && (isNodeOfType(node.parent, 'ImportSpecifier') || isNodeOfType(node.parent, 'ImportDefaultSpecifier'))) {
       return;
     }
+
+    // Flag icons imported from migration path
+    if (!shouldUseMigrationPath && Object.keys(migrationIconImports).includes(node.name)) {
+      createAutoMigrationError({
+        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 && isNodeOfType(node.parent.parent, 'JSXAttribute') && isNodeOfType(node.parent.parent.name, 'JSXIdentifier') && node.parent.parent.name.name === 'LEGACY_fallbackIcon') {
       return;
@@ -223,15 +295,36 @@ export const createChecks = context => {
       return;
     }
     const name = node.openingElement.name.name;
+
+    // Flag icons imported from migration path
+    if (!shouldUseMigrationPath && Object.keys(migrationIconImports).includes(name)) {
+      var _sizeProp$value;
+      const sizeProp = node.openingElement.attributes.find(attribute => attribute.type === 'JSXAttribute' && (attribute.name.name === 'size' || attribute.name.name === 'LEGACY_size'));
+      const insideNewButton = 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
+      const 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) && !isInsideNewButton(node, newButtonImports) && !isInsideLegacyButton(node, legacyButtonImports);
+      createAutoMigrationError({
+        node,
+        importSource: migrationIconImports[name].packageName,
+        iconName: name,
+        errors: errorsAuto,
+        shouldAddSpaciousSpacing,
+        insideNewButton
+      });
+    }
+
     // Legacy icons rendered as JSX elements
     if (Object.keys(legacyIconImports).includes(name)) {
-      var _node$parent2, _node$parent2$parent, _node$parent3, _node$parent3$parent, _node$parent3$parent$, _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
-      let insideNewButton = false;
-      if (node.parent && isNodeOfType(node.parent, 'ArrowFunctionExpression') && (_node$parent2 = node.parent) !== null && _node$parent2 !== void 0 && (_node$parent2$parent = _node$parent2.parent) !== null && _node$parent2$parent !== void 0 && _node$parent2$parent.parent && isNodeOfType(node.parent.parent.parent, 'JSXAttribute') && isNodeOfType(node.parent.parent.parent.name, 'JSXIdentifier') && (_node$parent3 = node.parent) !== null && _node$parent3 !== void 0 && (_node$parent3$parent = _node$parent3.parent) !== null && _node$parent3$parent !== void 0 && (_node$parent3$parent$ = _node$parent3$parent.parent) !== null && _node$parent3$parent$ !== void 0 && _node$parent3$parent$.parent && isNodeOfType(node.parent.parent.parent.parent, 'JSXOpeningElement') && isNodeOfType(node.parent.parent.parent.parent.name, 'JSXIdentifier') && newButtonImports.has(node.parent.parent.parent.parent.name.name)) {
-        insideNewButton = true;
-      }
+      const insideNewButton = isInsideNewButton(node, newButtonImports);
+
+      // Determine if inside a legacy default button - if so:
+      // the auto fixer will add spacing prop to the medium size icon
+      const insideLegacyButton = isInsideLegacyButton(node, legacyButtonImports);
 
       // Find size prop on node
       let size = 'medium';
@@ -299,13 +392,32 @@ export const createChecks = context => {
       const upcomingIcon = getUpcomingIcons(legacyIconImports[name].packageName);
       const newIcon = migrationMapObject === null || migrationMapObject === void 0 ? void 0 : migrationMapObject.newIcon;
       const isNewIconMigratable = 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
+      const sizeProp = node.openingElement.attributes.find(attribute => attribute.type === 'JSXAttribute' && (attribute.name.name === 'size' || attribute.name.name === 'LEGACY_size'));
+      const 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) {
-        createAutoMigrationError(node, legacyIconImports[name].packageName, name, errorsAuto);
+        autoIconJSXElementOccurrenceCount++;
+        createAutoMigrationError({
+          node,
+          importSource: legacyIconImports[name].packageName,
+          iconName: name,
+          errors: errorsAuto,
+          shouldAddSpaciousSpacing,
+          insideNewButton
+        });
       } else if ((!newIcon && !upcomingIcon || !isNewIconMigratable) && size) {
         createCantFindSuitableReplacementError(node, legacyIconImports[name].packageName, name, errorsManual, upcomingIcon ? true : migrationMapObject ? true : false);
       }
       addToListOfRanges(node, errorRanges);
-      guidance[locToString(node)] = createGuidance(legacyIconImports[name].packageName, insideNewButton, size && isSize(size) ? size : undefined);
+      guidance[locToString(node)] = createGuidance({
+        iconPackage: legacyIconImports[name].packageName,
+        insideNewButton,
+        size: size && isSize(size) ? size : undefined,
+        shouldUseMigrationPath
+      });
     }
   };
 
@@ -319,7 +431,10 @@ export const createChecks = context => {
         if (isNodeOfType(arg, 'Identifier') && Object.keys(legacyIconImports).includes(arg.name) && legacyIconImports[arg.name].packageName) {
           createCantMigrateFunctionUnknownError(node, legacyIconImports[arg.name].packageName, arg.name, errorsManual);
           addToListOfRanges(node, errorRanges);
-          guidance[locToString(node)] = createGuidance(legacyIconImports[arg.name].packageName);
+          guidance[locToString(node)] = createGuidance({
+            iconPackage: legacyIconImports[arg.name].packageName,
+            shouldUseMigrationPath
+          });
         }
       }
     }
@@ -377,7 +492,58 @@ export const createChecks = context => {
           if (Object.keys(error).includes('data') && error.data) {
             error.data.guidance = guidanceMessage;
           }
-          context.report(error);
+          context.report({
+            ...error,
+            fix: fixer => {
+              var _legacyIconImports$er, _migrationIconImports;
+              // don't migration if the new icon is not available
+              if (!error.data || shouldUseMigrationPath && !checkIfNewIconExist(error)) {
+                return [];
+              }
+              const 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
+              };
+              const propsFixes = createPropFixes({
+                ...fixArguments,
+                node,
+                fixer
+              });
+              let importFixes = [];
+              // Otherwise if there are multiple occurrences of the icon, import path will be handled after the prop fix
+              if (autoIconJSXElementOccurrenceCount <= 1) {
+                importFixes = createImportFix({
+                  ...fixArguments,
+                  fixer
+                });
+              }
+              return [...propsFixes, ...importFixes];
+            }
+          });
+        }
+      }
+
+      // Update import path at the end if there are multiple occurrences of the icon
+      if (autoIconJSXElementOccurrenceCount > 1) {
+        for (const [_, error] of Object.entries(errorsAuto)) {
+          context.report({
+            ...error,
+            fix: fixer => {
+              var _legacyIconImports$er2, _migrationIconImports2;
+              if (!error.data || shouldUseMigrationPath && !checkIfNewIconExist(error)) {
+                return [];
+              }
+              return createImportFix({
+                metadata: error.data,
+                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
+              });
+            }
+          });
         }
       }
     }