Merge branch 'main' into joshblack-patch-2

.changeset/dry-weeks-compete.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Adds the option to declare multiple segments in a ProgressBar.

.changeset/fast-panthers-refuse.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Suppress SSR warning for useLayoutEffect in NavList, use useIsomorphicLayoutEffect instead of useLayoutEffect

.changeset/old-falcons-learn.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Bump @primer/primitives to `7.11.5`

.changeset/young-queens-notice.md

@@ -0,0 +1,7 @@
+---
+"@primer/react": patch
+---
+
+`CheckboxGroup` and `RadioGroup` are now SSR-compatible. 
+
+Warning: In this new implementation, `CheckboxGroup.Caption`, `CheckboxGroup.Label,` and `CheckboxGroup.Validation` must be direct children of `CheckboxGroup`. The same applies to `RadioGroup`.

.devcontainer/devcontainer.json

@@ -1,6 +1,6 @@
 {
   "name": "Primer React",
-  "image": "mcr.microsoft.com/vscode/devcontainers/typescript-node:16",
+  "image": "mcr.microsoft.com/vscode/devcontainers/typescript-node:18",
   "extensions": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint", "DavidAnson.vscode-markdownlint"],
   "forwardPorts": [8000],
   "postCreateCommand": ["/bin/bash", "-c", "npm run setup"],
@@ -11,8 +11,8 @@
     }
   },
   "hostRequirements": {
-   "cpus": 4,
-   "memory": "8gb",
-   "storage": "32gb" 
+    "cpus": 4,
+    "memory": "8gb",
+    "storage": "32gb"
   }
 }

.github/workflows/assign_release_conductor.yml

@@ -11,7 +11,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
       - run: npm ci
       - name: Fetch user from pagerduty schedule
         id: pagerduty

.github/workflows/ci.yml

@@ -23,7 +23,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: 'npm'
       - name: Install dependencies
         run: npm ci
@@ -39,7 +39,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: 'npm'
 
       - name: Install dependencies
@@ -64,7 +64,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: 'npm'
 
       - name: Set React version
@@ -99,7 +99,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: 'npm'
 
       - name: Set React version
@@ -125,7 +125,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: 'npm'
 
       - name: Install dependencies
@@ -153,7 +153,7 @@ jobs:
       - name: Use Node.js 16.x
         uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: 18
           cache: 'npm'
       - name: Install dependencies
         run: npm ci
@@ -199,7 +199,7 @@ jobs:
       - name: Use Node.js 16.x
         uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: 18
           cache: 'npm'
       - name: Install dependencies
         run: npm ci
@@ -257,7 +257,7 @@ jobs:
       - name: Use Node.js 16.x
         uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: 18
           cache: 'npm'
       - name: Install dependencies
         run: npm ci
@@ -275,7 +275,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: 'npm'
       - name: Install dependencies
         run: npm ci

.github/workflows/consumer_test.yml

@@ -15,7 +15,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: npm
 
       # `prepare` is a special case in `npm` and likes to run all the time, even

.github/workflows/deploy_preview.yml

@@ -25,7 +25,7 @@ jobs:
     secrets:
       gh_token: ${{ secrets.GITHUB_TOKEN }}
     with:
-      node_version: 16
+      node_version: 18
       install: npm ci && cd docs && npm ci --legacy-peer-deps && cd ..
       build: npm run build:docs:preview
       output_dir: docs/public

.github/workflows/deploy_preview_forks.yml

@@ -18,7 +18,7 @@ jobs:
       pages: write
       id-token: write
     with:
-      node_version: 16
+      node_version: 18
       install: npm ci --legacy-peer-deps && cd docs && npm ci --legacy-peer-deps && cd ..
       build: npm run build:docs:preview
       output_dir: docs/public

.github/workflows/deploy_production.yml

@@ -40,7 +40,7 @@ jobs:
     secrets:
       gh_token: ${{ secrets.GITHUB_TOKEN }}
     with:
-      node_version: 16
+      node_version: 18
       install: npm ci && cd docs && npm ci --legacy-peer-deps && cd ..
       build: npm run build:docs
       output_dir: docs/public

.github/workflows/docs_migration.yml

@@ -7,7 +7,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16.x
+          node-version: 18
           cache: 'npm'
       - run: npm ci
       - run: node script/docs-migration.js >> $GITHUB_STEP_SUMMARY

.github/workflows/pull_request.yml

@@ -16,7 +16,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
 
       - name: Get or Create Comment
         uses: actions/github-script@v6

.github/workflows/statuses.yml

@@ -21,7 +21,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
       - name: Install node deps
         run: npm ci
       - name: Install ruby deps

.github/workflows/storybook-tests.yml

@@ -13,7 +13,7 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: 'npm'
       - name: Install dependencies
         run: npm i

.github/workflows/vrt.yml

@@ -37,7 +37,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: 'npm'
       - name: Install dependencies
         run: npm ci

.nvmrc

@@ -1 +1 @@
-v16
+v18

contributor-docs/testing.md

@@ -80,20 +80,20 @@ We are slowly moving away from using `Jest` snapshots as a way to test visual ch
 
 #### Updating `theme-preval` snapshots
 
-If you need to update the `theme-preval` snapshots, you will need to run the following commands:
-
-```sh
-npm run build
-npm run test -- -u
-```
-
-After running that command, make sure to update the cache-busting timestamp in [src/theme-preval.js](https://github.com/primer/react/blob/main/src/theme-preval.js)
+If you need to update the `theme-preval` snapshots, make sure to first update the cache-busting timestamp in [src/theme-preval.js](https://github.com/primer/react/blob/main/src/theme-preval.js)
 
 ```diff
 - // Cache bust: 2022-02-23 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
 + // Cache bust: 2023-02-24 12:00:00 GMT (This file is cached by our deployment tooling, update this timestamp to rebuild this file)
 ```
 
+After you will need to run the following commands and commit changes to the `themePreval.test.ts.snap` file:
+
+```sh
+npm run build
+npm run test -- -u
+```
+
 ### Running Tests
 
 | Task                | Command                  |

docs/content/ButtonGroup.mdx

@@ -6,7 +6,7 @@ source: https://github.com/primer/react/tree/main/src/ButtonGroup
 storybook: '/react/storybook?path=/story/components-buttongroup--default'
 ---
 
-import data from '../../src/ButtonGroup.docs.json'
+import data from '../../src/ButtonGroup/ButtonGroup.docs.json'
 
 ```js
 import {ButtonGroup} from '@primer/react'

docs/content/CircleOcticon.mdx

@@ -4,7 +4,7 @@ title: CircleOcticon
 status: Alpha
 ---
 
-import data from '../../src/CircleOcticon.docs.json'
+import data from '../../src/CircleOcticon/CircleOcticon.docs.json'
 
 CircleOcticon renders any Octicon with a circle background. CircleOcticons are most commonly used to represent the status of a pull request in the comment timeline.
 

docs/content/LabelGroup.mdx

@@ -6,7 +6,7 @@ status: Alpha
 componentId: label_group
 ---
 
-import data from '../../src/LabelGroup.docs.json'
+import data from '../../src/LabelGroup/LabelGroup.docs.json'
 
 ## Example
 

docs/content/Popover.md

@@ -6,7 +6,7 @@ status: Alpha
 source: https://github.com/primer/react/blob/main/src/Popover.tsx
 ---
 
-import data from '../../src/Popover.docs.json'
+import data from '../../src/Popover/Popover.docs.json'
 
 ```js
 import {Popover} from '@primer/react'

docs/content/ProgressBar.mdx

@@ -28,6 +28,19 @@ If you'd like to use ProgressBar inline, pass the `inline` boolean prop & **be s
 </>
 ```
 
+### Multiple Segments
+
+If you want to show multiple segments in a ProgressBar, pass separate `Item`s as children **instead** of a `progress` value.
+
+```jsx live
+<>
+  <ProgressBar>
+    <ProgressBar.Item progress={33} />
+    <ProgressBar.Item progress={33} sx={{backgroundColor: 'danger.emphasis'}} />
+  </ProgressBar>
+</>
+```
+
 ## Props
 
 <ComponentProps data={data} />

docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js

@@ -11,7 +11,6 @@ function ThemeSwitcher() {
   return (
     <ActionMenu>
       <ActionMenu.Button aria-label="Select field type">{selectedItem?.name}</ActionMenu.Button>
-      {/* eslint-disable-next-line primer-react/no-system-props */}
       <ActionMenu.Overlay width="medium">
         <ActionList selectionVariant="single">
           {items.map((type, index) => (