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

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.throwManualErrors = exports.throwAutoErrors = exports.locToString = exports.isSize = exports.isInsideNewButton = exports.isInsideLegacyButton = exports.isInsideIconOnlyLegacyButton = exports.getUpcomingIcons = exports.getMigrationMapObject = 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.throwManualErrors = exports.throwAutoErrors = exports.locToString = exports.isSize = exports.isInsideNewButton = exports.isInsideLegacyButton = exports.isInsideIconOnlyLegacyButton = exports.getUpcomingIcons = exports.getMigrationMapObject = exports.getComponentName = 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;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -66,7 +66,7 @@ var getIconKey = function getIconKey(iconPackage) {
  * Checks if a new icon can be auto-migrated based on guidance from the migration map
  */
 var canAutoMigrateNewIconBasedOnSize = exports.canAutoMigrateNewIconBasedOnSize = function 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;
 };
 
 /**
@@ -94,8 +94,10 @@ var getNewIconNameAndImportPath = function getNewIconNameAndImportPath(iconPacka
 var createGuidance = exports.createGuidance = function createGuidance(_ref) {
   var iconPackage = _ref.iconPackage,
     insideNewButton = _ref.insideNewButton,
-    size = _ref.size,
-    shouldUseMigrationPath = _ref.shouldUseMigrationPath;
+    initialSize = _ref.size,
+    shouldUseMigrationPath = _ref.shouldUseMigrationPath,
+    shouldForceSmallIcon = _ref.shouldForceSmallIcon;
+  var size = shouldForceSmallIcon ? 'small' : initialSize;
   var migrationMapObject = getMigrationMapObject(iconPackage);
   var upcomingIcon = getUpcomingIcons(iconPackage);
   if (upcomingIcon) {
@@ -155,8 +157,18 @@ var createGuidance = exports.createGuidance = function createGuidance(_ref) {
     }
     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";
     }
@@ -280,7 +292,8 @@ var createAutoMigrationError = exports.createAutoMigrationError = function creat
     iconName = _ref4.iconName,
     errors = _ref4.errors,
     spacing = _ref4.spacing,
-    insideNewButton = _ref4.insideNewButton;
+    insideNewButton = _ref4.insideNewButton,
+    shouldForceSmallIcon = _ref4.shouldForceSmallIcon;
   var myError = {
     node: node,
     messageId: 'noLegacyIconsAutoMigration',
@@ -289,7 +302,8 @@ var createAutoMigrationError = exports.createAutoMigrationError = function creat
       iconName: 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;
@@ -444,7 +458,7 @@ var getNewIconNameForRenaming = function getNewIconNameForRenaming(isInManualArr
   var newIconName;
   if (isInManualArray) {
     newIconName = getNewIconNameAndImportPath(importSource).iconName;
-    var keyToName = newIconName ? newIconName[0].toUpperCase() + newIconName.slice(1) + 'Icon' : undefined;
+    var keyToName = newIconName ? getComponentName(newIconName) : undefined;
     newIconName = keyToName;
     if (newIconName === undefined || importSpecifier === keyToName) {
       newIconName = "".concat(keyToName, "New");
@@ -452,6 +466,11 @@ var getNewIconNameForRenaming = function getNewIconNameForRenaming(isInManualArr
   }
   return newIconName;
 };
+var getComponentName = exports.getComponentName = function getComponentName(name) {
+  return name.split(/\W/).map(function (part) {
+    return "".concat(part[0].toUpperCase()).concat(part.slice(1));
+  }).join('').concat('Icon');
+};
 
 /**
  *
@@ -517,7 +536,8 @@ var createPropFixes = function createPropFixes(_ref7) {
     migrationImportNode = _ref7.migrationImportNode,
     newIconName = _ref7.newIconName;
   var fixes = [];
-  var spacing = metadata.spacing;
+  var spacing = metadata.spacing,
+    size = metadata.size;
   if (shouldUseMigrationPath && !legacyImportNode) {
     return fixes;
   }
@@ -533,24 +553,31 @@ var createPropFixes = function createPropFixes(_ref7) {
     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
     var sizeProp = findProp(attributes, 'size');
     var spacingProp = findProp(attributes, 'spacing');
-    if (spacing && !spacingProp && !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));
+      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=\"".concat(size, "\"")));
+        }
+      } else {
+        if (size && sizeProp.value) {
+          // update size prop with new replacement size
+          fixes.push(fixer.replaceText(sizeProp.value, "\"".concat(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=\"".concat(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=\"".concat(spacing, "\"")));
     }
 
     // rename or remove secondaryColor prop based on shouldUseMigrationPath
@@ -647,6 +674,7 @@ var throwManualErrors = exports.throwManualErrors = function throwManualErrors(_
 var throwAutoErrors = exports.throwAutoErrors = function throwAutoErrors(_ref10) {
   var errorsManual = _ref10.errorsManual,
     errorsAuto = _ref10.errorsAuto,
+    iconSizesInfo = _ref10.iconSizesInfo,
     legacyIconImports = _ref10.legacyIconImports,
     guidance = _ref10.guidance,
     migrationIconImports = _ref10.migrationIconImports,
@@ -702,7 +730,7 @@ var throwAutoErrors = exports.throwAutoErrors = function throwAutoErrors(_ref10)
       _step2;
     try {
       var _loop2 = function _loop2() {
-          var _legacyIconImports$er, _legacyIconImports$er2, _migrationIconImports;
+          var _iconSizesInfo$import, _iconSizesInfo$import2, _iconSizesInfo$import3, _legacyIconImports$er, _error$data2, _legacyIconImports$er2, _migrationIconImports;
           var _step2$value = (0, _slicedToArray2.default)(_step2.value, 2),
             _ = _step2$value[0],
             error = _step2$value[1];
@@ -712,8 +740,20 @@ var throwAutoErrors = exports.throwAutoErrors = function throwAutoErrors(_ref10)
           // 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
           var 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
+          var isSizeSmall = (_iconSizesInfo$import = iconSizesInfo[importSource]) === null || _iconSizesInfo$import === void 0 ? void 0 : _iconSizesInfo$import.small.includes(key);
+          var 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
+          var shouldRenameIcon = isInManualArray || isMixedSizeUsage;
+
           // New icon name for renaming if the icon is in the manual array
-          var 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);
+          var 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) {
             return 0; // continue
           }
@@ -721,22 +761,43 @@ var throwAutoErrors = exports.throwAutoErrors = function throwAutoErrors(_ref10)
           if (Object.keys(error).includes('data') && error.data) {
             error.data.guidance = guidanceMessage;
           }
+          var shouldForceSmallIcon = ((_error$data2 = error.data) === null || _error$data2 === void 0 ? void 0 : _error$data2.shouldForceSmallIcon) === 'true';
           var fixArguments = error.data ? {
-            metadata: error.data,
+            metadata: _objectSpread(_objectSpread({}, 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: shouldUseMigrationPath,
-            newIconName: isInManualArray ? newIconName : undefined
+            newIconName: shouldRenameIcon ? newIconName : undefined
           } : null;
           if (!error.data || shouldUseMigrationPath && !checkIfNewIconExist(error) || !fixArguments) {
             return 0; // 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
+          var 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: function fix(fixer) {
+                return [].concat((0, _toConsumableArray2.default)(createPropFixes(_objectSpread(_objectSpread({}, fixArguments), {}, {
+                  metadata: _objectSpread(_objectSpread({}, fixArguments.metadata), {}, {
+                    spacing: 'none'
+                  }),
+                  node: node,
+                  fixer: fixer
+                }))), (0, _toConsumableArray2.default)(createImportFix(_objectSpread(_objectSpread({}, fixArguments), {}, {
+                  fixer: fixer
+                }))));
+              }
+            }, {
+              desc: isInNewButton ? 'Replace with small core icon' : 'Replace with small core icon and compact spacing',
               fix: function fix(fixer) {
                 return [].concat((0, _toConsumableArray2.default)(createPropFixes(_objectSpread(_objectSpread({}, fixArguments), {}, {
+                  metadata: _objectSpread(_objectSpread({}, fixArguments.metadata), {}, {
+                    spacing: 'compact',
+                    size: 'small'
+                  }),
                   node: node,
                   fixer: fixer
                 }))), (0, _toConsumableArray2.default)(createImportFix(_objectSpread(_objectSpread({}, fixArguments), {}, {
@@ -745,25 +806,40 @@ var throwAutoErrors = exports.throwAutoErrors = function throwAutoErrors(_ref10)
               }
             }];
           } 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 ".concat(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) {
+            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: function fix(fixer) {
+                  return [].concat((0, _toConsumableArray2.default)(createPropFixes(_objectSpread(_objectSpread({}, fixArguments), {}, {
+                    node: node,
+                    fixer: fixer
+                  }))), (0, _toConsumableArray2.default)(createImportFix(_objectSpread(_objectSpread({}, fixArguments), {}, {
+                    fixer: 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 ".concat(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(function (fixer) {
+                  return createImportFix(_objectSpread(_objectSpread({}, fixArguments), {}, {
+                    fixer: fixer
+                  }));
+                });
+              }
+              // Push the prop fix regardless
               autoFixers.push(function (fixer) {
-                return createImportFix(_objectSpread(_objectSpread({}, fixArguments), {}, {
+                return createPropFixes(_objectSpread(_objectSpread({}, fixArguments), {}, {
+                  node: node,
                   fixer: fixer
                 }));
               });
             }
-            // Push the prop fix regardless
-            autoFixers.push(function (fixer) {
-              return createPropFixes(_objectSpread(_objectSpread({}, fixArguments), {}, {
-                node: node,
-                fixer: fixer
-              }));
-            });
           }
           // Add the error to the appliedErrorsForImport, ready to be thrown later
           appliedErrorsForImport.push(error);

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

@@ -17,7 +17,7 @@ var getConfig = exports.getConfig = function getConfig(specifier) {
   var source = _fs.default.readFileSync(configPath, 'utf8');
   var parsedConfig = JSON.parse(source);
   var combinedConfig = _objectSpread(_objectSpread({}, parsedConfig), {}, {
-    imports: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, parsedConfig.imports), _deprecatedMap2.deprecatedCore), _deprecatedMap2.deprecatedUtility), _deprecatedMap.deprecatedCore)
+    imports: _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, parsedConfig.imports), _deprecatedMap2.deprecatedCore), _deprecatedMap2.deprecatedUtility), _deprecatedMap.deprecatedCore), _deprecatedMap.deprecatedUtility)
   });
   return combinedConfig[specifier];
 };

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,