Merge pull request #20 from primer/jfuchs/variant-prop

Updates no-system-props rule to always exclude the 'variant' prop

Author: jfuchs

.changeset/orange-tools-begin.md

@@ -0,0 +1,5 @@
+---
+'eslint-plugin-primer-react': minor
+---
+
+Updates no-system-props rule to always exclude the 'variant' prop no matter which component.

src/rules/__tests__/no-system-props.test.js

@@ -18,7 +18,8 @@ ruleTester.run('no-system-props', rule, {
     `import {Button} from '@primer/components'; <Button someOtherProp="foo" />`,
     `import {Box} from '@primer/components'; <Box width={200} />`,
     `import {ProgressBar} from '@primer/components'; <ProgressBar bg="howdy" />`,
-    `import {Button} from '@primer/components'; <Button {...someExpression()} />`
+    `import {Button} from '@primer/components'; <Button {...someExpression()} />`,
+    `import {Button} from '@primer/components'; <Button variant="large" />`
   ],
   invalid: [
     {

src/rules/no-system-props.js

@@ -15,13 +15,13 @@ const excludedComponentProps = new Map([
   ['AnchoredOverlay', new Set(['width', 'height'])],
   ['Avatar', new Set(['size'])],
   ['Dialog', new Set(['width', 'height'])],
-  ['Flash', new Set(['variant'])],
-  ['Label', new Set(['variant'])],
   ['ProgressBar', new Set(['bg'])],
   ['Spinner', new Set(['size'])],
   ['StyledOcticon', new Set(['size'])]
 ])
 
+const alwaysExcludedProps = new Set(['variant'])
+
 module.exports = {
   meta: {
     type: 'suggestion',
@@ -65,12 +65,12 @@ module.exports = {
         // Create an array of system prop attribute nodes
         let systemProps = Object.values(pick(propsByNameObject))
 
+        let excludedProps = excludedComponentProps.has(jsxNode.name.name)
+          ? new Set([...alwaysExcludedProps, ...excludedComponentProps.get(jsxNode.name.name)])
+          : alwaysExcludedProps
+
         // Filter out our exceptional props
         systemProps = systemProps.filter(prop => {
-          const excludedProps = excludedComponentProps.get(jsxNode.name.name)
-          if (!excludedProps) {
-            return true
-          }
           return !excludedProps.has(prop.name.name)
         })