Adds a no-system-props rule

[jfuchs]

No description provided.

[changeset-bot]

🦋 Changeset detected

Latest commit: 0555c31

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
eslint-plugin-primer-react	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[colebemis]

This is really awesome, @jfuchs! 🔥

Left a few minor comments. Nothing blocking.

[colebemis]

How do you feel about calling this variable systemProps instead of badProps? I think that would align nicely with the name of the rule (no-system-props)

[colebemis]

Calling this attribute instead of cur might be a litte more clear:

Suggested change

	const propsByNameObject = jsxNode.attributes.reduce((object, cur) => {
	// We don't do anything about spreads for now — only named attributes:
	if (cur.type === 'JSXAttribute') {
	object[cur.name.name] = cur
	}
	const propsByNameObject = jsxNode.attributes.reduce((object, attribute) => {
	// We don't do anything about spreads for now — only named attributes:
	if (attribute.type === 'JSXAttribute') {
	object[attribute.name.name] = attribute
	}

[colebemis]

Suggested change

	noSystemProps: 'Styled-system props are deprecated ({{componentName}} called with props: {{ propNames }})'
	noSystemProps: 'Styled-system props are deprecated ({{ componentName }} called with props: {{ propNames }})'

[colebemis]

This is super nitpicky (so feel free to ignore): Is there a reason some of your comments end with a colon and some don't?

[colebemis]

Unless you have strong opinions otherwise, can we name these utility files with kebab case instead of camel case to be consistent with the rest of the filenames in this repo?

[colebemis]

Suggested change

	# Disallow use of style system props (no-system-colors)
	# Disallow use of styled-system props (no-system-colors)

[colebemis]

Suggested change

	System props are deprecated in Primer components (excluding utility components).
	[Styled-system](https://styled-system.com/table) props are deprecated in Primer React components (excluding utility components).

[colebemis]

Can we also mention that the sx prop is now the preferred method of applying custom styles?

[colebemis]

Flash also accepts a variant prop:

Suggested change

	['Dialog', new Set(['width', 'height'])],
	['Label', new Set(['variant'])],
	['Dialog', new Set(['width', 'height'])],
	['Flash', new Set(['variant'])],
	['Label', new Set(['variant'])],

[colebemis]

A couple of notes here:

• I think a prop like mr={} is more recognizable as a styled-system prop than width={}. Using mr={} as our example in this document might make help people understand the idea faster.
• Adding comments about why these examples are correct could be helpful.

Suggested change

	```jsx
	/* eslint primer-react/no-system-props: "error" */
	import {Box, Button, ProgressBar} from '@primer/components'
	import {Avatar} from 'some-other-library'
	<Button sx={{width: 200}} />,
	<Button someOtherProp="foo" />,
	<ProgressBar bg="howdy" />
	<Box width={200} />,
	<Avatar width={200} />,
	```
	```jsx
	/* eslint primer-react/no-system-props: "error" */
	import {Box, Button, ProgressBar} from '@primer/components'
	import {Avatar} from 'some-other-library'
	// Non-system props are allowed
	<Button someOtherProp="foo" />
	// If you need to override styles, use the `sx` prop instead of system props
	<Button sx={{mr: 2}} />
	// Some component prop names overlap with styled-system prop names.
	// These props are still allowed
	<ProgressBar bg="success.emphasis" />
	// Utility components like Box and Text still accept system props
	<Box mr={2} />
	// System props passed to non-Primer components are allowed
	<Avatar mr={2} />

[colebemis]

Suggested change

	This rule disallows use of any styled system prop on a Primer component.
	This rule disallows the use of any styled-system prop on Primer React components.