@atlaskit/eslint-plugin-design-system 13.27.1 → 13.28.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 13.28.0
+
+### Minor Changes
+
+- [`3f069f2616f1b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3f069f2616f1b) -
+  Add rule to enforce usage of message wrapper for field messaging components.
+
 ## 13.27.1
 
 ### Patch Changes

package/README.md

@@ -102,6 +102,7 @@ module.exports = {
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-cx-function-in-xcss/README.md">use-cx-function-in-xcss</a>                                                             | Enforces cx function use to combine styles in xcss.                                                                                                                                                                                                                                                                 | Yes         | Yes     | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-datetime-picker-calendar-button/README.md">use-datetime-picker-calendar-button</a>                                     | Encourages makers to use calendar button in Atlassian Design System's date picker and datetime picker components.                                                                                                                                                                                                   | Yes         | Yes     | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-drawer-label/README.md">use-drawer-label</a>                                                                           | Encourages to provide accessible name for Atlassian Design System Drawer component.                                                                                                                                                                                                                                 | Yes         |         | Yes         |
+| <a href="./packages/design-system/eslint-plugin/src/rules/use-field-message-wrapper/README.md">use-field-message-wrapper</a>                                                         | Encourage use of message wrapper component when using form message components.                                                                                                                                                                                                                                      | Yes         |         | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-heading/README.md">use-heading</a>                                                                                     | Encourage the usage of heading components.                                                                                                                                                                                                                                                                          | Yes         | Yes     | Yes         |
 | <a href="./packages/design-system/eslint-plugin/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="./packages/design-system/eslint-plugin/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         |

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::d7a0407a6c6b10bfbba790523d06f97d>>
+ * @codegen <<SignedSource::8ba8f062c0c8a49b3776a111d41fa3bf>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -66,6 +66,7 @@ var rules = {
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
+    '@atlaskit/design-system/use-field-message-wrapper': 'warn',
     '@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',

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::e632a96e9bae920c23e25114f40e3c0d>>
+ * @codegen <<SignedSource::e83747a5a69e6ae7443c198f4cc990b0>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -65,6 +65,7 @@ var rules = {
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
+    '@atlaskit/design-system/use-field-message-wrapper': 'warn',
     '@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',

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::e2157edd1fabfe25390d7c22a0b63f86>>
+ * @codegen <<SignedSource::ee679166d3c39a30db50d8cf45cd3cb7>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -49,6 +49,7 @@ var rules = {
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
+    '@atlaskit/design-system/use-field-message-wrapper': 'warn',
     '@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',

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::b3fadf2e122fc30002c54a922fc55a1f>>
+ * @codegen <<SignedSource::11c250f8fdbf2787edb36243db5e3e07>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -48,6 +48,7 @@ var rules = {
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
+    '@atlaskit/design-system/use-field-message-wrapper': 'warn',
     '@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',

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

@@ -58,6 +58,7 @@ var _useCorrectField = _interopRequireDefault(require("./use-correct-field"));
 var _useCxFunctionInXcss = _interopRequireDefault(require("./use-cx-function-in-xcss"));
 var _useDatetimePickerCalendarButton = _interopRequireDefault(require("./use-datetime-picker-calendar-button"));
 var _useDrawerLabel = _interopRequireDefault(require("./use-drawer-label"));
+var _useFieldMessageWrapper = _interopRequireDefault(require("./use-field-message-wrapper"));
 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"));
@@ -78,7 +79,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::62347cf64e4ac99b927fce9d1a2bd894>>
+ * @codegen <<SignedSource::3ae0af16a58563d27e580593a73961d4>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -136,6 +137,7 @@ var rules = exports.rules = {
   'use-cx-function-in-xcss': _useCxFunctionInXcss.default,
   'use-datetime-picker-calendar-button': _useDatetimePickerCalendarButton.default,
   'use-drawer-label': _useDrawerLabel.default,
+  'use-field-message-wrapper': _useFieldMessageWrapper.default,
   'use-heading': _useHeading.default,
   'use-heading-level-in-spotlight-card': _useHeadingLevelInSpotlightCard.default,
   'use-href-in-link-item': _useHrefInLinkItem.default,

package/dist/cjs/rules/use-field-message-wrapper/index.js

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _createRule = require("../utils/create-rule");
+var FORM_PACKAGE = '@atlaskit/form';
+var MESSAGE_COMPONENTS = ['ErrorMessage', 'HelperMessage', 'ValidMessage'];
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'use-field-message-wrapper',
+    type: 'suggestion',
+    hasSuggestions: true,
+    docs: {
+      description: 'Encourage use of message wrapper component when using form message components.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      useMessageWrapper: "All ADS form messaging components within a field should be wrapped by the `MessageWrapper` component from the form package. Consider also using the [simplified field implementation](https://atlassian.design/components/form/examples#simple-implementation-1) to handle styling and accessible messaging directly."
+    }
+  },
+  create: function create(context) {
+    var fieldImport;
+    var messageWrapperImport;
+    var messageImports = [];
+    return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        var source = node.source.value;
+
+        // Ignore anomalies
+        if (typeof source !== 'string') {
+          return;
+        }
+        if (!node.specifiers.length) {
+          return;
+        }
+
+        // If it's not from our package, ignore.
+        if (source !== FORM_PACKAGE) {
+          return;
+        }
+        var namedImportSpecifiers = node.specifiers.filter(function (spec) {
+          return (0, _eslintCodemodUtils.isNodeOfType)(spec, 'ImportSpecifier');
+        });
+        namedImportSpecifiers.forEach(function (spec) {
+          if (spec.type === 'ImportSpecifier' && 'name' in spec.imported) {
+            var name = spec.imported.name;
+            var local = spec.local;
+            if (MESSAGE_COMPONENTS.includes(name)) {
+              messageImports.push(local);
+            } else if (name === 'Field') {
+              fieldImport = local;
+            } else if (name === 'MessageWrapper') {
+              messageWrapperImport = local;
+            }
+          }
+        });
+      },
+      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 it's not a message component, skip
+        if (messageImports.length === 0 || !messageImports.find(function (imp) {
+          return imp.name === name;
+        })) {
+          return;
+        }
+
+        // if no field import exists, skip. It needs to be within our field
+        if (!fieldImport) {
+          return;
+        }
+
+        // If no message wrapper import exists, then it's definitely an error
+        if (!messageWrapperImport) {
+          return context.report({
+            node: node,
+            messageId: 'useMessageWrapper'
+          });
+        }
+
+        // check for if field and message wrapper are parents
+        var _node = node;
+        var hasParentField = false;
+        var hasParentMessageWrapper = false;
+        while ((0, _eslintCodemodUtils.isNodeOfType)(_node, 'JSXElement') && (0, _eslintCodemodUtils.isNodeOfType)(_node.openingElement.name, 'JSXIdentifier') && !hasParentField) {
+          var _name = _node.openingElement.name.name;
+          hasParentField = hasParentField || _name === fieldImport.name;
+          hasParentMessageWrapper = hasParentMessageWrapper || _name === messageWrapperImport.name;
+          _node = _node.parent;
+          // Skip up until a JSXElement is reached
+          if ((0, _eslintCodemodUtils.isNodeOfType)(_node, 'JSXFragment') || (0, _eslintCodemodUtils.isNodeOfType)(_node, 'ArrowFunctionExpression') || (0, _eslintCodemodUtils.isNodeOfType)(_node, 'JSXExpressionContainer')) {
+            while (_node && !(0, _eslintCodemodUtils.isNodeOfType)(_node, 'JSXElement') && !(0, _eslintCodemodUtils.isNodeOfType)(_node, 'Program')) {
+              _node = _node.parent;
+            }
+          }
+        }
+
+        // if not field, skip because this doesn't matter
+        if (!hasParentField) {
+          return;
+        }
+
+        // if it has a message wrapper, skip
+        if (hasParentMessageWrapper) {
+          return;
+        }
+        context.report({
+          node: node,
+          messageId: 'useMessageWrapper'
+        });
+      }
+    };
+  }
+});
+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::d7a0407a6c6b10bfbba790523d06f97d>>
+ * @codegen <<SignedSource::8ba8f062c0c8a49b3776a111d41fa3bf>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -60,6 +60,7 @@ const rules = {
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
+    '@atlaskit/design-system/use-field-message-wrapper': 'warn',
     '@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',

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::e632a96e9bae920c23e25114f40e3c0d>>
+ * @codegen <<SignedSource::e83747a5a69e6ae7443c198f4cc990b0>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -59,6 +59,7 @@ const rules = {
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
+    '@atlaskit/design-system/use-field-message-wrapper': 'warn',
     '@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',

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::e2157edd1fabfe25390d7c22a0b63f86>>
+ * @codegen <<SignedSource::ee679166d3c39a30db50d8cf45cd3cb7>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -43,6 +43,7 @@ const rules = {
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
+    '@atlaskit/design-system/use-field-message-wrapper': 'warn',
     '@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',

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::b3fadf2e122fc30002c54a922fc55a1f>>
+ * @codegen <<SignedSource::11c250f8fdbf2787edb36243db5e3e07>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -42,6 +42,7 @@ const rules = {
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
+    '@atlaskit/design-system/use-field-message-wrapper': 'warn',
     '@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',

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::62347cf64e4ac99b927fce9d1a2bd894>>
+ * @codegen <<SignedSource::3ae0af16a58563d27e580593a73961d4>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -57,6 +57,7 @@ import useCorrectField from './use-correct-field';
 import useCxFunctionInXcss from './use-cx-function-in-xcss';
 import useDatetimePickerCalendarButton from './use-datetime-picker-calendar-button';
 import useDrawerLabel from './use-drawer-label';
+import useFieldMessageWrapper from './use-field-message-wrapper';
 import useHeading from './use-heading';
 import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-card';
 import useHrefInLinkItem from './use-href-in-link-item';
@@ -129,6 +130,7 @@ export const rules = {
   'use-cx-function-in-xcss': useCxFunctionInXcss,
   'use-datetime-picker-calendar-button': useDatetimePickerCalendarButton,
   'use-drawer-label': useDrawerLabel,
+  'use-field-message-wrapper': useFieldMessageWrapper,
   'use-heading': useHeading,
   'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,
   'use-href-in-link-item': useHrefInLinkItem,

package/dist/es2019/rules/use-field-message-wrapper/index.js

@@ -0,0 +1,115 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+const FORM_PACKAGE = '@atlaskit/form';
+const MESSAGE_COMPONENTS = ['ErrorMessage', 'HelperMessage', 'ValidMessage'];
+const rule = createLintRule({
+  meta: {
+    name: 'use-field-message-wrapper',
+    type: 'suggestion',
+    hasSuggestions: true,
+    docs: {
+      description: 'Encourage use of message wrapper component when using form message components.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      useMessageWrapper: `All ADS form messaging components within a field should be wrapped by the \`MessageWrapper\` component from the form package. Consider also using the [simplified field implementation](https://atlassian.design/components/form/examples#simple-implementation-1) to handle styling and accessible messaging directly.`
+    }
+  },
+  create(context) {
+    let fieldImport;
+    let messageWrapperImport;
+    let messageImports = [];
+    return {
+      ImportDeclaration(node) {
+        const source = node.source.value;
+
+        // Ignore anomalies
+        if (typeof source !== 'string') {
+          return;
+        }
+        if (!node.specifiers.length) {
+          return;
+        }
+
+        // If it's not from our package, ignore.
+        if (source !== FORM_PACKAGE) {
+          return;
+        }
+        const namedImportSpecifiers = node.specifiers.filter(spec => isNodeOfType(spec, 'ImportSpecifier'));
+        namedImportSpecifiers.forEach(spec => {
+          if (spec.type === 'ImportSpecifier' && 'name' in spec.imported) {
+            const name = spec.imported.name;
+            const local = spec.local;
+            if (MESSAGE_COMPONENTS.includes(name)) {
+              messageImports.push(local);
+            } else if (name === 'Field') {
+              fieldImport = local;
+            } else if (name === 'MessageWrapper') {
+              messageWrapperImport = local;
+            }
+          }
+        });
+      },
+      JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        const name = node.openingElement.name.name;
+
+        // if it's not a message component, skip
+        if (messageImports.length === 0 || !messageImports.find(imp => imp.name === name)) {
+          return;
+        }
+
+        // if no field import exists, skip. It needs to be within our field
+        if (!fieldImport) {
+          return;
+        }
+
+        // If no message wrapper import exists, then it's definitely an error
+        if (!messageWrapperImport) {
+          return context.report({
+            node: node,
+            messageId: 'useMessageWrapper'
+          });
+        }
+
+        // check for if field and message wrapper are parents
+        let _node = node;
+        let hasParentField = false;
+        let hasParentMessageWrapper = false;
+        while (isNodeOfType(_node, 'JSXElement') && isNodeOfType(_node.openingElement.name, 'JSXIdentifier') && !hasParentField) {
+          const name = _node.openingElement.name.name;
+          hasParentField = hasParentField || name === fieldImport.name;
+          hasParentMessageWrapper = hasParentMessageWrapper || name === messageWrapperImport.name;
+          _node = _node.parent;
+          // Skip up until a JSXElement is reached
+          if (isNodeOfType(_node, 'JSXFragment') || isNodeOfType(_node, 'ArrowFunctionExpression') || isNodeOfType(_node, 'JSXExpressionContainer')) {
+            while (_node && !isNodeOfType(_node, 'JSXElement') && !isNodeOfType(_node, 'Program')) {
+              _node = _node.parent;
+            }
+          }
+        }
+
+        // if not field, skip because this doesn't matter
+        if (!hasParentField) {
+          return;
+        }
+
+        // if it has a message wrapper, skip
+        if (hasParentMessageWrapper) {
+          return;
+        }
+        context.report({
+          node: node,
+          messageId: 'useMessageWrapper'
+        });
+      }
+    };
+  }
+});
+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::d7a0407a6c6b10bfbba790523d06f97d>>
+ * @codegen <<SignedSource::8ba8f062c0c8a49b3776a111d41fa3bf>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -60,6 +60,7 @@ var rules = {
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
+    '@atlaskit/design-system/use-field-message-wrapper': 'warn',
     '@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',

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::e632a96e9bae920c23e25114f40e3c0d>>
+ * @codegen <<SignedSource::e83747a5a69e6ae7443c198f4cc990b0>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -59,6 +59,7 @@ var rules = {
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
+    '@atlaskit/design-system/use-field-message-wrapper': 'warn',
     '@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',

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::e2157edd1fabfe25390d7c22a0b63f86>>
+ * @codegen <<SignedSource::ee679166d3c39a30db50d8cf45cd3cb7>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -43,6 +43,7 @@ var rules = {
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
+    '@atlaskit/design-system/use-field-message-wrapper': 'warn',
     '@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',

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::b3fadf2e122fc30002c54a922fc55a1f>>
+ * @codegen <<SignedSource::11c250f8fdbf2787edb36243db5e3e07>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -42,6 +42,7 @@ var rules = {
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
+    '@atlaskit/design-system/use-field-message-wrapper': 'warn',
     '@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',

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::62347cf64e4ac99b927fce9d1a2bd894>>
+ * @codegen <<SignedSource::3ae0af16a58563d27e580593a73961d4>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -57,6 +57,7 @@ import useCorrectField from './use-correct-field';
 import useCxFunctionInXcss from './use-cx-function-in-xcss';
 import useDatetimePickerCalendarButton from './use-datetime-picker-calendar-button';
 import useDrawerLabel from './use-drawer-label';
+import useFieldMessageWrapper from './use-field-message-wrapper';
 import useHeading from './use-heading';
 import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-card';
 import useHrefInLinkItem from './use-href-in-link-item';
@@ -129,6 +130,7 @@ export var rules = {
   'use-cx-function-in-xcss': useCxFunctionInXcss,
   'use-datetime-picker-calendar-button': useDatetimePickerCalendarButton,
   'use-drawer-label': useDrawerLabel,
+  'use-field-message-wrapper': useFieldMessageWrapper,
   'use-heading': useHeading,
   'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,
   'use-href-in-link-item': useHrefInLinkItem,

package/dist/esm/rules/use-field-message-wrapper/index.js

@@ -0,0 +1,119 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+var FORM_PACKAGE = '@atlaskit/form';
+var MESSAGE_COMPONENTS = ['ErrorMessage', 'HelperMessage', 'ValidMessage'];
+var rule = createLintRule({
+  meta: {
+    name: 'use-field-message-wrapper',
+    type: 'suggestion',
+    hasSuggestions: true,
+    docs: {
+      description: 'Encourage use of message wrapper component when using form message components.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      useMessageWrapper: "All ADS form messaging components within a field should be wrapped by the `MessageWrapper` component from the form package. Consider also using the [simplified field implementation](https://atlassian.design/components/form/examples#simple-implementation-1) to handle styling and accessible messaging directly."
+    }
+  },
+  create: function create(context) {
+    var fieldImport;
+    var messageWrapperImport;
+    var messageImports = [];
+    return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        var source = node.source.value;
+
+        // Ignore anomalies
+        if (typeof source !== 'string') {
+          return;
+        }
+        if (!node.specifiers.length) {
+          return;
+        }
+
+        // If it's not from our package, ignore.
+        if (source !== FORM_PACKAGE) {
+          return;
+        }
+        var namedImportSpecifiers = node.specifiers.filter(function (spec) {
+          return isNodeOfType(spec, 'ImportSpecifier');
+        });
+        namedImportSpecifiers.forEach(function (spec) {
+          if (spec.type === 'ImportSpecifier' && 'name' in spec.imported) {
+            var name = spec.imported.name;
+            var local = spec.local;
+            if (MESSAGE_COMPONENTS.includes(name)) {
+              messageImports.push(local);
+            } else if (name === 'Field') {
+              fieldImport = local;
+            } else if (name === 'MessageWrapper') {
+              messageWrapperImport = local;
+            }
+          }
+        });
+      },
+      JSXElement: function JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        var name = node.openingElement.name.name;
+
+        // if it's not a message component, skip
+        if (messageImports.length === 0 || !messageImports.find(function (imp) {
+          return imp.name === name;
+        })) {
+          return;
+        }
+
+        // if no field import exists, skip. It needs to be within our field
+        if (!fieldImport) {
+          return;
+        }
+
+        // If no message wrapper import exists, then it's definitely an error
+        if (!messageWrapperImport) {
+          return context.report({
+            node: node,
+            messageId: 'useMessageWrapper'
+          });
+        }
+
+        // check for if field and message wrapper are parents
+        var _node = node;
+        var hasParentField = false;
+        var hasParentMessageWrapper = false;
+        while (isNodeOfType(_node, 'JSXElement') && isNodeOfType(_node.openingElement.name, 'JSXIdentifier') && !hasParentField) {
+          var _name = _node.openingElement.name.name;
+          hasParentField = hasParentField || _name === fieldImport.name;
+          hasParentMessageWrapper = hasParentMessageWrapper || _name === messageWrapperImport.name;
+          _node = _node.parent;
+          // Skip up until a JSXElement is reached
+          if (isNodeOfType(_node, 'JSXFragment') || isNodeOfType(_node, 'ArrowFunctionExpression') || isNodeOfType(_node, 'JSXExpressionContainer')) {
+            while (_node && !isNodeOfType(_node, 'JSXElement') && !isNodeOfType(_node, 'Program')) {
+              _node = _node.parent;
+            }
+          }
+        }
+
+        // if not field, skip because this doesn't matter
+        if (!hasParentField) {
+          return;
+        }
+
+        // if it has a message wrapper, skip
+        if (hasParentMessageWrapper) {
+          return;
+        }
+        context.report({
+          node: node,
+          messageId: 'useMessageWrapper'
+        });
+      }
+    };
+  }
+});
+export default rule;

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d7a0407a6c6b10bfbba790523d06f97d>>
+ * @codegen <<SignedSource::8ba8f062c0c8a49b3776a111d41fa3bf>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Linter } from 'eslint';

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e632a96e9bae920c23e25114f40e3c0d>>
+ * @codegen <<SignedSource::e83747a5a69e6ae7443c198f4cc990b0>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { ESLint } from 'eslint';

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e2157edd1fabfe25390d7c22a0b63f86>>
+ * @codegen <<SignedSource::ee679166d3c39a30db50d8cf45cd3cb7>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Linter } from 'eslint';

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b3fadf2e122fc30002c54a922fc55a1f>>
+ * @codegen <<SignedSource::11c250f8fdbf2787edb36243db5e3e07>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { ESLint } from 'eslint';

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::62347cf64e4ac99b927fce9d1a2bd894>>
+ * @codegen <<SignedSource::3ae0af16a58563d27e580593a73961d4>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Rule } from 'eslint';

package/dist/types/rules/use-field-message-wrapper/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::d7a0407a6c6b10bfbba790523d06f97d>>
+ * @codegen <<SignedSource::8ba8f062c0c8a49b3776a111d41fa3bf>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Linter } from 'eslint';

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e632a96e9bae920c23e25114f40e3c0d>>
+ * @codegen <<SignedSource::e83747a5a69e6ae7443c198f4cc990b0>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { ESLint } from 'eslint';

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::e2157edd1fabfe25390d7c22a0b63f86>>
+ * @codegen <<SignedSource::ee679166d3c39a30db50d8cf45cd3cb7>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Linter } from 'eslint';

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::b3fadf2e122fc30002c54a922fc55a1f>>
+ * @codegen <<SignedSource::11c250f8fdbf2787edb36243db5e3e07>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { ESLint } from 'eslint';

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

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::62347cf64e4ac99b927fce9d1a2bd894>>
+ * @codegen <<SignedSource::3ae0af16a58563d27e580593a73961d4>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Rule } from 'eslint';

package/dist/types-ts4.5/rules/use-field-message-wrapper/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+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.27.1",
+	"version": "13.28.0",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
 	"publishConfig": {