@atlaskit/eslint-plugin-design-system 9.5.2 → 9.6.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 9.6.0
+
+### Minor Changes
+
+- [#94356](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94356) [`8c4f5854f3da`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8c4f5854f3da) - The `icon-label` rule now supports label being defined via spreading render props in the new buttons.
+
 ## 9.5.2
 
 ### Patch Changes

package/dist/cjs/rules/icon-label/index.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _createRule = require("../utils/create-rule");
 var _jsx = require("../utils/jsx");
-var elements = ['AkButton', 'AKButton', 'Button', 'MenuItem', 'ButtonItem', 'CustomItem', 'CustomThemeButton', 'LoadingButton', 'BreadcrumbsItem'];
+var elements = ['AkButton', 'AKButton', 'Button', 'IconButton', 'MenuItem', 'ButtonItem', 'CustomItem', 'CustomThemeButton', 'LoadingButton', 'BreadcrumbsItem'];
 var elementsIconProps = ['iconBefore', 'iconAfter', 'icon'];
 var rule = (0, _createRule.createLintRule)({
   meta: {
@@ -46,15 +46,7 @@ var rule = (0, _createRule.createLintRule)({
           iconImports[defaultImportName] = true;
         }
       },
-      JSXElement: function (_JSXElement) {
-        function JSXElement(_x) {
-          return _JSXElement.apply(this, arguments);
-        }
-        JSXElement.toString = function () {
-          return _JSXElement.toString();
-        };
-        return JSXElement;
-      }(function (node) {
+      JSXElement: function JSXElement(node) {
         if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
           return;
         }
@@ -106,7 +98,19 @@ var rule = (0, _createRule.createLintRule)({
         if (iconImports[name]) {
           // We've found an icon from @atlaskit - let's get to work.
           var hasLabelProp = (0, _jsx.findProp)(node, 'label');
-          if (!hasLabelProp) {
+          var hasSpreadPropApplied = false;
+
+          // Check to see if it's inside an arrow function and the props have been spread
+          // ✅ <IconButton icon={(iconProps) => <StarIcon {...iconProps} />} label="Add to favorites" />
+          // ❌ <IconButton icon={() => <StarIcon />} label="Add to favorites" />
+          if (node.parent && (0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'ArrowFunctionExpression') && node.parent.params[0] && node.parent.params[0].type === 'Identifier') {
+            // We are using an arrow function, test if the params have been spread onto the icon component
+            var paramName = node.parent.params[0].name;
+            hasSpreadPropApplied = !!node.openingElement.attributes.find(function (attribute) {
+              return attribute.type === 'JSXSpreadAttribute' && attribute.argument.type === 'Identifier' && attribute.argument.name === paramName;
+            });
+          }
+          if (!hasLabelProp && !hasSpreadPropApplied) {
             context.report({
               node: node.openingElement,
               messageId: 'missingLabelProp'
@@ -114,7 +118,7 @@ var rule = (0, _createRule.createLintRule)({
             return;
           }
         }
-      })
+      }
     };
   }
 });

package/dist/es2019/rules/icon-label/index.js

@@ -1,7 +1,7 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { createLintRule } from '../utils/create-rule';
 import { findProp } from '../utils/jsx';
-const elements = ['AkButton', 'AKButton', 'Button', 'MenuItem', 'ButtonItem', 'CustomItem', 'CustomThemeButton', 'LoadingButton', 'BreadcrumbsItem'];
+const elements = ['AkButton', 'AKButton', 'Button', 'IconButton', 'MenuItem', 'ButtonItem', 'CustomItem', 'CustomThemeButton', 'LoadingButton', 'BreadcrumbsItem'];
 const elementsIconProps = ['iconBefore', 'iconAfter', 'icon'];
 const rule = createLintRule({
   meta: {
@@ -86,7 +86,17 @@ const rule = createLintRule({
         if (iconImports[name]) {
           // We've found an icon from @atlaskit - let's get to work.
           const hasLabelProp = findProp(node, 'label');
-          if (!hasLabelProp) {
+          let hasSpreadPropApplied = false;
+
+          // Check to see if it's inside an arrow function and the props have been spread
+          // ✅ <IconButton icon={(iconProps) => <StarIcon {...iconProps} />} label="Add to favorites" />
+          // ❌ <IconButton icon={() => <StarIcon />} label="Add to favorites" />
+          if (node.parent && isNodeOfType(node.parent, 'ArrowFunctionExpression') && node.parent.params[0] && node.parent.params[0].type === 'Identifier') {
+            // We are using an arrow function, test if the params have been spread onto the icon component
+            const paramName = node.parent.params[0].name;
+            hasSpreadPropApplied = !!node.openingElement.attributes.find(attribute => attribute.type === 'JSXSpreadAttribute' && attribute.argument.type === 'Identifier' && attribute.argument.name === paramName);
+          }
+          if (!hasLabelProp && !hasSpreadPropApplied) {
             context.report({
               node: node.openingElement,
               messageId: 'missingLabelProp'

package/dist/esm/rules/icon-label/index.js

@@ -1,7 +1,7 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { createLintRule } from '../utils/create-rule';
 import { findProp } from '../utils/jsx';
-var elements = ['AkButton', 'AKButton', 'Button', 'MenuItem', 'ButtonItem', 'CustomItem', 'CustomThemeButton', 'LoadingButton', 'BreadcrumbsItem'];
+var elements = ['AkButton', 'AKButton', 'Button', 'IconButton', 'MenuItem', 'ButtonItem', 'CustomItem', 'CustomThemeButton', 'LoadingButton', 'BreadcrumbsItem'];
 var elementsIconProps = ['iconBefore', 'iconAfter', 'icon'];
 var rule = createLintRule({
   meta: {
@@ -40,15 +40,7 @@ var rule = createLintRule({
           iconImports[defaultImportName] = true;
         }
       },
-      JSXElement: function (_JSXElement) {
-        function JSXElement(_x) {
-          return _JSXElement.apply(this, arguments);
-        }
-        JSXElement.toString = function () {
-          return _JSXElement.toString();
-        };
-        return JSXElement;
-      }(function (node) {
+      JSXElement: function JSXElement(node) {
         if (!isNodeOfType(node, 'JSXElement')) {
           return;
         }
@@ -100,7 +92,19 @@ var rule = createLintRule({
         if (iconImports[name]) {
           // We've found an icon from @atlaskit - let's get to work.
           var hasLabelProp = findProp(node, 'label');
-          if (!hasLabelProp) {
+          var hasSpreadPropApplied = false;
+
+          // Check to see if it's inside an arrow function and the props have been spread
+          // ✅ <IconButton icon={(iconProps) => <StarIcon {...iconProps} />} label="Add to favorites" />
+          // ❌ <IconButton icon={() => <StarIcon />} label="Add to favorites" />
+          if (node.parent && isNodeOfType(node.parent, 'ArrowFunctionExpression') && node.parent.params[0] && node.parent.params[0].type === 'Identifier') {
+            // We are using an arrow function, test if the params have been spread onto the icon component
+            var paramName = node.parent.params[0].name;
+            hasSpreadPropApplied = !!node.openingElement.attributes.find(function (attribute) {
+              return attribute.type === 'JSXSpreadAttribute' && attribute.argument.type === 'Identifier' && attribute.argument.name === paramName;
+            });
+          }
+          if (!hasLabelProp && !hasSpreadPropApplied) {
             context.report({
               node: node.openingElement,
               messageId: 'missingLabelProp'
@@ -108,7 +112,7 @@ var rule = createLintRule({
             return;
           }
         }
-      })
+      }
     };
   }
 });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/eslint-plugin-design-system",
   "description": "The essential plugin for use with the Atlassian Design System.",
-  "version": "9.5.2",
+  "version": "9.6.0",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "publishConfig": {