diff --git a/.changeset/giant-badgers-study.md b/.changeset/giant-badgers-study.md new file mode 100644 index 00000000000..4ca082772a1 --- /dev/null +++ b/.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 diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-dark-colorblind-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-dark-colorblind-linux.png new file mode 100644 index 00000000000..d83f0d9f39b Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-dark-dimmed-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-dark-dimmed-linux.png new file mode 100644 index 00000000000..a8bb5c4f192 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-dark-high-contrast-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-dark-high-contrast-linux.png new file mode 100644 index 00000000000..95457f5a823 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-dark-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-dark-linux.png new file mode 100644 index 00000000000..3132b718e14 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-dark-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-dark-tritanopia-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-dark-tritanopia-linux.png new file mode 100644 index 00000000000..d83f0d9f39b Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-light-colorblind-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-light-colorblind-linux.png new file mode 100644 index 00000000000..4fee4f98353 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-light-high-contrast-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-light-high-contrast-linux.png new file mode 100644 index 00000000000..8657dfda75e Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-light-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-light-linux.png new file mode 100644 index 00000000000..9fd679b76ba Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-light-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-light-tritanopia-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-light-tritanopia-linux.png new file mode 100644 index 00000000000..4fee4f98353 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Anchor-Has-Margin-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-dark-colorblind-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-dark-colorblind-linux.png new file mode 100644 index 00000000000..bb856ed22cd Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-dark-dimmed-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-dark-dimmed-linux.png new file mode 100644 index 00000000000..dc2ed1cad1b Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-dark-high-contrast-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-dark-high-contrast-linux.png new file mode 100644 index 00000000000..1fdbd7a042a Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-dark-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-dark-linux.png new file mode 100644 index 00000000000..009d2d73107 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-dark-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-dark-tritanopia-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-dark-tritanopia-linux.png new file mode 100644 index 00000000000..bb856ed22cd Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-light-colorblind-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-light-colorblind-linux.png new file mode 100644 index 00000000000..8aa918e728c Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-light-high-contrast-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-light-high-contrast-linux.png new file mode 100644 index 00000000000..97eaa316a60 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-light-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-light-linux.png new file mode 100644 index 00000000000..096e6ffd2fa Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-light-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-light-tritanopia-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-light-tritanopia-linux.png new file mode 100644 index 00000000000..8aa918e728c Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Calculated-Direction-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-dark-colorblind-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-dark-colorblind-linux.png new file mode 100644 index 00000000000..cad231f0dd5 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-dark-dimmed-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-dark-dimmed-linux.png new file mode 100644 index 00000000000..a3a8b0d29d1 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-dark-high-contrast-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-dark-high-contrast-linux.png new file mode 100644 index 00000000000..7e761a8871b Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-dark-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-dark-linux.png new file mode 100644 index 00000000000..40b13c2ee78 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-dark-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-dark-tritanopia-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-dark-tritanopia-linux.png new file mode 100644 index 00000000000..cad231f0dd5 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-light-colorblind-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-light-colorblind-linux.png new file mode 100644 index 00000000000..84bb7b94f7f Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-light-high-contrast-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-light-high-contrast-linux.png new file mode 100644 index 00000000000..2f71c246501 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-light-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-light-linux.png new file mode 100644 index 00000000000..ca70b0e3002 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-light-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-light-tritanopia-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-light-tritanopia-linux.png new file mode 100644 index 00000000000..84bb7b94f7f Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Default-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-dark-colorblind-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-dark-colorblind-linux.png new file mode 100644 index 00000000000..330e3a01d4f Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-dark-dimmed-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-dark-dimmed-linux.png new file mode 100644 index 00000000000..79fb5224d59 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-dark-high-contrast-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-dark-high-contrast-linux.png new file mode 100644 index 00000000000..1d80122a97a Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-dark-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-dark-linux.png new file mode 100644 index 00000000000..9ef1a7f8b4f Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-dark-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-dark-tritanopia-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-dark-tritanopia-linux.png new file mode 100644 index 00000000000..330e3a01d4f Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-light-colorblind-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-light-colorblind-linux.png new file mode 100644 index 00000000000..7a5c9768591 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-light-high-contrast-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-light-high-contrast-linux.png new file mode 100644 index 00000000000..094f8d312bf Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-light-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-light-linux.png new file mode 100644 index 00000000000..21619e3c79c Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-light-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-light-tritanopia-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-light-tritanopia-linux.png new file mode 100644 index 00000000000..7a5c9768591 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Icon-Button-With-Description-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-dark-colorblind-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-dark-colorblind-linux.png new file mode 100644 index 00000000000..83de7826643 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-dark-dimmed-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-dark-dimmed-linux.png new file mode 100644 index 00000000000..98f4ae62705 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-dark-high-contrast-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-dark-high-contrast-linux.png new file mode 100644 index 00000000000..b1a6898498d Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-dark-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-dark-linux.png new file mode 100644 index 00000000000..a6a1533abbd Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-dark-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-dark-tritanopia-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-dark-tritanopia-linux.png new file mode 100644 index 00000000000..83de7826643 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-light-colorblind-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-light-colorblind-linux.png new file mode 100644 index 00000000000..91e1e1c5962 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-light-high-contrast-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-light-high-contrast-linux.png new file mode 100644 index 00000000000..962ca3360d2 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-light-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-light-linux.png new file mode 100644 index 00000000000..b22d8589d44 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-light-linux.png differ diff --git a/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-light-tritanopia-linux.png b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-light-tritanopia-linux.png new file mode 100644 index 00000000000..91e1e1c5962 Binary files /dev/null and b/.playwright/snapshots/components/TooltipV2.test.ts-snapshots/TooltipV2-Label-Type-light-tritanopia-linux.png differ diff --git a/docs/content/Tooltip.mdx b/docs/content/Tooltip.mdx index bc50ab9529d..e18a9f534af 100644 --- a/docs/content/Tooltip.mdx +++ b/docs/content/Tooltip.mdx @@ -10,8 +10,14 @@ import DeprecationBanner from '../components/DeprecationBanner' +## 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. diff --git a/docs/content/drafts/Tooltip.mdx b/docs/content/TooltipV2.mdx similarity index 88% rename from docs/content/drafts/Tooltip.mdx rename to docs/content/TooltipV2.mdx index 2ed15bef0bf..c966c6e7cee 100644 --- a/docs/content/drafts/Tooltip.mdx +++ b/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 @@ -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 @@ -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 diff --git a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js index aff928c49c5..3d7a1ffe85a 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +++ b/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, diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 019c727566f..492d4cd073b 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/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) diff --git a/e2e/components/Tooltip--experimental.test.ts b/e2e/components/TooltipV2.test.ts similarity index 74% rename from e2e/components/Tooltip--experimental.test.ts rename to e2e/components/TooltipV2.test.ts index d497145e047..b504390e003 100644 --- a/e2e/components/Tooltip--experimental.test.ts +++ b/e2e/components/TooltipV2.test.ts @@ -2,13 +2,13 @@ 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, }, @@ -16,17 +16,14 @@ test.describe('Tooltip--experimental', () => { // 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,7 +141,7 @@ 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, }, @@ -152,17 +149,14 @@ test.describe('Tooltip--experimental', () => { // 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, }, diff --git a/packages/react/next/package.json b/packages/react/next/package.json new file mode 100644 index 00000000000..d49687a6260 --- /dev/null +++ b/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 +} diff --git a/packages/react/package.json b/packages/react/package.json index 230430523eb..5d931de2ace 100644 --- a/packages/react/package.json +++ b/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", diff --git a/packages/react/rollup.config.js b/packages/react/rollup.config.js index 516a582ba8a..ea51226a324 100644 --- a/packages/react/rollup.config.js +++ b/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', diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx index a76751752f4..d8289597576 100644 --- a/packages/react/src/ActionList/Item.tsx +++ b/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' diff --git a/packages/react/src/ActionMenu/ActionMenu.tsx b/packages/react/src/ActionMenu/ActionMenu.tsx index 5031f9e7ae2..24b53b7025c 100644 --- a/packages/react/src/ActionMenu/ActionMenu.tsx +++ b/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, diff --git a/packages/react/src/drafts/Tooltip/Tooltip.docs.json b/packages/react/src/TooltipV2/Tooltip.docs.json similarity index 97% rename from packages/react/src/drafts/Tooltip/Tooltip.docs.json rename to packages/react/src/TooltipV2/Tooltip.docs.json index c88a0f7795c..08a800a6858 100644 --- a/packages/react/src/drafts/Tooltip/Tooltip.docs.json +++ b/packages/react/src/TooltipV2/Tooltip.docs.json @@ -1,7 +1,7 @@ { "id": "tooltip_v2", "name": "Tooltip", - "status": "draft", + "status": "beta", "a11yReviewed": true, "stories": [], "props": [ diff --git a/packages/react/src/drafts/Tooltip/Tooltip.examples.stories.tsx b/packages/react/src/TooltipV2/Tooltip.examples.stories.tsx similarity index 97% rename from packages/react/src/drafts/Tooltip/Tooltip.examples.stories.tsx rename to packages/react/src/TooltipV2/Tooltip.examples.stories.tsx index c56e40eb056..cb1a2f6077f 100644 --- a/packages/react/src/drafts/Tooltip/Tooltip.examples.stories.tsx +++ b/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, } diff --git a/packages/react/src/drafts/Tooltip/Tooltip.features.stories.tsx b/packages/react/src/TooltipV2/Tooltip.features.stories.tsx similarity index 98% rename from packages/react/src/drafts/Tooltip/Tooltip.features.stories.tsx rename to packages/react/src/TooltipV2/Tooltip.features.stories.tsx index 89f2980bfe5..59cda469fc6 100644 --- a/packages/react/src/drafts/Tooltip/Tooltip.features.stories.tsx +++ b/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, } diff --git a/packages/react/src/drafts/Tooltip/Tooltip.playground.stories.tsx b/packages/react/src/TooltipV2/Tooltip.playground.stories.tsx similarity index 92% rename from packages/react/src/drafts/Tooltip/Tooltip.playground.stories.tsx rename to packages/react/src/TooltipV2/Tooltip.playground.stories.tsx index 736cca27def..d133e7f0748 100644 --- a/packages/react/src/drafts/Tooltip/Tooltip.playground.stories.tsx +++ b/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: { diff --git a/packages/react/src/drafts/Tooltip/Tooltip.stories.tsx b/packages/react/src/TooltipV2/Tooltip.stories.tsx similarity index 81% rename from packages/react/src/drafts/Tooltip/Tooltip.stories.tsx rename to packages/react/src/TooltipV2/Tooltip.stories.tsx index 3c489bc1b88..60fa0b2742d 100644 --- a/packages/react/src/drafts/Tooltip/Tooltip.stories.tsx +++ b/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, } diff --git a/packages/react/src/drafts/Tooltip/Tooltip.tsx b/packages/react/src/TooltipV2/Tooltip.tsx similarity index 97% rename from packages/react/src/drafts/Tooltip/Tooltip.tsx rename to packages/react/src/TooltipV2/Tooltip.tsx index 36300f789f0..b2b5ef9ad6d 100644 --- a/packages/react/src/drafts/Tooltip/Tooltip.tsx +++ b/packages/react/src/TooltipV2/Tooltip.tsx @@ -1,12 +1,12 @@ import React, {Children, useEffect, useRef, useState} from 'react' -import type {SxProp} from '../../sx' -import sx from '../../sx' -import {useId, useProvidedRefOrCreate} from '../../hooks' -import {invariant} from '../../utils/invariant' -import {warning} from '../../utils/warning' +import type {SxProp} from '../sx' +import sx from '../sx' +import {useId, useProvidedRefOrCreate} from '../hooks' +import {invariant} from '../utils/invariant' +import {warning} from '../utils/warning' import styled from 'styled-components' -import {get} from '../../constants' -import type {ComponentProps} from '../../utils/types' +import {get} from '../constants' +import type {ComponentProps} from '../utils/types' import {getAnchoredPosition} from '@primer/behaviors' import type {AnchorSide, AnchorAlignment} from '@primer/behaviors' import {isSupported, apply} from '@oddbird/popover-polyfill/fn' @@ -23,6 +23,7 @@ const StyledTooltip = styled.div` /* Overriding the default popover styles */ display: none; &[popover] { + position: absolute; padding: 0.5em 0.75em; width: max-content; margin: auto; diff --git a/packages/react/src/drafts/Tooltip/__tests__/Tooltip.test.tsx b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx similarity index 95% rename from packages/react/src/drafts/Tooltip/__tests__/Tooltip.test.tsx rename to packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx index 284a5234689..2369e0be618 100644 --- a/packages/react/src/drafts/Tooltip/__tests__/Tooltip.test.tsx +++ b/packages/react/src/TooltipV2/__tests__/Tooltip.test.tsx @@ -1,10 +1,10 @@ import React from 'react' import type {TooltipProps} from '../Tooltip' import {Tooltip} from '../Tooltip' -import {checkStoriesForAxeViolations} from '../../../utils/testing' +import {checkStoriesForAxeViolations} from '../../utils/testing' import {render as HTMLRender} from '@testing-library/react' -import theme from '../../../theme' -import {Button, IconButton, ActionMenu, ActionList, ThemeProvider, SSRProvider, BaseStyles} from '../../../' +import theme from '../../theme' +import {Button, IconButton, ActionMenu, ActionList, ThemeProvider, SSRProvider, BaseStyles} from '../..' import {XIcon} from '@primer/octicons-react' const TooltipComponent = (props: Omit & {text?: string}) => ( @@ -33,7 +33,7 @@ function ExampleWithActionMenu(actionMenuTrigger: React.ReactElement): JSX.Eleme } describe('Tooltip', () => { - checkStoriesForAxeViolations('Tooltip.features', '../drafts/Tooltip/') + checkStoriesForAxeViolations('Tooltip.features', '../TooltipV2/') it('renders `data-direction="s"` by default', () => { const {getByText} = HTMLRender() diff --git a/packages/react/src/drafts/Tooltip/index.ts b/packages/react/src/TooltipV2/index.ts similarity index 100% rename from packages/react/src/drafts/Tooltip/index.ts rename to packages/react/src/TooltipV2/index.ts diff --git a/packages/react/src/__tests__/ActionMenu.test.tsx b/packages/react/src/__tests__/ActionMenu.test.tsx index a86a3dace85..86c10088391 100644 --- a/packages/react/src/__tests__/ActionMenu.test.tsx +++ b/packages/react/src/__tests__/ActionMenu.test.tsx @@ -4,7 +4,7 @@ import {axe} from 'jest-axe' import React from 'react' import theme from '../theme' import {ActionMenu, ActionList, BaseStyles, ThemeProvider, SSRProvider, Tooltip, Button} from '..' -import {Tooltip as TooltipV2} from '../drafts/Tooltip/Tooltip' +import {Tooltip as TooltipV2} from '../TooltipV2/Tooltip' import {behavesAsComponent, checkExports} from '../utils/testing' import {SingleSelect} from '../ActionMenu/ActionMenu.features.stories' import {MixedSelection} from '../ActionMenu/ActionMenu.examples.stories' diff --git a/packages/react/src/drafts/index.ts b/packages/react/src/drafts/index.ts index 7bcb44c3b4e..8eca24f45bd 100644 --- a/packages/react/src/drafts/index.ts +++ b/packages/react/src/drafts/index.ts @@ -61,4 +61,4 @@ export type { NavListDividerProps, } from '../NavList' export * from './SelectPanel2' -export * from './Tooltip' +export * from '../TooltipV2' diff --git a/packages/react/src/next/index.ts b/packages/react/src/next/index.ts new file mode 100644 index 00000000000..cafa67c9ab8 --- /dev/null +++ b/packages/react/src/next/index.ts @@ -0,0 +1,4 @@ +'use client' + +// next entrypoint is used to export the latest version of the components that have conflicts with the main bundle. +export * from '../TooltipV2' diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js index 484e0f90814..6d55a9db31f 100644 --- a/script/generate-e2e-tests.js +++ b/script/generate-e2e-tests.js @@ -1415,39 +1415,39 @@ const components = new Map([ }, ], [ - 'Tooltip--experimental', + 'Tooltip V2', { stories: [ { - id: 'drafts-components-tooltip--default', + id: 'components-tooltipv2--default', name: 'Default', }, { - id: 'drafts-components-tooltip-features--anchor-has-margin', + id: 'components-tooltipv2-features--anchor-has-margin', name: 'Anchor Has Margin', }, { - id: 'drafts-components-tooltip-features--calculated-direction', + id: 'components-tooltipv2-features--calculated-direction', name: 'Calculated Direction', }, { - id: 'drafts-components-tooltip-features--icon-button-with-description', + id: 'components-tooltipv2-features--icon-button-with-description', name: 'Icon Button With Description', }, { - id: 'drafts-components-tooltip-features--label-type', + id: 'components-tooltipv2-features--label-type', name: 'Label Type', }, { - id: 'drafts-components-tooltip-features--multiline-text', + id: 'components-tooltipv2-features--multiline-text', name: 'Multiline Text', }, { - id: 'drafts-components-tooltip-features--on-action-menu-anchor', + id: 'components-tooltipv2-features--on-action-menu-anchor', name: 'On Action Menu Anchor', }, { - id: 'drafts-components-tooltip-examples--files-page', + id: 'components-tooltipv2-examples--files-page', name: 'Files Page Example', }, ],