@atlaskit/eslint-plugin-design-system 8.34.0 → 8.36.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.36.1
+
+### Patch Changes
+
+- [#79810](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/79810) [`8c6e96aa3cf0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8c6e96aa3cf0) - Fixed an issue with `ensure-design-token-usage` where color props on primitive components could report an error.
+
+## 8.36.0
+
+### Minor Changes
+
+- [#78346](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/78346) [`d20b2626a3b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d20b2626a3b0) - Adds support for use-primitives linting rule matching JSX elements declared before styles.
+
+## 8.35.1
+
+### Patch Changes
+
+- [#78282](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/78282) [`e19154833d5f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e19154833d5f) - Missing allowed props check for single paragraph elements
+
+## 8.35.0
+
+### Minor Changes
+
+- [#77589](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77589) [`744ea21e3367`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/744ea21e3367) - Update use-primitives-text rule for new defaults in Text primitive component
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.34.0
 
 ### Minor Changes

package/constellation/use-primitives-text/usage.mdx

@@ -9,13 +9,23 @@ This rule marks code as violations when it can be replaced 1:1 with one or multi
 ### Incorrect
 
 ```jsx
-<span>^^^^^^^^^^^^^^^^^^^^^^ // ...</span>
+<span>text</span>
+^^^^^^
+<p>text</p>
+^^^
+<strong>text</strong>
+^^^^^^^^
+<em>text</em>
+^^^^
 ```
 
 ### Correct
 
 ```jsx
-<Text variant="ui">// ...</Text>
+<Text>text</Text>
+<Text as="p">text</Text>
+<Text as="strong">text</Text>
+<Text as="em">text</Text>
 ```
 
-Currently, the rule is extremely defensive, only reporting on certain p, span, strong and em elements that don't have any props outside of `key`, `id` and `data-testid`.
+Currently, the rule is extremely defensive, only reporting on `span`, `p`, `strong` and `em` elements that don't have any props outside of `key`, `id` and `data-testid`. For `span` elements we're only targeting instances that almost certainly only have text as children.

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

@@ -143,6 +143,11 @@ var lintJSXLiteralForColor = exports.lintJSXLiteralForColor = function lintJSXLi
   if ((0, _isNode.isDecendantOfSvgElement)(node.parent)) {
     return;
   }
+
+  // Box backgroundColor prop accepts token names directly - don't lint against this
+  if ((0, _isNode.isDecendantOfPrimitive)(node.parent, context)) {
+    return;
+  }
   if (['alt', 'src', 'label', 'key'].includes(node.parent.name.name)) {
     return;
   }

package/dist/cjs/rules/use-primitives/transformers/compiled-styled/find-valid-jsx-usage-to-transform.js

@@ -1,15 +1,22 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.findValidJsxUsageToTransform = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
+var JSX_IDENTIFIER = 'JSXIdentifier';
 /**
  * Given a component name finds its JSX usages and performs some
  * additional validations to ensure transformation can be done correctly
+ *
+ * anyOrder: if true, the order of the references doesn't matter (JSX or style declaration)
  */
 var findValidJsxUsageToTransform = exports.findValidJsxUsageToTransform = function findValidJsxUsageToTransform(componentName, scope) {
+  var _variableDeclaration$;
+  var anyOrder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var variableDeclaration = scope.variables.find(function (v) {
     return v.name === componentName;
   });
@@ -25,7 +32,23 @@ var findValidJsxUsageToTransform = exports.findValidJsxUsageToTransform = functi
   if (variableDeclaration.references.length !== 2) {
     return;
   }
-  var jsxUsage = variableDeclaration.references[1].identifier;
+  var jsxUsage = (_variableDeclaration$ = variableDeclaration.references[1]) === null || _variableDeclaration$ === void 0 ? void 0 : _variableDeclaration$.identifier;
+  if (anyOrder) {
+    var _variableDeclaration$2 = variableDeclaration.references.map(function (ref) {
+        return ref === null || ref === void 0 ? void 0 : ref.identifier;
+      }),
+      _variableDeclaration$3 = (0, _slicedToArray2.default)(_variableDeclaration$2, 2),
+      firstIdentifier = _variableDeclaration$3[0],
+      secondIdentifier = _variableDeclaration$3[1];
+    // Check if the first reference is a JSXOpeningElement and the second is not or vice versa
+    if ((0, _eslintCodemodUtils.isNodeOfType)(firstIdentifier, JSX_IDENTIFIER) && !(0, _eslintCodemodUtils.isNodeOfType)(secondIdentifier, JSX_IDENTIFIER)) {
+      jsxUsage = firstIdentifier;
+    } else if ((0, _eslintCodemodUtils.isNodeOfType)(secondIdentifier, JSX_IDENTIFIER) && !(0, _eslintCodemodUtils.isNodeOfType)(firstIdentifier, JSX_IDENTIFIER)) {
+      jsxUsage = secondIdentifier;
+    } else {
+      return;
+    }
+  }
   if (!(0, _eslintCodemodUtils.isNodeOfType)(jsxUsage, 'JSXIdentifier')) {
     return;
   }

package/dist/cjs/rules/use-primitives/transformers/compiled-styled/index.js

@@ -65,7 +65,8 @@ var CompiledStyled = exports.CompiledStyled = {
         success: false
       };
     }
-    var styledComponentJsxRef = (0, _findValidJsxUsageToTransform.findValidJsxUsageToTransform)(styledComponentVariableRef.id.name, context.getScope());
+    var anyOrder = config.patterns.includes('jsx-order-fix');
+    var styledComponentJsxRef = (0, _findValidJsxUsageToTransform.findValidJsxUsageToTransform)(styledComponentVariableRef.id.name, context.getScope(), anyOrder);
     if (!styledComponentJsxRef) {
       return {
         success: false

package/dist/cjs/rules/use-primitives-text/config/index.js

@@ -5,7 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getConfig = void 0;
 var defaults = {
-  patterns: ['paragraph-elements', 'span-elements', 'strong-elements', 'emphasis-elements']
+  patterns: ['paragraph-elements', 'span-elements', 'strong-elements', 'emphasis-elements'],
+  inheritColor: false
 };
 var getConfig = exports.getConfig = function getConfig(overrides) {
   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

package/dist/cjs/rules/use-primitives-text/transformers/common.js

@@ -4,6 +4,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.addColorInheritAttributeFix = addColorInheritAttributeFix;
 exports.allowedAttrs = void 0;
 exports.hasTextChildrenOnly = hasTextChildrenOnly;
 exports.updateTestIdAttributeFix = updateTestIdAttributeFix;
@@ -18,10 +19,18 @@ function updateTestIdAttributeFix(node, fixer) {
     return ast.JSXAttribute.updateName(testIdAttr, 'testId', fixer);
   }
 }
+
+// Add color="inherit" prop depending on config
+function addColorInheritAttributeFix(node, config, fixer) {
+  if (!config.inheritColor) {
+    return;
+  }
+  return ast.JSXElement.addAttribute(node, 'color', 'inherit', fixer);
+}
 var allowedAttrs = exports.allowedAttrs = ['id', 'data-testid', 'key'];
 
 // Only allow elements with strings as children
-// The use of `FormattedMessage` component and `formatMessage` are allowed as these are used for i18n
+// The use of `<FormattedMessage ... />` component and `{formatMessage(...)}` are allowed as these are used for i18n
 function hasTextChildrenOnly(node) {
   var _node$children;
   return (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.every(function (child) {

package/dist/cjs/rules/use-primitives-text/transformers/emphasis-elements.js

@@ -36,7 +36,8 @@ var EmphasisElements = exports.EmphasisElements = {
       suggest: [{
         desc: "Convert to Text",
         fix: EmphasisElements._fix(node, {
-          context: context
+          context: context,
+          config: config
         })
       }]
     });
@@ -65,7 +66,8 @@ var EmphasisElements = exports.EmphasisElements = {
     return true;
   },
   _fix: function _fix(node, _ref3) {
-    var context = _ref3.context;
+    var context = _ref3.context,
+      config = _ref3.config;
     return function (fixer) {
       var importFix = (0, _upsertImportDeclaration.upsertImportDeclaration)({
         module: '@atlaskit/primitives',
@@ -73,8 +75,9 @@ var EmphasisElements = exports.EmphasisElements = {
       }, context, fixer);
       var elementNameFixes = ast.JSXElement.updateName(node, 'Text', fixer);
       var asAttributeFix = ast.JSXElement.addAttribute(node, 'as', 'em', fixer);
+      var colorAttributeFix = (0, _common.addColorInheritAttributeFix)(node, config, fixer);
       var testAttributeFix = (0, _common.updateTestIdAttributeFix)(node, fixer);
-      return [importFix].concat((0, _toConsumableArray2.default)(elementNameFixes), [asAttributeFix, testAttributeFix]).filter(function (fix) {
+      return [importFix].concat((0, _toConsumableArray2.default)(elementNameFixes), [asAttributeFix, colorAttributeFix, testAttributeFix]).filter(function (fix) {
         return Boolean(fix);
       }); // Some of the transformers can return arrays with undefined, so filter them out
     };

package/dist/cjs/rules/use-primitives-text/transformers/paragraph-elements.js

@@ -53,6 +53,7 @@ var ParagraphElements = exports.ParagraphElements = {
           desc: 'Convert to Text and Stack',
           fix: ParagraphElements._fixMultiple(node, {
             context: context,
+            config: config,
             refs: refs
           })
         }]
@@ -64,7 +65,8 @@ var ParagraphElements = exports.ParagraphElements = {
         suggest: [{
           desc: 'Convert to Text',
           fix: ParagraphElements._fixSingle(node, {
-            context: context
+            context: context,
+            config: config
           })
         }]
       });
@@ -130,6 +132,13 @@ var ParagraphElements = exports.ParagraphElements = {
           }
         };
       }
+    } else if (!ast.JSXElement.hasAllowedAttrsOnly(node, _common.allowedAttrs)) {
+      return {
+        success: false,
+        refs: {
+          siblings: siblings
+        }
+      };
     }
     var importDeclaration = ast.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/primitives');
 
@@ -150,21 +159,25 @@ var ParagraphElements = exports.ParagraphElements = {
     };
   },
   _fixSingle: function _fixSingle(node, _ref3) {
-    var context = _ref3.context;
+    var context = _ref3.context,
+      config = _ref3.config;
     return function (fixer) {
       var importFix = (0, _upsertImportDeclaration.upsertImportDeclaration)({
         module: '@atlaskit/primitives',
         specifiers: ['Text']
       }, context, fixer);
       var elementNameFixes = ast.JSXElement.updateName(node, 'Text', fixer);
+      var asAttributeFix = ast.JSXElement.addAttribute(node, 'as', 'p', fixer);
+      var colorAttributeFix = (0, _common.addColorInheritAttributeFix)(node, config, fixer);
       var testAttributeFix = (0, _common.updateTestIdAttributeFix)(node, fixer);
-      return [importFix].concat((0, _toConsumableArray2.default)(elementNameFixes), [testAttributeFix]).filter(function (fix) {
+      return [importFix].concat((0, _toConsumableArray2.default)(elementNameFixes), [asAttributeFix, colorAttributeFix, testAttributeFix]).filter(function (fix) {
         return Boolean(fix);
       }); // Some of the transformers can return arrays with undefined, so filter them out
     };
   },
   _fixMultiple: function _fixMultiple(node, _ref4) {
     var context = _ref4.context,
+      config = _ref4.config,
       refs = _ref4.refs;
     return function (fixer) {
       if (!(0, _eslintCodemodUtils.isNodeOfType)(node.parent, 'JSXElement') || !node.parent.closingElement) {
@@ -179,8 +192,10 @@ var ParagraphElements = exports.ParagraphElements = {
       var siblingFixes = refs.siblings.map(function (sibling) {
         if ((0, _eslintCodemodUtils.isNodeOfType)(sibling, 'JSXElement')) {
           var elementNameFixes = ast.JSXElement.updateName(sibling, 'Text', fixer);
+          var asAttributeFix = ast.JSXElement.addAttribute(sibling, 'as', 'p', fixer);
+          var colorAttributeFix = (0, _common.addColorInheritAttributeFix)(sibling, config, fixer);
           var testAttributeFix = (0, _common.updateTestIdAttributeFix)(sibling, fixer);
-          return [].concat((0, _toConsumableArray2.default)(elementNameFixes), [testAttributeFix]);
+          return [].concat((0, _toConsumableArray2.default)(elementNameFixes), [asAttributeFix, colorAttributeFix, testAttributeFix]);
         }
         return undefined;
       }).flat();

package/dist/cjs/rules/use-primitives-text/transformers/span-elements.js

@@ -36,7 +36,8 @@ var SpanElements = exports.SpanElements = {
       suggest: [{
         desc: "Convert to Text",
         fix: SpanElements._fix(node, {
-          context: context
+          context: context,
+          config: config
         })
       }]
     });
@@ -70,16 +71,17 @@ var SpanElements = exports.SpanElements = {
     return true;
   },
   _fix: function _fix(node, _ref3) {
-    var context = _ref3.context;
+    var context = _ref3.context,
+      config = _ref3.config;
     return function (fixer) {
       var importFix = (0, _upsertImportDeclaration.upsertImportDeclaration)({
         module: '@atlaskit/primitives',
         specifiers: ['Text']
       }, context, fixer);
       var elementNameFixes = ast.JSXElement.updateName(node, 'Text', fixer);
-      var variantAttributeFix = ast.JSXElement.addAttribute(node, 'variant', 'ui', fixer);
+      var colorAttributeFix = (0, _common.addColorInheritAttributeFix)(node, config, fixer);
       var testAttributeFix = (0, _common.updateTestIdAttributeFix)(node, fixer);
-      return [importFix].concat((0, _toConsumableArray2.default)(elementNameFixes), [variantAttributeFix, testAttributeFix]).filter(function (fix) {
+      return [importFix].concat((0, _toConsumableArray2.default)(elementNameFixes), [colorAttributeFix, testAttributeFix]).filter(function (fix) {
         return Boolean(fix);
       }); // Some of the transformers can return arrays with undefined, so filter them out
     };

package/dist/cjs/rules/use-primitives-text/transformers/strong-elements.js

@@ -36,7 +36,8 @@ var StrongElements = exports.StrongElements = {
       suggest: [{
         desc: "Convert to Text",
         fix: StrongElements._fix(node, {
-          context: context
+          context: context,
+          config: config
         })
       }]
     });
@@ -65,7 +66,8 @@ var StrongElements = exports.StrongElements = {
     return true;
   },
   _fix: function _fix(node, _ref3) {
-    var context = _ref3.context;
+    var context = _ref3.context,
+      config = _ref3.config;
     return function (fixer) {
       var importFix = (0, _upsertImportDeclaration.upsertImportDeclaration)({
         module: '@atlaskit/primitives',
@@ -73,8 +75,9 @@ var StrongElements = exports.StrongElements = {
       }, context, fixer);
       var elementNameFixes = ast.JSXElement.updateName(node, 'Text', fixer);
       var asAttributeFix = ast.JSXElement.addAttribute(node, 'as', 'strong', fixer);
+      var colorAttributeFix = (0, _common.addColorInheritAttributeFix)(node, config, fixer);
       var testAttributeFix = (0, _common.updateTestIdAttributeFix)(node, fixer);
-      return [importFix].concat((0, _toConsumableArray2.default)(elementNameFixes), [asAttributeFix, testAttributeFix]).filter(function (fix) {
+      return [importFix].concat((0, _toConsumableArray2.default)(elementNameFixes), [asAttributeFix, colorAttributeFix, testAttributeFix]).filter(function (fix) {
         return Boolean(fix);
       }); // Some of the transformers can return arrays with undefined, so filter them out
     };

package/dist/cjs/rules/utils/is-node.js

@@ -3,8 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.isPropertyKey = exports.isDecendantOfType = exports.isDecendantOfSvgElement = exports.isDecendantOfStyleJsxAttribute = exports.isDecendantOfStyleBlock = exports.isDecendantOfGlobalToken = exports.isCssInJsTemplateNode = exports.isCssInJsObjectNode = exports.isCssInJsCallNode = exports.isChildOfType = void 0;
+exports.isPropertyKey = exports.isDecendantOfType = exports.isDecendantOfSvgElement = exports.isDecendantOfStyleJsxAttribute = exports.isDecendantOfStyleBlock = exports.isDecendantOfPrimitive = exports.isDecendantOfGlobalToken = exports.isCssInJsTemplateNode = exports.isCssInJsObjectNode = exports.isCssInJsCallNode = exports.isChildOfType = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _astNodes = require("../../ast-nodes");
 // eslint-disable-next-line import/no-extraneous-dependencies
 
 var isDecendantOfGlobalToken = exports.isDecendantOfGlobalToken = function isDecendantOfGlobalToken(node) {
@@ -54,6 +55,22 @@ var isDecendantOfSvgElement = exports.isDecendantOfSvgElement = function isDecen
   }
   return false;
 };
+var isDecendantOfPrimitive = exports.isDecendantOfPrimitive = function isDecendantOfPrimitive(node, context) {
+  var primitivesToCheck = ['Box', 'Text'];
+  if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
+    // @ts-ignore
+    if (primitivesToCheck.includes(node.openingElement.name.name)) {
+      var importDeclaration = _astNodes.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/primitives');
+      if (importDeclaration.length) {
+        return true;
+      }
+    }
+  }
+  if (node.parent) {
+    return isDecendantOfPrimitive(node.parent, context);
+  }
+  return false;
+};
 var cssInJsCallees = ['css', 'styled', 'styled2'];
 var isCssInJsTemplateNode = exports.isCssInJsTemplateNode = function isCssInJsTemplateNode(node) {
   return (node === null || node === void 0 ? void 0 : node.type) === 'TaggedTemplateExpression' && node.tag.type === 'MemberExpression' && node.tag.object.type === 'Identifier' && node.tag.object.name === 'styled';

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

@@ -4,7 +4,7 @@ import { node as generate, isNodeOfType } from 'eslint-codemod-utils';
 import { getIsException } from '../utils/get-is-exception';
 import { includesHardCodedColor, isHardCodedColor, isLegacyColor, isLegacyNamedColor } from '../utils/is-color';
 import { isLegacyElevation } from '../utils/is-elevation';
-import { isChildOfType, isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfSvgElement } from '../utils/is-node';
+import { isChildOfType, isDecendantOfGlobalToken, isDecendantOfPrimitive, isDecendantOfStyleBlock, isDecendantOfSvgElement } from '../utils/is-node';
 // TemplateLiteral > Identifier
 export const lintTemplateIdentifierForColor = (node, context, config) => {
   if (node.type !== 'Identifier') {
@@ -138,6 +138,11 @@ export const lintJSXLiteralForColor = (node, context, config) => {
   if (isDecendantOfSvgElement(node.parent)) {
     return;
   }
+
+  // Box backgroundColor prop accepts token names directly - don't lint against this
+  if (isDecendantOfPrimitive(node.parent, context)) {
+    return;
+  }
   if (['alt', 'src', 'label', 'key'].includes(node.parent.name.name)) {
     return;
   }

package/dist/es2019/rules/use-primitives/transformers/compiled-styled/find-valid-jsx-usage-to-transform.js

@@ -1,10 +1,13 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
-
+const JSX_IDENTIFIER = 'JSXIdentifier';
 /**
  * Given a component name finds its JSX usages and performs some
  * additional validations to ensure transformation can be done correctly
+ *
+ * anyOrder: if true, the order of the references doesn't matter (JSX or style declaration)
  */
-export const findValidJsxUsageToTransform = (componentName, scope) => {
+export const findValidJsxUsageToTransform = (componentName, scope, anyOrder = false) => {
+  var _variableDeclaration$;
   const variableDeclaration = scope.variables.find(v => v.name === componentName);
   if (!variableDeclaration) {
     return;
@@ -18,7 +21,18 @@ export const findValidJsxUsageToTransform = (componentName, scope) => {
   if (variableDeclaration.references.length !== 2) {
     return;
   }
-  const jsxUsage = variableDeclaration.references[1].identifier;
+  let jsxUsage = (_variableDeclaration$ = variableDeclaration.references[1]) === null || _variableDeclaration$ === void 0 ? void 0 : _variableDeclaration$.identifier;
+  if (anyOrder) {
+    const [firstIdentifier, secondIdentifier] = variableDeclaration.references.map(ref => ref === null || ref === void 0 ? void 0 : ref.identifier);
+    // Check if the first reference is a JSXOpeningElement and the second is not or vice versa
+    if (isNodeOfType(firstIdentifier, JSX_IDENTIFIER) && !isNodeOfType(secondIdentifier, JSX_IDENTIFIER)) {
+      jsxUsage = firstIdentifier;
+    } else if (isNodeOfType(secondIdentifier, JSX_IDENTIFIER) && !isNodeOfType(firstIdentifier, JSX_IDENTIFIER)) {
+      jsxUsage = secondIdentifier;
+    } else {
+      return;
+    }
+  }
   if (!isNodeOfType(jsxUsage, 'JSXIdentifier')) {
     return;
   }

package/dist/es2019/rules/use-primitives/transformers/compiled-styled/index.js

@@ -57,7 +57,8 @@ export const CompiledStyled = {
         success: false
       };
     }
-    const styledComponentJsxRef = findValidJsxUsageToTransform(styledComponentVariableRef.id.name, context.getScope());
+    const anyOrder = config.patterns.includes('jsx-order-fix');
+    const styledComponentJsxRef = findValidJsxUsageToTransform(styledComponentVariableRef.id.name, context.getScope(), anyOrder);
     if (!styledComponentJsxRef) {
       return {
         success: false

package/dist/es2019/rules/use-primitives-text/config/index.js

@@ -1,5 +1,6 @@
 const defaults = {
-  patterns: ['paragraph-elements', 'span-elements', 'strong-elements', 'emphasis-elements']
+  patterns: ['paragraph-elements', 'span-elements', 'strong-elements', 'emphasis-elements'],
+  inheritColor: false
 };
 export const getConfig = overrides => {
   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign

package/dist/es2019/rules/use-primitives-text/transformers/common.js

@@ -1,6 +1,5 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import * as ast from '../../../ast-nodes';
-
 // Rename data-testid prop to testId if present
 export function updateTestIdAttributeFix(node, fixer) {
   const testIdAttr = ast.JSXElement.getAttributeByName(node, 'data-testid');
@@ -8,10 +7,18 @@ export function updateTestIdAttributeFix(node, fixer) {
     return ast.JSXAttribute.updateName(testIdAttr, 'testId', fixer);
   }
 }
+
+// Add color="inherit" prop depending on config
+export function addColorInheritAttributeFix(node, config, fixer) {
+  if (!config.inheritColor) {
+    return;
+  }
+  return ast.JSXElement.addAttribute(node, 'color', 'inherit', fixer);
+}
 export const allowedAttrs = ['id', 'data-testid', 'key'];
 
 // Only allow elements with strings as children
-// The use of `FormattedMessage` component and `formatMessage` are allowed as these are used for i18n
+// The use of `<FormattedMessage ... />` component and `{formatMessage(...)}` are allowed as these are used for i18n
 export function hasTextChildrenOnly(node) {
   var _node$children;
   return (_node$children = node.children) === null || _node$children === void 0 ? void 0 : _node$children.every(child => {

package/dist/es2019/rules/use-primitives-text/transformers/emphasis-elements.js

@@ -3,7 +3,7 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import * as ast from '../../../ast-nodes';
 import { upsertImportDeclaration } from '../../use-primitives/transformers/emotion-css/upsert-import-declaration';
-import { allowedAttrs, updateTestIdAttributeFix } from './common';
+import { addColorInheritAttributeFix, allowedAttrs, updateTestIdAttributeFix } from './common';
 export const EmphasisElements = {
   lint(node, {
     context,
@@ -26,7 +26,8 @@ export const EmphasisElements = {
       suggest: [{
         desc: `Convert to Text`,
         fix: EmphasisElements._fix(node, {
-          context
+          context,
+          config
         })
       }]
     });
@@ -56,7 +57,8 @@ export const EmphasisElements = {
     return true;
   },
   _fix(node, {
-    context
+    context,
+    config
   }) {
     return fixer => {
       const importFix = upsertImportDeclaration({
@@ -65,8 +67,9 @@ export const EmphasisElements = {
       }, context, fixer);
       const elementNameFixes = ast.JSXElement.updateName(node, 'Text', fixer);
       const asAttributeFix = ast.JSXElement.addAttribute(node, 'as', 'em', fixer);
+      const colorAttributeFix = addColorInheritAttributeFix(node, config, fixer);
       const testAttributeFix = updateTestIdAttributeFix(node, fixer);
-      return [importFix, ...elementNameFixes, asAttributeFix, testAttributeFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
+      return [importFix, ...elementNameFixes, asAttributeFix, colorAttributeFix, testAttributeFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
     };
   }
 };

package/dist/es2019/rules/use-primitives-text/transformers/paragraph-elements.js

@@ -3,7 +3,7 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import * as ast from '../../../ast-nodes';
 import { upsertImportDeclaration } from '../../use-primitives/transformers/emotion-css/upsert-import-declaration';
-import { allowedAttrs, updateTestIdAttributeFix } from './common';
+import { addColorInheritAttributeFix, allowedAttrs, updateTestIdAttributeFix } from './common';
 export const ParagraphElements = {
   lint(node, {
     context,
@@ -44,6 +44,7 @@ export const ParagraphElements = {
           desc: 'Convert to Text and Stack',
           fix: ParagraphElements._fixMultiple(node, {
             context,
+            config,
             refs
           })
         }]
@@ -55,7 +56,8 @@ export const ParagraphElements = {
         suggest: [{
           desc: 'Convert to Text',
           fix: ParagraphElements._fixSingle(node, {
-            context
+            context,
+            config
           })
         }]
       });
@@ -122,6 +124,13 @@ export const ParagraphElements = {
           }
         };
       }
+    } else if (!ast.JSXElement.hasAllowedAttrsOnly(node, allowedAttrs)) {
+      return {
+        success: false,
+        refs: {
+          siblings
+        }
+      };
     }
     const importDeclaration = ast.Root.findImportsByModule(context.getSourceCode().ast.body, '@atlaskit/primitives');
 
@@ -142,7 +151,8 @@ export const ParagraphElements = {
     };
   },
   _fixSingle(node, {
-    context
+    context,
+    config
   }) {
     return fixer => {
       const importFix = upsertImportDeclaration({
@@ -150,13 +160,16 @@ export const ParagraphElements = {
         specifiers: ['Text']
       }, context, fixer);
       const elementNameFixes = ast.JSXElement.updateName(node, 'Text', fixer);
+      const asAttributeFix = ast.JSXElement.addAttribute(node, 'as', 'p', fixer);
+      const colorAttributeFix = addColorInheritAttributeFix(node, config, fixer);
       const testAttributeFix = updateTestIdAttributeFix(node, fixer);
-      return [importFix, ...elementNameFixes, testAttributeFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
+      return [importFix, ...elementNameFixes, asAttributeFix, colorAttributeFix, testAttributeFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
     };
   },
 
   _fixMultiple(node, {
     context,
+    config,
     refs
   }) {
     return fixer => {
@@ -172,8 +185,10 @@ export const ParagraphElements = {
       const siblingFixes = refs.siblings.map(sibling => {
         if (isNodeOfType(sibling, 'JSXElement')) {
           const elementNameFixes = ast.JSXElement.updateName(sibling, 'Text', fixer);
+          const asAttributeFix = ast.JSXElement.addAttribute(sibling, 'as', 'p', fixer);
+          const colorAttributeFix = addColorInheritAttributeFix(sibling, config, fixer);
           const testAttributeFix = updateTestIdAttributeFix(sibling, fixer);
-          return [...elementNameFixes, testAttributeFix];
+          return [...elementNameFixes, asAttributeFix, colorAttributeFix, testAttributeFix];
         }
         return undefined;
       }).flat();

package/dist/es2019/rules/use-primitives-text/transformers/span-elements.js

@@ -3,7 +3,7 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
 import * as ast from '../../../ast-nodes';
 import { upsertImportDeclaration } from '../../use-primitives/transformers/emotion-css/upsert-import-declaration';
-import { allowedAttrs, hasTextChildrenOnly, updateTestIdAttributeFix } from './common';
+import { addColorInheritAttributeFix, allowedAttrs, hasTextChildrenOnly, updateTestIdAttributeFix } from './common';
 export const SpanElements = {
   lint(node, {
     context,
@@ -26,7 +26,8 @@ export const SpanElements = {
       suggest: [{
         desc: `Convert to Text`,
         fix: SpanElements._fix(node, {
-          context
+          context,
+          config
         })
       }]
     });
@@ -61,7 +62,8 @@ export const SpanElements = {
     return true;
   },
   _fix(node, {
-    context
+    context,
+    config
   }) {
     return fixer => {
       const importFix = upsertImportDeclaration({
@@ -69,9 +71,9 @@ export const SpanElements = {
         specifiers: ['Text']
       }, context, fixer);
       const elementNameFixes = ast.JSXElement.updateName(node, 'Text', fixer);
-      const variantAttributeFix = ast.JSXElement.addAttribute(node, 'variant', 'ui', fixer);
+      const colorAttributeFix = addColorInheritAttributeFix(node, config, fixer);
       const testAttributeFix = updateTestIdAttributeFix(node, fixer);
-      return [importFix, ...elementNameFixes, variantAttributeFix, testAttributeFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
+      return [importFix, ...elementNameFixes, colorAttributeFix, testAttributeFix].filter(fix => Boolean(fix)); // Some of the transformers can return arrays with undefined, so filter them out
     };
   }
 };