fix(Comment): spread image props on CommentAvatar

src/elements/Image/Image.js

@@ -9,6 +9,7 @@ import {
   customPropTypes,
   getElementType,
   getUnhandledProps,
+  htmlImageProps,
   partitionHTMLProps,
   SUI,
   useKeyOnly,
@@ -20,8 +21,6 @@ import Dimmer from '../../modules/Dimmer'
 import Label from '../Label/Label'
 import ImageGroup from './ImageGroup'
 
-const imageProps = ['alt', 'height', 'src', 'srcSet', 'width']
-
 /**
  * An image is a graphic representation of something.
  * @see Icon
@@ -70,7 +69,7 @@ function Image(props) {
     className,
   )
   const rest = getUnhandledProps(Image, props)
-  const [imgTagProps, rootProps] = partitionHTMLProps(rest, { htmlProps: imageProps })
+  const [imgTagProps, rootProps] = partitionHTMLProps(rest, { htmlProps: htmlImageProps })
   const ElementType = getElementType(Image, props, () => {
     if (
       !_.isNil(dimmer) ||

src/lib/htmlPropsUtils.js

@@ -80,6 +80,8 @@ export const htmlInputEvents = [
 
 export const htmlInputProps = [...htmlInputAttrs, ...htmlInputEvents]
 
+export const htmlImageProps = ['alt', 'height', 'src', 'srcSet', 'width']
+
 /**
  * Returns an array of objects consisting of: props of html input element and rest.
  * @param {object} props A ReactElement props object

src/lib/index.js

@@ -25,6 +25,7 @@ export {
   htmlInputAttrs,
   htmlInputEvents,
   htmlInputProps,
+  htmlImageProps,
   partitionHTMLProps,
 } from './htmlPropsUtils'
 

src/views/Comment/CommentAvatar.js

@@ -2,20 +2,29 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { createHTMLImage, customPropTypes, getElementType, getUnhandledProps } from '../../lib'
+import {
+  createHTMLImage,
+  customPropTypes,
+  getElementType,
+  getUnhandledProps,
+  htmlImageProps,
+  partitionHTMLProps,
+} from '../../lib'
 
 /**
  * A comment can contain an image or avatar.
  */
 function CommentAvatar(props) {
   const { className, src } = props
+
   const classes = cx('avatar', className)
   const rest = getUnhandledProps(CommentAvatar, props)
+  const [imageProps, rootProps] = partitionHTMLProps(rest, { htmlProps: htmlImageProps })
   const ElementType = getElementType(CommentAvatar, props)
 
   return (
-    <ElementType {...rest} className={classes}>
-      {createHTMLImage(src, { autoGenerateKey: false })}
+    <ElementType {...rootProps} className={classes}>
+      {createHTMLImage(src, { autoGenerateKey: false, defaultProps: imageProps })}
     </ElementType>
   )
 }

test/specs/elements/Image/Image-test.js

@@ -3,7 +3,7 @@ import React from 'react'
 
 import Image from 'src/elements/Image/Image'
 import ImageGroup from 'src/elements/Image/ImageGroup'
-import { SUI } from 'src/lib'
+import { htmlImageProps, SUI } from 'src/lib'
 import Dimmer from 'src/modules/Dimmer/Dimmer'
 import * as common from 'test/specs/commonTests'
 
@@ -56,7 +56,7 @@ describe('Image', () => {
   })
 
   describe('image props', () => {
-    _.forEach(['alt', 'height', 'src', 'srcSet', 'width'], (propName) => {
+    _.forEach(htmlImageProps, (propName) => {
       it(`keeps "${propName}" on root element by default`, () => {
         const wrapper = shallow(<Image {...{ [propName]: 'foo' }} />)
 

test/specs/views/Comment/CommentAvatar-test.js

@@ -1,17 +1,33 @@
 import faker from 'faker'
+import _ from 'lodash'
 import React from 'react'
 
+import { htmlImageProps } from 'src/lib'
 import CommentAvatar from 'src/views/Comment/CommentAvatar'
 import * as common from 'test/specs/commonTests'
 
 describe('CommentAvatar', () => {
   common.isConformant(CommentAvatar)
 
   describe('src', () => {
-    it('renders img', () => {
-      const url = faker.image.imageUrl()
-      shallow(<CommentAvatar src={url} />)
-        .should.contain(<img src={url} />)
+    it('passes to the "img" element', () => {
+      const src = faker.image.imageUrl()
+      const image = shallow(<CommentAvatar src={src} />).find('img')
+
+      image.should.have.prop('src', src)
+    })
+  })
+
+  describe('image props', () => {
+    _.forEach(htmlImageProps, (propName) => {
+      it(`passes "${propName}" to the "img" element`, () => {
+        const propValue = faker.lorem.word()
+        const image = shallow(<CommentAvatar src='foo.jpg' {...{ [propName]: propValue }} />).find(
+          'img',
+        )
+
+        image.should.have.prop(propName, propValue)
+      })
     })
   })
 })