diff --git a/.changeset/orange-tools-begin.md b/.changeset/orange-tools-begin.md
new file mode 100644
index 00000000..9995cb76
--- /dev/null
+++ 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
index 56ebb5a6..5053fe05 100644
--- 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'; `,
`import {Box} from '@primer/components'; `,
`import {ProgressBar} from '@primer/components'; `,
- `import {Button} from '@primer/components'; `
+ `import {Button} from '@primer/components'; `,
+ `import {Button} from '@primer/components'; `
],
invalid: [
{
diff --git a/src/rules/no-system-props.js b/src/rules/no-system-props.js
index 91ae0b41..a76a6b11 100644
--- 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)
})