eslint-plugin-primer-react 5.5.0-rc.40574df → 6.0.0-rc.2964cbe

package/CHANGELOG.md

@@ -1,11 +1,21 @@
 # eslint-plugin-primer-react
 
-## 5.5.0
+## 6.0.0
+
+### Major Changes
+
+- [#207](https://github.com/primer/eslint-plugin-primer-react/pull/207) [`baff792`](https://github.com/primer/eslint-plugin-primer-react/commit/baff792c0aa01a29374e44e8aa770dbe2cb889a1) Thanks [@iansan5653](https://github.com/iansan5653)! - [Breaking] Adds `no-unnecessary-components` lint rule and enables it by default. This may raise new (typically autofixable) lint errors in existing codebases.
+
+- [#211](https://github.com/primer/eslint-plugin-primer-react/pull/211) [`3f92cd4`](https://github.com/primer/eslint-plugin-primer-react/commit/3f92cd4b689e437bb9efe6a9fe873501ddf76bf2) Thanks [@camchenry](https://github.com/camchenry)! - [Breaking] Adds `prefer-action-list-item-onselect` lint rule and enables it by default. This may raise new auto-fixable lint errors or type-checking errors in existing codebases.
 
 ### Minor Changes
 
 - [#204](https://github.com/primer/eslint-plugin-primer-react/pull/204) [`e2cab87`](https://github.com/primer/eslint-plugin-primer-react/commit/e2cab872c265f4211750436fad32fe5fd8927c5c) Thanks [@joshblack](https://github.com/joshblack)! - Add use-deprecated-from-deprecated rule
 
+### Patch Changes
+
+- [#212](https://github.com/primer/eslint-plugin-primer-react/pull/212) [`78d4600`](https://github.com/primer/eslint-plugin-primer-react/commit/78d460024ae4c10b6a754b615c6d594e4dfb646e) Thanks [@langermank](https://github.com/langermank)! - no-system-props: Add `padding` and `gap` as exceptions for `Stack`
+
 ## 5.4.0
 
 ### Minor Changes

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

@@ -0,0 +1,69 @@
+# 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/prefer-action-list-item-onselect.md

@@ -0,0 +1,37 @@
+# Prefer using `onSelect` instead of `onClick` for `ActionList.Item` components (`prefer-action-list-item-onselect`)
+
+🔧 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
+
+When using the `onClick` attribute on `ActionList.Item` components, this callback only fires when a user clicks on the element with a mouse. If the user navigates to the element with a keyboard and presses the `Enter` key, the callback will not fire. This produces an inaccessible experience for keyboard users.
+
+Using `onSelect` will lead to a more accessible experience for keyboard users compared to using `onClick`.
+
+This rule is generally auto-fixable, though you may encounter type checking errors that result from not properly handling keyboard events which are not part of the `onSelect` callback signature.
+
+👎 Examples of **incorrect** code for this rule:
+
+```jsx
+<ActionList.Item onClick={handleClick} />
+<ActionList.Item
+  aria-label="Edit item 1"
+  onClick={(event) => {
+    event.preventDefault()
+    handleClick()
+  }}
+/>
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+<ActionList.Item onSelect={handleClick} />
+<ActionList.Item
+  aria-label="Edit item 1"
+  onSelect={(event) => {
+    event.preventDefault()
+    handleClick()
+  }}
+/>
+```

package/jest.config.js

@@ -0,0 +1,7 @@
+// @ts-check
+
+/** @type {import('jest').Config} **/
+module.exports = {
+  testEnvironment: 'node',
+  testMatch: ['**/__tests__/*.test.js'],
+}