[AvatarGroup] spacing prop does nothing

[hon2a]

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/cocky-forest-clhrvg

Steps

Attempt to use spacing in AvatarGroup, provided enum (small / medium) or number.

Current behavior

Spacing stays the same regardless of the provided value.

Expected behavior

Provided spacing should get applied.

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.6.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
    Memory: 20.78 GB / 64.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 17.7.1 - ~/.nvm/versions/node/v17.7.1/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v17.7.1/bin/yarn
    npm: 8.5.2 - ~/.nvm/versions/node/v17.7.1/bin/npm
    pnpm: 7.17.0 - ~/.nvm/versions/node/v17.7.1/bin/pnpm
  Managers:
    Homebrew: 4.2.5 - /usr/local/bin/brew
    pip3: 22.0.4 - /usr/local/bin/pip3
    RubyGems: 3.0.3.1 - /usr/bin/gem
  Utilities:
    Make: 3.81 - /usr/bin/make
    GCC: 15.0.0 - /usr/bin/gcc
    Git: 2.39.3 - /usr/bin/git
    Clang: 15.0.0 - /usr/bin/clang
    FFmpeg: 6.1.1 - /usr/local/bin/ffmpeg
    Curl: 8.7.1 - /usr/bin/curl
    OpenSSL: 3.2.0 - /usr/local/bin/openssl
  Servers:
    Apache: 2.4.59 - /usr/sbin/apachectl
  IDEs:
    Vim: 9.0 - /usr/bin/vim
    WebStorm: 2024.2.2
    Xcode: /undefined - /usr/bin/xcodebuild
  Languages:
    Bash: 3.2.57 - /bin/bash
    Java: 17.0.4.1 - /Users/jan.konopasek/.sdkman/candidates/java/current/bin/javac
    Perl: 5.34.1 - /usr/bin/perl
    Python3: 3.9.12 - /usr/local/bin/python3
    Ruby: 2.6.10 - /usr/bin/ruby
  Databases:
    SQLite: 3.43.2 - /usr/bin/sqlite3
  Browsers:
    Chrome: 129.0.6668.101
    Safari: 17.6

Tested in Chrome.

Search keywords: AvatarGroup spacing

[mj12albert]

Looks like it's just a typo in the CSS variable:

diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.js b/packages/mui-material/src/AvatarGroup/AvatarGroup.js
index 7d07c1868d..bdb69662b3 100644
--- a/packages/mui-material/src/AvatarGroup/AvatarGroup.js
+++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.js
@@ -131,7 +131,7 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
     additionalProps: {
       variant,
       style: {
-        '--AvatarRoot-spacing': marginValue ? `${marginValue}px` : undefined,
+        '--AvatarGroup-spacing': marginValue ? `${marginValue}px` : undefined,
         ...other.style,
       },
     },

@hon2a Are you interested in creating a PR?

[hon2a]

Sorry, I don't feel comfortable making a PR without full understanding of the context and I don't have the bandwidth for that right now.

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@hon2a How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[aarongarciah]

After #44202, the bug is still present. #44202 only fixed the spacing for the "surplus" avatar. You can compare the the PR version and v5 by changing adding the spacing prop in the docs demos:

• https://deploy-preview-44202--material-ui.netlify.app/material-ui/react-avatar/#grouped
• https://v5.mui.com/material-ui/react-avatar/#grouped

[aarongarciah]

The root problem: the --AvatarGroup-spacing var is defined in the surplus component when it should be defined at the AvatarGroup level: https://github.com/mui/material-ui/blob/v6.1.5/packages/mui-material/src/AvatarGroup/AvatarGroup.js#L134

The bug was introduced while migrating the AvatarGroup styles to support static extraction: #41485

[aarongarciah]

Here's the fix: #44208

And here's another PR adding a spacing demo for the AvatarGroup component: #44209

[mj12albert]

@aarongarciah thanks for the save 🙏

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@hon2a How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.