npm - @atlaskit/eslint-plugin-design-system - Versions diffs - 10.21.0 → 10.22.1 - Mend

@atlaskit/eslint-plugin-design-system 10.21.0 → 10.22.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,21 @@
 # @atlaskit/eslint-plugin-design-system
+## 10.22.1
+### Patch Changes
+- [#153007](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/153007)
+  [`89e8b9b297149`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/89e8b9b297149) -
+  Update `ensure-design-token-usage` rule to avoid false positive with Icon Tile component
+## 10.22.0
+### Minor Changes
+- [#147366](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/147366)
+  [`7f5bab6a1ebd1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7f5bab6a1ebd1) -
+  Add fixes for html anchors in the no-html-anchor rule
 ## 10.21.0
 ### Minor Changes

package/README.md CHANGED Viewed

@@ -65,7 +65,7 @@ module.exports = {
 | <a href="./src/rules/no-empty-styled-expression/README.md">no-empty-styled-expression</a>                                   | Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX elements).                                                                                                                                                                                                      |             |         |             |
 | <a href="./src/rules/no-exported-css/README.md">no-exported-css</a>                                                         | Forbid exporting `css` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.                                                                                                                                                              |             |         |             |
 | <a href="./src/rules/no-exported-keyframes/README.md">no-exported-keyframes</a>                                             | Forbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable.                                                                                                                                                        |             |         |             |
-| <a href="./src/rules/no-html-anchor/README.md">no-html-anchor</a>                                                           | Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components.                                                                                                                                                                                                                | Yes         |         |             |
+| <a href="./src/rules/no-html-anchor/README.md">no-html-anchor</a>                                                           | Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components.                                                                                                                                                                                                                | Yes         |         | Yes         |
 | <a href="./src/rules/no-html-button/README.md">no-html-button</a>                                                           | Discourage direct usage of HTML button elements in favor of Atlassian Design System button components.                                                                                                                                                                                                              | Yes         |         |             |
 | <a href="./src/rules/no-invalid-css-map/README.md">no-invalid-css-map</a>                                                   | Checks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript's type-checking.                                                                                                                                                                                          | Yes         |         |             |
 | <a href="./src/rules/no-keyframes-tagged-template-expression/README.md">no-keyframes-tagged-template-expression</a>         | Disallows any `keyframe` tagged template expressions that originate from Emotion, Styled Components or Compiled                                                                                                                                                                                                     |             | Yes     |             |

package/dist/cjs/rules/ensure-design-token-usage/color.js CHANGED Viewed

@@ -148,7 +148,7 @@ var lintJSXLiteralForColor = exports.lintJSXLiteralForColor = function lintJSXLi
   if ((0, _isNode.isDecendantOfPrimitive)(node.parent, context)) {
     return;
   }
-  if (['alt', 'src', 'label', 'key'].includes(node.parent.name.name)) {
+  if (['alt', 'src', 'label', 'key', 'appearance'].includes(node.parent.name.name)) {
     return;
   }
   var isException = (0, _getIsException.getIsException)(config.exceptions);

package/dist/cjs/rules/no-html-anchor/index.js CHANGED Viewed

@@ -10,6 +10,7 @@ var rule = (0, _createRule.createLintRule)({
   meta: {
     name: 'no-html-anchor',
     type: 'suggestion',
+    hasSuggestions: true,
     docs: {
       description: 'Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components.',
       recommended: true,

package/dist/cjs/rules/no-html-anchor/node-types/jsx-element/index.js CHANGED Viewed

@@ -9,20 +9,142 @@ var ast = _interopRequireWildcard(require("../../../../ast-nodes"));
 var _supported = require("../supported");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/* eslint-disable @repo/internal/react/require-jsdoc */
+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; } /* eslint-disable @repo/internal/react/require-jsdoc */
+function isImportDeclaration(node) {
+  return node.type === 'ImportDeclaration';
+}
 var JSXElement = exports.JSXElement = {
   lint: function lint(node, _ref) {
     var context = _ref.context;
     if (!(0, _supported.isSupportedForLint)(node)) {
       return;
     }
+    var nodeName = ast.JSXElement.getName(node);
+    var sourceCode = context.getSourceCode();
+    var importDeclarations = sourceCode.ast.body.filter(isImportDeclaration);
+    var existingLinkName = null;
+    var existingLinkButtonName = null;
+    var usedNames = new Set();
+    // Check for existing imports
+    var _iterator = _createForOfIteratorHelper(importDeclarations),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var declaration = _step.value;
+        var _iterator2 = _createForOfIteratorHelper(declaration.specifiers),
+          _step2;
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var specifier = _step2.value;
+            usedNames.add(specifier.local.name);
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+        if (declaration.source.value === '@atlaskit/link') {
+          var defaultSpecifier = declaration.specifiers.find(function (specifier) {
+            return specifier.type === 'ImportDefaultSpecifier';
+          });
+          if (defaultSpecifier) {
+            existingLinkName = defaultSpecifier.local.name;
+          }
+        } else if (declaration.source.value === '@atlaskit/button/new') {
+          var namedSpecifier = declaration.specifiers.find(function (specifier) {
+            return specifier.type === 'ImportSpecifier' && specifier.imported.name === 'LinkButton';
+          });
+          if (namedSpecifier) {
+            existingLinkButtonName = namedSpecifier.local.name;
+          }
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    var generateUniqueName = function generateUniqueName(baseName) {
+      var index = 1;
+      var newName = baseName;
+      while (usedNames.has(newName)) {
+        newName = "".concat(baseName).concat(index);
+        index++;
+      }
+      return newName;
+    };
+    var linkName = existingLinkName || generateUniqueName('Link');
+    var linkButtonName = existingLinkButtonName || generateUniqueName('LinkButton');
     context.report({
       node: node.openingElement,
       messageId: 'noHtmlAnchor',
       data: {
-        name: ast.JSXElement.getName(node)
-      }
+        name: nodeName
+      },
+      suggest: [{
+        desc: 'Replace with Link component from @atlaskit/link',
+        fix: function fix(fixer) {
+          var _node$closingElement;
+          var openingTagRange = node.openingElement.range;
+          var closingTagRange = (_node$closingElement = node.closingElement) === null || _node$closingElement === void 0 ? void 0 : _node$closingElement.range;
+          var attributesText = node.openingElement.attributes.map(function (attr) {
+            return sourceCode.getText(attr);
+          }).join(' ');
+          var fixers = [];
+          // Replace <a> with <Link> and retain attributes
+          if (openingTagRange) {
+            if (node.openingElement.selfClosing) {
+              fixers.push(fixer.replaceTextRange([openingTagRange[0] + 1, openingTagRange[1] - 1], "".concat(linkName).concat(attributesText ? " ".concat(attributesText) : '', " /")));
+            } else {
+              fixers.push(fixer.replaceTextRange([openingTagRange[0] + 1, openingTagRange[1] - 1], "".concat(linkName).concat(attributesText ? " ".concat(attributesText) : '')));
+            }
+          }
+          if (closingTagRange && !node.openingElement.selfClosing) {
+            fixers.push(fixer.replaceTextRange([closingTagRange[0] + 2, closingTagRange[1] - 1], linkName));
+          }
+          // Add import if not present
+          if (!existingLinkName) {
+            var importStatement = "import ".concat(linkName, " from '@atlaskit/link';\n");
+            fixers.push(fixer.insertTextBefore(sourceCode.ast, importStatement));
+          }
+          return fixers;
+        }
+      }, {
+        desc: 'Replace with LinkButton component from @atlaskit/button/new',
+        fix: function fix(fixer) {
+          var _node$closingElement2;
+          var openingTagRange = node.openingElement.range;
+          var closingTagRange = (_node$closingElement2 = node.closingElement) === null || _node$closingElement2 === void 0 ? void 0 : _node$closingElement2.range;
+          var attributesText = node.openingElement.attributes.map(function (attr) {
+            return sourceCode.getText(attr);
+          }).join(' ');
+          var fixers = [];
+          // Replace <a> with <LinkButton> and retain attributes
+          if (openingTagRange) {
+            if (node.openingElement.selfClosing) {
+              fixers.push(fixer.replaceTextRange([openingTagRange[0] + 1, openingTagRange[1] - 1], "".concat(linkButtonName).concat(attributesText ? " ".concat(attributesText) : '', " /")));
+            } else {
+              fixers.push(fixer.replaceTextRange([openingTagRange[0] + 1, openingTagRange[1] - 1], "".concat(linkButtonName).concat(attributesText ? " ".concat(attributesText) : '')));
+            }
+          }
+          if (closingTagRange && !node.openingElement.selfClosing) {
+            fixers.push(fixer.replaceTextRange([closingTagRange[0] + 2, closingTagRange[1] - 1], linkButtonName));
+          }
+          // Add import if not present
+          if (!existingLinkButtonName) {
+            var importStatement = "import { ".concat(linkButtonName, " } from '@atlaskit/button/new';\n");
+            fixers.push(fixer.insertTextBefore(sourceCode.ast, importStatement));
+          }
+          return fixers;
+        }
+      }]
     });
   }
 };

package/dist/cjs/rules/no-legacy-icons/checks.js CHANGED Viewed

@@ -392,14 +392,14 @@ var createChecks = exports.createChecks = function createChecks(context) {
         importSource: migrationIconImports[name].packageName,
         iconName: name,
         errors: errorsAuto,
-        shouldAddSpaciousSpacing: shouldAddSpaciousSpacing,
+        spacing: shouldAddSpaciousSpacing ? 'spacious' : undefined,
         insideNewButton: insideNewButton
       });
     }
     // Legacy icons rendered as JSX elements
     if (Object.keys(legacyIconImports).includes(name)) {
-      var _size, _size2, _sizeProp$value2;
+      var _size, _size2;
       // Determine if inside a new button - if so:
       // - Assume spread props are safe - still error if props explicitly set to unmigratable values
       var _insideNewButton = (0, _helpers.isInsideNewButton)(node, newButtonImports);
@@ -488,20 +488,32 @@ var createChecks = exports.createChecks = function createChecks(context) {
       var newIcon = migrationMapObject === null || migrationMapObject === void 0 ? void 0 : migrationMapObject.newIcon;
       var isNewIconMigratable = (0, _helpers.canAutoMigrateNewIconBasedOnSize)(upcomingIcon ? upcomingIcon.sizeGuidance[(_size = size) !== null && _size !== void 0 ? _size : 'medium'] : migrationMapObject === null || migrationMapObject === void 0 ? void 0 : migrationMapObject.sizeGuidance[(_size2 = size) !== null && _size2 !== void 0 ? _size2 : 'medium']);
-      // Add spacious spacing if:
-      // 1. size is medium, or not set (default is medium)
+      // Add spacing if:
+      // 1. size is medium for core/utility icons or small for utility icons, or not set (default is medium for core and small for utility icons)
       // 2. not inside a new or legacy button
       var _sizeProp = node.openingElement.attributes.find(function (attribute) {
         return attribute.type === 'JSXAttribute' && (attribute.name.name === 'size' || attribute.name.name === 'LEGACY_size');
       });
-      var _shouldAddSpaciousSpacing = (_sizeProp && _sizeProp.type === 'JSXAttribute' && ((_sizeProp$value2 = _sizeProp.value) === null || _sizeProp$value2 === void 0 ? void 0 : _sizeProp$value2.type) === 'Literal' && _sizeProp.value.value === 'medium' || !_sizeProp) && !_insideNewButton && !insideLegacyButton;
+      var spacing;
+      if (!_insideNewButton && !insideLegacyButton) {
+        var _sizeProp$value2;
+        if (_sizeProp && _sizeProp.type === 'JSXAttribute' && ((_sizeProp$value2 = _sizeProp.value) === null || _sizeProp$value2 === void 0 ? void 0 : _sizeProp$value2.type) === 'Literal') {
+          if (_sizeProp.value.value === 'medium') {
+            spacing = 'spacious';
+          } else if (_sizeProp.value.value === 'small' && (newIcon === null || newIcon === void 0 ? void 0 : newIcon.type) === 'utility') {
+            spacing = 'compact';
+          }
+        } else if (!_sizeProp) {
+          spacing = 'spacious';
+        }
+      }
       if (!hasManualMigration && (newIcon || upcomingIcon) && isNewIconMigratable) {
         (0, _helpers.createAutoMigrationError)({
           node: node,
           importSource: legacyIconImports[name].packageName,
           iconName: name,
           errors: errorsAuto,
-          shouldAddSpaciousSpacing: _shouldAddSpaciousSpacing,
+          spacing: spacing,
           insideNewButton: _insideNewButton
         });
       } else if ((!newIcon && !upcomingIcon || !isNewIconMigratable) && size) {

package/dist/cjs/rules/no-legacy-icons/helpers.js CHANGED Viewed

@@ -279,7 +279,7 @@ var createAutoMigrationError = exports.createAutoMigrationError = function creat
     importSource = _ref4.importSource,
     iconName = _ref4.iconName,
     errors = _ref4.errors,
-    shouldAddSpaciousSpacing = _ref4.shouldAddSpaciousSpacing,
+    spacing = _ref4.spacing,
     insideNewButton = _ref4.insideNewButton;
   var myError = {
     node: node,
@@ -287,7 +287,7 @@ var createAutoMigrationError = exports.createAutoMigrationError = function creat
     data: {
       importSource: importSource,
       iconName: iconName,
-      spacing: shouldAddSpaciousSpacing ? 'spacious' : '',
+      spacing: spacing !== null && spacing !== void 0 ? spacing : '',
       // value type need to be a string in Rule.ReportDescriptor
       insideNewButton: String(insideNewButton)
     }
@@ -480,14 +480,11 @@ var createPropFixes = function createPropFixes(_ref7) {
     migrationImportNode = _ref7.migrationImportNode,
     newIconName = _ref7.newIconName;
   var fixes = [];
-  var importSource = metadata.importSource,
-    spacing = metadata.spacing,
+  var spacing = metadata.spacing,
     insideNewButton = metadata.insideNewButton;
   if (shouldUseMigrationPath && !legacyImportNode) {
     return fixes;
   }
-  var importPath = migrationImportNode ? importSource.replace('/migration', '').split('--')[0] : getNewIconNameAndImportPath(importSource, shouldUseMigrationPath).importPath;
-  var iconType = importPath !== null && importPath !== void 0 && importPath.startsWith('@atlaskit/icon/core') ? 'core' : 'utility';
   if (node.type === 'JSXElement') {
     var openingElement = node.openingElement;
     if (newIconName) {
@@ -519,7 +516,7 @@ var createPropFixes = function createPropFixes(_ref7) {
     // 4. icon is not imported from migration entrypoint
     var sizeProp = findProp(attributes, 'size');
     var spacingProp = findProp(attributes, 'spacing');
-    if (spacing && !spacingProp && iconType === 'core' && !migrationImportNode) {
+    if (spacing && !spacingProp && !migrationImportNode) {
       fixes.push(fixer.insertTextAfter(sizeProp || openingElement.name, " spacing=\"".concat(spacing, "\"")));
     }
     if (sizeProp && sizeProp.type === 'JSXAttribute') {

package/dist/es2019/rules/ensure-design-token-usage/color.js CHANGED Viewed

@@ -143,7 +143,7 @@ export const lintJSXLiteralForColor = (node, context, config) => {
   if (isDecendantOfPrimitive(node.parent, context)) {
     return;
   }
-  if (['alt', 'src', 'label', 'key'].includes(node.parent.name.name)) {
+  if (['alt', 'src', 'label', 'key', 'appearance'].includes(node.parent.name.name)) {
     return;
   }
   const isException = getIsException(config.exceptions);

package/dist/es2019/rules/no-html-anchor/index.js CHANGED Viewed

@@ -4,6 +4,7 @@ const rule = createLintRule({
   meta: {
     name: 'no-html-anchor',
     type: 'suggestion',
+    hasSuggestions: true,
     docs: {
       description: 'Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components.',
       recommended: true,

package/dist/es2019/rules/no-html-anchor/node-types/jsx-element/index.js CHANGED Viewed

@@ -2,6 +2,9 @@
 import * as ast from '../../../../ast-nodes';
 import { isSupportedForLint } from '../supported';
+function isImportDeclaration(node) {
+  return node.type === 'ImportDeclaration';
+}
 export const JSXElement = {
   lint(node, {
     context
@@ -9,12 +12,104 @@ export const JSXElement = {
     if (!isSupportedForLint(node)) {
       return;
     }
+    const nodeName = ast.JSXElement.getName(node);
+    const sourceCode = context.getSourceCode();
+    const importDeclarations = sourceCode.ast.body.filter(isImportDeclaration);
+    let existingLinkName = null;
+    let existingLinkButtonName = null;
+    const usedNames = new Set();
+    // Check for existing imports
+    for (const declaration of importDeclarations) {
+      for (const specifier of declaration.specifiers) {
+        usedNames.add(specifier.local.name);
+      }
+      if (declaration.source.value === '@atlaskit/link') {
+        const defaultSpecifier = declaration.specifiers.find(specifier => specifier.type === 'ImportDefaultSpecifier');
+        if (defaultSpecifier) {
+          existingLinkName = defaultSpecifier.local.name;
+        }
+      } else if (declaration.source.value === '@atlaskit/button/new') {
+        const namedSpecifier = declaration.specifiers.find(specifier => specifier.type === 'ImportSpecifier' && specifier.imported.name === 'LinkButton');
+        if (namedSpecifier) {
+          existingLinkButtonName = namedSpecifier.local.name;
+        }
+      }
+    }
+    const generateUniqueName = baseName => {
+      let index = 1;
+      let newName = baseName;
+      while (usedNames.has(newName)) {
+        newName = `${baseName}${index}`;
+        index++;
+      }
+      return newName;
+    };
+    const linkName = existingLinkName || generateUniqueName('Link');
+    const linkButtonName = existingLinkButtonName || generateUniqueName('LinkButton');
     context.report({
       node: node.openingElement,
       messageId: 'noHtmlAnchor',
       data: {
-        name: ast.JSXElement.getName(node)
-      }
+        name: nodeName
+      },
+      suggest: [{
+        desc: 'Replace with Link component from @atlaskit/link',
+        fix(fixer) {
+          var _node$closingElement;
+          const openingTagRange = node.openingElement.range;
+          const closingTagRange = (_node$closingElement = node.closingElement) === null || _node$closingElement === void 0 ? void 0 : _node$closingElement.range;
+          const attributesText = node.openingElement.attributes.map(attr => sourceCode.getText(attr)).join(' ');
+          const fixers = [];
+          // Replace <a> with <Link> and retain attributes
+          if (openingTagRange) {
+            if (node.openingElement.selfClosing) {
+              fixers.push(fixer.replaceTextRange([openingTagRange[0] + 1, openingTagRange[1] - 1], `${linkName}${attributesText ? ` ${attributesText}` : ''} /`));
+            } else {
+              fixers.push(fixer.replaceTextRange([openingTagRange[0] + 1, openingTagRange[1] - 1], `${linkName}${attributesText ? ` ${attributesText}` : ''}`));
+            }
+          }
+          if (closingTagRange && !node.openingElement.selfClosing) {
+            fixers.push(fixer.replaceTextRange([closingTagRange[0] + 2, closingTagRange[1] - 1], linkName));
+          }
+          // Add import if not present
+          if (!existingLinkName) {
+            const importStatement = `import ${linkName} from '@atlaskit/link';\n`;
+            fixers.push(fixer.insertTextBefore(sourceCode.ast, importStatement));
+          }
+          return fixers;
+        }
+      }, {
+        desc: 'Replace with LinkButton component from @atlaskit/button/new',
+        fix(fixer) {
+          var _node$closingElement2;
+          const openingTagRange = node.openingElement.range;
+          const closingTagRange = (_node$closingElement2 = node.closingElement) === null || _node$closingElement2 === void 0 ? void 0 : _node$closingElement2.range;
+          const attributesText = node.openingElement.attributes.map(attr => sourceCode.getText(attr)).join(' ');
+          const fixers = [];
+          // Replace <a> with <LinkButton> and retain attributes
+          if (openingTagRange) {
+            if (node.openingElement.selfClosing) {
+              fixers.push(fixer.replaceTextRange([openingTagRange[0] + 1, openingTagRange[1] - 1], `${linkButtonName}${attributesText ? ` ${attributesText}` : ''} /`));
+            } else {
+              fixers.push(fixer.replaceTextRange([openingTagRange[0] + 1, openingTagRange[1] - 1], `${linkButtonName}${attributesText ? ` ${attributesText}` : ''}`));
+            }
+          }
+          if (closingTagRange && !node.openingElement.selfClosing) {
+            fixers.push(fixer.replaceTextRange([closingTagRange[0] + 2, closingTagRange[1] - 1], linkButtonName));
+          }
+          // Add import if not present
+          if (!existingLinkButtonName) {
+            const importStatement = `import { ${linkButtonName} } from '@atlaskit/button/new';\n`;
+            fixers.push(fixer.insertTextBefore(sourceCode.ast, importStatement));
+          }
+          return fixers;
+        }
+      }]
     });
   }
 };

package/dist/es2019/rules/no-legacy-icons/checks.js CHANGED Viewed

@@ -315,14 +315,14 @@ export const createChecks = context => {
         importSource: migrationIconImports[name].packageName,
         iconName: name,
         errors: errorsAuto,
-        shouldAddSpaciousSpacing,
+        spacing: shouldAddSpaciousSpacing ? 'spacious' : undefined,
         insideNewButton
       });
     }
     // Legacy icons rendered as JSX elements
     if (Object.keys(legacyIconImports).includes(name)) {
-      var _size, _size2, _sizeProp$value2;
+      var _size, _size2;
       // Determine if inside a new button - if so:
       // - Assume spread props are safe - still error if props explicitly set to unmigratable values
       const insideNewButton = isInsideNewButton(node, newButtonImports);
@@ -398,18 +398,30 @@ export const createChecks = context => {
       const newIcon = migrationMapObject === null || migrationMapObject === void 0 ? void 0 : migrationMapObject.newIcon;
       const isNewIconMigratable = canAutoMigrateNewIconBasedOnSize(upcomingIcon ? upcomingIcon.sizeGuidance[(_size = size) !== null && _size !== void 0 ? _size : 'medium'] : migrationMapObject === null || migrationMapObject === void 0 ? void 0 : migrationMapObject.sizeGuidance[(_size2 = size) !== null && _size2 !== void 0 ? _size2 : 'medium']);
-      // Add spacious spacing if:
-      // 1. size is medium, or not set (default is medium)
+      // Add spacing if:
+      // 1. size is medium for core/utility icons or small for utility icons, or not set (default is medium for core and small for utility icons)
       // 2. not inside a new or legacy button
       const sizeProp = node.openingElement.attributes.find(attribute => attribute.type === 'JSXAttribute' && (attribute.name.name === 'size' || attribute.name.name === 'LEGACY_size'));
-      const shouldAddSpaciousSpacing = (sizeProp && sizeProp.type === 'JSXAttribute' && ((_sizeProp$value2 = sizeProp.value) === null || _sizeProp$value2 === void 0 ? void 0 : _sizeProp$value2.type) === 'Literal' && sizeProp.value.value === 'medium' || !sizeProp) && !insideNewButton && !insideLegacyButton;
+      let spacing;
+      if (!insideNewButton && !insideLegacyButton) {
+        var _sizeProp$value2;
+        if (sizeProp && sizeProp.type === 'JSXAttribute' && ((_sizeProp$value2 = sizeProp.value) === null || _sizeProp$value2 === void 0 ? void 0 : _sizeProp$value2.type) === 'Literal') {
+          if (sizeProp.value.value === 'medium') {
+            spacing = 'spacious';
+          } else if (sizeProp.value.value === 'small' && (newIcon === null || newIcon === void 0 ? void 0 : newIcon.type) === 'utility') {
+            spacing = 'compact';
+          }
+        } else if (!sizeProp) {
+          spacing = 'spacious';
+        }
+      }
       if (!hasManualMigration && (newIcon || upcomingIcon) && isNewIconMigratable) {
         createAutoMigrationError({
           node,
           importSource: legacyIconImports[name].packageName,
           iconName: name,
           errors: errorsAuto,
-          shouldAddSpaciousSpacing,
+          spacing,
           insideNewButton
         });
       } else if ((!newIcon && !upcomingIcon || !isNewIconMigratable) && size) {

package/dist/es2019/rules/no-legacy-icons/helpers.js CHANGED Viewed

@@ -257,7 +257,7 @@ export const createAutoMigrationError = ({
   importSource,
   iconName,
   errors,
-  shouldAddSpaciousSpacing,
+  spacing,
   insideNewButton
 }) => {
   const myError = {
@@ -266,7 +266,7 @@ export const createAutoMigrationError = ({
     data: {
       importSource,
       iconName,
-      spacing: shouldAddSpaciousSpacing ? 'spacious' : '',
+      spacing: spacing !== null && spacing !== void 0 ? spacing : '',
       // value type need to be a string in Rule.ReportDescriptor
       insideNewButton: String(insideNewButton)
     }
@@ -462,15 +462,12 @@ const createPropFixes = ({
 }) => {
   const fixes = [];
   const {
-    importSource,
     spacing,
     insideNewButton
   } = metadata;
   if (shouldUseMigrationPath && !legacyImportNode) {
     return fixes;
   }
-  const importPath = migrationImportNode ? importSource.replace('/migration', '').split('--')[0] : getNewIconNameAndImportPath(importSource, shouldUseMigrationPath).importPath;
-  const iconType = importPath !== null && importPath !== void 0 && importPath.startsWith('@atlaskit/icon/core') ? 'core' : 'utility';
   if (node.type === 'JSXElement') {
     const {
       openingElement
@@ -506,7 +503,7 @@ const createPropFixes = ({
     // 4. icon is not imported from migration entrypoint
     const sizeProp = findProp(attributes, 'size');
     const spacingProp = findProp(attributes, 'spacing');
-    if (spacing && !spacingProp && iconType === 'core' && !migrationImportNode) {
+    if (spacing && !spacingProp && !migrationImportNode) {
       fixes.push(fixer.insertTextAfter(sizeProp || openingElement.name, ` spacing="${spacing}"`));
     }
     if (sizeProp && sizeProp.type === 'JSXAttribute') {

package/dist/esm/rules/ensure-design-token-usage/color.js CHANGED Viewed

@@ -142,7 +142,7 @@ export var lintJSXLiteralForColor = function lintJSXLiteralForColor(node, contex
   if (isDecendantOfPrimitive(node.parent, context)) {
     return;
   }
-  if (['alt', 'src', 'label', 'key'].includes(node.parent.name.name)) {
+  if (['alt', 'src', 'label', 'key', 'appearance'].includes(node.parent.name.name)) {
     return;
   }
   var isException = getIsException(config.exceptions);

package/dist/esm/rules/no-html-anchor/index.js CHANGED Viewed

@@ -4,6 +4,7 @@ var rule = createLintRule({
   meta: {
     name: 'no-html-anchor',
     type: 'suggestion',
+    hasSuggestions: true,
     docs: {
       description: 'Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components.',
       recommended: true,

package/dist/esm/rules/no-html-anchor/node-types/jsx-element/index.js CHANGED Viewed

@@ -1,19 +1,143 @@
+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; }
 /* eslint-disable @repo/internal/react/require-jsdoc */
 import * as ast from '../../../../ast-nodes';
 import { isSupportedForLint } from '../supported';
+function isImportDeclaration(node) {
+  return node.type === 'ImportDeclaration';
+}
 export var JSXElement = {
   lint: function lint(node, _ref) {
     var context = _ref.context;
     if (!isSupportedForLint(node)) {
       return;
     }
+    var nodeName = ast.JSXElement.getName(node);
+    var sourceCode = context.getSourceCode();
+    var importDeclarations = sourceCode.ast.body.filter(isImportDeclaration);
+    var existingLinkName = null;
+    var existingLinkButtonName = null;
+    var usedNames = new Set();
+    // Check for existing imports
+    var _iterator = _createForOfIteratorHelper(importDeclarations),
+      _step;
+    try {
+      for (_iterator.s(); !(_step = _iterator.n()).done;) {
+        var declaration = _step.value;
+        var _iterator2 = _createForOfIteratorHelper(declaration.specifiers),
+          _step2;
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var specifier = _step2.value;
+            usedNames.add(specifier.local.name);
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+        if (declaration.source.value === '@atlaskit/link') {
+          var defaultSpecifier = declaration.specifiers.find(function (specifier) {
+            return specifier.type === 'ImportDefaultSpecifier';
+          });
+          if (defaultSpecifier) {
+            existingLinkName = defaultSpecifier.local.name;
+          }
+        } else if (declaration.source.value === '@atlaskit/button/new') {
+          var namedSpecifier = declaration.specifiers.find(function (specifier) {
+            return specifier.type === 'ImportSpecifier' && specifier.imported.name === 'LinkButton';
+          });
+          if (namedSpecifier) {
+            existingLinkButtonName = namedSpecifier.local.name;
+          }
+        }
+      }
+    } catch (err) {
+      _iterator.e(err);
+    } finally {
+      _iterator.f();
+    }
+    var generateUniqueName = function generateUniqueName(baseName) {
+      var index = 1;
+      var newName = baseName;
+      while (usedNames.has(newName)) {
+        newName = "".concat(baseName).concat(index);
+        index++;
+      }
+      return newName;
+    };
+    var linkName = existingLinkName || generateUniqueName('Link');
+    var linkButtonName = existingLinkButtonName || generateUniqueName('LinkButton');
     context.report({
       node: node.openingElement,
       messageId: 'noHtmlAnchor',
       data: {
-        name: ast.JSXElement.getName(node)
-      }
+        name: nodeName
+      },
+      suggest: [{
+        desc: 'Replace with Link component from @atlaskit/link',
+        fix: function fix(fixer) {
+          var _node$closingElement;
+          var openingTagRange = node.openingElement.range;
+          var closingTagRange = (_node$closingElement = node.closingElement) === null || _node$closingElement === void 0 ? void 0 : _node$closingElement.range;
+          var attributesText = node.openingElement.attributes.map(function (attr) {
+            return sourceCode.getText(attr);
+          }).join(' ');
+          var fixers = [];
+          // Replace <a> with <Link> and retain attributes
+          if (openingTagRange) {
+            if (node.openingElement.selfClosing) {
+              fixers.push(fixer.replaceTextRange([openingTagRange[0] + 1, openingTagRange[1] - 1], "".concat(linkName).concat(attributesText ? " ".concat(attributesText) : '', " /")));
+            } else {
+              fixers.push(fixer.replaceTextRange([openingTagRange[0] + 1, openingTagRange[1] - 1], "".concat(linkName).concat(attributesText ? " ".concat(attributesText) : '')));
+            }
+          }
+          if (closingTagRange && !node.openingElement.selfClosing) {
+            fixers.push(fixer.replaceTextRange([closingTagRange[0] + 2, closingTagRange[1] - 1], linkName));
+          }
+          // Add import if not present
+          if (!existingLinkName) {
+            var importStatement = "import ".concat(linkName, " from '@atlaskit/link';\n");
+            fixers.push(fixer.insertTextBefore(sourceCode.ast, importStatement));
+          }
+          return fixers;
+        }
+      }, {
+        desc: 'Replace with LinkButton component from @atlaskit/button/new',
+        fix: function fix(fixer) {
+          var _node$closingElement2;
+          var openingTagRange = node.openingElement.range;
+          var closingTagRange = (_node$closingElement2 = node.closingElement) === null || _node$closingElement2 === void 0 ? void 0 : _node$closingElement2.range;
+          var attributesText = node.openingElement.attributes.map(function (attr) {
+            return sourceCode.getText(attr);
+          }).join(' ');
+          var fixers = [];
+          // Replace <a> with <LinkButton> and retain attributes
+          if (openingTagRange) {
+            if (node.openingElement.selfClosing) {
+              fixers.push(fixer.replaceTextRange([openingTagRange[0] + 1, openingTagRange[1] - 1], "".concat(linkButtonName).concat(attributesText ? " ".concat(attributesText) : '', " /")));
+            } else {
+              fixers.push(fixer.replaceTextRange([openingTagRange[0] + 1, openingTagRange[1] - 1], "".concat(linkButtonName).concat(attributesText ? " ".concat(attributesText) : '')));
+            }
+          }
+          if (closingTagRange && !node.openingElement.selfClosing) {
+            fixers.push(fixer.replaceTextRange([closingTagRange[0] + 2, closingTagRange[1] - 1], linkButtonName));
+          }
+          // Add import if not present
+          if (!existingLinkButtonName) {
+            var importStatement = "import { ".concat(linkButtonName, " } from '@atlaskit/button/new';\n");
+            fixers.push(fixer.insertTextBefore(sourceCode.ast, importStatement));
+          }
+          return fixers;
+        }
+      }]
     });
   }
 };

package/dist/esm/rules/no-legacy-icons/checks.js CHANGED Viewed

@@ -386,14 +386,14 @@ export var createChecks = function createChecks(context) {
         importSource: migrationIconImports[name].packageName,
         iconName: name,
         errors: errorsAuto,
-        shouldAddSpaciousSpacing: shouldAddSpaciousSpacing,
+        spacing: shouldAddSpaciousSpacing ? 'spacious' : undefined,
         insideNewButton: insideNewButton
       });
     }
     // Legacy icons rendered as JSX elements
     if (Object.keys(legacyIconImports).includes(name)) {
-      var _size, _size2, _sizeProp$value2;
+      var _size, _size2;
       // Determine if inside a new button - if so:
       // - Assume spread props are safe - still error if props explicitly set to unmigratable values
       var _insideNewButton = isInsideNewButton(node, newButtonImports);
@@ -482,20 +482,32 @@ export var createChecks = function createChecks(context) {
       var newIcon = migrationMapObject === null || migrationMapObject === void 0 ? void 0 : migrationMapObject.newIcon;
       var isNewIconMigratable = canAutoMigrateNewIconBasedOnSize(upcomingIcon ? upcomingIcon.sizeGuidance[(_size = size) !== null && _size !== void 0 ? _size : 'medium'] : migrationMapObject === null || migrationMapObject === void 0 ? void 0 : migrationMapObject.sizeGuidance[(_size2 = size) !== null && _size2 !== void 0 ? _size2 : 'medium']);
-      // Add spacious spacing if:
-      // 1. size is medium, or not set (default is medium)
+      // Add spacing if:
+      // 1. size is medium for core/utility icons or small for utility icons, or not set (default is medium for core and small for utility icons)
       // 2. not inside a new or legacy button
       var _sizeProp = node.openingElement.attributes.find(function (attribute) {
         return attribute.type === 'JSXAttribute' && (attribute.name.name === 'size' || attribute.name.name === 'LEGACY_size');
       });
-      var _shouldAddSpaciousSpacing = (_sizeProp && _sizeProp.type === 'JSXAttribute' && ((_sizeProp$value2 = _sizeProp.value) === null || _sizeProp$value2 === void 0 ? void 0 : _sizeProp$value2.type) === 'Literal' && _sizeProp.value.value === 'medium' || !_sizeProp) && !_insideNewButton && !insideLegacyButton;
+      var spacing;
+      if (!_insideNewButton && !insideLegacyButton) {
+        var _sizeProp$value2;
+        if (_sizeProp && _sizeProp.type === 'JSXAttribute' && ((_sizeProp$value2 = _sizeProp.value) === null || _sizeProp$value2 === void 0 ? void 0 : _sizeProp$value2.type) === 'Literal') {
+          if (_sizeProp.value.value === 'medium') {
+            spacing = 'spacious';
+          } else if (_sizeProp.value.value === 'small' && (newIcon === null || newIcon === void 0 ? void 0 : newIcon.type) === 'utility') {
+            spacing = 'compact';
+          }
+        } else if (!_sizeProp) {
+          spacing = 'spacious';
+        }
+      }
       if (!hasManualMigration && (newIcon || upcomingIcon) && isNewIconMigratable) {
         createAutoMigrationError({
           node: node,
           importSource: legacyIconImports[name].packageName,
           iconName: name,
           errors: errorsAuto,
-          shouldAddSpaciousSpacing: _shouldAddSpaciousSpacing,
+          spacing: spacing,
           insideNewButton: _insideNewButton
         });
       } else if ((!newIcon && !upcomingIcon || !isNewIconMigratable) && size) {

package/dist/esm/rules/no-legacy-icons/helpers.js CHANGED Viewed

@@ -269,7 +269,7 @@ export var createAutoMigrationError = function createAutoMigrationError(_ref4) {
     importSource = _ref4.importSource,
     iconName = _ref4.iconName,
     errors = _ref4.errors,
-    shouldAddSpaciousSpacing = _ref4.shouldAddSpaciousSpacing,
+    spacing = _ref4.spacing,
     insideNewButton = _ref4.insideNewButton;
   var myError = {
     node: node,
@@ -277,7 +277,7 @@ export var createAutoMigrationError = function createAutoMigrationError(_ref4) {
     data: {
       importSource: importSource,
       iconName: iconName,
-      spacing: shouldAddSpaciousSpacing ? 'spacious' : '',
+      spacing: spacing !== null && spacing !== void 0 ? spacing : '',
       // value type need to be a string in Rule.ReportDescriptor
       insideNewButton: String(insideNewButton)
     }
@@ -470,14 +470,11 @@ var createPropFixes = function createPropFixes(_ref7) {
     migrationImportNode = _ref7.migrationImportNode,
     newIconName = _ref7.newIconName;
   var fixes = [];
-  var importSource = metadata.importSource,
-    spacing = metadata.spacing,
+  var spacing = metadata.spacing,
     insideNewButton = metadata.insideNewButton;
   if (shouldUseMigrationPath && !legacyImportNode) {
     return fixes;
   }
-  var importPath = migrationImportNode ? importSource.replace('/migration', '').split('--')[0] : getNewIconNameAndImportPath(importSource, shouldUseMigrationPath).importPath;
-  var iconType = importPath !== null && importPath !== void 0 && importPath.startsWith('@atlaskit/icon/core') ? 'core' : 'utility';
   if (node.type === 'JSXElement') {
     var openingElement = node.openingElement;
     if (newIconName) {
@@ -509,7 +506,7 @@ var createPropFixes = function createPropFixes(_ref7) {
     // 4. icon is not imported from migration entrypoint
     var sizeProp = findProp(attributes, 'size');
     var spacingProp = findProp(attributes, 'spacing');
-    if (spacing && !spacingProp && iconType === 'core' && !migrationImportNode) {
+    if (spacing && !spacingProp && !migrationImportNode) {
       fixes.push(fixer.insertTextAfter(sizeProp || openingElement.name, " spacing=\"".concat(spacing, "\"")));
     }
     if (sizeProp && sizeProp.type === 'JSXAttribute') {

package/dist/types/rules/no-legacy-icons/helpers.d.ts CHANGED Viewed

@@ -87,12 +87,12 @@ export declare const createCantMigrateFunctionUnknownError: (node: Node, importS
 export declare const createCantMigrateColorError: (node: Node, colorValue: string, errors: ErrorListManual, importSource: string, iconName: string) => void;
 export declare const createCantMigrateSpreadPropsError: (node: Node, missingProps: string[], errors: ErrorListManual, importSource: string, iconName: string) => void;
 export declare const createCantMigrateSizeUnknown: (node: Node, errors: ErrorListManual, importSource: string, iconName: string) => void;
-export declare const createAutoMigrationError: ({ node, importSource, iconName, errors, shouldAddSpaciousSpacing, insideNewButton, }: {
+export declare const createAutoMigrationError: ({ node, importSource, iconName, errors, spacing, insideNewButton, }: {
     node: Node;
     importSource: string;
     iconName: string;
     errors: ErrorListAuto;
-    shouldAddSpaciousSpacing?: boolean | undefined;
+    spacing?: string | undefined;
     insideNewButton?: boolean | undefined;
 }) => void;
 export declare const createHelpers: (context: Rule.RuleContext) => {

package/dist/types-ts4.5/rules/no-legacy-icons/helpers.d.ts CHANGED Viewed

@@ -92,12 +92,12 @@ export declare const createCantMigrateFunctionUnknownError: (node: Node, importS
 export declare const createCantMigrateColorError: (node: Node, colorValue: string, errors: ErrorListManual, importSource: string, iconName: string) => void;
 export declare const createCantMigrateSpreadPropsError: (node: Node, missingProps: string[], errors: ErrorListManual, importSource: string, iconName: string) => void;
 export declare const createCantMigrateSizeUnknown: (node: Node, errors: ErrorListManual, importSource: string, iconName: string) => void;
-export declare const createAutoMigrationError: ({ node, importSource, iconName, errors, shouldAddSpaciousSpacing, insideNewButton, }: {
+export declare const createAutoMigrationError: ({ node, importSource, iconName, errors, spacing, insideNewButton, }: {
     node: Node;
     importSource: string;
     iconName: string;
     errors: ErrorListAuto;
-    shouldAddSpaciousSpacing?: boolean | undefined;
+    spacing?: string | undefined;
     insideNewButton?: boolean | undefined;
 }) => void;
 export declare const createHelpers: (context: Rule.RuleContext) => {

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
 	"description": "The essential plugin for use with the Atlassian Design System.",
-	"version": "10.21.0",
+	"version": "10.22.1",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
 	"publishConfig": {
@@ -41,7 +41,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/eslint-utils": "^1.7.0",
-		"@atlaskit/icon": "^22.18.0",
+		"@atlaskit/icon": "^22.22.0",
 		"@atlaskit/tokens": "*",
 		"@babel/runtime": "^7.0.0",
 		"@typescript-eslint/utils": "^5.48.1",
@@ -54,8 +54,8 @@
 	},
 	"devDependencies": {
 		"@af/formatting": "*",
-		"@atlaskit/ds-lib": "^2.5.0",
-		"@atlaskit/theme": "^13.0.0",
+		"@atlaskit/ds-lib": "^3.1.0",
+		"@atlaskit/theme": "^13.1.0",
 		"@atlassian/codegen": "*",
 		"@atlassian/eslint-utils": "^0.5.0",
 		"@atlassian/ts-loader": "*",