From 660b9da2485257c80ba8be5e1079756ccb07f85d Mon Sep 17 00:00:00 2001
From: Paul Schreiber <github@paulschreiber.com>
Date: Wed, 31 Aug 2022 08:33:12 -0400
Subject: [PATCH] [Avatar] Use structured / semantic markup for avatars and
 avatar groups (#33994)

---
 docs/pages/material-ui/api/avatar-group.json           |  1 +
 .../api-docs/avatar-group/avatar-group.json            |  1 +
 packages/mui-material/src/AvatarGroup/AvatarGroup.d.ts |  5 +++++
 packages/mui-material/src/AvatarGroup/AvatarGroup.js   |  8 ++++++++
 .../mui-material/src/AvatarGroup/AvatarGroup.spec.tsx  | 10 ++++++++++
 .../mui-material/src/AvatarGroup/AvatarGroup.test.js   |  2 +-
 6 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 packages/mui-material/src/AvatarGroup/AvatarGroup.spec.tsx

diff --git a/docs/pages/material-ui/api/avatar-group.json b/docs/pages/material-ui/api/avatar-group.json
index 0ed30204ee16df..396bf5aa2e056d 100644
--- a/docs/pages/material-ui/api/avatar-group.json
+++ b/docs/pages/material-ui/api/avatar-group.json
@@ -2,6 +2,7 @@
   "props": {
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
+    "component": { "type": { "name": "elementType" } },
     "componentsProps": {
       "type": { "name": "shape", "description": "{ additionalAvatar?: object }" },
       "default": "{}"
diff --git a/docs/translations/api-docs/avatar-group/avatar-group.json b/docs/translations/api-docs/avatar-group/avatar-group.json
index 207cc88a3d6f9a..4df710877c3a9f 100644
--- a/docs/translations/api-docs/avatar-group/avatar-group.json
+++ b/docs/translations/api-docs/avatar-group/avatar-group.json
@@ -3,6 +3,7 @@
   "propDescriptions": {
     "children": "The avatars to stack.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "componentsProps": "The props used for each slot inside the AvatarGroup.",
     "max": "Max avatars to show before +x.",
     "spacing": "Spacing between avatars.",
diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.d.ts b/packages/mui-material/src/AvatarGroup/AvatarGroup.d.ts
index b8b02c26de14fa..b0da7ecaa0d4a1 100644
--- a/packages/mui-material/src/AvatarGroup/AvatarGroup.d.ts
+++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.d.ts
@@ -17,6 +17,11 @@ export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTM
    * Override or extend the styles applied to the component.
    */
   classes?: Partial<AvatarGroupClasses>;
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component?: React.ElementType;
   /**
    * The props used for each slot inside the AvatarGroup.
    * @default {}
diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.js b/packages/mui-material/src/AvatarGroup/AvatarGroup.js
index 45a3b0bde884a5..20a91518dc2112 100644
--- a/packages/mui-material/src/AvatarGroup/AvatarGroup.js
+++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.js
@@ -67,6 +67,7 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
   const {
     children: childrenProp,
     className,
+    component = 'div',
     componentsProps = {},
     max = 5,
     spacing = 'medium',
@@ -80,6 +81,7 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
     ...props,
     max,
     spacing,
+    component,
     variant,
   };
 
@@ -115,6 +117,7 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
 
   return (
     <AvatarGroupRoot
+      as={component}
       ownerState={ownerState}
       className={clsx(classes.root, className)}
       ref={ref}
@@ -167,6 +170,11 @@ AvatarGroup.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
   /**
    * The props used for each slot inside the AvatarGroup.
    * @default {}
diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.spec.tsx b/packages/mui-material/src/AvatarGroup/AvatarGroup.spec.tsx
new file mode 100644
index 00000000000000..5dea4e7ab56bf7
--- /dev/null
+++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.spec.tsx
@@ -0,0 +1,10 @@
+import * as React from 'react';
+import AvatarGroup from '@mui/material/AvatarGroup';
+
+<AvatarGroup component="ul" />;
+<AvatarGroup variant="circular" />;
+<AvatarGroup variant="rounded" />;
+<AvatarGroup variant="square" />;
+
+// @ts-expect-error
+<AvatarGroup variant="unknown" />;
diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.test.js b/packages/mui-material/src/AvatarGroup/AvatarGroup.test.js
index a82f8fce5771a6..715d636a5dc35f 100644
--- a/packages/mui-material/src/AvatarGroup/AvatarGroup.test.js
+++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.test.js
@@ -18,7 +18,7 @@ describe('<AvatarGroup />', () => {
       muiName: 'MuiAvatarGroup',
       refInstanceof: window.HTMLDivElement,
       testVariantProps: { max: 10, spacing: 'small', variant: 'square' },
-      skip: ['componentProp', 'componentsProp'],
+      skip: ['componentsProp'],
     }),
   );