eslint-plugin-primer-react 1.0.1 → 2.0.0-rc.022b246

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # eslint-plugin-primer-react
 
+## 2.0.0
+
+### Major Changes
+
+- [#39](https://github.com/primer/eslint-plugin-primer-react/pull/39) [`96a675d`](https://github.com/primer/eslint-plugin-primer-react/commit/96a675d8865450d3be556135947a29181a56551c) Thanks [@colebemis](https://github.com/colebemis)! - Add `direct-slot-children` rule
+
+### Minor Changes
+
+- [#21](https://github.com/primer/eslint-plugin-primer-react/pull/21) [`5f68eb7`](https://github.com/primer/eslint-plugin-primer-react/commit/5f68eb7e222e2a41c527b5036b1308ff293e7a0d) Thanks [@SferaDev](https://github.com/SferaDev)! - `no-system-props`: Add `skipImportCheck` option
+
 ## 1.0.1
 
 ### Patch Changes

package/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)

package/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>
+)
+```

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

@@ -1,4 +1,4 @@
-# Disallow use of styled-system props (no-system-colors)
+# 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.
 
@@ -41,6 +41,10 @@ import {Avatar} from 'some-other-library'
 
 ## 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`.