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

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 13.29.0
+
+### Minor Changes
+
+- [`3e6f7b52a2689`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3e6f7b52a2689) -
+  Add rule to suggest usage of CharacterCounterField when using Textfield or Textarea with
+  minLength/maxLength properties
+
 ## 13.28.0
 
 ### Minor Changes

package/README.md

@@ -98,6 +98,7 @@ module.exports = {
 | <a href="./packages/design-system/eslint-plugin/src/rules/no-utility-icons/README.md">no-utility-icons</a>                                                                           | Disallow use of deprecated utility icons, in favor of core icons with `size="small"`.                                                                                                                                                                                                                               | Yes         | Yes     | Yes         |
 | <a href="./packages/design-system/eslint-plugin/src/rules/prefer-primitives/README.md">prefer-primitives</a>                                                                         | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule.                                                                                                                                    |             |         |             |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-button-group-label/README.md">use-button-group-label</a>                                                               | Ensures button groups 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-character-counter-field/README.md">use-character-counter-field</a>                                                     | Suggests using CharacterCounterField when Textfield or Textarea components have maxLength or minLength props within a Form.                                                                                                                                                                                         | Yes         |         |             |
 | <a href="./packages/design-system/eslint-plugin/src/rules/use-correct-field/README.md">use-correct-field</a>                                                                         | Ensure makers use appropriate field component for their respective form elements.                                                                                                                                                                                                                                   | Yes         | Yes     | Yes         |
 | <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         |

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::8ba8f062c0c8a49b3776a111d41fa3bf>>
+ * @codegen <<SignedSource::131350ebc877f42247042c6e7327fe18>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -62,6 +62,7 @@ var rules = {
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-character-counter-field': 'warn',
     '@atlaskit/design-system/use-correct-field': 'warn',
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': '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::e83747a5a69e6ae7443c198f4cc990b0>>
+ * @codegen <<SignedSource::b3ddf9ee0a27aaf8a318a6579d48ce99>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -61,6 +61,7 @@ var rules = {
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-character-counter-field': 'warn',
     '@atlaskit/design-system/use-correct-field': 'warn',
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': '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::ee679166d3c39a30db50d8cf45cd3cb7>>
+ * @codegen <<SignedSource::ba71ef89188bdc20d0ec948cc00f6436>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -45,6 +45,7 @@ var rules = {
     '@atlaskit/design-system/no-unused-css-map': 'warn',
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-character-counter-field': 'warn',
     '@atlaskit/design-system/use-correct-field': 'warn',
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': '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::11c250f8fdbf2787edb36243db5e3e07>>
+ * @codegen <<SignedSource::5c119e0ab08e1f39d471b2b827bbb4de>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -44,6 +44,7 @@ var rules = {
     '@atlaskit/design-system/no-unused-css-map': 'warn',
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-character-counter-field': 'warn',
     '@atlaskit/design-system/use-correct-field': 'warn',
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',

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

@@ -54,6 +54,7 @@ var _noUnusedCssMap = _interopRequireDefault(require("./no-unused-css-map"));
 var _noUtilityIcons = _interopRequireDefault(require("./no-utility-icons"));
 var _preferPrimitives = _interopRequireDefault(require("./prefer-primitives"));
 var _useButtonGroupLabel = _interopRequireDefault(require("./use-button-group-label"));
+var _useCharacterCounterField = _interopRequireDefault(require("./use-character-counter-field"));
 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"));
@@ -79,7 +80,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::3ae0af16a58563d27e580593a73961d4>>
+ * @codegen <<SignedSource::02be73e0813b6f22038f0f3f2ad6865d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -133,6 +134,7 @@ var rules = exports.rules = {
   'no-utility-icons': _noUtilityIcons.default,
   'prefer-primitives': _preferPrimitives.default,
   'use-button-group-label': _useButtonGroupLabel.default,
+  'use-character-counter-field': _useCharacterCounterField.default,
   'use-correct-field': _useCorrectField.default,
   'use-cx-function-in-xcss': _useCxFunctionInXcss.default,
   'use-datetime-picker-calendar-button': _useDatetimePickerCalendarButton.default,

package/dist/cjs/rules/use-character-counter-field/index.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ruleName = exports.message = exports.default = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _jsxElement = require("../../ast-nodes/jsx-element");
+var _createRule = require("../utils/create-rule");
+var TEXTFIELD_PACKAGE = '@atlaskit/textfield';
+var TEXTAREA_PACKAGE = '@atlaskit/textarea';
+var FORM_PACKAGE = '@atlaskit/form';
+var message = exports.message = 'When using `maxLength` or `minLength` props with Textfield/Textarea inside a Form, use `CharacterCounterField` from `@atlaskit/form` instead of Field and remove the props from the Textfield/Textarea. This ensures accessibility through real time feedback and aligns with the design system. Read more about [character counter fields](https://atlassian.design/components/form/examples#character-counter-field)';
+var ruleName = exports.ruleName = __dirname.split('/').slice(-1)[0];
+
+/**
+ * Check if a node is inside a Form component or Field component
+ */
+function isInsideFormOrField(node, formComponentNames) {
+  var current = node;
+
+  // Traverse up the AST to find parent JSX elements
+  while (current) {
+    var parent = current.parent;
+    if (!parent) {
+      break;
+    }
+
+    // Check if parent is a JSXElement with a name we're tracking
+    if ((0, _eslintCodemodUtils.isNodeOfType)(parent, 'JSXElement') && (0, _eslintCodemodUtils.isNodeOfType)(parent.openingElement.name, 'JSXIdentifier')) {
+      var parentName = parent.openingElement.name.name;
+
+      // Check if this is a Form component or Field component
+      if (formComponentNames.has(parentName)) {
+        return true;
+      }
+    }
+
+    // Check if parent is inside a JSXExpressionContainer (render prop pattern)
+    // This handles: <Field>{({ fieldProps }) => <Textfield {...fieldProps} />}</Field>
+    if ((0, _eslintCodemodUtils.isNodeOfType)(parent, 'JSXExpressionContainer')) {
+      // Continue traversing up to find the Field/Form
+      current = parent;
+      continue;
+    }
+
+    // Check if parent is an arrow function (render prop)
+    if ((0, _eslintCodemodUtils.isNodeOfType)(parent, 'ArrowFunctionExpression')) {
+      current = parent;
+      continue;
+    }
+    current = parent;
+  }
+  return false;
+}
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: ruleName,
+    type: 'suggestion',
+    docs: {
+      description: 'Suggests using CharacterCounterField when Textfield or Textarea components have maxLength or minLength props within a Form.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      useCharacterCounterField: message
+    }
+  },
+  create: function create(context) {
+    // Track imported component names
+    var importedComponents = new Map();
+    var formComponentNames = new Set();
+    return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        var source = node.source.value;
+        if (typeof source !== 'string') {
+          return;
+        }
+
+        // Track Form package imports (Form, Field, etc.)
+        if (source === FORM_PACKAGE) {
+          node.specifiers.forEach(function (spec) {
+            if ((0, _eslintCodemodUtils.isNodeOfType)(spec, 'ImportDefaultSpecifier')) {
+              // Default import: import Form from '@atlaskit/form'
+              formComponentNames.add(spec.local.name);
+            } else if ((0, _eslintCodemodUtils.isNodeOfType)(spec, 'ImportSpecifier')) {
+              // Named import: import { Form, Field } from '@atlaskit/form'
+              formComponentNames.add(spec.local.name);
+            }
+          });
+          return;
+        }
+
+        // Track Textfield and Textarea imports
+        if (source === TEXTFIELD_PACKAGE || source === TEXTAREA_PACKAGE) {
+          var defaultImport = node.specifiers.find(function (spec) {
+            return (0, _eslintCodemodUtils.isNodeOfType)(spec, 'ImportDefaultSpecifier');
+          });
+          if (defaultImport && (0, _eslintCodemodUtils.isNodeOfType)(defaultImport, 'ImportDefaultSpecifier')) {
+            var localName = defaultImport.local.name;
+            importedComponents.set(localName, {
+              localName: localName,
+              package: source
+            });
+          }
+        }
+      },
+      JSXElement: function JSXElement(node) {
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
+          return;
+        }
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        var elementName = node.openingElement.name.name;
+
+        // Check if this element is one of our tracked components
+        var componentInfo = importedComponents.get(elementName);
+        if (!componentInfo) {
+          return;
+        }
+
+        // Check if the component has maxLength or minLength props
+        var hasMaxLength = _jsxElement.JSXElementHelper.getAttributeByName(node, 'maxLength');
+        var hasMinLength = _jsxElement.JSXElementHelper.getAttributeByName(node, 'minLength');
+        if (hasMaxLength || hasMinLength) {
+          // Only warn if inside a Form or Field component
+          if (isInsideFormOrField(node, formComponentNames)) {
+            context.report({
+              node: node,
+              messageId: 'useCharacterCounterField'
+            });
+          }
+        }
+      }
+    };
+  }
+});
+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::8ba8f062c0c8a49b3776a111d41fa3bf>>
+ * @codegen <<SignedSource::131350ebc877f42247042c6e7327fe18>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -56,6 +56,7 @@ const rules = {
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-character-counter-field': 'warn',
     '@atlaskit/design-system/use-correct-field': 'warn',
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': '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::e83747a5a69e6ae7443c198f4cc990b0>>
+ * @codegen <<SignedSource::b3ddf9ee0a27aaf8a318a6579d48ce99>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -55,6 +55,7 @@ const rules = {
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-character-counter-field': 'warn',
     '@atlaskit/design-system/use-correct-field': 'warn',
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': '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::ee679166d3c39a30db50d8cf45cd3cb7>>
+ * @codegen <<SignedSource::ba71ef89188bdc20d0ec948cc00f6436>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -39,6 +39,7 @@ const rules = {
     '@atlaskit/design-system/no-unused-css-map': 'warn',
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-character-counter-field': 'warn',
     '@atlaskit/design-system/use-correct-field': 'warn',
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': '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::11c250f8fdbf2787edb36243db5e3e07>>
+ * @codegen <<SignedSource::5c119e0ab08e1f39d471b2b827bbb4de>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -38,6 +38,7 @@ const rules = {
     '@atlaskit/design-system/no-unused-css-map': 'warn',
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-character-counter-field': 'warn',
     '@atlaskit/design-system/use-correct-field': 'warn',
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': '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::3ae0af16a58563d27e580593a73961d4>>
+ * @codegen <<SignedSource::02be73e0813b6f22038f0f3f2ad6865d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -53,6 +53,7 @@ import noUnusedCssMap from './no-unused-css-map';
 import noUtilityIcons from './no-utility-icons';
 import preferPrimitives from './prefer-primitives';
 import useButtonGroupLabel from './use-button-group-label';
+import useCharacterCounterField from './use-character-counter-field';
 import useCorrectField from './use-correct-field';
 import useCxFunctionInXcss from './use-cx-function-in-xcss';
 import useDatetimePickerCalendarButton from './use-datetime-picker-calendar-button';
@@ -126,6 +127,7 @@ export const rules = {
   'no-utility-icons': noUtilityIcons,
   'prefer-primitives': preferPrimitives,
   'use-button-group-label': useButtonGroupLabel,
+  'use-character-counter-field': useCharacterCounterField,
   'use-correct-field': useCorrectField,
   'use-cx-function-in-xcss': useCxFunctionInXcss,
   'use-datetime-picker-calendar-button': useDatetimePickerCalendarButton,

package/dist/es2019/rules/use-character-counter-field/index.js

@@ -0,0 +1,131 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { JSXElementHelper } from '../../ast-nodes/jsx-element';
+import { createLintRule } from '../utils/create-rule';
+const TEXTFIELD_PACKAGE = '@atlaskit/textfield';
+const TEXTAREA_PACKAGE = '@atlaskit/textarea';
+const FORM_PACKAGE = '@atlaskit/form';
+export const message = 'When using `maxLength` or `minLength` props with Textfield/Textarea inside a Form, use `CharacterCounterField` from `@atlaskit/form` instead of Field and remove the props from the Textfield/Textarea. This ensures accessibility through real time feedback and aligns with the design system. Read more about [character counter fields](https://atlassian.design/components/form/examples#character-counter-field)';
+export const ruleName = __dirname.split('/').slice(-1)[0];
+
+/**
+ * Check if a node is inside a Form component or Field component
+ */
+function isInsideFormOrField(node, formComponentNames) {
+  let current = node;
+
+  // Traverse up the AST to find parent JSX elements
+  while (current) {
+    const parent = current.parent;
+    if (!parent) {
+      break;
+    }
+
+    // Check if parent is a JSXElement with a name we're tracking
+    if (isNodeOfType(parent, 'JSXElement') && isNodeOfType(parent.openingElement.name, 'JSXIdentifier')) {
+      const parentName = parent.openingElement.name.name;
+
+      // Check if this is a Form component or Field component
+      if (formComponentNames.has(parentName)) {
+        return true;
+      }
+    }
+
+    // Check if parent is inside a JSXExpressionContainer (render prop pattern)
+    // This handles: <Field>{({ fieldProps }) => <Textfield {...fieldProps} />}</Field>
+    if (isNodeOfType(parent, 'JSXExpressionContainer')) {
+      // Continue traversing up to find the Field/Form
+      current = parent;
+      continue;
+    }
+
+    // Check if parent is an arrow function (render prop)
+    if (isNodeOfType(parent, 'ArrowFunctionExpression')) {
+      current = parent;
+      continue;
+    }
+    current = parent;
+  }
+  return false;
+}
+const rule = createLintRule({
+  meta: {
+    name: ruleName,
+    type: 'suggestion',
+    docs: {
+      description: 'Suggests using CharacterCounterField when Textfield or Textarea components have maxLength or minLength props within a Form.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      useCharacterCounterField: message
+    }
+  },
+  create(context) {
+    // Track imported component names
+    const importedComponents = new Map();
+    const formComponentNames = new Set();
+    return {
+      ImportDeclaration(node) {
+        const source = node.source.value;
+        if (typeof source !== 'string') {
+          return;
+        }
+
+        // Track Form package imports (Form, Field, etc.)
+        if (source === FORM_PACKAGE) {
+          node.specifiers.forEach(spec => {
+            if (isNodeOfType(spec, 'ImportDefaultSpecifier')) {
+              // Default import: import Form from '@atlaskit/form'
+              formComponentNames.add(spec.local.name);
+            } else if (isNodeOfType(spec, 'ImportSpecifier')) {
+              // Named import: import { Form, Field } from '@atlaskit/form'
+              formComponentNames.add(spec.local.name);
+            }
+          });
+          return;
+        }
+
+        // Track Textfield and Textarea imports
+        if (source === TEXTFIELD_PACKAGE || source === TEXTAREA_PACKAGE) {
+          const defaultImport = node.specifiers.find(spec => isNodeOfType(spec, 'ImportDefaultSpecifier'));
+          if (defaultImport && isNodeOfType(defaultImport, 'ImportDefaultSpecifier')) {
+            const localName = defaultImport.local.name;
+            importedComponents.set(localName, {
+              localName,
+              package: source
+            });
+          }
+        }
+      },
+      JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        const elementName = node.openingElement.name.name;
+
+        // Check if this element is one of our tracked components
+        const componentInfo = importedComponents.get(elementName);
+        if (!componentInfo) {
+          return;
+        }
+
+        // Check if the component has maxLength or minLength props
+        const hasMaxLength = JSXElementHelper.getAttributeByName(node, 'maxLength');
+        const hasMinLength = JSXElementHelper.getAttributeByName(node, 'minLength');
+        if (hasMaxLength || hasMinLength) {
+          // Only warn if inside a Form or Field component
+          if (isInsideFormOrField(node, formComponentNames)) {
+            context.report({
+              node,
+              messageId: 'useCharacterCounterField'
+            });
+          }
+        }
+      }
+    };
+  }
+});
+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::8ba8f062c0c8a49b3776a111d41fa3bf>>
+ * @codegen <<SignedSource::131350ebc877f42247042c6e7327fe18>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -56,6 +56,7 @@ var rules = {
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-character-counter-field': 'warn',
     '@atlaskit/design-system/use-correct-field': 'warn',
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': '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::e83747a5a69e6ae7443c198f4cc990b0>>
+ * @codegen <<SignedSource::b3ddf9ee0a27aaf8a318a6579d48ce99>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -55,6 +55,7 @@ var rules = {
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/prefer-primitives': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-character-counter-field': 'warn',
     '@atlaskit/design-system/use-correct-field': 'warn',
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': '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::ee679166d3c39a30db50d8cf45cd3cb7>>
+ * @codegen <<SignedSource::ba71ef89188bdc20d0ec948cc00f6436>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -39,6 +39,7 @@ var rules = {
     '@atlaskit/design-system/no-unused-css-map': 'warn',
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-character-counter-field': 'warn',
     '@atlaskit/design-system/use-correct-field': 'warn',
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': '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::11c250f8fdbf2787edb36243db5e3e07>>
+ * @codegen <<SignedSource::5c119e0ab08e1f39d471b2b827bbb4de>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -38,6 +38,7 @@ var rules = {
     '@atlaskit/design-system/no-unused-css-map': 'warn',
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/use-button-group-label': 'warn',
+    '@atlaskit/design-system/use-character-counter-field': 'warn',
     '@atlaskit/design-system/use-correct-field': 'warn',
     '@atlaskit/design-system/use-cx-function-in-xcss': 'error',
     '@atlaskit/design-system/use-datetime-picker-calendar-button': '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::3ae0af16a58563d27e580593a73961d4>>
+ * @codegen <<SignedSource::02be73e0813b6f22038f0f3f2ad6865d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -53,6 +53,7 @@ import noUnusedCssMap from './no-unused-css-map';
 import noUtilityIcons from './no-utility-icons';
 import preferPrimitives from './prefer-primitives';
 import useButtonGroupLabel from './use-button-group-label';
+import useCharacterCounterField from './use-character-counter-field';
 import useCorrectField from './use-correct-field';
 import useCxFunctionInXcss from './use-cx-function-in-xcss';
 import useDatetimePickerCalendarButton from './use-datetime-picker-calendar-button';
@@ -126,6 +127,7 @@ export var rules = {
   'no-utility-icons': noUtilityIcons,
   'prefer-primitives': preferPrimitives,
   'use-button-group-label': useButtonGroupLabel,
+  'use-character-counter-field': useCharacterCounterField,
   'use-correct-field': useCorrectField,
   'use-cx-function-in-xcss': useCxFunctionInXcss,
   'use-datetime-picker-calendar-button': useDatetimePickerCalendarButton,

package/dist/esm/rules/use-character-counter-field/index.js

@@ -0,0 +1,133 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { JSXElementHelper } from '../../ast-nodes/jsx-element';
+import { createLintRule } from '../utils/create-rule';
+var TEXTFIELD_PACKAGE = '@atlaskit/textfield';
+var TEXTAREA_PACKAGE = '@atlaskit/textarea';
+var FORM_PACKAGE = '@atlaskit/form';
+export var message = 'When using `maxLength` or `minLength` props with Textfield/Textarea inside a Form, use `CharacterCounterField` from `@atlaskit/form` instead of Field and remove the props from the Textfield/Textarea. This ensures accessibility through real time feedback and aligns with the design system. Read more about [character counter fields](https://atlassian.design/components/form/examples#character-counter-field)';
+export var ruleName = __dirname.split('/').slice(-1)[0];
+
+/**
+ * Check if a node is inside a Form component or Field component
+ */
+function isInsideFormOrField(node, formComponentNames) {
+  var current = node;
+
+  // Traverse up the AST to find parent JSX elements
+  while (current) {
+    var parent = current.parent;
+    if (!parent) {
+      break;
+    }
+
+    // Check if parent is a JSXElement with a name we're tracking
+    if (isNodeOfType(parent, 'JSXElement') && isNodeOfType(parent.openingElement.name, 'JSXIdentifier')) {
+      var parentName = parent.openingElement.name.name;
+
+      // Check if this is a Form component or Field component
+      if (formComponentNames.has(parentName)) {
+        return true;
+      }
+    }
+
+    // Check if parent is inside a JSXExpressionContainer (render prop pattern)
+    // This handles: <Field>{({ fieldProps }) => <Textfield {...fieldProps} />}</Field>
+    if (isNodeOfType(parent, 'JSXExpressionContainer')) {
+      // Continue traversing up to find the Field/Form
+      current = parent;
+      continue;
+    }
+
+    // Check if parent is an arrow function (render prop)
+    if (isNodeOfType(parent, 'ArrowFunctionExpression')) {
+      current = parent;
+      continue;
+    }
+    current = parent;
+  }
+  return false;
+}
+var rule = createLintRule({
+  meta: {
+    name: ruleName,
+    type: 'suggestion',
+    docs: {
+      description: 'Suggests using CharacterCounterField when Textfield or Textarea components have maxLength or minLength props within a Form.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      useCharacterCounterField: message
+    }
+  },
+  create: function create(context) {
+    // Track imported component names
+    var importedComponents = new Map();
+    var formComponentNames = new Set();
+    return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        var source = node.source.value;
+        if (typeof source !== 'string') {
+          return;
+        }
+
+        // Track Form package imports (Form, Field, etc.)
+        if (source === FORM_PACKAGE) {
+          node.specifiers.forEach(function (spec) {
+            if (isNodeOfType(spec, 'ImportDefaultSpecifier')) {
+              // Default import: import Form from '@atlaskit/form'
+              formComponentNames.add(spec.local.name);
+            } else if (isNodeOfType(spec, 'ImportSpecifier')) {
+              // Named import: import { Form, Field } from '@atlaskit/form'
+              formComponentNames.add(spec.local.name);
+            }
+          });
+          return;
+        }
+
+        // Track Textfield and Textarea imports
+        if (source === TEXTFIELD_PACKAGE || source === TEXTAREA_PACKAGE) {
+          var defaultImport = node.specifiers.find(function (spec) {
+            return isNodeOfType(spec, 'ImportDefaultSpecifier');
+          });
+          if (defaultImport && isNodeOfType(defaultImport, 'ImportDefaultSpecifier')) {
+            var localName = defaultImport.local.name;
+            importedComponents.set(localName, {
+              localName: localName,
+              package: source
+            });
+          }
+        }
+      },
+      JSXElement: function JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        var elementName = node.openingElement.name.name;
+
+        // Check if this element is one of our tracked components
+        var componentInfo = importedComponents.get(elementName);
+        if (!componentInfo) {
+          return;
+        }
+
+        // Check if the component has maxLength or minLength props
+        var hasMaxLength = JSXElementHelper.getAttributeByName(node, 'maxLength');
+        var hasMinLength = JSXElementHelper.getAttributeByName(node, 'minLength');
+        if (hasMaxLength || hasMinLength) {
+          // Only warn if inside a Form or Field component
+          if (isInsideFormOrField(node, formComponentNames)) {
+            context.report({
+              node: node,
+              messageId: 'useCharacterCounterField'
+            });
+          }
+        }
+      }
+    };
+  }
+});
+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::8ba8f062c0c8a49b3776a111d41fa3bf>>
+ * @codegen <<SignedSource::131350ebc877f42247042c6e7327fe18>>
  * @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::e83747a5a69e6ae7443c198f4cc990b0>>
+ * @codegen <<SignedSource::b3ddf9ee0a27aaf8a318a6579d48ce99>>
  * @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::ee679166d3c39a30db50d8cf45cd3cb7>>
+ * @codegen <<SignedSource::ba71ef89188bdc20d0ec948cc00f6436>>
  * @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::11c250f8fdbf2787edb36243db5e3e07>>
+ * @codegen <<SignedSource::5c119e0ab08e1f39d471b2b827bbb4de>>
  * @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::3ae0af16a58563d27e580593a73961d4>>
+ * @codegen <<SignedSource::02be73e0813b6f22038f0f3f2ad6865d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Rule } from 'eslint';

package/dist/types/rules/use-character-counter-field/index.d.ts

@@ -0,0 +1,5 @@
+import type { Rule } from 'eslint';
+export declare const message = "When using `maxLength` or `minLength` props with Textfield/Textarea inside a Form, use `CharacterCounterField` from `@atlaskit/form` instead of Field and remove the props from the Textfield/Textarea. This ensures accessibility through real time feedback and aligns with the design system. Read more about [character counter fields](https://atlassian.design/components/form/examples#character-counter-field)";
+export declare const ruleName: string;
+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::8ba8f062c0c8a49b3776a111d41fa3bf>>
+ * @codegen <<SignedSource::131350ebc877f42247042c6e7327fe18>>
  * @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::e83747a5a69e6ae7443c198f4cc990b0>>
+ * @codegen <<SignedSource::b3ddf9ee0a27aaf8a318a6579d48ce99>>
  * @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::ee679166d3c39a30db50d8cf45cd3cb7>>
+ * @codegen <<SignedSource::ba71ef89188bdc20d0ec948cc00f6436>>
  * @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::11c250f8fdbf2787edb36243db5e3e07>>
+ * @codegen <<SignedSource::5c119e0ab08e1f39d471b2b827bbb4de>>
  * @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::3ae0af16a58563d27e580593a73961d4>>
+ * @codegen <<SignedSource::02be73e0813b6f22038f0f3f2ad6865d>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import type { Rule } from 'eslint';

package/dist/types-ts4.5/rules/use-character-counter-field/index.d.ts

@@ -0,0 +1,5 @@
+import type { Rule } from 'eslint';
+export declare const message = "When using `maxLength` or `minLength` props with Textfield/Textarea inside a Form, use `CharacterCounterField` from `@atlaskit/form` instead of Field and remove the props from the Textfield/Textarea. This ensures accessibility through real time feedback and aligns with the design system. Read more about [character counter fields](https://atlassian.design/components/form/examples#character-counter-field)";
+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.28.0",
+	"version": "13.29.0",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
 	"publishConfig": {