eslint-plugin-primer-react 2.0.1 → 2.0.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # eslint-plugin-primer-react
 
+## 2.0.2
+
+### Patch Changes
+
+- [#45](https://github.com/primer/eslint-plugin-primer-react/pull/45) [`a39e34d`](https://github.com/primer/eslint-plugin-primer-react/commit/a39e34d26e72cc4b64a35627a6c4f700fae93fe2) Thanks [@colebemis](https://github.com/colebemis)! - More `direct-slot-children` fixes:
+  - Fix bug related self-closing JSX tags
+  - Allow slot children to accept multiple parents (ex: `ActionList.Item` or `ActionList.LinkItem`)
+  - Add `SplitPageLayout` and `NavList` to the slot map
+  - Ignore `MarkdownEditor` because it's still a draft
+
 ## 2.0.1
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "scripts": {

package/src/rules/__tests__/direct-slot-children.test.js

@@ -17,10 +17,12 @@ ruleTester.run('direct-slot-children', rule, {
     `import {PageLayout} from '@primer/react'; <PageLayout><div><PageLayout.Pane>Header</PageLayout.Pane></div></PageLayout>`,
     `import {PageLayout} from '@primer/react'; <PageLayout>{true ? <PageLayout.Header>Header</PageLayout.Header> : null}</PageLayout>`,
     `import {PageLayout} from './PageLayout'; <PageLayout.Header>Header</PageLayout.Header>`,
-    {
-      code: `import {Foo} from './Foo'; <Foo><div><Foo.Bar></Foo.Bar></div></Foo>`,
-      options: [{skipImportCheck: true}]
-    }
+    `import {FormControl, Radio} from '@primer/react'; <FormControl><Radio value="one" /><FormControl.Label>Choice one</FormControl.Label></FormControl>`,
+    `import {ActionList} from '@primer/react';
+    <ActionList.Item><ActionList.LeadingVisual> <Avatar src="https://github.com/mona.png" /></ActionList.LeadingVisual>mona<ActionList.Description>Monalisa Octocat</ActionList.Description></ActionList.Item>`,
+    `import {ActionList} from '@primer/react';
+    <ActionList.LinkItem><ActionList.LeadingVisual></ActionList.LeadingVisual>mona<ActionList.Description>Monalisa Octocat</ActionList.Description></ActionList.LinkItem>`,
+    {code: `import {Foo} from './Foo'; <Foo><div><Foo.Bar></Foo.Bar></div></Foo>`, options: [{skipImportCheck: true}]}
   ],
   invalid: [
     {
@@ -32,6 +34,15 @@ ruleTester.run('direct-slot-children', rule, {
         }
       ]
     },
+    {
+      code: `import {PageLayout} from '@primer/react'; function Header() { return <PageLayout.Header>Header</PageLayout.Header>; }`,
+      errors: [
+        {
+          messageId: 'directSlotChildren',
+          data: {childName: 'PageLayout.Header', parentName: 'PageLayout'}
+        }
+      ]
+    },
     {
       code: `import {PageLayout} from '@primer/react/drafts'; <PageLayout.Header>Header</PageLayout.Header>`,
       errors: [
@@ -77,6 +88,15 @@ ruleTester.run('direct-slot-children', rule, {
           data: {childName: 'PageLayout.Header', parentName: 'PageLayout'}
         }
       ]
+    },
+    {
+      code: `import {ActionList} from '@primer/react'; <ActionList.Item><div><ActionList.LeadingVisual>Visual</ActionList.LeadingVisual></div></ActionList.Item>`,
+      errors: [
+        {
+          messageId: 'directSlotChildren',
+          data: {childName: 'ActionList.LeadingVisual', parentName: 'ActionList.Item or ActionList.LinkItem'}
+        }
+      ]
     }
   ]
 })

package/src/rules/direct-slot-children.js

@@ -3,17 +3,25 @@ const {last} = require('lodash')
 
 const slotParentToChildMap = {
   PageLayout: ['PageLayout.Header', 'PageLayout.Footer'],
+  SplitPageLayout: ['SplitPageLayout.Header', 'SplitPageLayout.Footer'],
   FormControl: ['FormControl.Label', 'FormControl.Caption', 'FormControl.LeadingVisual', 'FormControl.TrailingVisual'],
-  MarkdownEditor: ['MarkdownEditor.Toolbar', 'MarkdownEditor.Actions', 'MarkdownEditor.Label'],
   'ActionList.Item': ['ActionList.LeadingVisual', 'ActionList.TrailingVisual', 'ActionList.Description'],
+  'ActionList.LinkItem': ['ActionList.LeadingVisual', 'ActionList.TrailingVisual', 'ActionList.Description'],
+  'NavList.Item': ['NavList.LeadingVisual', 'NavList.TrailingVisual'],
   'TreeView.Item': ['TreeView.LeadingVisual', 'TreeView.TrailingVisual'],
   RadioGroup: ['RadioGroup.Label', 'RadioGroup.Caption', 'RadioGroup.Validation'],
   CheckboxGroup: ['CheckboxGroup.Label', 'CheckboxGroup.Caption', 'CheckboxGroup.Validation']
+  // Ignore `MarkdownEditor` for now because it's still in drafts
+  // MarkdownEditor: ['MarkdownEditor.Toolbar', 'MarkdownEditor.Actions', 'MarkdownEditor.Label'],
 }
 
 const slotChildToParentMap = Object.entries(slotParentToChildMap).reduce((acc, [parent, children]) => {
   for (const child of children) {
-    acc[child] = parent
+    if (acc[child]) {
+      acc[child].push(parent)
+    } else {
+      acc[child] = [parent]
+    }
   }
   return acc
 }, {})
@@ -50,19 +58,24 @@ module.exports = {
           (skipImportCheck || isPrimerComponent(jsxNode.name, context.getScope(jsxNode))) &&
           slotChildToParentMap[name]
         ) {
-          const expectedParentName = slotChildToParentMap[name]
+          const expectedParentNames = slotChildToParentMap[name]
           const parent = last(stack)
-          if (parent !== expectedParentName) {
+          if (!expectedParentNames.includes(parent)) {
             context.report({
               node: jsxNode,
               messageId: 'directSlotChildren',
-              data: {childName: name, parentName: expectedParentName}
+              data: {
+                childName: name,
+                parentName: expectedParentNames.length > 1 ? expectedParentNames.join(' or ') : expectedParentNames[0]
+              }
             })
           }
         }
 
-        // Push the current element onto the stack
-        stack.push(name)
+        // If tag is not self-closing, push it onto the stack
+        if (!jsxNode.selfClosing) {
+          stack.push(name)
+        }
       },
       JSXClosingElement() {
         // Pop the current element off the stack