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

package/README.md

@@ -78,6 +78,7 @@ module.exports = {
 | <a href="./src/rules/use-heading/README.md">use-heading</a>                                                                 | Encourage the usage of heading components.                                                                                                                                                                                                                                                                          |             | Yes     | Yes         |
 | <a href="./src/rules/use-heading-level-in-spotlight-card/README.md">use-heading-level-in-spotlight-card</a>                 | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context.                                                                                                                              | Yes         | Yes     |             |
 | <a href="./src/rules/use-href-in-link-item/README.md">use-href-in-link-item</a>                                             | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes         | Yes     | Yes         |
+| <a href="./src/rules/use-popup-label/README.md">use-popup-label</a>                                                         | Encourages to provide accessible name for Atlassian Design System Popup component.                                                                                                                                                                                                                                  | Yes         |         | Yes         |
 | <a href="./src/rules/use-primitives/README.md">use-primitives</a>                                                           | Encourage the usage of primitives components.                                                                                                                                                                                                                                                                       |             | Yes     | Yes         |
 | <a href="./src/rules/use-primitives-text/README.md">use-primitives-text</a>                                                 | Encourage the usage of text components.                                                                                                                                                                                                                                                                             |             | Yes     | Yes         |
 | <a href="./src/rules/use-tokens-space/README.md">use-tokens-space</a>                                                       | Enforces usage of space design tokens rather than hard-coded values.                                                                                                                                                                                                                                                |             | Yes     | Yes         |

package/constellation/index/usage.mdx

@@ -40,6 +40,7 @@ This plugin contains rules that should be used when working with the [Atlassian
 | <a href="use-heading/usage">use-heading</a>                                                                 | Encourage the usage of heading components.                                                                                                                                                                                                                                                                          |             | Yes     | Yes         |
 | <a href="use-heading-level-in-spotlight-card/usage">use-heading-level-in-spotlight-card</a>                 | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context.                                                                                                                              | Yes         | Yes     |             |
 | <a href="use-href-in-link-item/usage">use-href-in-link-item</a>                                             | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes         | Yes     | Yes         |
+| <a href="use-popup-label/usage">use-popup-label</a>                                                         | Encourages to provide accessible name for Atlassian Design System Popup component.                                                                                                                                                                                                                                  | Yes         |         | Yes         |
 | <a href="use-primitives/usage">use-primitives</a>                                                           | Encourage the usage of primitives components.                                                                                                                                                                                                                                                                       |             | Yes     | Yes         |
 | <a href="use-primitives-text/usage">use-primitives-text</a>                                                 | Encourage the usage of text components.                                                                                                                                                                                                                                                                             |             | Yes     | Yes         |
 | <a href="use-tokens-space/usage">use-tokens-space</a>                                                       | Enforces usage of space design tokens rather than hard-coded values.                                                                                                                                                                                                                                                |             | Yes     | Yes         |

package/constellation/use-popup-label/usage.mdx

@@ -0,0 +1,53 @@
+# use-popup-label
+
+Popup should have an accessible name or a reference to it when `role="dialog"`, so that upon opening, users of assistive technologies could have contextual information of interaction with current element.
+
+## Examples
+
+This rule will indicate user with warning to strongly recommend usage of either `label` or `titleId` prop.
+
+### Incorrect
+
+```tsx
+<Popup role="dialog">
+ ^^^^^^ Missing either `label` or `titleId` prop.
+  Popup content
+</Popup>
+
+<Popup role="dialog" label>
+                     ^^^^^ `label` prop is missing value.
+  Popup content
+</Popup>
+
+<Popup role="dialog" label="">
+                     ^^^^^ `label` prop is missing accessible name value.
+  Popup content
+</Popup>
+
+<Popup role="dialog" titleId>
+                     ^^^^^^^ `titleId` prop is missing reference value.
+  <h1 id="popup-title">Popup content title</hi>
+</Popup>
+
+<Popup role="dialog" titleId="">
+                     ^^^^^^^ `titleId` prop is missing reference value.
+  <h1 id="popup-title">Popup content title</hi>
+</Popup>
+
+<Popup role="dialog" titleId="popup-title" label="">
+                     ^^^^^^^               ^^^^^ Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.
+  <h1 id="popup-title">Popup content title</hi>
+</Popup>
+```
+
+### Correct
+
+```tsx
+<Popup role="dialog" label="Popup content title">
+  Popup content
+</Popup>
+
+<Popup role="dialog" titleId="popup-title">
+  <h1 id="popup-title">Popup content title</hi>
+</Popup>
+```

package/dist/cjs/presets/all.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::1ab11547db880eba1206f334a9b2150f>>
+ * @codegen <<SignedSource::5a5b0ed8cf86631274d7d30df4199e5d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -41,6 +41,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/use-heading': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
+    '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',
     '@atlaskit/design-system/use-tokens-space': 'error',

package/dist/cjs/presets/recommended.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::05b4fe8f97edc4f7e46ded52b4917037>>
+ * @codegen <<SignedSource::af55c21605e3b8ee7836cb8950a9f713>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -32,6 +32,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
+    '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }
 };

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/cjs/rules/index.codegen.js

@@ -34,6 +34,7 @@ var _useDrawerLabel = _interopRequireDefault(require("./use-drawer-label"));
 var _useHeading = _interopRequireDefault(require("./use-heading"));
 var _useHeadingLevelInSpotlightCard = _interopRequireDefault(require("./use-heading-level-in-spotlight-card"));
 var _useHrefInLinkItem = _interopRequireDefault(require("./use-href-in-link-item"));
+var _usePopupLabel = _interopRequireDefault(require("./use-popup-label"));
 var _usePrimitives = _interopRequireDefault(require("./use-primitives"));
 var _usePrimitivesText = _interopRequireDefault(require("./use-primitives-text"));
 var _useTokensSpace = _interopRequireDefault(require("./use-tokens-space"));
@@ -41,7 +42,7 @@ var _useTokensTypography = _interopRequireDefault(require("./use-tokens-typograp
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::293575f7bd0150862f792e3fffc286c4>>
+ * @codegen <<SignedSource::5e5b4678175cdf8209b7e2443bc4abb4>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -74,6 +75,7 @@ var _default = exports.default = {
   'use-heading': _useHeading.default,
   'use-heading-level-in-spotlight-card': _useHeadingLevelInSpotlightCard.default,
   'use-href-in-link-item': _useHrefInLinkItem.default,
+  'use-popup-label': _usePopupLabel.default,
   'use-primitives': _usePrimitives.default,
   'use-primitives-text': _usePrimitivesText.default,
   'use-tokens-space': _useTokensSpace.default,

package/dist/cjs/rules/use-popup-label/index.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _createRule = require("../utils/create-rule");
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+var elementsAccessibleNameProps = ['label', 'titleId'];
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'use-popup-label',
+    type: 'suggestion',
+    docs: {
+      description: 'Encourages to provide accessible name for Atlassian Design System Popup component.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      missingLabelProp: 'Missing accessible name. If there is no visible content to associate use `label` prop, otherwise pass id of element to `titleId` prop to be associated as label.',
+      labelPropShouldHaveContents: 'Define string that labels the interactive element.',
+      titleIdShouldHaveValue: '`titleId` should reference the id of element that define accessible name.',
+      noBothPropsUsage: 'Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.'
+    },
+    hasSuggestions: true
+  },
+  create: function create(context) {
+    var contextLocalIdentifier = [];
+    return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        if (node.source.value === '@atlaskit/popup') {
+          if (node.specifiers.length) {
+            var defaultImport = node.specifiers.filter(function (spec) {
+              return spec.type === 'ImportDefaultSpecifier';
+            });
+            if (defaultImport.length) {
+              var local = defaultImport[0].local;
+              contextLocalIdentifier.push(local.name);
+            }
+          }
+        }
+      },
+      JSXElement: function JSXElement(node) {
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
+          return;
+        }
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        var name = node.openingElement.name.name;
+        if (contextLocalIdentifier.includes(name)) {
+          var componentRoleDialogProp = node.openingElement.attributes.find(function (attr) {
+            return (0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXAttribute') && (0, _eslintCodemodUtils.isNodeOfType)(attr.name, 'JSXIdentifier') && attr.value && (0, _eslintCodemodUtils.isNodeOfType)(attr.value, 'Literal') && attr.name.name === 'role' && attr.value.value === 'dialog';
+          });
+          var componentLabelProps = node.openingElement.attributes.filter(function (attr) {
+            return (0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXAttribute') && (0, _eslintCodemodUtils.isNodeOfType)(attr.name, 'JSXIdentifier') && elementsAccessibleNameProps.includes(attr.name.name);
+          });
+          if (componentLabelProps.length === 1) {
+            var prop = componentLabelProps[0];
+            if ('value' in prop && prop.value) {
+              if ((0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'Literal') && !prop.value.value || (0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'JSXExpressionContainer') && !prop.value.expression) {
+                context.report({
+                  node: prop,
+                  messageId: prop.name.name === 'label' ? 'labelPropShouldHaveContents' : 'titleIdShouldHaveValue'
+                });
+              }
+            }
+          } else if (componentLabelProps.length > 1) {
+            context.report({
+              node: node.openingElement,
+              messageId: 'noBothPropsUsage'
+            });
+          } else {
+            if (componentRoleDialogProp) {
+              context.report({
+                node: node.openingElement,
+                messageId: 'missingLabelProp'
+              });
+            } else {
+              return;
+            }
+          }
+        }
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

package/dist/es2019/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::1ab11547db880eba1206f334a9b2150f>>
+ * @codegen <<SignedSource::5a5b0ed8cf86631274d7d30df4199e5d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -35,6 +35,7 @@ export default {
     '@atlaskit/design-system/use-heading': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
+    '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',
     '@atlaskit/design-system/use-tokens-space': 'error',

package/dist/es2019/presets/recommended.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::05b4fe8f97edc4f7e46ded52b4917037>>
+ * @codegen <<SignedSource::af55c21605e3b8ee7836cb8950a9f713>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -26,6 +26,7 @@ export default {
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
+    '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }
 };

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/es2019/rules/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::293575f7bd0150862f792e3fffc286c4>>
+ * @codegen <<SignedSource::5e5b4678175cdf8209b7e2443bc4abb4>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -32,6 +32,7 @@ import useDrawerLabel from './use-drawer-label';
 import useHeading from './use-heading';
 import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-card';
 import useHrefInLinkItem from './use-href-in-link-item';
+import usePopupLabel from './use-popup-label';
 import usePrimitives from './use-primitives';
 import usePrimitivesText from './use-primitives-text';
 import useTokensSpace from './use-tokens-space';
@@ -67,6 +68,7 @@ export default {
   'use-heading': useHeading,
   'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,
   'use-href-in-link-item': useHrefInLinkItem,
+  'use-popup-label': usePopupLabel,
   'use-primitives': usePrimitives,
   'use-primitives-text': usePrimitivesText,
   'use-tokens-space': useTokensSpace,

package/dist/es2019/rules/use-popup-label/index.js

@@ -0,0 +1,80 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+const elementsAccessibleNameProps = ['label', 'titleId'];
+const rule = createLintRule({
+  meta: {
+    name: 'use-popup-label',
+    type: 'suggestion',
+    docs: {
+      description: 'Encourages to provide accessible name for Atlassian Design System Popup component.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      missingLabelProp: 'Missing accessible name. If there is no visible content to associate use `label` prop, otherwise pass id of element to `titleId` prop to be associated as label.',
+      labelPropShouldHaveContents: 'Define string that labels the interactive element.',
+      titleIdShouldHaveValue: '`titleId` should reference the id of element that define accessible name.',
+      noBothPropsUsage: 'Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.'
+    },
+    hasSuggestions: true
+  },
+  create(context) {
+    const contextLocalIdentifier = [];
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value === '@atlaskit/popup') {
+          if (node.specifiers.length) {
+            const defaultImport = node.specifiers.filter(spec => spec.type === 'ImportDefaultSpecifier');
+            if (defaultImport.length) {
+              const {
+                local
+              } = defaultImport[0];
+              contextLocalIdentifier.push(local.name);
+            }
+          }
+        }
+      },
+      JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        const name = node.openingElement.name.name;
+        if (contextLocalIdentifier.includes(name)) {
+          const componentRoleDialogProp = node.openingElement.attributes.find(attr => isNodeOfType(attr, 'JSXAttribute') && isNodeOfType(attr.name, 'JSXIdentifier') && attr.value && isNodeOfType(attr.value, 'Literal') && attr.name.name === 'role' && attr.value.value === 'dialog');
+          const componentLabelProps = node.openingElement.attributes.filter(attr => isNodeOfType(attr, 'JSXAttribute') && isNodeOfType(attr.name, 'JSXIdentifier') && elementsAccessibleNameProps.includes(attr.name.name));
+          if (componentLabelProps.length === 1) {
+            const prop = componentLabelProps[0];
+            if ('value' in prop && prop.value) {
+              if (isNodeOfType(prop.value, 'Literal') && !prop.value.value || isNodeOfType(prop.value, 'JSXExpressionContainer') && !prop.value.expression) {
+                context.report({
+                  node: prop,
+                  messageId: prop.name.name === 'label' ? 'labelPropShouldHaveContents' : 'titleIdShouldHaveValue'
+                });
+              }
+            }
+          } else if (componentLabelProps.length > 1) {
+            context.report({
+              node: node.openingElement,
+              messageId: 'noBothPropsUsage'
+            });
+          } else {
+            if (componentRoleDialogProp) {
+              context.report({
+                node: node.openingElement,
+                messageId: 'missingLabelProp'
+              });
+            } else {
+              return;
+            }
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/esm/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::1ab11547db880eba1206f334a9b2150f>>
+ * @codegen <<SignedSource::5a5b0ed8cf86631274d7d30df4199e5d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -35,6 +35,7 @@ export default {
     '@atlaskit/design-system/use-heading': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
+    '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',
     '@atlaskit/design-system/use-primitives-text': 'warn',
     '@atlaskit/design-system/use-tokens-space': 'error',

package/dist/esm/presets/recommended.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::05b4fe8f97edc4f7e46ded52b4917037>>
+ * @codegen <<SignedSource::af55c21605e3b8ee7836cb8950a9f713>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -26,6 +26,7 @@ export default {
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',
+    '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-visually-hidden': 'error'
   }
 };

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/dist/esm/rules/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::293575f7bd0150862f792e3fffc286c4>>
+ * @codegen <<SignedSource::5e5b4678175cdf8209b7e2443bc4abb4>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -32,6 +32,7 @@ import useDrawerLabel from './use-drawer-label';
 import useHeading from './use-heading';
 import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-card';
 import useHrefInLinkItem from './use-href-in-link-item';
+import usePopupLabel from './use-popup-label';
 import usePrimitives from './use-primitives';
 import usePrimitivesText from './use-primitives-text';
 import useTokensSpace from './use-tokens-space';
@@ -67,6 +68,7 @@ export default {
   'use-heading': useHeading,
   'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,
   'use-href-in-link-item': useHrefInLinkItem,
+  'use-popup-label': usePopupLabel,
   'use-primitives': usePrimitives,
   'use-primitives-text': usePrimitivesText,
   'use-tokens-space': useTokensSpace,