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

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

package/dist/es2019/rules/utils/get-deprecated-config.js

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import { deprecatedCore as deprecatedIconLabCore } from '@atlaskit/icon-lab/deprecated-map';
+import { deprecatedCore as deprecatedIconLabCore, deprecatedUtility as deprecatedIconLabUtility } from '@atlaskit/icon-lab/deprecated-map';
 import { deprecatedCore as deprecatedIconCore, deprecatedUtility as deprecatedIconUtility } from '@atlaskit/icon/deprecated-map';
 export const getConfig = specifier => {
   const configPath = path.resolve(__dirname, '..', '..', '..', 'configs', 'deprecated.json');
@@ -12,7 +12,8 @@ export const getConfig = specifier => {
       ...parsedConfig.imports,
       ...deprecatedIconCore,
       ...deprecatedIconUtility,
-      ...deprecatedIconLabCore
+      ...deprecatedIconLabCore,
+      ...deprecatedIconLabUtility
     }
   };
   return combinedConfig[specifier];

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

@@ -14,6 +14,8 @@ export var createChecks = function createChecks(context) {
   var legacyButtonImports = new Set();
   var errorsManual = {};
   var errorsAuto = {};
+  var iconSizesInfo = {}; //Import source key, locations as value
+
   var guidance = {};
 
   // Extract parameters
@@ -385,6 +387,7 @@ export var createChecks = function createChecks(context) {
 
     // Legacy icons rendered as JSX elements
     if (Object.keys(legacyIconImports).includes(name)) {
+      var _sizeProp$value2;
       // Determine if inside a new button - if so:
       // - Assume spread props are safe - still error if props explicitly set to unmigratable values
       var insideNewButton = isInsideNewButton(node, newButtonImports);
@@ -483,7 +486,7 @@ export var createChecks = function createChecks(context) {
       var isNewIconMigratable = canAutoMigrateNewIconBasedOnSize(upcomingIcon ? upcomingIcon.sizeGuidance[size !== null && size !== void 0 ? size : 'medium'] : migrationMapObject === null || migrationMapObject === void 0 ? void 0 : migrationMapObject.sizeGuidance[size !== null && size !== void 0 ? size : '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)
       var sizeProp = node.openingElement.attributes.find(function (attribute) {
         return attribute.type === 'JSXAttribute' && (attribute.name.name === 'size' || attribute.name.name === 'LEGACY_size');
@@ -494,13 +497,24 @@ export var createChecks = function 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++;
+      var 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) {
@@ -510,7 +524,8 @@ export var createChecks = function createChecks(context) {
           iconName: name,
           errors: errorsAuto,
           spacing: spacing,
-          insideNewButton: insideNewButton
+          insideNewButton: insideNewButton,
+          shouldForceSmallIcon: shouldForceSmallIcon
         });
       } else if ((!newIcon && !upcomingIcon || !isNewIconMigratable) && size) {
         createCantFindSuitableReplacementError(node, legacyIconImports[name].packageName, name, errorsManual, upcomingIcon ? true : migrationMapObject ? true : false);
@@ -520,7 +535,8 @@ export var createChecks = function createChecks(context) {
         iconPackage: legacyIconImports[name].packageName,
         insideNewButton: insideNewButton,
         size: size && isSize(size) ? size : undefined,
-        shouldUseMigrationPath: shouldUseMigrationPath
+        shouldUseMigrationPath: shouldUseMigrationPath,
+        shouldForceSmallIcon: shouldForceSmallIcon
       });
     }
   };
@@ -571,6 +587,7 @@ export var createChecks = function createChecks(context) {
       throwAutoErrors({
         errorsManual: errorsManual,
         errorsAuto: errorsAuto,
+        iconSizesInfo: iconSizesInfo,
         legacyIconImports: legacyIconImports,
         guidance: guidance,
         migrationIconImports: migrationIconImports,