eslint-plugin-primer-react 4.0.3 → 4.0.4

package/.changeset/README.md

@@ -1,8 +1,8 @@
 # Changesets
 
-Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
-with multi-package repos, or single-package repos to help you version and publish your code. You can
-find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works with
+multi-package repos, or single-package repos to help you version and publish your code. You can find the full
+documentation for it [in our repository](https://github.com/changesets/changesets)
 
 We have a quick list of common questions to get you started engaging with this project in
 [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

package/.eslintrc.js

@@ -0,0 +1,39 @@
+'use strict'
+
+/**
+ * @type {import('eslint').Linter.Config}
+ */
+module.exports = {
+  extends: ['eslint:recommended', 'plugin:github/recommended'],
+  parserOptions: {
+    ecmaVersion: 'latest',
+  },
+  env: {
+    commonjs: true,
+    node: true,
+  },
+  rules: {
+    'import/no-commonjs': 'off',
+    'no-shadow': 'off',
+    'no-unused-vars': [
+      'error',
+      {
+        varsIgnorePattern: '^_',
+      },
+    ],
+  },
+  overrides: [
+    {
+      files: ['**/*.test.js'],
+      env: {
+        jest: true,
+      },
+    },
+    {
+      files: ['.eslintrc.js'],
+      rules: {
+        'filenames/match-regex': 'off',
+      },
+    },
+  ],
+}

package/.github/dependabot.yml

@@ -1,10 +1,16 @@
 version: 2
 updates:
+  - package-ecosystem: 'github-actions'
+    directory: '/'
+    schedule:
+      interval: 'weekly'
+    labels:
+      - 'dependencies'
+      - 'skip changeset'
   - package-ecosystem: npm
-    directory: "/"
+    directory: '/'
     schedule:
       interval: weekly
-    open-pull-requests-limit: 99
-    allow: 
-      - dependency-name: "eslint-plugin-github"
-      - dependency-name: "eslint-plugin-jsx-a11y"
+    labels:
+      - 'dependencies'
+      - 'skip changeset'

package/.github/workflows/add-to-inbox.yml

@@ -0,0 +1,33 @@
+name: Add to Inbox 📥
+on:
+  issues:
+    types: [opened, reopened]
+
+jobs:
+  add-to-inbox:
+    if: ${{ github.repository == 'primer/eslint-plugin-primer-react' }}
+    runs-on: ubuntu-latest
+    env:
+      ISSUE_URL: ${{ github.event.issue.html_url }}
+      PROJECT_ID: 4503
+    steps:
+      - id: get-primer-access-token
+        uses: actions/create-github-app-token@v1
+        with:
+          app-id: ${{ vars.PRIMER_ISSUE_TRIAGE_APP_ID }}
+          private-key: ${{ secrets.PRIMER_ISSUE_TRIAGE_APP_PRIVATE_KEY }}
+      - name: Add react label to issue
+        run: |
+          gh issue edit $ISSUE_URL --add-label react
+        env:
+          GH_TOKEN: ${{ steps.get-primer-access-token.outputs.token }}
+      - id: get-github-access-token
+        uses: actions/create-github-app-token@v1
+        with:
+          app-id: ${{ vars.PRIMER_ISSUE_TRIAGE_APP_ID_FOR_GITHUB }}
+          private-key: ${{ secrets.PRIMER_ISSUE_TRIAGE_APP_PRIVATE_KEY_FOR_GITHUB }}
+          owner: github
+      - name: Add issue to project
+        run: gh project item-add $PROJECT_ID --url $ISSUE_URL --owner github
+        env:
+          GH_TOKEN: ${{ steps.get-github-access-token.outputs.token }}

package/.github/workflows/ci.yml

@@ -1,28 +1,44 @@
 name: CI
-
 on:
   push:
-    branches: [ main ]
+    branches: [main]
   pull_request:
-    branches: [ main ]
+    branches: [main]
 
 jobs:
-  build:
-
+  format:
     runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run format:check
 
-    strategy:
-      matrix:
-        node-version: [12.x, 14.x, 16.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'npm'
+      - run: npm ci
+      - run: npm test
 
+  lint:
+    runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v2
-      with:
-        node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - run: npm ci
-    - run: npm run build --if-present
-    - run: npm test
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 18
+          cache: 'npm'
+      - run: npm ci
+      - run: npm run lint
+      - run: npm run lint:md

package/.github/workflows/release.yml

@@ -8,14 +8,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
           persist-credentials: false
 
       - name: Set up Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: 14
 

package/.github/workflows/release_canary.yml

@@ -5,20 +5,23 @@ on:
       - 'main'
       - 'changeset-release/main'
 
+concurrency:
+  group: npm-canary
+  cancel-in-progress: false
+
 jobs:
   release:
     if: ${{ github.repository == 'primer/eslint-plugin-primer-react' }}
-
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
 
       - name: Set up Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: 14.x
 
@@ -46,11 +49,11 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Output canary version number
-        uses: actions/github-script@v4.0.2
+        uses: actions/github-script@v6.4.1
         with:
           script: |
             const package = require(`${process.env.GITHUB_WORKSPACE}/package.json`)
-            github.repos.createCommitStatus({
+            github.rest.repos.createCommitStatus({
               owner: context.repo.owner,
               repo: context.repo.repo,
               sha: context.sha,

package/.github/workflows/release_candidate.yml

@@ -11,13 +11,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
 
       - name: Set up Node.js
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v4
         with:
           node-version: 14.x
 
@@ -44,11 +44,11 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Output release candidate version number
-        uses: actions/github-script@v4.0.2
+        uses: actions/github-script@v6.4.1
         with:
           script: |
             const package = require(`${process.env.GITHUB_WORKSPACE}/package.json`)
-            github.repos.createCommitStatus({
+            github.rest.repos.createCommitStatus({
               owner: context.repo.owner,
               repo: context.repo.repo,
               sha: context.sha,

package/.markdownlint-cli2.cjs

@@ -0,0 +1,26 @@
+'use strict'
+
+const githubMarkdownOpinions = require('@github/markdownlint-github')
+
+const options = githubMarkdownOpinions.init({
+  // Rules we don't care to enforce (usually stylistic)
+  'line-length': false,
+  'blanks-around-headings': false,
+  'blanks-around-lists': false,
+  'no-trailing-spaces': false,
+  'no-multiple-blanks': false,
+  'no-trailing-punctuation': false,
+  'single-trailing-newline': false,
+  'ul-indent': false,
+  'ul-style': false,
+  'no-hard-tabs': false,
+  'first-line-heading': false,
+  'no-space-in-emphasis': false,
+  'blanks-around-fences': false
+})
+
+module.exports = {
+  config: options,
+  customRules: ['@github/markdownlint-github'],
+  outputFormatters: [['markdownlint-cli2-formatter-pretty', {appendLink: true}]]
+}

package/.nvmrc

@@ -0,0 +1 @@
+v18

package/.prettierignore

@@ -0,0 +1,3 @@
+.changeset
+node_modules
+CHANGELOG.md

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # eslint-plugin-primer-react
 
+## 4.0.4
+
+### Patch Changes
+
+- [#122](https://github.com/primer/eslint-plugin-primer-react/pull/122) [`3bc226a`](https://github.com/primer/eslint-plugin-primer-react/commit/3bc226ad0786f9a7a21ce92a63cbba17b8a5b763) Thanks [@lukasoppermann](https://github.com/lukasoppermann)! - New rule: new-color-css-vars-have-fallback: checks that if a new color var is used, it has a fallback value
+
 ## 4.0.3
 
 ### Patch Changes
@@ -151,7 +157,7 @@
   function ExampleComponent() {
     const styles = {
       // Enabling `checkAllStrings` will find deprecated colors used like this:
-      color: 'text.primary'
+      color: 'text.primary',
     }
     return <Box sx={styles}>Hello</Box>
   }

package/README.md

@@ -6,7 +6,8 @@ ESLint rules for Primer React
 
 ## Installation
 
-1. Assuming you already have [ESLint](https://www.npmjs.com/package/eslint) and [Primer React](https://github.com/primer/react) installed, run:
+1. Assuming you already have [ESLint](https://www.npmjs.com/package/eslint) and
+   [Primer React](https://github.com/primer/react) installed, run:
 
    ```shell
    npm install --save-dev eslint-plugin-primer-react
@@ -16,7 +17,8 @@ ESLint rules for Primer React
    yarn add --dev eslint-plugin-primer-react
    ```
 
-2. In your [ESLint configuration file](https://eslint.org/docs/user-guide/configuring/configuration-files), extend the recommended Primer React ESLint config:
+2. In your [ESLint configuration file](https://eslint.org/docs/user-guide/configuring/configuration-files), extend the
+   recommended Primer React ESLint config:
 
    ```js
    {

package/docs/rules/a11y-explicit-heading.md

@@ -1,17 +1,22 @@
 ## Require explicit heading level on `<Heading>` component
 
-The `Heading` component does not require you to use `as` to specify the heading level, as it will default to an `h2` if one isn't specified. This may lead to inaccessible usage if the default is out of order in the existing heading hierarchy. 
+The `Heading` component does not require you to use `as` to specify the heading level, as it will default to an `h2` if
+one isn't specified. This may lead to inaccessible usage if the default is out of order in the existing heading
+hierarchy.
 
 ## Rule Details
 
-This rule enforces using `as` on the `<Heading>` component to specify a heading level (`h1`-`h6`). In addition, it enforces `as` usage to only be used for headings.
+This rule enforces using `as` on the `<Heading>` component to specify a heading level (`h1`-`h6`). In addition, it
+enforces `as` usage to only be used for headings.
 
 👎 Examples of **incorrect** code for this rule
 
 ```jsx
 import {Heading} from '@primer/react'
 
-<Heading>Heading without explicit heading level</Heading>
+function ExampleComponent() {
+  return <Heading>Heading without explicit heading level</Heading>
+}
 ```
 
 `as` must only be for headings (`h1`-`h6`)
@@ -19,19 +24,24 @@ import {Heading} from '@primer/react'
 ```jsx
 import {Heading} from '@primer/react'
 
-<Heading as="span">Heading component used as "span"</Heading>
+function ExampleComponent() {
+  return <Heading as="span">Heading component used as "span"</Heading>
+}
 ```
 
 👍 Examples of **correct** code for this rule:
 
 ```jsx
-import {Heading} from '@primer/react';
+import {Heading} from '@primer/react'
 
-<Heading as="h2">Heading level 2</Heading>
+function ExampleComponent() {
+  return <Heading as="h2">Heading level 2</Heading>
+}
 ```
 
 ## Options
 
 - `skipImportCheck` (default: `false`)
 
-  By default, the `a11y-explicit-heading` rule will only check for `<Heading>` components imported directly from `@primer/react`. You can disable this behavior by setting `skipImportCheck` to `true`.
+  By default, the `a11y-explicit-heading` rule will only check for `<Heading>` components imported directly from
+  `@primer/react`. You can disable this behavior by setting `skipImportCheck` to `true`.

package/docs/rules/a11y-tooltip-interactive-trigger.md

@@ -1,6 +1,8 @@
 ## Rule Details
 
-This rule enforces to use interactive elements as tooltip triggers. Interactive elements can be Primer `Button`, `IconButton` and `Link` components or native elements like `button`, `a` with an `href` attribute, `select`, `textarea`, `summary` and `input` (that is not a `hidden` type).
+This rule enforces to use interactive elements as tooltip triggers. Interactive elements can be Primer `Button`,
+`IconButton` and `Link` components or native elements like `button`, `a` with an `href` attribute, `select`, `textarea`,
+`summary` and `input` (that is not a `hidden` type).
 
 👎 Examples of **incorrect** code for this rule:
 
@@ -38,4 +40,6 @@ const App = () => (
 
 - `skipImportCheck` (default: `false`)
 
-  By default, the `a11y-tooltip-interactive-trigger` rule will only check for interactive elements in components that are imported from `@primer/react`. You can disable this behavior by setting `skipImportCheck` to `true`. This is used for internal linting in the [primer/react](https://github.com/prime/react) repository.
+  By default, the `a11y-tooltip-interactive-trigger` rule will only check for interactive elements in components that
+  are imported from `@primer/react`. You can disable this behavior by setting `skipImportCheck` to `true`. This is used
+  for internal linting in the [primer/react](https://github.com/prime/react) repository.

package/docs/rules/direct-slot-children.md

@@ -1,46 +1,49 @@
-# 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>
-)
-```
-
-## Options
-
-- `skipImportCheck` (default: `false`)
-
-  By default, the `direct-slot-children` rule will only check for direct slot children in components that are imported from `@primer/react`. You can disable this behavior by setting `skipImportCheck` to `true`. This is used for internal linting in the [primer/react](https://github.com/prime/react) repository.
-
+# 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>
+)
+```
+
+## Options
+
+- `skipImportCheck` (default: `false`)
+
+  By default, the `direct-slot-children` rule will only check for direct slot children in components that are imported
+  from `@primer/react`. You can disable this behavior by setting `skipImportCheck` to `true`. This is used for internal
+  linting in the [primer/react](https://github.com/prime/react) repository.

package/docs/rules/new-color-css-vars-have-fallback.md

@@ -0,0 +1,25 @@
+## Ensure new Primitive v8 color CSS vars have a fallback
+
+This rule is temporary as we begin testing v8 color tokens behind a feature flag. If a color token is used without a fallback, the color will only render if the feature flag is enabled. This rule is an extra safety net to ensure we don't accidentally ship code that relies on the feature flag.
+
+## Rule Details
+
+This rule refers to a JSON file that lists all the new color tokens
+
+```json
+["--fgColor-default", "--fgColor-muted", "--fgColor-onEmphasis"]
+```
+
+If it finds that one of these tokens is used without a fallback, it will throw an error.
+
+👎 Examples of **incorrect** code for this rule
+
+```jsx
+<Button sx={{color: 'var(--fgColor-muted)'}}>Test</Button>
+```
+
+👍 Examples of **correct** code for this rule:
+
+```jsx
+<Button sx={{color: 'var(--fgColor-muted, var(--color-fg-muted))'}}>Test</Button>
+```

package/docs/rules/new-css-color-vars.md

@@ -1,26 +1,31 @@
 ## Upgrade legacy color CSS variables to Primitives v8 in sx prop
 
-CSS variables are allowed within the `sx` prop in Primer React components. However, the legacy color CSS variables are deprecated in favor of the new CSS variables introduced in Primitives v8. This rule will warn you if you are using the deprecated color CSS variables in the `sx` prop, and autofix it including a fallback to the old value.
+CSS variables are allowed within the `sx` prop in Primer React components. However, the legacy color CSS variables are
+deprecated in favor of the new CSS variables introduced in Primitives v8. This rule will warn you if you are using the
+deprecated color CSS variables in the `sx` prop, and autofix it including a fallback to the old value.
 
 ## Rule Details
 
 This rule looks inside the `sx` prop for the following properties:
 
-```
-'bg',
-'backgroundColor',
-'color',
-'borderColor',
-'borderTopColor',
-'borderRightColor',
-'borderBottomColor',
-'borderLeftColor',
-'border',
-'boxShadow',
-'caretColor'
+```json
+[
+  "bg",
+  "backgroundColor",
+  "color",
+  "borderColor",
+  "borderTopColor",
+  "borderRightColor",
+  "borderBottomColor",
+  "borderLeftColor",
+  "border",
+  "boxShadow",
+  "caretColor"
+]
 ```
 
-The rule references a static JSON file called `css-variable-map.json` that matches the old color CSS variables to a new one based on the property. We only check `sx` because `stylelint` is used to lint other forms of CSS-in-JS.
+The rule references a static JSON file called `css-variable-map.json` that matches the old color CSS variables to a new
+one based on the property. We only check `sx` because `stylelint` is used to lint other forms of CSS-in-JS.
 
 👎 Examples of **incorrect** code for this rule