Merge branch 'main' into tylerjdev/action-list-a11y-fixes

.eslintrc.js

@@ -43,6 +43,7 @@ module.exports = {
     'consumer-test/**/*',
     'contributor-docs/adrs/*',
     'examples/nextjs/**',
+    'examples/codesandbox/**',
     // Note: this file is inlined from an external dependency
     'packages/react/src/utils/polymorphic.ts',
     'storybook-static',
@@ -112,8 +113,9 @@ module.exports = {
       files: ['**/*.{ts,tsx}'],
       extends: ['plugin:@typescript-eslint/recommended'],
       rules: {
-        '@typescript-eslint/no-explicit-any': 2,
-        '@typescript-eslint/no-unnecessary-condition': 2,
+        '@typescript-eslint/consistent-type-imports': 'error',
+        '@typescript-eslint/no-explicit-any': 'error',
+        '@typescript-eslint/no-unnecessary-condition': 'error',
         '@typescript-eslint/explicit-module-boundary-types': 'off',
         '@typescript-eslint/no-unused-vars': [
           'error',

.github/workflows/release.yml

@@ -28,6 +28,12 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
+      - uses: actions/create-github-app-token@v1
+        id: app-token
+        with:
+          app-id: ${{ vars.PRIMER_APP_ID_SHARED }}
+          private-key: ${{ secrets.PRIMER_APP_PRIVATE_KEY_SHARED }}
+
       - name: Create release pull request or publish to npm
         id: changesets
         # Uses SHA for security hardening
@@ -39,7 +45,7 @@ jobs:
           # This expects you to have a script called release which does a build for your packages and calls changeset publish
           publish: npm run release
         env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GITHUB_TOKEN: ${{ steps.app-token.outputs.token }}
           NPM_TOKEN: ${{ secrets.NPM_AUTH_TOKEN_SHARED }}
 
   release-next-major:

contributor-docs/CONTRIBUTING.md

@@ -104,7 +104,8 @@ Here's an example of a basic component written in the style of Primer react comp
 ```tsx
 import React from 'react'
 import Box from '../Box'
-import {BetterSystemStyleObject, SxProp, merge} from '../sx'
+import type {BetterSystemStyleObject, SxProp} from '../sx'
+import {merge} from '../sx'
 
 export type ComponentProps = {
   prop?: 'value1' | 'value2'
@@ -156,7 +157,8 @@ Each component should accept a prop called `sx` that allows for setting theme-aw
 To add the `sx` prop to your component: import the default export from the `sx` module, add it to your style definition, and add the appropriate prop types. **The `sx` prop should go at the _very end_ of your style definition.**
 
 ```tsx
-import sx, {SxProp} from './sx'
+import type {SxProp} from './sx'
+import sx from './sx'
 
 const Component = styled.div<SxProp>`
   // additional styles here

docs/content/Tooltip.mdx

@@ -10,8 +10,14 @@ import DeprecationBanner from '../components/DeprecationBanner'
 
 <DeprecationBanner replacementUrl={'/components/tooltip/react/latest'} />
 
+## Deprecation
+
+Use [the next version of Tooltip](/TooltipV2) for accessibility improvements.
+
 The Tooltip component adds a tooltip to add context to interactive elements on the page.
 
+## Usage
+
 **_⚠️ Usage warning! ⚠️_**
 
 Tooltips as a UI pattern should be our last resort for conveying information because it is hidden by default and often with zero or little visual indicator of its existence.

docs/content/drafts/Tooltip.mdx → docs/content/TooltipV2.mdx

@@ -1,11 +1,19 @@
 ---
 componentId: tooltip_v2
 title: Tooltip v2
-status: Draft
-source: https://github.com/primer/react/tree/main/packages/react/src/drafts/Tooltip.tsx
+status: Beta
+a11yReviewed: true
+source: https://github.com/primer/react/tree/main/packages/react/src/TooltipV2/Tooltip.tsx
 ---
 
-import data from '../../../packages/react/src/drafts/Tooltip/Tooltip.docs.json'
+import data from '../../packages/react/src/TooltipV2/Tooltip.docs.json'
+
+```js
+//👇 Notice the new bundle, `next`👇
+import {Tooltip} from '@primer/react/next'
+```
+
+## Usage
 
 The Tooltip component is used to add context to interactive elements on the page.
 
@@ -23,7 +31,7 @@ Tooltip should only be used on an element that is interactive such as a button o
 
 Default tooltip is suitable for interactive controls that require additional context.
 
-```jsx live
+```jsx live next
 <Tooltip text="This change cannot be undone.">
   <Button>Delete</Button>
 </Tooltip>
@@ -33,7 +41,7 @@ Default tooltip is suitable for interactive controls that require additional con
 
 Tooltip can be used to label interactive controls that has no visible text label such as interactive icon links.
 
-```jsx live
+```jsx live next
 <Tooltip text="Contribution Documentation for 'Primer React'" type="label">
   <Link href="https://github.com/primer/react/contributor-docs/CONTRIBUTING.md" sx={{ml: 1, color: 'fg.muted'}}>
     <Octicon icon={BookIcon} sx={{color: 'fg.muted'}} />
@@ -43,7 +51,7 @@ Tooltip can be used to label interactive controls that has no visible text label
 
 ### With direction
 
-```jsx live
+```jsx live next
 <Box sx={{padding: 5, display: 'flex', gap: '8px'}}>
   <Tooltip direction="n" text="Supplementary text">
     <Button>North</Button>

docs/content/UnderlineNav.mdx

@@ -1,7 +1,7 @@
 ---
 title: UnderlineNav
 componentId: underline_nav
-status: Alpha
+status: Beta
 a11yReviewed: true
 description: Use an underlined nav to allow tab like navigation with overflow behaviour in your UI.
 source: https://github.com/primer/react/tree/main/packages/react/src/UnderlineNav

docs/content/deprecated/UnderlineNav.mdx

@@ -16,7 +16,7 @@ Use [the new version of UnderlineNav](/components/react/underline-nav/latest) wi
 
 ## Examples
 
-```jsx live
+```jsx live deprecated
 <UnderlineNav aria-label="Main">
   <UnderlineNav.Link href="#home" selected>
     Home

docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js

@@ -3,6 +3,8 @@ import * as octicons from '@primer/octicons-react'
 import * as primerComponents from '@primer/react'
 import * as drafts from '@primer/react/drafts'
 import * as deprecated from '@primer/react/deprecated'
+import * as experimental from '@primer/react/experimental'
+import * as next from '@primer/react/next'
 import {Placeholder} from '@primer/react/Placeholder'
 import React from 'react'
 import State from '../../../components/State'
@@ -24,7 +26,9 @@ export default function resolveScope(metastring) {
     ...primerComponents,
     ...octiconComponents,
     ...(metastring.includes('drafts') ? drafts : {}),
+    ...(metastring.includes('experimental') ? experimental : {}),
     ...(metastring.includes('deprecated') ? deprecated : {}),
+    ...(metastring.includes('next') ? next : {}),
     ReactRouterLink,
     State,
     Placeholder,

docs/src/@primer/gatsby-theme-doctocat/nav.yml

@@ -146,6 +146,8 @@
       url: /Token
     - title: Tooltip
       url: /Tooltip
+    - title: Tooltip v2
+      url: /TooltipV2
     - title: TreeView
       url: /TreeView
     - title: Truncate
@@ -170,8 +172,6 @@
       url: /drafts/PageHeader
     - title: SelectPanel v2
       url: /drafts/SelectPanel
-    - title: Tooltip v2
-      url: /drafts/Tooltip
 - title: Deprecated
   children:
     - title: ActionList (legacy)

e2e/components/Tooltip--experimental.test.ts → e2e/components/TooltipV2.test.ts

@@ -2,31 +2,28 @@ import {test, expect} from '@playwright/test'
 import {visit} from '../test-helpers/storybook'
 import {themes} from '../test-helpers/themes'
 
-test.describe('Tooltip--experimental', () => {
+test.describe('TooltipV2', () => {
   test.describe('Default', () => {
     for (const theme of themes) {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-tooltip--default',
+            id: 'components-tooltipv2--default',
             globals: {
               colorScheme: theme,
             },
           })
 
           // Default state
           await page.keyboard.press('Tab')
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `Tooltip--experimental.Default.${theme}.png`,
-            {
-              threshold: 0.1,
-            },
-          )
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`TooltipV2.Default.${theme}.png`, {
+            threshold: 0.1,
+          })
         })
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-tooltip--default',
+            id: 'components-tooltipv2--default',
             globals: {
               colorScheme: theme,
             },
@@ -42,7 +39,7 @@ test.describe('Tooltip--experimental', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-tooltip-features--anchor-has-margin',
+            id: 'components-tooltipv2-features--anchor-has-margin',
             globals: {
               colorScheme: theme,
             },
@@ -51,7 +48,7 @@ test.describe('Tooltip--experimental', () => {
           // Default state
           await page.keyboard.press('Tab')
           expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `Tooltip--experimental.Anchor Has Margin.${theme}.png`,
+            `TooltipV2.Anchor Has Margin.${theme}.png`,
             {
               threshold: 0.1,
             },
@@ -60,7 +57,7 @@ test.describe('Tooltip--experimental', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-tooltip-features--anchor-has-margin',
+            id: 'components-tooltipv2-features--anchor-has-margin',
             globals: {
               colorScheme: theme,
             },
@@ -76,7 +73,7 @@ test.describe('Tooltip--experimental', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-tooltip-features--calculated-direction',
+            id: 'components-tooltipv2-features--calculated-direction',
             globals: {
               colorScheme: theme,
             },
@@ -85,7 +82,7 @@ test.describe('Tooltip--experimental', () => {
           // Default state
           await page.keyboard.press('Tab')
           expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `Tooltip--experimental.Calculated Direction.${theme}.png`,
+            `TooltipV2.Calculated Direction.${theme}.png`,
             {
               threshold: 0.1,
             },
@@ -94,7 +91,7 @@ test.describe('Tooltip--experimental', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-tooltip-features--calculated-direction',
+            id: 'components-tooltipv2-features--calculated-direction',
             globals: {
               colorScheme: theme,
             },
@@ -110,7 +107,7 @@ test.describe('Tooltip--experimental', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-tooltip-features--icon-button-with-description',
+            id: 'components-tooltipv2-features--icon-button-with-description',
             globals: {
               colorScheme: theme,
             },
@@ -119,7 +116,7 @@ test.describe('Tooltip--experimental', () => {
           // Default state
           await page.keyboard.press('Tab')
           expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `Tooltip--experimental.Icon Button With Description.${theme}.png`,
+            `TooltipV2.Icon Button With Description.${theme}.png`,
             {
               threshold: 0.1,
             },
@@ -128,7 +125,7 @@ test.describe('Tooltip--experimental', () => {
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-tooltip-features--icon-button-with-description',
+            id: 'components-tooltipv2-features--icon-button-with-description',
             globals: {
               colorScheme: theme,
             },
@@ -144,25 +141,22 @@ test.describe('Tooltip--experimental', () => {
       test.describe(theme, () => {
         test('default @vrt', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-tooltip-features--label-type',
+            id: 'components-tooltipv2-features--label-type',
             globals: {
               colorScheme: theme,
             },
           })
 
           // Default state
           await page.keyboard.press('Tab')
-          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(
-            `Tooltip--experimental.Label Type.${theme}.png`,
-            {
-              threshold: 0.1,
-            },
-          )
+          expect(await page.screenshot({animations: 'disabled'})).toMatchSnapshot(`TooltipV2.Label Type.${theme}.png`, {
+            threshold: 0.1,
+          })
         })
 
         test('axe @aat', async ({page}) => {
           await visit(page, {
-            id: 'drafts-components-tooltip-features--label-type',
+            id: 'components-tooltipv2-features--label-type',
             globals: {
               colorScheme: theme,
             },