Merge branch 'main' into skip-import-system-props

Author: colebemis

.changeset/soft-rabbits-stare.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-primer-react": major
+---
+
+Add `direct-slot-children` rule

.github/workflows/CODEOWNERS

@@ -0,0 +1,2 @@
+# All changes should be reviewed by a member of the @react-reviewers team
+* @primer/react-reviewers

CHANGELOG.md

@@ -1,5 +1,25 @@
 # eslint-plugin-primer-react
 
+## 1.0.1
+
+### Patch Changes
+
+- [#36](https://github.com/primer/eslint-plugin-primer-react/pull/36) [`f03cd7d`](https://github.com/primer/eslint-plugin-primer-react/commit/f03cd7defd45e1587dbbfac55a0290172c3b5af3) Thanks [@khiga8](https://github.com/khiga8)! - Define some component mappings for jsx-a11y
+
+## 1.0.0
+
+### Major Changes
+
+- [#34](https://github.com/primer/eslint-plugin-primer-react/pull/34) [`efd4f67`](https://github.com/primer/eslint-plugin-primer-react/commit/efd4f675d8c24b74e7fd0bcfb4524b42ed3378ea) Thanks [@khiga8](https://github.com/khiga8)! - Provide component mapping for `github/react` preset and add dependencies to `eslint-plugin-github` and `eslint-plugin-jsx-a11y`.
+
+  `eslint` peer dependency is now `^8.0.1`.
+
+## 0.7.4
+
+### Patch Changes
+
+- [#31](https://github.com/primer/eslint-plugin-primer-react/pull/31) [`a64413a`](https://github.com/primer/eslint-plugin-primer-react/commit/a64413aef359e8f16ca088f1975c5e2411c5ffb3) Thanks [@colebemis](https://github.com/colebemis)! - `no-system-props`: Always ignore `size` prop
+
 ## 0.7.3
 
 ### Patch Changes

README.md

@@ -29,5 +29,6 @@ ESLint rules for Primer React
 
 ## Rules
 
+- [direct-slot-children](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/direct-slot-children.md)
 - [no-deprecated-colors](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-deprecated-colors.md)
 - [no-system-props](https://github.com/primer/eslint-plugin-primer-react/blob/main/docs/rules/no-system-props.md)

docs/rules/direct-slot-children.md

@@ -0,0 +1,39 @@
+# Enforce direct parent-child relationship of slot components (direct-slot-children)
+
+Some Primer React components use a slots pattern under the hood to render subcomponents in specific places. For example, the `PageLayout` component renders `PageLayout.Header` in the header area, and `PageLayout.Footer` in the footer area. These subcomponents must be direct children of the parent component, and cannot be nested inside other components.
+
+## Rule details
+
+This rule enforces that slot components are direct children of their parent component.
+
+👎 Examples of **incorrect** code for this rule:
+
+```jsx
+/* eslint primer-react/direct-slot-children: "error" */
+import {PageLayout} from '@primer/react'
+
+const MyHeader = () => <PageLayout.Header>Header</PageLayout.Header>
+
+const App = () => (
+  <PageLayout>
+    <MyHeader />
+  </PageLayout>
+)
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+/* eslint primer-react/direct-slot-children: "error" */
+import {PageLayout} from '@primer/react'
+
+const MyHeader = () => <div>Header</div>
+
+const App = () => (
+  <PageLayout>
+    <PageLayout.Header>
+      <MyHeader />
+    </PageLayout.Header>
+  </PageLayout>
+)
+```