From f6a89c1423926c673362fde423ed83e6aff77863 Mon Sep 17 00:00:00 2001 From: Victor Zanivan Monteiro Date: Tue, 19 Mar 2024 23:37:24 -0300 Subject: [PATCH] [material-ui][AvatarGroup] Convert to support CSS extraction (#41485) --- apps/pnpm-lock.yaml | 10 ++-- .../src/AvatarGroup/AvatarGroup.js | 49 +++++++++++-------- 2 files changed, 33 insertions(+), 26 deletions(-) diff --git a/apps/pnpm-lock.yaml b/apps/pnpm-lock.yaml index 0df1319ac41672..ecd3a0782023dc 100644 --- a/apps/pnpm-lock.yaml +++ b/apps/pnpm-lock.yaml @@ -1374,13 +1374,13 @@ importers: version: file:../packages/mui-base/build(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/icons-material': specifier: file:../../packages/mui-icons-material/build - version: file:../packages/mui-icons-material/build(@mui/material@5.15.12)(@types/react@18.2.55)(react@18.2.0) + version: file:../packages/mui-icons-material/build(@mui/material@5.15.13)(@types/react@18.2.55)(react@18.2.0) '@mui/material': specifier: file:../../packages/mui-material/build version: file:../packages/mui-material/build(@emotion/react@11.11.4)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/material-nextjs': specifier: file:../../packages/mui-material-nextjs/build - version: file:../packages/mui-material-nextjs/build(@emotion/cache@11.11.0)(@mui/material@5.15.12)(@types/react@18.2.55)(next@14.1.3)(react@18.2.0) + version: file:../packages/mui-material-nextjs/build(@emotion/cache@11.11.0)(@mui/material@5.15.13)(@types/react@18.2.55)(next@14.1.3)(react@18.2.0) '@mui/system': specifier: file:../../packages/mui-system/build version: file:../packages/mui-system/build(@emotion/react@11.11.4)(@types/react@18.2.55)(react@18.2.0) @@ -1432,7 +1432,7 @@ importers: version: file:../packages/mui-base/build(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) '@mui/icons-material': specifier: file:../../packages/mui-icons-material/build - version: file:../packages/mui-icons-material/build(@mui/material@5.15.12)(@types/react@18.2.55)(react@18.2.0) + version: file:../packages/mui-icons-material/build(@mui/material@5.15.13)(@types/react@18.2.55)(react@18.2.0) '@mui/material': specifier: file:../../packages/mui-material/build version: file:../packages/mui-material/build(@emotion/react@11.11.4)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0) @@ -8991,7 +8991,7 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false - file:../packages/mui-icons-material/build(@mui/material@5.15.12)(@types/react@18.2.55)(react@18.2.0): + file:../packages/mui-icons-material/build(@mui/material@5.15.13)(@types/react@18.2.55)(react@18.2.0): resolution: {directory: ../packages/mui-icons-material/build, type: directory} id: file:../packages/mui-icons-material/build name: '@mui/icons-material' @@ -9010,7 +9010,7 @@ packages: react: 18.2.0 dev: false - file:../packages/mui-material-nextjs/build(@emotion/cache@11.11.0)(@mui/material@5.15.12)(@types/react@18.2.55)(next@14.1.3)(react@18.2.0): + file:../packages/mui-material-nextjs/build(@emotion/cache@11.11.0)(@mui/material@5.15.13)(@types/react@18.2.55)(next@14.1.3)(react@18.2.0): resolution: {directory: ../packages/mui-material-nextjs/build, type: directory} id: file:../packages/mui-material-nextjs/build name: '@mui/material-nextjs' diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.js b/packages/mui-material/src/AvatarGroup/AvatarGroup.js index 84babf704c59e8..1f6221e06a02ab 100644 --- a/packages/mui-material/src/AvatarGroup/AvatarGroup.js +++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.js @@ -5,16 +5,17 @@ import { isFragment } from 'react-is'; import clsx from 'clsx'; import chainPropTypes from '@mui/utils/chainPropTypes'; import composeClasses from '@mui/utils/composeClasses'; -import styled from '../styles/styled'; -import useThemeProps from '../styles/useThemeProps'; +import { styled, createUseThemeProps } from '../zero-styled'; import Avatar, { avatarClasses } from '../Avatar'; import avatarGroupClasses, { getAvatarGroupUtilityClass } from './avatarGroupClasses'; const SPACINGS = { small: -16, - medium: null, + medium: -8, }; +const useThemeProps = createUseThemeProps('MuiAlert'); + const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -33,25 +34,18 @@ const AvatarGroupRoot = styled('div', { [`& .${avatarGroupClasses.avatar}`]: styles.avatar, ...styles.root, }), -})(({ theme, ownerState }) => { - const marginValue = - ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined - ? SPACINGS[ownerState.spacing] - : -ownerState.spacing; - - return { - [`& .${avatarClasses.root}`]: { - border: `2px solid ${(theme.vars || theme).palette.background.default}`, - boxSizing: 'content-box', - marginLeft: marginValue ?? -8, - '&:last-child': { - marginLeft: 0, - }, +})(({ theme }) => ({ + display: 'flex', + flexDirection: 'row-reverse', + [`& .${avatarClasses.root}`]: { + border: `2px solid ${(theme.vars || theme).palette.background.default}`, + boxSizing: 'content-box', + marginLeft: 'var(--AvatarGroup-spacing, -8px)', + '&:last-child': { + marginLeft: 0, }, - display: 'flex', - flexDirection: 'row-reverse', - }; -}); + }, +})); const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) { const props = useThemeProps({ @@ -113,6 +107,11 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) { const additionalAvatarSlotProps = slotProps.additionalAvatar ?? componentsProps.additionalAvatar; + const marginValue = + ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined + ? SPACINGS[ownerState.spacing] + : -ownerState.spacing || -8; + return ( {extraAvatarsElement} @@ -215,6 +218,10 @@ AvatarGroup.propTypes /* remove-proptypes */ = { * @default 'medium' */ spacing: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.number]), + /** + * @ignore + */ + style: PropTypes.object, /** * The system prop that allows defining system overrides as well as additional CSS styles. */