@atlaskit/eslint-plugin-design-system 10.8.2 → 10.10.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 10.10.0
+
+### Minor Changes
+
+- [#116426](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116426)
+  [`29d6c074c76ea`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/29d6c074c76ea) -
+  Add lint rule to detect use of custom icons
+
+## 10.9.0
+
+### Minor Changes
+
+- [#116062](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116062)
+  [`2959497ccf910`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/2959497ccf910) -
+  Adds `shouldAlwaysCheckXcss` config option to `consistent-css-prop-usage` to lint the `xcss` prop
+  even when `excludeReactComponents` is enabled.
+
 ## 10.8.2
 
 ### Patch Changes

package/README.md

@@ -55,6 +55,7 @@ module.exports = {
 | <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     |             |
+| <a href="./src/rules/no-custom-icons/README.md">no-custom-icons</a>                                                         | Enforces custom glyph icons are used.                                                                                                                                                                                                                                                                               |             |         |             |
 | <a href="./src/rules/no-deprecated-apis/README.md">no-deprecated-apis</a>                                                   | Disallow using deprecated APIs.                                                                                                                                                                                                                                                                                     | Yes         |         |             |
 | <a href="./src/rules/no-deprecated-design-token-usage/README.md">no-deprecated-design-token-usage</a>                       | Disallow using deprecated design tokens.                                                                                                                                                                                                                                                                            | Yes         | Yes     |             |
 | <a href="./src/rules/no-deprecated-imports/README.md">no-deprecated-imports</a>                                             | Disallow importing deprecated modules.                                                                                                                                                                                                                                                                              | Yes         |         |             |

package/constellation/consistent-css-prop-usage/usage.mdx

@@ -193,6 +193,15 @@ assume that an element is a React component if its name starts with a capital le
 
 This is `false` by default.
 
+### shouldAlwaysCheckXcss
+
+Overrides `excludeReactComponents` specifically for the `xcss` prop.
+
+This means that even if `excludeReactComponents` is `true`, you can still lint the `xcss` prop by
+setting `shouldAlwaysCheckXcss` to `true`.
+
+This is `false` by default.
+
 ### autoFix
 
 When set to `true`, this rule will turn on the autofixer. Set this to `false` if you do not want the

package/constellation/index/usage.mdx

@@ -18,6 +18,7 @@ This plugin contains rules that should be used when working with the
 | <a href="/components/eslint-plugin-design-system/icon-label/usage">icon-label</a>                                                                   | Enforces accessible usage of icon labels when composed with Atlassian Design System components.                                                                                                                                                                                                                     | Yes         | Yes     |             |
 | <a href="/components/eslint-plugin-design-system/no-banned-imports/usage">no-banned-imports</a>                                                     | Disallow importing banned modules.                                                                                                                                                                                                                                                                                  | Yes         |         |             |
 | <a href="/components/eslint-plugin-design-system/no-css-tagged-template-expression/usage">no-css-tagged-template-expression</a>                     | Disallows any `css` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                          |             | Yes     |             |
+| <a href="/components/eslint-plugin-design-system/no-custom-icons/usage">no-custom-icons</a>                                                         | Enforces custom glyph icons are used.                                                                                                                                                                                                                                                                               |             |         |             |
 | <a href="/components/eslint-plugin-design-system/no-deprecated-apis/usage">no-deprecated-apis</a>                                                   | Disallow using deprecated APIs.                                                                                                                                                                                                                                                                                     | Yes         |         |             |
 | <a href="/components/eslint-plugin-design-system/no-deprecated-design-token-usage/usage">no-deprecated-design-token-usage</a>                       | Disallow using deprecated design tokens.                                                                                                                                                                                                                                                                            | Yes         | Yes     |             |
 | <a href="/components/eslint-plugin-design-system/no-deprecated-imports/usage">no-deprecated-imports</a>                                             | Disallow importing deprecated modules.                                                                                                                                                                                                                                                                              | Yes         |         |             |

package/constellation/no-custom-icons/usage.mdx

@@ -0,0 +1,36 @@
+# no-custom-icons
+
+Icons are being updated with new designs, a simplified set of available icons and sizes, as well as
+more consistent padding and spacing.
+
+The new icon components allows your components to align with the new visual language - either by
+default, or when enabled via a feature flag.
+
+Custom icons are no longer supported, and should either be replaced with an existing icon from the
+`@atlaskit/icon` or `@atlassian/icon-lab` packages, or contributed to those packages.
+
+During the migration process, any custom icons should be moved into a central location to disable
+this error and allow the icon to be quickly replaced. What location to display in the error can be
+configured via the legacyIconPackages option.
+
+## Examples
+
+This rule identifies usages of custom icons from `@atlaskit/icon` or `@atlaskit/icon/base`.
+
+### Incorrect
+
+```js
+import Icon from '@atlaskit/icon';
+                 ^^^^^^^^^^^^^^^^^ custom icon import
+
+<Icon label="Activity" glyph="...">
+^^^^^^^^^^^^^^^^^^^^^^^ custom icon
+```
+
+### Correct
+
+```js
+import AddIcon from '@atlaskit/icon/core/add';
+
+<AddIcon label="" />;
+```

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::9bb5329713677543f16019954484ae2f>>
+ * @codegen <<SignedSource::ab43b6e1a867d07b9a27eae78d48834a>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -18,6 +18,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/icon-label': 'warn',
     '@atlaskit/design-system/no-banned-imports': 'error',
     '@atlaskit/design-system/no-css-tagged-template-expression': 'error',
+    '@atlaskit/design-system/no-custom-icons': 'warn',
     '@atlaskit/design-system/no-deprecated-apis': 'error',
     '@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
     '@atlaskit/design-system/no-deprecated-imports': 'error',

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

@@ -497,7 +497,8 @@ var defaultConfig = {
   cssImportSource: _isSupportedImport.CSS_IN_JS_IMPORTS.compiled,
   xcssImportSource: _isSupportedImport.CSS_IN_JS_IMPORTS.atlaskitPrimitives,
   excludeReactComponents: false,
-  autoFix: true
+  autoFix: true,
+  shouldAlwaysCheckXcss: false
 };
 var rule = (0, _createRule.createLintRule)({
   meta: {
@@ -540,6 +541,9 @@ var rule = (0, _createRule.createLintRule)({
         excludeReactComponents: {
           type: 'boolean'
         },
+        shouldAlwaysCheckXcss: {
+          type: 'boolean'
+        },
         autoFix: {
           type: 'boolean'
         }
@@ -554,7 +558,20 @@ var rule = (0, _createRule.createLintRule)({
         var node = nodeOriginal;
         var name = node.name,
           value = node.value;
-        if (mergedConfig.excludeReactComponents && node.parent.type === 'JSXOpeningElement') {
+
+        /**
+         * We skip linting `xcss` attributes if:
+         *
+         * - excludeReactComponents === true
+         * - shouldAlwaysCheckXcss === false
+         *
+         * In the future we may want to remove `shouldAlwaysCheckXcss`
+         * and just always lint `xcss`, regardless of `excludeReactComponents`
+         */
+        if (mergedConfig.excludeReactComponents && name.name === 'xcss' && !mergedConfig.shouldAlwaysCheckXcss) {
+          return;
+        }
+        if (mergedConfig.excludeReactComponents && node.parent.type === 'JSXOpeningElement' && name.name === 'css') {
           // e.g. <item.before />
           if (node.parent.name.type === 'JSXMemberExpression') {
             return;