rebase

mui · Dec 7, 2019 · 5b3fb6b · 5b3fb6b
1 parent e3f8bf9
commit 5b3fb6b
Show file tree

Hide file tree

Showing 19 changed files with 405 additions and 416 deletions.
diff --git a/docs/src/pages/components/avatars/BadgeAvatars.js b/docs/src/pages/components/avatars/BadgeAvatars.js
@@ -1,16 +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 (
-    <Badge
-      overlap="circle"
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-      badgeContent={1}
-      color="error"
-    >
-      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
-    </Badge>
+    <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>
   );
 }
diff --git a/docs/src/pages/components/avatars/BadgeAvatars.tsx b/docs/src/pages/components/avatars/BadgeAvatars.tsx
@@ -1,16 +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 (
-    <Badge
-      overlap="circle"
-      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-      badgeContent={1}
-      color="error"
-    >
-      <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
-    </Badge>
+    <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>
   );
 }
diff --git a/docs/src/pages/components/avatars/ImageAvatars.js b/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>
   );
 }
diff --git a/docs/src/pages/components/avatars/ImageAvatars.tsx b/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>
   );
 }
diff --git a/docs/src/pages/components/avatars/SizeAvatars.js b/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>
+  );
+}
diff --git a/docs/src/pages/components/avatars/SizeAvatars.tsx b/docs/src/pages/components/avatars/SizeAvatars.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    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>
+  );
+}
diff --git a/docs/src/pages/components/avatars/avatars.md b/docs/src/pages/components/avatars/avatars.md
@@ -19,6 +19,12 @@ Avatars containing simple characters can be created by passing your string as `c
 
 {{"demo": "pages/components/avatars/LetterAvatars.js"}}
 
+## Sizes
+
+You can change the size of the avatar with the `height` and `width` CSS properties.
+
+{{"demo": "pages/components/avatars/SizeAvatars.js"}}
+
 ## Icon avatars
 
 Icon avatars are created by passing an icon as `children`.
@@ -41,12 +47,12 @@ The component fallbacks if there is an error loading the avatar image, in this o
 
 {{"demo": "pages/components/avatars/FallbackAvatars.js"}}
 
-## With badge
-
-{{"demo": "pages/components/avatars/BadgeAvatars.js"}}
-
 ## Grouped
 
 `AvatarGroup` renders its children as a stack.
 
 {{"demo": "pages/components/avatars/GroupAvatars.js"}}
+
+## With badge
+
+{{"demo": "pages/components/avatars/BadgeAvatars.js"}}
diff --git a/docs/src/pages/components/badges/BadgeMax.js b/docs/src/pages/components/badges/BadgeMax.js
@@ -1,26 +1,30 @@
 import React from 'react';
-import Box from '@material-ui/core/Box';
+import { makeStyles } from '@material-ui/core/styles';
 import Badge from '@material-ui/core/Badge';
 import MailIcon from '@material-ui/icons/Mail';
 
+const useStyles = makeStyles(theme => ({
+  root: {
+    '& > *': {
+      margin: theme.spacing(2),
+    },
+  },
+}));
+
 export default function BadgeMax() {
+  const classes = useStyles();
+
   return (
-    <Box display="flex">
-      <Box m={2}>
-        <Badge badgeContent={99} color="primary">
-          <MailIcon />
-        </Badge>
-      </Box>
-      <Box m={2}>
-        <Badge badgeContent={100} color="primary">
-          <MailIcon />
-        </Badge>
-      </Box>
-      <Box m={2}>
-        <Badge badgeContent={1000} max={999} color="primary">
-          <MailIcon />
-        </Badge>
-      </Box>
-    </Box>
+    <div className={classes.root}>
+      <Badge badgeContent={99} color="primary">
+        <MailIcon />
+      </Badge>
+      <Badge badgeContent={100} color="primary">
+        <MailIcon />
+      </Badge>
+      <Badge badgeContent={1000} max={999} color="primary">
+        <MailIcon />
+      </Badge>
+    </div>
   );
 }