@atlaskit/eslint-plugin-design-system 10.14.0 → 10.16.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 10.16.0
+
+### Minor Changes
+
+- [#130413](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/130413)
+  [`1a796c4acf4e9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1a796c4acf4e9) -
+  Added new eslint plugin, ensure-icon-color
+
+## 10.15.0
+
+### Minor Changes
+
+- [#127511](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127511)
+  [`db30e29344013`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/db30e29344013) -
+  Widening range of `react` and `react-dom` peer dependencies from `^16.8.0 || ^17.0.0 || ~18.2.0`
+  to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).
+
+  This change has been done to enable usage of `react@18.3` as well as to have a consistent peer
+  dependency range for `react` and `react-dom` for `/platform` packages.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.14.0
 
 ### Minor Changes

package/README.md

@@ -52,6 +52,7 @@ module.exports = {
 | <a href="./src/rules/consistent-css-prop-usage/README.md">consistent-css-prop-usage</a>                                     | Ensures consistency with `css` and `xcss` prop usages                                                                                                                                                                                                                                                               | Yes         | Yes     |             |
 | <a href="./src/rules/ensure-design-token-usage/README.md">ensure-design-token-usage</a>                                     | Enforces usage of design tokens rather than hard-coded values.                                                                                                                                                                                                                                                      | Yes         | Yes     | Yes         |
 | <a href="./src/rules/ensure-design-token-usage-preview/README.md">ensure-design-token-usage/preview</a>                     | Enforces usage of pre-release design tokens rather than hard-coded values.                                                                                                                                                                                                                                          |             | Yes     | Yes         |
+| <a href="./src/rules/ensure-icon-color/README.md">ensure-icon-color</a>                                                     | Enforces that upcoming icon components have a color prop set, to enable a migration of the default value.                                                                                                                                                                                                           |             |         |             |
 | <a href="./src/rules/icon-label/README.md">icon-label</a>                                                                   | Enforces accessible usage of icon labels when composed with Atlassian Design System components.                                                                                                                                                                                                                     | Yes         | Yes     |             |
 | <a href="./src/rules/no-banned-imports/README.md">no-banned-imports</a>                                                     | Disallow importing banned modules.                                                                                                                                                                                                                                                                                  | Yes         |         |             |
 | <a href="./src/rules/no-css-tagged-template-expression/README.md">no-css-tagged-template-expression</a>                     | Disallows any `css` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                          |             | Yes     |             |

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::b6947ac630ea512fe3f4e3f44abb6783>>
+ * @codegen <<SignedSource::16613cb3962ed68af0bffd70eef5f5e2>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -15,6 +15,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/consistent-css-prop-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
+    '@atlaskit/design-system/ensure-icon-color': 'error',
     '@atlaskit/design-system/icon-label': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-css-tagged-template-expression': 'error',

package/dist/cjs/rules/ensure-icon-color/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _isFromImportSource = require("../no-custom-icons/checks/is-from-import-source");
+var _createRule = require("../utils/create-rule");
+var _errorBoundary = require("../utils/error-boundary");
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+/**
+ * Returns if the node is a JSXElement with a prop that matches the given name.
+ */
+function hasProp(node, propName) {
+  return (0, _eslintCodemodUtils.isNodeOfType)(node.openingElement, 'JSXOpeningElement') && node.openingElement.attributes.some(function (a) {
+    return a.type === 'JSXAttribute' && a.name.name === propName;
+  });
+}
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'ensure-icon-color',
+    docs: {
+      description: 'Enforces that upcoming icon components have a color prop set, to enable a migration of the default value.',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      missingColorProp: 'The default value of the `color` prop is about to change. To assist in the migration, the color prop must be set on new icons from `@atlaskit/icon/(core|utility)`.'
+    }
+  },
+  create: function create(context) {
+    /**
+     * Contains a map of imported icon components from any atlaskit icon package.
+     */
+    var isNewIcon = (0, _isFromImportSource.createIsFromImportSourceFor)(/^@(atlaskit\/icon|atlassian\/icon-lab)\/(core|utility)\/*/);
+    return (0, _errorBoundary.errorBoundary)({
+      JSXElement: function JSXElement(node) {
+        var _isNewIcon$getImportS;
+        if (!isNewIcon(node) || hasProp(node, 'color')) {
+          return;
+        }
+        var importSource = (_isNewIcon$getImportS = isNewIcon.getImportSource(node)) !== null && _isNewIcon$getImportS !== void 0 ? _isNewIcon$getImportS : '';
+        context.report({
+          node: node.openingElement,
+          messageId: 'missingColorProp',
+          data: {
+            importSource: importSource
+          }
+        });
+      },
+      ImportDeclaration: isNewIcon.importDeclarationHook
+    });
+  }
+});
+var _default = exports.default = rule;

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

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _consistentCssPropUsage = _interopRequireDefault(require("./consistent-css-prop-usage"));
 var _ensureDesignTokenUsage = _interopRequireDefault(require("./ensure-design-token-usage"));
 var _ensureDesignTokenUsagePreview = _interopRequireDefault(require("./ensure-design-token-usage-preview"));
+var _ensureIconColor = _interopRequireDefault(require("./ensure-icon-color"));
 var _iconLabel = _interopRequireDefault(require("./icon-label"));
 var _noBannedImports = _interopRequireDefault(require("./no-banned-imports"));
 var _noCssTaggedTemplateExpression = _interopRequireDefault(require("./no-css-tagged-template-expression"));
@@ -48,13 +49,14 @@ 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::402e6eb5433560b1032e5ed926bb5564>>
+ * @codegen <<SignedSource::c2a140a3f690737dd938e746ef8fb9d5>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
   'consistent-css-prop-usage': _consistentCssPropUsage.default,
   'ensure-design-token-usage': _ensureDesignTokenUsage.default,
   'ensure-design-token-usage/preview': _ensureDesignTokenUsagePreview.default,
+  'ensure-icon-color': _ensureIconColor.default,
   'icon-label': _iconLabel.default,
   'no-banned-imports': _noBannedImports.default,
   'no-css-tagged-template-expression': _noCssTaggedTemplateExpression.default,

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::b6947ac630ea512fe3f4e3f44abb6783>>
+ * @codegen <<SignedSource::16613cb3962ed68af0bffd70eef5f5e2>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -9,6 +9,7 @@ export default {
     '@atlaskit/design-system/consistent-css-prop-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
+    '@atlaskit/design-system/ensure-icon-color': 'error',
     '@atlaskit/design-system/icon-label': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-css-tagged-template-expression': 'error',

package/dist/es2019/rules/ensure-icon-color/index.js

@@ -0,0 +1,50 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createIsFromImportSourceFor } from '../no-custom-icons/checks/is-from-import-source';
+import { createLintRule } from '../utils/create-rule';
+import { errorBoundary } from '../utils/error-boundary';
+
+/**
+ * Returns if the node is a JSXElement with a prop that matches the given name.
+ */
+function hasProp(node, propName) {
+  return isNodeOfType(node.openingElement, 'JSXOpeningElement') && node.openingElement.attributes.some(a => a.type === 'JSXAttribute' && a.name.name === propName);
+}
+const rule = createLintRule({
+  meta: {
+    name: 'ensure-icon-color',
+    docs: {
+      description: 'Enforces that upcoming icon components have a color prop set, to enable a migration of the default value.',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      missingColorProp: 'The default value of the `color` prop is about to change. To assist in the migration, the color prop must be set on new icons from `@atlaskit/icon/(core|utility)`.'
+    }
+  },
+  create(context) {
+    /**
+     * Contains a map of imported icon components from any atlaskit icon package.
+     */
+    const isNewIcon = createIsFromImportSourceFor(/^@(atlaskit\/icon|atlassian\/icon-lab)\/(core|utility)\/*/);
+    return errorBoundary({
+      JSXElement(node) {
+        var _isNewIcon$getImportS;
+        if (!isNewIcon(node) || hasProp(node, 'color')) {
+          return;
+        }
+        const importSource = (_isNewIcon$getImportS = isNewIcon.getImportSource(node)) !== null && _isNewIcon$getImportS !== void 0 ? _isNewIcon$getImportS : '';
+        context.report({
+          node: node.openingElement,
+          messageId: 'missingColorProp',
+          data: {
+            importSource
+          }
+        });
+      },
+      ImportDeclaration: isNewIcon.importDeclarationHook
+    });
+  }
+});
+export default rule;

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

@@ -1,11 +1,12 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::402e6eb5433560b1032e5ed926bb5564>>
+ * @codegen <<SignedSource::c2a140a3f690737dd938e746ef8fb9d5>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
 import ensureDesignTokenUsage from './ensure-design-token-usage';
 import ensureDesignTokenUsagePreview from './ensure-design-token-usage-preview';
+import ensureIconColor from './ensure-icon-color';
 import iconLabel from './icon-label';
 import noBannedImports from './no-banned-imports';
 import noCssTaggedTemplateExpression from './no-css-tagged-template-expression';
@@ -48,6 +49,7 @@ export default {
   'consistent-css-prop-usage': consistentCssPropUsage,
   'ensure-design-token-usage': ensureDesignTokenUsage,
   'ensure-design-token-usage/preview': ensureDesignTokenUsagePreview,
+  'ensure-icon-color': ensureIconColor,
   'icon-label': iconLabel,
   'no-banned-imports': noBannedImports,
   'no-css-tagged-template-expression': noCssTaggedTemplateExpression,

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::b6947ac630ea512fe3f4e3f44abb6783>>
+ * @codegen <<SignedSource::16613cb3962ed68af0bffd70eef5f5e2>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -9,6 +9,7 @@ export default {
     '@atlaskit/design-system/consistent-css-prop-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage': 'error',
     '@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
+    '@atlaskit/design-system/ensure-icon-color': 'error',
     '@atlaskit/design-system/icon-label': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-css-tagged-template-expression': 'error',

package/dist/esm/rules/ensure-icon-color/index.js

@@ -0,0 +1,52 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createIsFromImportSourceFor } from '../no-custom-icons/checks/is-from-import-source';
+import { createLintRule } from '../utils/create-rule';
+import { errorBoundary } from '../utils/error-boundary';
+
+/**
+ * Returns if the node is a JSXElement with a prop that matches the given name.
+ */
+function hasProp(node, propName) {
+  return isNodeOfType(node.openingElement, 'JSXOpeningElement') && node.openingElement.attributes.some(function (a) {
+    return a.type === 'JSXAttribute' && a.name.name === propName;
+  });
+}
+var rule = createLintRule({
+  meta: {
+    name: 'ensure-icon-color',
+    docs: {
+      description: 'Enforces that upcoming icon components have a color prop set, to enable a migration of the default value.',
+      recommended: false,
+      severity: 'error'
+    },
+    messages: {
+      missingColorProp: 'The default value of the `color` prop is about to change. To assist in the migration, the color prop must be set on new icons from `@atlaskit/icon/(core|utility)`.'
+    }
+  },
+  create: function create(context) {
+    /**
+     * Contains a map of imported icon components from any atlaskit icon package.
+     */
+    var isNewIcon = createIsFromImportSourceFor(/^@(atlaskit\/icon|atlassian\/icon-lab)\/(core|utility)\/*/);
+    return errorBoundary({
+      JSXElement: function JSXElement(node) {
+        var _isNewIcon$getImportS;
+        if (!isNewIcon(node) || hasProp(node, 'color')) {
+          return;
+        }
+        var importSource = (_isNewIcon$getImportS = isNewIcon.getImportSource(node)) !== null && _isNewIcon$getImportS !== void 0 ? _isNewIcon$getImportS : '';
+        context.report({
+          node: node.openingElement,
+          messageId: 'missingColorProp',
+          data: {
+            importSource: importSource
+          }
+        });
+      },
+      ImportDeclaration: isNewIcon.importDeclarationHook
+    });
+  }
+});
+export default rule;

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

@@ -1,11 +1,12 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::402e6eb5433560b1032e5ed926bb5564>>
+ * @codegen <<SignedSource::c2a140a3f690737dd938e746ef8fb9d5>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
 import ensureDesignTokenUsage from './ensure-design-token-usage';
 import ensureDesignTokenUsagePreview from './ensure-design-token-usage-preview';
+import ensureIconColor from './ensure-icon-color';
 import iconLabel from './icon-label';
 import noBannedImports from './no-banned-imports';
 import noCssTaggedTemplateExpression from './no-css-tagged-template-expression';
@@ -48,6 +49,7 @@ export default {
   'consistent-css-prop-usage': consistentCssPropUsage,
   'ensure-design-token-usage': ensureDesignTokenUsage,
   'ensure-design-token-usage/preview': ensureDesignTokenUsagePreview,
+  'ensure-icon-color': ensureIconColor,
   'icon-label': iconLabel,
   'no-banned-imports': noBannedImports,
   'no-css-tagged-template-expression': noCssTaggedTemplateExpression,

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

@@ -6,6 +6,7 @@ export declare const configs: {
             '@atlaskit/design-system/consistent-css-prop-usage': string;
             '@atlaskit/design-system/ensure-design-token-usage': string;
             '@atlaskit/design-system/ensure-design-token-usage/preview': string;
+            '@atlaskit/design-system/ensure-icon-color': string;
             '@atlaskit/design-system/icon-label': string;
             '@atlaskit/design-system/no-banned-imports': string;
             '@atlaskit/design-system/no-css-tagged-template-expression': string;

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::b6947ac630ea512fe3f4e3f44abb6783>>
+ * @codegen <<SignedSource::16613cb3962ed68af0bffd70eef5f5e2>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -9,6 +9,7 @@ declare const _default: {
         '@atlaskit/design-system/consistent-css-prop-usage': string;
         '@atlaskit/design-system/ensure-design-token-usage': string;
         '@atlaskit/design-system/ensure-design-token-usage/preview': string;
+        '@atlaskit/design-system/ensure-icon-color': string;
         '@atlaskit/design-system/icon-label': string;
         '@atlaskit/design-system/no-banned-imports': string;
         '@atlaskit/design-system/no-css-tagged-template-expression': string;

package/dist/types/rules/ensure-icon-color/index.d.ts

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

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

@@ -2,6 +2,7 @@ declare const _default: {
     'consistent-css-prop-usage': import("eslint").Rule.RuleModule;
     'ensure-design-token-usage': import("eslint").Rule.RuleModule;
     'ensure-design-token-usage/preview': import("eslint").Rule.RuleModule;
+    'ensure-icon-color': import("eslint").Rule.RuleModule;
     'icon-label': import("eslint").Rule.RuleModule;
     'no-banned-imports': import("eslint").Rule.RuleModule;
     'no-css-tagged-template-expression': import("eslint").Rule.RuleModule;

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

@@ -6,6 +6,7 @@ export declare const configs: {
             '@atlaskit/design-system/consistent-css-prop-usage': string;
             '@atlaskit/design-system/ensure-design-token-usage': string;
             '@atlaskit/design-system/ensure-design-token-usage/preview': string;
+            '@atlaskit/design-system/ensure-icon-color': string;
             '@atlaskit/design-system/icon-label': string;
             '@atlaskit/design-system/no-banned-imports': string;
             '@atlaskit/design-system/no-css-tagged-template-expression': string;

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::b6947ac630ea512fe3f4e3f44abb6783>>
+ * @codegen <<SignedSource::16613cb3962ed68af0bffd70eef5f5e2>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -9,6 +9,7 @@ declare const _default: {
         '@atlaskit/design-system/consistent-css-prop-usage': string;
         '@atlaskit/design-system/ensure-design-token-usage': string;
         '@atlaskit/design-system/ensure-design-token-usage/preview': string;
+        '@atlaskit/design-system/ensure-icon-color': string;
         '@atlaskit/design-system/icon-label': string;
         '@atlaskit/design-system/no-banned-imports': string;
         '@atlaskit/design-system/no-css-tagged-template-expression': string;

package/dist/types-ts4.5/rules/ensure-icon-color/index.d.ts

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

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

@@ -2,6 +2,7 @@ declare const _default: {
     'consistent-css-prop-usage': import("eslint").Rule.RuleModule;
     'ensure-design-token-usage': import("eslint").Rule.RuleModule;
     'ensure-design-token-usage/preview': import("eslint").Rule.RuleModule;
+    'ensure-icon-color': import("eslint").Rule.RuleModule;
     'icon-label': import("eslint").Rule.RuleModule;
     'no-banned-imports': import("eslint").Rule.RuleModule;
     'no-css-tagged-template-expression': import("eslint").Rule.RuleModule;

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": "10.14.0",
+	"version": "10.16.0",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
 	"publishConfig": {
@@ -38,11 +38,11 @@
 		".": "./src/index.tsx"
 	},
 	"peerDependencies": {
-		"react": "^16.8.0 || ^17.0.0 || ~18.2.0"
+		"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
 	},
 	"dependencies": {
-		"@atlaskit/eslint-utils": "^1.6.0",
-		"@atlaskit/icon": "^22.11.0",
+		"@atlaskit/eslint-utils": "^1.7.0",
+		"@atlaskit/icon": "^22.13.0",
 		"@atlaskit/tokens": "*",
 		"@babel/runtime": "^7.0.0",
 		"@typescript-eslint/utils": "^5.48.1",
@@ -55,8 +55,8 @@
 	},
 	"devDependencies": {
 		"@af/formatting": "*",
-		"@atlaskit/ds-lib": "^2.3.0",
-		"@atlaskit/theme": "^12.11.0",
+		"@atlaskit/ds-lib": "^2.4.0",
+		"@atlaskit/theme": "^13.0.0",
 		"@atlassian/codegen": "*",
 		"@atlassian/eslint-utils": "^0.5.0",
 		"@atlassian/ts-loader": "*",