@atlaskit/eslint-plugin-design-system 13.17.3 → 13.18.1

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 13.18.1
+
+### Patch Changes
+
+- [#188850](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/188850)
+  [`8b19a85abe51e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8b19a85abe51e) -
+  Add nmore cases to the new use correct field rule.
+- Updated dependencies
+
+## 13.18.0
+
+### Minor Changes
+
+- [#187514](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/187514)
+  [`c159d1d45ed81`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c159d1d45ed81) -
+  Add new rule to check that inputs use the correct field component from form.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 13.17.3
 
 ### Patch Changes

package/README.md

@@ -94,6 +94,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-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         |
 | <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         |

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::a8f7f6388f0499adc9db0228b7426aee>>
+ * @codegen <<SignedSource::8fb6e53ac7d9be7b9252dd64ec022d26>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -57,6 +57,7 @@ var _default = exports.default = {
     '@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-correct-field': 'warn',
     '@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',

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::aaf4f1ee2f2db236ebed7b77de426181>>
+ * @codegen <<SignedSource::b727e6e2b1813b88da0df6ff6083be3c>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -56,6 +56,7 @@ var _default = exports.default = {
     '@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-correct-field': 'warn',
     '@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',

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::10f372e16c048db9bfb1bc36cf48421c>>
+ * @codegen <<SignedSource::af48ffd75d906d008c5701554187b606>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -43,6 +43,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/use-button-group-label': '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',
     '@atlaskit/design-system/use-drawer-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::608f46f9cc8653226152a8edc34849d6>>
+ * @codegen <<SignedSource::96e803ae8ae873736bab690b2af62bed>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -42,6 +42,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/use-button-group-label': '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',
     '@atlaskit/design-system/use-drawer-label': 'warn',

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

@@ -50,6 +50,7 @@ var _noUnsupportedDragAndDropLibraries = _interopRequireDefault(require("./no-un
 var _noUtilityIcons = _interopRequireDefault(require("./no-utility-icons"));
 var _preferPrimitives = _interopRequireDefault(require("./prefer-primitives"));
 var _useButtonGroupLabel = _interopRequireDefault(require("./use-button-group-label"));
+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"));
@@ -71,7 +72,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::c3ee5646fc648d2510a70195a04d7fe9>>
+ * @codegen <<SignedSource::3c4282c17de41bbfb755836f00326036>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -121,6 +122,7 @@ var rules = exports.rules = {
   'no-utility-icons': _noUtilityIcons.default,
   'prefer-primitives': _preferPrimitives.default,
   'use-button-group-label': _useButtonGroupLabel.default,
+  'use-correct-field': _useCorrectField.default,
   'use-cx-function-in-xcss': _useCxFunctionInXcss.default,
   'use-datetime-picker-calendar-button': _useDatetimePickerCalendarButton.default,
   'use-drawer-label': _useDrawerLabel.default,

package/dist/cjs/rules/no-utility-icons/checks.js

@@ -11,7 +11,6 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
 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; }
 var specialCases = {
-  '@atlaskit/icon/utility/cross': '@atlaskit/icon/core/close',
   '@atlaskit/icon/utility/migration/cross--editor-close': '@atlaskit/icon/core/migration/close--editor-close'
 };
 var iconPropsinNewButton = ['icon', 'iconBefore', 'iconAfter'];

package/dist/cjs/rules/use-correct-field/index.js

@@ -0,0 +1,186 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRangeFieldMessage = exports.useCheckboxFieldMessage = exports.default = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+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; }
+var specialFieldsByImport = {
+  '@atlaskit/checkbox': {
+    component: 'Checkbox',
+    field: 'CheckboxField',
+    local: undefined
+  },
+  '@atlaskit/range': {
+    component: 'Range',
+    field: 'RangeField',
+    local: undefined
+  },
+  '@atlaskit/toggle': {
+    component: 'Toggle',
+    field: 'CheckboxField',
+    local: undefined
+  }
+};
+var useCheckboxFieldMessage = exports.useCheckboxFieldMessage = 'Convert Field to CheckboxField';
+var useRangeFieldMessage = exports.useRangeFieldMessage = 'Convert Field to RangeField';
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'use-correct-field',
+    type: 'suggestion',
+    fixable: 'code',
+    hasSuggestions: true,
+    docs: {
+      description: 'Ensure makers use appropriate field component for their respective form elements.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      useCheckboxField: 'Checkbox components should use the `CheckboxField` component',
+      useRangeField: 'Range components should use the `RangeField` component',
+      useCheckboxFieldForToggle: 'Toggle components should use the `CheckboxField` component'
+    }
+  },
+  create: function create(context) {
+    var fieldImport;
+    var allPackages = [];
+    return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        var source = node.source.value;
+        if (typeof source !== 'string') {
+          return;
+        }
+        if (!node.specifiers.length) {
+          return;
+        }
+        var defaultImport = node.specifiers.filter(function (spec) {
+          return (0, _eslintCodemodUtils.isNodeOfType)(spec, 'ImportDefaultSpecifier');
+        });
+        if (source in specialFieldsByImport) {
+          allPackages.push(node);
+          // set local to local value
+          if (defaultImport.length && (0, _eslintCodemodUtils.isNodeOfType)(defaultImport[0], 'ImportDefaultSpecifier') && (0, _eslintCodemodUtils.isNodeOfType)(defaultImport[0].local, 'Identifier')) {
+            specialFieldsByImport[source].local = defaultImport[0].local.name;
+          }
+        }
+        if ('@atlaskit/form' !== source) {
+          return;
+        }
+        var namedImport = node.specifiers.filter(function (spec) {
+          return (0, _eslintCodemodUtils.isNodeOfType)(spec, 'ImportSpecifier');
+        });
+        if (namedImport.length && namedImport[0].type === 'ImportSpecifier' && namedImport[0].imported.name === 'Field') {
+          fieldImport = namedImport[0].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 field import, skip
+        if (!fieldImport || name !== fieldImport.name) {
+          return;
+        }
+
+        // If no imports are for the inputs that have special fields, exit early
+        if (allPackages.every(function (n) {
+          return typeof n.source.value !== 'string' || !Object.keys(specialFieldsByImport).includes(n.source.value);
+        })) {
+          return;
+        }
+        var fieldRenderProp = node.children.find(function (c) {
+          return (0, _eslintCodemodUtils.isNodeOfType)(c, 'JSXExpressionContainer');
+        });
+        if (!fieldRenderProp) {
+          return;
+        }
+        // I'm not early exiting because it doesn't work with ts for some reason
+        if ((0, _eslintCodemodUtils.isNodeOfType)(fieldRenderProp, 'JSXExpressionContainer')) {
+          if (!(0, _eslintCodemodUtils.isNodeOfType)(fieldRenderProp.expression, 'ArrowFunctionExpression')) {
+            return;
+          }
+          var q = [fieldRenderProp.expression.body];
+          var found;
+          while (q.length > 0 && !found) {
+            var child = q.pop();
+            if ('children' in child) {
+              var _iterator = _createForOfIteratorHelper(child.children),
+                _step;
+              try {
+                for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                  var innerChild = _step.value;
+                  q.push(innerChild);
+                }
+              } catch (err) {
+                _iterator.e(err);
+              } finally {
+                _iterator.f();
+              }
+            } else if ((0, _eslintCodemodUtils.isNodeOfType)(child, 'BlockStatement') && (0, _eslintCodemodUtils.isNodeOfType)(child.body[0], 'ExpressionStatement')) {
+              q.push(child.body[0].expression);
+            }
+            if (!(0, _eslintCodemodUtils.isNodeOfType)(child, 'JSXElement') || !(0, _eslintCodemodUtils.isNodeOfType)(child.openingElement.name, 'JSXIdentifier')) {
+              continue;
+            }
+            var elementName = child.openingElement.name.name;
+            for (var importName in specialFieldsByImport) {
+              // if this child is one of the found component names
+              // then break out of the while loop and use the found object
+              var localName = specialFieldsByImport[importName].local;
+              if (localName === elementName) {
+                found = specialFieldsByImport[importName].component;
+                break;
+              }
+            }
+          }
+          if (!found) {
+            return;
+          }
+
+          // if checkbox is inside of the field's render prop
+          if (found === 'Checkbox' || found === 'Toggle') {
+            context.report({
+              node: node,
+              messageId: found === 'Checkbox' ? 'useCheckboxField' : 'useCheckboxFieldForToggle',
+              suggest: [{
+                desc: useCheckboxFieldMessage,
+                fix: function fix(fixer) {
+                  var fixes = [];
+                  fixes.push(fixer.insertTextBefore(fieldImport, 'CheckboxField, '));
+                  fixes.push(fixer.replaceText(node.openingElement.name, 'CheckboxField'));
+                  node.closingElement && fixes.push(fixer.replaceText(node.closingElement.name, 'CheckboxField'));
+                  return fixes;
+                }
+              }]
+            });
+          } else if (found === 'Range') {
+            context.report({
+              node: node,
+              messageId: 'useRangeField',
+              suggest: [{
+                desc: useRangeFieldMessage,
+                fix: function fix(fixer) {
+                  var fixes = [];
+                  fixes.push(fixer.insertTextBefore(fieldImport, 'RangeField, '));
+                  fixes.push(fixer.replaceText(node.openingElement.name, 'RangeField'));
+                  node.closingElement && fixes.push(fixer.replaceText(node.closingElement.name, 'RangeField'));
+                  return fixes;
+                }
+              }]
+            });
+          }
+        }
+      }
+    };
+  }
+});
+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::a8f7f6388f0499adc9db0228b7426aee>>
+ * @codegen <<SignedSource::8fb6e53ac7d9be7b9252dd64ec022d26>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -52,6 +52,7 @@ export default {
     '@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-correct-field': 'warn',
     '@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',

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::aaf4f1ee2f2db236ebed7b77de426181>>
+ * @codegen <<SignedSource::b727e6e2b1813b88da0df6ff6083be3c>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -51,6 +51,7 @@ export default {
     '@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-correct-field': 'warn',
     '@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',

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::10f372e16c048db9bfb1bc36cf48421c>>
+ * @codegen <<SignedSource::af48ffd75d906d008c5701554187b606>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -38,6 +38,7 @@ export default {
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/use-button-group-label': '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',
     '@atlaskit/design-system/use-drawer-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::608f46f9cc8653226152a8edc34849d6>>
+ * @codegen <<SignedSource::96e803ae8ae873736bab690b2af62bed>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -37,6 +37,7 @@ export default {
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/use-button-group-label': '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',
     '@atlaskit/design-system/use-drawer-label': '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::c3ee5646fc648d2510a70195a04d7fe9>>
+ * @codegen <<SignedSource::3c4282c17de41bbfb755836f00326036>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -48,6 +48,7 @@ import noUnsupportedDragAndDropLibraries from './no-unsupported-drag-and-drop-li
 import noUtilityIcons from './no-utility-icons';
 import preferPrimitives from './prefer-primitives';
 import useButtonGroupLabel from './use-button-group-label';
+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';
@@ -113,6 +114,7 @@ export const rules = {
   'no-utility-icons': noUtilityIcons,
   'prefer-primitives': preferPrimitives,
   'use-button-group-label': useButtonGroupLabel,
+  'use-correct-field': useCorrectField,
   'use-cx-function-in-xcss': useCxFunctionInXcss,
   'use-datetime-picker-calendar-button': useDatetimePickerCalendarButton,
   'use-drawer-label': useDrawerLabel,

package/dist/es2019/rules/no-utility-icons/checks.js

@@ -1,6 +1,5 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 const specialCases = {
-  '@atlaskit/icon/utility/cross': '@atlaskit/icon/core/close',
   '@atlaskit/icon/utility/migration/cross--editor-close': '@atlaskit/icon/core/migration/close--editor-close'
 };
 const iconPropsinNewButton = ['icon', 'iconBefore', 'iconAfter'];

package/dist/es2019/rules/use-correct-field/index.js

@@ -0,0 +1,160 @@
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+const specialFieldsByImport = {
+  '@atlaskit/checkbox': {
+    component: 'Checkbox',
+    field: 'CheckboxField',
+    local: undefined
+  },
+  '@atlaskit/range': {
+    component: 'Range',
+    field: 'RangeField',
+    local: undefined
+  },
+  '@atlaskit/toggle': {
+    component: 'Toggle',
+    field: 'CheckboxField',
+    local: undefined
+  }
+};
+export const useCheckboxFieldMessage = 'Convert Field to CheckboxField';
+export const useRangeFieldMessage = 'Convert Field to RangeField';
+const rule = createLintRule({
+  meta: {
+    name: 'use-correct-field',
+    type: 'suggestion',
+    fixable: 'code',
+    hasSuggestions: true,
+    docs: {
+      description: 'Ensure makers use appropriate field component for their respective form elements.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      useCheckboxField: 'Checkbox components should use the `CheckboxField` component',
+      useRangeField: 'Range components should use the `RangeField` component',
+      useCheckboxFieldForToggle: 'Toggle components should use the `CheckboxField` component'
+    }
+  },
+  create(context) {
+    let fieldImport;
+    const allPackages = [];
+    return {
+      ImportDeclaration(node) {
+        const source = node.source.value;
+        if (typeof source !== 'string') {
+          return;
+        }
+        if (!node.specifiers.length) {
+          return;
+        }
+        const defaultImport = node.specifiers.filter(spec => isNodeOfType(spec, 'ImportDefaultSpecifier'));
+        if (source in specialFieldsByImport) {
+          allPackages.push(node);
+          // set local to local value
+          if (defaultImport.length && isNodeOfType(defaultImport[0], 'ImportDefaultSpecifier') && isNodeOfType(defaultImport[0].local, 'Identifier')) {
+            specialFieldsByImport[source].local = defaultImport[0].local.name;
+          }
+        }
+        if ('@atlaskit/form' !== source) {
+          return;
+        }
+        const namedImport = node.specifiers.filter(spec => isNodeOfType(spec, 'ImportSpecifier'));
+        if (namedImport.length && namedImport[0].type === 'ImportSpecifier' && namedImport[0].imported.name === 'Field') {
+          fieldImport = namedImport[0].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 field import, skip
+        if (!fieldImport || name !== fieldImport.name) {
+          return;
+        }
+
+        // If no imports are for the inputs that have special fields, exit early
+        if (allPackages.every(n => typeof n.source.value !== 'string' || !Object.keys(specialFieldsByImport).includes(n.source.value))) {
+          return;
+        }
+        const fieldRenderProp = node.children.find(c => isNodeOfType(c, 'JSXExpressionContainer'));
+        if (!fieldRenderProp) {
+          return;
+        }
+        // I'm not early exiting because it doesn't work with ts for some reason
+        if (isNodeOfType(fieldRenderProp, 'JSXExpressionContainer')) {
+          if (!isNodeOfType(fieldRenderProp.expression, 'ArrowFunctionExpression')) {
+            return;
+          }
+          const q = [fieldRenderProp.expression.body];
+          let found;
+          while (q.length > 0 && !found) {
+            const child = q.pop();
+            if ('children' in child) {
+              for (const innerChild of child.children) {
+                q.push(innerChild);
+              }
+            } else if (isNodeOfType(child, 'BlockStatement') && isNodeOfType(child.body[0], 'ExpressionStatement')) {
+              q.push(child.body[0].expression);
+            }
+            if (!isNodeOfType(child, 'JSXElement') || !isNodeOfType(child.openingElement.name, 'JSXIdentifier')) {
+              continue;
+            }
+            const elementName = child.openingElement.name.name;
+            for (const importName in specialFieldsByImport) {
+              // if this child is one of the found component names
+              // then break out of the while loop and use the found object
+              const localName = specialFieldsByImport[importName].local;
+              if (localName === elementName) {
+                found = specialFieldsByImport[importName].component;
+                break;
+              }
+            }
+          }
+          if (!found) {
+            return;
+          }
+
+          // if checkbox is inside of the field's render prop
+          if (found === 'Checkbox' || found === 'Toggle') {
+            context.report({
+              node: node,
+              messageId: found === 'Checkbox' ? 'useCheckboxField' : 'useCheckboxFieldForToggle',
+              suggest: [{
+                desc: useCheckboxFieldMessage,
+                fix(fixer) {
+                  const fixes = [];
+                  fixes.push(fixer.insertTextBefore(fieldImport, 'CheckboxField, '));
+                  fixes.push(fixer.replaceText(node.openingElement.name, 'CheckboxField'));
+                  node.closingElement && fixes.push(fixer.replaceText(node.closingElement.name, 'CheckboxField'));
+                  return fixes;
+                }
+              }]
+            });
+          } else if (found === 'Range') {
+            context.report({
+              node: node,
+              messageId: 'useRangeField',
+              suggest: [{
+                desc: useRangeFieldMessage,
+                fix(fixer) {
+                  const fixes = [];
+                  fixes.push(fixer.insertTextBefore(fieldImport, 'RangeField, '));
+                  fixes.push(fixer.replaceText(node.openingElement.name, 'RangeField'));
+                  node.closingElement && fixes.push(fixer.replaceText(node.closingElement.name, 'RangeField'));
+                  return fixes;
+                }
+              }]
+            });
+          }
+        }
+      }
+    };
+  }
+});
+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::a8f7f6388f0499adc9db0228b7426aee>>
+ * @codegen <<SignedSource::8fb6e53ac7d9be7b9252dd64ec022d26>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -52,6 +52,7 @@ export default {
     '@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-correct-field': 'warn',
     '@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',

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::aaf4f1ee2f2db236ebed7b77de426181>>
+ * @codegen <<SignedSource::b727e6e2b1813b88da0df6ff6083be3c>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -51,6 +51,7 @@ export default {
     '@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-correct-field': 'warn',
     '@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',

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::10f372e16c048db9bfb1bc36cf48421c>>
+ * @codegen <<SignedSource::af48ffd75d906d008c5701554187b606>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -38,6 +38,7 @@ export default {
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/use-button-group-label': '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',
     '@atlaskit/design-system/use-drawer-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::608f46f9cc8653226152a8edc34849d6>>
+ * @codegen <<SignedSource::96e803ae8ae873736bab690b2af62bed>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 
@@ -37,6 +37,7 @@ export default {
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/no-utility-icons': 'warn',
     '@atlaskit/design-system/use-button-group-label': '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',
     '@atlaskit/design-system/use-drawer-label': '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::c3ee5646fc648d2510a70195a04d7fe9>>
+ * @codegen <<SignedSource::3c4282c17de41bbfb755836f00326036>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -48,6 +48,7 @@ import noUnsupportedDragAndDropLibraries from './no-unsupported-drag-and-drop-li
 import noUtilityIcons from './no-utility-icons';
 import preferPrimitives from './prefer-primitives';
 import useButtonGroupLabel from './use-button-group-label';
+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';
@@ -113,6 +114,7 @@ export var rules = {
   'no-utility-icons': noUtilityIcons,
   'prefer-primitives': preferPrimitives,
   'use-button-group-label': useButtonGroupLabel,
+  'use-correct-field': useCorrectField,
   'use-cx-function-in-xcss': useCxFunctionInXcss,
   'use-datetime-picker-calendar-button': useDatetimePickerCalendarButton,
   'use-drawer-label': useDrawerLabel,

package/dist/esm/rules/no-utility-icons/checks.js

@@ -4,7 +4,6 @@ function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r)
 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; }
 import { isNodeOfType } from 'eslint-codemod-utils';
 var specialCases = {
-  '@atlaskit/icon/utility/cross': '@atlaskit/icon/core/close',
   '@atlaskit/icon/utility/migration/cross--editor-close': '@atlaskit/icon/core/migration/close--editor-close'
 };
 var iconPropsinNewButton = ['icon', 'iconBefore', 'iconAfter'];

package/dist/esm/rules/use-correct-field/index.js

@@ -0,0 +1,180 @@
+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; }
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+var specialFieldsByImport = {
+  '@atlaskit/checkbox': {
+    component: 'Checkbox',
+    field: 'CheckboxField',
+    local: undefined
+  },
+  '@atlaskit/range': {
+    component: 'Range',
+    field: 'RangeField',
+    local: undefined
+  },
+  '@atlaskit/toggle': {
+    component: 'Toggle',
+    field: 'CheckboxField',
+    local: undefined
+  }
+};
+export var useCheckboxFieldMessage = 'Convert Field to CheckboxField';
+export var useRangeFieldMessage = 'Convert Field to RangeField';
+var rule = createLintRule({
+  meta: {
+    name: 'use-correct-field',
+    type: 'suggestion',
+    fixable: 'code',
+    hasSuggestions: true,
+    docs: {
+      description: 'Ensure makers use appropriate field component for their respective form elements.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      useCheckboxField: 'Checkbox components should use the `CheckboxField` component',
+      useRangeField: 'Range components should use the `RangeField` component',
+      useCheckboxFieldForToggle: 'Toggle components should use the `CheckboxField` component'
+    }
+  },
+  create: function create(context) {
+    var fieldImport;
+    var allPackages = [];
+    return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        var source = node.source.value;
+        if (typeof source !== 'string') {
+          return;
+        }
+        if (!node.specifiers.length) {
+          return;
+        }
+        var defaultImport = node.specifiers.filter(function (spec) {
+          return isNodeOfType(spec, 'ImportDefaultSpecifier');
+        });
+        if (source in specialFieldsByImport) {
+          allPackages.push(node);
+          // set local to local value
+          if (defaultImport.length && isNodeOfType(defaultImport[0], 'ImportDefaultSpecifier') && isNodeOfType(defaultImport[0].local, 'Identifier')) {
+            specialFieldsByImport[source].local = defaultImport[0].local.name;
+          }
+        }
+        if ('@atlaskit/form' !== source) {
+          return;
+        }
+        var namedImport = node.specifiers.filter(function (spec) {
+          return isNodeOfType(spec, 'ImportSpecifier');
+        });
+        if (namedImport.length && namedImport[0].type === 'ImportSpecifier' && namedImport[0].imported.name === 'Field') {
+          fieldImport = namedImport[0].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 field import, skip
+        if (!fieldImport || name !== fieldImport.name) {
+          return;
+        }
+
+        // If no imports are for the inputs that have special fields, exit early
+        if (allPackages.every(function (n) {
+          return typeof n.source.value !== 'string' || !Object.keys(specialFieldsByImport).includes(n.source.value);
+        })) {
+          return;
+        }
+        var fieldRenderProp = node.children.find(function (c) {
+          return isNodeOfType(c, 'JSXExpressionContainer');
+        });
+        if (!fieldRenderProp) {
+          return;
+        }
+        // I'm not early exiting because it doesn't work with ts for some reason
+        if (isNodeOfType(fieldRenderProp, 'JSXExpressionContainer')) {
+          if (!isNodeOfType(fieldRenderProp.expression, 'ArrowFunctionExpression')) {
+            return;
+          }
+          var q = [fieldRenderProp.expression.body];
+          var found;
+          while (q.length > 0 && !found) {
+            var child = q.pop();
+            if ('children' in child) {
+              var _iterator = _createForOfIteratorHelper(child.children),
+                _step;
+              try {
+                for (_iterator.s(); !(_step = _iterator.n()).done;) {
+                  var innerChild = _step.value;
+                  q.push(innerChild);
+                }
+              } catch (err) {
+                _iterator.e(err);
+              } finally {
+                _iterator.f();
+              }
+            } else if (isNodeOfType(child, 'BlockStatement') && isNodeOfType(child.body[0], 'ExpressionStatement')) {
+              q.push(child.body[0].expression);
+            }
+            if (!isNodeOfType(child, 'JSXElement') || !isNodeOfType(child.openingElement.name, 'JSXIdentifier')) {
+              continue;
+            }
+            var elementName = child.openingElement.name.name;
+            for (var importName in specialFieldsByImport) {
+              // if this child is one of the found component names
+              // then break out of the while loop and use the found object
+              var localName = specialFieldsByImport[importName].local;
+              if (localName === elementName) {
+                found = specialFieldsByImport[importName].component;
+                break;
+              }
+            }
+          }
+          if (!found) {
+            return;
+          }
+
+          // if checkbox is inside of the field's render prop
+          if (found === 'Checkbox' || found === 'Toggle') {
+            context.report({
+              node: node,
+              messageId: found === 'Checkbox' ? 'useCheckboxField' : 'useCheckboxFieldForToggle',
+              suggest: [{
+                desc: useCheckboxFieldMessage,
+                fix: function fix(fixer) {
+                  var fixes = [];
+                  fixes.push(fixer.insertTextBefore(fieldImport, 'CheckboxField, '));
+                  fixes.push(fixer.replaceText(node.openingElement.name, 'CheckboxField'));
+                  node.closingElement && fixes.push(fixer.replaceText(node.closingElement.name, 'CheckboxField'));
+                  return fixes;
+                }
+              }]
+            });
+          } else if (found === 'Range') {
+            context.report({
+              node: node,
+              messageId: 'useRangeField',
+              suggest: [{
+                desc: useRangeFieldMessage,
+                fix: function fix(fixer) {
+                  var fixes = [];
+                  fixes.push(fixer.insertTextBefore(fieldImport, 'RangeField, '));
+                  fixes.push(fixer.replaceText(node.openingElement.name, 'RangeField'));
+                  node.closingElement && fixes.push(fixer.replaceText(node.closingElement.name, 'RangeField'));
+                  return fixes;
+                }
+              }]
+            });
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

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

@@ -60,6 +60,7 @@ export declare const plugin: {
         'no-utility-icons': import("eslint").Rule.RuleModule;
         'prefer-primitives': import("eslint").Rule.RuleModule;
         'use-button-group-label': import("eslint").Rule.RuleModule;
+        'use-correct-field': import("eslint").Rule.RuleModule;
         'use-cx-function-in-xcss': import("eslint").Rule.RuleModule;
         'use-datetime-picker-calendar-button': import("eslint").Rule.RuleModule;
         'use-drawer-label': import("eslint").Rule.RuleModule;
@@ -128,6 +129,7 @@ export declare const plugin: {
                 '@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-correct-field': "warn";
                 '@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";
@@ -198,6 +200,7 @@ export declare const plugin: {
                 '@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-correct-field': "warn";
                 '@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";
@@ -252,6 +255,7 @@ export declare const plugin: {
                 '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': "error";
                 '@atlaskit/design-system/no-utility-icons': "warn";
                 '@atlaskit/design-system/use-button-group-label': "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";
                 '@atlaskit/design-system/use-drawer-label': "warn";
@@ -303,6 +307,7 @@ export declare const plugin: {
                 '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': "error";
                 '@atlaskit/design-system/no-utility-icons': "warn";
                 '@atlaskit/design-system/use-button-group-label': "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";
                 '@atlaskit/design-system/use-drawer-label': "warn";
@@ -369,6 +374,7 @@ declare const configs: {
             '@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-correct-field': "warn";
             '@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";
@@ -439,6 +445,7 @@ declare const configs: {
             '@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-correct-field': "warn";
             '@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";
@@ -493,6 +500,7 @@ declare const configs: {
             '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': "error";
             '@atlaskit/design-system/no-utility-icons': "warn";
             '@atlaskit/design-system/use-button-group-label': "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";
             '@atlaskit/design-system/use-drawer-label': "warn";
@@ -544,6 +552,7 @@ declare const configs: {
             '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': "error";
             '@atlaskit/design-system/no-utility-icons': "warn";
             '@atlaskit/design-system/use-button-group-label': "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";
             '@atlaskit/design-system/use-drawer-label': "warn";

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

@@ -45,6 +45,7 @@ declare const _default: {
         '@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-correct-field': "warn";
         '@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";

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

@@ -45,6 +45,7 @@ declare const _default: {
         '@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-correct-field': "warn";
         '@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";

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

@@ -31,6 +31,7 @@ declare const _default: {
         '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': "error";
         '@atlaskit/design-system/no-utility-icons': "warn";
         '@atlaskit/design-system/use-button-group-label': "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";
         '@atlaskit/design-system/use-drawer-label': "warn";

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

@@ -31,6 +31,7 @@ declare const _default: {
         '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': "error";
         '@atlaskit/design-system/no-utility-icons': "warn";
         '@atlaskit/design-system/use-button-group-label': "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";
         '@atlaskit/design-system/use-drawer-label': "warn";

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

@@ -44,6 +44,7 @@ export declare const rules: {
     'no-utility-icons': import("eslint").Rule.RuleModule;
     'prefer-primitives': import("eslint").Rule.RuleModule;
     'use-button-group-label': import("eslint").Rule.RuleModule;
+    'use-correct-field': import("eslint").Rule.RuleModule;
     'use-cx-function-in-xcss': import("eslint").Rule.RuleModule;
     'use-datetime-picker-calendar-button': import("eslint").Rule.RuleModule;
     'use-drawer-label': import("eslint").Rule.RuleModule;

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

@@ -0,0 +1,5 @@
+import type { Rule } from 'eslint';
+export declare const useCheckboxFieldMessage = "Convert Field to CheckboxField";
+export declare const useRangeFieldMessage = "Convert Field to RangeField";
+declare const rule: Rule.RuleModule;
+export default rule;

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

@@ -60,6 +60,7 @@ export declare const plugin: {
         'no-utility-icons': import("eslint").Rule.RuleModule;
         'prefer-primitives': import("eslint").Rule.RuleModule;
         'use-button-group-label': import("eslint").Rule.RuleModule;
+        'use-correct-field': import("eslint").Rule.RuleModule;
         'use-cx-function-in-xcss': import("eslint").Rule.RuleModule;
         'use-datetime-picker-calendar-button': import("eslint").Rule.RuleModule;
         'use-drawer-label': import("eslint").Rule.RuleModule;
@@ -131,6 +132,7 @@ export declare const plugin: {
                 '@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-correct-field': "warn";
                 '@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";
@@ -204,6 +206,7 @@ export declare const plugin: {
                 '@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-correct-field': "warn";
                 '@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";
@@ -261,6 +264,7 @@ export declare const plugin: {
                 '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': "error";
                 '@atlaskit/design-system/no-utility-icons': "warn";
                 '@atlaskit/design-system/use-button-group-label': "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";
                 '@atlaskit/design-system/use-drawer-label': "warn";
@@ -315,6 +319,7 @@ export declare const plugin: {
                 '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': "error";
                 '@atlaskit/design-system/no-utility-icons': "warn";
                 '@atlaskit/design-system/use-button-group-label': "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";
                 '@atlaskit/design-system/use-drawer-label': "warn";
@@ -384,6 +389,7 @@ declare const configs: {
             '@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-correct-field': "warn";
             '@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";
@@ -457,6 +463,7 @@ declare const configs: {
             '@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-correct-field': "warn";
             '@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";
@@ -514,6 +521,7 @@ declare const configs: {
             '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': "error";
             '@atlaskit/design-system/no-utility-icons': "warn";
             '@atlaskit/design-system/use-button-group-label': "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";
             '@atlaskit/design-system/use-drawer-label': "warn";
@@ -568,6 +576,7 @@ declare const configs: {
             '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': "error";
             '@atlaskit/design-system/no-utility-icons': "warn";
             '@atlaskit/design-system/use-button-group-label': "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";
             '@atlaskit/design-system/use-drawer-label': "warn";

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

@@ -48,6 +48,7 @@ declare const _default: {
         '@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-correct-field': "warn";
         '@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";

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

@@ -48,6 +48,7 @@ declare const _default: {
         '@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-correct-field': "warn";
         '@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";

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

@@ -34,6 +34,7 @@ declare const _default: {
         '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': "error";
         '@atlaskit/design-system/no-utility-icons': "warn";
         '@atlaskit/design-system/use-button-group-label': "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";
         '@atlaskit/design-system/use-drawer-label': "warn";

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

@@ -34,6 +34,7 @@ declare const _default: {
         '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': "error";
         '@atlaskit/design-system/no-utility-icons': "warn";
         '@atlaskit/design-system/use-button-group-label': "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";
         '@atlaskit/design-system/use-drawer-label': "warn";

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

@@ -44,6 +44,7 @@ export declare const rules: {
     'no-utility-icons': import("eslint").Rule.RuleModule;
     'prefer-primitives': import("eslint").Rule.RuleModule;
     'use-button-group-label': import("eslint").Rule.RuleModule;
+    'use-correct-field': import("eslint").Rule.RuleModule;
     'use-cx-function-in-xcss': import("eslint").Rule.RuleModule;
     'use-datetime-picker-calendar-button': import("eslint").Rule.RuleModule;
     'use-drawer-label': import("eslint").Rule.RuleModule;

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

@@ -0,0 +1,5 @@
+import type { Rule } from 'eslint';
+export declare const useCheckboxFieldMessage = "Convert Field to CheckboxField";
+export declare const useRangeFieldMessage = "Convert Field to RangeField";
+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.17.3",
+	"version": "13.18.1",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
 	"publishConfig": {
@@ -13,7 +13,6 @@
 			"name": "ESLint plugin",
 			"category": "Tooling"
 		},
-		"runReact18": true,
 		"toolingLabels": [
 			"linting"
 		]
@@ -44,9 +43,9 @@
 	},
 	"dependencies": {
 		"@atlaskit/eslint-utils": "^2.0.0",
-		"@atlaskit/icon": "^27.0.0",
-		"@atlaskit/icon-lab": "^5.0.0",
-		"@atlaskit/tokens": "^5.2.0",
+		"@atlaskit/icon": "^27.5.0",
+		"@atlaskit/icon-lab": "^5.2.0",
+		"@atlaskit/tokens": "^5.6.0",
 		"@babel/runtime": "^7.0.0",
 		"@typescript-eslint/utils": "^7.1.0",
 		"ajv": "^6.12.6",
@@ -59,8 +58,8 @@
 	},
 	"devDependencies": {
 		"@af/formatting": "workspace:^",
-		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/theme": "^18.0.0",
+		"@atlaskit/ds-lib": "^4.1.0",
+		"@atlaskit/theme": "^19.0.0",
 		"@atlassian/codegen": "^0.1.0",
 		"@atlassian/eslint-utils": "^0.5.0",
 		"@atlassian/ts-loader": "^0.1.0",