Merge branch 'main' into tooltip-v1-style-update

.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
 
@@ -39,7 +40,7 @@ jobs:
         # Uses SHA for security hardening
         # Currently pointing at a commit for the v1.4.1 tag
         # Please keep this up-to-date if you're changing the SHA below
-        uses: changesets/action@f13b1baaa620fde937751f5d2c3572b9da32af23
+        uses: changesets/action@e2f8e964d080ae97c874b19e27b12e0a8620fb6c
         with:
           title: Release tracking
           # This expects you to have a script called release which does a build for your packages and calls changeset publish

.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/CONTRIBUTING.md

@@ -148,7 +148,7 @@ We consider a component SSR-compatible if it...
 
 We use [`eslint-plugin-ssr-friendly`](https://github.com/kopiro/eslint-plugin-ssr-friendly) to prevent misuse of DOM globals. If you see an error from this plugin, please fix it before merging your PR.
 
-If your component doesn't use DOM globals, it likely won't cause layout shift during hydration. However, if you suspect that your component might cause layout shift, you can use the example Next.js app (`examples/nextjs`) to debug. Import and render your component in `examples/nextjs/pages/index.js` then run the example app with `cd examples/nextjs && npm run develop`.
+If your component doesn't use DOM globals, it likely won't cause layout shift during hydration. However, if you suspect that your component might cause layout shift, you can use the example Next.js app (`examples/nextjs`) to debug. Import and render your component in `examples/nextjs/src/pages/index.js` then run the example app with `cd examples/nextjs && npm run develop`.
 
 ### Adding the `sx` prop
 

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';
 ```