@atlaskit/eslint-plugin-design-system 11.8.3 → 11.8.4

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 11.8.4
+
+### Patch Changes
+
+- [#104581](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/104581)
+  [`d7e7feee083ad`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d7e7feee083ad) -
+  Updated behavior of no-legacy-icons autofixer to maintain appropriate sizing for legacy icon-only
+  button components
+
 ## 11.8.3
 
 ### Patch Changes

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

@@ -379,22 +379,13 @@ var createChecks = exports.createChecks = function createChecks(context) {
 
     // Flag icons imported from migration path
     if (!shouldUseMigrationPath && Object.keys(migrationIconImports).includes(name)) {
-      var _sizeProp$value;
-      var sizeProp = node.openingElement.attributes.find(function (attribute) {
-        return attribute.type === 'JSXAttribute' && (attribute.name.name === 'size' || attribute.name.name === 'LEGACY_size');
-      });
-      var insideNewButton = (0, _helpers.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
-      var 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) && !(0, _helpers.isInsideNewButton)(node, newButtonImports) && !(0, _helpers.isInsideLegacyButton)(node, legacyButtonImports);
       (0, _helpers.createAutoMigrationError)({
         node: node,
         importSource: migrationIconImports[name].packageName,
         iconName: name,
         errors: errorsAuto,
-        spacing: shouldAddSpaciousSpacing ? 'spacious' : undefined,
-        insideNewButton: insideNewButton
+        spacing: undefined,
+        insideNewButton: true
       });
     }
 
@@ -403,11 +394,12 @@ var createChecks = exports.createChecks = function createChecks(context) {
       var _size, _size2;
       // Determine if inside a new button - if so:
       // - Assume spread props are safe - still error if props explicitly set to unmigratable values
-      var _insideNewButton = (0, _helpers.isInsideNewButton)(node, newButtonImports);
+      var insideNewButton = (0, _helpers.isInsideNewButton)(node, newButtonImports);
 
       // Determine if inside a legacy default button - if so:
       // the auto fixer will add spacing prop to the medium size icon
       var insideLegacyButton = (0, _helpers.isInsideLegacyButton)(node, legacyButtonImports);
+      var insideIconOnlyLegacyButton = (0, _helpers.isInsideIconOnlyLegacyButton)(node, legacyButtonImports);
 
       // Find size prop on node
       var size = 'medium';
@@ -479,7 +471,7 @@ var createChecks = exports.createChecks = function createChecks(context) {
       // Do a set comparison - is requiredAttributesAfterSpread a subset of afterSpreadSet?
       if (hasSpread === true && !Array.from(requiredAttributesAfterSpread).every(function (val) {
         return afterSpreadSet.has(val);
-      }) && !_insideNewButton) {
+      }) && !insideNewButton) {
         var missingProps = Array.from(requiredAttributesAfterSpread).filter(function (val) {
           return !afterSpreadSet.has(val);
         });
@@ -499,20 +491,20 @@ var createChecks = exports.createChecks = function createChecks(context) {
 
       // 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)
-      // 2. not inside a new or legacy button
-      var _sizeProp = node.openingElement.attributes.find(function (attribute) {
+      // 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');
       });
       var spacing;
-      if (!_insideNewButton && !insideLegacyButton) {
-        var _sizeProp$value2;
-        if (_sizeProp && _sizeProp.type === 'JSXAttribute' && ((_sizeProp$value2 = _sizeProp.value) === null || _sizeProp$value2 === void 0 ? void 0 : _sizeProp$value2.type) === 'Literal') {
-          if (_sizeProp.value.value === 'medium') {
+      if (!insideNewButton && !(insideLegacyButton && !insideIconOnlyLegacyButton)) {
+        var _sizeProp$value;
+        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') {
+          } else if (sizeProp.value.value === 'small' && (newIcon === null || newIcon === void 0 ? void 0 : newIcon.type) === 'utility') {
             spacing = 'compact';
           }
-        } else if (!_sizeProp) {
+        } else if (!sizeProp) {
           spacing = 'spacious';
         }
       }
@@ -525,7 +517,7 @@ var createChecks = exports.createChecks = function createChecks(context) {
           iconName: name,
           errors: errorsAuto,
           spacing: spacing,
-          insideNewButton: _insideNewButton
+          insideNewButton: insideNewButton
         });
       } else if ((!newIcon && !upcomingIcon || !isNewIconMigratable) && size) {
         (0, _helpers.createCantFindSuitableReplacementError)(node, legacyIconImports[name].packageName, name, errorsManual, upcomingIcon ? true : migrationMapObject ? true : false);
@@ -533,7 +525,7 @@ var createChecks = exports.createChecks = function createChecks(context) {
       (0, _helpers.addToListOfRanges)(node, errorRanges);
       guidance[(0, _helpers.locToString)(node)] = (0, _helpers.createGuidance)({
         iconPackage: legacyIconImports[name].packageName,
-        insideNewButton: _insideNewButton,
+        insideNewButton: insideNewButton,
         size: size && (0, _helpers.isSize)(size) ? size : undefined,
         shouldUseMigrationPath: shouldUseMigrationPath
       });

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.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.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"));
@@ -407,11 +407,31 @@ var isInsideNewButton = exports.isInsideNewButton = function isInsideNewButton(n
  */
 var isInsideLegacyButton = exports.isInsideLegacyButton = function isInsideLegacyButton(node, legacyButtonImports) {
   var _node$parent3, _node$parent4, _node$parent5, _node$parent6;
-  var insideLegacyButton = false;
-  if (node.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'JSXExpressionContainer') && (_node$parent3 = node.parent) !== null && _node$parent3 !== void 0 && _node$parent3.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.parent, 'JSXAttribute') && (node.parent.parent.name.name === 'iconBefore' || node.parent.parent.name.name === 'iconAfter') && (0, _eslintCodemodUtils.isNodeOfType)((_node$parent4 = node.parent) === null || _node$parent4 === void 0 || (_node$parent4 = _node$parent4.parent) === null || _node$parent4 === void 0 ? void 0 : _node$parent4.parent, 'JSXOpeningElement') && (0, _eslintCodemodUtils.isNodeOfType)((_node$parent5 = node.parent) === null || _node$parent5 === void 0 || (_node$parent5 = _node$parent5.parent) === null || _node$parent5 === void 0 ? void 0 : _node$parent5.parent.name, 'JSXIdentifier') && legacyButtonImports.has((_node$parent6 = node.parent) === null || _node$parent6 === void 0 || (_node$parent6 = _node$parent6.parent) === null || _node$parent6 === void 0 ? void 0 : _node$parent6.parent.name.name)) {
-    insideLegacyButton = true;
+  return node.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'JSXExpressionContainer') && ((_node$parent3 = node.parent) === null || _node$parent3 === void 0 ? void 0 : _node$parent3.parent) && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.parent, 'JSXAttribute') && (node.parent.parent.name.name === 'iconBefore' || node.parent.parent.name.name === 'iconAfter') && (0, _eslintCodemodUtils.isNodeOfType)((_node$parent4 = node.parent) === null || _node$parent4 === void 0 || (_node$parent4 = _node$parent4.parent) === null || _node$parent4 === void 0 ? void 0 : _node$parent4.parent, 'JSXOpeningElement') && (0, _eslintCodemodUtils.isNodeOfType)((_node$parent5 = node.parent) === null || _node$parent5 === void 0 || (_node$parent5 = _node$parent5.parent) === null || _node$parent5 === void 0 ? void 0 : _node$parent5.parent.name, 'JSXIdentifier') && legacyButtonImports.has((_node$parent6 = node.parent) === null || _node$parent6 === void 0 || (_node$parent6 = _node$parent6.parent) === null || _node$parent6 === void 0 ? void 0 : _node$parent6.parent.name.name);
+};
+
+/**
+ *
+ * @param node Icon JSXelement
+ * @param newButtonImports list of legacy button import specifiers
+ * @returns if Icon is inside a legacy button
+ */
+var isInsideIconOnlyLegacyButton = exports.isInsideIconOnlyLegacyButton = function isInsideIconOnlyLegacyButton(node, legacyButtonImports) {
+  var insideIconOnlyLegacyButton = false;
+  if (isInsideLegacyButton(node, legacyButtonImports)) {
+    var _node$parent7, _node$parent8, _node$parent9, _node$parent10, _node$parent11, _node$parent12;
+    var legacyButtonAttributes = node.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'JSXExpressionContainer') && (_node$parent7 = node.parent) !== null && _node$parent7 !== void 0 && _node$parent7.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent.parent, 'JSXAttribute') && node.parent.parent.parent && (0, _eslintCodemodUtils.isNodeOfType)((_node$parent8 = node.parent) === null || _node$parent8 === void 0 || (_node$parent8 = _node$parent8.parent) === null || _node$parent8 === void 0 ? void 0 : _node$parent8.parent, 'JSXOpeningElement') ? (_node$parent9 = node.parent) === null || _node$parent9 === void 0 || (_node$parent9 = _node$parent9.parent) === null || _node$parent9 === void 0 ? void 0 : _node$parent9.parent.attributes.map(function (attribute) {
+      var _attribute$name;
+      return (0, _eslintCodemodUtils.isNodeOfType)(attribute, 'JSXAttribute') && (0, _eslintCodemodUtils.isNodeOfType)(attribute.name, 'JSXIdentifier') && (attribute === null || attribute === void 0 || (_attribute$name = attribute.name) === null || _attribute$name === void 0 ? void 0 : _attribute$name.name);
+    }).filter(Boolean) : [];
+    var hasIconBefore = legacyButtonAttributes.includes('iconBefore');
+    var hasIconAfter = legacyButtonAttributes.includes('iconAfter');
+    var hasChildren = ((_node$parent10 = node.parent) === null || _node$parent10 === void 0 || (_node$parent10 = _node$parent10.parent) === null || _node$parent10 === void 0 || (_node$parent10 = _node$parent10.parent) === null || _node$parent10 === void 0 ? void 0 : _node$parent10.parent) && (0, _eslintCodemodUtils.isNodeOfType)((_node$parent11 = node.parent) === null || _node$parent11 === void 0 || (_node$parent11 = _node$parent11.parent) === null || _node$parent11 === void 0 || (_node$parent11 = _node$parent11.parent) === null || _node$parent11 === void 0 ? void 0 : _node$parent11.parent, 'JSXElement') && ((_node$parent12 = node.parent) === null || _node$parent12 === void 0 || (_node$parent12 = _node$parent12.parent) === null || _node$parent12 === void 0 || (_node$parent12 = _node$parent12.parent) === null || _node$parent12 === void 0 ? void 0 : _node$parent12.parent.children.length) > 0;
+    if (hasIconBefore && !hasIconAfter && !hasChildren || !hasIconBefore && hasIconAfter && !hasChildren || !hasIconBefore && !hasIconAfter && hasChildren) {
+      insideIconOnlyLegacyButton = true;
+    }
   }
-  return insideLegacyButton;
+  return insideIconOnlyLegacyButton;
 };
 var findProp = function findProp(attributes, propName) {
   return attributes.find(function (attr) {

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, isInsideLegacyButton, isInsideNewButton, isSize, locToString, throwAutoErrors, throwManualErrors } from './helpers';
+import { addToListOfRanges, canAutoMigrateNewIconBasedOnSize, canMigrateColor, createAutoMigrationError, createCantFindSuitableReplacementError, createCantMigrateColorError, createCantMigrateFunctionUnknownError, createCantMigrateIdentifierError, createCantMigrateIdentifierMapOrArrayError, createCantMigrateReExportError, createCantMigrateSizeUnknown, createCantMigrateSpreadPropsError, createGuidance, createHelpers, getMigrationMapObject, getUpcomingIcons, isInsideIconOnlyLegacyButton, isInsideLegacyButton, isInsideNewButton, isSize, locToString, throwAutoErrors, throwManualErrors } from './helpers';
 export const createChecks = context => {
   // Create global variables to be shared by the checks
   const {
@@ -304,20 +304,13 @@ export const createChecks = context => {
 
     // 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,
-        spacing: shouldAddSpaciousSpacing ? 'spacious' : undefined,
-        insideNewButton
+        spacing: undefined,
+        insideNewButton: true
       });
     }
 
@@ -331,6 +324,7 @@ export const createChecks = context => {
       // 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);
+      const insideIconOnlyLegacyButton = isInsideIconOnlyLegacyButton(node, legacyButtonImports);
 
       // Find size prop on node
       let size = 'medium';
@@ -409,12 +403,12 @@ export const createChecks = context => {
 
       // 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)
-      // 2. not inside a new or legacy button
+      // 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;
-      if (!insideNewButton && !insideLegacyButton) {
-        var _sizeProp$value2;
-        if (sizeProp && sizeProp.type === 'JSXAttribute' && ((_sizeProp$value2 = sizeProp.value) === null || _sizeProp$value2 === void 0 ? void 0 : _sizeProp$value2.type) === 'Literal') {
+      if (!insideNewButton && !(insideLegacyButton && !insideIconOnlyLegacyButton)) {
+        var _sizeProp$value;
+        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') {

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

@@ -388,11 +388,31 @@ export const isInsideNewButton = (node, newButtonImports) => {
  */
 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 node.parent && isNodeOfType(node.parent, 'JSXExpressionContainer') && ((_node$parent3 = node.parent) === null || _node$parent3 === void 0 ? 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);
+};
+
+/**
+ *
+ * @param node Icon JSXelement
+ * @param newButtonImports list of legacy button import specifiers
+ * @returns if Icon is inside a legacy button
+ */
+export const isInsideIconOnlyLegacyButton = (node, legacyButtonImports) => {
+  let insideIconOnlyLegacyButton = false;
+  if (isInsideLegacyButton(node, legacyButtonImports)) {
+    var _node$parent7, _node$parent8, _node$parent8$parent, _node$parent9, _node$parent9$parent, _node$parent10, _node$parent10$parent, _node$parent10$parent2, _node$parent11, _node$parent11$parent, _node$parent11$parent2, _node$parent12, _node$parent12$parent, _node$parent12$parent2;
+    const legacyButtonAttributes = node.parent && isNodeOfType(node.parent, 'JSXExpressionContainer') && (_node$parent7 = node.parent) !== null && _node$parent7 !== void 0 && _node$parent7.parent && isNodeOfType(node.parent.parent, 'JSXAttribute') && node.parent.parent.parent && isNodeOfType((_node$parent8 = node.parent) === null || _node$parent8 === void 0 ? void 0 : (_node$parent8$parent = _node$parent8.parent) === null || _node$parent8$parent === void 0 ? void 0 : _node$parent8$parent.parent, 'JSXOpeningElement') ? (_node$parent9 = node.parent) === null || _node$parent9 === void 0 ? void 0 : (_node$parent9$parent = _node$parent9.parent) === null || _node$parent9$parent === void 0 ? void 0 : _node$parent9$parent.parent.attributes.map(attribute => {
+      var _attribute$name;
+      return isNodeOfType(attribute, 'JSXAttribute') && isNodeOfType(attribute.name, 'JSXIdentifier') && (attribute === null || attribute === void 0 ? void 0 : (_attribute$name = attribute.name) === null || _attribute$name === void 0 ? void 0 : _attribute$name.name);
+    }).filter(Boolean) : [];
+    const hasIconBefore = legacyButtonAttributes.includes('iconBefore');
+    const hasIconAfter = legacyButtonAttributes.includes('iconAfter');
+    const hasChildren = ((_node$parent10 = node.parent) === null || _node$parent10 === void 0 ? void 0 : (_node$parent10$parent = _node$parent10.parent) === null || _node$parent10$parent === void 0 ? void 0 : (_node$parent10$parent2 = _node$parent10$parent.parent) === null || _node$parent10$parent2 === void 0 ? void 0 : _node$parent10$parent2.parent) && isNodeOfType((_node$parent11 = node.parent) === null || _node$parent11 === void 0 ? void 0 : (_node$parent11$parent = _node$parent11.parent) === null || _node$parent11$parent === void 0 ? void 0 : (_node$parent11$parent2 = _node$parent11$parent.parent) === null || _node$parent11$parent2 === void 0 ? void 0 : _node$parent11$parent2.parent, 'JSXElement') && ((_node$parent12 = node.parent) === null || _node$parent12 === void 0 ? void 0 : (_node$parent12$parent = _node$parent12.parent) === null || _node$parent12$parent === void 0 ? void 0 : (_node$parent12$parent2 = _node$parent12$parent.parent) === null || _node$parent12$parent2 === void 0 ? void 0 : _node$parent12$parent2.parent.children.length) > 0;
+    if (hasIconBefore && !hasIconAfter && !hasChildren || !hasIconBefore && hasIconAfter && !hasChildren || !hasIconBefore && !hasIconAfter && hasChildren) {
+      insideIconOnlyLegacyButton = true;
+    }
   }
-  return insideLegacyButton;
+  return insideIconOnlyLegacyButton;
 };
 const findProp = (attributes, propName) => attributes.find(attr => attr.type === 'JSXAttribute' && attr.name.name === propName);
 const getNewIconNameForRenaming = (isInManualArray, importSource, importSpecifier) => {

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

@@ -2,7 +2,7 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
 function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
 function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 import { isNodeOfType } from 'eslint-codemod-utils';
-import { addToListOfRanges, canAutoMigrateNewIconBasedOnSize, canMigrateColor, createAutoMigrationError, createCantFindSuitableReplacementError, createCantMigrateColorError, createCantMigrateFunctionUnknownError, createCantMigrateIdentifierError, createCantMigrateIdentifierMapOrArrayError, createCantMigrateReExportError, createCantMigrateSizeUnknown, createCantMigrateSpreadPropsError, createGuidance, createHelpers, getMigrationMapObject, getUpcomingIcons, isInsideLegacyButton, isInsideNewButton, isSize, locToString, throwAutoErrors, throwManualErrors } from './helpers';
+import { addToListOfRanges, canAutoMigrateNewIconBasedOnSize, canMigrateColor, createAutoMigrationError, createCantFindSuitableReplacementError, createCantMigrateColorError, createCantMigrateFunctionUnknownError, createCantMigrateIdentifierError, createCantMigrateIdentifierMapOrArrayError, createCantMigrateReExportError, createCantMigrateSizeUnknown, createCantMigrateSpreadPropsError, createGuidance, createHelpers, getMigrationMapObject, getUpcomingIcons, isInsideIconOnlyLegacyButton, isInsideLegacyButton, isInsideNewButton, isSize, locToString, throwAutoErrors, throwManualErrors } from './helpers';
 export var createChecks = function createChecks(context) {
   // Create global variables to be shared by the checks
   var _createHelpers = createHelpers(context),
@@ -373,22 +373,13 @@ export var createChecks = function createChecks(context) {
 
     // Flag icons imported from migration path
     if (!shouldUseMigrationPath && Object.keys(migrationIconImports).includes(name)) {
-      var _sizeProp$value;
-      var sizeProp = node.openingElement.attributes.find(function (attribute) {
-        return attribute.type === 'JSXAttribute' && (attribute.name.name === 'size' || attribute.name.name === 'LEGACY_size');
-      });
-      var 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
-      var 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: node,
         importSource: migrationIconImports[name].packageName,
         iconName: name,
         errors: errorsAuto,
-        spacing: shouldAddSpaciousSpacing ? 'spacious' : undefined,
-        insideNewButton: insideNewButton
+        spacing: undefined,
+        insideNewButton: true
       });
     }
 
@@ -397,11 +388,12 @@ export var createChecks = function createChecks(context) {
       var _size, _size2;
       // 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);
+      var 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
       var insideLegacyButton = isInsideLegacyButton(node, legacyButtonImports);
+      var insideIconOnlyLegacyButton = isInsideIconOnlyLegacyButton(node, legacyButtonImports);
 
       // Find size prop on node
       var size = 'medium';
@@ -473,7 +465,7 @@ export var createChecks = function createChecks(context) {
       // Do a set comparison - is requiredAttributesAfterSpread a subset of afterSpreadSet?
       if (hasSpread === true && !Array.from(requiredAttributesAfterSpread).every(function (val) {
         return afterSpreadSet.has(val);
-      }) && !_insideNewButton) {
+      }) && !insideNewButton) {
         var missingProps = Array.from(requiredAttributesAfterSpread).filter(function (val) {
           return !afterSpreadSet.has(val);
         });
@@ -493,20 +485,20 @@ export var createChecks = function createChecks(context) {
 
       // 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)
-      // 2. not inside a new or legacy button
-      var _sizeProp = node.openingElement.attributes.find(function (attribute) {
+      // 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');
       });
       var spacing;
-      if (!_insideNewButton && !insideLegacyButton) {
-        var _sizeProp$value2;
-        if (_sizeProp && _sizeProp.type === 'JSXAttribute' && ((_sizeProp$value2 = _sizeProp.value) === null || _sizeProp$value2 === void 0 ? void 0 : _sizeProp$value2.type) === 'Literal') {
-          if (_sizeProp.value.value === 'medium') {
+      if (!insideNewButton && !(insideLegacyButton && !insideIconOnlyLegacyButton)) {
+        var _sizeProp$value;
+        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') {
+          } else if (sizeProp.value.value === 'small' && (newIcon === null || newIcon === void 0 ? void 0 : newIcon.type) === 'utility') {
             spacing = 'compact';
           }
-        } else if (!_sizeProp) {
+        } else if (!sizeProp) {
           spacing = 'spacious';
         }
       }
@@ -519,7 +511,7 @@ export var createChecks = function createChecks(context) {
           iconName: name,
           errors: errorsAuto,
           spacing: spacing,
-          insideNewButton: _insideNewButton
+          insideNewButton: insideNewButton
         });
       } else if ((!newIcon && !upcomingIcon || !isNewIconMigratable) && size) {
         createCantFindSuitableReplacementError(node, legacyIconImports[name].packageName, name, errorsManual, upcomingIcon ? true : migrationMapObject ? true : false);
@@ -527,7 +519,7 @@ export var createChecks = function createChecks(context) {
       addToListOfRanges(node, errorRanges);
       guidance[locToString(node)] = createGuidance({
         iconPackage: legacyIconImports[name].packageName,
-        insideNewButton: _insideNewButton,
+        insideNewButton: insideNewButton,
         size: size && isSize(size) ? size : undefined,
         shouldUseMigrationPath: shouldUseMigrationPath
       });

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

@@ -397,11 +397,31 @@ export var isInsideNewButton = function isInsideNewButton(node, newButtonImports
  */
 export var isInsideLegacyButton = function isInsideLegacyButton(node, legacyButtonImports) {
   var _node$parent3, _node$parent4, _node$parent5, _node$parent6;
-  var 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 || (_node$parent4 = _node$parent4.parent) === null || _node$parent4 === void 0 ? void 0 : _node$parent4.parent, 'JSXOpeningElement') && isNodeOfType((_node$parent5 = node.parent) === null || _node$parent5 === void 0 || (_node$parent5 = _node$parent5.parent) === null || _node$parent5 === void 0 ? void 0 : _node$parent5.parent.name, 'JSXIdentifier') && legacyButtonImports.has((_node$parent6 = node.parent) === null || _node$parent6 === void 0 || (_node$parent6 = _node$parent6.parent) === null || _node$parent6 === void 0 ? void 0 : _node$parent6.parent.name.name)) {
-    insideLegacyButton = true;
+  return node.parent && isNodeOfType(node.parent, 'JSXExpressionContainer') && ((_node$parent3 = node.parent) === null || _node$parent3 === void 0 ? 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 || (_node$parent4 = _node$parent4.parent) === null || _node$parent4 === void 0 ? void 0 : _node$parent4.parent, 'JSXOpeningElement') && isNodeOfType((_node$parent5 = node.parent) === null || _node$parent5 === void 0 || (_node$parent5 = _node$parent5.parent) === null || _node$parent5 === void 0 ? void 0 : _node$parent5.parent.name, 'JSXIdentifier') && legacyButtonImports.has((_node$parent6 = node.parent) === null || _node$parent6 === void 0 || (_node$parent6 = _node$parent6.parent) === null || _node$parent6 === void 0 ? void 0 : _node$parent6.parent.name.name);
+};
+
+/**
+ *
+ * @param node Icon JSXelement
+ * @param newButtonImports list of legacy button import specifiers
+ * @returns if Icon is inside a legacy button
+ */
+export var isInsideIconOnlyLegacyButton = function isInsideIconOnlyLegacyButton(node, legacyButtonImports) {
+  var insideIconOnlyLegacyButton = false;
+  if (isInsideLegacyButton(node, legacyButtonImports)) {
+    var _node$parent7, _node$parent8, _node$parent9, _node$parent10, _node$parent11, _node$parent12;
+    var legacyButtonAttributes = node.parent && isNodeOfType(node.parent, 'JSXExpressionContainer') && (_node$parent7 = node.parent) !== null && _node$parent7 !== void 0 && _node$parent7.parent && isNodeOfType(node.parent.parent, 'JSXAttribute') && node.parent.parent.parent && isNodeOfType((_node$parent8 = node.parent) === null || _node$parent8 === void 0 || (_node$parent8 = _node$parent8.parent) === null || _node$parent8 === void 0 ? void 0 : _node$parent8.parent, 'JSXOpeningElement') ? (_node$parent9 = node.parent) === null || _node$parent9 === void 0 || (_node$parent9 = _node$parent9.parent) === null || _node$parent9 === void 0 ? void 0 : _node$parent9.parent.attributes.map(function (attribute) {
+      var _attribute$name;
+      return isNodeOfType(attribute, 'JSXAttribute') && isNodeOfType(attribute.name, 'JSXIdentifier') && (attribute === null || attribute === void 0 || (_attribute$name = attribute.name) === null || _attribute$name === void 0 ? void 0 : _attribute$name.name);
+    }).filter(Boolean) : [];
+    var hasIconBefore = legacyButtonAttributes.includes('iconBefore');
+    var hasIconAfter = legacyButtonAttributes.includes('iconAfter');
+    var hasChildren = ((_node$parent10 = node.parent) === null || _node$parent10 === void 0 || (_node$parent10 = _node$parent10.parent) === null || _node$parent10 === void 0 || (_node$parent10 = _node$parent10.parent) === null || _node$parent10 === void 0 ? void 0 : _node$parent10.parent) && isNodeOfType((_node$parent11 = node.parent) === null || _node$parent11 === void 0 || (_node$parent11 = _node$parent11.parent) === null || _node$parent11 === void 0 || (_node$parent11 = _node$parent11.parent) === null || _node$parent11 === void 0 ? void 0 : _node$parent11.parent, 'JSXElement') && ((_node$parent12 = node.parent) === null || _node$parent12 === void 0 || (_node$parent12 = _node$parent12.parent) === null || _node$parent12 === void 0 || (_node$parent12 = _node$parent12.parent) === null || _node$parent12 === void 0 ? void 0 : _node$parent12.parent.children.length) > 0;
+    if (hasIconBefore && !hasIconAfter && !hasChildren || !hasIconBefore && hasIconAfter && !hasChildren || !hasIconBefore && !hasIconAfter && hasChildren) {
+      insideIconOnlyLegacyButton = true;
+    }
   }
-  return insideLegacyButton;
+  return insideIconOnlyLegacyButton;
 };
 var findProp = function findProp(attributes, propName) {
   return attributes.find(function (attr) {

package/dist/types/rules/no-legacy-icons/helpers.d.ts

@@ -119,6 +119,13 @@ export declare const isInsideNewButton: (node: Rule.Node, newButtonImports: Set<
  * @returns if Icon is inside a legacy button
  */
 export declare const isInsideLegacyButton: (node: Rule.Node, legacyButtonImports: Set<string>) => boolean;
+/**
+ *
+ * @param node Icon JSXelement
+ * @param newButtonImports list of legacy button import specifiers
+ * @returns if Icon is inside a legacy button
+ */
+export declare const isInsideIconOnlyLegacyButton: (node: Rule.Node, legacyButtonImports: Set<string>) => boolean;
 export declare const throwManualErrors: ({ errorsManual, errorRanges, guidance, context, isQuietMode, }: {
     errorsManual: ErrorListManual;
     errorRanges: RangeList;

package/dist/types-ts4.5/rules/no-legacy-icons/helpers.d.ts

@@ -124,6 +124,13 @@ export declare const isInsideNewButton: (node: Rule.Node, newButtonImports: Set<
  * @returns if Icon is inside a legacy button
  */
 export declare const isInsideLegacyButton: (node: Rule.Node, legacyButtonImports: Set<string>) => boolean;
+/**
+ *
+ * @param node Icon JSXelement
+ * @param newButtonImports list of legacy button import specifiers
+ * @returns if Icon is inside a legacy button
+ */
+export declare const isInsideIconOnlyLegacyButton: (node: Rule.Node, legacyButtonImports: Set<string>) => boolean;
 export declare const throwManualErrors: ({ errorsManual, errorRanges, guidance, context, isQuietMode, }: {
     errorsManual: ErrorListManual;
     errorRanges: RangeList;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
 	"description": "The essential plugin for use with the Atlassian Design System.",
-	"version": "11.8.3",
+	"version": "11.8.4",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
 	"publishConfig": {
@@ -45,7 +45,7 @@
 	"dependencies": {
 		"@atlaskit/eslint-utils": "^1.8.0",
 		"@atlaskit/icon": "^23.4.0",
-		"@atlaskit/icon-lab": "^2.1.0",
+		"@atlaskit/icon-lab": "^2.2.0",
 		"@atlaskit/tokens": "*",
 		"@babel/runtime": "^7.0.0",
 		"@typescript-eslint/utils": "^7.1.0",