eslint-plugin-primer-react 8.6.1 → 9.0.0-rc.e1d461c

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # eslint-plugin-primer-react
 
+## 9.0.0
+
+### Major Changes
+
+- [#577](https://github.com/primer/eslint-plugin-primer-react/pull/577) [`f0c6656`](https://github.com/primer/eslint-plugin-primer-react/commit/f0c66568b76a3acc9c03c29ce1530026b6878903) Thanks [@francinelucca](https://github.com/francinelucca)! - - BREAKING CHANGE: Deleted the `no-system-props` rule to eliminate checks for styled-system props in components.
+  - BREAKING CHANGE: Removed the `no-unnecessary-components` rule that enforced the use of plain HTML elements over `Box` and `Text` when not using `sx` for styling.
+  - BREAKING CHANGE: Eliminated the `use-styled-react-import` rule that enforced importing components from `@primer/styled-react` when using the `sx` prop.
+  - Removed styled-system, @types/styled-system dependencies
+
 ## 8.6.1
 
 ### Patch Changes

package/README.md

@@ -46,11 +46,9 @@ ESLint rules for Primer React
 - [no-deprecated-entrypoints](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-deprecated-entrypoints.md)
 - [no-deprecated-experimental-components](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-deprecated-experimental-components.md)
 - [no-deprecated-props](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-deprecated-props.md)
-- [no-system-props](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-system-props.md)
-- [no-unnecessary-components](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-unnecessary-components.md)
+
 - [no-use-responsive-value](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-use-responsive-value.md)
 - [no-wildcard-imports](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-wildcard-imports.md)
 - [prefer-action-list-item-onselect](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/prefer-action-list-item-onselect.md)
 - [spread-props-first](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/spread-props-first.md)
 - [use-deprecated-from-deprecated](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/use-deprecated-from-deprecated.md)
-- [use-styled-react-import](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/use-styled-react-import.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-primer-react",
-  "version": "8.6.1",
+  "version": "9.0.0-rc.e1d461c",
   "description": "ESLint rules for Primer React",
   "main": "src/index.js",
   "engines": {
@@ -31,19 +31,17 @@
     "eslint": "^9.0.0"
   },
   "dependencies": {
-    "@styled-system/props": "^5.1.5",
     "@typescript-eslint/utils": "^8.50.0",
     "eslint-plugin-github": "^6.0.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-traverse": "^1.0.0",
     "lodash": "^4.17.21",
-    "styled-system": "^5.1.5",
     "typescript": "^6.0.3"
   },
   "devDependencies": {
     "@changesets/changelog-github": "^0.7.0",
     "@changesets/cli": "^2.27.9",
-    "@github/markdownlint-github": "^0.6.3",
+    "@github/markdownlint-github": "^0.8.1",
     "@github/prettier-config": "0.0.6",
     "@types/jest": "^30.0.0",
     "@types/node": "^25.0.2",

package/src/configs/recommended.js

@@ -11,7 +11,7 @@ module.exports = {
   extends: ['plugin:github/react'],
   rules: {
     'primer-react/direct-slot-children': 'error',
-    'primer-react/no-system-props': 'warn',
+
     'primer-react/no-deprecated-experimental-components': 'warn',
     'primer-react/a11y-tooltip-interactive-trigger': 'error',
     'primer-react/new-color-css-vars': 'error',
@@ -21,7 +21,7 @@ module.exports = {
     'primer-react/no-deprecated-props': 'warn',
     'primer-react/a11y-remove-disable-tooltip': 'error',
     'primer-react/a11y-use-accessible-tooltip': 'error',
-    'primer-react/no-unnecessary-components': 'error',
+
     'primer-react/prefer-action-list-item-onselect': 'error',
     'primer-react/no-use-responsive-value': 'error',
   },

package/src/index.js

@@ -15,14 +15,12 @@ module.exports = {
     'no-deprecated-entrypoints': require('./rules/no-deprecated-entrypoints'),
     'no-deprecated-experimental-components': require('./rules/no-deprecated-experimental-components'),
     'no-deprecated-props': require('./rules/no-deprecated-props'),
-    'no-system-props': require('./rules/no-system-props'),
-    'no-unnecessary-components': require('./rules/no-unnecessary-components'),
+
     'no-use-responsive-value': require('./rules/no-use-responsive-value'),
     'no-wildcard-imports': require('./rules/no-wildcard-imports'),
     'prefer-action-list-item-onselect': require('./rules/prefer-action-list-item-onselect'),
     'spread-props-first': require('./rules/spread-props-first'),
     'use-deprecated-from-deprecated': require('./rules/use-deprecated-from-deprecated'),
-    'use-styled-react-import': require('./rules/use-styled-react-import'),
     'no-deprecated-octicon': require('./rules/no-deprecated-octicon'),
   },
   configs: {

package/docs/rules/no-system-props.md

@@ -1,67 +0,0 @@
-# Disallow use of styled-system props (no-system-props)
-
-🔧 The `--fix` option on the [ESLint CLI](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can
-automatically fix some of the problems reported by this rule.
-
-[Styled-system](https://styled-system.com/table) props are deprecated in Primer components (excluding utility
-components).
-
-## Rule details
-
-This rule disallows the use of any styled-system prop on Primer components, as the `sx` prop is now the prefered way to
-apply additional styling.
-
-\*The two non-deprecated utility components (`Box` and `Text`) are allowed to use system props.
-
-👎 Examples of **incorrect** code for this rule:
-
-```jsx
-/* eslint primer-react/no-system-props: "error" */
-import {Button} from '@primer/react'
-
-<Button width={200} />
-<Button width={200} sx={{height: 300}} />
-```
-
-👍 Examples of **correct** code for this rule:
-
-```jsx
-/* eslint primer-react/no-system-props: "error" */
-import {Box, Button, ProgressBar} from '@primer/react'
-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} />
-```
-
-## Options
-
-- `skipImportCheck` (default: `false`)
-
-  By default, the `no-system-props` rule will only check for styled system props used in functions and components that
-  are imported from `@primer/react`. You can disable this behavior by setting `skipImportCheck` to `true`. This is
-  useful for linting custom components that pass styled system props down to Primer React components.
-
-- `includeUtilityComponents` (default: `false`)
-
-  By default, `Box` and `Text` are excluded because styled system props are not deprecated in our utility components. If
-  you prefer to avoid styled system props there as well for consistency, you can set `includeUtilityComponents` to
-  `true`.
-
-  ```js
-  /* eslint primer-react/no-system-props: ["warn", {"includeUtilityComponents": true}] */
-  import {Box} from '@primer/react'
-
-  function App() {
-    // Enabling `includeUtilityComponents` will find system prop usage on utility components like this:
-    return <Box width={200} />
-  }
-  ```

package/docs/rules/no-unnecessary-components.md

@@ -1,69 +0,0 @@
-# Disallow unnecessary use of `Box` and `Text` components (no-unnecessary-components)
-
-🔧 The `--fix` option on the [ESLint CLI](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can
-automatically fix some of the problems reported by this rule.
-
-## Rule details
-
-The [`Box`](https://primer.style/components/box) and [`Text`](https://primer.style/components/text)
-Primer React components are utilities that exist solely to provide access to `sx` or styled-system
-props.
-
-If these props are not being used, plain HTML element provide better performance, simpler code,
-and improved linting support.
-
-This rule is auto-fixable in nearly all cases. Autofixing respects the presence of an `as` prop.
-
-👎 Examples of **incorrect** code for this rule:
-
-```jsx
-/* eslint primer-react/no-unnecessary-components: "error" */
-import {Box, Text} from '@primer/react'
-
-<Box>Content</Box>
-<Box style={{padding: '16px'}} className="danger-box">Content</Box>
-<Box as="section">Content</Box>
-
-<Text>Content</Text>
-<Text style={{fontSize: '24px'}} className="large-text">Content</Text>
-<Text as="p">Content</Text>
-```
-
-👍 Examples of **correct** code for this rule:
-
-```jsx
-/* eslint primer-react/no-system-props: "error" */
-import {Box, Text} from '@primer/react'
-
-// Prefer plain HTML elements (autofixable)
-<div>Content</div>
-<div style={{padding: '16px'}} className="danger-box">Content</div>
-<section>Content</section>
-
-<span>Content</span>
-<span style={{fontSize: '24px'}} className="large-text">Content</span>
-<p>Content</p>
-
-// sx props are allowed
-<Box sx={{p: 2}}>Content</Box>
-<Text sx={{mt: 2}} as="p">Content</Text>
-
-// styled-system props are allowed
-<Box p={2}>Content</Box>
-<Text mt={2} as="p">Content</Text>
-```
-
-```jsx
-/* eslint primer-react/no-system-props: ["error", {skipImportCheck: false}] */
-import {Box, Text} from '@primer/brand'
-
-// Other components with the same name are allowed
-<Box>Content</Box>
-<Text>Content</Text>
-```
-
-## Options
-
-- `skipImportCheck` (default: `false`)
-
-  By default, the rule will only check for incorrect uses of `Box` and `Text` components that are are imported from `@primer/react`. You can disable this behavior (checking all components with these names regardless of import source) by setting `skipImportCheck` to `true`.

package/docs/rules/use-styled-react-import.md

@@ -1,175 +0,0 @@
-# use-styled-react-import
-
-💼 This rule is _disabled_ in the ✅ `recommended` config.
-
-🔧 This rule is automatically fixable by the [`--fix` CLI option](https://eslint.org/docs/latest/user-guide/command-line-interface#--fix).
-
-<!-- end auto-generated rule header -->
-
-Enforce importing components that use `sx` prop from `@primer/styled-react` instead of `@primer/react`, and vice versa.
-
-## Rule Details
-
-This rule detects when certain Primer React components are used with the `sx` prop and ensures they are imported from the temporary `@primer/styled-react` package instead of `@primer/react`. When the same components are used without the `sx` prop, it ensures they are imported from `@primer/react` instead of `@primer/styled-react`.
-
-When a component is used with the `sx` prop anywhere in the file, the entire component import is moved to `@primer/styled-react`, simplifying the import structure.
-
-It also moves certain types and utilities to the styled-react package.
-
-### Components that should be imported from `@primer/styled-react` when used with `sx`:
-
-- ActionList
-- ActionMenu
-- Box
-- Breadcrumbs
-- Button
-- Flash
-- FormControl
-- Heading
-- IconButton
-- Label
-- Link
-- LinkButton
-- PageLayout
-- Text
-- TextInput
-- Truncate
-- Octicon
-- Dialog
-
-### Types and utilities that should always be imported from `@primer/styled-react`:
-
-- `BoxProps` (type)
-- `SxProp` (type)
-- `BetterSystemStyleObject` (type)
-- `sx` (utility)
-
-## Examples
-
-### ❌ Incorrect
-
-```jsx
-import {Button, Link} from '@primer/react'
-
-const Component = () => <Button sx={{color: 'red'}}>Click me</Button>
-```
-
-```jsx
-import {Box} from '@primer/react'
-
-const Component = () => <Box sx={{padding: 2}}>Content</Box>
-```
-
-```jsx
-import {sx} from '@primer/react'
-```
-
-```jsx
-import {Button} from '@primer/styled-react'
-
-const Component = () => <Button>Click me</Button>
-```
-
-```jsx
-import {Button} from '@primer/react'
-
-const Component1 = () => <Button>Click me</Button>
-const Component2 = () => <Button sx={{color: 'red'}}>Styled me</Button>
-```
-
-### ✅ Correct
-
-```jsx
-import {Link} from '@primer/react'
-import {Button} from '@primer/styled-react'
-
-const Component = () => <Button sx={{color: 'red'}}>Click me</Button>
-```
-
-```jsx
-import {Box} from '@primer/styled-react'
-
-const Component = () => <Box sx={{padding: 2}}>Content</Box>
-```
-
-```jsx
-import {sx} from '@primer/styled-react'
-```
-
-```jsx
-// Components without sx prop can stay in @primer/react
-import {Button} from '@primer/react'
-
-const Component = () => <Button>Click me</Button>
-```
-
-```jsx
-// Components imported from styled-react but used without sx prop should be moved back
-import {Button} from '@primer/react'
-
-const Component = () => <Button>Click me</Button>
-```
-
-```jsx
-// When a component is used with sx prop anywhere, import from styled-react
-import {Button} from '@primer/styled-react'
-
-const Component1 = () => <Button>Click me</Button>
-const Component2 = () => <Button sx={{color: 'red'}}>Styled me</Button>
-```
-
-## Options
-
-This rule accepts an optional configuration object with the following properties:
-
-- `styledComponents` (array of strings): Components that should be imported from `@primer/styled-react` when used with `sx` prop. Defaults to the list shown above.
-- `styledTypes` (array of strings): Types that should always be imported from `@primer/styled-react`. Defaults to `['BoxProps', 'SxProp', 'BetterSystemStyleObject']`.
-- `styledUtilities` (array of strings): Utilities that should always be imported from `@primer/styled-react`. Defaults to `['sx']`.
-
-### Example Configuration
-
-```json
-{
-  "rules": {
-    "@primer/primer-react/use-styled-react-import": [
-      "error",
-      {
-        "styledComponents": ["Button", "Box", "CustomComponent"],
-        "styledTypes": ["BoxProps", "CustomProps"],
-        "styledUtilities": ["sx", "customSx"]
-      }
-    ]
-  }
-}
-```
-
-### Configuration Examples
-
-#### ❌ Incorrect with custom configuration
-
-```jsx
-// With styledComponents: ["CustomButton"]
-import {CustomButton} from '@primer/react'
-
-const Component = () => <CustomButton sx={{color: 'red'}}>Click me</CustomButton>
-```
-
-#### ✅ Correct with custom configuration
-
-```jsx
-// With styledComponents: ["CustomButton"]
-import {CustomButton} from '@primer/styled-react'
-
-const Component = () => <CustomButton sx={{color: 'red'}}>Click me</CustomButton>
-```
-
-```jsx
-// Box is not in custom styledComponents list, so it can be used with sx from @primer/react
-import {Box} from '@primer/react'
-
-const Component = () => <Box sx={{color: 'red'}}>Content</Box>
-```
-
-## When Not To Use It
-
-This rule is specifically for migrating components that use the `sx` prop to the temporary `@primer/styled-react` package. If you're not using the `sx` prop or not participating in this migration, you can disable this rule.

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

@@ -1,190 +0,0 @@
-const rule = require('../no-system-props')
-const {RuleTester} = require('eslint')
-
-const ruleTester = new RuleTester({
-  languageOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    parserOptions: {
-      ecmaFeatures: {
-        jsx: true,
-      },
-    },
-  },
-})
-
-ruleTester.run('no-system-props', rule, {
-  valid: [
-    `import {Button} from '@primer/react'; <Button sx={{width: 200}} />`,
-    `import {Button} from 'coles-cool-design-system'; <Button width={200} />`,
-    `import {Button} from '@primer/react'; <Button someOtherProp="foo" />`,
-    `import {Box} from '@primer/react'; <Box width={200} />`,
-    `import {ProgressBar} from '@primer/react'; <ProgressBar bg="howdy" />`,
-    `import {Button} from '@primer/react'; <Button {...someExpression()} />`,
-    `import {Button} from '@primer/react'; <Button variant="large" />`,
-    `import {Button} from '@primer/react'; <Button size="large" />`,
-    `import {ActionMenu} from '@primer/react'; <ActionMenu.Overlay width="large" />`,
-    `import {Breadcrumbs} from '@primer/react'; <Breadcrumbs overflow="auto" />`,
-    {code: `<img width="200px" />`, options: [{skipImportCheck: true}]},
-    {code: `<Placeholder width="200px" />`, options: [{skipImportCheck: true, ignoreNames: ['Placeholder']}]},
-    {
-      code: `<Placeholder.Header width="200px" />`,
-      options: [{skipImportCheck: true, ignoreNames: ['Placeholder.Header']}],
-    },
-  ],
-  invalid: [
-    {
-      code: `import {Button} from '@primer/react'; <Button width={200} />`,
-      output: `import {Button} from '@primer/react'; <Button  sx={{width: 200}} />`,
-      errors: [
-        {
-          messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Button'},
-        },
-      ],
-    },
-    {
-      code: `import {Button} from '@primer/react'; <Button width="200" />`,
-      output: `import {Button} from '@primer/react'; <Button  sx={{width: "200"}} />`,
-      errors: [
-        {
-          messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Button'},
-        },
-      ],
-    },
-    {
-      code: `import {Button} from '@primer/react'; <Button width={"200"} />`,
-      output: `import {Button} from '@primer/react'; <Button  sx={{width: "200"}} />`,
-      errors: [
-        {
-          messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Button'},
-        },
-      ],
-    },
-    {
-      code: `import {Button} from '@primer/react'; <Button width={myWidth} />`,
-      output: `import {Button} from '@primer/react'; <Button  sx={{width: myWidth}} />`,
-      errors: [
-        {
-          messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Button'},
-        },
-      ],
-    },
-    {
-      code: `import {Button} from '@primer/react'; <Button width={200} height={100} />`,
-      output: `import {Button} from '@primer/react'; <Button   sx={{width: 200, height: 100}} />`,
-      errors: [
-        {
-          messageId: 'noSystemProps',
-          data: {propNames: 'width, height', componentName: 'Button'},
-        },
-      ],
-    },
-    {
-      code: `import {Button} from '@primer/react'; <Button width={200} sx={{height: 200}} />`,
-      output: `import {Button} from '@primer/react'; <Button  sx={{height: 200, width: 200}} />`,
-      errors: [
-        {
-          messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Button'},
-        },
-      ],
-    },
-    {
-      code: `import {Button} from '@primer/react'; <Button width={200} sx={{width: 300}} />`,
-      output: `import {Button} from '@primer/react'; <Button  sx={{width: 300}} />`,
-      errors: [
-        {
-          messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Button'},
-        },
-      ],
-    },
-    {
-      code: `import {Button} from '@primer/react'; <Button width={200} sx={myStylez} />`,
-      errors: [
-        {
-          messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Button'},
-        },
-      ],
-    },
-    {
-      code: `import {Button} from '@primer/react'; <Button width={200} sx={{...partialStyles, width: 100}} />`,
-      output: `import {Button} from '@primer/react'; <Button  sx={{...partialStyles, width: 100}} />`,
-      errors: [
-        {
-          messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Button'},
-        },
-      ],
-    },
-    {
-      code: `import {Label} from '@primer/react'; <Label width={200} outline />`,
-      output: `import {Label} from '@primer/react'; <Label  outline sx={{width: 200}} />`,
-      errors: [
-        {
-          messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Label'},
-        },
-      ],
-    },
-    {
-      code: `import {Box} from '@primer/react'; <Box width={200} />`,
-      output: `import {Box} from '@primer/react'; <Box  sx={{width: 200}} />`,
-      options: [{includeUtilityComponents: true}],
-      errors: [
-        {
-          messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Box'},
-        },
-      ],
-    },
-    {
-      code: `import {Text} from '@primer/react'; <Text width={200} />`,
-      output: `import {Text} from '@primer/react'; <Text  sx={{width: 200}} />`,
-      options: [{includeUtilityComponents: true}],
-      errors: [
-        {
-          messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Text'},
-        },
-      ],
-    },
-    {
-      code: `import {Button} from '../Button'; <Button width={200} />`,
-      options: [{skipImportCheck: true}],
-      output: `import {Button} from '../Button'; <Button  sx={{width: 200}} />`,
-      errors: [
-        {
-          messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Button'},
-        },
-      ],
-    },
-    {
-      code: `import {Foo} from '../Foo'; <Foo width={200} />`,
-      options: [{skipImportCheck: true}],
-      output: `import {Foo} from '../Foo'; <Foo  sx={{width: 200}} />`,
-      errors: [
-        {
-          messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Foo'},
-        },
-      ],
-    },
-    {
-      code: `import {Button} from '@primer/react'; <Button.Counter width={200} />`,
-      output: `import {Button} from '@primer/react'; <Button.Counter  sx={{width: 200}} />`,
-      errors: [
-        {
-          messageId: 'noSystemProps',
-          data: {propNames: 'width', componentName: 'Button.Counter'},
-        },
-      ],
-    },
-  ],
-})