@atlaskit/eslint-plugin-design-system 10.15.0 → 10.17.0

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
+              });
+            }
+          });
         }
       }
     }

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

@@ -1,4 +1,4 @@
-import { isNodeOfType } from 'eslint-codemod-utils';
+import { isNodeOfType, literal } from 'eslint-codemod-utils';
 import baseMigrationMap, { migrationOutcomeDescriptionMap } from '@atlaskit/icon/UNSAFE_migration-map';
 import { getImportName } from '../utils/get-import-name';
 import { upcomingIcons } from './upcoming-icons';
@@ -50,10 +50,36 @@ export const canAutoMigrateNewIconBasedOnSize = guidance => {
   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
+ */
+export const getNewIconNameAndImportPath = (iconPackage, shouldUseMigrationPath) => {
+  const legacyIconName = getIconKey(iconPackage);
+  const migrationMapObject = getMigrationMapObject(iconPackage);
+  if (!migrationMapObject || !migrationMapObject.newIcon) {
+    return {};
+  }
+  const {
+    newIcon
+  } = migrationMapObject;
+  const migrationPath = newIcon.name === legacyIconName ? `${newIcon.package}/${newIcon.type}/migration/${newIcon.name}` : `${newIcon.package}/${newIcon.type}/migration/${newIcon.name}--${legacyIconName.replaceAll('/', '-')}`;
+  return {
+    iconName: newIcon.name,
+    importPath: shouldUseMigrationPath ? migrationPath : `${newIcon.package}/${newIcon.type}/${newIcon.name}`
+  };
+};
+
 /**
  * Creates the written guidance for migrating a legacy icon to a new icon
  */
-export const createGuidance = (iconPackage, insideNewButton = false, size) => {
+export const createGuidance = ({
+  iconPackage,
+  insideNewButton,
+  size,
+  shouldUseMigrationPath
+}) => {
   const migrationMapObject = getMigrationMapObject(iconPackage);
   const upcomingIcon = getUpcomingIcons(iconPackage);
   if (upcomingIcon) {
@@ -82,17 +108,21 @@ export const createGuidance = (iconPackage, insideNewButton = false, size) => {
     if (!newIcon) {
       return 'No equivalent icon in new set. An option is to contribute a custom icon into icon-labs package instead.\n';
     }
+    const {
+      iconName,
+      importPath
+    } = getNewIconNameAndImportPath(iconPackage, shouldUseMigrationPath);
     const buttonGuidanceStr = "Please set 'spacing' property of the new icon to 'none', to ensure appropriate spacing inside `@atlaskit/button`.\n";
     let guidance = '';
     if (size) {
       if (migrationMapObject.sizeGuidance[size] && canAutoMigrateNewIconBasedOnSize(migrationMapObject.sizeGuidance[size])) {
-        guidance += `Fix: Use ${newIcon.name} from ${newIcon.package}/${newIcon.type}/${newIcon.name} instead.`;
+        guidance += `Fix: Use ${iconName} from ${importPath} instead.`;
       } else {
         guidance += `No equivalent icon for this size, ${size}, in new set.`;
       }
       guidance += `${Object.keys(migrationOutcomeDescriptionMap).includes(migrationMapObject.sizeGuidance[size]) ? ` Please: ${migrationOutcomeDescriptionMap[migrationMapObject.sizeGuidance[size]]}` : ' No migration size advice given.'}\n`;
     } else {
-      guidance = `Use ${newIcon.name} from ${newIcon.package}/${newIcon.type}/${newIcon.name} instead.\nMigration suggestions, depending on the legacy icon size:\n`;
+      guidance = `Use ${iconName} from ${importPath} instead.\nMigration suggestions, depending on the legacy icon size:\n`;
       Object.entries(migrationMapObject.sizeGuidance).forEach(([size, value]) => {
         guidance += `\t- ${size}: `;
         if (!Object.keys(migrationOutcomeDescriptionMap).includes(value)) {
@@ -223,13 +253,23 @@ export const createCantMigrateSizeUnknown = (node, errors, importSource, iconNam
   };
   pushManualError(locToString(node), errors, myError, importSource, iconName);
 };
-export const createAutoMigrationError = (node, importSource, iconName, errors) => {
+export const createAutoMigrationError = ({
+  node,
+  importSource,
+  iconName,
+  errors,
+  shouldAddSpaciousSpacing,
+  insideNewButton
+}) => {
   const myError = {
     node,
     messageId: 'noLegacyIconsAutoMigration',
     data: {
       importSource,
-      iconName
+      iconName,
+      spacing: shouldAddSpaciousSpacing ? 'spacious' : '',
+      // value type need to be a string in Rule.ReportDescriptor
+      insideNewButton: String(insideNewButton)
     }
   };
   errors[locToString(node)] = myError;
@@ -320,4 +360,178 @@ export const isInRangeList = (node, sortedListOfRangesForErrors) => {
   }
   const found = sortedListOfRangesForErrors.find(currRange => 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
+ */
+export const isInsideNewButton = (node, newButtonImports) => {
+  var _node$parent, _node$parent$parent, _node$parent2, _node$parent2$parent, _node$parent2$parent$;
+  let insideNewButton = false;
+  if (node.parent && isNodeOfType(node.parent, 'ArrowFunctionExpression') && (_node$parent = node.parent) !== null && _node$parent !== void 0 && (_node$parent$parent = _node$parent.parent) !== null && _node$parent$parent !== void 0 && _node$parent$parent.parent && isNodeOfType(node.parent.parent.parent, 'JSXAttribute') && isNodeOfType(node.parent.parent.parent.name, 'JSXIdentifier') && (_node$parent2 = node.parent) !== null && _node$parent2 !== void 0 && (_node$parent2$parent = _node$parent2.parent) !== null && _node$parent2$parent !== void 0 && (_node$parent2$parent$ = _node$parent2$parent.parent) !== null && _node$parent2$parent$ !== void 0 && _node$parent2$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;
+  }
+  return insideNewButton;
+};
+
+/**
+ *
+ * @param node Icon JSXelement
+ * @param newButtonImports list of legacy button import specifiers
+ * @returns if Icon is inside a legacy button
+ */
+export const isInsideLegacyButton = (node, legacyButtonImports) => {
+  var _node$parent3, _node$parent4, _node$parent4$parent, _node$parent5, _node$parent5$parent, _node$parent6, _node$parent6$parent;
+  let insideLegacyButton = false;
+  if (node.parent && isNodeOfType(node.parent, 'JSXExpressionContainer') && (_node$parent3 = node.parent) !== null && _node$parent3 !== void 0 && _node$parent3.parent && isNodeOfType(node.parent.parent, 'JSXAttribute') && (node.parent.parent.name.name === 'iconBefore' || node.parent.parent.name.name === 'iconAfter') && isNodeOfType((_node$parent4 = node.parent) === null || _node$parent4 === void 0 ? void 0 : (_node$parent4$parent = _node$parent4.parent) === null || _node$parent4$parent === void 0 ? void 0 : _node$parent4$parent.parent, 'JSXOpeningElement') && isNodeOfType((_node$parent5 = node.parent) === null || _node$parent5 === void 0 ? void 0 : (_node$parent5$parent = _node$parent5.parent) === null || _node$parent5$parent === void 0 ? void 0 : _node$parent5$parent.parent.name, 'JSXIdentifier') && legacyButtonImports.has((_node$parent6 = node.parent) === null || _node$parent6 === void 0 ? void 0 : (_node$parent6$parent = _node$parent6.parent) === null || _node$parent6$parent === void 0 ? void 0 : _node$parent6$parent.parent.name.name)) {
+    insideLegacyButton = true;
+  }
+  return insideLegacyButton;
+};
+const findProp = (attributes, propName) => attributes.find(attr => 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
+ */
+export const createImportFix = ({
+  fixer,
+  legacyImportNode,
+  metadata,
+  shouldUseMigrationPath,
+  migrationImportNode
+}) => {
+  const fixes = [];
+  const {
+    importSource
+  } = metadata;
+  const 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, `'${literal(importPath)}'`));
+  }
+  if (migrationImportNode && !shouldUseMigrationPath && importPath) {
+    fixes.push(fixer.replaceText(migrationImportNode.source, `'${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
+ */
+export const createPropFixes = ({
+  node,
+  fixer,
+  legacyImportNode,
+  metadata,
+  shouldUseMigrationPath,
+  migrationImportNode
+}) => {
+  const fixes = [];
+  const {
+    importSource,
+    spacing,
+    insideNewButton
+  } = metadata;
+  if (shouldUseMigrationPath && !legacyImportNode) {
+    return fixes;
+  }
+  const importPath = migrationImportNode ? importSource.replace('/migration', '').split('--')[0] : getNewIconNameAndImportPath(importSource, shouldUseMigrationPath).importPath;
+  const iconType = importPath !== null && importPath !== void 0 && importPath.startsWith('@atlaskit/icon/core') ? 'core' : 'utility';
+  if (node.type === 'JSXElement') {
+    const {
+      openingElement
+    } = node;
+    const {
+      attributes
+    } = openingElement;
+
+    // replace primaryColor prop with color
+    const 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
+    const sizeProp = findProp(attributes, 'size');
+    const spacingProp = findProp(attributes, 'spacing');
+    if (spacing && !spacingProp && iconType === 'core' && !migrationImportNode) {
+      fixes.push(fixer.insertTextAfter(sizeProp || openingElement.name, ` spacing="${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
+    const 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(propName => {
+        const 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
+ */
+export const checkIfNewIconExist = error => {
+  var _error$data;
+  if (!((_error$data = error.data) !== null && _error$data !== void 0 && _error$data.importSource)) {
+    return false;
+  }
+  const iconKey = getIconKey(error.data.importSource);
+  const {
+    newIcon
+  } = baseMigrationMap[iconKey] || {};
+  return Boolean(newIcon);
 };

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

@@ -5,6 +5,7 @@ import { createHelpers } from './helpers';
 const rule = createLintRule({
   meta: {
     name: 'no-legacy-icons',
+    fixable: 'code',
     type: 'problem',
     docs: {
       description: 'Enforces no legacy icons are used.',
@@ -22,6 +23,9 @@ const rule = createLintRule({
         },
         quiet: {
           type: 'boolean'
+        },
+        shouldUseMigrationPath: {
+          type: 'boolean'
         }
       },
       additionalProperties: false

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b6947ac630ea512fe3f4e3f44abb6783>>
+ * @codegen <<SignedSource::16613cb3962ed68af0bffd70eef5f5e2>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -9,6 +9,7 @@ export default {
     '@atlaskit/design-system/consistent-css-prop-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
+    '@atlaskit/design-system/ensure-icon-color': 'error',
     '@atlaskit/design-system/icon-label': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-css-tagged-template-expression': 'error',