[Fix] jsx-indent-props: Apply indentation when using brackets

Per #2808 (comment)
jsx-eslint · Oct 13, 2020 · 237547e · 237547e
1 parent 632639b
commit 237547e
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,11 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 
 ## Unreleased
 
+### Fixed
+* [`jsx-indent-props`]: Apply indentation when using brackets ([#2826][] @Moong0122)
+
+[#2826]: https://github.com/yannickcr/eslint-plugin-react/issues/2826
+
 ## [7.21.4] - 2020.10.09
 
 ### Fixed

diff --git a/lib/rules/jsx-indent-props.js b/lib/rules/jsx-indent-props.js
@@ -124,10 +124,14 @@ module.exports = {
 
       const indent = regExp.exec(src);
       const useOperator = /^([ ]|[\t])*[:]/.test(src) || /^([ ]|[\t])*[?]/.test(src);
+      const useBracket = /^([ ]|[\t])*[<]/.test(src);
+
       line.currentOperator = false;
       if (useOperator) {
         line.isUsingOperator = true;
         line.currentOperator = true;
+      } else if (useBracket) {
+        line.isUsingOperator = false;
       }
 
       return indent ? indent[0].length : 0;

diff --git a/tests/lib/rules/jsx-indent-props.js b/tests/lib/rules/jsx-indent-props.js
@@ -38,6 +38,23 @@ ruleTester.run('jsx-indent-props', rule, {
       '/>'
     ].join('\n'),
     options: [2]
+  }, {
+    code: [
+      'const Test = () => ([',
+      '  (x',
+      '    ? <div key="1" />',
+      '    : <div key="2" />),',
+      '  <div',
+      '    key="3"',
+      '    align="left"',
+      '  />,',
+      '  <div',
+      '    key="4"',
+      '    align="left"',
+      '  />,',
+      ']);'
+    ].join('\n'),
+    options: [2]
   }, {
     code: [
       '<App',