Skip to content

Commit d1d911a

Browse files
joshblackjoshblack
authored
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 <[email protected]>
1 parent 0b83fe9 commit d1d911a

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+190
-173
lines changed

‎.changeset/dull-mirrors-dream.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': major
3+
---
4+
5+
Move Octicon, Pagehead, Dialog (v1), and Tooltip (v1) to `@primer/react/deprecated`

‎e2e/components/Octicon.test.ts‎

Lines changed: 35 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -2,60 +2,45 @@ import {test, expect} from '@playwright/test'
22
import {visit} from '../test-helpers/storybook'
33
import {themes} from '../test-helpers/themes'
44

5-
test.describe('Octicon', () => {
6-
test.describe('Default', () => {
7-
for (const theme of themes) {
8-
test.describe(theme, () => {
9-
test('default @vrt', async ({page}) => {
10-
await visit(page, {
11-
id: 'components-octicon--default',
12-
globals: {
13-
colorScheme: theme,
14-
},
15-
})
5+
const stories = [
6+
{
7+
title: 'Default',
8+
id: 'deprecated-components-octicon--default',
9+
},
10+
{
11+
title: 'Playground',
12+
id: 'deprecated-components-octicon--playground',
13+
},
14+
] as const
1615

17-
// Default state
18-
expect(await page.screenshot()).toMatchSnapshot(`Octicon.Default.${theme}.png`)
19-
})
20-
21-
test('axe @aat', async ({page}) => {
22-
await visit(page, {
23-
id: 'components-octicon--default',
24-
globals: {
25-
colorScheme: theme,
26-
},
27-
})
28-
await expect(page).toHaveNoViolations()
29-
})
30-
})
31-
}
32-
})
16+
test.describe('Octicon', () => {
17+
for (const story of stories) {
18+
test.describe(story.title, () => {
19+
for (const theme of themes) {
20+
test.describe(theme, () => {
21+
test('default @vrt', async ({page}) => {
22+
await visit(page, {
23+
id: story.id,
24+
globals: {
25+
colorScheme: theme,
26+
},
27+
})
3328

34-
test.describe('Playground', () => {
35-
for (const theme of themes) {
36-
test.describe(theme, () => {
37-
test('default @vrt', async ({page}) => {
38-
await visit(page, {
39-
id: 'components-octicon--playground',
40-
globals: {
41-
colorScheme: theme,
42-
},
29+
// Default state
30+
expect(await page.screenshot()).toMatchSnapshot(`Octicon.${story.title}.${theme}.png`)
4331
})
4432

45-
// Default state
46-
expect(await page.screenshot()).toMatchSnapshot(`Octicon.Playground.${theme}.png`)
47-
})
48-
49-
test('axe @aat', async ({page}) => {
50-
await visit(page, {
51-
id: 'components-octicon--playground',
52-
globals: {
53-
colorScheme: theme,
54-
},
33+
test('axe @aat', async ({page}) => {
34+
await visit(page, {
35+
id: story.id,
36+
globals: {
37+
colorScheme: theme,
38+
},
39+
})
40+
await expect(page).toHaveNoViolations()
5541
})
56-
await expect(page).toHaveNoViolations()
5742
})
58-
})
59-
}
60-
})
43+
}
44+
})
45+
}
6146
})

‎e2e/components/Pagehead.test.ts‎

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -2,32 +2,41 @@ import {test, expect} from '@playwright/test'
22
import {visit} from '../test-helpers/storybook'
33
import {themes} from '../test-helpers/themes'
44

5+
const stories = [
6+
{
7+
title: 'Default',
8+
id: 'deprecated-components-pagehead--default',
9+
},
10+
] as const
11+
512
test.describe('Pagehead', () => {
6-
test.describe('Default', () => {
7-
for (const theme of themes) {
8-
test.describe(theme, () => {
9-
test('default @vrt', async ({page}) => {
10-
await visit(page, {
11-
id: 'components-pagehead--default',
12-
globals: {
13-
colorScheme: theme,
14-
},
15-
})
13+
for (const story of stories) {
14+
test.describe(story.id, () => {
15+
for (const theme of themes) {
16+
test.describe(theme, () => {
17+
test('default @vrt', async ({page}) => {
18+
await visit(page, {
19+
id: story.id,
20+
globals: {
21+
colorScheme: theme,
22+
},
23+
})
1624

17-
// Default state
18-
expect(await page.screenshot()).toMatchSnapshot(`Pagehead.Default.${theme}.png`)
19-
})
25+
// Default state
26+
expect(await page.screenshot()).toMatchSnapshot(`Pagehead.${story.title}.${theme}.png`)
27+
})
2028

21-
test('axe @aat', async ({page}) => {
22-
await visit(page, {
23-
id: 'components-pagehead--default',
24-
globals: {
25-
colorScheme: theme,
26-
},
29+
test('axe @aat', async ({page}) => {
30+
await visit(page, {
31+
id: story.id,
32+
globals: {
33+
colorScheme: theme,
34+
},
35+
})
36+
await expect(page).toHaveNoViolations()
2737
})
28-
await expect(page).toHaveNoViolations()
2938
})
30-
})
31-
}
32-
})
39+
}
40+
})
41+
}
3342
})

‎e2e/components/TabNav.test.ts‎

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,41 @@ import {test, expect} from '@playwright/test'
22
import {visit} from '../test-helpers/storybook'
33
import {themes} from '../test-helpers/themes'
44

5-
test.describe('TabNav', () => {
6-
test.describe('Default', () => {
7-
for (const theme of themes) {
8-
test.describe(theme, () => {
9-
test('default @vrt', async ({page}) => {
10-
await visit(page, {
11-
id: 'components-tabnav--default',
12-
globals: {
13-
colorScheme: theme,
14-
},
15-
})
5+
const stories = [
6+
{
7+
title: 'Default',
8+
id: 'deprecated-components-tabnav--default',
9+
},
10+
] as const
1611

17-
// Default state
18-
expect(await page.screenshot()).toMatchSnapshot(`TabNav.Default.${theme}.png`)
19-
})
12+
test.describe('TabNav', () => {
13+
for (const story of stories) {
14+
test.describe(story.title, () => {
15+
for (const theme of themes) {
16+
test.describe(theme, () => {
17+
test('default @vrt', async ({page}) => {
18+
await visit(page, {
19+
id: story.id,
20+
globals: {
21+
colorScheme: theme,
22+
},
23+
})
2024

21-
test('axe @aat', async ({page}) => {
22-
await visit(page, {
23-
id: 'components-tabnav--default',
24-
globals: {
25-
colorScheme: theme,
26-
},
25+
// Default state
26+
expect(await page.screenshot()).toMatchSnapshot(`TabNav.${story.title}.${theme}.png`)
2727
})
28-
await expect(page).toHaveNoViolations({
29-
rules: {
30-
'color-contrast': {
31-
enabled: theme !== 'dark_dimmed',
28+
29+
test('axe @aat', async ({page}) => {
30+
await visit(page, {
31+
id: story.id,
32+
globals: {
33+
colorScheme: theme,
3234
},
33-
},
35+
})
36+
await expect(page).toHaveNoViolations()
3437
})
3538
})
36-
})
37-
}
38-
})
39+
}
40+
})
41+
}
3942
})

‎e2e/components/Tooltip.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ test.describe('Tooltip', () => {
88
test.describe(theme, () => {
99
test('default @vrt', async ({page}) => {
1010
await visit(page, {
11-
id: 'components-tooltip--default',
11+
id: 'deprecated-components-tooltip--default',
1212
globals: {
1313
colorScheme: theme,
1414
},
@@ -21,7 +21,7 @@ test.describe('Tooltip', () => {
2121

2222
test('axe @aat', async ({page}) => {
2323
await visit(page, {
24-
id: 'components-tooltip--default',
24+
id: 'deprecated-components-tooltip--default',
2525
globals: {
2626
colorScheme: theme,
2727
},

‎packages/react/src/ActionBar/ActionBar.stories.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ import {
1818
ReplyIcon,
1919
ThreeBarsIcon,
2020
} from '@primer/octicons-react'
21-
import {Box, Dialog, Button, Avatar, ActionMenu, IconButton, ActionList, Textarea} from '../'
21+
import {Box, Button, Avatar, ActionMenu, IconButton, ActionList, Textarea} from '../'
22+
import {Dialog} from '../DialogV1'
2223
import {Divider} from '../deprecated/ActionList/Divider'
2324
import mockData from '../experimental/SelectPanel2/mock-story-data'
2425

‎packages/react/src/Autocomplete/Autocomplete.features.stories.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@ import type {ChangeEventHandler, RefObject} from 'react'
22
import React, {useCallback, useEffect, useRef, useState} from 'react'
33
import type {Meta} from '@storybook/react'
44

5-
import {BaseStyles, Box, Dialog, ThemeProvider, registerPortalRoot} from '..'
5+
import {BaseStyles, Box, ThemeProvider, registerPortalRoot} from '..'
6+
import {Dialog} from '../DialogV1'
67
import TextInputTokens from '../TextInputWithTokens'
78
import Autocomplete from './Autocomplete'
89
import {AnchoredOverlay} from '../AnchoredOverlay'

‎packages/react/src/Dialog.docs.json‎ renamed to ‎packages/react/src/DialogV1/Dialog.docs.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,10 @@
22
"id": "dialog",
33
"docsId": "dialog",
44
"name": "Dialog",
5-
"status": "alpha",
5+
"status": "deprecated",
66
"a11yReviewed": false,
77
"stories": [],
8-
"importPath": "@primer/react",
8+
"importPath": "@primer/react/deprecated",
99
"props": [
1010
{
1111
"name": "isOpen",

‎packages/react/src/Dialog.stories.tsx‎ renamed to ‎packages/react/src/DialogV1/Dialog.stories.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, {useState, useRef} from 'react'
22
import type {Meta} from '@storybook/react'
3-
import {Button} from './Button'
4-
import {Box, Link, Text} from '.'
5-
import {Banner} from './Banner'
3+
import {Button} from '../Button'
4+
import {Box, Link, Text} from '..'
5+
import {Banner} from '../Banner'
66
import {default as Dialog} from './Dialog'
77

88
/* Dialog Version 1*/

‎packages/react/src/__tests__/Dialog.test.tsx‎ renamed to ‎packages/react/src/DialogV1/Dialog.test.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import React, {useState, useRef} from 'react'
2-
import {Dialog, Box, Text, Button} from '..'
2+
import {Box, Text, Button} from '..'
3+
import {Dialog} from '../DialogV1'
34
import {render as HTMLRender, fireEvent} from '@testing-library/react'
45
import axe from 'axe-core'
5-
import {behavesAsComponent, checkExports} from '../utils/testing'
6+
import {behavesAsComponent} from '../utils/testing'
67

78
/* Dialog Version 1*/
89

@@ -108,10 +109,6 @@ describe('Dialog', () => {
108109
options: {skipAs: true, skipSx: true},
109110
})
110111

111-
checkExports('Dialog', {
112-
default: Dialog,
113-
})
114-
115112
describe('Dialog.Header', () => {
116113
behavesAsComponent({Component: Dialog.Header})
117114
})

0 commit comments

Comments
 (0)