Fixes #585

components/avatar/Avatar.js

@@ -5,10 +5,11 @@ import { AVATAR } from '../identifiers.js';
 import InjectFontIcon from '../font_icon/FontIcon.js';
 
 const factory = (FontIcon) => {
-  const Avatar = ({children, className, icon, image, theme, title, ...other}) => (
+  const Avatar = ({children, className, cover, icon, image, theme, title, ...other}) => (
     <div data-react-toolbox='avatar' className={classnames(theme.avatar, className)} {...other}>
       {children}
-      {typeof image === 'string' ? <img className={theme.image} src={image} title={title} /> : image}
+      {cover && typeof image === 'string' && <span alt={title} className={theme.image} style={{backgroundImage: `url(${image})`}} />}
+      {!cover && (typeof image === 'string' ? <img alt={title} className={theme.image} src={image} title={title} /> : image)}
       {typeof icon === 'string' ? <FontIcon className={theme.letter} value={icon} /> : icon}
       {title ? <span className={theme.letter}>{title[0]}</span> : null}
     </div>
@@ -17,6 +18,7 @@ const factory = (FontIcon) => {
   Avatar.propTypes = {
     children: PropTypes.node,
     className: PropTypes.string,
+    cover: PropTypes.bool,
     icon: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     image: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
     theme: PropTypes.shape({
@@ -27,6 +29,10 @@ const factory = (FontIcon) => {
     title: PropTypes.string
   };
 
+  Avatar.defaultProps = {
+    cover: false
+  };
+
   return Avatar;
 };
 

components/avatar/readme.md

@@ -18,6 +18,7 @@ const AvatarTest = () => (
     <Avatar icon={<GithubIcon />} />
     <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
     <Avatar title="Javier" image="https://placeimg.com/80/80/animals" />
+    <Avatar image="http://www.thewrap.com/wp-content/uploads/2015/08/margot-robbie-harley-quinn_main.jpg" cover />
     <Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
   </div>
 );
@@ -31,6 +32,7 @@ If you want to provide a theme via context, the component key is `RTAvatar`.
 |:-----|:-----|:-----|:-----|
 | `children`    | `Node`                  |             | Children for the avatar. You can pass an SVG for a custom icon or, for example, an image.|
 | `className`   | `String`                | `''`        | Set a class to style the Component.|
+| `cover`       | `Boolean`               | `''`        | Set to true if your image is not squared so it will be used as a cover for the element.|
 | `icon`        | `String` or `Element`   |             | A key to identify an Icon from Material Design Icons or a custom Icon Element.|
 | `image`       | `String` or `Element`   |             | An image source or an image element. |
 | `title`       | `String`                | `''`        | A title for the image. If no image is provided, the first letter will be displayed as the avatar. |

spec/components/avatar.js

@@ -9,6 +9,8 @@ const AvatarTest = () => (
     <Avatar style={{backgroundColor: 'deepskyblue'}} icon="folder" />
     <Avatar icon={<GithubIcon />}/>
     <Avatar><img src="https://placeimg.com/80/80/animals"/></Avatar>
+    <Avatar image="https://placeimg.com/80/80/animals" />
+    <Avatar image="http://www.thewrap.com/wp-content/uploads/2015/08/margot-robbie-harley-quinn_main.jpg" cover />
     <Avatar title="Javier"/>
     <Avatar style={{backgroundColor: 'yellowgreen'}}><GithubIcon /></Avatar>
   </section>