@atlaskit/codemod-cli 0.21.1 → 0.22.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/codemod-cli
 
+## 0.22.0
+
+### Minor Changes
+
+- [#91603](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91603) [`7cb9b3b277be`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7cb9b3b277be) - Update button mod to prefer render props over UNSAFE\_ APIs
+
 ## 0.21.1
 
 ### Patch Changes

package/dist/cjs/main.js

@@ -305,7 +305,7 @@ function _main() {
         case 4:
           _yield$parseArgs = _context5.sent;
           packages = _yield$parseArgs.packages;
-          _process$env$_PACKAGE = "0.21.1", _PACKAGE_VERSION_ = _process$env$_PACKAGE === void 0 ? '0.0.0-dev' : _process$env$_PACKAGE;
+          _process$env$_PACKAGE = "0.22.0", _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

@@ -58,7 +58,7 @@ var transformer = function transformer(file, api) {
     var isDefaultButtonWithAnIcon = !isLinkIconButton && !isIconButton && !isFitContainerIconButton && hasIcon;
     var isLoadingButton = element.value.openingElement.name.type === 'JSXIdentifier' && element.value.openingElement.name.name === loadingButtonImportName;
     if (isDefaultButtonWithAnIcon) {
-      (0, _generateNewButtonElement.moveSizeAndLabelAttributes)(element.value, j);
+      (0, _generateNewButtonElement.handleIconAttributes)(element.value, j);
     }
     if (isFitContainerIconButton) {
       var migratedToIconButton = (0, _migrateFitContainerIconButton.migrateFitContainerIconButton)(element, j);

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.unsupportedProps = exports.migrateFitContainerButtonToIconButtonComment = exports.migrateFitContainerButtonToDefaultButtonComment = exports.linkButtonMissingHrefComment = exports.iconPropsNoLongerSupportedComment = exports.entryPointsMapping = exports.buttonPropsNoLongerSupportedComment = 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.entryPointsMapping = exports.buttonPropsNoLongerSupportedComment = 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'
 };
@@ -23,7 +23,6 @@ var entryPointsMapping = exports.entryPointsMapping = {
 var BUTTON_TYPES = exports.BUTTON_TYPES = ['BaseOwnProps', 'BaseProps', 'ButtonProps', 'LoadingButtonProps', 'LoadingButtonOwnProps', 'ThemeTokens', 'ThemeProps', 'InteractionState', 'CustomThemeButtonProps', 'CustomThemeButtonOwnProps'];
 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,8 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.moveSizeAndLabelAttributes = exports.getIconElement = exports.getIconAttributes = exports.generateNewElement = void 0;
-var _codemodUtils = require("@atlaskit/codemod-utils");
+exports.handleIconAttributes = exports.getIconElement = exports.getIconAttributes = exports.generateNewElement = void 0;
 var _constants = require("../utils/constants");
 var getIconAttributes = exports.getIconAttributes = function getIconAttributes(attributes) {
   var iconAttr = attributes === null || attributes === void 0 ? void 0 : attributes.filter(function (attribute) {
@@ -22,51 +21,88 @@ var getIconElement = exports.getIconElement = function getIconElement(iconAttr)
   }
   return null;
 };
-var moveSizeAndLabelAttributes = exports.moveSizeAndLabelAttributes = function moveSizeAndLabelAttributes(element, j) {
+
+/**
+ * We need to do a couple of things here:
+ *
+ * 1. If an icon attribute has a label, elevate it to the root button element
+ * 2. If an icon doesn't have any other attributes, move to bounded API:
+ *      {<MoreIcon />} -> {MoreIcon}
+ * 3. If an icon has attributes other than label, move to renderProp:
+ *      {<MoreIcon primaryColor />} -> {() => <MoreIcon primaryColor />}
+ *
+ * @param element
+ * @param j
+ * @param iconRenamed
+ */
+var handleIconAttributes = exports.handleIconAttributes = function handleIconAttributes(element, j) {
   var iconRenamed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  var attributes = element.openingElement.attributes;
-  var iconAttrs = attributes && getIconAttributes(attributes);
-  iconAttrs === null || iconAttrs === void 0 || iconAttrs.forEach(function (iconAttr) {
-    var _iconAttr$value2;
-    var iconElement = getIconElement(iconAttr);
+  var buttonAttributes = element.openingElement.attributes;
+
+  // Get iconBefore and iconAfter attributes
+  var buttonIconAttributes = buttonAttributes && getIconAttributes(buttonAttributes);
+  buttonIconAttributes === null || buttonIconAttributes === void 0 || buttonIconAttributes.forEach(function (iconAttribute) {
+    var iconElement = getIconElement(iconAttribute);
     if (!iconElement) {
       return;
     }
-    var iconJSXElementAttributes = iconElement.openingElement.attributes;
-    // add inlined comment to the icon if it has any attributes other than label and size
-    if (Array.isArray(iconJSXElementAttributes)) {
-      var ifIconAttributeEitherLabelOrSize = iconJSXElementAttributes === null || iconJSXElementAttributes === void 0 ? void 0 : iconJSXElementAttributes.every(function (attribute) {
-        return attribute.type === 'JSXAttribute' && typeof attribute.name.name === 'string' && (attribute.name.name === 'size' || attribute.name.name === 'label');
-      });
-      if (!ifIconAttributeEitherLabelOrSize) {
-        (0, _codemodUtils.addCommentBefore)(j, j(iconAttr), _constants.iconPropsNoLongerSupportedComment, 'line');
-      }
+    var iconAttributes = iconElement.openingElement.attributes;
+    if (!Array.isArray(iconAttributes)) {
+      return;
+    }
+
+    // 1. Move label to root button element, only if label doesn't exist already. Button label
+    // takes precedence over icon label.
 
-      // move label and size attributes from icon to the root Button prop
-      var buttonAlreadyHasLabelProp = attributes === null || attributes === void 0 ? void 0 : attributes.find(function (attribute) {
+    var buttonAlreadyHasLabelProp = buttonAttributes === null || buttonAttributes === void 0 ? void 0 : buttonAttributes.find(function (buttonAttribute) {
+      return buttonAttribute.type === 'JSXAttribute' && buttonAttribute.name.name === 'label';
+    });
+    if (!buttonAlreadyHasLabelProp) {
+      var labelAttribute = iconAttributes.find(function (attribute) {
         return attribute.type === 'JSXAttribute' && attribute.name.name === 'label';
       });
-      if (!buttonAlreadyHasLabelProp) {
-        var labelAttribute = iconJSXElementAttributes.find(function (attribute) {
-          return attribute.type === 'JSXAttribute' && attribute.name.name === 'label';
-        });
-        if (labelAttribute && labelAttribute.type === 'JSXAttribute' && iconRenamed) {
-          attributes === null || attributes === void 0 || attributes.push(labelAttribute);
-        }
-      }
-      var sizeAttribute = iconJSXElementAttributes.find(function (attribute) {
-        var _attribute$value, _attribute$value2;
-        return attribute.type === 'JSXAttribute' && attribute.name.name === 'size' && ((_attribute$value = attribute.value) === null || _attribute$value === void 0 ? void 0 : _attribute$value.type) === 'StringLiteral' && ((_attribute$value2 = attribute.value) === null || _attribute$value2 === void 0 ? void 0 : _attribute$value2.value) !== 'medium';
-      });
-      if (sizeAttribute && sizeAttribute.type === 'JSXAttribute') {
-        sizeAttribute.name.name = iconRenamed ? 'UNSAFE_size' : "UNSAFE_".concat(iconAttr.name.name, "_size");
-        attributes === null || attributes === void 0 || attributes.push(sizeAttribute);
+      if (labelAttribute && labelAttribute.type === 'JSXAttribute' && iconRenamed) {
+        buttonAttributes === null || buttonAttributes === void 0 || buttonAttributes.unshift(labelAttribute);
       }
     }
 
-    // replace JSXElement with identifier {<MoreIcon />} => {MoreIcon}
-    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);
+    // 2. If there are any other props on icon, move to render prop
+    var attributesOtherThanLabelOrMediumSize = iconAttributes.filter(function (iconAttribute) {
+      var _iconAttribute$value, _iconAttribute$value2;
+      // Exclude size="medium"
+      if (iconAttribute.type === 'JSXAttribute' && iconAttribute.name.name === 'size' && ((_iconAttribute$value = iconAttribute.value) === null || _iconAttribute$value === void 0 ? void 0 : _iconAttribute$value.type) === 'StringLiteral' && ((_iconAttribute$value2 = iconAttribute.value) === null || _iconAttribute$value2 === void 0 ? void 0 : _iconAttribute$value2.value) === 'medium') {
+        return false;
+      }
+
+      // Exclude label
+      if (iconAttribute.type === 'JSXAttribute' && iconAttribute.name.name === 'label') {
+        return false;
+      }
+      return true;
+    });
+    if (attributesOtherThanLabelOrMediumSize.length > 0) {
+      // Move to render prop: `<MoreIcon primaryColor />` -> `(props) => <MoreIcon {...props} primaryColor />`
+
+      // Remove label and size="medium" attributes
+      j(iconElement.openingElement).find(j.JSXAttribute).filter(function (attribute) {
+        return attribute.value.name.name === 'label' || attribute.value.type === 'JSXAttribute' && attribute.value.name.name === 'size' && attribute.value.value && attribute.value.value.type === 'StringLiteral' && attribute.value.value.value === 'medium' || false;
+      }).remove();
+
+      // Add spread props
+      iconAttributes.unshift(j.jsxSpreadAttribute(j.identifier('iconProps')));
+
+      // Create new arrow function (renderProp)
+      iconAttribute.value = j.jsxExpressionContainer(j.arrowFunctionExpression.from({
+        params: [j.identifier('iconProps')],
+        body: iconElement,
+        expression: true
+      }));
+    } else {
+      var _iconAttribute$value3;
+      // Move to bounded API: {<MoreIcon />} => {MoreIcon}
+      if (iconElement.openingElement.name.type === 'JSXIdentifier' && ((_iconAttribute$value3 = iconAttribute.value) === null || _iconAttribute$value3 === void 0 ? void 0 : _iconAttribute$value3.type) === 'JSXExpressionContainer') {
+        iconAttribute.value.expression = j.identifier(iconElement.openingElement.name.name);
+      }
     }
   });
 };
@@ -75,7 +111,7 @@ var generateNewElement = exports.generateNewElement = function generateNewElemen
   var iconAttrs = attributes && getIconAttributes(attributes);
   var isIconOrLinkIcon = variant === _constants.NEW_BUTTON_VARIANTS.icon || variant === _constants.NEW_BUTTON_VARIANTS.linkIcon;
   if (isIconOrLinkIcon && iconAttrs !== null && iconAttrs !== void 0 && iconAttrs.length) {
-    moveSizeAndLabelAttributes(element, j, true);
+    handleIconAttributes(element, j, true);
 
     // rename iconBefore/iconAfter to icon
     iconAttrs[0].name.name = 'icon';

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

@@ -1,7 +1,7 @@
 import { addCommentBefore } from '@atlaskit/codemod-utils';
 import { getDefaultImportSpecifierName } from '@hypermod/utils';
 import { PRINT_SETTINGS, NEW_BUTTON_VARIANTS, entryPointsMapping, NEW_BUTTON_ENTRY_POINT, linkButtonMissingHrefComment, buttonPropsNoLongerSupportedComment, unsupportedProps } from '../utils/constants';
-import { generateNewElement, moveSizeAndLabelAttributes } from '../utils/generate-new-button-element';
+import { generateNewElement, handleIconAttributes } 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';
@@ -44,7 +44,7 @@ const transformer = (file, api) => {
     const isDefaultButtonWithAnIcon = !isLinkIconButton && !isIconButton && !isFitContainerIconButton && hasIcon;
     const isLoadingButton = element.value.openingElement.name.type === 'JSXIdentifier' && element.value.openingElement.name.name === loadingButtonImportName;
     if (isDefaultButtonWithAnIcon) {
-      moveSizeAndLabelAttributes(element.value, j);
+      handleIconAttributes(element.value, j);
     }
     if (isFitContainerIconButton) {
       const migratedToIconButton = migrateFitContainerIconButton(element, j);

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

@@ -17,7 +17,6 @@ export const entryPointsMapping = {
 export const BUTTON_TYPES = ['BaseOwnProps', 'BaseProps', 'ButtonProps', 'LoadingButtonProps', 'LoadingButtonOwnProps', 'ThemeTokens', 'ThemeProps', 'InteractionState', 'CustomThemeButtonProps', 'CustomThemeButtonOwnProps'];
 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,5 +1,4 @@
-import { addCommentBefore } from '@atlaskit/codemod-utils';
-import { NEW_BUTTON_VARIANTS, iconPropsNoLongerSupportedComment } from '../utils/constants';
+import { NEW_BUTTON_VARIANTS } 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 (iconAttr !== null && iconAttr !== void 0 && iconAttr.length) {
@@ -14,46 +13,83 @@ export const getIconElement = iconAttr => {
   }
   return null;
 };
-export const moveSizeAndLabelAttributes = (element, j, iconRenamed = false) => {
+
+/**
+ * We need to do a couple of things here:
+ *
+ * 1. If an icon attribute has a label, elevate it to the root button element
+ * 2. If an icon doesn't have any other attributes, move to bounded API:
+ *      {<MoreIcon />} -> {MoreIcon}
+ * 3. If an icon has attributes other than label, move to renderProp:
+ *      {<MoreIcon primaryColor />} -> {() => <MoreIcon primaryColor />}
+ *
+ * @param element
+ * @param j
+ * @param iconRenamed
+ */
+export const handleIconAttributes = (element, j, iconRenamed = false) => {
   const {
-    attributes
+    attributes: buttonAttributes
   } = element.openingElement;
-  const iconAttrs = attributes && getIconAttributes(attributes);
-  iconAttrs === null || iconAttrs === void 0 ? void 0 : iconAttrs.forEach(iconAttr => {
-    var _iconAttr$value2;
-    const iconElement = getIconElement(iconAttr);
+
+  // Get iconBefore and iconAfter attributes
+  const buttonIconAttributes = buttonAttributes && getIconAttributes(buttonAttributes);
+  buttonIconAttributes === null || buttonIconAttributes === void 0 ? void 0 : buttonIconAttributes.forEach(iconAttribute => {
+    let iconElement = getIconElement(iconAttribute);
     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)) {
-      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');
+    const iconAttributes = iconElement.openingElement.attributes;
+    if (!Array.isArray(iconAttributes)) {
+      return;
+    }
+
+    // 1. Move label to root button element, only if label doesn't exist already. Button label
+    // takes precedence over icon label.
+
+    const buttonAlreadyHasLabelProp = buttonAttributes === null || buttonAttributes === void 0 ? void 0 : buttonAttributes.find(buttonAttribute => buttonAttribute.type === 'JSXAttribute' && buttonAttribute.name.name === 'label');
+    if (!buttonAlreadyHasLabelProp) {
+      const labelAttribute = iconAttributes.find(attribute => attribute.type === 'JSXAttribute' && attribute.name.name === 'label');
+      if (labelAttribute && labelAttribute.type === 'JSXAttribute' && iconRenamed) {
+        buttonAttributes === null || buttonAttributes === void 0 ? void 0 : buttonAttributes.unshift(labelAttribute);
       }
+    }
 
-      // move label and size attributes from icon to the root Button prop
-      const buttonAlreadyHasLabelProp = attributes === null || attributes === void 0 ? void 0 : attributes.find(attribute => attribute.type === 'JSXAttribute' && attribute.name.name === 'label');
-      if (!buttonAlreadyHasLabelProp) {
-        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);
-        }
+    // 2. If there are any other props on icon, move to render prop
+    const attributesOtherThanLabelOrMediumSize = iconAttributes.filter(iconAttribute => {
+      var _iconAttribute$value, _iconAttribute$value2;
+      // Exclude size="medium"
+      if (iconAttribute.type === 'JSXAttribute' && iconAttribute.name.name === 'size' && ((_iconAttribute$value = iconAttribute.value) === null || _iconAttribute$value === void 0 ? void 0 : _iconAttribute$value.type) === 'StringLiteral' && ((_iconAttribute$value2 = iconAttribute.value) === null || _iconAttribute$value2 === void 0 ? void 0 : _iconAttribute$value2.value) === 'medium') {
+        return false;
       }
-      const sizeAttribute = iconJSXElementAttributes.find(attribute => {
-        var _attribute$value, _attribute$value2;
-        return attribute.type === 'JSXAttribute' && attribute.name.name === 'size' && ((_attribute$value = attribute.value) === null || _attribute$value === void 0 ? void 0 : _attribute$value.type) === 'StringLiteral' && ((_attribute$value2 = attribute.value) === null || _attribute$value2 === void 0 ? void 0 : _attribute$value2.value) !== 'medium';
-      });
-      if (sizeAttribute && sizeAttribute.type === 'JSXAttribute') {
-        sizeAttribute.name.name = iconRenamed ? 'UNSAFE_size' : `UNSAFE_${iconAttr.name.name}_size`;
-        attributes === null || attributes === void 0 ? void 0 : attributes.push(sizeAttribute);
+
+      // Exclude label
+      if (iconAttribute.type === 'JSXAttribute' && iconAttribute.name.name === 'label') {
+        return false;
       }
-    }
+      return true;
+    });
+    if (attributesOtherThanLabelOrMediumSize.length > 0) {
+      // Move to render prop: `<MoreIcon primaryColor />` -> `(props) => <MoreIcon {...props} primaryColor />`
 
-    // replace JSXElement with identifier {<MoreIcon />} => {MoreIcon}
-    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);
+      // Remove label and size="medium" attributes
+      j(iconElement.openingElement).find(j.JSXAttribute).filter(attribute => attribute.value.name.name === 'label' || attribute.value.type === 'JSXAttribute' && attribute.value.name.name === 'size' && attribute.value.value && attribute.value.value.type === 'StringLiteral' && attribute.value.value.value === 'medium' || false).remove();
+
+      // Add spread props
+      iconAttributes.unshift(j.jsxSpreadAttribute(j.identifier('iconProps')));
+
+      // Create new arrow function (renderProp)
+      iconAttribute.value = j.jsxExpressionContainer(j.arrowFunctionExpression.from({
+        params: [j.identifier('iconProps')],
+        body: iconElement,
+        expression: true
+      }));
+    } else {
+      var _iconAttribute$value3;
+      // Move to bounded API: {<MoreIcon />} => {MoreIcon}
+      if (iconElement.openingElement.name.type === 'JSXIdentifier' && ((_iconAttribute$value3 = iconAttribute.value) === null || _iconAttribute$value3 === void 0 ? void 0 : _iconAttribute$value3.type) === 'JSXExpressionContainer') {
+        iconAttribute.value.expression = j.identifier(iconElement.openingElement.name.name);
+      }
     }
   });
 };
@@ -64,7 +100,7 @@ export const generateNewElement = (variant, element, j) => {
   const iconAttrs = attributes && getIconAttributes(attributes);
   const isIconOrLinkIcon = variant === NEW_BUTTON_VARIANTS.icon || variant === NEW_BUTTON_VARIANTS.linkIcon;
   if (isIconOrLinkIcon && iconAttrs !== null && iconAttrs !== void 0 && iconAttrs.length) {
-    moveSizeAndLabelAttributes(element, j, true);
+    handleIconAttributes(element, j, true);
 
     // rename iconBefore/iconAfter to icon
     iconAttrs[0].name.name = 'icon';

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.21.1", _PACKAGE_VERSION_ = _process$env$_PACKAGE === void 0 ? '0.0.0-dev' : _process$env$_PACKAGE;
+          _process$env$_PACKAGE = "0.22.0", _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,7 +1,7 @@
 import { addCommentBefore } from '@atlaskit/codemod-utils';
 import { getDefaultImportSpecifierName } from '@hypermod/utils';
 import { PRINT_SETTINGS, NEW_BUTTON_VARIANTS, entryPointsMapping, NEW_BUTTON_ENTRY_POINT, linkButtonMissingHrefComment, buttonPropsNoLongerSupportedComment, unsupportedProps } from '../utils/constants';
-import { generateNewElement, moveSizeAndLabelAttributes } from '../utils/generate-new-button-element';
+import { generateNewElement, handleIconAttributes } 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';
@@ -52,7 +52,7 @@ var transformer = function transformer(file, api) {
     var isDefaultButtonWithAnIcon = !isLinkIconButton && !isIconButton && !isFitContainerIconButton && hasIcon;
     var isLoadingButton = element.value.openingElement.name.type === 'JSXIdentifier' && element.value.openingElement.name.name === loadingButtonImportName;
     if (isDefaultButtonWithAnIcon) {
-      moveSizeAndLabelAttributes(element.value, j);
+      handleIconAttributes(element.value, j);
     }
     if (isFitContainerIconButton) {
       var migratedToIconButton = migrateFitContainerIconButton(element, j);

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

@@ -17,7 +17,6 @@ export var entryPointsMapping = {
 export var BUTTON_TYPES = ['BaseOwnProps', 'BaseProps', 'ButtonProps', 'LoadingButtonProps', 'LoadingButtonOwnProps', 'ThemeTokens', 'ThemeProps', 'InteractionState', 'CustomThemeButtonProps', 'CustomThemeButtonOwnProps'];
 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,5 +1,4 @@
-import { addCommentBefore } from '@atlaskit/codemod-utils';
-import { NEW_BUTTON_VARIANTS, iconPropsNoLongerSupportedComment } from '../utils/constants';
+import { NEW_BUTTON_VARIANTS } 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');
@@ -16,51 +15,88 @@ export var getIconElement = function getIconElement(iconAttr) {
   }
   return null;
 };
-export var moveSizeAndLabelAttributes = function moveSizeAndLabelAttributes(element, j) {
+
+/**
+ * We need to do a couple of things here:
+ *
+ * 1. If an icon attribute has a label, elevate it to the root button element
+ * 2. If an icon doesn't have any other attributes, move to bounded API:
+ *      {<MoreIcon />} -> {MoreIcon}
+ * 3. If an icon has attributes other than label, move to renderProp:
+ *      {<MoreIcon primaryColor />} -> {() => <MoreIcon primaryColor />}
+ *
+ * @param element
+ * @param j
+ * @param iconRenamed
+ */
+export var handleIconAttributes = function handleIconAttributes(element, j) {
   var iconRenamed = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-  var attributes = element.openingElement.attributes;
-  var iconAttrs = attributes && getIconAttributes(attributes);
-  iconAttrs === null || iconAttrs === void 0 || iconAttrs.forEach(function (iconAttr) {
-    var _iconAttr$value2;
-    var iconElement = getIconElement(iconAttr);
+  var buttonAttributes = element.openingElement.attributes;
+
+  // Get iconBefore and iconAfter attributes
+  var buttonIconAttributes = buttonAttributes && getIconAttributes(buttonAttributes);
+  buttonIconAttributes === null || buttonIconAttributes === void 0 || buttonIconAttributes.forEach(function (iconAttribute) {
+    var iconElement = getIconElement(iconAttribute);
     if (!iconElement) {
       return;
     }
-    var iconJSXElementAttributes = iconElement.openingElement.attributes;
-    // add inlined comment to the icon if it has any attributes other than label and size
-    if (Array.isArray(iconJSXElementAttributes)) {
-      var ifIconAttributeEitherLabelOrSize = iconJSXElementAttributes === null || iconJSXElementAttributes === void 0 ? void 0 : iconJSXElementAttributes.every(function (attribute) {
-        return attribute.type === 'JSXAttribute' && typeof attribute.name.name === 'string' && (attribute.name.name === 'size' || attribute.name.name === 'label');
-      });
-      if (!ifIconAttributeEitherLabelOrSize) {
-        addCommentBefore(j, j(iconAttr), iconPropsNoLongerSupportedComment, 'line');
-      }
+    var iconAttributes = iconElement.openingElement.attributes;
+    if (!Array.isArray(iconAttributes)) {
+      return;
+    }
+
+    // 1. Move label to root button element, only if label doesn't exist already. Button label
+    // takes precedence over icon label.
 
-      // move label and size attributes from icon to the root Button prop
-      var buttonAlreadyHasLabelProp = attributes === null || attributes === void 0 ? void 0 : attributes.find(function (attribute) {
+    var buttonAlreadyHasLabelProp = buttonAttributes === null || buttonAttributes === void 0 ? void 0 : buttonAttributes.find(function (buttonAttribute) {
+      return buttonAttribute.type === 'JSXAttribute' && buttonAttribute.name.name === 'label';
+    });
+    if (!buttonAlreadyHasLabelProp) {
+      var labelAttribute = iconAttributes.find(function (attribute) {
         return attribute.type === 'JSXAttribute' && attribute.name.name === 'label';
       });
-      if (!buttonAlreadyHasLabelProp) {
-        var labelAttribute = iconJSXElementAttributes.find(function (attribute) {
-          return attribute.type === 'JSXAttribute' && attribute.name.name === 'label';
-        });
-        if (labelAttribute && labelAttribute.type === 'JSXAttribute' && iconRenamed) {
-          attributes === null || attributes === void 0 || attributes.push(labelAttribute);
-        }
-      }
-      var sizeAttribute = iconJSXElementAttributes.find(function (attribute) {
-        var _attribute$value, _attribute$value2;
-        return attribute.type === 'JSXAttribute' && attribute.name.name === 'size' && ((_attribute$value = attribute.value) === null || _attribute$value === void 0 ? void 0 : _attribute$value.type) === 'StringLiteral' && ((_attribute$value2 = attribute.value) === null || _attribute$value2 === void 0 ? void 0 : _attribute$value2.value) !== 'medium';
-      });
-      if (sizeAttribute && sizeAttribute.type === 'JSXAttribute') {
-        sizeAttribute.name.name = iconRenamed ? 'UNSAFE_size' : "UNSAFE_".concat(iconAttr.name.name, "_size");
-        attributes === null || attributes === void 0 || attributes.push(sizeAttribute);
+      if (labelAttribute && labelAttribute.type === 'JSXAttribute' && iconRenamed) {
+        buttonAttributes === null || buttonAttributes === void 0 || buttonAttributes.unshift(labelAttribute);
       }
     }
 
-    // replace JSXElement with identifier {<MoreIcon />} => {MoreIcon}
-    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);
+    // 2. If there are any other props on icon, move to render prop
+    var attributesOtherThanLabelOrMediumSize = iconAttributes.filter(function (iconAttribute) {
+      var _iconAttribute$value, _iconAttribute$value2;
+      // Exclude size="medium"
+      if (iconAttribute.type === 'JSXAttribute' && iconAttribute.name.name === 'size' && ((_iconAttribute$value = iconAttribute.value) === null || _iconAttribute$value === void 0 ? void 0 : _iconAttribute$value.type) === 'StringLiteral' && ((_iconAttribute$value2 = iconAttribute.value) === null || _iconAttribute$value2 === void 0 ? void 0 : _iconAttribute$value2.value) === 'medium') {
+        return false;
+      }
+
+      // Exclude label
+      if (iconAttribute.type === 'JSXAttribute' && iconAttribute.name.name === 'label') {
+        return false;
+      }
+      return true;
+    });
+    if (attributesOtherThanLabelOrMediumSize.length > 0) {
+      // Move to render prop: `<MoreIcon primaryColor />` -> `(props) => <MoreIcon {...props} primaryColor />`
+
+      // Remove label and size="medium" attributes
+      j(iconElement.openingElement).find(j.JSXAttribute).filter(function (attribute) {
+        return attribute.value.name.name === 'label' || attribute.value.type === 'JSXAttribute' && attribute.value.name.name === 'size' && attribute.value.value && attribute.value.value.type === 'StringLiteral' && attribute.value.value.value === 'medium' || false;
+      }).remove();
+
+      // Add spread props
+      iconAttributes.unshift(j.jsxSpreadAttribute(j.identifier('iconProps')));
+
+      // Create new arrow function (renderProp)
+      iconAttribute.value = j.jsxExpressionContainer(j.arrowFunctionExpression.from({
+        params: [j.identifier('iconProps')],
+        body: iconElement,
+        expression: true
+      }));
+    } else {
+      var _iconAttribute$value3;
+      // Move to bounded API: {<MoreIcon />} => {MoreIcon}
+      if (iconElement.openingElement.name.type === 'JSXIdentifier' && ((_iconAttribute$value3 = iconAttribute.value) === null || _iconAttribute$value3 === void 0 ? void 0 : _iconAttribute$value3.type) === 'JSXExpressionContainer') {
+        iconAttribute.value.expression = j.identifier(iconElement.openingElement.name.name);
+      }
     }
   });
 };
@@ -69,7 +105,7 @@ export var generateNewElement = function generateNewElement(variant, element, j)
   var iconAttrs = attributes && getIconAttributes(attributes);
   var isIconOrLinkIcon = variant === NEW_BUTTON_VARIANTS.icon || variant === NEW_BUTTON_VARIANTS.linkIcon;
   if (isIconOrLinkIcon && iconAttrs !== null && iconAttrs !== void 0 && iconAttrs.length) {
-    moveSizeAndLabelAttributes(element, j, true);
+    handleIconAttributes(element, j, true);
 
     // rename iconBefore/iconAfter to icon
     iconAttrs[0].name.name = 'icon';

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

@@ -11,7 +11,6 @@ export declare const entryPointsMapping: {
 export declare const BUTTON_TYPES: string[];
 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

@@ -2,5 +2,18 @@ import { 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;
+/**
+ * We need to do a couple of things here:
+ *
+ * 1. If an icon attribute has a label, elevate it to the root button element
+ * 2. If an icon doesn't have any other attributes, move to bounded API:
+ *      {<MoreIcon />} -> {MoreIcon}
+ * 3. If an icon has attributes other than label, move to renderProp:
+ *      {<MoreIcon primaryColor />} -> {() => <MoreIcon primaryColor />}
+ *
+ * @param element
+ * @param j
+ * @param iconRenamed
+ */
+export declare const handleIconAttributes: (element: JSXElement, j: API['jscodeshift'], iconRenamed?: boolean) => void;
 export declare const generateNewElement: (variant: (typeof NEW_BUTTON_VARIANTS)[keyof typeof NEW_BUTTON_VARIANTS], element: JSXElement, j: API['jscodeshift']) => JSXElement;

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

@@ -11,7 +11,6 @@ export declare const entryPointsMapping: {
 export declare const BUTTON_TYPES: string[];
 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

@@ -2,5 +2,18 @@ import { 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;
+/**
+ * We need to do a couple of things here:
+ *
+ * 1. If an icon attribute has a label, elevate it to the root button element
+ * 2. If an icon doesn't have any other attributes, move to bounded API:
+ *      {<MoreIcon />} -> {MoreIcon}
+ * 3. If an icon has attributes other than label, move to renderProp:
+ *      {<MoreIcon primaryColor />} -> {() => <MoreIcon primaryColor />}
+ *
+ * @param element
+ * @param j
+ * @param iconRenamed
+ */
+export declare const handleIconAttributes: (element: JSXElement, j: API['jscodeshift'], iconRenamed?: boolean) => void;
 export declare const generateNewElement: (variant: (typeof NEW_BUTTON_VARIANTS)[keyof typeof NEW_BUTTON_VARIANTS], element: JSXElement, j: API['jscodeshift']) => JSXElement;

package/package.json

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