fix(media): InnerClassName passes through to the media-body

Added spec tests for flag and media for className, innerClassName, id,
and style passthrough.
Added innerClassName to scss documentation.

[Finishes #98913330]

spec/pivotal-ui-react/media/media_spec.js

@@ -124,16 +124,37 @@ describe('Media', function() {
  });
  });
 
+ describe('when custom attributes are set on media', function() {
+ beforeEach(function() {
+ var image = (<img src="https://placehold.it/20x20" />);
+ React.render((<Media leftImage={image} stackSize="medium" innerClassName="inner-test-class" className="test-class" id="test-id" style={{opacity: 1}}>fop</Media>), root);
+ });
+
+ it('the class, id, and style are passed through', function() {
+ expect('.media').toHaveClass('test-class');
+ expect('.media-body').toHaveClass('inner-test-class');
+ expect('.media').toHaveAttr('id', 'test-id');
+ expect('.media').toHaveCss({opacity: '1'});
+ });
+ });
+
  describe('Flag', function() {
  beforeEach(function() {
  var image = (<img src="https://placehold.it/20x20"/>);
- React.render((<Flag leftImage={image} rightImage={image}>fop</Flag>), root);
+ React.render((<Flag leftImage={image} rightImage={image} innerClassName="inner-test-class" className="test-class" id="test-id" style={{opacity: 1}}>fop</Flag>), root);
  });
 
  it('adds the class media-middle to the media-body, media-left, and media-right', function() {
  expect('.media-body').toHaveClass('media-middle');
  expect('.media-left').toHaveClass('media-middle');
  expect('.media-right').toHaveClass('media-middle');
  });
+
+ it('the class, id, and style are passed through', function() {
+ expect('.media').toHaveClass('test-class');
+ expect('.media-body').toHaveClass('inner-test-class');
+ expect('.media').toHaveAttr('id', 'test-id');
+ expect('.media').toHaveCss({opacity: '1'});
+ });
  });
 });

src/pivotal-ui-react/media/media.js

@@ -56,10 +56,10 @@ var Media = React.createClass({
  },
 
  render() {
- var {className, leftImage, leftMediaSpacing, rightImage, rightMediaSpacing, stackSize, vAlign, children, ...other} = this.props;
+ var {className, innerClassName, leftImage, leftMediaSpacing, rightImage, rightMediaSpacing, stackSize, vAlign, children, ...other} = this.props;
 
  var classes = classnames('media', stackSize && `media-stackable-${shortSizes[stackSize]}`, className);
- var bodyClasses = classnames('media-body', vAlign && `media-${vAlign}`);
+ var bodyClasses = classnames('media-body', vAlign && `media-${vAlign}`, innerClassName);
 
  var leftMedia = leftImage ?
  <MediaObject horizontalAlignment="left" {...{vAlign, leftMediaSpacing}}>{leftImage}</MediaObject> :

src/pivotal-ui/components/media/media.scss

@@ -282,7 +282,8 @@ var mediaBasicLinkedImage = <UI.Image src='https://placehold.it/50x50' href="http
 
 ```react_example_table
 <UI.Media
- leftImage={mediaBasicImage}>
+ leftImage={mediaBasicImage}
+ innerClassName='my-media-body'>
  left media
 </UI.Media>