diff --git a/.changeset/smooth-cows-drum.md b/.changeset/smooth-cows-drum.md new file mode 100644 index 00000000..30309c09 --- /dev/null +++ b/.changeset/smooth-cows-drum.md @@ -0,0 +1,5 @@ +--- +'@shopify/eslint-plugin': minor +--- + +extend jsx-no-hardcoded-content to handle ternary and logical expressions diff --git a/packages/eslint-plugin/lib/rules/jsx-no-hardcoded-content.js b/packages/eslint-plugin/lib/rules/jsx-no-hardcoded-content.js index 1efe28bd..0ba781cf 100644 --- a/packages/eslint-plugin/lib/rules/jsx-no-hardcoded-content.js +++ b/packages/eslint-plugin/lib/rules/jsx-no-hardcoded-content.js @@ -205,6 +205,12 @@ function checkContent( !isEmptyString(contentNode.value)) || (!allowNumbers && typeof contentNode.value === 'number'))) || (contentNode.type === 'TemplateLiteral' && !allowStrings) || + (contentNode.type === 'ConditionalExpression' && + (isInvalidContent(contentNode.consequent) || + isInvalidContent(contentNode.alternate))) || + (contentNode.type === 'LogicalExpression' && + (isInvalidContent(contentNode.left) || + isInvalidContent(contentNode.right))) || (contentNode.type === 'JSXExpressionContainer' && isInvalidContent(contentNode.expression)) ); diff --git a/packages/eslint-plugin/tests/lib/rules/jsx-no-hardcoded-content.test.js b/packages/eslint-plugin/tests/lib/rules/jsx-no-hardcoded-content.test.js index 8ec531ab..45b01234 100644 --- a/packages/eslint-plugin/tests/lib/rules/jsx-no-hardcoded-content.test.js +++ b/packages/eslint-plugin/tests/lib/rules/jsx-no-hardcoded-content.test.js @@ -103,6 +103,14 @@ ruleTester.run('jsx-no-hardcoded-content', rule, { code: '', options: [{...checkProps, ...allowStrings}], }, + { + code: '{foo ? "Content" : "Other Content"}', + options: [{...checkProps, ...allowStrings}], + }, + { + code: '{foo && "Content"}', + options: [{...checkProps, ...allowStrings}], + }, { code: '{42}', options: [ @@ -426,6 +434,18 @@ ruleTester.run('jsx-no-hardcoded-content', rule, { options: [checkProps], errors: errorsFor('MyComponent', 'foo'), }, + { + code: '{foo ? "Content" : "Other Content"}', + errors: errorsFor('MyComponent', 'children'), + }, + { + code: '{foo && "Content"}', + errors: errorsFor('MyComponent', 'children'), + }, + { + code: '{foo || "Content"}', + errors: errorsFor('MyComponent', 'children'), + }, { code: ` import {MyComponent} from 'my-module';