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

…matter which component.
primer · Nov 15, 2021 · b0824f6 · b0824f6
1 parent cbc5e8e
commit b0824f6
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/.changeset/orange-tools-begin.md b/.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.
diff --git a/src/rules/__tests__/no-system-props.test.js b/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: [
     {

diff --git a/src/rules/no-system-props.js b/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)
         })