ResizeGroup should apply className from props

common/changes/@uifabric/experiments/staylo8-3447ResizeGroupPropClassName_2017-11-22-18-30.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Apply props.className in ResizeGroup. Add snapshot for ResizeGroup. Pass className from experiments CommandBarTests. Update experiments CommandBar snapshot",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "staylo@microsoft.com"
+}

common/changes/office-ui-fabric-react/staylo8-3447ResizeGroupPropClassName_2017-11-22-18-30.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Apply props.className in ResizeGroup. Add snapshot for ResizeGroup. Pass className from experiments CommandBarTests. Update experiments CommandBar snapshot",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "staylo@microsoft.com"
+}

packages/experiments/src/components/CommandBar/CommandBar.test.tsx

@@ -24,6 +24,7 @@ describe('CommandBar', () => {
           { key: '1', name: 'asdf' },
           { key: '2', name: 'asdf' }
         ] }
+        className={ 'TestClassName' }
       />
     ).toJSON()).toMatchSnapshot();
   });

packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`CommandBar renders commands correctly 1`] = `
 <div
-  className="ms-ResizeGroup"
+  className="ms-ResizeGroup TestClassName"
 >
   <div
     className=""

packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.test.tsx

@@ -4,6 +4,7 @@ import { shallow } from 'enzyme';
 import { ResizeGroup, IResizeGroupState, getNextResizeGroupStateProvider, getMeasurementCache } from './ResizeGroup';
 import { IResizeGroupProps } from './ResizeGroup.types';
 import * as sinon from 'sinon';
+import * as renderer from 'react-test-renderer';
 
 interface ITestScalingData {
   scalingIndex: number;
@@ -24,6 +25,20 @@ function getRequiredResizeGroupProps() {
 }
 
 describe('ResizeGroup', () => {
+  it('renders the ResizeGroup correctly', () => {
+    const initialData = { content: 5 };
+    const renderedDataId = 'onRenderDataId';
+    const onRenderData = (data: any) => <div id={ renderedDataId }> Rendered data: { data.content }</div >;
+    expect(renderer.create(
+      <ResizeGroup
+        data={ initialData }
+        onReduceData={ onReduceScalingData }
+        onRenderData={ onRenderData }
+        className={ 'TestClassName' }
+      />
+    ).toJSON()).toMatchSnapshot();
+  });
+
   it('renders the result of onRenderData', () => {
     const initialData = { content: 5 };
     const renderedDataId = 'onRenderDataId';

packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.tsx

@@ -287,11 +287,11 @@ export class ResizeGroup extends BaseComponent<IResizeGroupProps, IResizeGroupSt
   }
 
   public render() {
-    const { onRenderData } = this.props;
+    const { onRenderData, className } = this.props;
     const { dataToMeasure, renderedData } = this.state;
 
     return (
-      <div className={ css('ms-ResizeGroup') } ref={ this._resolveRef('_root') }>
+      <div className={ css('ms-ResizeGroup', className) } ref={ this._resolveRef('_root') }>
         { this._nextResizeGroupStateProvider.shouldRenderDataToMeasureInHiddenDiv(dataToMeasure) && (
           <div className={ css(styles.measured) } ref={ this._resolveRef('_measured') }>
             { onRenderData(dataToMeasure) }

packages/office-ui-fabric-react/src/components/ResizeGroup/__snapshots__/ResizeGroup.test.tsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ResizeGroup renders the ResizeGroup correctly 1`] = `
+<div
+  className="ms-ResizeGroup TestClassName"
+>
+  <div
+    className=""
+  >
+    <div
+      id="onRenderDataId"
+    >
+       Rendered data: 
+      5
+    </div>
+  </div>
+</div>
+`;