diff --git a/docs/pages/api/avatar-group.md b/docs/pages/api/avatar-group.md index 1d6e752f384e45..393a0e92dbd03a 100644 --- a/docs/pages/api/avatar-group.md +++ b/docs/pages/api/avatar-group.md @@ -26,6 +26,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi |:-----|:-----|:--------|:------------| | children | node | | The avatars to stack. | | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| spacing | 'medium'
| 'small'
| number
| 'medium' | Spacing between avatars. | The `ref` is forwarded to the root element. diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts index 2d2e7065d971e1..1a0403bf6a7fa5 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.d.ts @@ -7,8 +7,12 @@ export interface AvatarGroupProps * The avatars to stack. */ children: React.ReactNode; + /** + * Spacing between avatars. + */ + spacing?: 'small' | 'medium' | number; } export type AvatarGroupClassKey = 'root' | 'avatar'; -export default function AvatarGroup(props: AvatarGroupProps): JSX.Element | null; +export default function AvatarGroup(props: AvatarGroupProps): JSX.Element; diff --git a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js index 016441e475b9ed..f598c40fb82653 100644 --- a/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js +++ b/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js @@ -4,6 +4,11 @@ import { isFragment } from 'react-is'; import clsx from 'clsx'; import { withStyles } from '@material-ui/core/styles'; +const SPACINGS = { + small: -16, + medium: null, +}; + export const styles = theme => ({ /* Styles applied to the root element. */ root: { @@ -17,7 +22,7 @@ export const styles = theme => ({ }); const AvatarGroup = React.forwardRef(function AvatarGroup(props, ref) { - const { children: childrenProp, classes, className, ...other } = props; + const { children: childrenProp, classes, className, spacing = 'medium', ...other } = props; const children = React.Children.toArray(childrenProp).filter(child => { if (process.env.NODE_ENV !== 'production') { @@ -41,6 +46,7 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(props, ref) { className: clsx(child.props.className, classes.avatar), style: { zIndex: children.length - index, + marginLeft: spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing, ...child.props.style, }, }); @@ -67,6 +73,10 @@ AvatarGroup.propTypes = { * @ignore */ className: PropTypes.string, + /** + * Spacing between avatars. + */ + spacing: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.number]), }; export default withStyles(styles, { name: 'MuiAvatarGroup' })(AvatarGroup);