@atlaskit/codemod-cli 0.17.0 → 0.17.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/codemod-cli
 
+## 0.17.1
+
+### Patch Changes
+
+- [#43812](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/43812) [`15c0e36ba0f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/15c0e36ba0f) - Update button codemods to adapt new API changes for IconButton.
+
 ## 0.17.0
 
 ### Minor 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.0", _PACKAGE_VERSION_ = _process$env$_PACKAGE === void 0 ? '0.0.0-dev' : _process$env$_PACKAGE;
+          _process$env$_PACKAGE = "0.17.1", _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

@@ -4,8 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _codemodUtils = require("@atlaskit/codemod-utils");
 var _constants = require("../utils/constants");
-var transformer = function transformer(file, api) {
+var _generateNewButtonElement = require("../utils/generate-new-button-element");
+var transformer = function transformer(file, api, options) {
   var j = api.jscodeshift;
   var fileSource = j(file.source);
   var buttonImports = fileSource.find(j.ImportDeclaration).filter(function (path) {
@@ -40,20 +42,6 @@ var transformer = function transformer(file, api) {
       return path.node.imported.name === variant;
     }).length > 0;
   };
-  var generateNewElement = function generateNewElement(variant, element) {
-    var attributes = element.openingElement.attributes;
-    if (variant === _constants.NEW_BUTTON_VARIANTS.icon.as) {
-      var attr = attributes === null || attributes === void 0 ? void 0 : attributes.filter(function (attribute) {
-        return attribute.type === 'JSXAttribute' && (attribute.name.name === 'iconBefore' || attribute.name.name === 'iconAfter');
-      });
-      if (attr !== null && attr !== void 0 && attr.length && attr[0].type === 'JSXAttribute') {
-        attr[0].name.name = 'icon';
-      }
-    }
-    // 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);
-  };
   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);
@@ -73,18 +61,27 @@ var transformer = function transformer(file, api) {
     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 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.
+    if (isDefaultButtonWithAnIcon) {
+      (0, _generateNewButtonElement.moveSizeAndLabelAttributes)(element.value, j);
+    }
     if (isLinkIconButton) {
       hasLinkIconButton = true;
-      j(element).replaceWith(generateNewElement(_constants.NEW_BUTTON_VARIANTS.linkIcon.as, element.value));
+      j(element).replaceWith((0, _generateNewButtonElement.generateNewElement)(_constants.NEW_BUTTON_VARIANTS.linkIcon.as, element.value, j));
     }
     if (isIconButton) {
       hasIconButton = true;
-      j(element).replaceWith(generateNewElement(_constants.NEW_BUTTON_VARIANTS.icon.as, element.value));
+      j(element).replaceWith((0, _generateNewButtonElement.generateNewElement)(_constants.NEW_BUTTON_VARIANTS.icon.as, element.value, j));
     }
     if (isLinkButton) {
       hasLinkButton = true;
-      j(element).replaceWith(generateNewElement(_constants.NEW_BUTTON_VARIANTS.link.as, element.value));
+      j(element).replaceWith((0, _generateNewButtonElement.generateNewElement)(_constants.NEW_BUTTON_VARIANTS.link.as, element.value, j));
     }
   });
   var specifiers = [];
@@ -100,18 +97,23 @@ var transformer = function transformer(file, api) {
   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 leftButtons = fileSource.find(j.JSXElement).filter(function (path) {
+  var remainingDefaultButtons = fileSource.find(j.JSXElement).filter(function (path) {
     return path.value.openingElement.name.type === 'JSXIdentifier' && path.value.openingElement.name.name === specifierIdentifier;
   }).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 (specifiers.length || leftButtons) {
-    if (leftButtons) {
+  if (specifiers.length || remainingDefaultButtons) {
+    if (remainingDefaultButtons) {
       specifiers.push(j.importSpecifier(j.identifier(_constants.NEW_BUTTON_VARIANTS.default.import), j.identifier(specifierIdentifier)));
     }
     oldButtonImport.replaceWith(j.importDeclaration(specifiers, j.stringLiteral(_constants.NEW_BUTTON_ENTRY_POINT)));
+    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;
+      }), _constants.eslintDisableComment, 'line', '');
+    }
   }
   return fileSource.toSource(_constants.PRINT_SETTINGS);
 };

package/dist/cjs/presets/migrate-to-new-buttons/codemods/next-split-imports.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _constants = require("../utils/constants");
 var transformer = function transformer(file, api) {
   var j = api.jscodeshift;
@@ -18,7 +20,12 @@ var transformer = function transformer(file, api) {
     return fileSource.toSource(_constants.PRINT_SETTINGS);
   }
   buttonImports.forEach(function (node) {
-    var specifiers = node.node.specifiers;
+    var _node$node = node.node,
+      specifiers = _node$node.specifiers,
+      source = _node$node.source;
+    if ([].concat((0, _toConsumableArray2.default)(Object.values(_constants.entryPointsMapping)), [_constants.NEW_BUTTON_ENTRY_POINT, '@atlaskit/button/types']).includes(source.value)) {
+      return fileSource.toSource(_constants.PRINT_SETTINGS);
+    }
     var defaultSpecifier = specifiers === null || specifiers === void 0 ? void 0 : specifiers.find(function (specifier) {
       return specifier.type === 'ImportDefaultSpecifier';
     });

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

@@ -12,11 +12,11 @@ var _nextSplitImports = _interopRequireDefault(require("./codemods/next-split-im
 var _nextMigrateToNewButtonVariants = _interopRequireDefault(require("./codemods/next-migrate-to-new-button-variants"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function transformer(_x, _x2) {
+function transformer(_x, _x2, _x3) {
   return _transformer.apply(this, arguments);
 }
 function _transformer() {
-  _transformer = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(file, api) {
+  _transformer = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(file, api, options) {
     var transformers, src;
     return _regenerator.default.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
@@ -29,7 +29,7 @@ function _transformer() {
             }
             var nextSrc = transformer(_objectSpread(_objectSpread({}, file), {}, {
               source: src
-            }), api);
+            }), api, options);
             if (nextSrc) {
               src = nextSrc;
             }

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.entryPointsMapping = exports.PRINT_SETTINGS = exports.NEW_BUTTON_VARIANTS = exports.NEW_BUTTON_ENTRY_POINT = exports.BUTTON_TYPES = void 0;
+exports.eslintDisableComment = exports.entryPointsMapping = exports.PRINT_SETTINGS = exports.NEW_BUTTON_VARIANTS = exports.NEW_BUTTON_ENTRY_POINT = exports.BUTTON_TYPES = void 0;
 var PRINT_SETTINGS = exports.PRINT_SETTINGS = {
   quote: 'single'
 };
@@ -32,4 +32,5 @@ var entryPointsMapping = exports.entryPointsMapping = {
   ButtonGroup: '@atlaskit/button/button-group',
   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 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';

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

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.moveSizeAndLabelAttributes = exports.generateNewElement = void 0;
+var _constants = require("../utils/constants");
+var getIconAttribute = function getIconAttribute(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];
+  }
+  return null;
+};
+var moveSizeAndLabelAttributes = exports.moveSizeAndLabelAttributes = function moveSizeAndLabelAttributes(element, j) {
+  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;
+    var iconJSXElementAttributes = iconElement.openingElement.attributes;
+    if (Array.isArray(iconJSXElementAttributes)) {
+      // 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') {
+        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";
+        attributes === null || attributes === void 0 || attributes.push(sizeAttribute);
+      }
+    }
+
+    // replace JSXElement with identifier {<MoreIcon />} => {MoreIcon}
+    if (iconElement.openingElement.name.type === 'JSXIdentifier') {
+      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);
+
+    // rename iconBefore/iconAfter to icon
+    iconAttr.name.name = 'icon';
+  }
+
+  // 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);
+};

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

@@ -1,5 +1,7 @@
-import { PRINT_SETTINGS, NEW_BUTTON_VARIANTS, entryPointsMapping, NEW_BUTTON_ENTRY_POINT } from '../utils/constants';
-const transformer = (file, api) => {
+import { addCommentBefore } from '@atlaskit/codemod-utils';
+import { PRINT_SETTINGS, NEW_BUTTON_VARIANTS, entryPointsMapping, NEW_BUTTON_ENTRY_POINT, eslintDisableComment } from '../utils/constants';
+import { generateNewElement, moveSizeAndLabelAttributes } from '../utils/generate-new-button-element';
+const transformer = (file, api, options) => {
   const j = api.jscodeshift;
   const fileSource = j(file.source);
   const buttonImports = fileSource.find(j.ImportDeclaration).filter(path => path.node.source.value === entryPointsMapping.Button || path.node.source.value === NEW_BUTTON_ENTRY_POINT);
@@ -18,20 +20,6 @@ const transformer = (file, api) => {
     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;
-  const generateNewElement = (variant, element) => {
-    const {
-      attributes
-    } = element.openingElement;
-    if (variant === NEW_BUTTON_VARIANTS.icon.as) {
-      const attr = attributes === null || attributes === void 0 ? void 0 : attributes.filter(attribute => attribute.type === 'JSXAttribute' && (attribute.name.name === 'iconBefore' || attribute.name.name === 'iconAfter'));
-      if (attr !== null && attr !== void 0 && attr.length && attr[0].type === 'JSXAttribute') {
-        attr[0].name.name = 'icon';
-      }
-    }
-    // self closing if it's an icon button or icon link button
-    const isSelfClosing = variant === NEW_BUTTON_VARIANTS.icon.as || variant === NEW_BUTTON_VARIANTS.linkIcon.as;
-    return j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier(variant), attributes, isSelfClosing), isSelfClosing ? null : j.jsxClosingElement(j.jsxIdentifier(variant)), element.children);
-  };
   let hasLinkIconButton = checkIfVariantAlreadyImported(NEW_BUTTON_VARIANTS.linkIcon.import);
   let hasLinkButton = checkIfVariantAlreadyImported(NEW_BUTTON_VARIANTS.link.import);
   let hasIconButton = checkIfVariantAlreadyImported(NEW_BUTTON_VARIANTS.icon.import);
@@ -49,18 +37,27 @@ const transformer = (file, api) => {
     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 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.
+    if (isDefaultButtonWithAnIcon) {
+      moveSizeAndLabelAttributes(element.value, j);
+    }
     if (isLinkIconButton) {
       hasLinkIconButton = true;
-      j(element).replaceWith(generateNewElement(NEW_BUTTON_VARIANTS.linkIcon.as, element.value));
+      j(element).replaceWith(generateNewElement(NEW_BUTTON_VARIANTS.linkIcon.as, element.value, j));
     }
     if (isIconButton) {
       hasIconButton = true;
-      j(element).replaceWith(generateNewElement(NEW_BUTTON_VARIANTS.icon.as, element.value));
+      j(element).replaceWith(generateNewElement(NEW_BUTTON_VARIANTS.icon.as, element.value, j));
     }
     if (isLinkButton) {
       hasLinkButton = true;
-      j(element).replaceWith(generateNewElement(NEW_BUTTON_VARIANTS.link.as, element.value));
+      j(element).replaceWith(generateNewElement(NEW_BUTTON_VARIANTS.link.as, element.value, j));
     }
   });
   const specifiers = [];
@@ -74,12 +71,15 @@ const transformer = (file, api) => {
     specifiers.push(j.importSpecifier(j.identifier(NEW_BUTTON_VARIANTS.linkIcon.import), j.identifier(NEW_BUTTON_VARIANTS.linkIcon.as)));
   }
   const oldButtonImport = fileSource.find(j.ImportDeclaration).filter(path => path.node.source.value === NEW_BUTTON_ENTRY_POINT || path.node.source.value === entryPointsMapping.Button);
-  const leftButtons = 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 || leftButtons) {
-    if (leftButtons) {
+  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)));
     }
     oldButtonImport.replaceWith(j.importDeclaration(specifiers, j.stringLiteral(NEW_BUTTON_ENTRY_POINT)));
+    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', '');
+    }
   }
   return fileSource.toSource(PRINT_SETTINGS);
 };

package/dist/es2019/presets/migrate-to-new-buttons/codemods/next-split-imports.js

@@ -1,4 +1,4 @@
-import { PRINT_SETTINGS, entryPointsMapping, BUTTON_TYPES } from '../utils/constants';
+import { PRINT_SETTINGS, entryPointsMapping, BUTTON_TYPES, NEW_BUTTON_ENTRY_POINT } from '../utils/constants';
 const transformer = (file, api) => {
   const j = api.jscodeshift;
   const fileSource = j(file.source);
@@ -11,8 +11,12 @@ const transformer = (file, api) => {
   }
   buttonImports.forEach(node => {
     const {
-      specifiers
+      specifiers,
+      source
     } = node.node;
+    if ([...Object.values(entryPointsMapping), NEW_BUTTON_ENTRY_POINT, '@atlaskit/button/types'].includes(source.value)) {
+      return fileSource.toSource(PRINT_SETTINGS);
+    }
     const defaultSpecifier = specifiers === null || specifiers === void 0 ? void 0 : specifiers.find(specifier => specifier.type === 'ImportDefaultSpecifier');
     if (defaultSpecifier && defaultSpecifier.local) {
       const defaultButtonImport = j.importDeclaration([j.importDefaultSpecifier(j.identifier(defaultSpecifier.local.name))], j.stringLiteral(entryPointsMapping.Button));

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

@@ -1,6 +1,6 @@
 import splitImportsTransformer from './codemods/next-split-imports';
 import migrateToNewButtonVariantsTransformer from './codemods/next-migrate-to-new-button-variants';
-export default async function transformer(file, api) {
+export default async function transformer(file, api, options) {
   const transformers = [splitImportsTransformer, migrateToNewButtonVariantsTransformer];
   let src = file.source;
   transformers.forEach(transformer => {
@@ -10,7 +10,7 @@ export default async function transformer(file, api) {
     const nextSrc = transformer({
       ...file,
       source: src
-    }, api);
+    }, api, options);
     if (nextSrc) {
       src = nextSrc;
     }

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

@@ -26,4 +26,5 @@ export const entryPointsMapping = {
   ButtonGroup: '@atlaskit/button/button-group',
   CustomThemeButton: '@atlaskit/button/custom-theme-button'
 };
-export const BUTTON_TYPES = ['Appearance', 'Spacing', 'BaseOwnProps', 'BaseProps', 'ButtonProps', 'LoadingButtonProps', 'LoadingButtonOwnProps', 'ThemeTokens', 'ThemeProps', 'InteractionState', 'CustomThemeButtonProps', 'CustomThemeButtonOwnProps'];
+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';

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

@@ -0,0 +1,52 @@
+import { NEW_BUTTON_VARIANTS } from '../utils/constants';
+const getIconAttribute = 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];
+  }
+  return null;
+};
+export const moveSizeAndLabelAttributes = (element, j) => {
+  var _iconAttr$value;
+  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 iconJSXElementAttributes = iconElement.openingElement.attributes;
+    if (Array.isArray(iconJSXElementAttributes)) {
+      // 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') {
+        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') {
+        sizeAttribute.name.name = `UNSAFE_size`;
+        attributes === null || attributes === void 0 ? void 0 : attributes.push(sizeAttribute);
+      }
+    }
+
+    // replace JSXElement with identifier {<MoreIcon />} => {MoreIcon}
+    if (iconElement.openingElement.name.type === 'JSXIdentifier') {
+      iconAttr.value.expression = j.identifier(iconElement.openingElement.name.name);
+    }
+  }
+};
+export const generateNewElement = (variant, element, j) => {
+  const {
+    attributes
+  } = element.openingElement;
+  const iconAttr = attributes && getIconAttribute(attributes);
+  if (variant === NEW_BUTTON_VARIANTS.icon.as && iconAttr && attributes) {
+    moveSizeAndLabelAttributes(element, j);
+
+    // rename iconBefore/iconAfter to icon
+    iconAttr.name.name = 'icon';
+  }
+
+  // self closing if it's an icon button or icon link button
+  const isSelfClosing = variant === NEW_BUTTON_VARIANTS.icon.as || variant === NEW_BUTTON_VARIANTS.linkIcon.as;
+  return j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier(variant), attributes, isSelfClosing), isSelfClosing ? null : j.jsxClosingElement(j.jsxIdentifier(variant)), element.children);
+};

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.0", _PACKAGE_VERSION_ = _process$env$_PACKAGE === void 0 ? '0.0.0-dev' : _process$env$_PACKAGE;
+          _process$env$_PACKAGE = "0.17.1", _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,5 +1,7 @@
-import { PRINT_SETTINGS, NEW_BUTTON_VARIANTS, entryPointsMapping, NEW_BUTTON_ENTRY_POINT } from '../utils/constants';
-var transformer = function transformer(file, api) {
+import { addCommentBefore } from '@atlaskit/codemod-utils';
+import { PRINT_SETTINGS, NEW_BUTTON_VARIANTS, entryPointsMapping, NEW_BUTTON_ENTRY_POINT, eslintDisableComment } from '../utils/constants';
+import { generateNewElement, moveSizeAndLabelAttributes } from '../utils/generate-new-button-element';
+var transformer = function transformer(file, api, options) {
   var j = api.jscodeshift;
   var fileSource = j(file.source);
   var buttonImports = fileSource.find(j.ImportDeclaration).filter(function (path) {
@@ -34,20 +36,6 @@ var transformer = function transformer(file, api) {
       return path.node.imported.name === variant;
     }).length > 0;
   };
-  var generateNewElement = function generateNewElement(variant, element) {
-    var attributes = element.openingElement.attributes;
-    if (variant === NEW_BUTTON_VARIANTS.icon.as) {
-      var attr = attributes === null || attributes === void 0 ? void 0 : attributes.filter(function (attribute) {
-        return attribute.type === 'JSXAttribute' && (attribute.name.name === 'iconBefore' || attribute.name.name === 'iconAfter');
-      });
-      if (attr !== null && attr !== void 0 && attr.length && attr[0].type === 'JSXAttribute') {
-        attr[0].name.name = 'icon';
-      }
-    }
-    // self closing if it's an icon button or icon link button
-    var isSelfClosing = variant === NEW_BUTTON_VARIANTS.icon.as || variant === NEW_BUTTON_VARIANTS.linkIcon.as;
-    return j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier(variant), attributes, isSelfClosing), isSelfClosing ? null : j.jsxClosingElement(j.jsxIdentifier(variant)), element.children);
-  };
   var hasLinkIconButton = checkIfVariantAlreadyImported(NEW_BUTTON_VARIANTS.linkIcon.import);
   var hasLinkButton = checkIfVariantAlreadyImported(NEW_BUTTON_VARIANTS.link.import);
   var hasIconButton = checkIfVariantAlreadyImported(NEW_BUTTON_VARIANTS.icon.import);
@@ -67,18 +55,27 @@ var transformer = function transformer(file, api) {
     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 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.
+    if (isDefaultButtonWithAnIcon) {
+      moveSizeAndLabelAttributes(element.value, j);
+    }
     if (isLinkIconButton) {
       hasLinkIconButton = true;
-      j(element).replaceWith(generateNewElement(NEW_BUTTON_VARIANTS.linkIcon.as, element.value));
+      j(element).replaceWith(generateNewElement(NEW_BUTTON_VARIANTS.linkIcon.as, element.value, j));
     }
     if (isIconButton) {
       hasIconButton = true;
-      j(element).replaceWith(generateNewElement(NEW_BUTTON_VARIANTS.icon.as, element.value));
+      j(element).replaceWith(generateNewElement(NEW_BUTTON_VARIANTS.icon.as, element.value, j));
     }
     if (isLinkButton) {
       hasLinkButton = true;
-      j(element).replaceWith(generateNewElement(NEW_BUTTON_VARIANTS.link.as, element.value));
+      j(element).replaceWith(generateNewElement(NEW_BUTTON_VARIANTS.link.as, element.value, j));
     }
   });
   var specifiers = [];
@@ -94,18 +91,23 @@ var transformer = function transformer(file, api) {
   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 leftButtons = fileSource.find(j.JSXElement).filter(function (path) {
+  var remainingDefaultButtons = fileSource.find(j.JSXElement).filter(function (path) {
     return path.value.openingElement.name.type === 'JSXIdentifier' && path.value.openingElement.name.name === specifierIdentifier;
   }).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 (specifiers.length || leftButtons) {
-    if (leftButtons) {
+  if (specifiers.length || remainingDefaultButtons) {
+    if (remainingDefaultButtons) {
       specifiers.push(j.importSpecifier(j.identifier(NEW_BUTTON_VARIANTS.default.import), j.identifier(specifierIdentifier)));
     }
     oldButtonImport.replaceWith(j.importDeclaration(specifiers, j.stringLiteral(NEW_BUTTON_ENTRY_POINT)));
+    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;
+      }), eslintDisableComment, 'line', '');
+    }
   }
   return fileSource.toSource(PRINT_SETTINGS);
 };

package/dist/esm/presets/migrate-to-new-buttons/codemods/next-split-imports.js

@@ -1,4 +1,5 @@
-import { PRINT_SETTINGS, entryPointsMapping, BUTTON_TYPES } from '../utils/constants';
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { PRINT_SETTINGS, entryPointsMapping, BUTTON_TYPES, NEW_BUTTON_ENTRY_POINT } from '../utils/constants';
 var transformer = function transformer(file, api) {
   var j = api.jscodeshift;
   var fileSource = j(file.source);
@@ -12,7 +13,12 @@ var transformer = function transformer(file, api) {
     return fileSource.toSource(PRINT_SETTINGS);
   }
   buttonImports.forEach(function (node) {
-    var specifiers = node.node.specifiers;
+    var _node$node = node.node,
+      specifiers = _node$node.specifiers,
+      source = _node$node.source;
+    if ([].concat(_toConsumableArray(Object.values(entryPointsMapping)), [NEW_BUTTON_ENTRY_POINT, '@atlaskit/button/types']).includes(source.value)) {
+      return fileSource.toSource(PRINT_SETTINGS);
+    }
     var defaultSpecifier = specifiers === null || specifiers === void 0 ? void 0 : specifiers.find(function (specifier) {
       return specifier.type === 'ImportDefaultSpecifier';
     });

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

@@ -5,11 +5,11 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import splitImportsTransformer from './codemods/next-split-imports';
 import migrateToNewButtonVariantsTransformer from './codemods/next-migrate-to-new-button-variants';
-export default function transformer(_x, _x2) {
+export default function transformer(_x, _x2, _x3) {
   return _transformer.apply(this, arguments);
 }
 function _transformer() {
-  _transformer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(file, api) {
+  _transformer = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(file, api, options) {
     var transformers, src;
     return _regeneratorRuntime.wrap(function _callee$(_context) {
       while (1) switch (_context.prev = _context.next) {
@@ -22,7 +22,7 @@ function _transformer() {
             }
             var nextSrc = transformer(_objectSpread(_objectSpread({}, file), {}, {
               source: src
-            }), api);
+            }), api, options);
             if (nextSrc) {
               src = nextSrc;
             }

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

@@ -26,4 +26,5 @@ export var entryPointsMapping = {
   ButtonGroup: '@atlaskit/button/button-group',
   CustomThemeButton: '@atlaskit/button/custom-theme-button'
 };
-export var BUTTON_TYPES = ['Appearance', 'Spacing', 'BaseOwnProps', 'BaseProps', 'ButtonProps', 'LoadingButtonProps', 'LoadingButtonOwnProps', 'ThemeTokens', 'ThemeProps', 'InteractionState', 'CustomThemeButtonProps', 'CustomThemeButtonOwnProps'];
+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';

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

@@ -0,0 +1,54 @@
+import { NEW_BUTTON_VARIANTS } from '../utils/constants';
+var getIconAttribute = function getIconAttribute(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];
+  }
+  return null;
+};
+export var moveSizeAndLabelAttributes = function moveSizeAndLabelAttributes(element, j) {
+  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;
+    var iconJSXElementAttributes = iconElement.openingElement.attributes;
+    if (Array.isArray(iconJSXElementAttributes)) {
+      // 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') {
+        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";
+        attributes === null || attributes === void 0 || attributes.push(sizeAttribute);
+      }
+    }
+
+    // replace JSXElement with identifier {<MoreIcon />} => {MoreIcon}
+    if (iconElement.openingElement.name.type === 'JSXIdentifier') {
+      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);
+  if (variant === NEW_BUTTON_VARIANTS.icon.as && iconAttr && attributes) {
+    moveSizeAndLabelAttributes(element, j);
+
+    // rename iconBefore/iconAfter to icon
+    iconAttr.name.name = 'icon';
+  }
+
+  // self closing if it's an icon button or icon link button
+  var isSelfClosing = variant === NEW_BUTTON_VARIANTS.icon.as || variant === NEW_BUTTON_VARIANTS.linkIcon.as;
+  return j.jsxElement(j.jsxOpeningElement(j.jsxIdentifier(variant), attributes, isSelfClosing), isSelfClosing ? null : j.jsxClosingElement(j.jsxIdentifier(variant)), element.children);
+};

package/dist/types/presets/migrate-to-new-buttons/codemods/next-migrate-to-new-button-variants.d.ts

@@ -1,3 +1,3 @@
-import type { API, FileInfo } from 'jscodeshift';
-declare const transformer: (file: FileInfo, api: API) => string;
+import type { API, FileInfo, Options } from 'jscodeshift';
+declare const transformer: (file: FileInfo, api: API, options: Options) => string;
 export default transformer;

package/dist/types/presets/migrate-to-new-buttons/migrate-to-new-buttons.d.ts

@@ -1,2 +1,2 @@
-import type { API, FileInfo } from 'jscodeshift';
-export default function transformer(file: FileInfo, api: API): Promise<string>;
+import type { API, FileInfo, Options } from 'jscodeshift';
+export default function transformer(file: FileInfo, api: API, options: Options): Promise<string>;

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

@@ -12,3 +12,4 @@ export declare const entryPointsMapping: {
     [key: string]: string;
 };
 export declare const BUTTON_TYPES: string[];
+export declare const eslintDisableComment = "eslint-disable-next-line @atlaskit/design-system/no-banned-imports";

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

@@ -0,0 +1,4 @@
+import type { API, JSXElement } from 'jscodeshift';
+import { NEW_BUTTON_VARIANTS } from '../utils/constants';
+export declare const moveSizeAndLabelAttributes: (element: JSXElement, j: API['jscodeshift']) => 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/codemods/next-migrate-to-new-button-variants.d.ts

@@ -1,3 +1,3 @@
-import type { API, FileInfo } from 'jscodeshift';
-declare const transformer: (file: FileInfo, api: API) => string;
+import type { API, FileInfo, Options } from 'jscodeshift';
+declare const transformer: (file: FileInfo, api: API, options: Options) => string;
 export default transformer;

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

@@ -1,2 +1,2 @@
-import type { API, FileInfo } from 'jscodeshift';
-export default function transformer(file: FileInfo, api: API): Promise<string>;
+import type { API, FileInfo, Options } from 'jscodeshift';
+export default function transformer(file: FileInfo, api: API, options: Options): Promise<string>;

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

@@ -12,3 +12,4 @@ export declare const entryPointsMapping: {
     [key: string]: string;
 };
 export declare const BUTTON_TYPES: string[];
+export declare const eslintDisableComment = "eslint-disable-next-line @atlaskit/design-system/no-banned-imports";

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

@@ -0,0 +1,4 @@
+import type { API, JSXElement } from 'jscodeshift';
+import { NEW_BUTTON_VARIANTS } from '../utils/constants';
+export declare const moveSizeAndLabelAttributes: (element: JSXElement, j: API['jscodeshift']) => void;
+export declare const generateNewElement: (variant: (typeof NEW_BUTTON_VARIANTS)[keyof typeof NEW_BUTTON_VARIANTS]['as'], element: JSXElement, j: API['jscodeshift']) => JSXElement;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/codemod-cli",
-  "version": "0.17.0",
+  "version": "0.17.1",
   "description": "A cli for distributing codemods for atlassian-frontend components and services",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,6 +32,7 @@
     "codemod-cli": "./bin/codemod-cli.js"
   },
   "dependencies": {
+    "@atlaskit/codemod-utils": "^4.2.0",
     "@atlaskit/tokens": "^1.29.0",
     "@babel/runtime": "^7.0.0",
     "@codeshift/utils": "^0.2.4",