[Fix] no-unknown-property: add valign on table components

Fixes #3389
jsx-eslint · Sep 5, 2022 · 64ad602 · 64ad602
1 parent 9de16a7
commit 64ad602
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 3 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -16,6 +16,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 * [`no-unknown-property`]: allow `imageSrcSet` and `imageSizes` attributes on `<link>` ([#3407][] @terrymun)
 * [`no-unknown-property`]: add `border`; `focusable` on `<svg>` ([#3404][] [#3404][] @ljharb)
 * [`no-unknown-property`]: React lowercases `data-` attrs ([#3395][] @ljharb)
+* [`no-unknown-property`]: add `valign` on table components ([#3389][] @ljharb)
 
 [#3407]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3407
 [#3406]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3406
@@ -28,6 +29,7 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 [#3395]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3395
 [#3394]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3394
 [#3391]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3391
+[#3389]: https://github.com/jsx-eslint/eslint-plugin-react/issues/3389
 
 ## [7.31.6] - 2022.09.04
 

diff --git a/lib/rules/no-unknown-property.js b/lib/rules/no-unknown-property.js
@@ -63,6 +63,7 @@ const ATTRIBUTE_TAGS_MAP = {
   property: ['meta'],
   viewBox: ['svg'],
   as: ['link'],
+  valign: ['tr', 'td', 'th', 'thead', 'tbody', 'tfoot', 'colgroup', 'col'], // deprecated, but known
   // Media events allowed only on audio and video tags, see https://github.com/facebook/react/blob/256aefbea1449869620fb26f6ec695536ab453f5/CHANGELOG.md#notable-enhancements
   onAbort: ['audio', 'video'],
   onCanPlay: ['audio', 'video'],
@@ -88,18 +89,17 @@ const ATTRIBUTE_TAGS_MAP = {
   onTimeUpdate: ['audio', 'video'],
   onVolumeChange: ['audio', 'video'],
   onWaiting: ['audio', 'video'],
-  scrolling: ['iframe'],
-  playsInline: ['video'],
-  // Video related attributes
   autoPictureInPicture: ['video'],
   controls: ['audio', 'video'],
   controlsList: ['audio', 'video'],
   disablePictureInPicture: ['video'],
   disableRemotePlayback: ['audio', 'video'],
   loop: ['audio', 'video'],
   muted: ['audio', 'video'],
+  playsInline: ['video'],
   poster: ['video'],
   preload: ['audio', 'video'],
+  scrolling: ['iframe'],
 };
 
 const SVGDOM_ATTRIBUTE_NAMES = {

diff --git a/tests/lib/rules/no-unknown-property.js b/tests/lib/rules/no-unknown-property.js
@@ -119,6 +119,23 @@ ruleTester.run('no-unknown-property', rule, {
     { code: '<link as="audio">Audio content</link>' },
     { code: '<video controlsList="nodownload" controls={this.controls} loop={true} muted={false} src={this.videoSrc} playsInline={true}></video>' },
     { code: '<audio controlsList="nodownload" controls={this.controls} crossOrigin="anonymous" disableRemotePlayback loop muted preload="none" src="something" onAbort={this.abort} onDurationChange={this.durationChange} onEmptied={this.emptied} onEnded={this.end} onError={this.error}></audio>' },
+    {
+      code: `
+        <table>
+          <colgroup valign="top">
+            <col valign="top" />
+          </colgroup>
+          <thead valign="top">
+            <tr valign="top">
+              <th valign="top">Header</th>
+              <td valign="top">Cell</td>
+            </tr>
+          </thead>
+          <tbody valign="top" />
+          <tfoot valign="top" />
+        </table>
+      `,
+    },
 
     // fbt
     { code: '<fbt desc="foo" doNotExtract />;' },