diff --git a/.changeset/dull-mirrors-dream.md b/.changeset/dull-mirrors-dream.md
new file mode 100644
index 00000000000..b20c5ced863
--- /dev/null
+++ b/.changeset/dull-mirrors-dream.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Move Octicon, Pagehead, Dialog (v1), and Tooltip (v1) to `@primer/react/deprecated`
diff --git a/e2e/components/Octicon.test.ts b/e2e/components/Octicon.test.ts
index ce0cf701146..a5862af1fa5 100644
--- a/e2e/components/Octicon.test.ts
+++ b/e2e/components/Octicon.test.ts
@@ -2,60 +2,45 @@ import {test, expect} from '@playwright/test'
import {visit} from '../test-helpers/storybook'
import {themes} from '../test-helpers/themes'
-test.describe('Octicon', () => {
- test.describe('Default', () => {
- for (const theme of themes) {
- test.describe(theme, () => {
- test('default @vrt', async ({page}) => {
- await visit(page, {
- id: 'components-octicon--default',
- globals: {
- colorScheme: theme,
- },
- })
+const stories = [
+ {
+ title: 'Default',
+ id: 'deprecated-components-octicon--default',
+ },
+ {
+ title: 'Playground',
+ id: 'deprecated-components-octicon--playground',
+ },
+] as const
- // Default state
- expect(await page.screenshot()).toMatchSnapshot(`Octicon.Default.${theme}.png`)
- })
-
- test('axe @aat', async ({page}) => {
- await visit(page, {
- id: 'components-octicon--default',
- globals: {
- colorScheme: theme,
- },
- })
- await expect(page).toHaveNoViolations()
- })
- })
- }
- })
+test.describe('Octicon', () => {
+ for (const story of stories) {
+ test.describe(story.title, () => {
+ for (const theme of themes) {
+ test.describe(theme, () => {
+ test('default @vrt', async ({page}) => {
+ await visit(page, {
+ id: story.id,
+ globals: {
+ colorScheme: theme,
+ },
+ })
- test.describe('Playground', () => {
- for (const theme of themes) {
- test.describe(theme, () => {
- test('default @vrt', async ({page}) => {
- await visit(page, {
- id: 'components-octicon--playground',
- globals: {
- colorScheme: theme,
- },
+ // Default state
+ expect(await page.screenshot()).toMatchSnapshot(`Octicon.${story.title}.${theme}.png`)
})
- // Default state
- expect(await page.screenshot()).toMatchSnapshot(`Octicon.Playground.${theme}.png`)
- })
-
- test('axe @aat', async ({page}) => {
- await visit(page, {
- id: 'components-octicon--playground',
- globals: {
- colorScheme: theme,
- },
+ test('axe @aat', async ({page}) => {
+ await visit(page, {
+ id: story.id,
+ globals: {
+ colorScheme: theme,
+ },
+ })
+ await expect(page).toHaveNoViolations()
})
- await expect(page).toHaveNoViolations()
})
- })
- }
- })
+ }
+ })
+ }
})
diff --git a/e2e/components/Pagehead.test.ts b/e2e/components/Pagehead.test.ts
index 00f077d663b..550f0887451 100644
--- a/e2e/components/Pagehead.test.ts
+++ b/e2e/components/Pagehead.test.ts
@@ -2,32 +2,41 @@ import {test, expect} from '@playwright/test'
import {visit} from '../test-helpers/storybook'
import {themes} from '../test-helpers/themes'
+const stories = [
+ {
+ title: 'Default',
+ id: 'deprecated-components-pagehead--default',
+ },
+] as const
+
test.describe('Pagehead', () => {
- test.describe('Default', () => {
- for (const theme of themes) {
- test.describe(theme, () => {
- test('default @vrt', async ({page}) => {
- await visit(page, {
- id: 'components-pagehead--default',
- globals: {
- colorScheme: theme,
- },
- })
+ for (const story of stories) {
+ test.describe(story.id, () => {
+ for (const theme of themes) {
+ test.describe(theme, () => {
+ test('default @vrt', async ({page}) => {
+ await visit(page, {
+ id: story.id,
+ globals: {
+ colorScheme: theme,
+ },
+ })
- // Default state
- expect(await page.screenshot()).toMatchSnapshot(`Pagehead.Default.${theme}.png`)
- })
+ // Default state
+ expect(await page.screenshot()).toMatchSnapshot(`Pagehead.${story.title}.${theme}.png`)
+ })
- test('axe @aat', async ({page}) => {
- await visit(page, {
- id: 'components-pagehead--default',
- globals: {
- colorScheme: theme,
- },
+ test('axe @aat', async ({page}) => {
+ await visit(page, {
+ id: story.id,
+ globals: {
+ colorScheme: theme,
+ },
+ })
+ await expect(page).toHaveNoViolations()
})
- await expect(page).toHaveNoViolations()
})
- })
- }
- })
+ }
+ })
+ }
})
diff --git a/e2e/components/TabNav.test.ts b/e2e/components/TabNav.test.ts
index a896f2f1808..98fc71ba1c0 100644
--- a/e2e/components/TabNav.test.ts
+++ b/e2e/components/TabNav.test.ts
@@ -2,38 +2,41 @@ import {test, expect} from '@playwright/test'
import {visit} from '../test-helpers/storybook'
import {themes} from '../test-helpers/themes'
-test.describe('TabNav', () => {
- test.describe('Default', () => {
- for (const theme of themes) {
- test.describe(theme, () => {
- test('default @vrt', async ({page}) => {
- await visit(page, {
- id: 'components-tabnav--default',
- globals: {
- colorScheme: theme,
- },
- })
+const stories = [
+ {
+ title: 'Default',
+ id: 'deprecated-components-tabnav--default',
+ },
+] as const
- // Default state
- expect(await page.screenshot()).toMatchSnapshot(`TabNav.Default.${theme}.png`)
- })
+test.describe('TabNav', () => {
+ for (const story of stories) {
+ test.describe(story.title, () => {
+ for (const theme of themes) {
+ test.describe(theme, () => {
+ test('default @vrt', async ({page}) => {
+ await visit(page, {
+ id: story.id,
+ globals: {
+ colorScheme: theme,
+ },
+ })
- test('axe @aat', async ({page}) => {
- await visit(page, {
- id: 'components-tabnav--default',
- globals: {
- colorScheme: theme,
- },
+ // Default state
+ expect(await page.screenshot()).toMatchSnapshot(`TabNav.${story.title}.${theme}.png`)
})
- await expect(page).toHaveNoViolations({
- rules: {
- 'color-contrast': {
- enabled: theme !== 'dark_dimmed',
+
+ test('axe @aat', async ({page}) => {
+ await visit(page, {
+ id: story.id,
+ globals: {
+ colorScheme: theme,
},
- },
+ })
+ await expect(page).toHaveNoViolations()
})
})
- })
- }
- })
+ }
+ })
+ }
})
diff --git a/e2e/components/Tooltip.test.ts b/e2e/components/Tooltip.test.ts
index 38bca6c51d1..27910acd8cf 100644
--- a/e2e/components/Tooltip.test.ts
+++ b/e2e/components/Tooltip.test.ts
@@ -8,7 +8,7 @@ test.describe('Tooltip', () => {
test.describe(theme, () => {
test('default @vrt', async ({page}) => {
await visit(page, {
- id: 'components-tooltip--default',
+ id: 'deprecated-components-tooltip--default',
globals: {
colorScheme: theme,
},
@@ -21,7 +21,7 @@ test.describe('Tooltip', () => {
test('axe @aat', async ({page}) => {
await visit(page, {
- id: 'components-tooltip--default',
+ id: 'deprecated-components-tooltip--default',
globals: {
colorScheme: theme,
},
diff --git a/packages/react/src/ActionBar/ActionBar.stories.tsx b/packages/react/src/ActionBar/ActionBar.stories.tsx
index f2a85e5115e..f253a67d20e 100644
--- a/packages/react/src/ActionBar/ActionBar.stories.tsx
+++ b/packages/react/src/ActionBar/ActionBar.stories.tsx
@@ -18,7 +18,8 @@ import {
ReplyIcon,
ThreeBarsIcon,
} from '@primer/octicons-react'
-import {Box, Dialog, Button, Avatar, ActionMenu, IconButton, ActionList, Textarea} from '../'
+import {Box, Button, Avatar, ActionMenu, IconButton, ActionList, Textarea} from '../'
+import {Dialog} from '../DialogV1'
import {Divider} from '../deprecated/ActionList/Divider'
import mockData from '../experimental/SelectPanel2/mock-story-data'
diff --git a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
index 548979ed971..db90164b260 100644
--- a/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
+++ b/packages/react/src/Autocomplete/Autocomplete.features.stories.tsx
@@ -2,7 +2,8 @@ import type {ChangeEventHandler, RefObject} from 'react'
import React, {useCallback, useEffect, useRef, useState} from 'react'
import type {Meta} from '@storybook/react'
-import {BaseStyles, Box, Dialog, ThemeProvider, registerPortalRoot} from '..'
+import {BaseStyles, Box, ThemeProvider, registerPortalRoot} from '..'
+import {Dialog} from '../DialogV1'
import TextInputTokens from '../TextInputWithTokens'
import Autocomplete from './Autocomplete'
import {AnchoredOverlay} from '../AnchoredOverlay'
diff --git a/packages/react/src/Dialog.docs.json b/packages/react/src/DialogV1/Dialog.docs.json
similarity index 95%
rename from packages/react/src/Dialog.docs.json
rename to packages/react/src/DialogV1/Dialog.docs.json
index c2efd78e70a..254859970d8 100644
--- a/packages/react/src/Dialog.docs.json
+++ b/packages/react/src/DialogV1/Dialog.docs.json
@@ -2,10 +2,10 @@
"id": "dialog",
"docsId": "dialog",
"name": "Dialog",
- "status": "alpha",
+ "status": "deprecated",
"a11yReviewed": false,
"stories": [],
- "importPath": "@primer/react",
+ "importPath": "@primer/react/deprecated",
"props": [
{
"name": "isOpen",
diff --git a/packages/react/src/Dialog.stories.tsx b/packages/react/src/DialogV1/Dialog.stories.tsx
similarity index 93%
rename from packages/react/src/Dialog.stories.tsx
rename to packages/react/src/DialogV1/Dialog.stories.tsx
index 4f4cc41e280..3eb92101de6 100644
--- a/packages/react/src/Dialog.stories.tsx
+++ b/packages/react/src/DialogV1/Dialog.stories.tsx
@@ -1,8 +1,8 @@
import React, {useState, useRef} from 'react'
import type {Meta} from '@storybook/react'
-import {Button} from './Button'
-import {Box, Link, Text} from '.'
-import {Banner} from './Banner'
+import {Button} from '../Button'
+import {Box, Link, Text} from '..'
+import {Banner} from '../Banner'
import {default as Dialog} from './Dialog'
/* Dialog Version 1*/
diff --git a/packages/react/src/__tests__/Dialog.test.tsx b/packages/react/src/DialogV1/Dialog.test.tsx
similarity index 97%
rename from packages/react/src/__tests__/Dialog.test.tsx
rename to packages/react/src/DialogV1/Dialog.test.tsx
index 0fed5ca5172..7df87bd2c75 100644
--- a/packages/react/src/__tests__/Dialog.test.tsx
+++ b/packages/react/src/DialogV1/Dialog.test.tsx
@@ -1,8 +1,9 @@
import React, {useState, useRef} from 'react'
-import {Dialog, Box, Text, Button} from '..'
+import {Box, Text, Button} from '..'
+import {Dialog} from '../DialogV1'
import {render as HTMLRender, fireEvent} from '@testing-library/react'
import axe from 'axe-core'
-import {behavesAsComponent, checkExports} from '../utils/testing'
+import {behavesAsComponent} from '../utils/testing'
/* Dialog Version 1*/
@@ -108,10 +109,6 @@ describe('Dialog', () => {
options: {skipAs: true, skipSx: true},
})
- checkExports('Dialog', {
- default: Dialog,
- })
-
describe('Dialog.Header', () => {
behavesAsComponent({Component: Dialog.Header})
})
diff --git a/packages/react/src/Dialog.tsx b/packages/react/src/DialogV1/Dialog.tsx
similarity index 90%
rename from packages/react/src/Dialog.tsx
rename to packages/react/src/DialogV1/Dialog.tsx
index 2139792b545..3e565ba8d3d 100644
--- a/packages/react/src/Dialog.tsx
+++ b/packages/react/src/DialogV1/Dialog.tsx
@@ -1,14 +1,14 @@
import React, {forwardRef, useRef} from 'react'
import styled from 'styled-components'
-import {IconButton} from './Button'
-import {get} from './constants'
-import Box from './Box'
-import useDialog from './hooks/useDialog'
-import type {SxProp} from './sx'
-import sx from './sx'
-import Text from './Text'
-import type {ComponentProps} from './utils/types'
-import {useRefObjectAsForwardedRef} from './hooks/useRefObjectAsForwardedRef'
+import {IconButton} from '../Button'
+import {get} from '../constants'
+import Box from '../Box'
+import useDialog from '../hooks/useDialog'
+import type {SxProp} from '../sx'
+import sx from '../sx'
+import Text from '../Text'
+import type {ComponentProps} from '../utils/types'
+import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
import {XIcon} from '@primer/octicons-react'
// Dialog v1
diff --git a/packages/react/src/__tests__/Dialog.types.test.tsx b/packages/react/src/DialogV1/Dialog.types.test.tsx
similarity index 87%
rename from packages/react/src/__tests__/Dialog.types.test.tsx
rename to packages/react/src/DialogV1/Dialog.types.test.tsx
index de6b44c65ea..010f84f6fed 100644
--- a/packages/react/src/__tests__/Dialog.types.test.tsx
+++ b/packages/react/src/DialogV1/Dialog.types.test.tsx
@@ -1,5 +1,5 @@
import React from 'react'
-import Dialog from '../Dialog'
+import {Dialog} from '../DialogV1'
export function shouldAcceptCallWithNoProps() {
return
diff --git a/packages/react/src/DialogV1/index.ts b/packages/react/src/DialogV1/index.ts
new file mode 100644
index 00000000000..c12777c2acb
--- /dev/null
+++ b/packages/react/src/DialogV1/index.ts
@@ -0,0 +1,2 @@
+export {default as Dialog} from './Dialog'
+export type {DialogProps, DialogHeaderProps} from './Dialog'
diff --git a/packages/react/src/Octicon/Octicon.docs.json b/packages/react/src/Octicon/Octicon.docs.json
index 1a1d030949f..b53008bc1c8 100644
--- a/packages/react/src/Octicon/Octicon.docs.json
+++ b/packages/react/src/Octicon/Octicon.docs.json
@@ -1,10 +1,10 @@
{
"id": "octicon",
"name": "Octicon",
- "status": "alpha",
+ "status": "deprecated",
"a11yReviewed": false,
"stories": [],
- "importPath": "@primer/react",
+ "importPath": "@primer/react/deprecated",
"props": [
{
"name": "aria-label",
diff --git a/packages/react/src/Octicon/Octicon.stories.tsx b/packages/react/src/Octicon/Octicon.stories.tsx
index 18f9fb6a0e4..3238c06f216 100644
--- a/packages/react/src/Octicon/Octicon.stories.tsx
+++ b/packages/react/src/Octicon/Octicon.stories.tsx
@@ -4,7 +4,7 @@ import Octicon from './Octicon'
import {HeartFillIcon} from '@primer/octicons-react'
const meta: Meta = {
- title: 'Components/Octicon',
+ title: 'Deprecated/Components/Octicon',
component: Octicon,
}
export default meta
diff --git a/packages/react/src/__tests__/Octicon.test.tsx b/packages/react/src/Octicon/Octicon.test.tsx
similarity index 94%
rename from packages/react/src/__tests__/Octicon.test.tsx
rename to packages/react/src/Octicon/Octicon.test.tsx
index 282ee99416b..173964c06e0 100644
--- a/packages/react/src/__tests__/Octicon.test.tsx
+++ b/packages/react/src/Octicon/Octicon.test.tsx
@@ -1,6 +1,6 @@
import React from 'react'
import {XIcon} from '@primer/octicons-react'
-import {Octicon} from '..'
+import Octicon from '../Octicon'
import {behavesAsComponent, checkExports} from '../utils/testing'
import {render as HTMLRender} from '@testing-library/react'
import axe from 'axe-core'
diff --git a/packages/react/src/Octicon/Octicon.tsx b/packages/react/src/Octicon/Octicon.tsx
index bd009a2792b..16df4c343b2 100644
--- a/packages/react/src/Octicon/Octicon.tsx
+++ b/packages/react/src/Octicon/Octicon.tsx
@@ -12,9 +12,15 @@ const Icon = React.forwardRef((props: StyledOcticonProps, ref: React.Ref
})
+/**
+ * @deprecated
+ */
const Octicon = styled(Icon)`
${({color, sx: sxProp}) => sx({sx: {color, ...sxProp}})}
`
+/**
+ * @deprecated
+ */
export type OcticonProps = ComponentProps
export default Octicon
diff --git a/packages/react/src/__tests__/Octicon.types.test.tsx b/packages/react/src/Octicon/Octicon.types.test.tsx
similarity index 100%
rename from packages/react/src/__tests__/Octicon.types.test.tsx
rename to packages/react/src/Octicon/Octicon.types.test.tsx
diff --git a/packages/react/src/PageHeader/PageHeader.examples.stories.tsx b/packages/react/src/PageHeader/PageHeader.examples.stories.tsx
index ff4961563ad..ee066a61097 100644
--- a/packages/react/src/PageHeader/PageHeader.examples.stories.tsx
+++ b/packages/react/src/PageHeader/PageHeader.examples.stories.tsx
@@ -11,10 +11,10 @@ import {
Box,
PageLayout,
Timeline,
- Octicon,
Heading,
Token,
} from '..'
+import Octicon from '../Octicon'
import {
KebabHorizontalIcon,
GitBranchIcon,
diff --git a/packages/react/src/PageLayout/PageLayout.features.stories.tsx b/packages/react/src/PageLayout/PageLayout.features.stories.tsx
index af5f5b18ef2..b75b0a9f63d 100644
--- a/packages/react/src/PageLayout/PageLayout.features.stories.tsx
+++ b/packages/react/src/PageLayout/PageLayout.features.stories.tsx
@@ -2,7 +2,8 @@ import React from 'react'
import type {Meta, StoryFn} from '@storybook/react'
import {PageLayout} from './PageLayout'
import {Placeholder} from '../Placeholder'
-import {Box, BranchName, Heading, Link, StateLabel, TabNav, Text} from '..'
+import {Box, BranchName, Heading, Link, StateLabel, Text} from '..'
+import TabNav from '../TabNav'
export default {
title: 'Components/PageLayout/Features',
diff --git a/packages/react/src/Pagehead/Pagehead.docs.json b/packages/react/src/Pagehead/Pagehead.docs.json
index 4eea4a5ba2c..c1f12fcda5b 100644
--- a/packages/react/src/Pagehead/Pagehead.docs.json
+++ b/packages/react/src/Pagehead/Pagehead.docs.json
@@ -1,10 +1,10 @@
{
"id": "pagehead",
"name": "Pagehead",
- "status": "alpha",
+ "status": "deprecated",
"a11yReviewed": false,
"stories": [],
- "importPath": "@primer/react",
+ "importPath": "@primer/react/deprecated",
"props": [
{
"name": "as",
diff --git a/packages/react/src/Pagehead/Pagehead.stories.tsx b/packages/react/src/Pagehead/Pagehead.stories.tsx
index f102b247631..ceea390c631 100644
--- a/packages/react/src/Pagehead/Pagehead.stories.tsx
+++ b/packages/react/src/Pagehead/Pagehead.stories.tsx
@@ -4,7 +4,7 @@ import Pagehead from './Pagehead'
import Heading from '../Heading'
export default {
- title: 'Components/Pagehead',
+ title: 'Deprecated/Components/Pagehead',
component: Pagehead,
} as Meta
diff --git a/packages/react/src/__tests__/Pagehead.test.tsx b/packages/react/src/Pagehead/Pagehead.test.tsx
similarity index 94%
rename from packages/react/src/__tests__/Pagehead.test.tsx
rename to packages/react/src/Pagehead/Pagehead.test.tsx
index 40a487afe3c..0c1fc8bad2b 100644
--- a/packages/react/src/__tests__/Pagehead.test.tsx
+++ b/packages/react/src/Pagehead/Pagehead.test.tsx
@@ -1,5 +1,5 @@
import React from 'react'
-import {Pagehead} from '..'
+import Pagehead from '../Pagehead'
import theme from '../theme'
import {behavesAsComponent, checkExports} from '../utils/testing'
import {render as HTMLRender} from '@testing-library/react'
diff --git a/packages/react/src/Pagehead/Pagehead.tsx b/packages/react/src/Pagehead/Pagehead.tsx
index b32076f38fb..b4884414708 100644
--- a/packages/react/src/Pagehead/Pagehead.tsx
+++ b/packages/react/src/Pagehead/Pagehead.tsx
@@ -4,6 +4,9 @@ import type {SxProp} from '../sx'
import sx from '../sx'
import type {ComponentProps} from '../utils/types'
+/**
+ * @deprecated
+ */
const Pagehead = styled.div`
position: relative;
padding-top: ${get('space.4')};
@@ -13,5 +16,8 @@ const Pagehead = styled.div`
${sx};
`
+/**
+ * @deprecated
+ */
export type PageheadProps = ComponentProps
export default Pagehead
diff --git a/packages/react/src/__tests__/Pagehead.types.test.tsx b/packages/react/src/Pagehead/Pagehead.types.test.tsx
similarity index 100%
rename from packages/react/src/__tests__/Pagehead.types.test.tsx
rename to packages/react/src/Pagehead/Pagehead.types.test.tsx
diff --git a/packages/react/src/TabNav/TabNav.docs.json b/packages/react/src/TabNav/TabNav.docs.json
index afd1169fdba..86afe4816cb 100644
--- a/packages/react/src/TabNav/TabNav.docs.json
+++ b/packages/react/src/TabNav/TabNav.docs.json
@@ -1,10 +1,10 @@
{
"id": "tab_nav",
"name": "TabNav",
- "status": "alpha",
+ "status": "deprecated",
"a11yReviewed": false,
"stories": [],
- "importPath": "@primer/react",
+ "importPath": "@primer/react/deprecated",
"props": [
{
"name": "aria-label",
diff --git a/packages/react/src/TabNav/TabNav.features.stories.tsx b/packages/react/src/TabNav/TabNav.features.stories.tsx
index 994d1d3ccdf..e885a723f69 100644
--- a/packages/react/src/TabNav/TabNav.features.stories.tsx
+++ b/packages/react/src/TabNav/TabNav.features.stories.tsx
@@ -4,7 +4,7 @@ import TabNav from './TabNav'
import type {ComponentProps} from '../utils/types'
export default {
- title: 'Components/TabNav/Features',
+ title: 'Deprecated/Components/TabNav/Features',
component: TabNav,
subcomponents: {
'TabNav.Link': TabNav.Link,
diff --git a/packages/react/src/TabNav/TabNav.stories.tsx b/packages/react/src/TabNav/TabNav.stories.tsx
index a8ce31c167a..d0e5cdb3920 100644
--- a/packages/react/src/TabNav/TabNav.stories.tsx
+++ b/packages/react/src/TabNav/TabNav.stories.tsx
@@ -4,7 +4,7 @@ import TabNav from './TabNav'
import type {ComponentProps} from '../utils/types'
export default {
- title: 'Components/TabNav',
+ title: 'Deprecated/Components/TabNav',
component: TabNav,
subcomponents: {
'TabNav.Link': TabNav.Link,
diff --git a/packages/react/src/TabNav/TabNav.tsx b/packages/react/src/TabNav/TabNav.tsx
index 26f94497440..b634e89c264 100644
--- a/packages/react/src/TabNav/TabNav.tsx
+++ b/packages/react/src/TabNav/TabNav.tsx
@@ -28,8 +28,14 @@ const TabNavNav = styled.nav`
border-bottom: 1px solid ${get('colors.border.default')};
`
+/**
+ * @deprecated
+ */
export type TabNavProps = ComponentProps
+/**
+ * @deprecated
+ */
function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) {
const customContainerRef = useRef(null)
@@ -75,12 +81,18 @@ function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) {
)
}
+/**
+ * @deprecated
+ */
export type TabNavLinkProps = React.DetailedHTMLProps, HTMLAnchorElement> & {
to?: To
selected?: boolean
href?: string
} & SxProp
+/**
+ * @deprecated
+ */
const TabNavLink = styled.a.attrs(props => ({
className: clsx(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className),
role: 'tab',
diff --git a/packages/react/src/Tooltip/Tooltip.docs.json b/packages/react/src/Tooltip/Tooltip.docs.json
index f789ac60bb0..f58dca45119 100644
--- a/packages/react/src/Tooltip/Tooltip.docs.json
+++ b/packages/react/src/Tooltip/Tooltip.docs.json
@@ -2,10 +2,10 @@
"id": "tooltip",
"name": "Tooltip",
"docsId": "tooltip",
- "status": "alpha",
+ "status": "deprecated",
"a11yReviewed": false,
"stories": [],
- "importPath": "@primer/react",
+ "importPath": "@primer/react/deprecated",
"props": [
{
"name": "align",
diff --git a/packages/react/src/Tooltip/Tooltip.features.stories.tsx b/packages/react/src/Tooltip/Tooltip.features.stories.tsx
index a977be340db..cbff56035a9 100644
--- a/packages/react/src/Tooltip/Tooltip.features.stories.tsx
+++ b/packages/react/src/Tooltip/Tooltip.features.stories.tsx
@@ -8,7 +8,7 @@ import {SearchIcon} from '@primer/octicons-react'
/* Tooltip v1 */
export default {
- title: 'Components/Tooltip/Features',
+ title: 'Deprecated/Components/Tooltip/Features',
component: Tooltip,
decorators: [
diff --git a/packages/react/src/Tooltip/Tooltip.stories.tsx b/packages/react/src/Tooltip/Tooltip.stories.tsx
index 02b00559a56..39615cc9f7c 100644
--- a/packages/react/src/Tooltip/Tooltip.stories.tsx
+++ b/packages/react/src/Tooltip/Tooltip.stories.tsx
@@ -9,7 +9,7 @@ import Tooltip from './Tooltip'
/* Tooltip v1 */
export default {
- title: 'Components/Tooltip',
+ title: 'Deprecated/Components/Tooltip',
component: Tooltip,
decorators: [
diff --git a/packages/react/src/Tooltip/Tooltip.tsx b/packages/react/src/Tooltip/Tooltip.tsx
index 70d8f624033..06a17b47941 100644
--- a/packages/react/src/Tooltip/Tooltip.tsx
+++ b/packages/react/src/Tooltip/Tooltip.tsx
@@ -186,6 +186,9 @@ const TooltipBase = styled.span`
${sx};
`
+/**
+ * @deprecated
+ */
export type TooltipProps = {
direction?: 'n' | 'ne' | 'e' | 'se' | 's' | 'sw' | 'w' | 'nw'
text?: string
@@ -195,6 +198,10 @@ export type TooltipProps = {
} & ComponentProps
export const TooltipContext = React.createContext<{tooltipId?: string}>({})
+
+/**
+ * @deprecated
+ */
function Tooltip({direction = 'n', children, className, text, noDelay, align, wrap, id, ...rest}: TooltipProps) {
const tooltipId = useId(id)
const classes = clsx(
diff --git a/packages/react/src/TooltipV2/Tooltip.features.stories.tsx b/packages/react/src/TooltipV2/Tooltip.features.stories.tsx
index 59cda469fc6..2819aef6dd3 100644
--- a/packages/react/src/TooltipV2/Tooltip.features.stories.tsx
+++ b/packages/react/src/TooltipV2/Tooltip.features.stories.tsx
@@ -1,5 +1,6 @@
import React from 'react'
-import {IconButton, Button, Box, Link, Octicon, ActionMenu, ActionList} from '..'
+import {IconButton, Button, Box, Link, ActionMenu, ActionList} from '..'
+import Octicon from '../Octicon'
import {Tooltip} from './Tooltip'
import {SearchIcon, BookIcon, CheckIcon, TriangleDownIcon, GitBranchIcon} from '@primer/octicons-react'
diff --git a/packages/react/src/UnderlineNav/UnderlineNav.examples.stories.tsx b/packages/react/src/UnderlineNav/UnderlineNav.examples.stories.tsx
index 1435bcd0442..cc272ebaa3c 100644
--- a/packages/react/src/UnderlineNav/UnderlineNav.examples.stories.tsx
+++ b/packages/react/src/UnderlineNav/UnderlineNav.examples.stories.tsx
@@ -22,7 +22,8 @@ import {
} from '@primer/octicons-react'
import type {Meta} from '@storybook/react'
import {UnderlineNav} from './index'
-import {Avatar, Octicon, Button, Box, Heading, Link, Text, StateLabel, BranchName} from '..'
+import {Avatar, Button, Box, Heading, Link, Text, StateLabel, BranchName} from '..'
+import Octicon from '../Octicon'
export default {
title: 'Components/UnderlineNav/Examples',
diff --git a/packages/react/src/__tests__/ActionMenu.test.tsx b/packages/react/src/__tests__/ActionMenu.test.tsx
index 4b067fda8be..5abc967ed55 100644
--- a/packages/react/src/__tests__/ActionMenu.test.tsx
+++ b/packages/react/src/__tests__/ActionMenu.test.tsx
@@ -3,7 +3,8 @@ import userEvent from '@testing-library/user-event'
import axe from 'axe-core'
import React from 'react'
import theme from '../theme'
-import {ActionMenu, ActionList, BaseStyles, ThemeProvider, Tooltip, Button, IconButton} from '..'
+import {ActionMenu, ActionList, BaseStyles, ThemeProvider, Button, IconButton} from '..'
+import Tooltip from '../Tooltip'
import {Tooltip as TooltipV2} from '../TooltipV2/Tooltip'
import {behavesAsComponent, checkExports} from '../utils/testing'
import {SingleSelect} from '../ActionMenu/ActionMenu.features.stories'
diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
index 7b824e683ae..488a481727f 100644
--- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
+++ b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -65,9 +65,6 @@ exports[`@primer/react should not update exports without a semver change 1`] = `
"createComponent",
"Details",
"type DetailsProps",
- "Dialog",
- "type DialogHeaderProps",
- "type DialogProps",
"Flash",
"type FlashProps",
"type FocusTrapHookSettings",
@@ -100,14 +97,10 @@ exports[`@primer/react should not update exports without a semver change 1`] = `
"type NavListProps",
"type NavListSubNavProps",
"type NavListTrailingVisualProps",
- "Octicon",
- "type OcticonProps",
"Overlay",
"type OverlayProps",
- "Pagehead",
"PageHeader",
"type PageHeaderProps",
- "type PageheadProps",
"PageLayout",
"type PageLayoutContentProps",
"type PageLayoutFooterProps",
@@ -158,9 +151,6 @@ exports[`@primer/react should not update exports without a semver change 1`] = `
"type SubNavProps",
"sx",
"type SxProp",
- "TabNav",
- "type TabNavLinkProps",
- "type TabNavProps",
"Text",
"Textarea",
"type TextareaProps",
@@ -182,8 +172,6 @@ exports[`@primer/react should not update exports without a semver change 1`] = `
"ToggleSwitch",
"Token",
"type TokenProps",
- "Tooltip",
- "type TooltipProps",
"type TouchOrMouseEvent",
"TreeView",
"type TreeViewErrorDialogProps",
diff --git a/packages/react/src/deprecated/index.ts b/packages/react/src/deprecated/index.ts
index 37ad10ed66f..8ddf7190b73 100644
--- a/packages/react/src/deprecated/index.ts
+++ b/packages/react/src/deprecated/index.ts
@@ -31,8 +31,8 @@ export type {UnderlineNavProps, UnderlineNavLinkProps} from './UnderlineNav'
// end of v36.0.0
// Deprecated in v37.0.0
-export {default as Dialog} from '../Dialog'
-export type {DialogProps, DialogHeaderProps} from '../Dialog'
+export {Dialog} from '../DialogV1'
+export type {DialogProps, DialogHeaderProps} from '../DialogV1'
export {default as Octicon} from '../Octicon'
export type {OcticonProps} from '../Octicon'
export {default as Pagehead} from '../Pagehead'
diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
index 9aab1be247a..de74f8dda2f 100644
--- a/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
+++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.examples.stories.tsx
@@ -1,6 +1,7 @@
import React from 'react'
import {SelectPanel} from './SelectPanel'
-import {ActionList, ActionMenu, Avatar, Box, Button, Text, Octicon, Flash, FormControl, TextInput} from '../../index'
+import {ActionList, ActionMenu, Avatar, Box, Button, Text, Flash, FormControl, TextInput} from '../../index'
+import Octicon from '../../Octicon'
import {Dialog} from '../../experimental'
import {
ArrowRightIcon,
diff --git a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
index 31ebd9dff9e..ac53c6a4aac 100644
--- a/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
+++ b/packages/react/src/experimental/SelectPanel2/SelectPanel.tsx
@@ -10,11 +10,11 @@ import {
TextInput,
Spinner,
Text,
- Octicon,
Link,
Checkbox,
useFormControlForwardedProps,
} from '../../index'
+import Octicon from '../../Octicon'
import {ActionListContainerContext} from '../../ActionList/ActionListContainerContext'
import {useSlots} from '../../hooks/useSlots'
import {useProvidedRefOrCreate, useId, useAnchoredPosition} from '../../hooks'
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index c4d89da90d9..8ad64df569c 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -93,8 +93,6 @@ export {default as CounterLabel} from './CounterLabel'
export type {CounterLabelProps} from './CounterLabel'
export {default as Details} from './Details'
export type {DetailsProps} from './Details'
-export {default as Dialog} from './Dialog'
-export type {DialogProps, DialogHeaderProps} from './Dialog'
export type {ConfirmationDialogProps} from './ConfirmationDialog/ConfirmationDialog'
export {ConfirmationDialog} from './ConfirmationDialog/ConfirmationDialog'
export {default as Flash} from './Flash'
@@ -121,12 +119,8 @@ export type {
NavListTrailingVisualProps,
NavListDividerProps,
} from './NavList'
-export {default as Octicon} from './Octicon'
-export type {OcticonProps} from './Octicon'
export {default as Overlay} from './Overlay'
export type {OverlayProps} from './Overlay'
-export {default as Pagehead} from './Pagehead'
-export type {PageheadProps} from './Pagehead'
export {default as Pagination} from './Pagination'
export type {PaginationProps} from './Pagination'
export {default as PointerBox} from './PointerBox'
@@ -154,8 +148,6 @@ export type {StateLabelProps} from './StateLabel'
export {default as SubNav} from './SubNav'
export type {SubNavProps, SubNavLinkProps, SubNavLinksProps} from './SubNav'
export {default as ToggleSwitch} from './ToggleSwitch'
-export {default as TabNav} from './TabNav'
-export type {TabNavProps, TabNavLinkProps} from './TabNav'
export {default as TextInput} from './TextInput'
export type {TextInputProps} from './TextInput'
export {default as TextInputWithTokens} from './TextInputWithTokens'
@@ -172,8 +164,6 @@ export type {
} from './Timeline'
export {default as Token, IssueLabelToken, AvatarToken} from './Token'
export type {TokenProps, IssueLabelTokenProps} from './Token'
-export {default as Tooltip} from './Tooltip/Tooltip'
-export type {TooltipProps} from './Tooltip/Tooltip'
export {default as Truncate} from './Truncate'
export type {TruncateProps} from './Truncate'