Merge branch 'main' into add-tab-panel

.changeset/fair-countries-taste.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Unify Breadcrumbs + fix a11y issue

.github/workflows/assign_release_conductor.yml

@@ -18,6 +18,7 @@ jobs:
       - uses: actions/setup-node@v4
         with:
           node-version: 20
+      - run: npm i -g npm@9.x
       - run: npm ci
       - uses: ./.github/actions/pagerduty
         id: pagerduty

.github/workflows/ci.yml

@@ -27,6 +27,7 @@ jobs:
         with:
           node-version: 20
           cache: 'npm'
+      - run: npm i -g npm@9.x
       - name: Install dependencies
         run: npm ci
       - name: Check for unformatted files
@@ -43,6 +44,7 @@ jobs:
         with:
           node-version: 20
           cache: 'npm'
+      - run: npm i -g npm@9.x
 
       - name: Install dependencies
         run: npm ci
@@ -64,6 +66,7 @@ jobs:
         with:
           node-version: 20
           cache: 'npm'
+      - run: npm i -g npm@9.x
 
       - name: Install dependencies
         run: npm ci
@@ -85,6 +88,7 @@ jobs:
         with:
           node-version: 20
           cache: 'npm'
+      - run: npm i -g npm@9.x
 
       - name: Install dependencies
         run: npm ci
@@ -105,6 +109,7 @@ jobs:
         with:
           node-version: 20
           cache: 'npm'
+      - run: npm i -g npm@9.x
       - name: Install dependencies
         run: npm ci
       - name: Build
@@ -123,6 +128,7 @@ jobs:
         with:
           node-version: 20
           cache: 'npm'
+      - run: npm i -g npm@9.x
       - name: Install dependencies
         run: npm ci
       - name: Build storybook
@@ -162,6 +168,7 @@ jobs:
         with:
           node-version: 20
           cache: 'npm'
+      - run: npm i -g npm@9.x
       - name: install dependencies
         run: npm ci
       - name: download all reports
@@ -193,6 +200,7 @@ jobs:
         with:
           node-version: 20
           cache: 'npm'
+      - run: npm i -g npm@9.x
       - name: Install dependencies
         run: npm ci
       - name: Build storybook
@@ -232,6 +240,7 @@ jobs:
         with:
           node-version: 20
           cache: 'npm'
+      - run: npm i -g npm@9.x
       - name: install dependencies
         run: npm ci
       - name: download all reports
@@ -260,6 +269,7 @@ jobs:
         with:
           node-version: 20
           cache: 'npm'
+      - run: npm i -g npm@9.x
       - name: Install dependencies
         run: npm ci
       - name: Build components.json
@@ -275,6 +285,7 @@ jobs:
         with:
           node-version: 20
           cache: 'npm'
+      - run: npm i -g npm@9.x
       - name: Install dependencies
         run: npm ci
       - name: Build

.github/workflows/consumer_test.yml

@@ -18,6 +18,7 @@ jobs:
           cache: npm
       - name: Remove "prepare" script
         run: npm pkg delete scripts.prepare
+      - run: npm i -g npm@9.x
       - name: Install dependencies
         run: npm ci
       - name: Build @primer/react

.github/workflows/deploy_preview.yml

@@ -18,6 +18,7 @@ jobs:
         with:
           node-version: 20
           cache: 'npm'
+      - run: npm i -g npm@9.x
       - name: Install dependencies
         run: npm ci
       - name: Build docs preview

.github/workflows/deploy_preview_forks.yml

@@ -19,6 +19,7 @@ jobs:
         with:
           node-version: 20
           cache: 'npm'
+      - run: npm i -g npm@9.x
       - name: Install dependencies
         run: npm ci
       - name: Build docs preview

.github/workflows/release.yml

@@ -25,6 +25,7 @@ jobs:
           node-version: 20
           cache: 'npm'
 
+      - run: npm i -g npm@9.x
       - name: Install dependencies
         run: npm ci
 

.github/workflows/release_canary.yml

@@ -20,6 +20,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node_version: ${{ inputs.node_version }}
+      - run: npm i -g npm@9.x
       - name: Install dependencies
         run: npm ci
       - name: Build

.github/workflows/release_candidate.yml

@@ -24,6 +24,7 @@ jobs:
           node-version: 20
           cache: 'npm'
 
+      - run: npm i -g npm@9.x
       - name: Install dependencies
         run: npm ci
 

.github/workflows/statuses.yml

@@ -23,6 +23,7 @@ jobs:
         uses: actions/setup-node@v4
         with:
           node-version: 20
+      - run: npm i -g npm@9.x
       - name: Install node deps
         run: npm ci
       - name: Install ruby deps

.github/workflows/vrt.yml

@@ -39,6 +39,7 @@ jobs:
         with:
           node-version: 20
           cache: 'npm'
+      - run: npm i -g npm@9.x
       - name: Install dependencies
         run: npm ci
       - name: Build storybook

contributor-docs/deprecating-components.md

@@ -32,7 +32,7 @@ When Primer team is ready to promote the newly developed component in the main b
 
 Here is a checklist for developers who are going through the promotion process. Although this is a step-by-step guide, it is not a strict process and please use this as a reference.
 
-Note: Component v1 is refered to the component that is going to be moved to the deprecated bundle and component v2 is the one that is going to be promoted to the main bundle.
+Note: Component v1 is referred to the component that is going to be moved to the deprecated bundle and component v2 is the one that is going to be promoted to the main bundle.
 
 #### Source Code
 
@@ -83,7 +83,7 @@ Primer maintainers should reach out to #accessibility any time a component is pl
 ### Removing the deprecated component
 
 After about 6 months of living in the deprecated bundle, a component is retired/deleted from the codebase. This is also a breaking change and Primer team releases it in the upcoming major release.
-At this point, consumers are expected to plan migration work and Primer team annouces the deletion in Primer Changelog as they do for the deprecation.
+At this point, consumers are expected to plan migration work and Primer team announces the deletion in Primer Changelog as they do for the deprecation.
 
 ## FAQ
 

contributor-docs/testing.md

@@ -27,9 +27,9 @@
 
 ## Strategy
 
-We aim to follow the behavioral testing paradigm as our testing strategy where we focus on testing the interface of the component with the given input and expected output rather than implementation details. This approach helps us think the possible ways of how an end-user would interact with, or use, the component therefore help us cover both happy and unhappy paths.
+We aim to follow the behavioral testing paradigm as our testing strategy where we focus on testing the interface of the component with the given input and expected output rather than implementation details. This approach helps us think of the possible ways of how an end-user would interact with, or use, the component therefore help us cover both happy and unhappy paths.
 
-As we heavily rely on the behavioral testing paradigm to test our components, the traditional percentage-base testing coverage is not always helpful for us to use as a metric. To measure the level of our testing coverage or in other words, the definition of "Tested" for us is more like a checklist than a number. Below are some examples can be used as a starting point to help measure the test coverage:
+As we heavily rely on the behavioral testing paradigm to test our components, the traditional percentage-base testing coverage is not always helpful for us to use as a metric. To measure the level of our testing coverage or in other words, the definition of "Tested" for us is more like a checklist than a number. Below are some examples that can be used as a starting point to help measure the test coverage:
 
 - Variants of the component (I.e. default, primary, success, error)
 - The states of the component (I.e. open/closed, selected, disabled)
@@ -92,13 +92,13 @@ We are slowly moving away from using `Jest` snapshots as a way to test visual ch
 
 ### As A Part Of Unit Tests
 
-We write our unit tests from a user perspective rather than focusing on implementation details. Simulating events to test user interations is a core part of our testing practise.
+We write our unit tests from a user perspective rather than focusing on implementation details. Simulating events to test user interactions is a core part of our testing practise.
 
 We write user interaction tests leveraging [@testing-library/react](https://testing-library.com/docs/react-testing-library/intro/)’s [userEvent](<[userEvent](https://testing-library.com/docs/user-event/intro/)>) testing helper.
 
 ### Storybook Interaction Tests
 
-We use [Storybook interactions tests](https://storybook.js.org/docs/react/writing-tests/interaction-testing) to simulate and test some complex user interactions. They are particularly useful for cases where writing unit tests are not practical due the limitation of the mock browser functionalities of JSDOM. For example testing out a component's overflow behaviour whose responsiveness is managed by its own dynamic width.
+We use [Storybook interactions tests](https://storybook.js.org/docs/react/writing-tests/interaction-testing) to simulate and test some complex user interactions. They are particularly useful for cases where writing unit tests are not practical due to the limitation of the mock browser functionalities of JSDOM. For example testing out a component's overflow behaviour whose responsiveness is managed by its own dynamic width.
 
 Storybook tests are authored within the components's source directory with the file name of `interactions.stories.tsx`
 

contributor-docs/versioning.md

@@ -73,7 +73,7 @@ semver bump: **minor**
 
 When a type is broadened, it is now possible for that type to include both the
 existing value and additional values. As a result, this maintains backwards
-compatability while providing new functionality to the library.
+compatibility while providing new functionality to the library.
 
 ```diff
 // v0.1.0
@@ -82,7 +82,7 @@ compatability while providing new functionality to the library.
 // v0.2.0
 + export type Example = number | string;
 
-// Maintains compatability across versions
+// Maintains compatibility across versions
 const t1: Example = 1;
 ```
 
@@ -102,7 +102,7 @@ work.
 // v0.2.0
 + export type Example = 'a' | 'b' | 'c';
 
-// Does not maintain compatability across versions, the change must be a major
+// Does not maintain compatibility across versions, the change must be a major
 // change
 const t1: Example = 'd';
 ```

docs/content/TooltipV2.mdx

@@ -1,5 +1,5 @@
 ---
-componentId: tooltip_v2
+componentId: tooltip
 title: Tooltip v2
 status: Beta
 a11yReviewed: true

docs/content/index.md

@@ -20,7 +20,7 @@ Primer React is a React implementation of GitHub's [Primer Design System](https:
 
 ## Getting started
 
-Check out [our getting started guide](https://primer.style/guides/development/react#getting-started) for everything you need to know about installing and using Primer React.
+Check out [our getting started guide](/react/getting-started) for everything you need to know about installing and using Primer React.
 
 ## Local development
 

e2e/components/TooltipV2.test.ts

@@ -16,9 +16,7 @@ test.describe('TooltipV2', () => {
 
           // Default state
           await page.keyboard.press('Tab')
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`TooltipV2.Default.${theme}.png`, {
-            threshold: 0.1,
-          })
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`TooltipV2.Default.${theme}.png`)
         })
 
         test('axe @aat', async ({page}) => {
@@ -49,9 +47,6 @@ test.describe('TooltipV2', () => {
           await page.keyboard.press('Tab')
           expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
             `TooltipV2.Anchor Has Margin.${theme}.png`,
-            {
-              threshold: 0.1,
-            },
           )
         })
 
@@ -83,9 +78,6 @@ test.describe('TooltipV2', () => {
           await page.keyboard.press('Tab')
           expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
             `TooltipV2.Calculated Direction.${theme}.png`,
-            {
-              threshold: 0.1,
-            },
           )
         })
 
@@ -117,9 +109,6 @@ test.describe('TooltipV2', () => {
           await page.keyboard.press('Tab')
           expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
             `TooltipV2.Icon Button With Description.${theme}.png`,
-            {
-              threshold: 0.1,
-            },
           )
         })
 
@@ -149,9 +138,7 @@ test.describe('TooltipV2', () => {
 
           // Default state
           await page.keyboard.press('Tab')
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`TooltipV2.Label Type.${theme}.png`, {
-            threshold: 0.1,
-          })
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`TooltipV2.Label Type.${theme}.png`)
         })
 
         test('axe @aat', async ({page}) => {

e2e/matchers/toHaveNoViolations.ts

@@ -171,6 +171,7 @@ expect.extend({
     if (result.violations.length === 0) {
       return {
         pass: true,
+        message: () => 'No axe violations',
       }
     }
 

examples/app-router/package.json

@@ -3,11 +3,13 @@
   "private": true,
   "scripts": {
     "clean": "rimraf .next",
+    "build": "next build",
     "develop": "next",
+    "start": "next start",
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@primer/react": "36.9.0",
+    "@primer/react": "36.10.0",
     "next": "^14.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

examples/app-router/src/app/layout.tsx

@@ -8,7 +8,9 @@ export const metadata = {
 
 export default function RootLayout({children}: {children: React.ReactNode}) {
   return (
-    <html lang="en">
+    // Note: the focus-visible polyfill adds additional attributes to `html`
+    // that cause hydration mismatch errors
+    <html lang="en" suppressHydrationWarning>
       <body>
         <StyledComponentsRegistry>
           <ThemeProvider>

examples/nextjs/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@primer/octicons-react": "^18.2.0",
-    "@primer/react": "36.9.0",
+    "@primer/react": "36.10.0",
     "next": "^14.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",