@atlaskit/eslint-plugin-design-system 13.14.2 → 13.16.0

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::4bb65ab8e5c1cad968c6e74d7179e58b>>
+ * @codegen <<SignedSource::608f46f9cc8653226152a8edc34849d6>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -35,6 +35,7 @@ export default {
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
+    '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',

package/dist/es2019/rules/ensure-proper-xcss-usage/index.js

@@ -0,0 +1,149 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+import { errorBoundary } from '../utils/error-boundary';
+const rule = createLintRule({
+  meta: {
+    name: 'ensure-proper-xcss-usage',
+    docs: {
+      description: 'Enforces proper xcss usage: migrate from xcss() to cssMap() and use cssMap objects with specific keys.',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      missingCssMapKey: 'xcss prop should use a specific key from cssMap (e.g., {{identifier}}.root) instead of the entire cssMap object.',
+      noXcssWithCompiled: 'Cannot use `xcss()` function with `@atlaskit/primitives/compiled`. Use `cssMap()` from `@atlaskit/css or `@compiled/react` instead.'
+    }
+  },
+  create(context) {
+    const tracker = {
+      // Components tracking
+      compiledComponents: new Set(),
+      // Function tracking
+      cssMapFunction: new Set(),
+      xcssFunction: new Set(),
+      // Variables tracking
+      cssMapVariables: new Map(),
+      xcssVariables: new Set()
+    };
+    return errorBoundary({
+      // Track all imports in a single handler
+      ImportDeclaration(node) {
+        const source = node.source.value;
+        node.specifiers.forEach(specifier => {
+          if (specifier.type !== 'ImportSpecifier') {
+            return;
+          }
+
+          // Handle different import sources
+          switch (source) {
+            case '@atlaskit/primitives/compiled':
+              tracker.compiledComponents.add(specifier.imported.name);
+              break;
+            case '@atlaskit/primitives':
+              if (specifier.imported.name === 'xcss') {
+                tracker.xcssFunction.add(specifier.local.name);
+              }
+              break;
+            case '@atlaskit/css':
+            case '@compiled/react':
+              if (specifier.imported.name === 'cssMap') {
+                tracker.cssMapFunction.add(specifier.local.name);
+              }
+              break;
+          }
+        });
+      },
+      // Track variable declarations
+      VariableDeclarator(node) {
+        if (!node.init || node.init.type !== 'CallExpression' || node.init.callee.type !== 'Identifier' || node.id.type !== 'Identifier') {
+          return;
+        }
+        const calleeName = node.init.callee.name;
+        const variableName = node.id.name;
+
+        // Track cssMap variables and extract their keys
+        if (tracker.cssMapFunction.has(calleeName)) {
+          const keys = new Set();
+
+          // Extract keys from the cssMap object argument
+          if (node.init.arguments.length > 0 && node.init.arguments[0].type === 'ObjectExpression') {
+            node.init.arguments[0].properties.forEach(prop => {
+              if (prop.type === 'Property' && prop.key.type === 'Identifier') {
+                keys.add(prop.key.name);
+              }
+            });
+          }
+          tracker.cssMapVariables.set(variableName, keys);
+        }
+
+        // Track xcss variables
+        if (tracker.xcssFunction.has(calleeName)) {
+          tracker.xcssVariables.add(variableName);
+        }
+      },
+      // Check JSX elements for xcss prop usage
+      JSXElement(node) {
+        var _xcssAttribute$value;
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        const elementName = node.openingElement.name;
+        if (elementName.type !== 'JSXIdentifier') {
+          return;
+        }
+        const componentName = elementName.name;
+        if (!tracker.compiledComponents.has(componentName)) {
+          return;
+        }
+
+        // Find xcss attribute
+        const xcssAttribute = node.openingElement.attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.name === 'xcss');
+        if ((xcssAttribute === null || xcssAttribute === void 0 ? void 0 : (_xcssAttribute$value = xcssAttribute.value) === null || _xcssAttribute$value === void 0 ? void 0 : _xcssAttribute$value.type) !== 'JSXExpressionContainer') {
+          return;
+        }
+        const expression = xcssAttribute.value.expression;
+
+        // Check for direct xcss function calls
+        if (expression.type === 'CallExpression' && expression.callee.type === 'Identifier' && tracker.xcssFunction.has(expression.callee.name)) {
+          context.report({
+            node: expression,
+            messageId: 'noXcssWithCompiled'
+          });
+          return;
+        }
+
+        // Check for variables
+        if (expression.type === 'Identifier') {
+          const identifierName = expression.name;
+          if (tracker.xcssVariables.has(identifierName)) {
+            context.report({
+              node: expression,
+              messageId: 'noXcssWithCompiled'
+            });
+          } else if (tracker.cssMapVariables.has(identifierName)) {
+            context.report({
+              node: expression,
+              messageId: 'missingCssMapKey',
+              data: {
+                identifier: identifierName
+              }
+            });
+          }
+          return;
+        }
+
+        // Check member expressions (e.g., styles.root)
+        if (expression.type === 'MemberExpression' && expression.object.type === 'Identifier') {
+          const objectName = expression.object.name;
+          if (tracker.xcssVariables.has(objectName)) {
+            context.report({
+              node: expression,
+              messageId: 'noXcssWithCompiled'
+            });
+          }
+        }
+      }
+    });
+  }
+});
+export default rule;

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

@@ -1,12 +1,13 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d42e0ce93d45d02a5c30dcfdb7110c17>>
+ * @codegen <<SignedSource::3de5d5b44aa01faabdb840bc7fb43d04>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
 import ensureDesignTokenUsage from './ensure-design-token-usage';
 import ensureDesignTokenUsagePreview from './ensure-design-token-usage-preview';
 import ensureIconColor from './ensure-icon-color';
+import ensureProperXcssUsage from './ensure-proper-xcss-usage';
 import iconLabel from './icon-label';
 import noBannedImports from './no-banned-imports';
 import noBooleanAutofocusOnModalDialog from './no-boolean-autofocus-on-modal-dialog';
@@ -43,6 +44,7 @@ import noStyledTaggedTemplateExpression from './no-styled-tagged-template-expres
 import noUnsafeDesignTokenUsage from './no-unsafe-design-token-usage';
 import noUnsafeStyleOverrides from './no-unsafe-style-overrides';
 import noUnsupportedDragAndDropLibraries from './no-unsupported-drag-and-drop-libraries';
+import noUtilityIcons from './no-utility-icons';
 import preferPrimitives from './prefer-primitives';
 import useButtonGroupLabel from './use-button-group-label';
 import useCxFunctionInXcss from './use-cx-function-in-xcss';
@@ -69,6 +71,7 @@ export const rules = {
   'ensure-design-token-usage': ensureDesignTokenUsage,
   'ensure-design-token-usage/preview': ensureDesignTokenUsagePreview,
   'ensure-icon-color': ensureIconColor,
+  'ensure-proper-xcss-usage': ensureProperXcssUsage,
   'icon-label': iconLabel,
   'no-banned-imports': noBannedImports,
   'no-boolean-autofocus-on-modal-dialog': noBooleanAutofocusOnModalDialog,
@@ -105,6 +108,7 @@ export const rules = {
   'no-unsafe-design-token-usage': noUnsafeDesignTokenUsage,
   'no-unsafe-style-overrides': noUnsafeStyleOverrides,
   'no-unsupported-drag-and-drop-libraries': noUnsupportedDragAndDropLibraries,
+  'no-utility-icons': noUtilityIcons,
   'prefer-primitives': preferPrimitives,
   'use-button-group-label': useButtonGroupLabel,
   'use-cx-function-in-xcss': useCxFunctionInXcss,

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

@@ -12,6 +12,8 @@ export const createChecks = context => {
   const legacyButtonImports = new Set();
   const errorsManual = {};
   const errorsAuto = {};
+  const iconSizesInfo = {}; //Import source key, locations as value
+
   let guidance = {};
 
   // Extract parameters
@@ -316,7 +318,7 @@ export const createChecks = context => {
 
     // Legacy icons rendered as JSX elements
     if (Object.keys(legacyIconImports).includes(name)) {
-      var _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
       const insideNewButton = isInsideNewButton(node, newButtonImports);
@@ -402,7 +404,7 @@ export const createChecks = context => {
       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 spacing if:
-      // 1. size is medium for core/utility icons or small for utility icons, or not set (default is medium for core and small for utility icons)
+      // 1. size is medium for core/utility icons or not set (default is medium for core and small for utility icons)
       // 2. not inside a new or legacy button (except for icon-only legacy buttons)
       const sizeProp = node.openingElement.attributes.find(attribute => attribute.type === 'JSXAttribute' && (attribute.name.name === 'size' || attribute.name.name === 'LEGACY_size'));
       let spacing;
@@ -411,13 +413,24 @@ export const createChecks = context => {
         if (sizeProp && sizeProp.type === 'JSXAttribute' && ((_sizeProp$value = sizeProp.value) === null || _sizeProp$value === void 0 ? void 0 : _sizeProp$value.type) === 'Literal') {
           if (sizeProp.value.value === 'medium') {
             spacing = 'spacious';
-          } else if (sizeProp.value.value === 'small' && (newIcon === null || newIcon === void 0 ? void 0 : newIcon.type) === 'utility') {
-            spacing = 'compact';
           }
         } else if (!sizeProp) {
           spacing = 'spacious';
         }
       }
+      if (!iconSizesInfo[legacyIconImports[name].packageName]) {
+        iconSizesInfo[legacyIconImports[name].packageName] = {
+          small: [],
+          usageCount: 0
+        };
+      }
+
+      // Do not automatically migration if size is small as we cannot determine if a core icon or a scaled down utility icon should be used
+      if (sizeProp && sizeProp.type === 'JSXAttribute' && ((_sizeProp$value2 = sizeProp.value) === null || _sizeProp$value2 === void 0 ? void 0 : _sizeProp$value2.type) === 'Literal' && sizeProp.value.value === 'small') {
+        iconSizesInfo[legacyIconImports[name].packageName].small.push(locToString(node));
+      }
+      iconSizesInfo[legacyIconImports[name].packageName].usageCount++;
+      const shouldForceSmallIcon = newIcon === null || newIcon === void 0 ? void 0 : newIcon.shouldForceSmallIcon;
       if (shouldUseSafeMigrationMode && !hasManualMigration && (newIcon !== null && newIcon !== void 0 && newIcon.isMigrationUnsafe || size !== 'medium' || hasSecondaryColorProp)) {
         createCantFindSuitableReplacementError(node, legacyIconImports[name].packageName, name, errorsManual, upcomingIcon ? true : migrationMapObject ? true : false);
       } else if (!hasManualMigration && (newIcon || upcomingIcon) && isNewIconMigratable) {
@@ -427,7 +440,8 @@ export const createChecks = context => {
           iconName: name,
           errors: errorsAuto,
           spacing,
-          insideNewButton
+          insideNewButton,
+          shouldForceSmallIcon
         });
       } else if ((!newIcon && !upcomingIcon || !isNewIconMigratable) && size) {
         createCantFindSuitableReplacementError(node, legacyIconImports[name].packageName, name, errorsManual, upcomingIcon ? true : migrationMapObject ? true : false);
@@ -437,7 +451,8 @@ export const createChecks = context => {
         iconPackage: legacyIconImports[name].packageName,
         insideNewButton,
         size: size && isSize(size) ? size : undefined,
-        shouldUseMigrationPath
+        shouldUseMigrationPath,
+        shouldForceSmallIcon
       });
     }
   };
@@ -479,6 +494,7 @@ export const createChecks = context => {
       throwAutoErrors({
         errorsManual,
         errorsAuto,
+        iconSizesInfo,
         legacyIconImports,
         guidance,
         migrationIconImports,

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

@@ -46,7 +46,7 @@ const getIconKey = iconPackage => {
  * Checks if a new icon can be auto-migrated based on guidance from the migration map
  */
 export const canAutoMigrateNewIconBasedOnSize = guidance => {
-  return ['swap', 'swap-slight-visual-change', 'swap-visual-change', 'swap-size-shift-utility'].includes(guidance || '');
+  return guidance ? ['swap', 'swap-slight-visual-change', 'swap-visual-change'].includes(guidance) : false;
 };
 
 /**
@@ -76,9 +76,11 @@ const getNewIconNameAndImportPath = (iconPackage, shouldUseMigrationPath) => {
 export const createGuidance = ({
   iconPackage,
   insideNewButton,
-  size,
-  shouldUseMigrationPath
+  size: initialSize,
+  shouldUseMigrationPath,
+  shouldForceSmallIcon
 }) => {
+  const size = shouldForceSmallIcon ? 'small' : initialSize;
   const migrationMapObject = getMigrationMapObject(iconPackage);
   const upcomingIcon = getUpcomingIcons(iconPackage);
   if (upcomingIcon) {
@@ -133,8 +135,18 @@ export const createGuidance = ({
     }
     if (insideNewButton) {
       guidance += buttonGuidanceStr;
-    } else if (size && size === 'medium') {
-      guidance += "Setting the spacing property to 'spacious' will maintain the icon's box dimensions - but consider setting spacing='none' as it allows for easier control of spacing by parent elements.\n";
+    } else if (size === 'medium') {
+      guidance += "Setting the spacing='spacious' will maintain the icon's box dimensions - but consider setting spacing='none' as it allows for easier control of spacing by parent elements.\n";
+    } else if (size === 'small') {
+      if (initialSize !== 'small' && shouldForceSmallIcon) {
+        guidance += "For this icon, it's recommended to use a smaller size using size='small'. Alternatively, for special cases where a larger version is needed size='medium' can be used, but it is generally discouraged for this icon.\n";
+      } else if (initialSize === 'small') {
+        if (shouldForceSmallIcon) {
+          guidance += "Setting spacing='compact' will maintain the icon's box dimensions - but consider setting spacing='none' as it allows for easier control of spacing by parent elements.\n";
+        } else {
+          guidance += "It's recommended to upscale to a medium icon with no spacing. Alternatively for special cases where smaller icons are required, the original icon size and dimensions can be maintained by using size='small' and spacing='compact'.\n";
+        }
+      }
     } else if (size) {
       guidance += "In the new icon, please use spacing='none'.\n";
     }
@@ -258,7 +270,8 @@ export const createAutoMigrationError = ({
   iconName,
   errors,
   spacing,
-  insideNewButton
+  insideNewButton,
+  shouldForceSmallIcon
 }) => {
   const myError = {
     node,
@@ -268,7 +281,8 @@ export const createAutoMigrationError = ({
       iconName,
       spacing: spacing !== null && spacing !== void 0 ? spacing : '',
       // value type need to be a string in Rule.ReportDescriptor
-      insideNewButton: String(insideNewButton)
+      insideNewButton: String(insideNewButton),
+      shouldForceSmallIcon: String(shouldForceSmallIcon)
     }
   };
   errors[locToString(node)] = myError;
@@ -421,7 +435,7 @@ const getNewIconNameForRenaming = (isInManualArray, importSource, importSpecifie
   let newIconName;
   if (isInManualArray) {
     newIconName = getNewIconNameAndImportPath(importSource).iconName;
-    const keyToName = newIconName ? newIconName[0].toUpperCase() + newIconName.slice(1) + 'Icon' : undefined;
+    const keyToName = newIconName ? getComponentName(newIconName) : undefined;
     newIconName = keyToName;
     if (newIconName === undefined || importSpecifier === keyToName) {
       newIconName = `${keyToName}New`;
@@ -429,6 +443,9 @@ const getNewIconNameForRenaming = (isInManualArray, importSource, importSpecifie
   }
   return newIconName;
 };
+export const getComponentName = name => {
+  return name.split(/\W/).map(part => `${part[0].toUpperCase()}${part.slice(1)}`).join('').concat('Icon');
+};
 
 /**
  *
@@ -499,7 +516,8 @@ const createPropFixes = ({
 }) => {
   const fixes = [];
   const {
-    spacing
+    spacing,
+    size
   } = metadata;
   if (shouldUseMigrationPath && !legacyImportNode) {
     return fixes;
@@ -520,24 +538,31 @@ const createPropFixes = ({
     if (primaryColor && primaryColor.type === 'JSXAttribute') {
       fixes.push(fixer.replaceText(primaryColor.name, 'color'));
     }
-
-    // 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 && !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));
+      if (shouldUseMigrationPath) {
+        // Rename existing size prop to LEGACY_size and add new size prop if applicable
+        fixes.push(fixer.replaceText(sizeProp.name, 'LEGACY_size'));
+        if (size) {
+          fixes.push(fixer.insertTextAfter(sizeProp, ` size="${size}"`));
+        }
+      } else {
+        if (size && sizeProp.value) {
+          // update size prop with new replacement size
+          fixes.push(fixer.replaceText(sizeProp.value, `"${size}"`));
+        } else {
+          // remove size prop if no new replacement size is specified
+          fixes.push(fixer.remove(sizeProp));
+        }
+      }
+    } else if (size) {
+      fixes.push(fixer.insertTextAfter(openingElement.name, ` size="${size}"`));
+    }
+
+    // Add spacing prop if no existing spacing prop and icon is not imported from migration entrypoint
+    if (spacing && spacing !== 'none' && !spacingProp && !migrationImportNode) {
+      fixes.push(fixer.insertTextAfter(sizeProp || openingElement.name, ` spacing="${spacing}"`));
     }
 
     // rename or remove secondaryColor prop based on shouldUseMigrationPath
@@ -622,6 +647,7 @@ export const throwManualErrors = ({
 export const throwAutoErrors = ({
   errorsManual,
   errorsAuto,
+  iconSizesInfo,
   legacyIconImports,
   guidance,
   migrationIconImports,
@@ -667,7 +693,7 @@ export const throwAutoErrors = ({
     const appliedErrorsForImport = [];
     // Loop over auto errors for a single import source
     for (const [_, error] of errorList.entries()) {
-      var _legacyIconImports$er, _legacyIconImports$er2, _migrationIconImports;
+      var _iconSizesInfo$import, _iconSizesInfo$import2, _iconSizesInfo$import3, _legacyIconImports$er, _error$data2, _legacyIconImports$er2, _migrationIconImports;
       const {
         key
       } = error;
@@ -676,8 +702,20 @@ export const throwAutoErrors = ({
       // If that is the case we'll need to provide a suggestion instead of auto-fixing as the suggestion will
       // add another import without removing the old import and this needs to be validated
       const isInManualArray = allManualErrorSources.has(importSource);
+
+      // Check if the icon has size of small, if so it cannot be automatically migrated. Two suggestions will be provided
+      // 1. Use core icon with no spacing
+      // 2. Use utility icon with compact spacing
+      const isSizeSmall = (_iconSizesInfo$import = iconSizesInfo[importSource]) === null || _iconSizesInfo$import === void 0 ? void 0 : _iconSizesInfo$import.small.includes(key);
+      const isMixedSizeUsage = ((_iconSizesInfo$import2 = iconSizesInfo[importSource]) === null || _iconSizesInfo$import2 === void 0 ? void 0 : _iconSizesInfo$import2.small.length) > 0 && ((_iconSizesInfo$import3 = iconSizesInfo[importSource]) === null || _iconSizesInfo$import3 === void 0 ? void 0 : _iconSizesInfo$import3.small.length) < iconSizesInfo[importSource].usageCount;
+
+      // Icon should be renamed
+      // 1. If the icon is in the manual array OR
+      // 2. If there is mixed size usages of this icon with size small
+      const shouldRenameIcon = isInManualArray || isMixedSizeUsage;
+
       // New icon name for renaming if the icon is in the manual array
-      const newIconName = getNewIconNameForRenaming(isInManualArray, importSource, errorList[0].data ? (_legacyIconImports$er = legacyIconImports[errorList[0].data.iconName]) === null || _legacyIconImports$er === void 0 ? void 0 : _legacyIconImports$er.importSpecifier : undefined);
+      const newIconName = getNewIconNameForRenaming(shouldRenameIcon, importSource, errorList[0].data ? (_legacyIconImports$er = legacyIconImports[errorList[0].data.iconName]) === null || _legacyIconImports$er === void 0 ? void 0 : _legacyIconImports$er.importSpecifier : undefined);
       if (!node) {
         continue;
       }
@@ -685,23 +723,49 @@ export const throwAutoErrors = ({
       if (Object.keys(error).includes('data') && error.data) {
         error.data.guidance = guidanceMessage;
       }
+      const shouldForceSmallIcon = ((_error$data2 = error.data) === null || _error$data2 === void 0 ? void 0 : _error$data2.shouldForceSmallIcon) === 'true';
       const fixArguments = error.data ? {
-        metadata: error.data,
+        metadata: {
+          ...error.data,
+          spacing: error.data.isInNewButton ? 'none' : error.data.spacing,
+          size: shouldForceSmallIcon ? 'small' : error.data.size
+        },
         legacyImportNode: (_legacyIconImports$er2 = legacyIconImports[error.data.iconName]) === null || _legacyIconImports$er2 === void 0 ? void 0 : _legacyIconImports$er2.importNode,
         migrationImportNode: (_migrationIconImports = migrationIconImports[error.data.iconName]) === null || _migrationIconImports === void 0 ? void 0 : _migrationIconImports.importNode,
         shouldUseMigrationPath,
-        newIconName: isInManualArray ? newIconName : undefined
+        newIconName: shouldRenameIcon ? newIconName : undefined
       } : null;
       if (!error.data || shouldUseMigrationPath && !checkIfNewIconExist(error) || !fixArguments) {
         continue;
       }
-      if (isInManualArray) {
-        // provide suggestion if there is a manual error for the same import source and thus the legacy import can't be removed
+      const isInNewButton = fixArguments.metadata.insideNewButton === 'true';
+      if (isSizeSmall && !shouldForceSmallIcon) {
         error.suggest = [{
-          desc: 'Rename icon import, import from the new package, and update props.',
+          desc: isInNewButton ? 'Replace with medium core icon (Recommended)' : 'Replace with medium core icon and no spacing (Recommended)',
           fix: fixer => {
             return [...createPropFixes({
               ...fixArguments,
+              metadata: {
+                ...fixArguments.metadata,
+                spacing: 'none'
+              },
+              node,
+              fixer
+            }), ...createImportFix({
+              ...fixArguments,
+              fixer
+            })];
+          }
+        }, {
+          desc: isInNewButton ? 'Replace with small core icon' : 'Replace with small core icon and compact spacing',
+          fix: fixer => {
+            return [...createPropFixes({
+              ...fixArguments,
+              metadata: {
+                ...fixArguments.metadata,
+                spacing: 'compact',
+                size: 'small'
+              },
               node,
               fixer
             }), ...createImportFix({
@@ -711,23 +775,40 @@ export const throwAutoErrors = ({
           }
         }];
       } else {
-        // Update Guidance message for auto-fixing
-        if (error.data) {
-          error.data.guidance = error.data.guidance + `\nTo automatically fix this icon, run the auto-fixer attached to the first use of ${importSource} in this file - either manually, or by saving this file.`;
-        }
-        // There should only be 1 import fix for each import source and thus only add this at the start of the list
-        if (autoFixers.length === 0) {
-          autoFixers.push(fixer => createImportFix({
+        if (isInManualArray) {
+          // provide suggestion if there is a manual error for the same import source and thus the legacy import can't be removed
+          error.suggest = [{
+            desc: 'Rename icon import, import from the new package, and update props.',
+            fix: fixer => {
+              return [...createPropFixes({
+                ...fixArguments,
+                node,
+                fixer
+              }), ...createImportFix({
+                ...fixArguments,
+                fixer
+              })];
+            }
+          }];
+        } else {
+          // Update Guidance message for auto-fixing
+          if (error.data) {
+            error.data.guidance = error.data.guidance + `\nTo automatically fix this icon, run the auto-fixer attached to the first use of ${importSource} in this file - either manually, or by saving this file.`;
+          }
+          // There should only be 1 import fix for each import source and thus only add this at the start of the list
+          if (autoFixers.length === 0) {
+            autoFixers.push(fixer => createImportFix({
+              ...fixArguments,
+              fixer
+            }));
+          }
+          // Push the prop fix regardless
+          autoFixers.push(fixer => createPropFixes({
             ...fixArguments,
+            node,
             fixer
           }));
         }
-        // Push the prop fix regardless
-        autoFixers.push(fixer => createPropFixes({
-          ...fixArguments,
-          node,
-          fixer
-        }));
       }
       // Add the error to the appliedErrorsForImport, ready to be thrown later
       appliedErrorsForImport.push(error);