Merge branch 'main' into fix/update-overflow-behavior-pane

.changeset/green-crews-joke.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+UnderlineNav2: Add transparent outline for focus to support WHCM

.changeset/strange-bears-tap.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+When an inline description is added to the item the normal text is set to bold

.changeset/wild-llamas-appear.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Adds shadow and color change to IssueLabelToken on hover

.eslintrc.js

@@ -16,6 +16,7 @@ module.exports = {
     'plugin:github/browser',
     'plugin:primer-react/recommended',
     'plugin:import/typescript',
+    'plugin:ssr-friendly/recommended',
   ],
   settings: {
     react: {
@@ -233,6 +234,8 @@ module.exports = {
         '@typescript-eslint/no-unused-vars': 'off',
         'primer-react/no-deprecated-colors': ['error', {skipImportCheck: true}],
         'no-redeclare': 'off',
+        'ssr-friendly/no-dom-globals-in-module-scope': 'off',
+        'ssr-friendly/no-dom-globals-in-react-fc': 'off',
       },
     },
   ],

contributor-docs/adrs/adr-016-internal-modules.md

@@ -0,0 +1,65 @@
+# ADR 016: Internal Modules
+
+## Status
+
+| Stage    | Status |
+| -------- | ------ |
+| Approved | ✅     |
+| Adopted  | 🚧     |
+
+## Context
+
+Currently all files live under the `src` directory. In the `npm` package for `@primer/react`, we specify the following export pattern:
+
+```json5
+{
+  "exports": {
+    // ...
+    "./lib-esm/*": {
+      "import": [
+        // ...
+      ],
+      "require": [
+        // ...
+      ]
+    }
+  }
+}
+```
+
+This pattern, along with our Rollup setup, opts-in files and folders under the `src` directory into the public API of the package. This means that certain parts of the codebase which aren't intended to be used outside of `@primer/react` are considered part of its public API and can be imported and used by consumers.
+
+## Decision
+
+Adopt a convention in Primer React where internal modules live in the `src/internal` folder. This folder which would include all components, hooks, and other modules which are not intended for usage outside of the project. Files within `src/internal` may be grouped by area, such as `src/internal/components`, `src/internal/hooks`, etc.
+
+In the `"exports"` field of our `npm` package, we can then add the following pattern:
+
+```json5
+{
+  "exports": {
+    // ...
+    "./lib-esm/internal/*": null
+  }
+}
+```
+
+This pattern would remove any files and folders within `src/internal` from the public API of the `npm` package. This pattern is inspired by [this section](https://nodejs.org/api/packages.html#package-entry-points) from Node.js, specifically this example:
+
+```json
+{
+  "name": "my-package",
+  "exports": {
+    ".": "./lib/index.js",
+    "./feature/*.js": "./feature/*.js",
+    "./feature/internal/*": null
+  }
+}
+```
+
+
+### Impact
+
+- Update the `"exports"` field in `package.json` to exclude `./lib-esm/internal` from usage
+- (In a major release) Move internal-only files into internal folder
+- For internal modules that are being created after this ADR is accepted, add them to the `src/internal` folder

contributor-docs/testing.md

@@ -18,7 +18,7 @@
 - [Interaction Tests](#interaction-tests)
   - [As A Part Of Unit Tests](#as-a-part-of-unit-tests)
   - [Storybook Interaction Tests](#storybook-interaction-tests)
-- [Continous Integration](#continous-integration)
+- [Continuous Integration](#continuous-integration)
 - [FAQ](#faq)
   - [Why am I seeing `browserType.launch: Executable doesn't exist at ../path`?](#why-am-i-seeing-browsertypelaunch-executable-doesnt-exist-at-path)
 
@@ -207,7 +207,7 @@ the following command:
 script/test-e2e --grep @avt
 ```
 
-## Continous Integration
+## Continuous Integration
 
 All of the tests run on our continuous integration workflows.
 
@@ -226,6 +226,10 @@ and downloading the relevant report.
 > The `vrt` job is broken up into several runners to speed up how long it takes
 > to run Visual Regression Testing. Make sure to identify the job that is
 > failing and download the report that matches the number of the runner.
+>
+> If you notice that a test is failing and the difference appears to be a very
+> small distance, consider adding `animations: 'disabled'` to the `page.screenshot`
+> call in the test that is failing.
 
 ## FAQ
 

docs/content/SubNav.mdx

@@ -4,7 +4,7 @@ title: SubNav
 status: Alpha
 ---
 
-import data from '../../src/SubNav.docs.json'
+import data from '../../src/SubNav/SubNav.docs.json'
 
 Use the SubNav component for navigation on a dashboard-type interface with another set of navigation components above it. This helps distinguish navigation hierarchy.
 

docs/content/Tooltip.mdx

@@ -4,7 +4,7 @@ title: Tooltip
 status: Alpha
 ---
 
-import data from '../../src/Tooltip/Tooltip.docs.json'
+import data from '../../src/Tooltip.docs.json'
 
 The Tooltip component adds a tooltip to add context to interactive elements on the page.
 
@@ -20,85 +20,10 @@ A tooltip may only be used on an element that is interactive such as a button or
 
 ## Examples
 
-### Default (As a label type)
-
-```jsx live
-<Tooltip aria-label="Search on the documentation">
-  <Button>
-    <SearchIcon />
-  </Button>
-</Tooltip>
-```
-
-### As a description type
-
-```jsx live
-<Tooltip text="This is a supplementary text for the save button" type="description">
-  <Button>Save</Button>
-</Tooltip>
-```
-
-### With direction
-
 ```jsx live
-<Box sx={{padding: 5, display: 'flex', gap: '8px'}}>
-  <Tooltip direction="n" text="Supplementary text" type="description">
-    <Button>North</Button>
-  </Tooltip>
-  <Tooltip direction="s" text="Supplementary text" type="description">
-    <Button>South</Button>
-  </Tooltip>
-  <Tooltip direction="e" text="Supplementary text" type="description">
-    <Button>East</Button>
-  </Tooltip>
-  <Tooltip direction="w" text="Supplementary text" type="description">
-    <Button>West</Button>
-  </Tooltip>
-  <Tooltip direction="ne" text="Supplementary text" type="description">
-    <Button>North East</Button>
-  </Tooltip>
-  <Tooltip direction="nw" text="Supplementary text" type="description">
-    <Button>North West</Button>
-  </Tooltip>
-  <Tooltip direction="se" text="Supplementary text" type="description">
-    <Button>Southeast</Button>
-  </Tooltip>
-  <Tooltip direction="sw" text="Supplementary text" type="description">
-    <Button>Southwest</Button>
-  </Tooltip>
-</Box>
-```
-
-### With wrap
-
-```jsx live
-<Tooltip
-  direction="n"
-  wrap
-  text="Random long text that needs to be wrapped and be multipline and have some paddings around"
-  type="description"
->
-  <Button>Multiline</Button>
-</Tooltip>
-```
-
-### With no delay
-
-```jsx live
-<Tooltip noDelay text="Supplemetary text" type="description" direction="se">
-  <Button>Button</Button>
-</Tooltip>
-```
-
-### With align
-
-```jsx live
-<Box sx={{padding: 5, display: 'flex', gap: '8px'}}>
-  <Tooltip align="left" text="Supplemetary text" type="description">
-    <Button>Align Left</Button>
-  </Tooltip>
-  <Tooltip align="right" text="Supplemetary text" type="description">
-    <Button>Align Right</Button>
+<Box borderWidth="1px" borderStyle="solid" borderColor="border.default" borderRadius={2} p={3}>
+  <Tooltip aria-label="Hello, Tooltip!">
+    <Button>Hover me</Button>
   </Tooltip>
 </Box>
 ```

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

@@ -11,7 +11,7 @@ function ThemeSwitcher() {
   return (
     <ActionMenu>
       <ActionMenu.Button aria-label="Select field type">{selectedItem?.name}</ActionMenu.Button>
-      <ActionMenu.Overlay width="medium">
+      <ActionMenu.Overlay sx={{width: 'medium'}}>
         <ActionList selectionVariant="single">
           {items.map((type, index) => (
             <ActionList.Item