From 025f9ada4d2bff5d9684bd472c393033b69f4cb2 Mon Sep 17 00:00:00 2001 From: zanivan Date: Wed, 13 Mar 2024 16:00:10 -0300 Subject: [PATCH 1/5] Remove ownerState from AvatarGroup --- apps/pnpm-lock.yaml | 10 ++-- .../src/AvatarGroup/AvatarGroup.js | 52 ++++++++++++------- 2 files changed, 38 insertions(+), 24 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..978efcccbd1401 100644 --- a/packages/mui-material/src/AvatarGroup/AvatarGroup.js +++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.js @@ -5,11 +5,12 @@ 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 useThemeProps = createUseThemeProps('MuiAlert'); + const SPACINGS = { small: -16, medium: null, @@ -33,25 +34,38 @@ 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', + '&:not(:first-of-type)': { + marginLeft: -8, + }, + '&:last-child': { + marginLeft: 0, + }, + }, + variants: [ + { + props: { spacing: 'small' }, + style: { + [`& .${avatarClasses.root}:not(:first-of-type)`]: { + marginLeft: `${SPACINGS.small}px`, + }, }, }, - display: 'flex', - flexDirection: 'row-reverse', - }; -}); + { + props: { spacing: 'medium' }, + style: { + [`& .${avatarClasses.root}:not(:first-of-type)`]: { + marginLeft: SPACINGS.medium ? `${SPACINGS.medium}px` : 0, + }, + }, + }, + ], +})); const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) { const props = useThemeProps({ From 461e359c48d073c758d0f755263e814d4eaefa9a Mon Sep 17 00:00:00 2001 From: zanivan Date: Wed, 13 Mar 2024 16:55:08 -0300 Subject: [PATCH 2/5] Fix argos --- .../src/AvatarGroup/AvatarGroup.js | 19 ++++--------------- 1 file changed, 4 insertions(+), 15 deletions(-) diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.js b/packages/mui-material/src/AvatarGroup/AvatarGroup.js index 978efcccbd1401..46c3b597a61e29 100644 --- a/packages/mui-material/src/AvatarGroup/AvatarGroup.js +++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.js @@ -11,11 +11,6 @@ import avatarGroupClasses, { getAvatarGroupUtilityClass } from './avatarGroupCla const useThemeProps = createUseThemeProps('MuiAlert'); -const SPACINGS = { - small: -16, - medium: null, -}; - const useUtilityClasses = (ownerState) => { const { classes } = ownerState; @@ -40,27 +35,21 @@ const AvatarGroupRoot = styled('div', { [`& .${avatarClasses.root}`]: { border: `2px solid ${(theme.vars || theme).palette.background.default}`, boxSizing: 'content-box', - '&:not(:first-of-type)': { - marginLeft: -8, - }, - '&:last-child': { - marginLeft: 0, - }, }, variants: [ { props: { spacing: 'small' }, style: { - [`& .${avatarClasses.root}:not(:first-of-type)`]: { - marginLeft: `${SPACINGS.small}px`, + [`& .${avatarClasses.root}:not(:last-of-type)`]: { + marginLeft: -16, }, }, }, { props: { spacing: 'medium' }, style: { - [`& .${avatarClasses.root}:not(:first-of-type)`]: { - marginLeft: SPACINGS.medium ? `${SPACINGS.medium}px` : 0, + [`& .${avatarClasses.root}:not(:last-of-type)`]: { + marginLeft: -8, }, }, }, From 27b0fa6cb559a0ea43b45647d02d5f482f06899b Mon Sep 17 00:00:00 2001 From: zanivan Date: Thu, 14 Mar 2024 14:17:55 -0300 Subject: [PATCH 3/5] Add Jun's feedback --- .../src/AvatarGroup/AvatarGroup.js | 28 ++++++++++++++++--- 1 file changed, 24 insertions(+), 4 deletions(-) diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.js b/packages/mui-material/src/AvatarGroup/AvatarGroup.js index 46c3b597a61e29..15c282e9857b32 100644 --- a/packages/mui-material/src/AvatarGroup/AvatarGroup.js +++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.js @@ -9,6 +9,11 @@ import { styled, createUseThemeProps } from '../zero-styled'; import Avatar, { avatarClasses } from '../Avatar'; import avatarGroupClasses, { getAvatarGroupUtilityClass } from './avatarGroupClasses'; +const SPACINGS = { + small: -16, + medium: -8, +}; + const useThemeProps = createUseThemeProps('MuiAlert'); const useUtilityClasses = (ownerState) => { @@ -40,16 +45,22 @@ const AvatarGroupRoot = styled('div', { { props: { spacing: 'small' }, style: { - [`& .${avatarClasses.root}:not(:last-of-type)`]: { - marginLeft: -16, + [`& .${avatarClasses.root}:not(:last-child)`]: { + marginLeft: 'var(--AvatarGroup-spacing, -16px)', + }, + [`& .${avatarClasses.root}:last-child`]: { + marginLeft: 0, }, }, }, { props: { spacing: 'medium' }, style: { - [`& .${avatarClasses.root}:not(:last-of-type)`]: { - marginLeft: -8, + [`& .${avatarClasses.root}:not(:last-child)`]: { + marginLeft: 'var(--AvatarGroup-spacing, -8px)', + }, + [`& .${avatarClasses.root}:last-child`]: { + marginLeft: 0, }, }, }, @@ -116,6 +127,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} From 2607f067bd13808203bbd8e0e52a60d7b8236b27 Mon Sep 17 00:00:00 2001 From: zanivan Date: Thu, 14 Mar 2024 15:58:51 -0300 Subject: [PATCH 4/5] Run pnpm proptypes --- packages/mui-material/src/AvatarGroup/AvatarGroup.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.js b/packages/mui-material/src/AvatarGroup/AvatarGroup.js index 15c282e9857b32..c9ebf9b852ffba 100644 --- a/packages/mui-material/src/AvatarGroup/AvatarGroup.js +++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.js @@ -238,6 +238,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. */ From 8368ec3ed839f68d84a1054e60d8d8237936329d Mon Sep 17 00:00:00 2001 From: zanivan Date: Fri, 15 Mar 2024 08:51:51 -0300 Subject: [PATCH 5/5] Remove variants --- .../src/AvatarGroup/AvatarGroup.js | 28 +++---------------- 1 file changed, 4 insertions(+), 24 deletions(-) diff --git a/packages/mui-material/src/AvatarGroup/AvatarGroup.js b/packages/mui-material/src/AvatarGroup/AvatarGroup.js index c9ebf9b852ffba..1f6221e06a02ab 100644 --- a/packages/mui-material/src/AvatarGroup/AvatarGroup.js +++ b/packages/mui-material/src/AvatarGroup/AvatarGroup.js @@ -40,31 +40,11 @@ const AvatarGroupRoot = styled('div', { [`& .${avatarClasses.root}`]: { border: `2px solid ${(theme.vars || theme).palette.background.default}`, boxSizing: 'content-box', - }, - variants: [ - { - props: { spacing: 'small' }, - style: { - [`& .${avatarClasses.root}:not(:last-child)`]: { - marginLeft: 'var(--AvatarGroup-spacing, -16px)', - }, - [`& .${avatarClasses.root}:last-child`]: { - marginLeft: 0, - }, - }, - }, - { - props: { spacing: 'medium' }, - style: { - [`& .${avatarClasses.root}:not(:last-child)`]: { - marginLeft: 'var(--AvatarGroup-spacing, -8px)', - }, - [`& .${avatarClasses.root}:last-child`]: { - marginLeft: 0, - }, - }, + marginLeft: 'var(--AvatarGroup-spacing, -8px)', + '&:last-child': { + marginLeft: 0, }, - ], + }, })); const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {