@atlaskit/codemod-cli 0.17.1 → 0.17.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/codemod-cli
 
+## 0.17.3
+
+### Patch Changes
+
+- [#57531](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/57531) [`18f167967f89`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/18f167967f89) - Handle button migrations with unsupported props.
+
+## 0.17.2
+
+### Patch Changes
+
+- [#56711](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/56711) [`a48d9247ddb2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a48d9247ddb2) - Small changes in button migration codemod - renamed UNSAFE_size to UNSAFE_iconBefore/iconAfter_size for new link and default buttons
+
 ## 0.17.1
 
 ### Patch Changes

package/dist/cjs/main.js

@@ -305,7 +305,7 @@ function _main() {
         case 4:
           _yield$parseArgs = _context5.sent;
           packages = _yield$parseArgs.packages;
-          _process$env$_PACKAGE = "0.17.1", _PACKAGE_VERSION_ = _process$env$_PACKAGE === void 0 ? '0.0.0-dev' : _process$env$_PACKAGE;
+          _process$env$_PACKAGE = "0.17.3", _PACKAGE_VERSION_ = _process$env$_PACKAGE === void 0 ? '0.0.0-dev' : _process$env$_PACKAGE;
           logger.log(_chalk.default.bgBlue(_chalk.default.black("\uD83D\uDCDA Atlassian-Frontend codemod library @ ".concat(_PACKAGE_VERSION_, " \uD83D\uDCDA"))));
           if (packages && packages.length > 0) {
             logger.log(_chalk.default.gray("Searching for codemods for newer versions of the following packages: ".concat(packages.map(function (pkg) {

package/dist/cjs/presets/migrate-to-new-buttons/codemods/next-migrate-to-new-button-variants.js

@@ -7,6 +7,10 @@ exports.default = void 0;
 var _codemodUtils = require("@atlaskit/codemod-utils");
 var _constants = require("../utils/constants");
 var _generateNewButtonElement = require("../utils/generate-new-button-element");
+var _hasUnsupportedProps = require("../utils/has-unsupported-props");
+var _ifVariantAlreadyImported = require("../utils/if-variant-already-imported");
+var _renameDefaultButtonToLegacyButton = require("../utils/rename-default-button-to-legacy-button");
+var _migrateFitContainerIconButton = require("../utils/migrate-fit-container-icon-button");
 var transformer = function transformer(file, api, options) {
   var j = api.jscodeshift;
   var fileSource = j(file.source);
@@ -23,33 +27,17 @@ var transformer = function transformer(file, api, options) {
     return fileSource.toSource();
   }
   var specifierIdentifier = defaultButtonImport.get(0).node.local.name;
-  var attributes = fileSource.find(j.JSXElement).filter(function (path) {
-    return path.value.openingElement.name.type === 'JSXIdentifier' && path.value.openingElement.name.name === specifierIdentifier;
-  }).find(j.JSXAttribute);
-  var hasCustomComponent = attributes.filter(function (attribute) {
-    return attribute.node.name.name === 'component';
-  }).length > 0;
-  var hasCssProp = attributes.filter(function (attribute) {
-    return attribute.node.name.name === 'css';
-  }).length > 0;
-  if (hasCustomComponent || hasCssProp) {
-    return fileSource.toSource(_constants.PRINT_SETTINGS);
-  }
-  var checkIfVariantAlreadyImported = function checkIfVariantAlreadyImported(variant) {
-    return fileSource.find(j.ImportDeclaration).filter(function (path) {
-      return path.node.source.value === _constants.NEW_BUTTON_ENTRY_POINT;
-    }).find(j.ImportSpecifier).filter(function (path) {
-      return path.node.imported.name === variant;
-    }).length > 0;
-  };
-  var hasLinkIconButton = checkIfVariantAlreadyImported(_constants.NEW_BUTTON_VARIANTS.linkIcon.import);
-  var hasLinkButton = checkIfVariantAlreadyImported(_constants.NEW_BUTTON_VARIANTS.link.import);
-  var hasIconButton = checkIfVariantAlreadyImported(_constants.NEW_BUTTON_VARIANTS.icon.import);
+  var hasLinkIconButton = (0, _ifVariantAlreadyImported.checkIfVariantAlreadyImported)(_constants.NEW_BUTTON_VARIANTS.linkIcon.import, fileSource, j);
+  var hasLinkButton = (0, _ifVariantAlreadyImported.checkIfVariantAlreadyImported)(_constants.NEW_BUTTON_VARIANTS.link.import, fileSource, j);
+  var hasIconButton = (0, _ifVariantAlreadyImported.checkIfVariantAlreadyImported)(_constants.NEW_BUTTON_VARIANTS.icon.import, fileSource, j);
   var allButtons = fileSource.find(j.JSXElement).filter(function (path) {
     return path.value.openingElement.name.type === 'JSXIdentifier' && path.value.openingElement.name.name === specifierIdentifier;
   });
-  allButtons.forEach(function (element) {
-    var _element$value$childr, _element$value$childr2;
+  var buttonsWithoutUnsupportedProps = allButtons.filter(function (path) {
+    return !(0, _hasUnsupportedProps.ifHasUnsupportedProps)(path.value.openingElement.attributes);
+  });
+  buttonsWithoutUnsupportedProps.forEach(function (element) {
+    var _element$value$childr;
     var attributes = element.value.openingElement.attributes;
     if (!attributes) {
       return;
@@ -59,18 +47,21 @@ var transformer = function transformer(file, api, options) {
     });
     var hasHref = buttonAttributes.includes('href');
     var hasIcon = buttonAttributes.includes('iconBefore') || buttonAttributes.includes('iconAfter');
-    var isLinkIconButton = hasHref && hasIcon && ((_element$value$childr = element.value.children) === null || _element$value$childr === void 0 ? void 0 : _element$value$childr.length) === 0;
+    var hasNoChildren = ((_element$value$childr = element.value.children) === null || _element$value$childr === void 0 ? void 0 : _element$value$childr.length) === 0;
+    var isFitContainerIconButton = hasIcon && hasNoChildren && buttonAttributes.includes('shouldFitContainer');
+    var isLinkIconButton = hasHref && hasIcon && hasNoChildren && !isFitContainerIconButton;
     var isLinkButton = hasHref && !isLinkIconButton;
-    // TODO: add checks for unsupported icon props except label and size, e.g. primaryColor, testId, or spread props
-    // and don't migrate these buttons.
-    var isIconButton = !hasHref && hasIcon && ((_element$value$childr2 = element.value.children) === null || _element$value$childr2 === void 0 ? void 0 : _element$value$childr2.length) === 0;
-    var isDefaultButtonWithAnIcon = !isLinkIconButton && !isIconButton && hasIcon;
-
-    // TODO: add checks for unsupported icon props except label and size, e.g. primaryColor, testId, or spread props
-    // and don't migrate these buttons.
+    var isIconButton = !hasHref && hasIcon && hasNoChildren && !isFitContainerIconButton;
+    var isDefaultButtonWithAnIcon = !isLinkIconButton && !isIconButton && !isFitContainerIconButton && hasIcon;
     if (isDefaultButtonWithAnIcon) {
       (0, _generateNewButtonElement.moveSizeAndLabelAttributes)(element.value, j);
     }
+    if (isFitContainerIconButton) {
+      var migratedToIconButton = (0, _migrateFitContainerIconButton.migrateFitContainerIconButton)(element, j);
+      if (migratedToIconButton) {
+        isIconButton = true;
+      }
+    }
     if (isLinkIconButton) {
       hasLinkIconButton = true;
       j(element).replaceWith((0, _generateNewButtonElement.generateNewElement)(_constants.NEW_BUTTON_VARIANTS.linkIcon.as, element.value, j));
@@ -83,32 +74,66 @@ var transformer = function transformer(file, api, options) {
       hasLinkButton = true;
       j(element).replaceWith((0, _generateNewButtonElement.generateNewElement)(_constants.NEW_BUTTON_VARIANTS.link.as, element.value, j));
     }
+    if (!hasHref && attributes.find(function (node) {
+      var _node$value, _node$name, _node$value2, _node$value3;
+      return node.type === 'JSXAttribute' && ((_node$value = node.value) === null || _node$value === void 0 ? void 0 : _node$value.type) === 'Literal' && (node === null || node === void 0 || (_node$name = node.name) === null || _node$name === void 0 ? void 0 : _node$name.name) === 'appearance' && ((node === null || node === void 0 || (_node$value2 = node.value) === null || _node$value2 === void 0 ? void 0 : _node$value2.value) === 'link' || (node === null || node === void 0 || (_node$value3 = node.value) === null || _node$value3 === void 0 ? void 0 : _node$value3.value) === 'subtle-link');
+    })) {
+      // @ts-ignore
+      (0, _codemodUtils.addCommentBefore)(j, [element], _constants.linkButtonMissingHrefComment);
+    }
   });
   var specifiers = [];
-  if (hasLinkButton) {
-    specifiers.push(j.importSpecifier(j.identifier(_constants.NEW_BUTTON_VARIANTS.link.import), j.identifier(_constants.NEW_BUTTON_VARIANTS.link.as)));
-  }
-  if (hasIconButton) {
-    specifiers.push(j.importSpecifier(j.identifier(_constants.NEW_BUTTON_VARIANTS.icon.import), j.identifier(_constants.NEW_BUTTON_VARIANTS.icon.as)));
-  }
-  if (hasLinkIconButton) {
-    specifiers.push(j.importSpecifier(j.identifier(_constants.NEW_BUTTON_VARIANTS.linkIcon.import), j.identifier(_constants.NEW_BUTTON_VARIANTS.linkIcon.as)));
-  }
+  [hasLinkButton ? 'link' : null, hasIconButton ? 'icon' : null, hasLinkIconButton ? 'linkIcon' : null].forEach(function (variant) {
+    if (variant) {
+      specifiers.push(j.importSpecifier(j.identifier(_constants.NEW_BUTTON_VARIANTS[variant].import), j.identifier(_constants.NEW_BUTTON_VARIANTS[variant].as)));
+    }
+  });
   var oldButtonImport = fileSource.find(j.ImportDeclaration).filter(function (path) {
     return path.node.source.value === _constants.NEW_BUTTON_ENTRY_POINT || path.node.source.value === _constants.entryPointsMapping.Button;
   });
   var remainingDefaultButtons = fileSource.find(j.JSXElement).filter(function (path) {
-    return path.value.openingElement.name.type === 'JSXIdentifier' && path.value.openingElement.name.name === specifierIdentifier;
+    return path.value.openingElement.name.type === 'JSXIdentifier' && path.value.openingElement.name.name === specifierIdentifier && !(0, _hasUnsupportedProps.ifHasUnsupportedProps)(path.value.openingElement.attributes);
   }).length > 0 || fileSource.find(j.CallExpression).filter(function (path) {
     return path.node.arguments.map(function (argument) {
       return argument.type === 'Identifier' && (argument === null || argument === void 0 ? void 0 : argument.name);
     }).includes(specifierIdentifier);
   }).length > 0;
+  if (remainingDefaultButtons) {
+    specifiers.push(j.importSpecifier(j.identifier(_constants.NEW_BUTTON_VARIANTS.default.import), j.identifier(specifierIdentifier)));
+  }
+  var buttonsWithUnsupportedProps = allButtons.filter(function (path) {
+    return (0, _hasUnsupportedProps.ifHasUnsupportedProps)(path.value.openingElement.attributes);
+  });
+  if (buttonsWithUnsupportedProps.length) {
+    // add comment to all buttons with unsupported props: "component", "style", "css"
+    buttonsWithUnsupportedProps.forEach(function (element) {
+      var _element$value$openin;
+      var attribute = (_element$value$openin = element.value.openingElement.attributes) === null || _element$value$openin === void 0 ? void 0 : _element$value$openin.find(function (node) {
+        return node.type === 'JSXAttribute' && typeof node.name.name === 'string' && _constants.unsupportedProps.includes(node.name.name);
+      });
+      if (attribute) {
+        (0, _codemodUtils.addCommentBefore)(j, j(attribute), _constants.buttonPropsNoLongerSupportedComment, 'line');
+      }
+    });
+
+    // rename all buttons with unsupported props to LegacyButton if default new button is imported
+    if (specifiers.find(function (specifier) {
+      return specifier.imported.name === _constants.NEW_BUTTON_VARIANTS.default.import;
+    })) {
+      (0, _renameDefaultButtonToLegacyButton.renameDefaultButtonToLegacyButtonImport)(oldButtonImport, buttonsWithUnsupportedProps, j);
+    }
+  }
   if (specifiers.length || remainingDefaultButtons) {
-    if (remainingDefaultButtons) {
-      specifiers.push(j.importSpecifier(j.identifier(_constants.NEW_BUTTON_VARIANTS.default.import), j.identifier(specifierIdentifier)));
+    // split the type imports into a separate import
+    var typeSpecifier = buttonImports.find(j.ImportSpecifier).filter(function (path) {
+      return path.node.imported.name === _constants.ButtonPropsTypeName;
+    });
+    if (typeSpecifier.length > 0) {
+      oldButtonImport.insertBefore(j.importDeclaration([j.importSpecifier(j.identifier(_constants.ButtonPropsTypeName), j.identifier(typeSpecifier.get(0).node.local.name))], j.stringLiteral(_constants.entryPointsMapping.Button), 'type'));
     }
     oldButtonImport.replaceWith(j.importDeclaration(specifiers, j.stringLiteral(_constants.NEW_BUTTON_ENTRY_POINT)));
+
+    // add eslint-disable-next-line @atlaskit/design-system/no-banned-imports comment if unsafe import is allowed in custom options
     if (_constants.NEW_BUTTON_ENTRY_POINT.includes('unsafe') && (options === null || options === void 0 ? void 0 : options.allowUnsafeImport) === true) {
       (0, _codemodUtils.addCommentBefore)(j, fileSource.find(j.ImportDeclaration).filter(function (path) {
         return path.node.source.value === _constants.NEW_BUTTON_ENTRY_POINT;

package/dist/cjs/presets/migrate-to-new-buttons/utils/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.eslintDisableComment = exports.entryPointsMapping = exports.PRINT_SETTINGS = exports.NEW_BUTTON_VARIANTS = exports.NEW_BUTTON_ENTRY_POINT = exports.BUTTON_TYPES = void 0;
+exports.unsupportedProps = exports.migrateFitContainerButtonToIconButtonComment = exports.migrateFitContainerButtonToDefaultButtonComment = exports.linkButtonMissingHrefComment = exports.iconPropsNoLongerSupportedComment = exports.eslintDisableComment = exports.entryPointsMapping = exports.buttonPropsNoLongerSupportedComment = exports.PRINT_SETTINGS = exports.NEW_BUTTON_VARIANTS = exports.NEW_BUTTON_ENTRY_POINT = exports.ButtonPropsTypeName = exports.BUTTON_TYPES = void 0;
 var PRINT_SETTINGS = exports.PRINT_SETTINGS = {
   quote: 'single'
 };
@@ -33,4 +33,11 @@ var entryPointsMapping = exports.entryPointsMapping = {
   CustomThemeButton: '@atlaskit/button/custom-theme-button'
 };
 var BUTTON_TYPES = exports.BUTTON_TYPES = ['Appearance', 'Spacing', 'BaseOwnProps', 'BaseProps', 'ButtonProps', 'LoadingButtonProps', 'LoadingButtonOwnProps', 'ThemeTokens', 'ThemeProps', 'InteractionState', 'CustomThemeButtonProps', 'CustomThemeButtonOwnProps'];
-var eslintDisableComment = exports.eslintDisableComment = 'eslint-disable-next-line @atlaskit/design-system/no-banned-imports';
+var eslintDisableComment = exports.eslintDisableComment = 'eslint-disable-next-line @atlaskit/design-system/no-banned-imports';
+var ButtonPropsTypeName = exports.ButtonPropsTypeName = 'ButtonProps';
+var unsupportedProps = exports.unsupportedProps = ['component', 'css', 'style'];
+var linkButtonMissingHrefComment = exports.linkButtonMissingHrefComment = "\"link\" and \"subtle-link\" appearances are only available in LinkButton, please either provide a href prop then migrate to LinkButton, or remove the appearance from the default button.";
+var iconPropsNoLongerSupportedComment = exports.iconPropsNoLongerSupportedComment = "\"glyph\", \"primaryColor\", \"secondaryColor\" and \"testId\" are no longer supported in button icons, please refactor the code and/or revisit the UI.";
+var buttonPropsNoLongerSupportedComment = exports.buttonPropsNoLongerSupportedComment = "Buttons with \"component\", \"css\" or \"style\" prop can't be automatically migrated with codemods. Please migrate it manually.";
+var migrateFitContainerButtonToDefaultButtonComment = exports.migrateFitContainerButtonToDefaultButtonComment = "Migrated to a default button with text which is from the icon label.";
+var migrateFitContainerButtonToIconButtonComment = exports.migrateFitContainerButtonToIconButtonComment = "\"shouldFitContainer\" is not available in icon buttons, please consider using a default button with text.";

package/dist/cjs/presets/migrate-to-new-buttons/utils/generate-new-button-element.js

@@ -3,58 +3,78 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.moveSizeAndLabelAttributes = exports.generateNewElement = void 0;
+exports.moveSizeAndLabelAttributes = exports.getIconElement = exports.getIconAttributes = exports.generateNewElement = void 0;
+var _codemodUtils = require("@atlaskit/codemod-utils");
 var _constants = require("../utils/constants");
-var getIconAttribute = function getIconAttribute(attributes) {
+var getIconAttributes = exports.getIconAttributes = function getIconAttributes(attributes) {
   var iconAttr = attributes === null || attributes === void 0 ? void 0 : attributes.filter(function (attribute) {
     return attribute.type === 'JSXAttribute' && (attribute.name.name === 'iconBefore' || attribute.name.name === 'iconAfter');
   });
-  if (attributes && iconAttr !== null && iconAttr !== void 0 && iconAttr.length && iconAttr[0].type === 'JSXAttribute') {
-    return iconAttr[0];
+  if (iconAttr !== null && iconAttr !== void 0 && iconAttr.length) {
+    return iconAttr;
   }
   return null;
 };
-var moveSizeAndLabelAttributes = exports.moveSizeAndLabelAttributes = function moveSizeAndLabelAttributes(element, j) {
+var getIconElement = exports.getIconElement = function getIconElement(iconAttr) {
   var _iconAttr$value;
-  var attributes = element.openingElement.attributes;
-  var iconAttr = attributes && getIconAttribute(attributes);
   if (iconAttr && ((_iconAttr$value = iconAttr.value) === null || _iconAttr$value === void 0 ? void 0 : _iconAttr$value.type) === 'JSXExpressionContainer' && iconAttr.value.expression.type === 'JSXElement') {
-    var iconElement = iconAttr.value.expression;
+    return iconAttr.value.expression;
+  }
+  return null;
+};
+var moveSizeAndLabelAttributes = exports.moveSizeAndLabelAttributes = function moveSizeAndLabelAttributes(element, j) {
+  var iconRenamed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+  var attributes = element.openingElement.attributes;
+  var iconAttrs = attributes && getIconAttributes(attributes);
+  iconAttrs === null || iconAttrs === void 0 || iconAttrs.forEach(function (iconAttr) {
+    var _iconAttr$value2;
+    var iconElement = getIconElement(iconAttr);
+    if (!iconElement) {
+      return;
+    }
     var iconJSXElementAttributes = iconElement.openingElement.attributes;
+    // add inlined comment to the icon if it has any attributes other than label and size
     if (Array.isArray(iconJSXElementAttributes)) {
+      var ifIconAttributeEitherLabelOrSize = iconJSXElementAttributes === null || iconJSXElementAttributes === void 0 ? void 0 : iconJSXElementAttributes.every(function (attribute) {
+        return attribute.type === 'JSXAttribute' && typeof attribute.name.name === 'string' && (attribute.name.name === 'size' || attribute.name.name === 'label');
+      });
+      if (!ifIconAttributeEitherLabelOrSize) {
+        (0, _codemodUtils.addCommentBefore)(j, j(iconAttr), _constants.iconPropsNoLongerSupportedComment, 'line');
+      }
+
       // move label and size attributes from icon to the root Button prop
       var labelAttribute = iconJSXElementAttributes.find(function (attribute) {
         return attribute.type === 'JSXAttribute' && attribute.name.name === 'label';
       });
-      if (labelAttribute && labelAttribute.type === 'JSXAttribute') {
+      if (labelAttribute && labelAttribute.type === 'JSXAttribute' && iconRenamed) {
         attributes === null || attributes === void 0 || attributes.push(labelAttribute);
       }
       var sizeAttribute = iconJSXElementAttributes.find(function (attribute) {
         return attribute.type === 'JSXAttribute' && attribute.name.name === 'size';
       });
       if (sizeAttribute && sizeAttribute.type === 'JSXAttribute') {
-        sizeAttribute.name.name = "UNSAFE_size";
+        sizeAttribute.name.name = iconRenamed ? 'UNSAFE_size' : "UNSAFE_".concat(iconAttr.name.name, "_size");
         attributes === null || attributes === void 0 || attributes.push(sizeAttribute);
       }
     }
 
     // replace JSXElement with identifier {<MoreIcon />} => {MoreIcon}
-    if (iconElement.openingElement.name.type === 'JSXIdentifier') {
+    if (iconElement.openingElement.name.type === 'JSXIdentifier' && ((_iconAttr$value2 = iconAttr.value) === null || _iconAttr$value2 === void 0 ? void 0 : _iconAttr$value2.type) === 'JSXExpressionContainer') {
       iconAttr.value.expression = j.identifier(iconElement.openingElement.name.name);
     }
-  }
+  });
 };
 var generateNewElement = exports.generateNewElement = function generateNewElement(variant, element, j) {
   var attributes = element.openingElement.attributes;
-  var iconAttr = attributes && getIconAttribute(attributes);
-  if (variant === _constants.NEW_BUTTON_VARIANTS.icon.as && iconAttr && attributes) {
-    moveSizeAndLabelAttributes(element, j);
+  var iconAttrs = attributes && getIconAttributes(attributes);
+  var isIconOrLinkIcon = variant === _constants.NEW_BUTTON_VARIANTS.icon.as || variant === _constants.NEW_BUTTON_VARIANTS.linkIcon.as;
+  if (isIconOrLinkIcon && iconAttrs !== null && iconAttrs !== void 0 && iconAttrs.length) {
+    moveSizeAndLabelAttributes(element, j, true);
 
     // rename iconBefore/iconAfter to icon
-    iconAttr.name.name = 'icon';
+    iconAttrs[0].name.name = 'icon';
   }
-
+  return j.jsxElement(
   // self closing if it's an icon button or icon link button
-  var isSelfClosing = variant === _constants.NEW_BUTTON_VARIANTS.icon.as || variant === _constants.NEW_BUTTON_VARIANTS.linkIcon.as;
-  return j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier(variant), attributes, isSelfClosing), isSelfClosing ? null : j.jsxClosingElement(j.jsxIdentifier(variant)), element.children);
+  j.jsxOpeningElement(j.jsxIdentifier(variant), attributes, isIconOrLinkIcon), isIconOrLinkIcon ? null : j.jsxClosingElement(j.jsxIdentifier(variant)), element.children);
 };

package/dist/cjs/presets/migrate-to-new-buttons/utils/has-unsupported-props.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ifHasUnsupportedProps = void 0;
+var _constants = require("./constants");
+var ifHasUnsupportedProps = exports.ifHasUnsupportedProps = function ifHasUnsupportedProps(attributes) {
+  return Boolean(attributes && (attributes === null || attributes === void 0 ? void 0 : attributes.some(function (node) {
+    return node.type === 'JSXAttribute' && _constants.unsupportedProps.includes(String(node.name.name));
+  })));
+};

package/dist/cjs/presets/migrate-to-new-buttons/utils/if-variant-already-imported.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkIfVariantAlreadyImported = void 0;
+var _constants = require("./constants");
+var checkIfVariantAlreadyImported = exports.checkIfVariantAlreadyImported = function checkIfVariantAlreadyImported(variant, fileSource, j) {
+  return fileSource.find(j.ImportDeclaration).filter(function (path) {
+    return path.node.source.value === _constants.NEW_BUTTON_ENTRY_POINT;
+  }).find(j.ImportSpecifier).filter(function (path) {
+    return path.node.imported.name === variant;
+  }).length > 0;
+};

package/dist/cjs/presets/migrate-to-new-buttons/utils/migrate-fit-container-icon-button.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.migrateFitContainerIconButton = void 0;
+var _codemodUtils = require("@atlaskit/codemod-utils");
+var _generateNewButtonElement = require("../utils/generate-new-button-element");
+var _constants = require("./constants");
+var migrateFitContainerIconButton = exports.migrateFitContainerIconButton = function migrateFitContainerIconButton(element, j) {
+  var _iconElement$openingE, _labelAttribute$value;
+  var attributes = element.value.openingElement.attributes;
+  var iconAttrs = attributes && (0, _generateNewButtonElement.getIconAttributes)(attributes);
+  var iconElement = iconAttrs && iconAttrs[0] && (0, _generateNewButtonElement.getIconElement)(iconAttrs[0]);
+  var labelAttribute = iconElement && Array.isArray(iconElement.openingElement.attributes) && ((_iconElement$openingE = iconElement.openingElement) === null || _iconElement$openingE === void 0 ? void 0 : _iconElement$openingE.attributes.find(function (path) {
+    return path.type === 'JSXAttribute' && (path.name.name === 'label' || path.name.name === 'aria-label' || path.name.name === 'aria-labelledby');
+  }));
+  var migratedToIconButton;
+  if (labelAttribute && labelAttribute.type === 'JSXAttribute' && ((_labelAttribute$value = labelAttribute.value) === null || _labelAttribute$value === void 0 ? void 0 : _labelAttribute$value.type) === 'Literal' && typeof labelAttribute.value.value === 'string') {
+    migratedToIconButton = false;
+    var label = labelAttribute.value.value;
+    var formattedLabel = "".concat(label.charAt(0).toUpperCase()).concat(label.slice(1)).split('-').join(' ');
+    j(element).find(j.JSXAttribute).filter(function (path) {
+      return path.node.name.name === 'iconBefore' || path.node.name.name === 'iconAfter';
+    }).remove();
+    var newButton = j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier(_constants.NEW_BUTTON_VARIANTS.default.as), attributes), j.jsxClosingElement(j.jsxIdentifier(_constants.NEW_BUTTON_VARIANTS.default.as)), [j.jsxText(formattedLabel)]);
+    j(element).replaceWith(newButton);
+    (0, _codemodUtils.addCommentBefore)(j, j(newButton).find(j.JSXAttribute).filter(function (path) {
+      return path.node.name.name === 'shouldFitContainer';
+    }), _constants.migrateFitContainerButtonToDefaultButtonComment, 'line');
+  } else {
+    migratedToIconButton = true;
+    (0, _codemodUtils.addCommentBefore)(j, j(element).find(j.JSXAttribute).filter(function (path) {
+      return path.node.name.name === 'iconBefore' || path.node.name.name === 'iconAfter';
+    }), _constants.migrateFitContainerButtonToIconButtonComment, 'line');
+    j(element).find(j.JSXAttribute).filter(function (path) {
+      return path.node.name.name === 'shouldFitContainer';
+    }).remove();
+  }
+  return migratedToIconButton;
+};

package/dist/cjs/presets/migrate-to-new-buttons/utils/rename-default-button-to-legacy-button.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renameDefaultButtonToLegacyButtonImport = void 0;
+var _constants = require("../utils/constants");
+var renameDefaultButtonToLegacyButtonImport = exports.renameDefaultButtonToLegacyButtonImport = function renameDefaultButtonToLegacyButtonImport(oldButtonImport, oldButtonElements, j) {
+  oldButtonImport.insertBefore(j.importDeclaration([j.importDefaultSpecifier(j.identifier('LegacyButton'))], j.stringLiteral(_constants.entryPointsMapping.Button)));
+  oldButtonElements.forEach(function (element) {
+    var _element$value$childr, _element$value$childr2;
+    var legacyElement = j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier('LegacyButton'), element.value.openingElement.attributes, ((_element$value$childr = element.value.children) === null || _element$value$childr === void 0 ? void 0 : _element$value$childr.length) === 0), ((_element$value$childr2 = element.value.children) === null || _element$value$childr2 === void 0 ? void 0 : _element$value$childr2.length) === 0 ? null : j.jsxClosingElement(j.jsxIdentifier('LegacyButton')), element.value.children);
+    j(element).replaceWith(legacyElement);
+  });
+};

package/dist/es2019/presets/migrate-to-new-buttons/codemods/next-migrate-to-new-button-variants.js

@@ -1,6 +1,10 @@
 import { addCommentBefore } from '@atlaskit/codemod-utils';
-import { PRINT_SETTINGS, NEW_BUTTON_VARIANTS, entryPointsMapping, NEW_BUTTON_ENTRY_POINT, eslintDisableComment } from '../utils/constants';
+import { PRINT_SETTINGS, NEW_BUTTON_VARIANTS, entryPointsMapping, NEW_BUTTON_ENTRY_POINT, eslintDisableComment, ButtonPropsTypeName, linkButtonMissingHrefComment, buttonPropsNoLongerSupportedComment, unsupportedProps } from '../utils/constants';
 import { generateNewElement, moveSizeAndLabelAttributes } from '../utils/generate-new-button-element';
+import { ifHasUnsupportedProps } from '../utils/has-unsupported-props';
+import { checkIfVariantAlreadyImported } from '../utils/if-variant-already-imported';
+import { renameDefaultButtonToLegacyButtonImport } from '../utils/rename-default-button-to-legacy-button';
+import { migrateFitContainerIconButton } from '../utils/migrate-fit-container-icon-button';
 const transformer = (file, api, options) => {
   const j = api.jscodeshift;
   const fileSource = j(file.source);
@@ -13,19 +17,13 @@ const transformer = (file, api, options) => {
     return fileSource.toSource();
   }
   const specifierIdentifier = defaultButtonImport.get(0).node.local.name;
-  const attributes = fileSource.find(j.JSXElement).filter(path => path.value.openingElement.name.type === 'JSXIdentifier' && path.value.openingElement.name.name === specifierIdentifier).find(j.JSXAttribute);
-  const hasCustomComponent = attributes.filter(attribute => attribute.node.name.name === 'component').length > 0;
-  const hasCssProp = attributes.filter(attribute => attribute.node.name.name === 'css').length > 0;
-  if (hasCustomComponent || hasCssProp) {
-    return fileSource.toSource(PRINT_SETTINGS);
-  }
-  const checkIfVariantAlreadyImported = variant => fileSource.find(j.ImportDeclaration).filter(path => path.node.source.value === NEW_BUTTON_ENTRY_POINT).find(j.ImportSpecifier).filter(path => path.node.imported.name === variant).length > 0;
-  let hasLinkIconButton = checkIfVariantAlreadyImported(NEW_BUTTON_VARIANTS.linkIcon.import);
-  let hasLinkButton = checkIfVariantAlreadyImported(NEW_BUTTON_VARIANTS.link.import);
-  let hasIconButton = checkIfVariantAlreadyImported(NEW_BUTTON_VARIANTS.icon.import);
+  let hasLinkIconButton = checkIfVariantAlreadyImported(NEW_BUTTON_VARIANTS.linkIcon.import, fileSource, j);
+  let hasLinkButton = checkIfVariantAlreadyImported(NEW_BUTTON_VARIANTS.link.import, fileSource, j);
+  let hasIconButton = checkIfVariantAlreadyImported(NEW_BUTTON_VARIANTS.icon.import, fileSource, j);
   const allButtons = fileSource.find(j.JSXElement).filter(path => path.value.openingElement.name.type === 'JSXIdentifier' && path.value.openingElement.name.name === specifierIdentifier);
-  allButtons.forEach(element => {
-    var _element$value$childr, _element$value$childr2;
+  const buttonsWithoutUnsupportedProps = allButtons.filter(path => !ifHasUnsupportedProps(path.value.openingElement.attributes));
+  buttonsWithoutUnsupportedProps.forEach(element => {
+    var _element$value$childr;
     const {
       attributes
     } = element.value.openingElement;
@@ -35,18 +33,21 @@ const transformer = (file, api, options) => {
     const buttonAttributes = attributes.map(node => node.type === 'JSXAttribute' && node.name.name);
     const hasHref = buttonAttributes.includes('href');
     const hasIcon = buttonAttributes.includes('iconBefore') || buttonAttributes.includes('iconAfter');
-    const isLinkIconButton = hasHref && hasIcon && ((_element$value$childr = element.value.children) === null || _element$value$childr === void 0 ? void 0 : _element$value$childr.length) === 0;
+    const hasNoChildren = ((_element$value$childr = element.value.children) === null || _element$value$childr === void 0 ? void 0 : _element$value$childr.length) === 0;
+    const isFitContainerIconButton = hasIcon && hasNoChildren && buttonAttributes.includes('shouldFitContainer');
+    const isLinkIconButton = hasHref && hasIcon && hasNoChildren && !isFitContainerIconButton;
     const isLinkButton = hasHref && !isLinkIconButton;
-    // TODO: add checks for unsupported icon props except label and size, e.g. primaryColor, testId, or spread props
-    // and don't migrate these buttons.
-    const isIconButton = !hasHref && hasIcon && ((_element$value$childr2 = element.value.children) === null || _element$value$childr2 === void 0 ? void 0 : _element$value$childr2.length) === 0;
-    const isDefaultButtonWithAnIcon = !isLinkIconButton && !isIconButton && hasIcon;
-
-    // TODO: add checks for unsupported icon props except label and size, e.g. primaryColor, testId, or spread props
-    // and don't migrate these buttons.
+    let isIconButton = !hasHref && hasIcon && hasNoChildren && !isFitContainerIconButton;
+    const isDefaultButtonWithAnIcon = !isLinkIconButton && !isIconButton && !isFitContainerIconButton && hasIcon;
     if (isDefaultButtonWithAnIcon) {
       moveSizeAndLabelAttributes(element.value, j);
     }
+    if (isFitContainerIconButton) {
+      const migratedToIconButton = migrateFitContainerIconButton(element, j);
+      if (migratedToIconButton) {
+        isIconButton = true;
+      }
+    }
     if (isLinkIconButton) {
       hasLinkIconButton = true;
       j(element).replaceWith(generateNewElement(NEW_BUTTON_VARIANTS.linkIcon.as, element.value, j));
@@ -59,24 +60,50 @@ const transformer = (file, api, options) => {
       hasLinkButton = true;
       j(element).replaceWith(generateNewElement(NEW_BUTTON_VARIANTS.link.as, element.value, j));
     }
+    if (!hasHref && attributes.find(node => {
+      var _node$value, _node$name, _node$value2, _node$value3;
+      return node.type === 'JSXAttribute' && ((_node$value = node.value) === null || _node$value === void 0 ? void 0 : _node$value.type) === 'Literal' && (node === null || node === void 0 ? void 0 : (_node$name = node.name) === null || _node$name === void 0 ? void 0 : _node$name.name) === 'appearance' && ((node === null || node === void 0 ? void 0 : (_node$value2 = node.value) === null || _node$value2 === void 0 ? void 0 : _node$value2.value) === 'link' || (node === null || node === void 0 ? void 0 : (_node$value3 = node.value) === null || _node$value3 === void 0 ? void 0 : _node$value3.value) === 'subtle-link');
+    })) {
+      // @ts-ignore
+      addCommentBefore(j, [element], linkButtonMissingHrefComment);
+    }
   });
   const specifiers = [];
-  if (hasLinkButton) {
-    specifiers.push(j.importSpecifier(j.identifier(NEW_BUTTON_VARIANTS.link.import), j.identifier(NEW_BUTTON_VARIANTS.link.as)));
-  }
-  if (hasIconButton) {
-    specifiers.push(j.importSpecifier(j.identifier(NEW_BUTTON_VARIANTS.icon.import), j.identifier(NEW_BUTTON_VARIANTS.icon.as)));
+  [hasLinkButton ? 'link' : null, hasIconButton ? 'icon' : null, hasLinkIconButton ? 'linkIcon' : null].forEach(variant => {
+    if (variant) {
+      specifiers.push(j.importSpecifier(j.identifier(NEW_BUTTON_VARIANTS[variant].import), j.identifier(NEW_BUTTON_VARIANTS[variant].as)));
+    }
+  });
+  const oldButtonImport = fileSource.find(j.ImportDeclaration).filter(path => path.node.source.value === NEW_BUTTON_ENTRY_POINT || path.node.source.value === entryPointsMapping.Button);
+  const remainingDefaultButtons = fileSource.find(j.JSXElement).filter(path => path.value.openingElement.name.type === 'JSXIdentifier' && path.value.openingElement.name.name === specifierIdentifier && !ifHasUnsupportedProps(path.value.openingElement.attributes)).length > 0 || fileSource.find(j.CallExpression).filter(path => path.node.arguments.map(argument => argument.type === 'Identifier' && (argument === null || argument === void 0 ? void 0 : argument.name)).includes(specifierIdentifier)).length > 0;
+  if (remainingDefaultButtons) {
+    specifiers.push(j.importSpecifier(j.identifier(NEW_BUTTON_VARIANTS.default.import), j.identifier(specifierIdentifier)));
   }
-  if (hasLinkIconButton) {
-    specifiers.push(j.importSpecifier(j.identifier(NEW_BUTTON_VARIANTS.linkIcon.import), j.identifier(NEW_BUTTON_VARIANTS.linkIcon.as)));
+  const buttonsWithUnsupportedProps = allButtons.filter(path => ifHasUnsupportedProps(path.value.openingElement.attributes));
+  if (buttonsWithUnsupportedProps.length) {
+    // add comment to all buttons with unsupported props: "component", "style", "css"
+    buttonsWithUnsupportedProps.forEach(element => {
+      var _element$value$openin;
+      const attribute = (_element$value$openin = element.value.openingElement.attributes) === null || _element$value$openin === void 0 ? void 0 : _element$value$openin.find(node => node.type === 'JSXAttribute' && typeof node.name.name === 'string' && unsupportedProps.includes(node.name.name));
+      if (attribute) {
+        addCommentBefore(j, j(attribute), buttonPropsNoLongerSupportedComment, 'line');
+      }
+    });
+
+    // rename all buttons with unsupported props to LegacyButton if default new button is imported
+    if (specifiers.find(specifier => specifier.imported.name === NEW_BUTTON_VARIANTS.default.import)) {
+      renameDefaultButtonToLegacyButtonImport(oldButtonImport, buttonsWithUnsupportedProps, j);
+    }
   }
-  const oldButtonImport = fileSource.find(j.ImportDeclaration).filter(path => path.node.source.value === NEW_BUTTON_ENTRY_POINT || path.node.source.value === entryPointsMapping.Button);
-  const remainingDefaultButtons = fileSource.find(j.JSXElement).filter(path => path.value.openingElement.name.type === 'JSXIdentifier' && path.value.openingElement.name.name === specifierIdentifier).length > 0 || fileSource.find(j.CallExpression).filter(path => path.node.arguments.map(argument => argument.type === 'Identifier' && (argument === null || argument === void 0 ? void 0 : argument.name)).includes(specifierIdentifier)).length > 0;
   if (specifiers.length || remainingDefaultButtons) {
-    if (remainingDefaultButtons) {
-      specifiers.push(j.importSpecifier(j.identifier(NEW_BUTTON_VARIANTS.default.import), j.identifier(specifierIdentifier)));
+    // split the type imports into a separate import
+    const typeSpecifier = buttonImports.find(j.ImportSpecifier).filter(path => path.node.imported.name === ButtonPropsTypeName);
+    if (typeSpecifier.length > 0) {
+      oldButtonImport.insertBefore(j.importDeclaration([j.importSpecifier(j.identifier(ButtonPropsTypeName), j.identifier(typeSpecifier.get(0).node.local.name))], j.stringLiteral(entryPointsMapping.Button), 'type'));
     }
     oldButtonImport.replaceWith(j.importDeclaration(specifiers, j.stringLiteral(NEW_BUTTON_ENTRY_POINT)));
+
+    // add eslint-disable-next-line @atlaskit/design-system/no-banned-imports comment if unsafe import is allowed in custom options
     if (NEW_BUTTON_ENTRY_POINT.includes('unsafe') && (options === null || options === void 0 ? void 0 : options.allowUnsafeImport) === true) {
       addCommentBefore(j, fileSource.find(j.ImportDeclaration).filter(path => path.node.source.value === NEW_BUTTON_ENTRY_POINT), eslintDisableComment, 'line', '');
     }

package/dist/es2019/presets/migrate-to-new-buttons/utils/constants.js

@@ -27,4 +27,11 @@ export const entryPointsMapping = {
   CustomThemeButton: '@atlaskit/button/custom-theme-button'
 };
 export const BUTTON_TYPES = ['Appearance', 'Spacing', 'BaseOwnProps', 'BaseProps', 'ButtonProps', 'LoadingButtonProps', 'LoadingButtonOwnProps', 'ThemeTokens', 'ThemeProps', 'InteractionState', 'CustomThemeButtonProps', 'CustomThemeButtonOwnProps'];
-export const eslintDisableComment = 'eslint-disable-next-line @atlaskit/design-system/no-banned-imports';
+export const eslintDisableComment = 'eslint-disable-next-line @atlaskit/design-system/no-banned-imports';
+export const ButtonPropsTypeName = 'ButtonProps';
+export const unsupportedProps = ['component', 'css', 'style'];
+export const linkButtonMissingHrefComment = `"link" and "subtle-link" appearances are only available in LinkButton, please either provide a href prop then migrate to LinkButton, or remove the appearance from the default button.`;
+export const iconPropsNoLongerSupportedComment = `"glyph", "primaryColor", "secondaryColor" and "testId" are no longer supported in button icons, please refactor the code and/or revisit the UI.`;
+export const buttonPropsNoLongerSupportedComment = `Buttons with "component", "css" or "style" prop can't be automatically migrated with codemods. Please migrate it manually.`;
+export const migrateFitContainerButtonToDefaultButtonComment = `Migrated to a default button with text which is from the icon label.`;
+export const migrateFitContainerButtonToIconButtonComment = `"shouldFitContainer" is not available in icon buttons, please consider using a default button with text.`;