[Avatar] Use inner shadow for border

docs/src/app/components/pages/components/Avatar/ExampleSimple.js

@@ -16,12 +16,16 @@ purple500,
 
 const style = {margin: 5};
 
+/**
+ * Examples of `Avatar` using an image, [Font Icon](/#/components/font-icon), [SVG Icon](/#/components/svg-icon)
+ * and "Letter" (string), with and without custom colors at the default size (`40dp`) and an alternate size (`30dp`).
+ */
 const AvatarExampleSimple = () => (
   <List>
     <ListItem
       disabled={true}
       leftAvatar={
-        <Avatar src="images/uxceo-128.jpg" />
+        <Avatar src="images/kerem-128.jpg" />
       }
     >
       Image Avatar
@@ -30,7 +34,7 @@ const AvatarExampleSimple = () => (
       disabled={true}
       leftAvatar={
         <Avatar
-          src="images/uxceo-128.jpg"
+          src="images/kerem-128.jpg"
           size={30}
           style={style}
         />

docs/src/app/components/pages/components/Avatar/Page.js

@@ -10,17 +10,13 @@ import AvatarExampleSimple from './ExampleSimple';
 import avatarExampleSimpleCode from '!raw!./ExampleSimple';
 import avatarCode from '!raw!material-ui/Avatar/Avatar';
 
-const description = 'Examples of `Avatar` using an image, [Font Icon](/#/components/font-icon), ' +
-  '[SVG Icon](/#/components/svg-icon) and "Letter" (string), with and without custom colors.';
-
 const AvatarsPage = () => (
   <div>
     <Title render={(previousTitle) => `Avatar - ${previousTitle}`} />
     <MarkdownElement text={avatarReadmeText} />
     <CodeExample
       code={avatarExampleSimpleCode}
       title="Examples"
-      description={description}
     >
       <AvatarExampleSimple />
     </CodeExample>

src/Avatar/Avatar.js

@@ -5,24 +5,41 @@ function getStyles(props, context) {
     backgroundColor,
     color,
     size,
-    src,
   } = props;
 
   const {avatar} = context.muiTheme;
 
   const styles = {
     root: {
+      position: 'absolute',
       color: color || avatar.color,
       backgroundColor: backgroundColor || avatar.backgroundColor,
       userSelect: 'none',
-      display: 'inline-block',
-      textAlign: 'center',
-      lineHeight: `${size}px`,
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
       fontSize: size / 2,
       borderRadius: '50%',
       height: size,
       width: size,
     },
+    image: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      height: '100%',
+      width: '100%',
+      borderRadius: '50%',
+    },
+    border: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      borderRadius: '50%',
+      boxShadow: `inset 0px 0px 0px 0.5px ${avatar.borderColor}`,
+      height: '100%',
+      width: '100%',
+    },
     icon: {
       color: color || avatar.color,
       width: size * 0.6,
@@ -32,17 +49,6 @@ function getStyles(props, context) {
     },
   };
 
-  if (src && avatar.borderColor) {
-    Object.assign(styles.root, {
-      background: `url(${src})`,
-      backgroundSize: size,
-      backgroundOrigin: 'border-box',
-      border: `solid 1px ${avatar.borderColor}`,
-      height: size - 2,
-      width: size - 2,
-    });
-  }
-
   return styles;
 }
 
@@ -106,11 +112,15 @@ class Avatar extends Component {
 
     if (src) {
       return (
-        <div
-          {...other}
-          style={prepareStyles(Object.assign(styles.root, style))}
-          className={className}
-        />
+        <div style={prepareStyles(Object.assign(styles.root, style))}>
+          <img
+            style={prepareStyles(styles.image)}
+            {...other}
+            src={src}
+            className={className}
+          />
+          <div style={prepareStyles(styles.border)}></div>
+        </div>
       );
     } else {
       return (

src/Avatar/Avatar.spec.js

@@ -36,10 +36,10 @@ describe('<Avatar />', () => {
     );
 
     assert.notOk(!wrapper.contains(testChildren), 'should not contain the children');
-    assert.ok(wrapper.is('div'), 'should be a div');
-    assert.ok(wrapper.is({style: {background: 'url(face.jpg)'}}), 'should set background url');
+    assert.ok(wrapper.is('img'), 'should be an image');
+    assert.ok(wrapper.is({src: 'face.jpg'}), 'should have the src passed into props');
 
     wrapper.setProps({src: 'meow.jpg'});
-    assert.ok(wrapper.is({style: {background: 'url(meow.jpg)'}}), 'should have changed the background url');
+    assert.ok(wrapper.is({src: 'meow.jpg'}), 'should have changed the src');
   });
 });