[AvatarGroup] Introduce new component (#18707)

docs/pages/api/avatar-group.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
+import markdown from './avatar-group.md';
+
+export default function Page() {
+  return <MarkdownDocs markdown={markdown} />;
+}

docs/pages/api/avatar-group.md

@@ -0,0 +1,55 @@
+---
+filename: /packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js
+---
+
+<!--- This documentation is automatically generated, do not try to edit it. -->
+
+# AvatarGroup API
+
+<p class="description">The API documentation of the AvatarGroup React component. Learn more about the props and the CSS customization points.</p>
+
+## Import
+
+```js
+import AvatarGroup from '@material-ui/lab/AvatarGroup';
+// or
+import { AvatarGroup } from '@material-ui/lab';
+```
+
+You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/).
+
+
+
+## Props
+
+| Name | Type | Default | Description |
+|:-----|:-----|:--------|:------------|
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | The avatars to stack. |
+| <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+
+The `ref` is forwarded to the root element.
+
+Any other props supplied will be provided to the root element (native element).
+
+## CSS
+
+- Style sheet name: `MuiAvatarGroup`.
+- Style sheet details:
+
+| Rule name | Global class | Description |
+|:-----|:-------------|:------------|
+| <span class="prop-name">root</span> | <span class="prop-name">.MuiAvatarGroup-root</span> | Styles applied to the root element.
+| <span class="prop-name">avatar</span> | <span class="prop-name">.MuiAvatarGroup-avatar</span> | Styles applied to the avatar elements.
+
+You can override the style of the component thanks to one of these customization points:
+
+- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes).
+- With a [global class name](/customization/components/#overriding-styles-with-global-class-names).
+- With a theme and an [`overrides` property](/customization/globals/#css).
+
+If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-lab/src/AvatarGroup/AvatarGroup.js) for more detail.
+
+## Demos
+
+- [Avatars](/components/avatars/)
+

docs/pages/api/badge.md

@@ -73,5 +73,6 @@ If that's not sufficient, you can check the [implementation of the component](ht
 
 ## Demos
 
+- [Avatars](/components/avatars/)
 - [Badges](/components/badges/)
 

docs/src/pages/components/avatars/BadgeAvatars.js

@@ -0,0 +1,79 @@
+import React from 'react';
+import Badge from '@material-ui/core/Badge';
+import Avatar from '@material-ui/core/Avatar';
+import { makeStyles, withStyles } from '@material-ui/core/styles';
+
+const StyledBadge = withStyles(theme => ({
+  badge: {
+    backgroundColor: '#44b700',
+    color: '#44b700',
+    boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
+    '&::after': {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      borderRadius: '50%',
+      animation: '$ripple 1.2s infinite ease-in-out',
+      border: '1px solid currentColor',
+      content: '""',
+    },
+  },
+  '@keyframes ripple': {
+    '0%': {
+      transform: 'scale(.8)',
+      opacity: 1,
+    },
+    '100%': {
+      transform: 'scale(2.4)',
+      opacity: 0,
+    },
+  },
+}))(Badge);
+
+const SmallAvatar = withStyles(theme => ({
+  root: {
+    width: 22,
+    height: 22,
+    border: `2px solid ${theme.palette.background.paper}`,
+  },
+}))(Avatar);
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    '& > *': {
+      margin: theme.spacing(1),
+    },
+  },
+}));
+
+export default function BadgeAvatars() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <StyledBadge
+        overlap="circle"
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        variant="dot"
+      >
+        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+      </StyledBadge>
+      <Badge
+        overlap="circle"
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        badgeContent={<SmallAvatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />}
+      >
+        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+      </Badge>
+    </div>
+  );
+}

docs/src/pages/components/avatars/BadgeAvatars.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import Badge from '@material-ui/core/Badge';
+import Avatar from '@material-ui/core/Avatar';
+import { Theme, makeStyles, withStyles, createStyles } from '@material-ui/core/styles';
+
+const StyledBadge = withStyles((theme: Theme) =>
+  createStyles({
+    badge: {
+      backgroundColor: '#44b700',
+      color: '#44b700',
+      boxShadow: `0 0 0 2px ${theme.palette.background.paper}`,
+      '&::after': {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        width: '100%',
+        height: '100%',
+        borderRadius: '50%',
+        animation: '$ripple 1.2s infinite ease-in-out',
+        border: '1px solid currentColor',
+        content: '""',
+      },
+    },
+    '@keyframes ripple': {
+      '0%': {
+        transform: 'scale(.8)',
+        opacity: 1,
+      },
+      '100%': {
+        transform: 'scale(2.4)',
+        opacity: 0,
+      },
+    },
+  }),
+)(Badge);
+
+const SmallAvatar = withStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      width: 22,
+      height: 22,
+      border: `2px solid ${theme.palette.background.paper}`,
+    },
+  }),
+)(Avatar);
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: 'flex',
+      '& > *': {
+        margin: theme.spacing(1),
+      },
+    },
+  }),
+);
+
+export default function BadgeAvatars() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <StyledBadge
+        overlap="circle"
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        variant="dot"
+      >
+        <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+      </StyledBadge>
+      <Badge
+        overlap="circle"
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        badgeContent={<SmallAvatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />}
+      >
+        <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+      </Badge>
+    </div>
+  );
+}

docs/src/pages/components/avatars/GroupAvatars.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Avatar from '@material-ui/core/Avatar';
+import AvatarGroup from '@material-ui/lab/AvatarGroup';
+import Tooltip from '@material-ui/core/Tooltip';
+
+export default function GroupAvatars() {
+  return (
+    <AvatarGroup>
+      <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" />
+      <Tooltip title="Foo • Bar • Baz">
+        <Avatar>+3</Avatar>
+      </Tooltip>
+    </AvatarGroup>
+  );
+}

docs/src/pages/components/avatars/GroupAvatars.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import Avatar from '@material-ui/core/Avatar';
+import AvatarGroup from '@material-ui/lab/AvatarGroup';
+import Tooltip from '@material-ui/core/Tooltip';
+
+export default function GroupAvatars() {
+  return (
+    <AvatarGroup>
+      <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" />
+      <Tooltip title="Foo • Bar • Baz">
+        <Avatar>+3</Avatar>
+      </Tooltip>
+    </AvatarGroup>
+  );
+}

docs/src/pages/components/avatars/IconAvatars.js

@@ -14,7 +14,7 @@ const useStyles = makeStyles(theme => ({
     },
   },
   pink: {
-    color: '#fff',
+    color: theme.palette.getContrastText(pink[500]),
     backgroundColor: pink[500],
   },
   green: {

docs/src/pages/components/avatars/IconAvatars.tsx

@@ -15,7 +15,7 @@ const useStyles = makeStyles((theme: Theme) =>
       },
     },
     pink: {
-      color: '#fff',
+      color: theme.palette.getContrastText(pink[500]),
       backgroundColor: pink[500],
     },
     green: {

docs/src/pages/components/avatars/ImageAvatars.js

@@ -9,10 +9,6 @@ const useStyles = makeStyles(theme => ({
       margin: theme.spacing(1),
     },
   },
-  bigAvatar: {
-    width: 60,
-    height: 60,
-  },
 }));
 
 export default function ImageAvatars() {
@@ -21,7 +17,8 @@ export default function ImageAvatars() {
   return (
     <div className={classes.root}>
       <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
-      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.bigAvatar} />
+      <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+      <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
     </div>
   );
 }

docs/src/pages/components/avatars/ImageAvatars.tsx

@@ -10,10 +10,6 @@ const useStyles = makeStyles((theme: Theme) =>
         margin: theme.spacing(1),
       },
     },
-    bigAvatar: {
-      width: 60,
-      height: 60,
-    },
   }),
 );
 
@@ -23,7 +19,8 @@ export default function ImageAvatars() {
   return (
     <div className={classes.root}>
       <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
-      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.bigAvatar} />
+      <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
+      <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
     </div>
   );
 }

docs/src/pages/components/avatars/LetterAvatars.js

@@ -11,11 +11,11 @@ const useStyles = makeStyles(theme => ({
     },
   },
   orange: {
-    color: '#fff',
+    color: theme.palette.getContrastText(deepOrange[500]),
     backgroundColor: deepOrange[500],
   },
   purple: {
-    color: '#fff',
+    color: theme.palette.getContrastText(deepPurple[500]),
     backgroundColor: deepPurple[500],
   },
 }));

docs/src/pages/components/avatars/LetterAvatars.tsx

@@ -12,11 +12,11 @@ const useStyles = makeStyles((theme: Theme) =>
       },
     },
     orange: {
-      color: '#fff',
+      color: theme.palette.getContrastText(deepOrange[500]),
       backgroundColor: deepOrange[500],
     },
     purple: {
-      color: '#fff',
+      color: theme.palette.getContrastText(deepPurple[500]),
       backgroundColor: deepPurple[500],
     },
   }),

docs/src/pages/components/avatars/SizeAvatars.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    '& > *': {
+      margin: theme.spacing(1),
+    },
+  },
+  small: {
+    width: theme.spacing(3),
+    height: theme.spacing(3),
+  },
+  large: {
+    width: theme.spacing(7),
+    height: theme.spacing(7),
+  },
+}));
+
+export default function ImageAvatars() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.small} />
+      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
+      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.large} />
+    </div>
+  );
+}