From 1230711035c2277a286dd74551f457c60efb52bf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aar=C3=B3n=20Garc=C3=ADa=20Herv=C3=A1s?= <aaron@mui.com>
Date: Fri, 25 Oct 2024 08:25:07 +0200
Subject: [PATCH] Add AvatarGroup spacing demo

---
 .../material/components/avatars/Spacing.js    | 26 +++++++++++++++++++
 .../material/components/avatars/Spacing.tsx   | 26 +++++++++++++++++++
 .../components/avatars/Spacing.tsx.preview    | 15 +++++++++++
 .../material/components/avatars/avatars.md    |  6 +++++
 4 files changed, 73 insertions(+)
 create mode 100644 docs/data/material/components/avatars/Spacing.js
 create mode 100644 docs/data/material/components/avatars/Spacing.tsx
 create mode 100644 docs/data/material/components/avatars/Spacing.tsx.preview

diff --git a/docs/data/material/components/avatars/Spacing.js b/docs/data/material/components/avatars/Spacing.js
new file mode 100644
index 00000000000000..c0aebda531a9cf
--- /dev/null
+++ b/docs/data/material/components/avatars/Spacing.js
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import AvatarGroup from '@mui/material/AvatarGroup';
+import Stack from '@mui/material/Stack';
+
+export default function Spacing() {
+  return (
+    <Stack spacing={4}>
+      <AvatarGroup spacing="medium">
+        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+        <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+      </AvatarGroup>
+      <AvatarGroup spacing="small">
+        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+        <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+      </AvatarGroup>
+      <AvatarGroup spacing={24}>
+        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+        <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+      </AvatarGroup>
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/avatars/Spacing.tsx b/docs/data/material/components/avatars/Spacing.tsx
new file mode 100644
index 00000000000000..c0aebda531a9cf
--- /dev/null
+++ b/docs/data/material/components/avatars/Spacing.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import Avatar from '@mui/material/Avatar';
+import AvatarGroup from '@mui/material/AvatarGroup';
+import Stack from '@mui/material/Stack';
+
+export default function Spacing() {
+  return (
+    <Stack spacing={4}>
+      <AvatarGroup spacing="medium">
+        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+        <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+      </AvatarGroup>
+      <AvatarGroup spacing="small">
+        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+        <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+      </AvatarGroup>
+      <AvatarGroup spacing={24}>
+        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+        <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+      </AvatarGroup>
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/avatars/Spacing.tsx.preview b/docs/data/material/components/avatars/Spacing.tsx.preview
new file mode 100644
index 00000000000000..557dd187523778
--- /dev/null
+++ b/docs/data/material/components/avatars/Spacing.tsx.preview
@@ -0,0 +1,15 @@
+<AvatarGroup spacing="medium">
+  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+</AvatarGroup>
+<AvatarGroup spacing="small">
+  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+</AvatarGroup>
+<AvatarGroup spacing={24}>
+  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
+</AvatarGroup>
\ No newline at end of file
diff --git a/docs/data/material/components/avatars/avatars.md b/docs/data/material/components/avatars/avatars.md
index 08362acff64506..1901658a04164e 100644
--- a/docs/data/material/components/avatars/avatars.md
+++ b/docs/data/material/components/avatars/avatars.md
@@ -77,6 +77,12 @@ The `renderSurplus` prop is useful when you need to render the surplus based on
 
 {{"demo": "CustomSurplusAvatars.js"}}
 
+### Spacing
+
+You can change the spacing between avatars using the `spacing` prop. You can use one of the presets (`"medium"`, the default, or `"small"`) or set a custom numeric value.
+
+{{"demo": "Spacing.js"}}
+
 ## With badge
 
 {{"demo": "BadgeAvatars.js"}}