@atlaskit/eslint-plugin-design-system 13.0.3 → 13.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 13.1.0
+
+### Minor Changes
+
+- [#127961](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/127961)
+  [`900f91f38c047`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/900f91f38c047) -
+  Add rule for modal dialog to ensure a close button is used.
+
+## 13.0.4
+
+### Patch Changes
+
+- [#128626](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128626)
+  [`142648610a166`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/142648610a166) -
+  Fixes the `consistent-css-prop-usage` rule to allow `xcss` pass-through values to the `xcss` prop.
+
 ## 13.0.3
 
 ### Patch Changes

package/README.md

@@ -88,6 +88,7 @@ module.exports = {
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-latest-xcss-syntax/README.md">use-latest-xcss-syntax</a>                                           | Enforces usage of space design tokens rather than hard-coded values in xcss.                                                                                                                                                                                                                                        | Yes         | Yes     |             |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-latest-xcss-syntax-typography/README.md">use-latest-xcss-syntax-typography</a>                     | Prohibits use of unsafe styling properties in xcss. Please use Text/Heading primitives instead.                                                                                                                                                                                                                     | Yes         | Yes     |             |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-menu-section-title/README.md">use-menu-section-title</a>                                           | Encourages makers to provide accessible title for Atlassian Design System Menu Section component.                                                                                                                                                                                                                   | Yes         |         | Yes         |
+| <a href="./packages/design-system/eslint-plugin/src/rules/use-modal-dialog-close-button/README.md">use-modal-dialog-close-button</a>                             | Encourages makers to use close button in Atlassian Design System's modal dialog component.                                                                                                                                                                                                                          | Yes         | Yes     | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-onboarding-spotlight-label/README.md">use-onboarding-spotlight-label</a>                           | Ensures onboarding spotlight dialogs are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                 | Yes         |         | Yes         |
 | <a href="./packages/design-system/eslint-plugin/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="./packages/design-system/eslint-plugin/src/rules/use-primitives/README.md">use-primitives</a>                                                           | Encourage the usage of primitives components.                                                                                                                                                                                                                                                                       |             | Yes     | Yes         |

package/dist/cjs/presets/all-flat.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::7fdb05980fdb097dac9851477f1907e4>>
+ * @codegen <<SignedSource::f4b6800bf45a85f5c3acea28681b1cbc>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -51,6 +51,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/use-latest-xcss-syntax': 'error',
     '@atlaskit/design-system/use-latest-xcss-syntax-typography': 'warn',
     '@atlaskit/design-system/use-menu-section-title': 'warn',
+    '@atlaskit/design-system/use-modal-dialog-close-button': 'warn',
     '@atlaskit/design-system/use-onboarding-spotlight-label': 'warn',
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',

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::75357860fd00d6fc5060362c75d5db5e>>
+ * @codegen <<SignedSource::d9b89cc91a0359b1083c0020c56e1e7f>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -50,6 +50,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/use-latest-xcss-syntax': 'error',
     '@atlaskit/design-system/use-latest-xcss-syntax-typography': 'warn',
     '@atlaskit/design-system/use-menu-section-title': 'warn',
+    '@atlaskit/design-system/use-modal-dialog-close-button': 'warn',
     '@atlaskit/design-system/use-onboarding-spotlight-label': 'warn',
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',

package/dist/cjs/presets/recommended-flat.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::4dc3e3e8d6fc34692db49347e4785d72>>
+ * @codegen <<SignedSource::f697bb4e7d6f53db6d4d1f522ae0ba43>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -39,6 +39,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/use-latest-xcss-syntax': 'error',
     '@atlaskit/design-system/use-latest-xcss-syntax-typography': 'warn',
     '@atlaskit/design-system/use-menu-section-title': 'warn',
+    '@atlaskit/design-system/use-modal-dialog-close-button': 'warn',
     '@atlaskit/design-system/use-onboarding-spotlight-label': 'warn',
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',

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::1f8c75cb592edbc7ccb124c7e831e475>>
+ * @codegen <<SignedSource::c593f40801552ec33891506bcba81689>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -38,6 +38,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/use-latest-xcss-syntax': 'error',
     '@atlaskit/design-system/use-latest-xcss-syntax-typography': 'warn',
     '@atlaskit/design-system/use-menu-section-title': 'warn',
+    '@atlaskit/design-system/use-modal-dialog-close-button': 'warn',
     '@atlaskit/design-system/use-onboarding-spotlight-label': 'warn',
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',

package/dist/cjs/rules/consistent-css-prop-usage/index.js

@@ -124,6 +124,21 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
         // Identifier isn't in the module, skip!
         return;
       }
+
+      // Specifically for the `xcss` prop we allow `xcss` values that come from a function parameter.
+      if (this.cssAttributeName === 'xcss' && (
+      // Allowing `xcss` and `${string}Xcss` values
+      identifier.name === 'xcss' || identifier.name.endsWith('Xcss'))) {
+        var sourceCode = (0, _contextCompat.getSourceCode)(this.context);
+        var variable = (0, _findVariable.findVariable)({
+          identifier: identifier,
+          sourceCode: sourceCode
+        });
+        // Only allowing values where the parameter definition is the only definition
+        if ((variable === null || variable === void 0 ? void 0 : variable.defs.length) === 1 && (variable === null || variable === void 0 ? void 0 : variable.defs[0].type) === 'Parameter') {
+          return;
+        }
+      }
       if (identifier.parent.type !== 'VariableDeclarator') {
         // When variable is not in the file or coming from import
         this.context.report({

package/dist/cjs/rules/index.codegen.js

@@ -44,6 +44,7 @@ var _useHrefInLinkItem = _interopRequireDefault(require("./use-href-in-link-item
 var _useLatestXcssSyntax = _interopRequireDefault(require("./use-latest-xcss-syntax"));
 var _useLatestXcssSyntaxTypography = _interopRequireDefault(require("./use-latest-xcss-syntax-typography"));
 var _useMenuSectionTitle = _interopRequireDefault(require("./use-menu-section-title"));
+var _useModalDialogCloseButton = _interopRequireDefault(require("./use-modal-dialog-close-button"));
 var _useOnboardingSpotlightLabel = _interopRequireDefault(require("./use-onboarding-spotlight-label"));
 var _usePopupLabel = _interopRequireDefault(require("./use-popup-label"));
 var _usePrimitives = _interopRequireDefault(require("./use-primitives"));
@@ -54,7 +55,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::50c700a7a1e85949b0e5136a8c576c72>>
+ * @codegen <<SignedSource::4655f06909a45281bdcc9780314776c5>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -98,6 +99,7 @@ var rules = exports.rules = {
   'use-latest-xcss-syntax': _useLatestXcssSyntax.default,
   'use-latest-xcss-syntax-typography': _useLatestXcssSyntaxTypography.default,
   'use-menu-section-title': _useMenuSectionTitle.default,
+  'use-modal-dialog-close-button': _useModalDialogCloseButton.default,
   'use-onboarding-spotlight-label': _useOnboardingSpotlightLabel.default,
   'use-popup-label': _usePopupLabel.default,
   'use-primitives': _usePrimitives.default,

package/dist/cjs/rules/use-modal-dialog-close-button/index.js

@@ -0,0 +1,165 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useCloseButtonOrNewProp = exports.setHasCloseButtonPropToTrue = exports.ruleName = exports.default = exports.addHasCloseButtonProp = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _jsxAttribute = require("../../ast-nodes/jsx-attribute");
+var _jsxElement = require("../../ast-nodes/jsx-element");
+var _createRule = require("../utils/create-rule");
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } // eslint-disable-next-line import/no-extraneous-dependencies
+var PROP_NAME = 'hasCloseButton';
+
+// Lint rule message
+var message = '`hasCloseButton` should be set to `true` or the `CloseButton` component should be used to make modal dialog accessible.';
+
+// Fix messages
+var addHasCloseButtonProp = exports.addHasCloseButtonProp = 'Add `hasCloseButton` prop.';
+var setHasCloseButtonPropToTrue = exports.setHasCloseButtonPropToTrue = 'Set `hasCloseButton` prop to `true`.';
+var useCloseButtonOrNewProp = exports.useCloseButtonOrNewProp = 'Set `hasCloseButton` prop to `true` in `ModalHeader` or use `CloseButton` export if customization is desired.';
+var ruleName = exports.ruleName = __dirname.split('/').slice(-1)[0];
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: ruleName,
+    type: 'suggestion',
+    fixable: 'code',
+    hasSuggestions: true,
+    docs: {
+      description: "Encourages makers to use close button in Atlassian Design System's modal dialog component.",
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      modalHeaderMissingHasCloseButtonProp: message,
+      modalHeaderHasCloseButtonPropIsFalse: message,
+      noCloseButtonExists: message
+    }
+  },
+  create: function create(context) {
+    // List of component's locally imported names that match
+    var defaultImportLocalName;
+    var modalHeaderLocalName;
+    var closeButtonLocalName;
+    return {
+      // Only run rule in files where the package is imported
+      ImportDeclaration: function ImportDeclaration(node) {
+        // Ignore non-modal imports
+        if (node.source.value !== '@atlaskit/modal-dialog') {
+          return;
+        }
+        node.specifiers.forEach(function (identifier) {
+          if ((0, _eslintCodemodUtils.isNodeOfType)(identifier, 'ImportDefaultSpecifier')) {
+            defaultImportLocalName = identifier.local.name;
+          } else if ((0, _eslintCodemodUtils.isNodeOfType)(identifier, 'ImportSpecifier')) {
+            var importName = identifier.imported.name;
+            var localName = identifier.local.name;
+            if (importName === 'ModalHeader') {
+              modalHeaderLocalName = localName;
+            } else if (importName === 'CloseButton') {
+              closeButtonLocalName = localName;
+            }
+          }
+        });
+      },
+      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 (name !== defaultImportLocalName) {
+          return;
+        }
+        var modalHeaderNode = null;
+        var closeButtonNode = null;
+        var _searchChildren = function searchChildren(node) {
+          var _iterator = _createForOfIteratorHelper(node.children),
+            _step;
+          try {
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              var child = _step.value;
+              if (modalHeaderNode && closeButtonNode) {
+                continue;
+              }
+              // Skip if not a JSX Element
+              if (!(0, _eslintCodemodUtils.isNodeOfType)(child, 'JSXElement')) {
+                continue;
+              }
+
+              // Skip if opening element is not an identifier
+              if (!(0, _eslintCodemodUtils.isNodeOfType)(child.openingElement.name, 'JSXIdentifier')) {
+                continue;
+              }
+
+              // if child is CloseButton, return true
+              if (child.openingElement.name.name === closeButtonLocalName) {
+                closeButtonNode = child;
+              } else if (child.openingElement.name.name === modalHeaderLocalName) {
+                modalHeaderNode = child;
+              }
+              if (child.children) {
+                _searchChildren(child);
+              }
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+        };
+        _searchChildren(node);
+
+        // If there is a close button, skip the rest, as this satisfies the rule.
+        if (closeButtonNode) {
+          return;
+          // No close button exists, so check the modal header
+        } else if (modalHeaderNode !== null) {
+          var prop = _jsxElement.JSXElementHelper.getAttributeByName(modalHeaderNode, PROP_NAME);
+
+          // If the prop exists
+          if (prop) {
+            var attrValue = _jsxAttribute.JSXAttribute.getValue(prop);
+            // If the value is a boolean with value `false`
+            if ((attrValue === null || attrValue === void 0 ? void 0 : attrValue.type) === 'ExpressionStatement Literal' && (attrValue === null || attrValue === void 0 ? void 0 : attrValue.value) === false) {
+              return context.report({
+                node: modalHeaderNode,
+                messageId: 'modalHeaderHasCloseButtonPropIsFalse',
+                suggest: [{
+                  desc: setHasCloseButtonPropToTrue,
+                  // Set to true by setting to boolean HTML/JSX attribute
+                  fix: function fix(fixer) {
+                    return [fixer.replaceText(prop, PROP_NAME)];
+                  }
+                }]
+              });
+            }
+            // If the prop does not exist
+          } else {
+            return context.report({
+              node: modalHeaderNode,
+              messageId: 'modalHeaderMissingHasCloseButtonProp',
+              suggest: [{
+                desc: addHasCloseButtonProp,
+                fix: function fix(fixer) {
+                  return [fixer.insertTextAfter(modalHeaderNode.openingElement.name, " ".concat(PROP_NAME))];
+                }
+              }]
+            });
+          }
+          // No close button or modal header exists
+        } else {
+          return context.report({
+            node: node,
+            messageId: 'noCloseButtonExists'
+          });
+        }
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7fdb05980fdb097dac9851477f1907e4>>
+ * @codegen <<SignedSource::f4b6800bf45a85f5c3acea28681b1cbc>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -46,6 +46,7 @@ export default {
     '@atlaskit/design-system/use-latest-xcss-syntax': 'error',
     '@atlaskit/design-system/use-latest-xcss-syntax-typography': 'warn',
     '@atlaskit/design-system/use-menu-section-title': 'warn',
+    '@atlaskit/design-system/use-modal-dialog-close-button': 'warn',
     '@atlaskit/design-system/use-onboarding-spotlight-label': 'warn',
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',

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::75357860fd00d6fc5060362c75d5db5e>>
+ * @codegen <<SignedSource::d9b89cc91a0359b1083c0020c56e1e7f>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -45,6 +45,7 @@ export default {
     '@atlaskit/design-system/use-latest-xcss-syntax': 'error',
     '@atlaskit/design-system/use-latest-xcss-syntax-typography': 'warn',
     '@atlaskit/design-system/use-menu-section-title': 'warn',
+    '@atlaskit/design-system/use-modal-dialog-close-button': 'warn',
     '@atlaskit/design-system/use-onboarding-spotlight-label': 'warn',
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::4dc3e3e8d6fc34692db49347e4785d72>>
+ * @codegen <<SignedSource::f697bb4e7d6f53db6d4d1f522ae0ba43>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -34,6 +34,7 @@ export default {
     '@atlaskit/design-system/use-latest-xcss-syntax': 'error',
     '@atlaskit/design-system/use-latest-xcss-syntax-typography': 'warn',
     '@atlaskit/design-system/use-menu-section-title': 'warn',
+    '@atlaskit/design-system/use-modal-dialog-close-button': 'warn',
     '@atlaskit/design-system/use-onboarding-spotlight-label': 'warn',
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',

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::1f8c75cb592edbc7ccb124c7e831e475>>
+ * @codegen <<SignedSource::c593f40801552ec33891506bcba81689>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -33,6 +33,7 @@ export default {
     '@atlaskit/design-system/use-latest-xcss-syntax': 'error',
     '@atlaskit/design-system/use-latest-xcss-syntax-typography': 'warn',
     '@atlaskit/design-system/use-menu-section-title': 'warn',
+    '@atlaskit/design-system/use-modal-dialog-close-button': 'warn',
     '@atlaskit/design-system/use-onboarding-spotlight-label': 'warn',
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',

package/dist/es2019/rules/consistent-css-prop-usage/index.js

@@ -98,6 +98,21 @@ class JSXExpressionLinter {
       // Identifier isn't in the module, skip!
       return;
     }
+
+    // Specifically for the `xcss` prop we allow `xcss` values that come from a function parameter.
+    if (this.cssAttributeName === 'xcss' && (
+    // Allowing `xcss` and `${string}Xcss` values
+    identifier.name === 'xcss' || identifier.name.endsWith('Xcss'))) {
+      const sourceCode = getSourceCode(this.context);
+      const variable = findVariable({
+        identifier,
+        sourceCode
+      });
+      // Only allowing values where the parameter definition is the only definition
+      if ((variable === null || variable === void 0 ? void 0 : variable.defs.length) === 1 && (variable === null || variable === void 0 ? void 0 : variable.defs[0].type) === 'Parameter') {
+        return;
+      }
+    }
     if (identifier.parent.type !== 'VariableDeclarator') {
       // When variable is not in the file or coming from import
       this.context.report({

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::50c700a7a1e85949b0e5136a8c576c72>>
+ * @codegen <<SignedSource::4655f06909a45281bdcc9780314776c5>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -42,6 +42,7 @@ import useHrefInLinkItem from './use-href-in-link-item';
 import useLatestXcssSyntax from './use-latest-xcss-syntax';
 import useLatestXcssSyntaxTypography from './use-latest-xcss-syntax-typography';
 import useMenuSectionTitle from './use-menu-section-title';
+import useModalDialogCloseButton from './use-modal-dialog-close-button';
 import useOnboardingSpotlightLabel from './use-onboarding-spotlight-label';
 import usePopupLabel from './use-popup-label';
 import usePrimitives from './use-primitives';
@@ -90,6 +91,7 @@ export const rules = {
   'use-latest-xcss-syntax': useLatestXcssSyntax,
   'use-latest-xcss-syntax-typography': useLatestXcssSyntaxTypography,
   'use-menu-section-title': useMenuSectionTitle,
+  'use-modal-dialog-close-button': useModalDialogCloseButton,
   'use-onboarding-spotlight-label': useOnboardingSpotlightLabel,
   'use-popup-label': usePopupLabel,
   'use-primitives': usePrimitives,

package/dist/es2019/rules/use-modal-dialog-close-button/index.js

@@ -0,0 +1,145 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { JSXAttribute } from '../../ast-nodes/jsx-attribute';
+import { JSXElementHelper } from '../../ast-nodes/jsx-element';
+import { createLintRule } from '../utils/create-rule';
+const PROP_NAME = 'hasCloseButton';
+
+// Lint rule message
+const message = '`hasCloseButton` should be set to `true` or the `CloseButton` component should be used to make modal dialog accessible.';
+
+// Fix messages
+export const addHasCloseButtonProp = 'Add `hasCloseButton` prop.';
+export const setHasCloseButtonPropToTrue = 'Set `hasCloseButton` prop to `true`.';
+export const useCloseButtonOrNewProp = 'Set `hasCloseButton` prop to `true` in `ModalHeader` or use `CloseButton` export if customization is desired.';
+export const ruleName = __dirname.split('/').slice(-1)[0];
+const rule = createLintRule({
+  meta: {
+    name: ruleName,
+    type: 'suggestion',
+    fixable: 'code',
+    hasSuggestions: true,
+    docs: {
+      description: "Encourages makers to use close button in Atlassian Design System's modal dialog component.",
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      modalHeaderMissingHasCloseButtonProp: message,
+      modalHeaderHasCloseButtonPropIsFalse: message,
+      noCloseButtonExists: message
+    }
+  },
+  create(context) {
+    // List of component's locally imported names that match
+    let defaultImportLocalName;
+    let modalHeaderLocalName;
+    let closeButtonLocalName;
+    return {
+      // Only run rule in files where the package is imported
+      ImportDeclaration(node) {
+        // Ignore non-modal imports
+        if (node.source.value !== '@atlaskit/modal-dialog') {
+          return;
+        }
+        node.specifiers.forEach(identifier => {
+          if (isNodeOfType(identifier, 'ImportDefaultSpecifier')) {
+            defaultImportLocalName = identifier.local.name;
+          } else if (isNodeOfType(identifier, 'ImportSpecifier')) {
+            const importName = identifier.imported.name;
+            const localName = identifier.local.name;
+            if (importName === 'ModalHeader') {
+              modalHeaderLocalName = localName;
+            } else if (importName === 'CloseButton') {
+              closeButtonLocalName = localName;
+            }
+          }
+        });
+      },
+      JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        const name = node.openingElement.name.name;
+        if (name !== defaultImportLocalName) {
+          return;
+        }
+        let modalHeaderNode = null;
+        let closeButtonNode = null;
+        const searchChildren = node => {
+          for (let child of node.children) {
+            if (modalHeaderNode && closeButtonNode) {
+              continue;
+            }
+            // Skip if not a JSX Element
+            if (!isNodeOfType(child, 'JSXElement')) {
+              continue;
+            }
+
+            // Skip if opening element is not an identifier
+            if (!isNodeOfType(child.openingElement.name, 'JSXIdentifier')) {
+              continue;
+            }
+
+            // if child is CloseButton, return true
+            if (child.openingElement.name.name === closeButtonLocalName) {
+              closeButtonNode = child;
+            } else if (child.openingElement.name.name === modalHeaderLocalName) {
+              modalHeaderNode = child;
+            }
+            if (child.children) {
+              searchChildren(child);
+            }
+          }
+        };
+        searchChildren(node);
+
+        // If there is a close button, skip the rest, as this satisfies the rule.
+        if (closeButtonNode) {
+          return;
+          // No close button exists, so check the modal header
+        } else if (modalHeaderNode !== null) {
+          const prop = JSXElementHelper.getAttributeByName(modalHeaderNode, PROP_NAME);
+
+          // If the prop exists
+          if (prop) {
+            const attrValue = JSXAttribute.getValue(prop);
+            // If the value is a boolean with value `false`
+            if ((attrValue === null || attrValue === void 0 ? void 0 : attrValue.type) === 'ExpressionStatement Literal' && (attrValue === null || attrValue === void 0 ? void 0 : attrValue.value) === false) {
+              return context.report({
+                node: modalHeaderNode,
+                messageId: 'modalHeaderHasCloseButtonPropIsFalse',
+                suggest: [{
+                  desc: setHasCloseButtonPropToTrue,
+                  // Set to true by setting to boolean HTML/JSX attribute
+                  fix: fixer => [fixer.replaceText(prop, PROP_NAME)]
+                }]
+              });
+            }
+            // If the prop does not exist
+          } else {
+            return context.report({
+              node: modalHeaderNode,
+              messageId: 'modalHeaderMissingHasCloseButtonProp',
+              suggest: [{
+                desc: addHasCloseButtonProp,
+                fix: fixer => [fixer.insertTextAfter(modalHeaderNode.openingElement.name, ` ${PROP_NAME}`)]
+              }]
+            });
+          }
+          // No close button or modal header exists
+        } else {
+          return context.report({
+            node,
+            messageId: 'noCloseButtonExists'
+          });
+        }
+      }
+    };
+  }
+});
+export default rule;

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::7fdb05980fdb097dac9851477f1907e4>>
+ * @codegen <<SignedSource::f4b6800bf45a85f5c3acea28681b1cbc>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -46,6 +46,7 @@ export default {
     '@atlaskit/design-system/use-latest-xcss-syntax': 'error',
     '@atlaskit/design-system/use-latest-xcss-syntax-typography': 'warn',
     '@atlaskit/design-system/use-menu-section-title': 'warn',
+    '@atlaskit/design-system/use-modal-dialog-close-button': 'warn',
     '@atlaskit/design-system/use-onboarding-spotlight-label': 'warn',
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',

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::75357860fd00d6fc5060362c75d5db5e>>
+ * @codegen <<SignedSource::d9b89cc91a0359b1083c0020c56e1e7f>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -45,6 +45,7 @@ export default {
     '@atlaskit/design-system/use-latest-xcss-syntax': 'error',
     '@atlaskit/design-system/use-latest-xcss-syntax-typography': 'warn',
     '@atlaskit/design-system/use-menu-section-title': 'warn',
+    '@atlaskit/design-system/use-modal-dialog-close-button': 'warn',
     '@atlaskit/design-system/use-onboarding-spotlight-label': 'warn',
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-primitives': 'warn',

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::4dc3e3e8d6fc34692db49347e4785d72>>
+ * @codegen <<SignedSource::f697bb4e7d6f53db6d4d1f522ae0ba43>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -34,6 +34,7 @@ export default {
     '@atlaskit/design-system/use-latest-xcss-syntax': 'error',
     '@atlaskit/design-system/use-latest-xcss-syntax-typography': 'warn',
     '@atlaskit/design-system/use-menu-section-title': 'warn',
+    '@atlaskit/design-system/use-modal-dialog-close-button': 'warn',
     '@atlaskit/design-system/use-onboarding-spotlight-label': 'warn',
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',

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::1f8c75cb592edbc7ccb124c7e831e475>>
+ * @codegen <<SignedSource::c593f40801552ec33891506bcba81689>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -33,6 +33,7 @@ export default {
     '@atlaskit/design-system/use-latest-xcss-syntax': 'error',
     '@atlaskit/design-system/use-latest-xcss-syntax-typography': 'warn',
     '@atlaskit/design-system/use-menu-section-title': 'warn',
+    '@atlaskit/design-system/use-modal-dialog-close-button': 'warn',
     '@atlaskit/design-system/use-onboarding-spotlight-label': 'warn',
     '@atlaskit/design-system/use-popup-label': 'warn',
     '@atlaskit/design-system/use-tag-group-label': 'warn',

package/dist/esm/rules/consistent-css-prop-usage/index.js

@@ -117,6 +117,21 @@ var JSXExpressionLinter = /*#__PURE__*/function () {
         // Identifier isn't in the module, skip!
         return;
       }
+
+      // Specifically for the `xcss` prop we allow `xcss` values that come from a function parameter.
+      if (this.cssAttributeName === 'xcss' && (
+      // Allowing `xcss` and `${string}Xcss` values
+      identifier.name === 'xcss' || identifier.name.endsWith('Xcss'))) {
+        var sourceCode = getSourceCode(this.context);
+        var variable = findVariable({
+          identifier: identifier,
+          sourceCode: sourceCode
+        });
+        // Only allowing values where the parameter definition is the only definition
+        if ((variable === null || variable === void 0 ? void 0 : variable.defs.length) === 1 && (variable === null || variable === void 0 ? void 0 : variable.defs[0].type) === 'Parameter') {
+          return;
+        }
+      }
       if (identifier.parent.type !== 'VariableDeclarator') {
         // When variable is not in the file or coming from import
         this.context.report({

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::50c700a7a1e85949b0e5136a8c576c72>>
+ * @codegen <<SignedSource::4655f06909a45281bdcc9780314776c5>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -42,6 +42,7 @@ import useHrefInLinkItem from './use-href-in-link-item';
 import useLatestXcssSyntax from './use-latest-xcss-syntax';
 import useLatestXcssSyntaxTypography from './use-latest-xcss-syntax-typography';
 import useMenuSectionTitle from './use-menu-section-title';
+import useModalDialogCloseButton from './use-modal-dialog-close-button';
 import useOnboardingSpotlightLabel from './use-onboarding-spotlight-label';
 import usePopupLabel from './use-popup-label';
 import usePrimitives from './use-primitives';
@@ -90,6 +91,7 @@ export var rules = {
   'use-latest-xcss-syntax': useLatestXcssSyntax,
   'use-latest-xcss-syntax-typography': useLatestXcssSyntaxTypography,
   'use-menu-section-title': useMenuSectionTitle,
+  'use-modal-dialog-close-button': useModalDialogCloseButton,
   'use-onboarding-spotlight-label': useOnboardingSpotlightLabel,
   'use-popup-label': usePopupLabel,
   'use-primitives': usePrimitives,

package/dist/esm/rules/use-modal-dialog-close-button/index.js

@@ -0,0 +1,161 @@
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { JSXAttribute } from '../../ast-nodes/jsx-attribute';
+import { JSXElementHelper } from '../../ast-nodes/jsx-element';
+import { createLintRule } from '../utils/create-rule';
+var PROP_NAME = 'hasCloseButton';
+
+// Lint rule message
+var message = '`hasCloseButton` should be set to `true` or the `CloseButton` component should be used to make modal dialog accessible.';
+
+// Fix messages
+export var addHasCloseButtonProp = 'Add `hasCloseButton` prop.';
+export var setHasCloseButtonPropToTrue = 'Set `hasCloseButton` prop to `true`.';
+export var useCloseButtonOrNewProp = 'Set `hasCloseButton` prop to `true` in `ModalHeader` or use `CloseButton` export if customization is desired.';
+export var ruleName = __dirname.split('/').slice(-1)[0];
+var rule = createLintRule({
+  meta: {
+    name: ruleName,
+    type: 'suggestion',
+    fixable: 'code',
+    hasSuggestions: true,
+    docs: {
+      description: "Encourages makers to use close button in Atlassian Design System's modal dialog component.",
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      modalHeaderMissingHasCloseButtonProp: message,
+      modalHeaderHasCloseButtonPropIsFalse: message,
+      noCloseButtonExists: message
+    }
+  },
+  create: function create(context) {
+    // List of component's locally imported names that match
+    var defaultImportLocalName;
+    var modalHeaderLocalName;
+    var closeButtonLocalName;
+    return {
+      // Only run rule in files where the package is imported
+      ImportDeclaration: function ImportDeclaration(node) {
+        // Ignore non-modal imports
+        if (node.source.value !== '@atlaskit/modal-dialog') {
+          return;
+        }
+        node.specifiers.forEach(function (identifier) {
+          if (isNodeOfType(identifier, 'ImportDefaultSpecifier')) {
+            defaultImportLocalName = identifier.local.name;
+          } else if (isNodeOfType(identifier, 'ImportSpecifier')) {
+            var importName = identifier.imported.name;
+            var localName = identifier.local.name;
+            if (importName === 'ModalHeader') {
+              modalHeaderLocalName = localName;
+            } else if (importName === 'CloseButton') {
+              closeButtonLocalName = localName;
+            }
+          }
+        });
+      },
+      JSXElement: function JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        var name = node.openingElement.name.name;
+        if (name !== defaultImportLocalName) {
+          return;
+        }
+        var modalHeaderNode = null;
+        var closeButtonNode = null;
+        var _searchChildren = function searchChildren(node) {
+          var _iterator = _createForOfIteratorHelper(node.children),
+            _step;
+          try {
+            for (_iterator.s(); !(_step = _iterator.n()).done;) {
+              var child = _step.value;
+              if (modalHeaderNode && closeButtonNode) {
+                continue;
+              }
+              // Skip if not a JSX Element
+              if (!isNodeOfType(child, 'JSXElement')) {
+                continue;
+              }
+
+              // Skip if opening element is not an identifier
+              if (!isNodeOfType(child.openingElement.name, 'JSXIdentifier')) {
+                continue;
+              }
+
+              // if child is CloseButton, return true
+              if (child.openingElement.name.name === closeButtonLocalName) {
+                closeButtonNode = child;
+              } else if (child.openingElement.name.name === modalHeaderLocalName) {
+                modalHeaderNode = child;
+              }
+              if (child.children) {
+                _searchChildren(child);
+              }
+            }
+          } catch (err) {
+            _iterator.e(err);
+          } finally {
+            _iterator.f();
+          }
+        };
+        _searchChildren(node);
+
+        // If there is a close button, skip the rest, as this satisfies the rule.
+        if (closeButtonNode) {
+          return;
+          // No close button exists, so check the modal header
+        } else if (modalHeaderNode !== null) {
+          var prop = JSXElementHelper.getAttributeByName(modalHeaderNode, PROP_NAME);
+
+          // If the prop exists
+          if (prop) {
+            var attrValue = JSXAttribute.getValue(prop);
+            // If the value is a boolean with value `false`
+            if ((attrValue === null || attrValue === void 0 ? void 0 : attrValue.type) === 'ExpressionStatement Literal' && (attrValue === null || attrValue === void 0 ? void 0 : attrValue.value) === false) {
+              return context.report({
+                node: modalHeaderNode,
+                messageId: 'modalHeaderHasCloseButtonPropIsFalse',
+                suggest: [{
+                  desc: setHasCloseButtonPropToTrue,
+                  // Set to true by setting to boolean HTML/JSX attribute
+                  fix: function fix(fixer) {
+                    return [fixer.replaceText(prop, PROP_NAME)];
+                  }
+                }]
+              });
+            }
+            // If the prop does not exist
+          } else {
+            return context.report({
+              node: modalHeaderNode,
+              messageId: 'modalHeaderMissingHasCloseButtonProp',
+              suggest: [{
+                desc: addHasCloseButtonProp,
+                fix: function fix(fixer) {
+                  return [fixer.insertTextAfter(modalHeaderNode.openingElement.name, " ".concat(PROP_NAME))];
+                }
+              }]
+            });
+          }
+          // No close button or modal header exists
+        } else {
+          return context.report({
+            node: node,
+            messageId: 'noCloseButtonExists'
+          });
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/types/index.codegen.d.ts

@@ -54,6 +54,7 @@ export declare const plugin: {
         'use-latest-xcss-syntax': import("eslint").Rule.RuleModule;
         'use-latest-xcss-syntax-typography': import("eslint").Rule.RuleModule;
         'use-menu-section-title': import("eslint").Rule.RuleModule;
+        'use-modal-dialog-close-button': import("eslint").Rule.RuleModule;
         'use-onboarding-spotlight-label': import("eslint").Rule.RuleModule;
         'use-popup-label': import("eslint").Rule.RuleModule;
         'use-primitives': import("eslint").Rule.RuleModule;
@@ -105,6 +106,7 @@ export declare const plugin: {
                 '@atlaskit/design-system/use-latest-xcss-syntax': "error";
                 '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
                 '@atlaskit/design-system/use-menu-section-title': "warn";
+                '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
                 '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
                 '@atlaskit/design-system/use-popup-label': "warn";
                 '@atlaskit/design-system/use-primitives': "warn";
@@ -158,6 +160,7 @@ export declare const plugin: {
                 '@atlaskit/design-system/use-latest-xcss-syntax': "error";
                 '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
                 '@atlaskit/design-system/use-menu-section-title': "warn";
+                '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
                 '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
                 '@atlaskit/design-system/use-popup-label': "warn";
                 '@atlaskit/design-system/use-primitives': "warn";
@@ -197,6 +200,7 @@ export declare const plugin: {
                 '@atlaskit/design-system/use-latest-xcss-syntax': "error";
                 '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
                 '@atlaskit/design-system/use-menu-section-title': "warn";
+                '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
                 '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
                 '@atlaskit/design-system/use-popup-label': "warn";
                 '@atlaskit/design-system/use-tag-group-label': "warn";
@@ -234,6 +238,7 @@ export declare const plugin: {
                 '@atlaskit/design-system/use-latest-xcss-syntax': "error";
                 '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
                 '@atlaskit/design-system/use-menu-section-title': "warn";
+                '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
                 '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
                 '@atlaskit/design-system/use-popup-label': "warn";
                 '@atlaskit/design-system/use-tag-group-label': "warn";
@@ -284,6 +289,7 @@ declare const configs: {
             '@atlaskit/design-system/use-latest-xcss-syntax': "error";
             '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
             '@atlaskit/design-system/use-menu-section-title': "warn";
+            '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
             '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
             '@atlaskit/design-system/use-popup-label': "warn";
             '@atlaskit/design-system/use-primitives': "warn";
@@ -337,6 +343,7 @@ declare const configs: {
             '@atlaskit/design-system/use-latest-xcss-syntax': "error";
             '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
             '@atlaskit/design-system/use-menu-section-title': "warn";
+            '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
             '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
             '@atlaskit/design-system/use-popup-label': "warn";
             '@atlaskit/design-system/use-primitives': "warn";
@@ -376,6 +383,7 @@ declare const configs: {
             '@atlaskit/design-system/use-latest-xcss-syntax': "error";
             '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
             '@atlaskit/design-system/use-menu-section-title': "warn";
+            '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
             '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
             '@atlaskit/design-system/use-popup-label': "warn";
             '@atlaskit/design-system/use-tag-group-label': "warn";
@@ -413,6 +421,7 @@ declare const configs: {
             '@atlaskit/design-system/use-latest-xcss-syntax': "error";
             '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
             '@atlaskit/design-system/use-menu-section-title': "warn";
+            '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
             '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
             '@atlaskit/design-system/use-popup-label': "warn";
             '@atlaskit/design-system/use-tag-group-label': "warn";

package/dist/types/presets/all-flat.codegen.d.ts

@@ -39,6 +39,7 @@ declare const _default: {
         '@atlaskit/design-system/use-latest-xcss-syntax': "error";
         '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
         '@atlaskit/design-system/use-menu-section-title': "warn";
+        '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
         '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
         '@atlaskit/design-system/use-popup-label': "warn";
         '@atlaskit/design-system/use-primitives': "warn";

package/dist/types/presets/all.codegen.d.ts

@@ -39,6 +39,7 @@ declare const _default: {
         '@atlaskit/design-system/use-latest-xcss-syntax': "error";
         '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
         '@atlaskit/design-system/use-menu-section-title': "warn";
+        '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
         '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
         '@atlaskit/design-system/use-popup-label': "warn";
         '@atlaskit/design-system/use-primitives': "warn";

package/dist/types/presets/recommended-flat.codegen.d.ts

@@ -27,6 +27,7 @@ declare const _default: {
         '@atlaskit/design-system/use-latest-xcss-syntax': "error";
         '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
         '@atlaskit/design-system/use-menu-section-title': "warn";
+        '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
         '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
         '@atlaskit/design-system/use-popup-label': "warn";
         '@atlaskit/design-system/use-tag-group-label': "warn";

package/dist/types/presets/recommended.codegen.d.ts

@@ -27,6 +27,7 @@ declare const _default: {
         '@atlaskit/design-system/use-latest-xcss-syntax': "error";
         '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
         '@atlaskit/design-system/use-menu-section-title': "warn";
+        '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
         '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
         '@atlaskit/design-system/use-popup-label': "warn";
         '@atlaskit/design-system/use-tag-group-label': "warn";

package/dist/types/rules/index.codegen.d.ts

@@ -38,6 +38,7 @@ export declare const rules: {
     'use-latest-xcss-syntax': import("eslint").Rule.RuleModule;
     'use-latest-xcss-syntax-typography': import("eslint").Rule.RuleModule;
     'use-menu-section-title': import("eslint").Rule.RuleModule;
+    'use-modal-dialog-close-button': import("eslint").Rule.RuleModule;
     'use-onboarding-spotlight-label': import("eslint").Rule.RuleModule;
     'use-popup-label': import("eslint").Rule.RuleModule;
     'use-primitives': import("eslint").Rule.RuleModule;

package/dist/types/rules/use-modal-dialog-close-button/index.d.ts

@@ -0,0 +1,7 @@
+import type { Rule } from 'eslint';
+export declare const addHasCloseButtonProp = "Add `hasCloseButton` prop.";
+export declare const setHasCloseButtonPropToTrue = "Set `hasCloseButton` prop to `true`.";
+export declare const useCloseButtonOrNewProp = "Set `hasCloseButton` prop to `true` in `ModalHeader` or use `CloseButton` export if customization is desired.";
+export declare const ruleName: string;
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types-ts4.5/index.codegen.d.ts

@@ -54,6 +54,7 @@ export declare const plugin: {
         'use-latest-xcss-syntax': import("eslint").Rule.RuleModule;
         'use-latest-xcss-syntax-typography': import("eslint").Rule.RuleModule;
         'use-menu-section-title': import("eslint").Rule.RuleModule;
+        'use-modal-dialog-close-button': import("eslint").Rule.RuleModule;
         'use-onboarding-spotlight-label': import("eslint").Rule.RuleModule;
         'use-popup-label': import("eslint").Rule.RuleModule;
         'use-primitives': import("eslint").Rule.RuleModule;
@@ -108,6 +109,7 @@ export declare const plugin: {
                 '@atlaskit/design-system/use-latest-xcss-syntax': "error";
                 '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
                 '@atlaskit/design-system/use-menu-section-title': "warn";
+                '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
                 '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
                 '@atlaskit/design-system/use-popup-label': "warn";
                 '@atlaskit/design-system/use-primitives': "warn";
@@ -164,6 +166,7 @@ export declare const plugin: {
                 '@atlaskit/design-system/use-latest-xcss-syntax': "error";
                 '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
                 '@atlaskit/design-system/use-menu-section-title': "warn";
+                '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
                 '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
                 '@atlaskit/design-system/use-popup-label': "warn";
                 '@atlaskit/design-system/use-primitives': "warn";
@@ -206,6 +209,7 @@ export declare const plugin: {
                 '@atlaskit/design-system/use-latest-xcss-syntax': "error";
                 '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
                 '@atlaskit/design-system/use-menu-section-title': "warn";
+                '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
                 '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
                 '@atlaskit/design-system/use-popup-label': "warn";
                 '@atlaskit/design-system/use-tag-group-label': "warn";
@@ -246,6 +250,7 @@ export declare const plugin: {
                 '@atlaskit/design-system/use-latest-xcss-syntax': "error";
                 '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
                 '@atlaskit/design-system/use-menu-section-title': "warn";
+                '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
                 '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
                 '@atlaskit/design-system/use-popup-label': "warn";
                 '@atlaskit/design-system/use-tag-group-label': "warn";
@@ -299,6 +304,7 @@ declare const configs: {
             '@atlaskit/design-system/use-latest-xcss-syntax': "error";
             '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
             '@atlaskit/design-system/use-menu-section-title': "warn";
+            '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
             '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
             '@atlaskit/design-system/use-popup-label': "warn";
             '@atlaskit/design-system/use-primitives': "warn";
@@ -355,6 +361,7 @@ declare const configs: {
             '@atlaskit/design-system/use-latest-xcss-syntax': "error";
             '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
             '@atlaskit/design-system/use-menu-section-title': "warn";
+            '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
             '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
             '@atlaskit/design-system/use-popup-label': "warn";
             '@atlaskit/design-system/use-primitives': "warn";
@@ -397,6 +404,7 @@ declare const configs: {
             '@atlaskit/design-system/use-latest-xcss-syntax': "error";
             '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
             '@atlaskit/design-system/use-menu-section-title': "warn";
+            '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
             '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
             '@atlaskit/design-system/use-popup-label': "warn";
             '@atlaskit/design-system/use-tag-group-label': "warn";
@@ -437,6 +445,7 @@ declare const configs: {
             '@atlaskit/design-system/use-latest-xcss-syntax': "error";
             '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
             '@atlaskit/design-system/use-menu-section-title': "warn";
+            '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
             '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
             '@atlaskit/design-system/use-popup-label': "warn";
             '@atlaskit/design-system/use-tag-group-label': "warn";

package/dist/types-ts4.5/presets/all-flat.codegen.d.ts

@@ -42,6 +42,7 @@ declare const _default: {
         '@atlaskit/design-system/use-latest-xcss-syntax': "error";
         '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
         '@atlaskit/design-system/use-menu-section-title': "warn";
+        '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
         '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
         '@atlaskit/design-system/use-popup-label': "warn";
         '@atlaskit/design-system/use-primitives': "warn";

package/dist/types-ts4.5/presets/all.codegen.d.ts

@@ -42,6 +42,7 @@ declare const _default: {
         '@atlaskit/design-system/use-latest-xcss-syntax': "error";
         '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
         '@atlaskit/design-system/use-menu-section-title': "warn";
+        '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
         '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
         '@atlaskit/design-system/use-popup-label': "warn";
         '@atlaskit/design-system/use-primitives': "warn";

package/dist/types-ts4.5/presets/recommended-flat.codegen.d.ts

@@ -30,6 +30,7 @@ declare const _default: {
         '@atlaskit/design-system/use-latest-xcss-syntax': "error";
         '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
         '@atlaskit/design-system/use-menu-section-title': "warn";
+        '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
         '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
         '@atlaskit/design-system/use-popup-label': "warn";
         '@atlaskit/design-system/use-tag-group-label': "warn";

package/dist/types-ts4.5/presets/recommended.codegen.d.ts

@@ -30,6 +30,7 @@ declare const _default: {
         '@atlaskit/design-system/use-latest-xcss-syntax': "error";
         '@atlaskit/design-system/use-latest-xcss-syntax-typography': "warn";
         '@atlaskit/design-system/use-menu-section-title': "warn";
+        '@atlaskit/design-system/use-modal-dialog-close-button': "warn";
         '@atlaskit/design-system/use-onboarding-spotlight-label': "warn";
         '@atlaskit/design-system/use-popup-label': "warn";
         '@atlaskit/design-system/use-tag-group-label': "warn";

package/dist/types-ts4.5/rules/index.codegen.d.ts

@@ -38,6 +38,7 @@ export declare const rules: {
     'use-latest-xcss-syntax': import("eslint").Rule.RuleModule;
     'use-latest-xcss-syntax-typography': import("eslint").Rule.RuleModule;
     'use-menu-section-title': import("eslint").Rule.RuleModule;
+    'use-modal-dialog-close-button': import("eslint").Rule.RuleModule;
     'use-onboarding-spotlight-label': import("eslint").Rule.RuleModule;
     'use-popup-label': import("eslint").Rule.RuleModule;
     'use-primitives': import("eslint").Rule.RuleModule;

package/dist/types-ts4.5/rules/use-modal-dialog-close-button/index.d.ts

@@ -0,0 +1,7 @@
+import type { Rule } from 'eslint';
+export declare const addHasCloseButtonProp = "Add `hasCloseButton` prop.";
+export declare const setHasCloseButtonPropToTrue = "Set `hasCloseButton` prop to `true`.";
+export declare const useCloseButtonOrNewProp = "Set `hasCloseButton` prop to `true` in `ModalHeader` or use `CloseButton` export if customization is desired.";
+export declare const ruleName: string;
+declare const rule: Rule.RuleModule;
+export default rule;

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": "13.0.3",
+	"version": "13.1.0",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
 	"publishConfig": {
@@ -45,8 +45,8 @@
 	"dependencies": {
 		"@atlaskit/eslint-utils": "^2.0.0",
 		"@atlaskit/icon": "^25.0.0",
-		"@atlaskit/icon-lab": "^4.0.0",
-		"@atlaskit/tokens": "^4.4.0",
+		"@atlaskit/icon-lab": "^4.2.0",
+		"@atlaskit/tokens": "^4.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@typescript-eslint/utils": "^7.1.0",
 		"ajv": "^6.12.6",