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

… from next (#4250)

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

* fix linting n add changeset

* move the src code out of drafts and update docs

* fix folder path and storyname

* test(vrt): update snapshots

* update tooltip's position to be absolute

* Update docs/content/TooltipV2.mdx

---------

Co-authored-by: broccolinisoup <broccolinisoup@users.noreply.github.com>

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