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';