rebase

mui · Dec 7, 2019 · 8a64ad8 · 8a64ad8
1 parent e3f8bf9
commit 8a64ad8
Show file tree

Hide file tree

Showing 22 changed files with 423 additions and 543 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/BadgeAlignment.js b/docs/src/pages/components/badges/BadgeAlignment.js
@@ -7,11 +7,11 @@ import Radio from '@material-ui/core/Radio';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import { makeStyles } from '@material-ui/core/styles';
 import MailIcon from '@material-ui/icons/Mail';
+import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 
 const useStyles = makeStyles(theme => ({
   root: {
-    display: 'flex',
-    flexDirection: 'column',
+    width: '100%',
   },
   formControl: {
     margin: theme.spacing(3),
@@ -38,19 +38,30 @@ export default function BadgeAlignment() {
     setVertical(event.target.value);
   };
 
+  const code = `
+\`\`\`jsx
+<Badge
+  anchorOrigin={{
+    vertical: '${vertical}',
+    horizontal: '${horizontal}',
+  }}
+>
+\`\`\`
+`;
+
   return (
     <div className={classes.root}>
       <div className={classes.row}>
         <FormControl component="fieldset" className={classes.formControl}>
           <FormLabel component="legend">Vertical</FormLabel>
-          <RadioGroup value={vertical} onChange={handleVerticalChange}>
+          <RadioGroup name="vertical" value={vertical} onChange={handleVerticalChange}>
             <FormControlLabel value="top" control={<Radio />} label="Top" />
             <FormControlLabel value="bottom" control={<Radio />} label="Bottom" />
           </RadioGroup>
         </FormControl>
         <FormControl component="fieldset" className={classes.formControl}>
           <FormLabel component="legend">Horizontal</FormLabel>
-          <RadioGroup value={horizontal} onChange={handleHorizontalChange}>
+          <RadioGroup name="horizontal" value={horizontal} onChange={handleHorizontalChange}>
             <FormControlLabel value="right" control={<Radio />} label="Right" />
             <FormControlLabel value="left" control={<Radio />} label="Left" />
           </RadioGroup>
@@ -115,6 +126,7 @@ export default function BadgeAlignment() {
           <MailIcon />
         </Badge>
       </div>
+      <MarkdownElement text={code} />
     </div>
   );
 }