diff --git a/.changeset/metal-lamps-appear.md b/.changeset/metal-lamps-appear.md new file mode 100644 index 00000000000..e2de2388f34 --- /dev/null +++ b/.changeset/metal-lamps-appear.md @@ -0,0 +1,5 @@ +--- +"@primer/react": minor +--- + +Deprecate AvatarPair component - move to @primer/react/deprecated diff --git a/e2e/components/AvatarPair.test.ts b/e2e/components/AvatarPair.test.ts deleted file mode 100644 index 18b6a5275c2..00000000000 --- a/e2e/components/AvatarPair.test.ts +++ /dev/null @@ -1,40 +0,0 @@ -import {test, expect} from '@playwright/test' -import {visit} from '../test-helpers/storybook' -import {themes} from '../test-helpers/themes' - -const stories = [ - { - title: 'Default', - id: 'components-avatarpair--default', - }, - { - title: 'Parent Circle', - id: 'components-avatarpair-features--parent-circle', - }, - { - title: 'Parent Square', - id: 'components-avatarpair-features--parent-square', - }, -] as const - -test.describe('AvatarPair', () => { - 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, - }, - }) - - // Default state - await expect(page).toHaveScreenshot(`AvatarPair.${story.title}.${theme}.png`) - }) - }) - } - }) - } -}) diff --git a/e2e/components/Skeletons.test.ts b/e2e/components/Skeletons.test.ts index 13ed37118f6..15829309967 100644 --- a/e2e/components/Skeletons.test.ts +++ b/e2e/components/Skeletons.test.ts @@ -13,11 +13,7 @@ const stories = [ id: 'components-skeleton-skeletonavatar-features--in-a-stack', disableAnimations: true, }, - { - title: 'SkeletonAvatar In An Avatar Pair', - id: 'components-skeleton-skeletonavatar-features--in-an-avatar-pair', - disableAnimations: true, - }, + { title: 'SkeletonAvatar Size', id: 'components-skeleton-skeletonavatar-features--size', diff --git a/packages/react/src/SkeletonAvatar/SkeletonAvatar.docs.json b/packages/react/src/SkeletonAvatar/SkeletonAvatar.docs.json index 482fe22ff05..4f2709cc92a 100644 --- a/packages/react/src/SkeletonAvatar/SkeletonAvatar.docs.json +++ b/packages/react/src/SkeletonAvatar/SkeletonAvatar.docs.json @@ -18,9 +18,6 @@ }, { "id": "components-skeleton-skeletonavatar-features--in-a-stack" - }, - { - "id": "components-skeleton-skeletonavatar-features--in-an-avatar-pair" } ], "importPath": "@primer/react/experimental", diff --git a/packages/react/src/SkeletonAvatar/SkeletonAvatar.features.stories.tsx b/packages/react/src/SkeletonAvatar/SkeletonAvatar.features.stories.tsx index 948ca820948..0074abd34e3 100644 --- a/packages/react/src/SkeletonAvatar/SkeletonAvatar.features.stories.tsx +++ b/packages/react/src/SkeletonAvatar/SkeletonAvatar.features.stories.tsx @@ -2,7 +2,6 @@ import type {Meta} from '@storybook/react-vite' import type {ComponentProps} from '../utils/types' import {SkeletonAvatar} from './SkeletonAvatar' import AvatarStack from '../AvatarStack' -import AvatarPair from '../AvatarPair' export default { title: 'Components/Skeleton/SkeletonAvatar/Features', @@ -51,10 +50,3 @@ export const InAStack = () => ( ) - -export const InAnAvatarPair = () => ( - - - - -) diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap index 63e28024ae9..3360c757d91 100644 --- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap +++ b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap @@ -232,6 +232,8 @@ exports[`@primer/react/deprecated > should not update exports without a semver c "type ActionListProps", "ActionMenu", "type ActionMenuProps", + "AvatarPair", + "type AvatarPairProps", "Dialog", "type DialogHeaderProps", "type DialogProps", diff --git a/packages/react/src/__tests__/storybook.test.tsx b/packages/react/src/__tests__/storybook.test.tsx index d2cf7e2f41f..f8afa6c5691 100644 --- a/packages/react/src/__tests__/storybook.test.tsx +++ b/packages/react/src/__tests__/storybook.test.tsx @@ -15,7 +15,6 @@ const allowlist = [ 'Autocomplete', 'Avatar', 'AvatarStack', - 'AvatarPair', 'Breadcrumbs', 'BranchName', 'Blankslate', diff --git a/packages/react/src/AvatarPair/AvatarPair.docs.json b/packages/react/src/deprecated/AvatarPair/AvatarPair.docs.json similarity index 100% rename from packages/react/src/AvatarPair/AvatarPair.docs.json rename to packages/react/src/deprecated/AvatarPair/AvatarPair.docs.json diff --git a/packages/react/src/AvatarPair/AvatarPair.features.stories.tsx b/packages/react/src/deprecated/AvatarPair/AvatarPair.features.stories.tsx similarity index 95% rename from packages/react/src/AvatarPair/AvatarPair.features.stories.tsx rename to packages/react/src/deprecated/AvatarPair/AvatarPair.features.stories.tsx index 123464572b5..d73dcc61d9d 100644 --- a/packages/react/src/AvatarPair/AvatarPair.features.stories.tsx +++ b/packages/react/src/deprecated/AvatarPair/AvatarPair.features.stories.tsx @@ -1,6 +1,6 @@ import type {Meta} from '@storybook/react-vite' import AvatarPair from './AvatarPair' -import Avatar from '../Avatar' +import Avatar from '../../Avatar' export default { title: 'Components/AvatarPair/Features', diff --git a/packages/react/src/AvatarPair/AvatarPair.figma.tsx b/packages/react/src/deprecated/AvatarPair/AvatarPair.figma.tsx similarity index 87% rename from packages/react/src/AvatarPair/AvatarPair.figma.tsx rename to packages/react/src/deprecated/AvatarPair/AvatarPair.figma.tsx index 0ab01660512..0fbd00deafd 100644 --- a/packages/react/src/AvatarPair/AvatarPair.figma.tsx +++ b/packages/react/src/deprecated/AvatarPair/AvatarPair.figma.tsx @@ -1,4 +1,4 @@ -import {AvatarPair} from '../../src' +import AvatarPair from './AvatarPair' import figma from '@figma/code-connect' figma.connect(AvatarPair, 'https://www.figma.com/design/GCvY3Qv8czRgZgvl1dG6lp/Primer-Web?node-id=13006-42855', { diff --git a/packages/react/src/AvatarPair/AvatarPair.module.css b/packages/react/src/deprecated/AvatarPair/AvatarPair.module.css similarity index 100% rename from packages/react/src/AvatarPair/AvatarPair.module.css rename to packages/react/src/deprecated/AvatarPair/AvatarPair.module.css diff --git a/packages/react/src/AvatarPair/AvatarPair.stories.tsx b/packages/react/src/deprecated/AvatarPair/AvatarPair.stories.tsx similarity index 92% rename from packages/react/src/AvatarPair/AvatarPair.stories.tsx rename to packages/react/src/deprecated/AvatarPair/AvatarPair.stories.tsx index 6ee78f17bfa..e52b8b542c2 100644 --- a/packages/react/src/AvatarPair/AvatarPair.stories.tsx +++ b/packages/react/src/deprecated/AvatarPair/AvatarPair.stories.tsx @@ -1,6 +1,6 @@ import type {Meta} from '@storybook/react-vite' import AvatarPair from './AvatarPair' -import Avatar from '../Avatar' +import Avatar from '../../Avatar' export default { title: 'Components/AvatarPair', diff --git a/packages/react/src/AvatarPair/AvatarPair.tsx b/packages/react/src/deprecated/AvatarPair/AvatarPair.tsx similarity index 69% rename from packages/react/src/AvatarPair/AvatarPair.tsx rename to packages/react/src/deprecated/AvatarPair/AvatarPair.tsx index 2cde8ece710..075e20330fa 100644 --- a/packages/react/src/AvatarPair/AvatarPair.tsx +++ b/packages/react/src/deprecated/AvatarPair/AvatarPair.tsx @@ -1,12 +1,18 @@ import React, {type HTMLProps} from 'react' -import type {AvatarProps} from '../Avatar' -import Avatar from '../Avatar' -import {SkeletonAvatar} from '../SkeletonAvatar' +import type {AvatarProps} from '../../Avatar' +import Avatar from '../../Avatar' +import {SkeletonAvatar} from '../../SkeletonAvatar' import classes from './AvatarPair.module.css' import {clsx} from 'clsx' +/** + * @deprecated AvatarPair is deprecated. Please see https://github.com/github/primer/issues/5533 for migration guidance. + */ export type AvatarPairProps = HTMLProps +/** + * @deprecated AvatarPair is deprecated. Please see https://github.com/github/primer/issues/5533 for migration guidance. + */ const AvatarPair = ({children, className, ...rest}: AvatarPairProps) => { const avatars = React.Children.map(children, (child, i) => { if (!React.isValidElement(child)) { diff --git a/packages/react/src/AvatarPair/index.ts b/packages/react/src/deprecated/AvatarPair/index.ts similarity index 100% rename from packages/react/src/AvatarPair/index.ts rename to packages/react/src/deprecated/AvatarPair/index.ts diff --git a/packages/react/src/deprecated/index.ts b/packages/react/src/deprecated/index.ts index c0df1270469..ea5ddc53fd3 100644 --- a/packages/react/src/deprecated/index.ts +++ b/packages/react/src/deprecated/index.ts @@ -42,3 +42,8 @@ export type {TabNavProps, TabNavLinkProps} from '../TabNav' export {default as Tooltip} from '../Tooltip/Tooltip' export type {TooltipProps} from '../Tooltip/Tooltip' // end of v37.0.0 + +// Deprecated in v37.31.0 - https://github.com/github/primer/issues/5533 +export {default as AvatarPair} from './AvatarPair' +export type {AvatarPairProps} from './AvatarPair' +// end of v37.31.0 diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index 6e66bf9e097..1200cc1a7d8 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -72,10 +72,11 @@ export {default as Autocomplete} from './Autocomplete' export type {AutocompleteMenuProps, AutocompleteInputProps, AutocompleteOverlayProps} from './Autocomplete' export {default as Avatar} from './Avatar' export type {AvatarProps} from './Avatar' -export {default as AvatarPair} from './AvatarPair' -export type {AvatarPairProps} from './AvatarPair' export {default as AvatarStack} from './AvatarStack' export type {AvatarStackProps} from './AvatarStack' +// AvatarPair is deprecated. Use Avatar component instead. See https://github.com/github/primer/issues/5533 +export {default as AvatarPair} from './deprecated/AvatarPair' +export type {AvatarPairProps} from './deprecated/AvatarPair' export {default as BranchName} from './BranchName' export type {BranchNameProps} from './BranchName' export {default as Breadcrumbs, Breadcrumb} from './Breadcrumbs' diff --git a/script/generate-e2e-tests.js b/script/generate-e2e-tests.js index 716ce98b30d..82437e82c14 100755 --- a/script/generate-e2e-tests.js +++ b/script/generate-e2e-tests.js @@ -184,25 +184,7 @@ const components = new Map([ ], }, ], - [ - 'AvatarPair', - { - stories: [ - { - id: 'components-avatarpair--default', - name: 'Default', - }, - { - id: 'components-avatarpair-features--parent-circle', - name: 'Parent Circle', - }, - { - id: 'components-avatarpair-features--parent-square', - name: 'Parent Square', - }, - ], - }, - ], + [ 'BranchName', {