Deprecate AvatarPair component - move to @primer/react/deprecated while maintaining backward compatibility

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",

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 = () => (
     <SkeletonAvatar />
   </AvatarStack>
 )
-
-export const InAnAvatarPair = () => (
-  <AvatarPair>
-    <SkeletonAvatar />
-    <SkeletonAvatar />
-  </AvatarPair>
-)

packages/react/src/__tests__/__snapshots__/exports.test.ts.snap

@@ -24,8 +24,6 @@ exports[`@primer/react > should not update exports without a semver change 1`] =
   "type AutocompleteMenuProps",
   "type AutocompleteOverlayProps",
   "Avatar",
-  "AvatarPair",
-  "type AvatarPairProps",
   "type AvatarProps",
   "AvatarStack",
   "type AvatarStackProps",
@@ -232,6 +230,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",

packages/react/src/__tests__/storybook.test.tsx

@@ -15,7 +15,6 @@ const allowlist = [
   'Autocomplete',
   'Avatar',
   'AvatarStack',
-  'AvatarPair',
   'Breadcrumbs',
   'BranchName',
   'Blankslate',

packages/react/src/AvatarPair/AvatarPair.tsx → 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<HTMLDivElement>
 
+/**
+ * @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)) {

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

packages/react/src/index.ts

@@ -72,8 +72,6 @@ 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'
 export {default as BranchName} from './BranchName'

results.json

@@ -0,0 +1 @@
+[]

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',
     {