diff --git a/common/changes/visualTests_2017-04-27-23-02.json b/common/changes/visualTests_2017-04-27-23-02.json
new file mode 100644
index 00000000000000..f3b4e9935d5ef7
--- /dev/null
+++ b/common/changes/visualTests_2017-04-27-23-02.json
@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Facepile: Added `className` prop.",
+      "type": "minor"
+    }
+  ],
+  "email": "r33najain@gmail.com"
+}
diff --git a/ghdocs/VISUALTESTS.md b/ghdocs/VISUALTESTS.md
index 8a20d78c407d55..5d3d398af3081e 100644
--- a/ghdocs/VISUALTESTS.md
+++ b/ghdocs/VISUALTESTS.md
@@ -11,58 +11,70 @@ In order to have PhantomCSS run you must have python version 2.6 or higher insta
 To run tests:
 
 1. Navigate to packages/office-ui-fabric-react in command prompt.
-2. gulp visualtest --production
+2. gulp visualtest --production                          // To generate and comapre the baseline
+3. gulp visualtest --production --match <ComponentName>  // To generate baseline for one component
+4. gulp visualtest --debug                               // To debug components at localhost
 
 To create new tests:
 1. Add a file to the component you want to test named [ComponentName]Page.visualtest.tsx. This is where you will put all of the code for rendering the components you want to test. For example:
 
-ButtonPage.visualtest.tsx
+CheckBoxPage.visualtest.tsx
 ```typescript
-import { DefaultButton, IconButton } from './index';
-import { IconName } from '../../Icon';
+import { Checkbox } from './index';
 /* tslint:disable:no-unused-variable */
 import * as React from 'react';
 /* tslint:enable:no-unused-variable */
-export default class ButtonVPage extends React.Component<any, any> {
+export default class CheckboxVPage extends React.Component<any, any> {
   public render() {
-    let iconName: IconName = 'Snow';
-    return <div >
-      <DefaultButton id='DefaultButton'> I'm a button! </DefaultButton>
-      <div style={ { backgroundColor: 'white' } }>
-        <IconButton id={ 'IconButton' } icon={ iconName } />
-      </div>
+    return <div style={ { backgroundColor: 'white' } } >
+      <Checkbox className='Checkbox' label='Check Box'
+        defaultChecked={ true } />
+      <Checkbox className='CheckboxDisabled' label='Check Box Disabled'
+        defaultChecked={ true }
+        disabled={ true } />
     </div>;
   }
 }
 ```
-2. Create a file to run the test, named [ComponentName].visualtest.ts . In this file you will need to import Casper and a IPhantomCss. Additionally you will need to declare 2 vars, phantomcss and casper (see below). Then you can use them to perform various functions. The proper start url to give casper is baseUrl + [ComponentName] (For example ` baseUrl + 'button' `). The Most important one is phantomcss.screenshot which actually performs the screenshot tests.
+2. Create a file to run the test, named [ComponentName].visualtest.ts . In this file you will need to import Casper and a IPhantomCss. Additionally you will need to declare 2 vars, phantomcss and casper (see below). Then you can use them to perform various functions. The proper start url to give casper is baseUrl + [ComponentName] (For example ` baseUrl + 'checkbox' `). The Most important one is phantomcss.screenshot which actually performs the screenshot tests.
 
 For Example:
-Button.visualtest.ts
+Checkbox.visualtest.ts
 ```typescript
-import { Casper, IPhantomCSS } from '../../visualtest/PhantomCssInterface';
-import { baseUrl } from '../../common/VisualTest'
-declare var phantomcss: IPhantomCSS;
+import { Casper } from '../../visualtest/PhantomCssInterface';
+import { baseUrl } from '../../common/VisualTest';
+import { defaultScreenshot, mouseMoveScreenshot, mouseDownScreenshot, mouseClickScreenshot } from '../../visualtest/RunVisualTest';
+import { IRunVisualTest } from '../../visualtest/IRunVisualTest';
+
 declare var casper: Casper;
-/* tslint:disable:no-function-expression */
+
+let componentIds: IRunVisualTest[] = [];  // Array of components
+
+componentIds.push({
+  selector: '.' + 'ms-Checkbox-input',// Selector for event
+  fileName: 'checkbox',// baseline file name
+  imageSelector: '.' + 'Checkbox',// Image selector
+  commands: [defaultScreenshot, mouseClickScreenshot, mouseMoveScreenshot, mouseDownScreenshot] // Events for screen shots refer RunVisualTest.ts
+});
+
+componentIds.push({
+  selector: '.' + 'CheckboxDisabled',
+  fileName: 'checkboxDisabled',
+  commands: [defaultScreenshot]
+});
+
 casper.
-  start(baseUrl + 'button').
-  then(function () {
-    phantomcss.screenshot('#DefaultButton', 'Button_not_pressed');
-  }).then(function () {
-    this.mouse.move('#DefaultButton');
-    phantomcss.screenshot('#DefaultButton', 'Button_Hovered');
-  }).then(function () {
-    this.mouse.down('#DefaultButton');
-    phantomcss.screenshot('#DefaultButton', 'Button_pressed');
-  }).then(function () {
-    phantomcss.screenshot('#IconButton', 'Icon_Button');
-  })
-casper.run(function () { casper.test.done(); });
-/* tslint:enable:no-function-expression */
-```
-3. Add you're test component to VisualTestRootState. You'll just need to add the componentPath.
+  start(baseUrl + 'checkbox').
+  then(() => {
+    testRunner();
+  });
 
+casper.run(() => { casper.test.done(); });
+```
+3. Add you're test component to VisualTestState.ts You'll just need to add the componentPath.
+```typescript
+'./Checkbox/CheckboxPage.visualtest',
+```
 ## Viewing Tests
 To see your test results navigate to the visualtests folder in packages/office-ui-fabric-react. In the base folder you can see current screenshots. In the Results you can see the results of the tests that were run, including failures and the diff screenshot (screenshot being compared to base).
 
diff --git a/packages/office-ui-fabric-react/gulpfile.js b/packages/office-ui-fabric-react/gulpfile.js
index 9ffbd16f853c30..06381fdc9d771d 100644
--- a/packages/office-ui-fabric-react/gulpfile.js
+++ b/packages/office-ui-fabric-react/gulpfile.js
@@ -30,8 +30,10 @@ let visualTest = build.subTask('visualtest', (gulp, options, done) => {
     directoryListing: false
   });
   if (!options.args['debug']) {
+    let matchFile = options.args['match'] || '';
+
     let casperJs = require('gulp-phantomcss');
-    gulp.src(['lib/**/*.visualtest.js'])
+    gulp.src(['lib/**/*' + matchFile + '.visualtest.js'])
       .pipe(casperJs(
         {
           screenshots: 'visualtests/baseline',
diff --git a/packages/office-ui-fabric-react/src/VisualTestState.ts b/packages/office-ui-fabric-react/src/VisualTestState.ts
index 6bce8b42b7a6ab..9dde96a3b28710 100644
--- a/packages/office-ui-fabric-react/src/VisualTestState.ts
+++ b/packages/office-ui-fabric-react/src/VisualTestState.ts
@@ -4,14 +4,18 @@ export interface IVisualTestState {
 
 export const VisualTestState: IVisualTestState = {
   componentPath: [
-    './Button/CommandButtonPage.visualtest',
-    './Button/CompoundButtonPage.visualtest',
-    './Button/ContextualButtonPage.visualtest',
-    './Button/DefaultButtonPage.visualtest',
-    './Button/PrimaryButtonPage.visualtest',
+    './Breadcrumb/BreadcrumbPage.visualtest',
+    './Button/ButtonPage.visualtest',
     './Checkbox/CheckboxPage.visualtest',
     './ChoiceGroup/ChoiceGroupPage.visualtest',
-    './ContextualMenu/ContextualMenuPage.visualtest'
-
+    './CommandBar/CommandBarPage.visualtest',
+    './ContextualMenu/ContextualMenuPage.visualtest',
+    './DetailsList/DetailsListPage.visualtest',
+    './Label/LabelPage.visualtest',
+    './DocumentCard/DocumentCardPage.visualtest',
+    './Dialog/DialogPage.visualtest',
+    './Facepile/FacepilePage.visualtest',
+    './Toggle/TogglePage.visualtest',
+    './Tooltip/TooltipPage.visualtest'
   ]
-};
+};
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.visualtest.ts b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.visualtest.ts
new file mode 100644
index 00000000000000..741cc29625ecf3
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.visualtest.ts
@@ -0,0 +1,29 @@
+import { Casper } from '../../visualtest/PhantomCssInterface';
+import { baseUrl } from '../../common/VisualTest';
+import { defaultScreenshot, mouseMoveScreenshot, mouseDownScreenshot, mouseClickScreenshot, testRunner } from '../../visualtest/RunVisualTest';
+import { IRunVisualTest } from '../../visualtest/IRunVisualTest';
+
+declare var casper: Casper;
+let componentIds: IRunVisualTest[] = [];
+
+componentIds.push({
+  selector: '.' + 'Breadcrumb',
+  fileName: 'breadcrumb',
+  imageSelector: '.' + 'Breadcrumb',
+
+  commands: [defaultScreenshot]
+});
+componentIds.push({
+  selector: '.' + 'ms-Breadcrumb-listItem',
+  fileName: 'breadcrumb',
+  imageSelector: '.' + 'Breadcrumb',
+  commands: [mouseMoveScreenshot, mouseDownScreenshot, mouseClickScreenshot]
+});
+
+casper.
+  start(baseUrl + 'breadcrumb').
+  then(() => {
+    testRunner(componentIds);
+  });
+
+casper.run(() => { casper.test.done(); });
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/BreadcrumbPage.visualtest.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/BreadcrumbPage.visualtest.tsx
new file mode 100644
index 00000000000000..87155b8a21ee2e
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/BreadcrumbPage.visualtest.tsx
@@ -0,0 +1,23 @@
+import { Breadcrumb } from './index';
+
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+export default class BreadcrumbVPage extends React.Component<any, any> {
+  public render() {
+    return <div style={ { width: '600px' } }>
+      <Breadcrumb
+        className='Breadcrumb'
+
+        items={ [
+          { text: 'Files', 'key': 'Files' },
+          { text: 'This is folder 1', 'key': 'f1', onClick: () => { return; } },
+          { text: 'This is folder 2', 'key': 'f2', onClick: () => { return; } },
+          { text: 'This is folder 3', 'key': 'f3', onClick: () => { return; } },
+          { text: 'This is folder 4', 'key': 'f4', onClick: () => { return; } },
+          { text: 'This is folder 5', 'key': 'f5', onClick: () => { return; } },
+        ] }
+        maxDisplayedItems={ 3 } />
+    </div>;
+  }
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Button/Button.visualtest.ts b/packages/office-ui-fabric-react/src/components/Button/Button.visualtest.ts
new file mode 100644
index 00000000000000..fe743e132604a6
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Button/Button.visualtest.ts
@@ -0,0 +1,79 @@
+import { Casper } from '../../visualtest/PhantomCssInterface';
+import { baseUrl } from '../../common/VisualTest';
+import {
+  defaultScreenshot, mouseMoveScreenshot, mouseDownScreenshot,
+  mouseClickScreenshot, testRunner, mouseSingleClickScreenshot
+} from '../../visualtest/RunVisualTest';
+import { IRunVisualTest } from '../../visualtest/IRunVisualTest';
+declare var casper: Casper;
+let componentIds: IRunVisualTest[] = [];
+
+componentIds.push({
+  selector: '#' + 'DefaultButton',
+  fileName: 'buttonDefault',
+  commands: [defaultScreenshot, mouseClickScreenshot, mouseDownScreenshot, mouseMoveScreenshot]
+});
+
+componentIds.push({
+  selector: '#' + 'DefaultButtonDisabled',
+  fileName: 'buttonDefaultDisabled',
+  commands: [defaultScreenshot]
+});
+componentIds.push({
+  selector: '#' + 'PrimaryButton',
+  fileName: 'buttonPrimary',
+  commands: [defaultScreenshot, mouseClickScreenshot, mouseDownScreenshot, mouseMoveScreenshot]
+
+});
+componentIds.push({
+  selector: '#' + 'PrimaryButtonDisabled',
+  fileName: 'buttonPrimaryDisabled',
+  commands: [defaultScreenshot]
+});
+
+componentIds.push({
+  selector: '#' + 'CommandButton',
+  fileName: 'buttonCommand',
+  commands: [defaultScreenshot, mouseDownScreenshot, mouseMoveScreenshot, mouseClickScreenshot]
+});
+
+componentIds.push({
+  selector: '#' + 'CommandButtonDisabled',
+  fileName: 'buttonCommandDisabled',
+  commands: [defaultScreenshot]
+});
+
+componentIds.push({
+  selector: '#' + 'CompoundButton',
+  fileName: 'buttonCompound',
+  commands: [defaultScreenshot, mouseClickScreenshot, mouseDownScreenshot, mouseMoveScreenshot]
+});
+componentIds.push({
+  selector: '#' + 'CompoundButtonDisabled',
+  fileName: 'buttonCompoundDisabled',
+  commands: [defaultScreenshot]
+});
+componentIds.push({
+  selector: '#' + 'ContextualButton',
+  fileName: 'buttonContextual',
+  commands: [defaultScreenshot, mouseClickScreenshot, mouseDownScreenshot, mouseMoveScreenshot]
+});
+
+componentIds.push({
+  selector: '#' + 'ContextualButton',
+  fileName: 'buttonContextual',
+  commands: [mouseSingleClickScreenshot],
+  childParams: {
+    selector: '.' + 'ms-ContextualMenu-list',
+    fileName: 'buttonContextualMenu',
+    commands: [defaultScreenshot]
+  }
+});
+
+casper.
+  start(baseUrl + 'button').
+  then(() => {
+    testRunner(componentIds);
+  });
+
+casper.run(() => { casper.test.done(); });
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Button/ButtonPage.visualtest.tsx b/packages/office-ui-fabric-react/src/components/Button/ButtonPage.visualtest.tsx
new file mode 100644
index 00000000000000..ab04e11e6db0e5
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Button/ButtonPage.visualtest.tsx
@@ -0,0 +1,73 @@
+import { DefaultButton, IconButton, CommandButton, CompoundButton, PrimaryButton } from './index';
+import { IconName } from '../../Icon';
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+export default class ButtonVPage extends React.Component<any, any> {
+  public render() {
+    let iconName: IconName = 'Snow';
+    return <div>
+      <div><label> Default Button:   </label>
+        <DefaultButton id='DefaultButton' icon='Add' text='Default Button' /></div>
+      <div><label> Default Button Disabled:   </label>&nbsp;
+        <DefaultButton id='DefaultButtonDisabled' disabled={ true } icon='Add' text='Default Button' /></div>&nbsp;
+      <div style={ { backgroundColor: 'white' } }>
+        <IconButton id={ 'IconButton' } iconProps={ { iconName } } />
+      </div>&nbsp;
+      <div style={ { backgroundColor: 'white' } }>
+        <CommandButton id='CommandButton'
+          icon='AddFriend'
+          text='Command Button' />
+      </div>&nbsp;
+      <div style={ { backgroundColor: 'white' } }>
+        <CommandButton id='CommandButtonDisabled' icon='AddFriend'
+          disabled={ true }
+          text='Command Button' />
+      </div >&nbsp;
+      <div>
+        <CompoundButton id='CompoundButton'
+          description='You can create a new account here.'
+          text='Compound Button' />
+      </div>&nbsp;
+      <div>
+        <CompoundButton id='CompoundButtonDisabled'
+          disabled={ true }
+          description='You can create a new account here.'
+          text='Compound Button' />
+      </div>&nbsp;
+      <div>
+        <PrimaryButton id='PrimaryButton' icon='Add' text='Primary Button' />
+      </div >&nbsp;
+      <div>
+        <PrimaryButton id='PrimaryButtonDisabled' disabled={ true } icon='Add' text='Primary Button' />
+      </div >&nbsp;
+
+      <div>
+        <DefaultButton
+          id='ContextualButton'
+          disabled={ false }
+          icon='Add'
+          text='New'
+          menuProps={ {
+            className: 'ContextualButtonMenu',
+            id: 'ContextualButtonMenu',
+            items: [
+              {
+                key: 'emailMessage',
+                name: 'Email message',
+                icon: 'Mail'
+              },
+              {
+                key: 'calendarEvent',
+                name: 'Calendar event',
+                icon: 'Calendar'
+              }
+            ]
+          }
+          }
+        >
+        </DefaultButton>
+      </div >
+    </div>;
+  }
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Button/CommandButton.visualtest.ts b/packages/office-ui-fabric-react/src/components/Button/CommandButton.visualtest.ts
deleted file mode 100644
index 54b8ad3e67b5d2..00000000000000
--- a/packages/office-ui-fabric-react/src/components/Button/CommandButton.visualtest.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Casper, IPhantomCSS } from '../../visualtest/PhantomCssInterface';
-import { baseUrl } from '../../common/VisualTest';
-declare var phantomcss: IPhantomCSS;
-declare var casper: Casper;
-/* tslint:disable:no-function-expression */
-casper.
-  start(baseUrl + 'commandButton').
-  then(function () {
-    phantomcss.screenshot('#CommandButton', 'CommandButton_not_pressed');
-  }).then(function () {
-    this.mouse.move('#CommandButton');
-    phantomcss.screenshot('#CommandButton', 'CommandButton_hovered');
-  }).then(function () {
-    this.mouse.down('#CommandButton');
-    phantomcss.screenshot('#CommandButton', 'CommandButton_pressed');
-  }).then(function () {
-    phantomcss.screenshot('#CommandButtonDisabled', 'CommandButtonDisabled_not_pressed');
-  }).then(function () {
-    this.mouse.move('#CommandButtonDisabled');
-    phantomcss.screenshot('#CommandButtonDisabled', 'CommandButtonDisabled_hovered');
-  }).then(function () {
-    this.mouse.down('#CommandButtonDisabled');
-    phantomcss.screenshot('#CommandButtonDisabled', 'CommandButtonDisabled_pressed');
-  });
-casper.run(function () { casper.test.done(); });
-/* tslint:enable:no-function-expression */
diff --git a/packages/office-ui-fabric-react/src/components/Button/CommandButtonPage.visualtest.tsx b/packages/office-ui-fabric-react/src/components/Button/CommandButtonPage.visualtest.tsx
deleted file mode 100644
index cfec295e7490a0..00000000000000
--- a/packages/office-ui-fabric-react/src/components/Button/CommandButtonPage.visualtest.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { CommandButton } from './index';
-/* tslint:disable:no-unused-variable */
-import * as React from 'react';
-/* tslint:enable:no-unused-variable */
-export default class CommandButtonVPage extends React.Component<any, any> {
-  public render() {
-    return <div>
-      <div style={ { backgroundColor: 'white' } }>
-        <CommandButton id='CommandButton'
-          icon='AddFriend'
-          text='Command Button' />
-      </div>
-      <div style={ { backgroundColor: 'white' } }>
-        <CommandButton id='CommandButtonDisabled' icon='AddFriend'
-          disabled={ true }
-          text='Command Button' />
-      </div >
-    </div>;
-  }
-}
diff --git a/packages/office-ui-fabric-react/src/components/Button/CompoundButton.visualtest.ts b/packages/office-ui-fabric-react/src/components/Button/CompoundButton.visualtest.ts
deleted file mode 100644
index 3ba25f1e362ee4..00000000000000
--- a/packages/office-ui-fabric-react/src/components/Button/CompoundButton.visualtest.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Casper, IPhantomCSS } from '../../visualtest/PhantomCssInterface';
-import { baseUrl } from '../../common/VisualTest';
-declare var phantomcss: IPhantomCSS;
-declare var casper: Casper;
-/* tslint:disable:no-function-expression */
-casper.
-  start(baseUrl + 'compoundButton').
-  then(function () {
-    phantomcss.screenshot('#CompoundButton', 'CompoundButton_not_pressed');
-  }).then(function () {
-    this.mouse.move('#CompoundButton');
-    phantomcss.screenshot('#CompoundButton', 'CompoundButton_hovered');
-  }).then(function () {
-    this.mouse.down('#CompoundButton');
-    phantomcss.screenshot('#CompoundButton', 'CompoundButton_pressed');
-  }).
-  then(function () {
-    phantomcss.screenshot('#CompoundButtonDisabled', 'CompoundButtonDisabled_not_pressed');
-  }).then(function () {
-    this.mouse.move('#CompoundButtonDisabled');
-    phantomcss.screenshot('#CompoundButtonDisabled', 'CompoundButtonDisabled_hovered');
-  }).then(function () {
-    this.mouse.down('#CompoundButtonDisabled');
-    phantomcss.screenshot('#CompoundButtonDisabled', 'CompoundButtonDisabled_pressed');
-  });
-casper.run(function () { casper.test.done(); });
-/* tslint:enable:no-function-expression */
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Button/CompoundButtonPage.visualtest.tsx b/packages/office-ui-fabric-react/src/components/Button/CompoundButtonPage.visualtest.tsx
deleted file mode 100644
index 406bc0b0f63ee4..00000000000000
--- a/packages/office-ui-fabric-react/src/components/Button/CompoundButtonPage.visualtest.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import { CompoundButton } from './index';
-
-/* tslint:disable:no-unused-variable */
-import * as React from 'react';
-/* tslint:enable:no-unused-variable */
-export default class CompoundButtonVPage extends React.Component<any, any> {
-  public render() {
-    return <div >
-      <div>
-        <CompoundButton id='CompoundButton'
-          description='You can create a new account here.'
-          text='Compound Button' />
-      </div>
-      <div>
-        <CompoundButton id='CompoundButtonDisabled'
-          disabled={ true }
-          description='You can create a new account here.'
-          text='Compound Button' />
-      </div>
-    </div >;
-  }
-}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Button/ContextualButton.visualtest.ts b/packages/office-ui-fabric-react/src/components/Button/ContextualButton.visualtest.ts
deleted file mode 100644
index ad7c458e68aff4..00000000000000
--- a/packages/office-ui-fabric-react/src/components/Button/ContextualButton.visualtest.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Casper, IPhantomCSS } from '../../visualtest/PhantomCssInterface';
-import { baseUrl } from '../../common/VisualTest';
-declare var phantomcss: IPhantomCSS;
-declare var casper: Casper;
-/* tslint:disable:no-function-expression */
-casper.
-  start(baseUrl + 'contextualButton').
-  then(function () {
-    phantomcss.screenshot('#ContextualButton', 'ContextualButton_not_pressed');
-  }).then(function () {
-    this.mouse.move('#ContextualButton');
-    phantomcss.screenshot('#ContextualButton', 'ContextualButton_hovered');
-  }).then(function () {
-    this.mouse.down('#ContextualButton');
-    casper.wait(2000);
-    phantomcss.screenshot('#ContextualButton', 'ContextualButton_pressed');
-    phantomcss.screenshot('.ContextualButtonMenu', 'ContextualButtonMenu_pressed');
-  }).
-  then(function () {
-    phantomcss.screenshot('#ContextualButtonDisabled', 'ContextualButtonDisabled_not_pressed');
-  }).then(function () {
-    this.mouse.move('#ContextualButtonDisabled');
-    phantomcss.screenshot('#ContextualButtonDisabled', 'ContextualButtonDisabled_hovered');
-  }).then(function () {
-    this.mouse.down('#ContextualButtonDisabled');
-    phantomcss.screenshot('#ContextualButtonDisabled', 'ContextualButtonDisabled_pressed');
-  });
-casper.run(function () { casper.test.done(); });
-/* tslint:enable:no-function-expression */
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Button/ContextualButtonPage.visualtest.tsx b/packages/office-ui-fabric-react/src/components/Button/ContextualButtonPage.visualtest.tsx
deleted file mode 100644
index daed8bf403eeba..00000000000000
--- a/packages/office-ui-fabric-react/src/components/Button/ContextualButtonPage.visualtest.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { DefaultButton } from './index';
-
-/* tslint:disable:no-unused-variable */
-import * as React from 'react';
-/* tslint:enable:no-unused-variable */
-export default class CommandButtonVPage extends React.Component<any, any> {
-  public render() {
-    return <div>
-      <div>
-        <DefaultButton
-          id='ContextualButton'
-          disabled={ false }
-          icon='Add'
-          text='New'
-          menuProps={ {
-            className: 'ContextualButtonMenu',
-            id: 'ContextualButtonMenu',
-            items: [
-              {
-                key: 'emailMessage',
-                name: 'Email message',
-                icon: 'Mail'
-              },
-              {
-                key: 'calendarEvent',
-                name: 'Calendar event',
-                icon: 'Calendar'
-              }
-            ]
-          }
-          }
-        >
-        </DefaultButton>
-      </div >
-      <div>
-        <DefaultButton
-          id='ContextualButtonDisabled'
-          icon='Add'
-          text='New'
-          disabled={ true }
-        />
-      </div >
-    </div>;
-  }
-}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Button/DefaultButton.visualtest.ts b/packages/office-ui-fabric-react/src/components/Button/DefaultButton.visualtest.ts
deleted file mode 100644
index f047223a8ed54e..00000000000000
--- a/packages/office-ui-fabric-react/src/components/Button/DefaultButton.visualtest.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Casper, IPhantomCSS } from '../../visualtest/PhantomCssInterface';
-import { baseUrl } from '../../common/VisualTest';
-declare var phantomcss: IPhantomCSS;
-declare var casper: Casper;
-/* tslint:disable:no-function-expression */
-casper.
-  start(baseUrl + 'defaultButton').
-  then(function () {
-    phantomcss.screenshot('#DefaultButton', 'DefaultButton_not_pressed');
-  }).then(function () {
-    this.mouse.move('#DefaultButton');
-    phantomcss.screenshot('#DefaultButton', 'DefaultButton_hovered');
-  }).then(function () {
-    this.mouse.down('#DefaultButton');
-    phantomcss.screenshot('#DefaultButton', 'DefaultButton_pressed');
-  }).
-  then(function () {
-    phantomcss.screenshot('#DefaultButtonDisabled', 'DefaultButtonDisabled_not_pressed');
-  }).then(function () {
-    this.mouse.move('#DefaultButtonDisabled');
-    phantomcss.screenshot('#DefaultButtonDisabled', 'DefaultButtonDisabled_hovered');
-  }).then(function () {
-    this.mouse.down('#DefaultButtonDisabled');
-    phantomcss.screenshot('#DefaultButtonDisabled', 'DefaultButtonDisabled_pressed');
-  }).then(function () {
-    phantomcss.screenshot('#IconButton', 'Icon_Button');
-  });
-casper.run(function () { casper.test.done(); });
-/* tslint:enable:no-function-expression */
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Button/DefaultButtonPage.visualtest.tsx b/packages/office-ui-fabric-react/src/components/Button/DefaultButtonPage.visualtest.tsx
deleted file mode 100644
index 532d510b395073..00000000000000
--- a/packages/office-ui-fabric-react/src/components/Button/DefaultButtonPage.visualtest.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import { DefaultButton, IconButton } from './index';
-import { IconName } from '../../Icon';
-/* tslint:disable:no-unused-variable */
-import * as React from 'react';
-/* tslint:enable:no-unused-variable */
-export default class DefaultButtonVPage extends React.Component<any, any> {
-  public render() {
-    let iconName: IconName = 'Snow';
-    return <div>
-      <div><label> Default Button:   </label>
-        <DefaultButton id='DefaultButton' icon='Add' text='Default Button' /></div>
-      <div><label> Default Button Disabled:   </label>
-        <DefaultButton id='DefaultButtonDisabled' disabled={ true } icon='Add' text='Default Button' /></div>
-      <div style={ { backgroundColor: 'white' } }>
-        <IconButton id={ 'IconButton' } iconProps={ { iconName } } />
-      </div>
-    </div>;
-  }
-}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Button/PrimaryButton.visualtest.ts b/packages/office-ui-fabric-react/src/components/Button/PrimaryButton.visualtest.ts
deleted file mode 100644
index d13b0b3c337962..00000000000000
--- a/packages/office-ui-fabric-react/src/components/Button/PrimaryButton.visualtest.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Casper, IPhantomCSS } from '../../visualtest/PhantomCssInterface';
-import { baseUrl } from '../../common/VisualTest';
-declare var phantomcss: IPhantomCSS;
-declare var casper: Casper;
-/* tslint:disable:no-function-expression */
-casper.
-  start(baseUrl + 'primaryButton').
-  then(function () {
-    phantomcss.screenshot('#PrimaryButton', 'PrimaryButton_not_pressed');
-  }).then(function () {
-    this.mouse.move('#PrimaryButton');
-    phantomcss.screenshot('#PrimaryButton', 'PrimaryButton_hovered');
-  }).then(function () {
-    this.mouse.down('#PrimaryButton');
-    phantomcss.screenshot('#PrimaryButton', 'PrimaryButton_pressed');
-  }).then(function () {
-    phantomcss.screenshot('#PrimaryButtonDisabled', 'PrimaryButtonDisabled_not_pressed');
-  }).then(function () {
-    this.mouse.move('#PrimaryButtonDisabled');
-    phantomcss.screenshot('#PrimaryButtonDisabled', 'PrimaryButtonDisabled_hovered');
-  }).then(function () {
-    this.mouse.down('#PrimaryButtonDisabled');
-    phantomcss.screenshot('#PrimaryButtonDisabled', 'PrimaryButtonDisabled_pressed');
-  });
-casper.run(function () { casper.test.done(); });
-/* tslint:enable:no-function-expression */
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Button/PrimaryButtonPage.visualtest.tsx b/packages/office-ui-fabric-react/src/components/Button/PrimaryButtonPage.visualtest.tsx
deleted file mode 100644
index 3b8724a7174b61..00000000000000
--- a/packages/office-ui-fabric-react/src/components/Button/PrimaryButtonPage.visualtest.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { PrimaryButton } from './index';
-/* tslint:disable:no-unused-variable */
-import * as React from 'react';
-/* tslint:enable:no-unused-variable */
-export default class PrimaryButtonVPage extends React.Component<any, any> {
-  public render() {
-    return <div>
-      <div>
-        <PrimaryButton id='PrimaryButton' icon='Add' text='Primary Button' />
-      </div >
-      <div>
-        <PrimaryButton id='PrimaryButtonDisabled' disabled={ true } icon='Add' text='Primary Button' />
-      </div >
-    </div>;
-  }
-}
diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.visualtest.ts b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.visualtest.ts
index 11177b3095d408..72e84f8b6c43bf 100644
--- a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.visualtest.ts
+++ b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.visualtest.ts
@@ -1,27 +1,29 @@
-import { Casper, IPhantomCSS } from '../../visualtest/PhantomCssInterface';
+import { Casper } from '../../visualtest/PhantomCssInterface';
 import { baseUrl } from '../../common/VisualTest';
-declare var phantomcss: IPhantomCSS;
+import { defaultScreenshot, mouseMoveScreenshot, mouseDownScreenshot, mouseClickScreenshot, testRunner } from '../../visualtest/RunVisualTest';
+import { IRunVisualTest } from '../../visualtest/IRunVisualTest';
+
 declare var casper: Casper;
-/* tslint:disable:no-function-expression */
+
+let componentIds: IRunVisualTest[] = [];
+
+componentIds.push({
+  selector: '.' + 'ms-Checkbox-input',
+  fileName: 'checkbox',
+  imageSelector: '.' + 'Checkbox',
+  commands: [defaultScreenshot, mouseClickScreenshot, mouseMoveScreenshot, mouseDownScreenshot]
+});
+
+componentIds.push({
+  selector: '.' + 'CheckboxDisabled',
+  fileName: 'checkboxDisabled',
+  commands: [defaultScreenshot]
+});
+
 casper.
   start(baseUrl + 'checkbox').
-  then(function () {
-    phantomcss.screenshot('.Checkbox', 'Checkbox_not_pressed');
-  }).then(function () {
-    this.mouse.move('.Checkbox');
-    phantomcss.screenshot('.Checkbox', 'Checkbox_hovered');
-  }).then(function () {
-    this.mouse.down('.Checkbox');
-    phantomcss.screenshot('.Checkbox', 'Checkbox_pressed');
-  }).
-  then(function () {
-    phantomcss.screenshot('.CheckboxDisabled', 'CheckboxDisabled_not_pressed');
-  }).then(function () {
-    this.mouse.move('.CheckboxDisabled');
-    phantomcss.screenshot('.CheckboxDisabled', 'CheckboxDisabled_hovered');
-  }).then(function () {
-    this.mouse.down('.CheckboxDisabled');
-    phantomcss.screenshot('.CheckboxDisabled', 'CheckboxDisabled_pressed');
+  then(() => {
+    testRunner(componentIds);
   });
-casper.run(function () { casper.test.done(); });
-/* tslint:enable:no-function-expression */
\ No newline at end of file
+
+casper.run(() => { casper.test.done(); });
diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.visualtest.ts b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.visualtest.ts
index 7526aaebf04732..68ded3efff7411 100644
--- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.visualtest.ts
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.visualtest.ts
@@ -1,35 +1,37 @@
-import { Casper, IPhantomCSS } from '../../visualtest/PhantomCssInterface';
+import { Casper } from '../../visualtest/PhantomCssInterface';
 import { baseUrl } from '../../common/VisualTest';
-declare var phantomcss: IPhantomCSS;
+import { defaultScreenshot, mouseMoveScreenshot, mouseDownScreenshot, mouseClickScreenshot, testRunner } from '../../visualtest/RunVisualTest';
+import { IRunVisualTest } from '../../visualtest/IRunVisualTest';
+
 declare var casper: Casper;
-/* tslint:disable:no-function-expression */
+
+let componentIds: IRunVisualTest[] = [];
+
+componentIds.push({
+  selector: '.' + 'ms-ChoiceField-field',
+  fileName: 'choiceGroup',
+  imageSelector: '.' + 'ChoiceGroup',
+  commands: [defaultScreenshot, mouseMoveScreenshot, mouseDownScreenshot, mouseClickScreenshot]
+});
+
+componentIds.push({
+  selector: '.' + 'ms-ChoiceField-field',
+  fileName: 'choiceGroupDisabled',
+  imageSelector: '.' + 'ChoiceGroup',
+  commands: [defaultScreenshot]
+});
+
+componentIds.push({
+  selector: '.' + 'ms-ChoiceField',
+  fileName: 'choiceGroupIcon',
+  imageSelector: '.' + 'ChoiceGroupIcon',
+  commands: [defaultScreenshot, mouseMoveScreenshot, mouseDownScreenshot, mouseClickScreenshot]
+});
+
 casper.
   start(baseUrl + 'choiceGroup').
-  then(function () {
-    phantomcss.screenshot('.ChoiceGroup', 'ChoiceGroup_not_pressed');
-  }).then(function () {
-    this.mouse.move('.ChoiceGroup');
-    phantomcss.screenshot('.ChoiceGroup', 'ChoiceGroup_hovered');
-  }).then(function () {
-    this.mouse.down('.ChoiceGroup');
-    phantomcss.screenshot('.ChoiceGroup', 'ChoiceGroup_pressed');
-  }).
-  then(function () {
-    phantomcss.screenshot('.ChoiceGroupIcon', 'ChoiceGroupIcon_not_pressed');
-  }).then(function () {
-    this.mouse.move('.ChoiceGroupIcon');
-    phantomcss.screenshot('.ChoiceGroupIcon', 'ChoiceGroupIcon_hovered');
-  }).then(function () {
-    this.mouse.down('.ChoiceGroupIcon');
-    phantomcss.screenshot('.ChoiceGroupIcon', 'ChoiceGroupIcon_pressed');
-  }).then(function () {
-    phantomcss.screenshot('.ChoiceGroupDisabled', 'ChoiceGroupDisabled_not_pressed');
-  }).then(function () {
-    this.mouse.move('.ChoiceGroupDisabled');
-    phantomcss.screenshot('.ChoiceGroupDisabled', 'ChoiceGroupDisabled_hovered');
-  }).then(function () {
-    this.mouse.down('.ChoiceGroupDisabled');
-    phantomcss.screenshot('.ChoiceGroupDisabled', 'ChoiceGroupDisabled_pressed');
+  then(() => {
+    testRunner(componentIds);
   });
-casper.run(function () { casper.test.done(); });
-/* tslint:enable:no-function-expression */
\ No newline at end of file
+
+casper.run(() => { casper.test.done(); });
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.visualtest.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.visualtest.tsx
index b5beb69ac4fdbc..db3a7f83ab99c8 100644
--- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.visualtest.tsx
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.visualtest.tsx
@@ -8,7 +8,7 @@ export default class ChoiceGroupVPage extends React.Component<any, any> {
       <div style={ { backgroundColor: 'white' } }>
         <ChoiceGroup label='Choice Group'
           className='ChoiceGroup'
-          defaultSelectedKey='bar'
+          defaultSelectedKey='pie'
           options={
             [{
               key: 'bar',
@@ -17,14 +17,13 @@ export default class ChoiceGroupVPage extends React.Component<any, any> {
             }, {
               key: 'pie',
               text: 'Pie chart'
-            }
-            ]
+            }]
           } />
-      </div>
+      </div>&nbsp;
       <div style={ { backgroundColor: 'white' } }>
         <ChoiceGroup label='Choice Group Icon'
           className='ChoiceGroupIcon'
-          defaultSelectedKey='day'
+          defaultSelectedKey='week'
           options={
             [{
               key: 'day',
@@ -37,11 +36,11 @@ export default class ChoiceGroupVPage extends React.Component<any, any> {
               text: 'Week'
             }]
           } />
-      </div>
+      </div>&nbsp;
       <div style={ { backgroundColor: 'white' } }>
         <ChoiceGroup label='Choice Group Disabled'
           className='ChoiceGroupDisabled'
-          defaultSelectedKey='bar'
+          defaultSelectedKey='pie'
           disabled={ true }
           options={
             [{
@@ -51,10 +50,9 @@ export default class ChoiceGroupVPage extends React.Component<any, any> {
             }, {
               key: 'pie',
               text: 'Pie chart'
-            }
-            ]
+            }]
           } />
-      </div>
+      </div>&nbsp;
     </div>;
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.visualtest.ts b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.visualtest.ts
new file mode 100644
index 00000000000000..617816b20dc0e8
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.visualtest.ts
@@ -0,0 +1,37 @@
+import { Casper } from '../../visualtest/PhantomCssInterface';
+import { baseUrl } from '../../common/VisualTest';
+import {
+  defaultScreenshot, mouseMoveScreenshot, mouseDownScreenshot,
+  mouseClickScreenshot, mouseSingleClickScreenshot, testRunner
+} from '../../visualtest/RunVisualTest';
+import { IRunVisualTest } from '../../visualtest/IRunVisualTest';
+declare var casper: Casper;
+let componentIds: IRunVisualTest[] = [];
+
+componentIds.push({
+  selector: '.' + 'ms-CommandBarItem-link',
+  imageSelector: '.' + 'CommandBar',
+  fileName: 'commandBar',
+  commands: [defaultScreenshot, mouseMoveScreenshot, mouseDownScreenshot, mouseClickScreenshot]
+});
+
+componentIds.push({
+  selector: '.' + 'ms-CommandBarItem-link',
+  imageSelector: '.' + 'CommandBar',
+  fileName: 'commandBarItem',
+  commands: [mouseSingleClickScreenshot],
+  childParams: {
+    selector: '.' + 'ms-ContextualMenu-list',
+    imageSelector: '.' + 'ms-ContextualMenu-Callout',
+    fileName: 'commandBarItem',
+    commands: [defaultScreenshot],
+  }
+});
+
+casper.
+  start(baseUrl + 'commandBar').
+  then(() => {
+    testRunner(componentIds);
+  });
+
+casper.run(() => { casper.test.done(); });
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBarPage.visualtest.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBarPage.visualtest.tsx
new file mode 100644
index 00000000000000..ded60b395750ac
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBarPage.visualtest.tsx
@@ -0,0 +1,38 @@
+import { CommandBar } from './index';
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+export default class CommandBarVPage extends React.Component<any, any> {
+  public render() {
+    return <div style={ { width: '600px' } }>
+      <CommandBar
+        className='CommandBar'
+        items={
+          [
+            {
+              key: 'new',
+              name: 'New',
+              icon: 'Add',
+              onClick: () => { return; },
+              items: [
+                {
+                  key: 'emailMessage',
+                  name: 'Email message',
+                  icon: 'Mail'
+                },
+                {
+                  key: 'calendarEvent',
+                  name: 'Calendar event',
+                  icon: 'Calendar'
+                }
+              ]
+            },
+            {
+              key: 'upload',
+              name: 'Upload',
+              icon: 'Upload'
+            }] }
+      />
+    </div>;
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.visualtest.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.visualtest.ts
index f867dabbacbaed..4aea5d7f0e6c41 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.visualtest.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.visualtest.ts
@@ -1,18 +1,27 @@
-import { Casper, IPhantomCSS } from '../../visualtest/PhantomCssInterface';
+import { Casper} from '../../visualtest/PhantomCssInterface';
 import { baseUrl } from '../../common/VisualTest';
-declare var phantomcss: IPhantomCSS;
+import {
+  defaultScreenshot, mouseMoveScreenshot, mouseDownScreenshot,
+  mouseClickScreenshot, testRunner
+} from '../../visualtest/RunVisualTest';
+import { IRunVisualTest } from '../../visualtest/IRunVisualTest';
+
 declare var casper: Casper;
-/* tslint:disable:no-function-expression */
+
+let componentIds: IRunVisualTest[] = [];
+
+componentIds.push({
+  selector: '.' + 'ms-ContextualMenu-itemText',
+  imageSelector: '#' + 'ContextualMenu',
+  fileName: 'contextualMenu',
+  commands: [defaultScreenshot, mouseDownScreenshot, mouseMoveScreenshot, mouseClickScreenshot]
+
+});
+
 casper.
   start(baseUrl + 'contextualMenu').
-  then(function () {
-    phantomcss.screenshot('#ContextualMenu', 'ContextualMenu_not_pressed');
-  }).then(function () {
-    this.mouse.move('#ContextualMenu');
-    phantomcss.screenshot('#ContextualMenu', 'ContextualMenu_hovered');
-  }).then(function () {
-    this.mouse.down('#ContextualMenu');
-    phantomcss.screenshot('#ContextualMenu', 'ContextualMenu_pressed');
+  then(() => {
+    testRunner(componentIds);
   });
-casper.run(function () { casper.test.done(); });
-/* tslint:enable:no-function-expression */
\ No newline at end of file
+
+casper.run(() => { casper.test.done(); });
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.visualtest.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.visualtest.ts
new file mode 100644
index 00000000000000..ec9d53c3819897
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.visualtest.ts
@@ -0,0 +1,27 @@
+import { Casper} from '../../visualtest/PhantomCssInterface';
+import { baseUrl } from '../../common/VisualTest';
+import {
+  defaultScreenshot, mouseMoveScreenshot, mouseDownScreenshot,
+  mouseClickScreenshot, testRunner
+} from '../../visualtest/RunVisualTest';
+import { IRunVisualTest } from '../../visualtest/IRunVisualTest';
+
+declare var casper: Casper;
+
+let componentIds: IRunVisualTest[] = [];
+
+componentIds.push({
+  selector: '.' + 'ms-DetailsRow',
+  imageSelector: '.' + 'DetailsList',
+  fileName: 'detailsList',
+  commands: [defaultScreenshot, mouseDownScreenshot, mouseMoveScreenshot, mouseClickScreenshot]
+
+});
+
+casper.
+  start(baseUrl + 'detailsList').
+  then(() => {
+    testRunner(componentIds);
+  });
+
+casper.run(() => { casper.test.done(); });
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsListPage.visualtest.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsListPage.visualtest.tsx
new file mode 100644
index 00000000000000..9d7cb19867977e
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsListPage.visualtest.tsx
@@ -0,0 +1,24 @@
+import { DetailsList } from './index';
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+export default class DetailsListVPage extends React.Component<any, any> {
+
+  public render() {
+    return <div style={ { width: '600px' } }>
+      <DetailsList
+        className='DetailsList'
+        items={ [{
+          key: 'score',
+          name: 'Score',
+          fieldName: 'score'
+        },
+        {
+          key: 'name',
+          name: 'Name',
+          fieldName: 'Name'
+        }] }
+      />
+    </div>;
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.visualtest.ts b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.visualtest.ts
new file mode 100644
index 00000000000000..06212f70ff9598
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.visualtest.ts
@@ -0,0 +1,21 @@
+import { Casper} from '../../visualtest/PhantomCssInterface';
+import { baseUrl } from '../../common/VisualTest';
+import { defaultScreenshot, mouseMoveScreenshot, mouseDownScreenshot, mouseClickScreenshot, testRunner } from '../../visualtest/RunVisualTest';
+import { IRunVisualTest } from '../../visualtest/IRunVisualTest';
+declare var casper: Casper;
+
+let componentIds: IRunVisualTest[] = [];
+
+componentIds.push({
+  selector: '.' + 'ms-Dialog-main',
+  fileName: 'dialog',
+  commands: [defaultScreenshot, mouseClickScreenshot, mouseDownScreenshot, mouseMoveScreenshot]
+});
+
+casper.
+  start(baseUrl + 'dialog').
+  then(() => {
+    testRunner(componentIds);
+  });
+
+casper.run(() => { casper.test.done(); });
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/DialogPage.visualtest.tsx b/packages/office-ui-fabric-react/src/components/Dialog/DialogPage.visualtest.tsx
new file mode 100644
index 00000000000000..2a9a22152d0a5b
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Dialog/DialogPage.visualtest.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Dialog } from './Dialog';
+import { DialogFooter } from './DialogFooter';
+import { Button } from './../Button/index';
+
+export default class DialogVPage extends React.Component<any, any> {
+  public render() {
+    return <div>
+      <Dialog
+        isOpen={ true }
+        className='Dialog'
+        title='All emails together'
+        subText='Your Inbox has changed.'
+        isBlocking={ false }>
+        <DialogFooter>
+          <Button >Save</Button>
+          <Button >Cancel</Button>
+        </DialogFooter>
+      </Dialog>
+    </div>;
+  }
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.visualtest.ts b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.visualtest.ts
new file mode 100644
index 00000000000000..ecf175ab5628b4
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.visualtest.ts
@@ -0,0 +1,22 @@
+import { Casper} from '../../visualtest/PhantomCssInterface';
+import { baseUrl } from '../../common/VisualTest';
+import {
+  defaultScreenshot, mouseMoveScreenshot, testRunner
+} from '../../visualtest/RunVisualTest';
+import { IRunVisualTest } from '../../visualtest/IRunVisualTest';
+declare var casper: Casper;
+let componentIds: IRunVisualTest[] = [];
+
+componentIds.push({
+  selector: '.' + 'DocumentCard',
+  fileName: 'documentCard',
+  commands: [defaultScreenshot, mouseMoveScreenshot]
+});
+
+casper.
+  start(baseUrl + 'documentCard').
+  then(() => {
+    testRunner(componentIds);
+  });
+
+casper.run(() => { casper.test.done(); });
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPage.visualtest.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPage.visualtest.tsx
new file mode 100644
index 00000000000000..be334c3ff5af4a
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPage.visualtest.tsx
@@ -0,0 +1,37 @@
+import { DocumentCard, DocumentCardPreview, DocumentCardTitle, DocumentCardActivity, IDocumentCardPreviewProps } from './index';
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+export default class DocumentCardVPage extends React.Component<any, any> {
+  public render() {
+    let previewProps: IDocumentCardPreviewProps = {
+      previewImages: [
+        {
+          name: 'DocumentCard',
+          previewImageSrc: 'dist/document-preview.png',
+          iconSrc: 'dist/icon-ppt.png',
+          width: 318,
+          height: 196,
+          accentColor: '#ce4b1f'
+        }
+      ],
+    };
+    return <div >
+      <DocumentCard className='DocumentCard'>
+        <DocumentCardPreview { ...previewProps } />
+        <DocumentCardTitle
+          title='Document Card'
+          shouldTruncate={ true } />
+        <DocumentCardActivity
+          activity='Created a few minutes ago'
+          people={
+            [
+              { name: 'Annie Lindqvist', profileImageSrc: 'images/persona-female.png' }
+            ]
+          }
+        />
+      </DocumentCard>
+
+    </div>;
+  }
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.Props.ts b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.Props.ts
index 9bf9227f9520e3..351d033bbdd3ae 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.Props.ts
+++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.Props.ts
@@ -53,6 +53,11 @@ export interface IFacepileProps extends React.Props<Facepile> {
 
   /** Method to access properties on the underlying Persona control */
   getPersonaProps?: (persona: IFacepilePersona) => IPersonaProps;
+  
+  /**
+   * Optional class for Facepile root element.
+   */
+  className?: string;
 }
 
 export interface IFacepilePersona extends React.HTMLProps<HTMLButtonElement | HTMLDivElement> {
@@ -110,4 +115,4 @@ export enum OverflowButtonType {
   more = 2,
   /** Chevron overflow icon */
   downArrow = 3
-}
\ No newline at end of file
+}
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx
index 5a5b770e7cf06b..f3566bf08a1163 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx
+++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx
@@ -48,6 +48,7 @@ export class Facepile extends BaseComponent<IFacepileProps, {}> {
       overflowButtonProps,
       overflowButtonType,
       ariaDescription,
+      className,
       personas,
       showAddButton
     } = this.props;
@@ -60,7 +61,7 @@ export class Facepile extends BaseComponent<IFacepileProps, {}> {
     }
 
     return (
-      <div className={ css('ms-Facepile', styles.root) }>
+      <div className={ css('ms-Facepile', styles.root, className) }>
         <div
           className={ css('ms-Facepile-itemContainer', styles.itemContainer) }
         >
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.visualtest.ts b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.visualtest.ts
new file mode 100644
index 00000000000000..a4eb3c37a5dc3f
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.visualtest.ts
@@ -0,0 +1,20 @@
+import { Casper } from '../../visualtest/PhantomCssInterface';
+import { baseUrl } from '../../common/VisualTest';
+import { defaultScreenshot, testRunner } from '../../visualtest/RunVisualTest';
+import { IRunVisualTest } from '../../visualtest/IRunVisualTest';
+declare var casper: Casper;
+let componentIds: IRunVisualTest[] = [];
+
+componentIds.push({
+  selector: '.' + 'Facepile',
+  fileName: 'facepile',
+  commands: [defaultScreenshot]
+});
+
+casper.
+  start(baseUrl + 'facepile').
+  then(() => {
+    testRunner(componentIds);
+  });
+
+casper.run(() => { casper.test.done(); });
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/FacepilePage.visualtest.tsx b/packages/office-ui-fabric-react/src/components/Facepile/FacepilePage.visualtest.tsx
new file mode 100644
index 00000000000000..bfa29d80e2d316
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Facepile/FacepilePage.visualtest.tsx
@@ -0,0 +1,24 @@
+import { Facepile } from './index';
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+export default class FacepileVPage extends React.Component<any, any> {
+  public render() {
+    return <div>
+      <label>Basic Facepile:</label>
+      <Facepile className='Facepile'
+        personas={ [{
+          imageUrl: './images/persona-female.png',
+          personaName: 'Annie Lindqvist',
+          imageInitials: 'AL',
+          data: '50%'
+        },
+        {
+          imageUrl: './images/persona-male.png',
+          personaName: 'Aaron Reid',
+          imageInitials: 'AR',
+          data: '$1,000'
+        }] } />
+    </div>;
+  }
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Label/Label.visualtest.ts b/packages/office-ui-fabric-react/src/components/Label/Label.visualtest.ts
new file mode 100644
index 00000000000000..6abe296df96098
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Label/Label.visualtest.ts
@@ -0,0 +1,31 @@
+import { Casper } from '../../visualtest/PhantomCssInterface';
+import { baseUrl } from '../../common/VisualTest';
+import { defaultScreenshot, testRunner } from '../../visualtest/RunVisualTest';
+import { IRunVisualTest } from '../../visualtest/IRunVisualTest';
+declare var casper: Casper;
+let componentIds: IRunVisualTest[] = [];
+
+componentIds.push({
+  selector: '.' + 'Label',
+  fileName: 'label',
+  commands: [defaultScreenshot]
+});
+
+componentIds.push({
+  selector: '.' + 'LabelDisabled',
+  fileName: 'labelDisabled',
+  commands: [defaultScreenshot]
+});
+componentIds.push({
+  selector: '.' + 'LabelRequired',
+  fileName: 'labelRequired',
+  commands: [defaultScreenshot]
+});
+
+casper.
+  start(baseUrl + 'label').
+  then(() => {
+    testRunner(componentIds);
+  });
+
+casper.run(() => { casper.test.done(); });
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Label/LabelPage.visualtest.tsx b/packages/office-ui-fabric-react/src/components/Label/LabelPage.visualtest.tsx
new file mode 100644
index 00000000000000..196601c6084901
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Label/LabelPage.visualtest.tsx
@@ -0,0 +1,16 @@
+import { Label } from './index';
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+export default class LabelVPage extends React.Component<any, any> {
+  public render() {
+    return <div>
+      <div>
+        <div><Label className='Label'>I'm a Label</Label></div>&nbsp;
+           <div><Label className='LabelDisabled' disabled={ true }>I'm a disabled Label</Label></div>&nbsp;
+           <div><Label className='LabelRequired' required={ true }>I'm a required Label</Label></div>&nbsp;
+        </div>
+
+    </div>;
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.visualtest.ts b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.visualtest.ts
new file mode 100644
index 00000000000000..523045078f4057
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.visualtest.ts
@@ -0,0 +1,21 @@
+import { Casper} from '../../visualtest/PhantomCssInterface';
+import { baseUrl } from '../../common/VisualTest';
+import { defaultScreenshot, testRunner, mouseClickScreenshot, mouseMoveScreenshot, mouseDownScreenshot } from '../../visualtest/RunVisualTest';
+import { IRunVisualTest } from '../../visualtest/IRunVisualTest';
+declare var casper: Casper;
+let componentIds: IRunVisualTest[] = [];
+
+componentIds.push({
+  selector: '.' + 'ms-Toggle-button',
+  fileName: 'toggle',
+  imageSelector: '.' + 'Toggle',
+  commands: [defaultScreenshot, mouseClickScreenshot, mouseMoveScreenshot, mouseDownScreenshot]
+});
+
+casper.
+  start(baseUrl + 'toggle').
+  then(() => {
+    testRunner(componentIds);
+  });
+
+casper.run(() => { casper.test.done(); });
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.visualtest.tsx b/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.visualtest.tsx
new file mode 100644
index 00000000000000..ee97289523d0fa
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.visualtest.tsx
@@ -0,0 +1,18 @@
+import { Toggle } from './index';
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+export default class ToggleVPage extends React.Component<any, any> {
+  public render() {
+    return <div >
+      <Toggle
+        className='Toggle'
+        defaultChecked={ true }
+        label='Enabled and checked'
+        onAriaLabel='This toggle is checked. Press to uncheck.'
+        offAriaLabel='This toggle is unchecked. Press to check.'
+        onText='On'
+        offText='Off' />
+    </div>;
+  }
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.visualtest.ts b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.visualtest.ts
new file mode 100644
index 00000000000000..a014e595faffdd
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.visualtest.ts
@@ -0,0 +1,21 @@
+import { Casper} from '../../visualtest/PhantomCssInterface';
+import { baseUrl } from '../../common/VisualTest';
+import { testRunner, mouseClickScreenshot, mouseMoveScreenshot, mouseDownScreenshot } from '../../visualtest/RunVisualTest';
+import { IRunVisualTest } from '../../visualtest/IRunVisualTest';
+declare var casper: Casper;
+let componentIds: IRunVisualTest[] = [];
+
+componentIds.push({
+  selector: '#' + 'TooltipButton',
+  fileName: 'tooltip',
+  imageSelector: '#' + 'Tooltip',
+  commands: [mouseClickScreenshot, mouseMoveScreenshot, mouseDownScreenshot]
+});
+
+casper.
+  start(baseUrl + 'tooltip').
+  then(() => {
+    testRunner(componentIds);
+  });
+
+casper.run(() => { casper.test.done(); });
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.visualtest.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.visualtest.tsx
new file mode 100644
index 00000000000000..8f517f5d28b1bc
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.visualtest.tsx
@@ -0,0 +1,14 @@
+import { TooltipHost } from './index';
+import { DefaultButton } from '../Button/DefaultButton/DefaultButton';
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+export default class TooltipVPage extends React.Component<any, any> {
+  public render() {
+    return <div >
+      <TooltipHost content='This is the tooltip' id='Tooltip' calloutProps={ { gapSpace: 25 } }>
+        <DefaultButton id='TooltipButton' aria-describedby='myID'>Hover Over Me</DefaultButton>
+      </TooltipHost>
+    </div>;
+  }
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/visualtest/IRunVisualTest.ts b/packages/office-ui-fabric-react/src/visualtest/IRunVisualTest.ts
new file mode 100644
index 00000000000000..00ed4f415edcb8
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/visualtest/IRunVisualTest.ts
@@ -0,0 +1,8 @@
+
+export interface IRunVisualTest {
+  selector: string;
+  fileName: string;
+  imageSelector?: string;
+  commands: ((params: IRunVisualTest) => void)[];
+  childParams?: IRunVisualTest;
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/visualtest/RunVisualTest.ts b/packages/office-ui-fabric-react/src/visualtest/RunVisualTest.ts
new file mode 100644
index 00000000000000..113f5e888e046e
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/visualtest/RunVisualTest.ts
@@ -0,0 +1,82 @@
+
+import { Casper, IPhantomCSS } from './PhantomCssInterface';
+import { IRunVisualTest } from './IRunVisualTest';
+declare var phantomcss: IPhantomCSS;
+declare var casper: Casper;
+
+export function defaultScreenshot(params: IRunVisualTest) {
+  params.imageSelector = params.imageSelector || params.selector;
+
+  casper.then(() => {
+    phantomcss.screenshot(params.imageSelector, params.fileName + '_default');
+  });
+  if (params.childParams) {
+    params.childParams.commands.forEach(commandList => {
+      commandList(params.childParams);
+    });
+  }
+}
+
+export function mouseMoveScreenshot(params: IRunVisualTest) {
+  params.imageSelector = params.imageSelector || params.selector;
+
+  casper.then(function () {
+    this.mouse.move(params.selector);
+    phantomcss.screenshot(params.imageSelector, params.fileName + '_mouseMove');
+  });
+  if (params.childParams) {
+    params.childParams.commands.forEach(commandList => {
+      commandList(params.childParams);
+    });
+  }
+}
+
+export function mouseDownScreenshot(params: IRunVisualTest) {
+  params.imageSelector = params.imageSelector || params.selector;
+
+  casper.then(function () {
+    this.mouse.down(params.selector);
+    phantomcss.screenshot(params.imageSelector, params.fileName + '_mouseDown');
+  });
+  if (params.childParams) {
+    params.childParams.commands.forEach(commandList => {
+      commandList(params.childParams);
+    });
+  }
+}
+export function mouseClickScreenshot(params: IRunVisualTest) {
+  params.imageSelector = params.imageSelector || params.selector;
+
+  casper.then(function () {
+    this.click(params.selector);
+    phantomcss.screenshot(params.imageSelector, params.fileName + '_mouseClick');
+  });
+  casper.then(function () {
+    this.click(params.selector);
+  });
+  if (params.childParams) {
+    params.childParams.commands.forEach(commandList => {
+      commandList(params.childParams);
+    });
+  }
+}
+
+export function mouseSingleClickScreenshot(params: IRunVisualTest) {
+  params.imageSelector = params.imageSelector || params.selector;
+
+  casper.then(function () {
+    this.click(params.selector);
+  });
+  if (params.childParams) {
+    params.childParams.commands.forEach(commandList => {
+      commandList(params.childParams);
+    });
+  }
+}
+export function testRunner(componentIds: IRunVisualTest[]) {
+  componentIds.forEach(element => {
+    element.commands.forEach(command => {
+      command(element);
+    });
+  });
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/visualtest.html b/packages/office-ui-fabric-react/visualtest.html
index 68347968b81138..06f115527820ba 100644
--- a/packages/office-ui-fabric-react/visualtest.html
+++ b/packages/office-ui-fabric-react/visualtest.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html dir="ltr">
 
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
@@ -15,33 +15,51 @@
 </head>
 
 <body>
+  <br>
+  <h1>
+    <center>Regression Test Results</center>
+  </h1>
+  </br>
+  <div style=float:left;width:30%;margin-left:100px>
+    <div>
+      <h2>Fabric Components</h2>
+    </div>&nbsp;
+    <div><a href="http://localhost:43210/visualtest.html?#/breadcrumb"> Breadcrumb</a></div>&nbsp;
+    <div><a href="http://localhost:43210/visualtest.html?#/button"> Button</a></div>&nbsp;
+    <div><a href="http://localhost:43210/visualtest.html?#/checkBox"> Checkbox</a></div>&nbsp;
+    <div><a href="http://localhost:43210/visualtest.html?#/choiceGroup"> Choice Group</a></div>&nbsp;
+    <div><a href="http://localhost:43210/visualtest.html?#/contextualMenu"> Contextual Menu</a></div>&nbsp;
+    <div><a href="http://localhost:43210/visualtest.html?#/commandBar"> Command Bar</a></div>&nbsp;
+    <div><a href="http://localhost:43210/visualtest.html?#/dialog"> Dialog </a></div>&nbsp;
+    <div><a href="http://localhost:43210/visualtest.html?#/detailsList"> Details List </a></div>&nbsp;
+    <div><a href="http://localhost:43210/visualtest.html?#/documentCard"> Document Card </a></div>&nbsp;
+    <div><a href="http://localhost:43210/visualtest.html?#/facepile"> Facepile </a></div>&nbsp;
+    <div><a href="http://localhost:43210/visualtest.html?#/label"> Label </a></div>&nbsp;
+    <div><a href="http://localhost:43210/visualtest.html?#/toggle"> Toggle </a></div>&nbsp;
+    <div><a href="http://localhost:43210/visualtest.html?#/tooltip"> Tooltip </a></div>&nbsp;
+  </div>
+  <div style=float:left;width:30%;margin-left:100px>
+    <div>
+      <h2>Baseline Images</h2>
+    </div>
+  </div>
 
-  <div>
-    <div><a href="http://localhost:43210/visualtest.html?#/defaultButton"> Default Button</a></div>
-    <div><a href="http://localhost:43210/visualtest.html?#/primaryButton"> Primary Button</a></div>
-    <div><a href="http://localhost:43210/visualtest.html?#/compoundButton"> Compound Button</a></div>
-    <div><a href="http://localhost:43210/visualtest.html?#/commandButton"> Command Button</a></div>
-    <div><a href="http://localhost:43210/visualtest.html?#/contextualButton"> Contextual Button</a></div>
-    <div><a href="http://localhost:43210/visualtest.html?#/contextualMenu"> Contextual Menu</a></div>
-    <div><a href="http://localhost:43210/visualtest.html?#/checkBox"> Checkbox</a></div>
-    <div><a href="http://localhost:43210/visualtest.html?#/choiceGroup"> Choice Group</a></div>
-
-    <div id="content"></div>
-    <script type="text/javascript">
-      function loadScript(n) {
-        for (var i = 0; i < n.length; i++) {
-          var s = document.createElement('script');
-          s.src = n[i];
-          s.async = false;
-          document.body.appendChild(s);
-        }
+  <div id="content"></div>
+  <script type="text/javascript">
+    function loadScript(n) {
+      for (var i = 0; i < n.length; i++) {
+        var s = document.createElement('script');
+        s.src = n[i];
+        s.async = false;
+        document.body.appendChild(s);
       }
-      loadScript([
-        '//cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react.js',
-        '//cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react-dom.js',
-        'dist/fabric-test.js']
-      );
-    </script>
+    }
+    loadScript([
+      '//cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react.js ',
+      '//cdnjs.cloudflare.com/ajax/libs/react/15.4.0/react-dom.js ',
+      'dist/fabric-test.js ']
+    );
+  </script>
 
 </body>
 
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/ButtonDefaultDisabled_default_4.png b/packages/office-ui-fabric-react/visualtests/baseline/ButtonDefaultDisabled_default_4.png
new file mode 100644
index 00000000000000..45086ce8e5413a
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/ButtonDefaultDisabled_default_4.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/CheckboxDisabled_not_pressed_3.png b/packages/office-ui-fabric-react/visualtests/baseline/CheckboxDisabled_not_pressed_3.png
deleted file mode 100644
index dffe8cf6acc3de..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/CheckboxDisabled_not_pressed_3.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/CheckboxDisabled_pressed_5.png b/packages/office-ui-fabric-react/visualtests/baseline/CheckboxDisabled_pressed_5.png
deleted file mode 100644
index dffe8cf6acc3de..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/CheckboxDisabled_pressed_5.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/Checkbox_hovered_1.png b/packages/office-ui-fabric-react/visualtests/baseline/Checkbox_hovered_1.png
deleted file mode 100644
index 45932b6d64ccb9..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/Checkbox_hovered_1.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/Checkbox_not_pressed_0.png b/packages/office-ui-fabric-react/visualtests/baseline/Checkbox_not_pressed_0.png
deleted file mode 100644
index 66d3916f7b90de..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/Checkbox_not_pressed_0.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroupDisabled_hovered_7.png b/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroupDisabled_hovered_7.png
deleted file mode 100644
index 96e656eb0bae7b..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroupDisabled_hovered_7.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroupDisabled_not_pressed_6.png b/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroupDisabled_not_pressed_6.png
deleted file mode 100644
index 96e656eb0bae7b..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroupDisabled_not_pressed_6.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroupDisabled_pressed_8.png b/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroupDisabled_pressed_8.png
deleted file mode 100644
index 96e656eb0bae7b..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroupDisabled_pressed_8.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroupIcon_hovered_4.png b/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroupIcon_hovered_4.png
deleted file mode 100644
index 6388be5dcfce1e..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroupIcon_hovered_4.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroupIcon_not_pressed_3.png b/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroupIcon_not_pressed_3.png
deleted file mode 100644
index 6388be5dcfce1e..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroupIcon_not_pressed_3.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroupIcon_pressed_5.png b/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroupIcon_pressed_5.png
deleted file mode 100644
index 6388be5dcfce1e..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroupIcon_pressed_5.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroup_hovered_1.png b/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroup_hovered_1.png
deleted file mode 100644
index 6e8e3ffb5a86af..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroup_hovered_1.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroup_not_pressed_0.png b/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroup_not_pressed_0.png
deleted file mode 100644
index 6e8e3ffb5a86af..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroup_not_pressed_0.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroup_pressed_2.png b/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroup_pressed_2.png
deleted file mode 100644
index 6e8e3ffb5a86af..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/ChoiceGroup_pressed_2.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/CommandButtonDisabled_hovered_4.png b/packages/office-ui-fabric-react/visualtests/baseline/CommandButtonDisabled_hovered_4.png
deleted file mode 100644
index a00607a962e79d..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/CommandButtonDisabled_hovered_4.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/CommandButtonDisabled_not_pressed_3.png b/packages/office-ui-fabric-react/visualtests/baseline/CommandButtonDisabled_not_pressed_3.png
deleted file mode 100644
index a00607a962e79d..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/CommandButtonDisabled_not_pressed_3.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/CommandButtonDisabled_pressed_5.png b/packages/office-ui-fabric-react/visualtests/baseline/CommandButtonDisabled_pressed_5.png
deleted file mode 100644
index a00607a962e79d..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/CommandButtonDisabled_pressed_5.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/CommandButton_hovered_1.png b/packages/office-ui-fabric-react/visualtests/baseline/CommandButton_hovered_1.png
deleted file mode 100644
index 2248f570990e62..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/CommandButton_hovered_1.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/CommandButton_not_pressed_0.png b/packages/office-ui-fabric-react/visualtests/baseline/CommandButton_not_pressed_0.png
deleted file mode 100644
index 61737acb51cdcf..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/CommandButton_not_pressed_0.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/CommandButton_pressed_2.png b/packages/office-ui-fabric-react/visualtests/baseline/CommandButton_pressed_2.png
deleted file mode 100644
index d70695be6c101f..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/CommandButton_pressed_2.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/CompoundButtonDisabled_hovered_4.png b/packages/office-ui-fabric-react/visualtests/baseline/CompoundButtonDisabled_hovered_4.png
deleted file mode 100644
index 91b14c95d1cb30..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/CompoundButtonDisabled_hovered_4.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/CompoundButtonDisabled_not_pressed_3.png b/packages/office-ui-fabric-react/visualtests/baseline/CompoundButtonDisabled_not_pressed_3.png
deleted file mode 100644
index 91b14c95d1cb30..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/CompoundButtonDisabled_not_pressed_3.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/CompoundButtonDisabled_pressed_5.png b/packages/office-ui-fabric-react/visualtests/baseline/CompoundButtonDisabled_pressed_5.png
deleted file mode 100644
index 91b14c95d1cb30..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/CompoundButtonDisabled_pressed_5.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/CompoundButton_hovered_1.png b/packages/office-ui-fabric-react/visualtests/baseline/CompoundButton_hovered_1.png
deleted file mode 100644
index 4aa304aca06ed7..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/CompoundButton_hovered_1.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/CompoundButton_not_pressed_0.png b/packages/office-ui-fabric-react/visualtests/baseline/CompoundButton_not_pressed_0.png
deleted file mode 100644
index 5d54d774b1856c..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/CompoundButton_not_pressed_0.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/CompoundButton_pressed_2.png b/packages/office-ui-fabric-react/visualtests/baseline/CompoundButton_pressed_2.png
deleted file mode 100644
index 19f3a0e2773b8e..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/CompoundButton_pressed_2.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/ContextualButtonDisabled_hovered_5.png b/packages/office-ui-fabric-react/visualtests/baseline/ContextualButtonDisabled_hovered_5.png
deleted file mode 100644
index 4779b46b7a3a44..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/ContextualButtonDisabled_hovered_5.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/ContextualButtonDisabled_not_pressed_4.png b/packages/office-ui-fabric-react/visualtests/baseline/ContextualButtonDisabled_not_pressed_4.png
deleted file mode 100644
index 4779b46b7a3a44..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/ContextualButtonDisabled_not_pressed_4.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/ContextualButtonDisabled_pressed_6.png b/packages/office-ui-fabric-react/visualtests/baseline/ContextualButtonDisabled_pressed_6.png
deleted file mode 100644
index 4779b46b7a3a44..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/ContextualButtonDisabled_pressed_6.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/ContextualButton_hovered_1.png b/packages/office-ui-fabric-react/visualtests/baseline/ContextualButton_hovered_1.png
deleted file mode 100644
index 84b0c0911f9716..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/ContextualButton_hovered_1.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/ContextualButton_not_pressed_0.png b/packages/office-ui-fabric-react/visualtests/baseline/ContextualButton_not_pressed_0.png
deleted file mode 100644
index 5d8ceb8e07ab10..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/ContextualButton_not_pressed_0.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/ContextualButton_pressed_2.png b/packages/office-ui-fabric-react/visualtests/baseline/ContextualButton_pressed_2.png
deleted file mode 100644
index 52040d306e6785..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/ContextualButton_pressed_2.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/ContextualMenu_hovered_1.png b/packages/office-ui-fabric-react/visualtests/baseline/ContextualMenu_hovered_1.png
deleted file mode 100644
index 7912b6c2439e6d..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/ContextualMenu_hovered_1.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/ContextualMenu_not_pressed_0.png b/packages/office-ui-fabric-react/visualtests/baseline/ContextualMenu_not_pressed_0.png
deleted file mode 100644
index ced64cb3d2dab5..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/ContextualMenu_not_pressed_0.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/ContextualMenu_pressed_2.png b/packages/office-ui-fabric-react/visualtests/baseline/ContextualMenu_pressed_2.png
deleted file mode 100644
index 1bc86df99d5a1c..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/ContextualMenu_pressed_2.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/DefaultButtonDisabled_hovered_4.png b/packages/office-ui-fabric-react/visualtests/baseline/DefaultButtonDisabled_hovered_4.png
deleted file mode 100644
index 04a808253e6cd3..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/DefaultButtonDisabled_hovered_4.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/DefaultButtonDisabled_not_pressed_3.png b/packages/office-ui-fabric-react/visualtests/baseline/DefaultButtonDisabled_not_pressed_3.png
deleted file mode 100644
index 04a808253e6cd3..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/DefaultButtonDisabled_not_pressed_3.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/DefaultButtonDisabled_pressed_5.png b/packages/office-ui-fabric-react/visualtests/baseline/DefaultButtonDisabled_pressed_5.png
deleted file mode 100644
index 04a808253e6cd3..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/DefaultButtonDisabled_pressed_5.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/DefaultButton_hovered_1.png b/packages/office-ui-fabric-react/visualtests/baseline/DefaultButton_hovered_1.png
deleted file mode 100644
index 85c6d34cb2abfd..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/DefaultButton_hovered_1.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/DefaultButton_not_pressed_0.png b/packages/office-ui-fabric-react/visualtests/baseline/DefaultButton_not_pressed_0.png
deleted file mode 100644
index b7d4432d808be0..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/DefaultButton_not_pressed_0.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/DefaultButton_pressed_2.png b/packages/office-ui-fabric-react/visualtests/baseline/DefaultButton_pressed_2.png
deleted file mode 100644
index d17a04427e3aab..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/DefaultButton_pressed_2.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/Icon_Button_6.png b/packages/office-ui-fabric-react/visualtests/baseline/Icon_Button_6.png
deleted file mode 100644
index 142a1402da9451..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/Icon_Button_6.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/PrimaryButtonDisabled_hovered_4.png b/packages/office-ui-fabric-react/visualtests/baseline/PrimaryButtonDisabled_hovered_4.png
deleted file mode 100644
index 645a00fc3bb991..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/PrimaryButtonDisabled_hovered_4.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/PrimaryButtonDisabled_not_pressed_3.png b/packages/office-ui-fabric-react/visualtests/baseline/PrimaryButtonDisabled_not_pressed_3.png
deleted file mode 100644
index 645a00fc3bb991..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/PrimaryButtonDisabled_not_pressed_3.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/PrimaryButtonDisabled_pressed_5.png b/packages/office-ui-fabric-react/visualtests/baseline/PrimaryButtonDisabled_pressed_5.png
deleted file mode 100644
index 645a00fc3bb991..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/PrimaryButtonDisabled_pressed_5.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/PrimaryButton_hovered_1.png b/packages/office-ui-fabric-react/visualtests/baseline/PrimaryButton_hovered_1.png
deleted file mode 100644
index 786524aedde742..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/PrimaryButton_hovered_1.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/PrimaryButton_not_pressed_0.png b/packages/office-ui-fabric-react/visualtests/baseline/PrimaryButton_not_pressed_0.png
deleted file mode 100644
index b22c4ece9ab19c..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/PrimaryButton_not_pressed_0.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/PrimaryButton_pressed_2.png b/packages/office-ui-fabric-react/visualtests/baseline/PrimaryButton_pressed_2.png
deleted file mode 100644
index b22c4ece9ab19c..00000000000000
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/PrimaryButton_pressed_2.png and /dev/null differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/breadcrumb_default_0.png b/packages/office-ui-fabric-react/visualtests/baseline/breadcrumb_default_0.png
new file mode 100644
index 00000000000000..659d84bbcf13e6
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/breadcrumb_default_0.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/breadcrumb_mouseClick_3.png b/packages/office-ui-fabric-react/visualtests/baseline/breadcrumb_mouseClick_3.png
new file mode 100644
index 00000000000000..70dda532723a1e
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/breadcrumb_mouseClick_3.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/breadcrumb_mouseDown_2.png b/packages/office-ui-fabric-react/visualtests/baseline/breadcrumb_mouseDown_2.png
new file mode 100644
index 00000000000000..70dda532723a1e
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/breadcrumb_mouseDown_2.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/breadcrumb_mouseMove_1.png b/packages/office-ui-fabric-react/visualtests/baseline/breadcrumb_mouseMove_1.png
new file mode 100644
index 00000000000000..30904df9fd3598
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/breadcrumb_mouseMove_1.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonCommandDisabled_default_14.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonCommandDisabled_default_14.png
new file mode 100644
index 00000000000000..eaca7bf169a420
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonCommandDisabled_default_14.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonCommand_default_10.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonCommand_default_10.png
new file mode 100644
index 00000000000000..1129213c4f809f
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonCommand_default_10.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonCommand_mouseClick_13.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonCommand_mouseClick_13.png
new file mode 100644
index 00000000000000..0688abbc617271
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonCommand_mouseClick_13.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonCommand_mouseDown_11.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonCommand_mouseDown_11.png
new file mode 100644
index 00000000000000..0688abbc617271
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonCommand_mouseDown_11.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonCommand_mouseMove_12.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonCommand_mouseMove_12.png
new file mode 100644
index 00000000000000..0688abbc617271
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonCommand_mouseMove_12.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonCompoundDisabled_default_19.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonCompoundDisabled_default_19.png
new file mode 100644
index 00000000000000..d2b6513b6a8ef9
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonCompoundDisabled_default_19.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonCompound_default_15.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonCompound_default_15.png
new file mode 100644
index 00000000000000..a0baba958f2203
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonCompound_default_15.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonCompound_mouseClick_16.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonCompound_mouseClick_16.png
new file mode 100644
index 00000000000000..a0baba958f2203
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonCompound_mouseClick_16.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonCompound_mouseDown_17.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonCompound_mouseDown_17.png
new file mode 100644
index 00000000000000..deeb140e9ba5d1
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonCompound_mouseDown_17.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonCompound_mouseMove_18.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonCompound_mouseMove_18.png
new file mode 100644
index 00000000000000..deeb140e9ba5d1
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonCompound_mouseMove_18.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonContextualMenu_default_24.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonContextualMenu_default_24.png
new file mode 100644
index 00000000000000..eea359ea2afa9d
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonContextualMenu_default_24.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonContextual_default_20.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonContextual_default_20.png
new file mode 100644
index 00000000000000..275b8cc1427187
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonContextual_default_20.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonContextual_mouseClick_21.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonContextual_mouseClick_21.png
new file mode 100644
index 00000000000000..6ea81a22eb777a
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonContextual_mouseClick_21.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonContextual_mouseDown_22.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonContextual_mouseDown_22.png
new file mode 100644
index 00000000000000..2fc1a35bf5f421
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonContextual_mouseDown_22.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonContextual_mouseMove_23.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonContextual_mouseMove_23.png
new file mode 100644
index 00000000000000..2fc1a35bf5f421
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonContextual_mouseMove_23.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonDefault_default_0.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonDefault_default_0.png
new file mode 100644
index 00000000000000..7ccc89e7437acc
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonDefault_default_0.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonDefault_mouseClick_1.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonDefault_mouseClick_1.png
new file mode 100644
index 00000000000000..7ccc89e7437acc
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonDefault_mouseClick_1.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonDefault_mouseDown_2.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonDefault_mouseDown_2.png
new file mode 100644
index 00000000000000..b6aed2c646fe3d
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonDefault_mouseDown_2.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonDefault_mouseMove_3.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonDefault_mouseMove_3.png
new file mode 100644
index 00000000000000..b6aed2c646fe3d
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonDefault_mouseMove_3.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonPrimaryDisabled_default_9.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonPrimaryDisabled_default_9.png
new file mode 100644
index 00000000000000..8614dad4f2a638
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonPrimaryDisabled_default_9.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonPrimary_default_5.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonPrimary_default_5.png
new file mode 100644
index 00000000000000..1566304477931a
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonPrimary_default_5.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonPrimary_mouseClick_6.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonPrimary_mouseClick_6.png
new file mode 100644
index 00000000000000..1566304477931a
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonPrimary_mouseClick_6.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonPrimary_mouseDown_7.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonPrimary_mouseDown_7.png
new file mode 100644
index 00000000000000..206b07dde52718
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonPrimary_mouseDown_7.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/buttonPrimary_mouseMove_8.png b/packages/office-ui-fabric-react/visualtests/baseline/buttonPrimary_mouseMove_8.png
new file mode 100644
index 00000000000000..206b07dde52718
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/buttonPrimary_mouseMove_8.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/CheckboxDisabled_hovered_4.png b/packages/office-ui-fabric-react/visualtests/baseline/checkboxDisabled_default_4.png
similarity index 94%
rename from packages/office-ui-fabric-react/visualtests/baseline/CheckboxDisabled_hovered_4.png
rename to packages/office-ui-fabric-react/visualtests/baseline/checkboxDisabled_default_4.png
index dffe8cf6acc3de..d278c2d2eaea3a 100644
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/CheckboxDisabled_hovered_4.png and b/packages/office-ui-fabric-react/visualtests/baseline/checkboxDisabled_default_4.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/checkbox_default_0.png b/packages/office-ui-fabric-react/visualtests/baseline/checkbox_default_0.png
new file mode 100644
index 00000000000000..5b42cd34d9726c
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/checkbox_default_0.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/checkbox_mouseClick_1.png b/packages/office-ui-fabric-react/visualtests/baseline/checkbox_mouseClick_1.png
new file mode 100644
index 00000000000000..4945cc9cee97e8
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/checkbox_mouseClick_1.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/Checkbox_pressed_2.png b/packages/office-ui-fabric-react/visualtests/baseline/checkbox_mouseDown_3.png
similarity index 92%
rename from packages/office-ui-fabric-react/visualtests/baseline/Checkbox_pressed_2.png
rename to packages/office-ui-fabric-react/visualtests/baseline/checkbox_mouseDown_3.png
index f680879c46cfc6..3b11af5f7303a2 100644
Binary files a/packages/office-ui-fabric-react/visualtests/baseline/Checkbox_pressed_2.png and b/packages/office-ui-fabric-react/visualtests/baseline/checkbox_mouseDown_3.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/checkbox_mouseMove_2.png b/packages/office-ui-fabric-react/visualtests/baseline/checkbox_mouseMove_2.png
new file mode 100644
index 00000000000000..3b11af5f7303a2
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/checkbox_mouseMove_2.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/choiceGroupDisabled_default_4.png b/packages/office-ui-fabric-react/visualtests/baseline/choiceGroupDisabled_default_4.png
new file mode 100644
index 00000000000000..67cbcc3c163c24
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/choiceGroupDisabled_default_4.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/choiceGroupIcon_default_5.png b/packages/office-ui-fabric-react/visualtests/baseline/choiceGroupIcon_default_5.png
new file mode 100644
index 00000000000000..fafd724e6a00b2
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/choiceGroupIcon_default_5.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/choiceGroupIcon_mouseClick_8.png b/packages/office-ui-fabric-react/visualtests/baseline/choiceGroupIcon_mouseClick_8.png
new file mode 100644
index 00000000000000..fafd724e6a00b2
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/choiceGroupIcon_mouseClick_8.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/choiceGroupIcon_mouseDown_7.png b/packages/office-ui-fabric-react/visualtests/baseline/choiceGroupIcon_mouseDown_7.png
new file mode 100644
index 00000000000000..fafd724e6a00b2
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/choiceGroupIcon_mouseDown_7.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/choiceGroupIcon_mouseMove_6.png b/packages/office-ui-fabric-react/visualtests/baseline/choiceGroupIcon_mouseMove_6.png
new file mode 100644
index 00000000000000..fafd724e6a00b2
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/choiceGroupIcon_mouseMove_6.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/choiceGroup_default_0.png b/packages/office-ui-fabric-react/visualtests/baseline/choiceGroup_default_0.png
new file mode 100644
index 00000000000000..1fdf3b0c2f9a78
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/choiceGroup_default_0.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/choiceGroup_mouseClick_3.png b/packages/office-ui-fabric-react/visualtests/baseline/choiceGroup_mouseClick_3.png
new file mode 100644
index 00000000000000..67cbcc3c163c24
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/choiceGroup_mouseClick_3.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/choiceGroup_mouseDown_2.png b/packages/office-ui-fabric-react/visualtests/baseline/choiceGroup_mouseDown_2.png
new file mode 100644
index 00000000000000..f6281b464cbb23
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/choiceGroup_mouseDown_2.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/choiceGroup_mouseMove_1.png b/packages/office-ui-fabric-react/visualtests/baseline/choiceGroup_mouseMove_1.png
new file mode 100644
index 00000000000000..f6281b464cbb23
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/choiceGroup_mouseMove_1.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/commandBarItem_default_4.png b/packages/office-ui-fabric-react/visualtests/baseline/commandBarItem_default_4.png
new file mode 100644
index 00000000000000..7b1f1bbf925a00
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/commandBarItem_default_4.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/commandBar_default_0.png b/packages/office-ui-fabric-react/visualtests/baseline/commandBar_default_0.png
new file mode 100644
index 00000000000000..381e7b9ed42bfc
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/commandBar_default_0.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/commandBar_mouseClick_3.png b/packages/office-ui-fabric-react/visualtests/baseline/commandBar_mouseClick_3.png
new file mode 100644
index 00000000000000..ac338d65330ed5
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/commandBar_mouseClick_3.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/commandBar_mouseDown_2.png b/packages/office-ui-fabric-react/visualtests/baseline/commandBar_mouseDown_2.png
new file mode 100644
index 00000000000000..8bd9edd5b81572
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/commandBar_mouseDown_2.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/commandBar_mouseMove_1.png b/packages/office-ui-fabric-react/visualtests/baseline/commandBar_mouseMove_1.png
new file mode 100644
index 00000000000000..8bd9edd5b81572
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/commandBar_mouseMove_1.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/contextualMenu_default_0.png b/packages/office-ui-fabric-react/visualtests/baseline/contextualMenu_default_0.png
new file mode 100644
index 00000000000000..081f7be878600a
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/contextualMenu_default_0.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/contextualMenu_mouseClick_3.png b/packages/office-ui-fabric-react/visualtests/baseline/contextualMenu_mouseClick_3.png
new file mode 100644
index 00000000000000..54a7dd22e6b35a
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/contextualMenu_mouseClick_3.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/contextualMenu_mouseDown_1.png b/packages/office-ui-fabric-react/visualtests/baseline/contextualMenu_mouseDown_1.png
new file mode 100644
index 00000000000000..54a7dd22e6b35a
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/contextualMenu_mouseDown_1.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/contextualMenu_mouseMove_2.png b/packages/office-ui-fabric-react/visualtests/baseline/contextualMenu_mouseMove_2.png
new file mode 100644
index 00000000000000..54a7dd22e6b35a
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/contextualMenu_mouseMove_2.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/detailsList_default_0.png b/packages/office-ui-fabric-react/visualtests/baseline/detailsList_default_0.png
new file mode 100644
index 00000000000000..bb28afbb8bec38
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/detailsList_default_0.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/detailsList_mouseClick_3.png b/packages/office-ui-fabric-react/visualtests/baseline/detailsList_mouseClick_3.png
new file mode 100644
index 00000000000000..86d8ab84f6aad5
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/detailsList_mouseClick_3.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/detailsList_mouseDown_1.png b/packages/office-ui-fabric-react/visualtests/baseline/detailsList_mouseDown_1.png
new file mode 100644
index 00000000000000..a985620fd2fb6b
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/detailsList_mouseDown_1.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/detailsList_mouseMove_2.png b/packages/office-ui-fabric-react/visualtests/baseline/detailsList_mouseMove_2.png
new file mode 100644
index 00000000000000..a985620fd2fb6b
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/detailsList_mouseMove_2.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/dialog_default_0.png b/packages/office-ui-fabric-react/visualtests/baseline/dialog_default_0.png
new file mode 100644
index 00000000000000..ff4ab58f930d47
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/dialog_default_0.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/dialog_mouseClick_1.png b/packages/office-ui-fabric-react/visualtests/baseline/dialog_mouseClick_1.png
new file mode 100644
index 00000000000000..ff4ab58f930d47
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/dialog_mouseClick_1.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/dialog_mouseDown_2.png b/packages/office-ui-fabric-react/visualtests/baseline/dialog_mouseDown_2.png
new file mode 100644
index 00000000000000..ff4ab58f930d47
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/dialog_mouseDown_2.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/dialog_mouseMove_3.png b/packages/office-ui-fabric-react/visualtests/baseline/dialog_mouseMove_3.png
new file mode 100644
index 00000000000000..ff4ab58f930d47
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/dialog_mouseMove_3.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/documentCard_default_0.png b/packages/office-ui-fabric-react/visualtests/baseline/documentCard_default_0.png
new file mode 100644
index 00000000000000..fa6f8266b75226
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/documentCard_default_0.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/documentCard_mouseMove_1.png b/packages/office-ui-fabric-react/visualtests/baseline/documentCard_mouseMove_1.png
new file mode 100644
index 00000000000000..fa6f8266b75226
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/documentCard_mouseMove_1.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/facepile_default_0.png b/packages/office-ui-fabric-react/visualtests/baseline/facepile_default_0.png
new file mode 100644
index 00000000000000..6f8a00a25d83d0
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/facepile_default_0.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/labelDisabled_default_1.png b/packages/office-ui-fabric-react/visualtests/baseline/labelDisabled_default_1.png
new file mode 100644
index 00000000000000..bd0ed062c42ab6
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/labelDisabled_default_1.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/labelRequired_default_2.png b/packages/office-ui-fabric-react/visualtests/baseline/labelRequired_default_2.png
new file mode 100644
index 00000000000000..146a0760cb6e73
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/labelRequired_default_2.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/label_default_0.png b/packages/office-ui-fabric-react/visualtests/baseline/label_default_0.png
new file mode 100644
index 00000000000000..09c3d0b1bb8b90
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/label_default_0.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/toggle_default_0.png b/packages/office-ui-fabric-react/visualtests/baseline/toggle_default_0.png
new file mode 100644
index 00000000000000..6cd18d203ceaf6
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/toggle_default_0.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/toggle_mouseClick_1.png b/packages/office-ui-fabric-react/visualtests/baseline/toggle_mouseClick_1.png
new file mode 100644
index 00000000000000..1ae285dd2bb675
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/toggle_mouseClick_1.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/toggle_mouseDown_3.png b/packages/office-ui-fabric-react/visualtests/baseline/toggle_mouseDown_3.png
new file mode 100644
index 00000000000000..865e4a20951c29
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/toggle_mouseDown_3.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/toggle_mouseMove_2.png b/packages/office-ui-fabric-react/visualtests/baseline/toggle_mouseMove_2.png
new file mode 100644
index 00000000000000..865e4a20951c29
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/toggle_mouseMove_2.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/tooltip_mouseClick_0.png b/packages/office-ui-fabric-react/visualtests/baseline/tooltip_mouseClick_0.png
new file mode 100644
index 00000000000000..cfa3883363e0bb
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/tooltip_mouseClick_0.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/tooltip_mouseDown_2.png b/packages/office-ui-fabric-react/visualtests/baseline/tooltip_mouseDown_2.png
new file mode 100644
index 00000000000000..cfa3883363e0bb
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/tooltip_mouseDown_2.png differ
diff --git a/packages/office-ui-fabric-react/visualtests/baseline/tooltip_mouseMove_1.png b/packages/office-ui-fabric-react/visualtests/baseline/tooltip_mouseMove_1.png
new file mode 100644
index 00000000000000..cfa3883363e0bb
Binary files /dev/null and b/packages/office-ui-fabric-react/visualtests/baseline/tooltip_mouseMove_1.png differ