eslint-plugin-primer-react 8.3.0 → 8.4.0-rc.6ac270a

package/.github/workflows/check-for-changeset.yml

@@ -16,7 +16,7 @@ jobs:
     name: Check for changeset
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - name: 'Check for changeset'
         uses: brettcannon/check-for-changed-files@v1
         with:

package/.github/workflows/ci.yml

@@ -9,7 +9,7 @@ jobs:
   format:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
@@ -21,7 +21,7 @@ jobs:
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
@@ -33,7 +33,7 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:

package/.github/workflows/release.yml

@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0

package/.github/workflows/release_canary.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0

package/.github/workflows/release_candidate.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # eslint-plugin-primer-react
 
+## 8.4.0
+
+### Minor Changes
+
+- [#437](https://github.com/primer/eslint-plugin-primer-react/pull/437) [`9270d40`](https://github.com/primer/eslint-plugin-primer-react/commit/9270d40d73bd046e21156b68ef6bd13a20008585) Thanks [@copilot-swe-agent](https://github.com/apps/copilot-swe-agent)! - Add spread-props-first rule to ensure spread props come before other props
+
 ## 8.3.0
 
 ### Minor Changes

package/docs/rules/spread-props-first.md

@@ -0,0 +1,66 @@
+# Ensure spread props come before other props (spread-props-first)
+
+Spread props should come before other named props to avoid unintentionally overriding props. When spread props are placed after named props, they can override the named props, which is often unintended and can lead to UI bugs.
+
+## Rule details
+
+This rule enforces that all spread props (`{...rest}`, `{...props}`, etc.) come before any named props in JSX elements.
+
+👎 Examples of **incorrect** code for this rule:
+
+```jsx
+/* eslint primer-react/spread-props-first: "error" */
+
+// ❌ Spread after named prop
+<Example className="..." {...rest} />
+
+// ❌ Spread in the middle
+<Example className="..." {...rest} id="foo" />
+
+// ❌ Multiple spreads after named props
+<Example className="..." {...rest} {...other} />
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+/* eslint primer-react/spread-props-first: "error" */
+
+// ✅ Spread before named props
+<Example {...rest} className="..." />
+
+// ✅ Multiple spreads before named props
+<Example {...rest} {...other} className="..." />
+
+// ✅ Only spread props
+<Example {...rest} />
+
+// ✅ Only named props
+<Example className="..." id="foo" />
+```
+
+## Why this matters
+
+Placing spread props after named props can cause unexpected behavior:
+
+```jsx
+// ❌ Bad: className might get overridden by rest
+<Button className="custom-class" {...rest} />
+
+// If rest = { className: "other-class" }
+// Result: className="other-class" (custom-class is lost!)
+
+// ✅ Good: className will override any className in rest
+<Button {...rest} className="custom-class" />
+
+// If rest = { className: "other-class" }
+// Result: className="custom-class" (as intended)
+```
+
+## Options
+
+This rule has no configuration options.
+
+## When to use autofix
+
+This rule includes an autofix that will automatically reorder your props to place all spread props first. The autofix is safe to use as it preserves the order of spreads relative to each other and the order of named props relative to each other.