From d1d911ad739f4f766234e99afca4ced0ad966da2 Mon Sep 17 00:00:00 2001 From: Josh Black Date: Mon, 30 Sep 2024 11:46:45 -0500 Subject: [PATCH] feat(react): remove deprecated components from main entrypoint (#4992) * refactor(deprecated): update deprecated component status, stories, and tests * chore: fix ci failures * chore: add changeset * Updates from editor * chore: fix packageManager field --------- Co-authored-by: Josh Black --- .changeset/dull-mirrors-dream.md | 5 ++ e2e/components/Octicon.test.ts | 85 ++++++++----------- e2e/components/Pagehead.test.ts | 55 +++++++----- e2e/components/TabNav.test.ts | 59 +++++++------ e2e/components/Tooltip.test.ts | 4 +- .../react/src/ActionBar/ActionBar.stories.tsx | 3 +- .../Autocomplete.features.stories.tsx | 3 +- .../react/src/{ => DialogV1}/Dialog.docs.json | 4 +- .../src/{ => DialogV1}/Dialog.stories.tsx | 6 +- .../{__tests__ => DialogV1}/Dialog.test.tsx | 9 +- packages/react/src/{ => DialogV1}/Dialog.tsx | 18 ++-- .../Dialog.types.test.tsx | 2 +- packages/react/src/DialogV1/index.ts | 2 + packages/react/src/Octicon/Octicon.docs.json | 4 +- .../react/src/Octicon/Octicon.stories.tsx | 2 +- .../{__tests__ => Octicon}/Octicon.test.tsx | 2 +- packages/react/src/Octicon/Octicon.tsx | 6 ++ .../Octicon.types.test.tsx | 0 .../PageHeader.examples.stories.tsx | 2 +- .../PageLayout.features.stories.tsx | 3 +- .../react/src/Pagehead/Pagehead.docs.json | 4 +- .../react/src/Pagehead/Pagehead.stories.tsx | 2 +- .../{__tests__ => Pagehead}/Pagehead.test.tsx | 2 +- packages/react/src/Pagehead/Pagehead.tsx | 6 ++ .../Pagehead.types.test.tsx | 0 packages/react/src/TabNav/TabNav.docs.json | 4 +- .../src/TabNav/TabNav.features.stories.tsx | 2 +- packages/react/src/TabNav/TabNav.stories.tsx | 2 +- packages/react/src/TabNav/TabNav.tsx | 12 +++ packages/react/src/Tooltip/Tooltip.docs.json | 4 +- .../src/Tooltip/Tooltip.features.stories.tsx | 2 +- .../react/src/Tooltip/Tooltip.stories.tsx | 2 +- packages/react/src/Tooltip/Tooltip.tsx | 7 ++ .../TooltipV2/Tooltip.features.stories.tsx | 3 +- .../UnderlineNav.examples.stories.tsx | 3 +- .../react/src/__tests__/ActionMenu.test.tsx | 3 +- .../__snapshots__/exports.test.ts.snap | 12 --- packages/react/src/deprecated/index.ts | 4 +- .../SelectPanel.examples.stories.tsx | 3 +- .../experimental/SelectPanel2/SelectPanel.tsx | 2 +- packages/react/src/index.ts | 10 --- 41 files changed, 190 insertions(+), 173 deletions(-) create mode 100644 .changeset/dull-mirrors-dream.md rename packages/react/src/{ => DialogV1}/Dialog.docs.json (95%) rename packages/react/src/{ => DialogV1}/Dialog.stories.tsx (93%) rename packages/react/src/{__tests__ => DialogV1}/Dialog.test.tsx (97%) rename packages/react/src/{ => DialogV1}/Dialog.tsx (90%) rename packages/react/src/{__tests__ => DialogV1}/Dialog.types.test.tsx (87%) create mode 100644 packages/react/src/DialogV1/index.ts rename packages/react/src/{__tests__ => Octicon}/Octicon.test.tsx (94%) rename packages/react/src/{__tests__ => Octicon}/Octicon.types.test.tsx (100%) rename packages/react/src/{__tests__ => Pagehead}/Pagehead.test.tsx (94%) rename packages/react/src/{__tests__ => Pagehead}/Pagehead.types.test.tsx (100%) 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'