@atlaskit/codemod-cli 0.17.2 → 0.17.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/codemod-cli
 
+## 0.17.4
+
+### Patch Changes
+
+- [#59085](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/59085) [`360ae69766f9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/360ae69766f9) - small fix in button migration codemod - don't move the size prop from icon if it is medium.
+
+## 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

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.2", _PACKAGE_VERSION_ = _process$env$_PACKAGE === void 0 ? '0.0.0-dev' : _process$env$_PACKAGE;
+          _process$env$_PACKAGE = "0.17.4", _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,26 +3,46 @@
 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;
+  if (iconAttr && ((_iconAttr$value = iconAttr.value) === null || _iconAttr$value === void 0 ? void 0 : _iconAttr$value.type) === 'JSXExpressionContainer' && iconAttr.value.expression.type === 'JSXElement') {
+    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 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;
+  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 _sizeAttribute$value;
+      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';
@@ -33,27 +53,27 @@ var moveSizeAndLabelAttributes = exports.moveSizeAndLabelAttributes = function m
       var sizeAttribute = iconJSXElementAttributes.find(function (attribute) {
         return attribute.type === 'JSXAttribute' && attribute.name.name === 'size';
       });
-      if (sizeAttribute && sizeAttribute.type === 'JSXAttribute') {
+      if (sizeAttribute && sizeAttribute.type === 'JSXAttribute' && ((_sizeAttribute$value = sizeAttribute.value) === null || _sizeAttribute$value === void 0 ? void 0 : _sizeAttribute$value.type) === 'Literal' && sizeAttribute.value.value !== 'medium') {
         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);
+  var iconAttrs = attributes && getIconAttributes(attributes);
   var isIconOrLinkIcon = variant === _constants.NEW_BUTTON_VARIANTS.icon.as || variant === _constants.NEW_BUTTON_VARIANTS.linkIcon.as;
-  if (isIconOrLinkIcon && iconAttr) {
+  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

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.`;

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

@@ -1,50 +1,68 @@
-import { NEW_BUTTON_VARIANTS } from '../utils/constants';
-const getIconAttribute = attributes => {
+import { addCommentBefore } from '@atlaskit/codemod-utils';
+import { NEW_BUTTON_VARIANTS, iconPropsNoLongerSupportedComment } from '../utils/constants';
+export const getIconAttributes = attributes => {
   const iconAttr = attributes === null || attributes === void 0 ? void 0 : attributes.filter(attribute => 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;
 };
-export const moveSizeAndLabelAttributes = (element, j, iconRenamed = false) => {
+export const getIconElement = iconAttr => {
   var _iconAttr$value;
+  if (iconAttr && ((_iconAttr$value = iconAttr.value) === null || _iconAttr$value === void 0 ? void 0 : _iconAttr$value.type) === 'JSXExpressionContainer' && iconAttr.value.expression.type === 'JSXElement') {
+    return iconAttr.value.expression;
+  }
+  return null;
+};
+export const moveSizeAndLabelAttributes = (element, j, iconRenamed = false) => {
   const {
     attributes
   } = element.openingElement;
-  const 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') {
-    const iconElement = iconAttr.value.expression;
+  const iconAttrs = attributes && getIconAttributes(attributes);
+  iconAttrs === null || iconAttrs === void 0 ? void 0 : iconAttrs.forEach(iconAttr => {
+    var _iconAttr$value2;
+    const iconElement = getIconElement(iconAttr);
+    if (!iconElement) {
+      return;
+    }
     const 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 _sizeAttribute$value;
+      const ifIconAttributeEitherLabelOrSize = iconJSXElementAttributes === null || iconJSXElementAttributes === void 0 ? void 0 : iconJSXElementAttributes.every(attribute => attribute.type === 'JSXAttribute' && typeof attribute.name.name === 'string' && (attribute.name.name === 'size' || attribute.name.name === 'label'));
+      if (!ifIconAttributeEitherLabelOrSize) {
+        addCommentBefore(j, j(iconAttr), iconPropsNoLongerSupportedComment, 'line');
+      }
+
       // move label and size attributes from icon to the root Button prop
       const labelAttribute = iconJSXElementAttributes.find(attribute => attribute.type === 'JSXAttribute' && attribute.name.name === 'label');
       if (labelAttribute && labelAttribute.type === 'JSXAttribute' && iconRenamed) {
         attributes === null || attributes === void 0 ? void 0 : attributes.push(labelAttribute);
       }
       const sizeAttribute = iconJSXElementAttributes.find(attribute => attribute.type === 'JSXAttribute' && attribute.name.name === 'size');
-      if (sizeAttribute && sizeAttribute.type === 'JSXAttribute') {
+      if (sizeAttribute && sizeAttribute.type === 'JSXAttribute' && ((_sizeAttribute$value = sizeAttribute.value) === null || _sizeAttribute$value === void 0 ? void 0 : _sizeAttribute$value.type) === 'Literal' && sizeAttribute.value.value !== 'medium') {
         sizeAttribute.name.name = iconRenamed ? 'UNSAFE_size' : `UNSAFE_${iconAttr.name.name}_size`;
         attributes === null || attributes === void 0 ? 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);
     }
-  }
+  });
 };
 export const generateNewElement = (variant, element, j) => {
   const {
     attributes
   } = element.openingElement;
-  const iconAttr = attributes && getIconAttribute(attributes);
+  const iconAttrs = attributes && getIconAttributes(attributes);
   const isIconOrLinkIcon = variant === NEW_BUTTON_VARIANTS.icon.as || variant === NEW_BUTTON_VARIANTS.linkIcon.as;
-  if (isIconOrLinkIcon && iconAttr) {
+  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

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

@@ -0,0 +1,2 @@
+import { unsupportedProps } from './constants';
+export const ifHasUnsupportedProps = attributes => Boolean(attributes && (attributes === null || attributes === void 0 ? void 0 : attributes.some(node => node.type === 'JSXAttribute' && unsupportedProps.includes(String(node.name.name)))));

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

@@ -0,0 +1,4 @@
+import { NEW_BUTTON_ENTRY_POINT } from './constants';
+export const checkIfVariantAlreadyImported = (variant, fileSource, j) => {
+  return 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;
+};

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

@@ -0,0 +1,27 @@
+import { addCommentBefore } from '@atlaskit/codemod-utils';
+import { getIconAttributes, getIconElement } from '../utils/generate-new-button-element';
+import { NEW_BUTTON_VARIANTS, migrateFitContainerButtonToDefaultButtonComment, migrateFitContainerButtonToIconButtonComment } from './constants';
+export const migrateFitContainerIconButton = (element, j) => {
+  var _iconElement$openingE, _labelAttribute$value;
+  const {
+    attributes
+  } = element.value.openingElement;
+  const iconAttrs = attributes && getIconAttributes(attributes);
+  const iconElement = iconAttrs && iconAttrs[0] && getIconElement(iconAttrs[0]);
+  const labelAttribute = iconElement && Array.isArray(iconElement.openingElement.attributes) && ((_iconElement$openingE = iconElement.openingElement) === null || _iconElement$openingE === void 0 ? void 0 : _iconElement$openingE.attributes.find(path => path.type === 'JSXAttribute' && (path.name.name === 'label' || path.name.name === 'aria-label' || path.name.name === 'aria-labelledby')));
+  let 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;
+    const label = labelAttribute.value.value;
+    const formattedLabel = `${label.charAt(0).toUpperCase()}${label.slice(1)}`.split('-').join(' ');
+    j(element).find(j.JSXAttribute).filter(path => path.node.name.name === 'iconBefore' || path.node.name.name === 'iconAfter').remove();
+    const newButton = j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier(NEW_BUTTON_VARIANTS.default.as), attributes), j.jsxClosingElement(j.jsxIdentifier(NEW_BUTTON_VARIANTS.default.as)), [j.jsxText(formattedLabel)]);
+    j(element).replaceWith(newButton);
+    addCommentBefore(j, j(newButton).find(j.JSXAttribute).filter(path => path.node.name.name === 'shouldFitContainer'), migrateFitContainerButtonToDefaultButtonComment, 'line');
+  } else {
+    migratedToIconButton = true;
+    addCommentBefore(j, j(element).find(j.JSXAttribute).filter(path => path.node.name.name === 'iconBefore' || path.node.name.name === 'iconAfter'), migrateFitContainerButtonToIconButtonComment, 'line');
+    j(element).find(j.JSXAttribute).filter(path => path.node.name.name === 'shouldFitContainer').remove();
+  }
+  return migratedToIconButton;
+};

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

@@ -0,0 +1,9 @@
+import { entryPointsMapping } from '../utils/constants';
+export const renameDefaultButtonToLegacyButtonImport = (oldButtonImport, oldButtonElements, j) => {
+  oldButtonImport.insertBefore(j.importDeclaration([j.importDefaultSpecifier(j.identifier('LegacyButton'))], j.stringLiteral(entryPointsMapping.Button)));
+  oldButtonElements.forEach(element => {
+    var _element$value$childr, _element$value$childr2;
+    const 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/esm/main.js

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

package/dist/esm/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';
 var transformer = function transformer(file, api, options) {
   var j = api.jscodeshift;
   var fileSource = j(file.source);
@@ -17,33 +21,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(PRINT_SETTINGS);
-  }
-  var checkIfVariantAlreadyImported = function checkIfVariantAlreadyImported(variant) {
-    return fileSource.find(j.ImportDeclaration).filter(function (path) {
-      return path.node.source.value === NEW_BUTTON_ENTRY_POINT;
-    }).find(j.ImportSpecifier).filter(function (path) {
-      return path.node.imported.name === variant;
-    }).length > 0;
-  };
-  var hasLinkIconButton = checkIfVariantAlreadyImported(NEW_BUTTON_VARIANTS.linkIcon.import);
-  var hasLinkButton = checkIfVariantAlreadyImported(NEW_BUTTON_VARIANTS.link.import);
-  var hasIconButton = checkIfVariantAlreadyImported(NEW_BUTTON_VARIANTS.icon.import);
+  var hasLinkIconButton = checkIfVariantAlreadyImported(NEW_BUTTON_VARIANTS.linkIcon.import, fileSource, j);
+  var hasLinkButton = checkIfVariantAlreadyImported(NEW_BUTTON_VARIANTS.link.import, fileSource, j);
+  var hasIconButton = checkIfVariantAlreadyImported(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 !ifHasUnsupportedProps(path.value.openingElement.attributes);
+  });
+  buttonsWithoutUnsupportedProps.forEach(function (element) {
+    var _element$value$childr;
     var attributes = element.value.openingElement.attributes;
     if (!attributes) {
       return;
@@ -53,18 +41,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) {
       moveSizeAndLabelAttributes(element.value, j);
     }
+    if (isFitContainerIconButton) {
+      var migratedToIconButton = migrateFitContainerIconButton(element, j);
+      if (migratedToIconButton) {
+        isIconButton = true;
+      }
+    }
     if (isLinkIconButton) {
       hasLinkIconButton = true;
       j(element).replaceWith(generateNewElement(NEW_BUTTON_VARIANTS.linkIcon.as, element.value, j));
@@ -77,32 +68,66 @@ var transformer = function transformer(file, api, options) {
       hasLinkButton = true;
       j(element).replaceWith(generateNewElement(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
+      addCommentBefore(j, [element], linkButtonMissingHrefComment);
+    }
   });
   var 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)));
-  }
-  if (hasLinkIconButton) {
-    specifiers.push(j.importSpecifier(j.identifier(NEW_BUTTON_VARIANTS.linkIcon.import), j.identifier(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(NEW_BUTTON_VARIANTS[variant].import), j.identifier(NEW_BUTTON_VARIANTS[variant].as)));
+    }
+  });
   var oldButtonImport = fileSource.find(j.ImportDeclaration).filter(function (path) {
     return path.node.source.value === NEW_BUTTON_ENTRY_POINT || path.node.source.value === 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 && !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(NEW_BUTTON_VARIANTS.default.import), j.identifier(specifierIdentifier)));
+  }
+  var buttonsWithUnsupportedProps = allButtons.filter(function (path) {
+    return 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' && 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(function (specifier) {
+      return specifier.imported.name === NEW_BUTTON_VARIANTS.default.import;
+    })) {
+      renameDefaultButtonToLegacyButtonImport(oldButtonImport, buttonsWithUnsupportedProps, j);
+    }
+  }
   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
+    var typeSpecifier = buttonImports.find(j.ImportSpecifier).filter(function (path) {
+      return 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(function (path) {
         return path.node.source.value === NEW_BUTTON_ENTRY_POINT;

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

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

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

@@ -1,22 +1,42 @@
-import { NEW_BUTTON_VARIANTS } from '../utils/constants';
-var getIconAttribute = function getIconAttribute(attributes) {
+import { addCommentBefore } from '@atlaskit/codemod-utils';
+import { NEW_BUTTON_VARIANTS, iconPropsNoLongerSupportedComment } from '../utils/constants';
+export var 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;
 };
-export var moveSizeAndLabelAttributes = function moveSizeAndLabelAttributes(element, j) {
+export var getIconElement = function getIconElement(iconAttr) {
   var _iconAttr$value;
+  if (iconAttr && ((_iconAttr$value = iconAttr.value) === null || _iconAttr$value === void 0 ? void 0 : _iconAttr$value.type) === 'JSXExpressionContainer' && iconAttr.value.expression.type === 'JSXElement') {
+    return iconAttr.value.expression;
+  }
+  return null;
+};
+export var moveSizeAndLabelAttributes = function moveSizeAndLabelAttributes(element, j) {
   var iconRenamed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   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;
+  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 _sizeAttribute$value;
+      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) {
+        addCommentBefore(j, j(iconAttr), 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';
@@ -27,27 +47,27 @@ export var moveSizeAndLabelAttributes = function moveSizeAndLabelAttributes(elem
       var sizeAttribute = iconJSXElementAttributes.find(function (attribute) {
         return attribute.type === 'JSXAttribute' && attribute.name.name === 'size';
       });
-      if (sizeAttribute && sizeAttribute.type === 'JSXAttribute') {
+      if (sizeAttribute && sizeAttribute.type === 'JSXAttribute' && ((_sizeAttribute$value = sizeAttribute.value) === null || _sizeAttribute$value === void 0 ? void 0 : _sizeAttribute$value.type) === 'Literal' && sizeAttribute.value.value !== 'medium') {
         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);
     }
-  }
+  });
 };
 export var generateNewElement = function generateNewElement(variant, element, j) {
   var attributes = element.openingElement.attributes;
-  var iconAttr = attributes && getIconAttribute(attributes);
+  var iconAttrs = attributes && getIconAttributes(attributes);
   var isIconOrLinkIcon = variant === NEW_BUTTON_VARIANTS.icon.as || variant === NEW_BUTTON_VARIANTS.linkIcon.as;
-  if (isIconOrLinkIcon && iconAttr) {
+  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

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

@@ -0,0 +1,6 @@
+import { unsupportedProps } from './constants';
+export var ifHasUnsupportedProps = function ifHasUnsupportedProps(attributes) {
+  return Boolean(attributes && (attributes === null || attributes === void 0 ? void 0 : attributes.some(function (node) {
+    return node.type === 'JSXAttribute' && unsupportedProps.includes(String(node.name.name));
+  })));
+};

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

@@ -0,0 +1,8 @@
+import { NEW_BUTTON_ENTRY_POINT } from './constants';
+export var checkIfVariantAlreadyImported = function checkIfVariantAlreadyImported(variant, fileSource, j) {
+  return fileSource.find(j.ImportDeclaration).filter(function (path) {
+    return path.node.source.value === NEW_BUTTON_ENTRY_POINT;
+  }).find(j.ImportSpecifier).filter(function (path) {
+    return path.node.imported.name === variant;
+  }).length > 0;
+};

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

@@ -0,0 +1,35 @@
+import { addCommentBefore } from '@atlaskit/codemod-utils';
+import { getIconAttributes, getIconElement } from '../utils/generate-new-button-element';
+import { NEW_BUTTON_VARIANTS, migrateFitContainerButtonToDefaultButtonComment, migrateFitContainerButtonToIconButtonComment } from './constants';
+export var migrateFitContainerIconButton = function migrateFitContainerIconButton(element, j) {
+  var _iconElement$openingE, _labelAttribute$value;
+  var attributes = element.value.openingElement.attributes;
+  var iconAttrs = attributes && getIconAttributes(attributes);
+  var iconElement = iconAttrs && iconAttrs[0] && 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(NEW_BUTTON_VARIANTS.default.as), attributes), j.jsxClosingElement(j.jsxIdentifier(NEW_BUTTON_VARIANTS.default.as)), [j.jsxText(formattedLabel)]);
+    j(element).replaceWith(newButton);
+    addCommentBefore(j, j(newButton).find(j.JSXAttribute).filter(function (path) {
+      return path.node.name.name === 'shouldFitContainer';
+    }), migrateFitContainerButtonToDefaultButtonComment, 'line');
+  } else {
+    migratedToIconButton = true;
+    addCommentBefore(j, j(element).find(j.JSXAttribute).filter(function (path) {
+      return path.node.name.name === 'iconBefore' || path.node.name.name === 'iconAfter';
+    }), migrateFitContainerButtonToIconButtonComment, 'line');
+    j(element).find(j.JSXAttribute).filter(function (path) {
+      return path.node.name.name === 'shouldFitContainer';
+    }).remove();
+  }
+  return migratedToIconButton;
+};

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

@@ -0,0 +1,9 @@
+import { entryPointsMapping } from '../utils/constants';
+export var renameDefaultButtonToLegacyButtonImport = function renameDefaultButtonToLegacyButtonImport(oldButtonImport, oldButtonElements, j) {
+  oldButtonImport.insertBefore(j.importDeclaration([j.importDefaultSpecifier(j.identifier('LegacyButton'))], j.stringLiteral(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/types/presets/migrate-to-new-buttons/utils/constants.d.ts

@@ -13,3 +13,10 @@ export declare const entryPointsMapping: {
 };
 export declare const BUTTON_TYPES: string[];
 export declare const eslintDisableComment = "eslint-disable-next-line @atlaskit/design-system/no-banned-imports";
+export declare const ButtonPropsTypeName = "ButtonProps";
+export declare const unsupportedProps: string[];
+export declare 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 declare const iconPropsNoLongerSupportedComment = "\"glyph\", \"primaryColor\", \"secondaryColor\" and \"testId\" are no longer supported in button icons, please refactor the code and/or revisit the UI.";
+export declare const buttonPropsNoLongerSupportedComment = "Buttons with \"component\", \"css\" or \"style\" prop can't be automatically migrated with codemods. Please migrate it manually.";
+export declare const migrateFitContainerButtonToDefaultButtonComment = "Migrated to a default button with text which is from the icon label.";
+export declare const migrateFitContainerButtonToIconButtonComment = "\"shouldFitContainer\" is not available in icon buttons, please consider using a default button with text.";

package/dist/types/presets/migrate-to-new-buttons/utils/generate-new-button-element.d.ts

@@ -1,4 +1,6 @@
-import type { API, JSXElement } from 'jscodeshift';
+import type { API, JSXElement, JSXAttribute, JSXSpreadAttribute } from 'jscodeshift';
 import { NEW_BUTTON_VARIANTS } from '../utils/constants';
+export declare const getIconAttributes: (attributes: (JSXAttribute | JSXSpreadAttribute)[]) => JSXAttribute[] | null;
+export declare const getIconElement: (iconAttr: JSXAttribute) => JSXElement | null;
 export declare const moveSizeAndLabelAttributes: (element: JSXElement, j: API['jscodeshift'], iconRenamed?: boolean) => void;
 export declare const generateNewElement: (variant: (typeof NEW_BUTTON_VARIANTS)[keyof typeof NEW_BUTTON_VARIANTS]['as'], element: JSXElement, j: API['jscodeshift']) => JSXElement;

package/dist/types/presets/migrate-to-new-buttons/utils/has-unsupported-props.d.ts

@@ -0,0 +1,2 @@
+import type { JSXAttribute, JSXSpreadAttribute } from 'jscodeshift';
+export declare const ifHasUnsupportedProps: (attributes: (JSXAttribute | JSXSpreadAttribute)[] | undefined) => boolean;

package/dist/types/presets/migrate-to-new-buttons/utils/if-variant-already-imported.d.ts

@@ -0,0 +1,2 @@
+import type { API, Collection } from 'jscodeshift';
+export declare const checkIfVariantAlreadyImported: (variant: string, fileSource: Collection<any>, j: API['jscodeshift']) => boolean;

package/dist/types/presets/migrate-to-new-buttons/utils/migrate-fit-container-icon-button.d.ts

@@ -0,0 +1,3 @@
+import type { API, ASTPath } from 'jscodeshift';
+import { JSXElement } from 'jscodeshift';
+export declare const migrateFitContainerIconButton: (element: ASTPath<JSXElement>, j: API['jscodeshift']) => boolean;

package/dist/types/presets/migrate-to-new-buttons/utils/rename-default-button-to-legacy-button.d.ts

@@ -0,0 +1,2 @@
+import type { API, Collection, ImportDeclaration, JSXElement } from 'jscodeshift';
+export declare const renameDefaultButtonToLegacyButtonImport: (oldButtonImport: Collection<ImportDeclaration>, oldButtonElements: Collection<JSXElement>, j: API['jscodeshift']) => void;

package/dist/types-ts4.5/presets/migrate-to-new-buttons/utils/constants.d.ts

@@ -13,3 +13,10 @@ export declare const entryPointsMapping: {
 };
 export declare const BUTTON_TYPES: string[];
 export declare const eslintDisableComment = "eslint-disable-next-line @atlaskit/design-system/no-banned-imports";
+export declare const ButtonPropsTypeName = "ButtonProps";
+export declare const unsupportedProps: string[];
+export declare 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 declare const iconPropsNoLongerSupportedComment = "\"glyph\", \"primaryColor\", \"secondaryColor\" and \"testId\" are no longer supported in button icons, please refactor the code and/or revisit the UI.";
+export declare const buttonPropsNoLongerSupportedComment = "Buttons with \"component\", \"css\" or \"style\" prop can't be automatically migrated with codemods. Please migrate it manually.";
+export declare const migrateFitContainerButtonToDefaultButtonComment = "Migrated to a default button with text which is from the icon label.";
+export declare const migrateFitContainerButtonToIconButtonComment = "\"shouldFitContainer\" is not available in icon buttons, please consider using a default button with text.";

package/dist/types-ts4.5/presets/migrate-to-new-buttons/utils/generate-new-button-element.d.ts

@@ -1,4 +1,6 @@
-import type { API, JSXElement } from 'jscodeshift';
+import type { API, JSXElement, JSXAttribute, JSXSpreadAttribute } from 'jscodeshift';
 import { NEW_BUTTON_VARIANTS } from '../utils/constants';
+export declare const getIconAttributes: (attributes: (JSXAttribute | JSXSpreadAttribute)[]) => JSXAttribute[] | null;
+export declare const getIconElement: (iconAttr: JSXAttribute) => JSXElement | null;
 export declare const moveSizeAndLabelAttributes: (element: JSXElement, j: API['jscodeshift'], iconRenamed?: boolean) => void;
 export declare const generateNewElement: (variant: (typeof NEW_BUTTON_VARIANTS)[keyof typeof NEW_BUTTON_VARIANTS]['as'], element: JSXElement, j: API['jscodeshift']) => JSXElement;

package/dist/types-ts4.5/presets/migrate-to-new-buttons/utils/has-unsupported-props.d.ts

@@ -0,0 +1,2 @@
+import type { JSXAttribute, JSXSpreadAttribute } from 'jscodeshift';
+export declare const ifHasUnsupportedProps: (attributes: (JSXAttribute | JSXSpreadAttribute)[] | undefined) => boolean;

package/dist/types-ts4.5/presets/migrate-to-new-buttons/utils/if-variant-already-imported.d.ts

@@ -0,0 +1,2 @@
+import type { API, Collection } from 'jscodeshift';
+export declare const checkIfVariantAlreadyImported: (variant: string, fileSource: Collection<any>, j: API['jscodeshift']) => boolean;

package/dist/types-ts4.5/presets/migrate-to-new-buttons/utils/migrate-fit-container-icon-button.d.ts

@@ -0,0 +1,3 @@
+import type { API, ASTPath } from 'jscodeshift';
+import { JSXElement } from 'jscodeshift';
+export declare const migrateFitContainerIconButton: (element: ASTPath<JSXElement>, j: API['jscodeshift']) => boolean;

package/dist/types-ts4.5/presets/migrate-to-new-buttons/utils/rename-default-button-to-legacy-button.d.ts

@@ -0,0 +1,2 @@
+import type { API, Collection, ImportDeclaration, JSXElement } from 'jscodeshift';
+export declare const renameDefaultButtonToLegacyButtonImport: (oldButtonImport: Collection<ImportDeclaration>, oldButtonElements: Collection<JSXElement>, j: API['jscodeshift']) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/codemod-cli",
-  "version": "0.17.2",
+  "version": "0.17.4",
   "description": "A cli for distributing codemods for atlassian-frontend components and services",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"