[Fix] jsx-child-element-spacing: Don't flag whitespace around `<br/…

…>` tags Fixes #2988.
jsx-eslint · May 18, 2021 · 9a140a5 · 9a140a5
1 parent 9aa539d
commit 9a140a5
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -13,13 +13,15 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 * [`jsx-handler-names`]: properly substitute value into message ([#2975][] @G-Rath)
 * [`jsx-uses-vars`]: ignore namespaces ([#2985][] @remcohaszing)
 * [`jsx-no-undef`]: ignore namespaces ([#2986][] @remcohaszing)
+* [`jsx-child-element-spacing`]: Don't flag whitespace around `<br/>` tags ([#2989][] @pascalpp)
 
 ### Changed
 * [Docs] [`jsx-newline`]: Fix minor spelling error on rule name ([#2974][] @DennisSkoko)
 * [Refactor] [`void-dom-elements-no-children`]: improve performance
 * [readme] fix missing trailing commas ([#2980][] @sugardon)
 * [readme] fix broken anchor link ([#2982][] @vzvu3k6k)
 
+[#2989]: https://github.com/yannickcr/eslint-plugin-react/pull/2989
 [#2986]: https://github.com/yannickcr/eslint-plugin-react/pull/2986
 [#2985]: https://github.com/yannickcr/eslint-plugin-react/pull/2985
 [#2982]: https://github.com/yannickcr/eslint-plugin-react/pull/2982
@@ -3362,4 +3364,4 @@ If you're still not using React 15 you can keep the old behavior by setting the
 [`function-component-definition`]: docs/rules/function-component-definition.md
 [`jsx-newline`]: docs/rules/jsx-newline.md
 [`jsx-no-constructed-context-values`]: docs/rules/jsx-no-constructed-context-values.md
-[`no-unstable-nested-components`]: docs/rules/no-unstable-nested-components.md
+[`no-unstable-nested-components`]: docs/rules/no-unstable-nested-components.md
diff --git a/lib/rules/jsx-child-element-spacing.js b/lib/rules/jsx-child-element-spacing.js
@@ -3,14 +3,15 @@
 const docsUrl = require('../util/docsUrl');
 
 // This list is taken from https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements
+
+// Note: 'br' is not included because whitespace around br tags is inconsequential to the rendered output
 const INLINE_ELEMENTS = new Set([
   'a',
   'abbr',
   'acronym',
   'b',
   'bdo',
   'big',
-  'br',
   'button',
   'cite',
   'code',

diff --git a/tests/lib/rules/jsx-child-element-spacing.js b/tests/lib/rules/jsx-child-element-spacing.js
@@ -139,6 +139,31 @@ ruleTester.run('jsx-child-element-spacing', rule, {
         B
       </App>
     `
+  }, {
+    code: `
+      <App>
+        A
+        <br/>
+        B
+      </App>
+    `
+  }, {
+    code: `
+      <App>
+        A<br/>
+        B
+      </App>
+    `
+  }, {
+    code: `
+      <App>
+        A<br/>B
+      </App>
+    `
+  }, {
+    code: `
+      <App>A<br/>B</App>
+    `
   }],
 
   invalid: [{
-Original file line number
+Diff line change
@@ Expand Up / @@ -139,6 +139,31 @@ ruleTester.run('jsx-child-element-spacing', rule, { @@
             B
           </App>
         `
+      }, {
+        code: `
+          <App>
+            A
+            <br/>
+            B
+          </App>
+        `
+      }, {
+        code: `
+          <App>
+            A<br/>
+            B
+          </App>
+        `
+      }, {
+        code: `
+          <App>
+            A<br/>B
+          </App>
+        `
+      }, {
+        code: `
+          <App>A<br/>B</App>
+        `
       }],
       invalid: [{
@@ Expand Down @@