Add a new entry point as next and update draft Tooltip to export it from next

.changeset/giant-badgers-study.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add a new entry point 'next' and export the Tooltip v2 from it with an updated documentation

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/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,
  },

packages/react/next/package.json

@@ -0,0 +1,8 @@
+{
+ "_comment1": "this is required only for typescript. once this is fixed https://github.com/microsoft/TypeScript/issues/33079 we can remove this hack",
+ "name": "@primer/react/next",
+ "types": "../lib-esm/next/index.d.ts",
+ "main": "../lib-esm/next/index.js",
+ "type": "module",
+ "sideEffects": false
+}

packages/react/package.json

@@ -21,6 +21,10 @@
  "import": "./lib-esm/deprecated/index.js",
  "require": "./lib/deprecated/index.js"
  },
+ "./next": {
+ "import": "./lib-esm/next/index.js",
+ "require": "./lib/next/index.js"
+ },
  "./lib-esm/*": {
  "import": [
  "./lib-esm/*.js",

packages/react/rollup.config.js

@@ -23,6 +23,9 @@ const input = new Set([
  // "./deprecated"
  'src/deprecated/index.ts',
 
+ // "./next"
+ 'src/next/index.ts',
+
  // Make sure all members are exported
  'src/constants.ts',
 

packages/react/src/ActionList/Item.tsx

@@ -3,8 +3,8 @@ import styled from 'styled-components'
 import {AlertIcon} from '@primer/octicons-react'
 import type {BoxProps} from '../Box'
 import Box from '../Box'
-import type {TooltipProps} from '../drafts/Tooltip/Tooltip'
-import {Tooltip} from '../drafts/Tooltip/Tooltip'
+import type {TooltipProps} from '../TooltipV2/Tooltip'
+import {Tooltip} from '../TooltipV2/Tooltip'
 import {useId} from '../hooks/useId'
 import {useSlots} from '../hooks/useSlots'
 import type {BetterSystemStyleObject, SxProp} from '../sx'

packages/react/src/ActionMenu/ActionMenu.tsx

@@ -11,7 +11,7 @@ import {Button} from '../Button'
 import {useId} from '../hooks/useId'
 import type {MandateProps} from '../utils/types'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
-import {Tooltip} from '../drafts/Tooltip/Tooltip'
+import {Tooltip} from '../TooltipV2/Tooltip'
 
 export type MenuContextProps = Pick<
  AnchoredOverlayProps,

packages/react/src/drafts/Tooltip/Tooltip.docs.json → packages/react/src/TooltipV2/Tooltip.docs.json

@@ -1,7 +1,7 @@
 {
  "id": "tooltip_v2",
  "name": "Tooltip",
- "status": "draft",
+ "status": "beta",
  "a11yReviewed": true,
  "stories": [],
  "props": [

packages/react/src/drafts/Tooltip/Tooltip.examples.stories.tsx → packages/react/src/TooltipV2/Tooltip.examples.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import {Button, IconButton, Breadcrumbs, ActionMenu, ActionList, NavList} from '../..'
-import {PageHeader} from '../../PageHeader'
+import {Button, IconButton, Breadcrumbs, ActionMenu, ActionList, NavList} from '..'
+import {PageHeader} from '../PageHeader'
 import {Tooltip} from './Tooltip'
 import {
  GitBranchIcon,
@@ -13,10 +13,10 @@ import {
  CommentIcon,
  XIcon,
 } from '@primer/octicons-react'
-import {default as VisuallyHidden} from '../../_VisuallyHidden'
+import {default as VisuallyHidden} from '../_VisuallyHidden'
 
 export default {
- title: 'Drafts/Components/Tooltip/Examples',
+ title: 'Components/TooltipV2/Examples',
  component: Tooltip,
 }
 

packages/react/src/drafts/Tooltip/Tooltip.features.stories.tsx → packages/react/src/TooltipV2/Tooltip.features.stories.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import {IconButton, Button, Box, Link, Octicon, ActionMenu, ActionList} from '../..'
+import {IconButton, Button, Box, Link, Octicon, ActionMenu, ActionList} from '..'
 import {Tooltip} from './Tooltip'
 import {SearchIcon, BookIcon, CheckIcon, TriangleDownIcon, GitBranchIcon} from '@primer/octicons-react'
 
 export default {
- title: 'Drafts/Components/Tooltip/Features',
+ title: 'Components/TooltipV2/Features',
  component: Tooltip,
 }
 

packages/react/src/drafts/Tooltip/Tooltip.playground.stories.tsx → packages/react/src/TooltipV2/Tooltip.playground.stories.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
-import {Button, Box} from '../..'
+import {Button, Box} from '..'
 import {Tooltip} from './Tooltip'
 import type {Meta, StoryFn} from '@storybook/react'
 
 export default {
- title: 'Drafts/Components/Tooltip/Playground',
+ title: 'Components/TooltipV2/Playground',
  component: Tooltip,
 
  args: {

packages/react/src/drafts/Tooltip/Tooltip.stories.tsx → packages/react/src/TooltipV2/Tooltip.stories.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import {Button, Box} from '../..'
+import {Button, Box} from '..'
 import {Tooltip} from './Tooltip'
 
 export default {
- title: 'Drafts/Components/Tooltip',
+ title: 'Components/TooltipV2',
  component: Tooltip,
 }