diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
index ee5d7f936bcf9..aeed91ebf7028 100644
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -15,21 +15,24 @@
 # users just like we do for commit author emails.
 # docs/  docs@example.com
 
+#### Core build stuff
+scripts/ @dzearing
+
 #### Apps
 # component-demo/
 # fabric-website/
 # ssr-tests/
-# test-bundle-button/
+# test-bundle-button/ @dzearing
 # todo-app/
 
 #### Packages
 # packages/example-app-base/
-packages/file-type-icons/  @KatherineThayerMicrosoft @jahnp
+packages/file-type-icons/  @KatherineThayerMicrosoft @jahnp @bigbadcapers
 # packages/icons/
 # packages/jest-serializer-merge-styles/
 # packages/merge-styles/
 # packages/office-ui-fabric-react-tslint/
-packages/styling/  @dzearing
+packages/styling/ @dzearing
 packages/styling/src/interfaces/ @phkuo
 packages/styling/src/styles/ @phkuo
 # packages/utilities/
diff --git a/.npmrc b/.npmrc
index 825c83e09df4d..1df2a6d8579b7 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,2 +1,2 @@
 registry=https://registry.npmjs.org/
-
+package-lock=false
diff --git a/apps/fabric-website/CHANGELOG.json b/apps/fabric-website/CHANGELOG.json
index b7b6161fbe4ac..6a04f853aa244 100644
--- a/apps/fabric-website/CHANGELOG.json
+++ b/apps/fabric-website/CHANGELOG.json
@@ -1,6 +1,96 @@
 {
   "name": "@uifabric/fabric-website",
   "entries": [
+    {
+      "version": "5.4.0",
+      "tag": "@uifabric/fabric-website_v5.4.0",
+      "date": "Wed, 14 Mar 2018 10:28:26 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "8b1625290f6a775f6c64b30617a2593576aacb34",
+            "comment": "Theme generator: exposing to the website."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.64.0 <6.0.0` to `>=5.64.1 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.3.4",
+      "tag": "@uifabric/fabric-website_v5.3.4",
+      "date": "Tue, 13 Mar 2018 20:00:06 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "0904a98019ac935ed975f6188624cc68df477a25",
+            "comment": "Hide left nav on mobile."
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.3.3",
+      "tag": "@uifabric/fabric-website_v5.3.3",
+      "date": "Fri, 09 Mar 2018 11:13:58 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "e67bcbe68c55f057a10c3c51d923554bae81524d",
+            "comment": "Fixed in page nav so that the left nav links will display properly."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.61.0 <6.0.0` to `>=5.62.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.3.2",
+      "tag": "@uifabric/fabric-website_v5.3.2",
+      "date": "Thu, 01 Mar 2018 00:05:10 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "8370f6f5c822189fbd84e13fb285df83b102a308",
+            "comment": "Improved left nav scroll behavior and added fix to webpack so that we can load component pages from our local machines with the UHF."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.56.0 <6.0.0` to `>=5.56.1 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.3.1",
+      "tag": "@uifabric/fabric-website_v5.3.1",
+      "date": "Fri, 16 Feb 2018 11:23:29 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "97593b0e0ff8c69cafbaefe40a3ba6834572eddf",
+            "comment": "Left nav: Less jittery and component pages load in full height."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.50.0 <6.0.0` to `>=5.51.0 <6.0.0`"
+          }
+        ]
+      }
+    },
     {
       "version": "5.3.0",
       "tag": "@uifabric/fabric-website_v5.3.0",
diff --git a/apps/fabric-website/CHANGELOG.md b/apps/fabric-website/CHANGELOG.md
index 5f789e2e71bb9..251c264c012b0 100644
--- a/apps/fabric-website/CHANGELOG.md
+++ b/apps/fabric-website/CHANGELOG.md
@@ -1,6 +1,41 @@
 # Change Log - @uifabric/fabric-website
 
-This log was last generated on Mon, 22 Jan 2018 11:14:27 GMT and should not be manually modified.
+This log was last generated on Wed, 14 Mar 2018 10:28:26 GMT and should not be manually modified.
+
+## 5.4.0
+Wed, 14 Mar 2018 10:28:26 GMT
+
+### Minor changes
+
+- Theme generator: exposing to the website.
+
+## 5.3.4
+Tue, 13 Mar 2018 20:00:06 GMT
+
+### Patches
+
+- Hide left nav on mobile.
+
+## 5.3.3
+Fri, 09 Mar 2018 11:13:58 GMT
+
+### Patches
+
+- Fixed in page nav so that the left nav links will display properly.
+
+## 5.3.2
+Thu, 01 Mar 2018 00:05:10 GMT
+
+### Patches
+
+- Improved left nav scroll behavior and added fix to webpack so that we can load component pages from our local machines with the UHF.
+
+## 5.3.1
+Fri, 16 Feb 2018 11:23:29 GMT
+
+### Patches
+
+- Left nav: Less jittery and component pages load in full height.
 
 ## 5.3.0
 Mon, 22 Jan 2018 11:14:27 GMT
diff --git a/apps/fabric-website/package.json b/apps/fabric-website/package.json
index fb05e91dcafa9..831e3c845ebe2 100644
--- a/apps/fabric-website/package.json
+++ b/apps/fabric-website/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uifabric/fabric-website",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "Reusable React components for building experiences for Office 365.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -39,7 +39,7 @@
     "@microsoft/load-themed-styles": "^1.7.13",
     "color-functions": "1.1.0",
     "json-loader": "^0.5.7",
-    "office-ui-fabric-react": ">=5.45.1 <6.0.0",
+    "office-ui-fabric-react": ">=5.64.3 <6.0.0",
     "tslib": "^1.7.1"
   }
 }
\ No newline at end of file
diff --git a/apps/fabric-website/src/components/App/App.scss b/apps/fabric-website/src/components/App/App.scss
index 088921c759926..247d3048affa8 100644
--- a/apps/fabric-website/src/components/App/App.scss
+++ b/apps/fabric-website/src/components/App/App.scss
@@ -4,31 +4,30 @@
 :global {
   // Element that wraps everything except for the header
   .App-wrapper {
-    display: flex;
-    flex-direction: column;
     margin: 0 auto;
     max-width: $App-maximumWidth;
+    position: relative;
   }
 
   // Nav is hidden off screen by default
   .App-nav {
     -webkit-overflow-scrolling: touch; // Improves scrolling performance
     overflow-y: auto;
-    position: fixed;
-    top: $Header-height;
+    max-height: 100vh;
+    height: 100vh; // fallback height if not set in JS style attribute
     width: $Nav-width;
     @include ms-float(left);
-    z-index: $ms-zIndex-1;
+    z-index: 999; // This z-index needs to be high to prevent jittery scrolling in Edge.
   }
 
   .App-content {
     @include contentPadding();
     background-color: $ms-color-neutralLighter;
-    flex-grow: 1;
     left: 0;
     overflow: hidden;
     position: relative;
     transition: all $ms-animation-duration-2 $ms-animation-ease-1;
+    min-height: calc(100vh - #{$Header-height-full-uhf});
 
     @include high-contrast {
       border-right: 1px solid WindowText;
@@ -46,19 +45,14 @@
       @include ms-padding-left($App-padding-left-lg);
     }
 
-    .App-wrapper {
-      flex-direction: row;
-    }
-
     .App-nav {
-      top: $Header-height*2;
+      top: 0;
       bottom: 0;
       overflow-y: auto;
       overflow-x: hidden;
     }
 
     .App-content {
-      flex-grow: unset;
       max-width: calc(100% - #{$Nav-width}); // IE needs max-width, it was ignoring width
       width: calc(100% - #{$Nav-width});
       @include ms-left($Nav-width);
diff --git a/apps/fabric-website/src/components/App/App.tsx b/apps/fabric-website/src/components/App/App.tsx
index 5611b0d616a57..e8f2ddcc33876 100644
--- a/apps/fabric-website/src/components/App/App.tsx
+++ b/apps/fabric-website/src/components/App/App.tsx
@@ -43,12 +43,10 @@ export class App extends React.Component<IAppProps, any> {
 
   public render() {
     let { navHeight } = this.state;
-    let appContentTop = this._appContentRect ? this._appContentRect.top : 100;
-    // Using appContentTop as a reference to match instead of 'unset' because it does not work in IE.
-    let navTop: string = this.state.isAttached ? '0' : appContentTop.toString();
+    let navPosition: 'fixed' | 'absolute' = this.state.isAttached ? 'fixed' : 'absolute';
     let navStyle = {
-      top: navTop,
-      height: navHeight
+      height: navHeight,
+      position: navPosition
     };
 
     return (
@@ -80,7 +78,7 @@ export class App extends React.Component<IAppProps, any> {
   @autobind
   private _handleNavPositioning() {
     let { isAttached, navHeight } = this.state;
-    this._appContentRect = this._appContent.getBoundingClientRect();
+    this._appContentRect = this._appContent && this._appContent.getBoundingClientRect();
     const viewPortHeight = window.innerHeight;
     isAttached = AttachedScrollUtility.shouldComponentAttach(isAttached, this._attachedScrollThreshold);
     navHeight = this._calculateNavHeight(viewPortHeight, this._appContentRect, navHeight);
diff --git a/apps/fabric-website/src/components/App/AppState.tsx b/apps/fabric-website/src/components/App/AppState.tsx
index 4037e4e10691f..e27d0c9e6c9bc 100644
--- a/apps/fabric-website/src/components/App/AppState.tsx
+++ b/apps/fabric-website/src/components/App/AppState.tsx
@@ -10,11 +10,22 @@ export interface IAppState {
   pages: INavPage[];
 }
 
+// Giving the loading component a height so that the left nav loads in full screen and there is less flashing as the component page loads.
+const loadingPageHeight: string = 'calc(100vh - 100px)';
 const LoadingComponent = (props: any): JSX.Element => {
   return (
-    <ComponentPage>
-      <PageHeader pageTitle={ props.title } backgroundColor='#038387' />
-    </ComponentPage>
+    <div style={ { height: loadingPageHeight } }>
+      <ComponentPage>
+        <PageHeader pageTitle={ props.title } backgroundColor='#038387' />
+      </ComponentPage>
+    </div>
+  );
+};
+const StylesLoadingComponent = (props: any): JSX.Element => {
+  return (
+    <div style={ { height: loadingPageHeight } }>
+      <PageHeader pageTitle={ props.title } backgroundColor='#006f94' />
+    </div>
   );
 };
 
@@ -46,47 +57,55 @@ export const AppState: IAppState = {
         {
           title: 'Animations',
           url: '#/styles/animations',
+          component: () => <StylesLoadingComponent title='Animations' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Styles/AnimationsPage/AnimationsPage').AnimationsPage))
         },
         {
           title: 'Brand icons',
           url: '#/styles/brand-icons',
+          component: () => <StylesLoadingComponent title='Brand icons' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Styles/BrandIconsPage/BrandIconsPage').BrandIconsPage))
         },
         {
           title: 'Colors',
           url: '#/styles/colors',
+          component: () => <StylesLoadingComponent title='Colors' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Styles/ColorsPage/ColorsPage').ColorsPage))
         },
         {
           title: 'Icons',
           url: '#/styles/icons',
+          component: () => <StylesLoadingComponent title='Icons' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Styles/IconsPage/IconsPage').IconsPage))
         },
         {
           title: 'Layout',
           url: '#/styles/layout',
+          component: () => <StylesLoadingComponent title='Layout' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Styles/LayoutPage/LayoutPage').LayoutPage))
         },
         {
           title: 'Localization',
           url: '#/styles/localization',
+          component: () => <StylesLoadingComponent title='Localization' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Styles/LocalizationPage/LocalizationPage').LocalizationPage))
         },
         {
-          title: 'Beta Theme Generator',
-          url: '#/styles/themeGenerator',
-          isHiddenFromMainNav: true,
+          title: 'Theme generator',
+          url: '#/styles/themegenerator',
+          component: () => <StylesLoadingComponent title='Theme generator' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Styles/ThemeGeneratorToolPage/ThemeGeneratorToolPage').ThemeGeneratorToolPage))
         },
         {
           title: 'Typography',
           url: '#/styles/typography',
+          component: () => <StylesLoadingComponent title='Typography' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Styles/TypographyPage/TypographyPage').TypographyPage))
         },
         {
           title: 'Utilities',
           url: '#/styles/utilities',
+          component: () => <StylesLoadingComponent title='Utilities' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Styles/UtilitiesPage/UtilitiesPage').UtilitiesPage))
         }
       ]
@@ -134,6 +153,12 @@ export const AppState: IAppState = {
           component: () => <LoadingComponent title='Checkbox' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Components/CheckboxComponentPage').CheckboxComponentPage))
         },
+        {
+          title: 'Coachmark',
+          url: '#/components/coachmark',
+          component: () => <LoadingComponent title='Coachmark' />,
+          getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Components/CoachmarkComponentPage').CoachmarkComponentPage))
+        },
         {
           title: 'ChoiceGroup',
           url: '#/components/choicegroup',
diff --git a/apps/fabric-website/src/components/IconGrid/IconGrid.tsx b/apps/fabric-website/src/components/IconGrid/IconGrid.tsx
index ece39ae5f5700..08879b64d9e0d 100644
--- a/apps/fabric-website/src/components/IconGrid/IconGrid.tsx
+++ b/apps/fabric-website/src/components/IconGrid/IconGrid.tsx
@@ -32,7 +32,7 @@ export class IconGrid extends React.Component<IIconGridProps, IIconGridState> {
 
     return (
       <div>
-        <SearchBox labelText='Search icons' value={ searchQuery } onChange={ this._onSearchQueryChanged.bind(this) } className={ styles.searchBox } />
+        <SearchBox placeholder='Search icons' value={ searchQuery } onChange={ this._onSearchQueryChanged.bind(this) } className={ styles.searchBox } />
         <ul className={ styles.grid }>
           { icons
             .filter(icon => icon.name.toLowerCase().indexOf(searchQuery.toLowerCase()) !== -1)
diff --git a/apps/fabric-website/src/components/Nav/Nav.module.scss b/apps/fabric-website/src/components/Nav/Nav.module.scss
index f6aa96b879caf..24ec50dcca26c 100644
--- a/apps/fabric-website/src/components/Nav/Nav.module.scss
+++ b/apps/fabric-website/src/components/Nav/Nav.module.scss
@@ -96,3 +96,9 @@ $nav-group-header-height: 40px;
     }
   }
 }
+
+@media only screen and (max-width: $uhf-screen-max-mobile) {
+  .nav {
+    display: none;
+  }
+}
\ No newline at end of file
diff --git a/apps/fabric-website/src/components/Nav/Nav.tsx b/apps/fabric-website/src/components/Nav/Nav.tsx
index 1ca61b4a5c929..df836511d6eab 100644
--- a/apps/fabric-website/src/components/Nav/Nav.tsx
+++ b/apps/fabric-website/src/components/Nav/Nav.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { css } from 'office-ui-fabric-react/lib/Utilities';
 import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
+import { getPathMinusLastHash } from '../../utilities/pageroute';
 import * as stylesImport from './Nav.module.scss';
 const styles: any = stylesImport;
 import {
@@ -69,7 +70,7 @@ export class Nav extends React.Component<INavProps, INavState> {
     const links: React.ReactElement<{}>[] = pages
       .filter(page => !page.hasOwnProperty('isHiddenFromMainNav'))
       .map(
-      (page: INavPage, linkIndex: number) => this._renderLink(page, linkIndex)
+        (page: INavPage, linkIndex: number) => this._renderLink(page, linkIndex)
       );
 
     return (
@@ -91,25 +92,19 @@ function _isPageActive(page: INavPage): boolean {
   }
   _urlResolver.href = page.url || '';
   const target: string = _urlResolver.href;
+  let path = location.href;
 
   if (location.protocol + '//' + location.host + location.pathname === target) {
     return true;
   }
 
-  if (location.href === target) {
-    return true;
+  const hashCount = path.split('#').length - 1;
+  if (hashCount > 1) {
+    path = getPathMinusLastHash(path);
   }
 
-  if (location.hash) {
-    // Match the hash to the url.
-    if (location.hash === page.url) {
-      return true;
-    }
-
-    // Match a rebased url. (e.g. #foo becomes http://hostname/foo)
-    _urlResolver.href = location.hash.substring(1);
-
-    return _urlResolver.href === target;
+  if (path === target) {
+    return true;
   }
 
   return false;
diff --git a/apps/fabric-website/src/components/PageHeader/PageHeader.tsx b/apps/fabric-website/src/components/PageHeader/PageHeader.tsx
index 51833d676efc5..bafc2d4ce182d 100644
--- a/apps/fabric-website/src/components/PageHeader/PageHeader.tsx
+++ b/apps/fabric-website/src/components/PageHeader/PageHeader.tsx
@@ -2,8 +2,8 @@ import * as React from 'react';
 import { css, BaseComponent, IBaseProps } from 'office-ui-fabric-react/lib/Utilities';
 import * as stylesImport from './PageHeader.module.scss';
 const styles: any = stylesImport;
-import { getPageRouteFromState } from '../../utilities/pageroute';
 import AttachedScrollUtility from '../../utilities/AttachedScrollUtility';
+import { getPathMinusLastHash } from '../../utilities/pageroute';
 import { PageHeaderLink } from '../../components/PageHeaderLink/PageHeaderLink';
 import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
 
@@ -84,9 +84,6 @@ export class PageHeader extends BaseComponent<IPageHeaderProps, IPageHeaderState
   public render() {
     let { pageTitle, links, backgroundColor, backgroundImage } = this.props;
     let { isAttached } = this.state;
-    let baseRoute: string = getPageRouteFromState(
-      this.props.pageTitle
-    );
     let inPageNav;
     let backgroundStyle = {
       bottom: this.state.headerBottom,
@@ -102,7 +99,7 @@ export class PageHeader extends BaseComponent<IPageHeaderProps, IPageHeaderState
             <ul>
               { links.map((link, linkIndex) => (
                 <li key={ linkIndex }>
-                  <PageHeaderLink href={ baseRoute + '#' + link.location } text={ link.text } />
+                  <PageHeaderLink href={ this._getPagePath(link) } text={ link.text } />
                 </li>
               )) }
             </ul>
@@ -143,4 +140,12 @@ export class PageHeader extends BaseComponent<IPageHeaderProps, IPageHeaderState
       headerTop: headerTop
     });
   }
+
+  private _getPagePath(link): string {
+    let path = location.hash;
+    // This makes sure that location hash changes don't append
+    path = getPathMinusLastHash(path);
+
+    return path + '#' + link.location;
+  }
 }
diff --git a/apps/fabric-website/src/pages/Components/CoachmarkComponentPage.tsx b/apps/fabric-website/src/pages/Components/CoachmarkComponentPage.tsx
new file mode 100644
index 0000000000000..6096e06988736
--- /dev/null
+++ b/apps/fabric-website/src/pages/Components/CoachmarkComponentPage.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { CoachmarkPage } from 'office-ui-fabric-react/lib/components/Coachmark/CoachmarkPage';
+import { PageHeader } from '../../components/PageHeader/PageHeader';
+import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
+const pageStyles: any = require('../PageStyles.module.scss');
+
+export class CoachmarkComponentPage extends React.Component<any, any> {
+  public render() {
+    return (
+      <div ref='pageElement' className={ pageStyles.basePage }>
+        <ComponentPage>
+          <PageHeader pageTitle='Coachmark' backgroundColor='#038387'
+            links={
+              [
+                {
+                  'text': 'Overview',
+                  'location': 'Overview'
+                },
+                {
+                  'text': 'Best Practices',
+                  'location': 'BestPractices'
+                },
+                {
+                  'text': 'Variants',
+                  'location': 'Variants'
+                },
+                {
+                  'text': 'Implementation',
+                  'location': 'Implementation'
+                }
+              ]
+            } />
+          <CoachmarkPage isHeaderVisible={ false } />
+        </ComponentPage>
+      </div>
+    );
+  }
+}
diff --git a/apps/fabric-website/src/pages/ResourcesPage/ResourcesPage.tsx b/apps/fabric-website/src/pages/ResourcesPage/ResourcesPage.tsx
index a898a09daa306..3a3629c0ff2d8 100644
--- a/apps/fabric-website/src/pages/ResourcesPage/ResourcesPage.tsx
+++ b/apps/fabric-website/src/pages/ResourcesPage/ResourcesPage.tsx
@@ -59,6 +59,12 @@ export class ResourcesPage extends React.Component<any, any> {
                   <li><a className={ styles.relatedLink } href='https://static2.sharepointonline.com/files/fabric/fabric-website/files/segoeui_fabricmdl2_icon_fonts.zip'>Segoe UI and Fabric MDL2 icon font</a></li>
                   <li><a className={ styles.relatedLink } href='https://microsoft.sharepoint.com/teams/OfficeUIFabric97/SitePages/Fabric%20MDL2%20Icons.aspx'>Segoe UI and Fabric MDL2 icon font (Microsoft employees)</a></li>
                 </ul>
+
+                <h3>Theme generator</h3>
+                <p>This tool helps you easily create all the shades and slots for a custom theme.</p>
+                <ul>
+                  <li><a className={ styles.relatedLink } href='#/styles/themegenerator'>Theme generator</a></li>
+                </ul>
               </div>
             </div>
           </div>
diff --git a/apps/fabric-website/src/pages/Styles/ColorsPage/ColorsPage.tsx b/apps/fabric-website/src/pages/Styles/ColorsPage/ColorsPage.tsx
index e92d5cfaa5d8d..62125bd95e092 100644
--- a/apps/fabric-website/src/pages/Styles/ColorsPage/ColorsPage.tsx
+++ b/apps/fabric-website/src/pages/Styles/ColorsPage/ColorsPage.tsx
@@ -38,7 +38,7 @@ export class ColorsPage extends React.Component<any, any> {
         />
         <div className={ css(pageStyles.u_maxTextWidth, styles.overview) }>
           <h2 id='Overview'>Overview</h2>
-          <p>Fabric includes 9 theme colors and 11 neutral colors. Each has helper classes for text, background, border, and hover states. When selecting colors, refer to the <a className={ styles.colorsPageLink } href={ 'https://static2.sharepointonline.com/files/fabric/fabric-website/files/coloraccessibility_29sep2016.pdf' }>color accessibility guidance (PDF)</a> to ensure that your text can be ready by everyone.</p>
+          <p>Fabric includes 9 theme colors and 11 neutral colors. Each has helper classes for text, background, border, and hover states. When selecting colors, refer to the <a className={ styles.colorsPageLink } href={ 'https://static2.sharepointonline.com/files/fabric/fabric-website/files/coloraccessibility_29sep2016.pdf' }>color accessibility guidance (PDF)</a> to ensure that your text can be ready by everyone. If you need to customize your theme, see the <a className={ styles.colorsPageLink } href={ '#/styles/themegenerator' }>Theme generator</a>.</p>
         </div>
         <h2 id='implementation'>Implementation</h2>
         <p>Colors can be applied to text, backgrounds, or borders using the following class name conventions:</p>
diff --git a/apps/fabric-website/src/pages/Styles/ThemeGeneratorToolPage/ThemeGeneratorToolPage.tsx b/apps/fabric-website/src/pages/Styles/ThemeGeneratorToolPage/ThemeGeneratorToolPage.tsx
index 54a960c3bd44c..e69897d0ad143 100644
--- a/apps/fabric-website/src/pages/Styles/ThemeGeneratorToolPage/ThemeGeneratorToolPage.tsx
+++ b/apps/fabric-website/src/pages/Styles/ThemeGeneratorToolPage/ThemeGeneratorToolPage.tsx
@@ -1,15 +1,41 @@
 import * as React from 'react';
 import { PageHeader } from '../../../components/PageHeader/PageHeader';
-
 import { ThemeGeneratorPage } from 'office-ui-fabric-react/lib/components/ThemeGenerator/ThemeGeneratorPage';
+const pageStyles: any = require('../../PageStyles.module.scss');
 
 export class ThemeGeneratorToolPage extends React.Component<any, any> {
   public render() {
     return (
-      <div>
+      <div
+        className={ pageStyles.basePage }
+      >
         <PageHeader
           pageTitle='Theme Generator'
           backgroundColor='#006f94'
+          links={
+            [
+              {
+                'text': 'Overview',
+                'location': 'Overview'
+              },
+              {
+                'text': 'Output',
+                'location': 'Output'
+              },
+              {
+                'text': 'Fabric palette',
+                'location': 'Fabric palette'
+              },
+              {
+                'text': 'Samples',
+                'location': 'Samples'
+              },
+              {
+                'text': 'Accessibility',
+                'location': 'Accessibility'
+              }
+            ]
+          }
         />
 
         <ThemeGeneratorPage />
diff --git a/apps/fabric-website/src/styles/_variables.scss b/apps/fabric-website/src/styles/_variables.scss
index bff860e6ce658..c1860a81bec57 100644
--- a/apps/fabric-website/src/styles/_variables.scss
+++ b/apps/fabric-website/src/styles/_variables.scss
@@ -59,6 +59,7 @@ $CodeBlock-toggleButtonHeight: 28px;
 
 $Header-backgroundColor: $ms-color-black;
 $Header-height: 50px;
+$Header-height-full-uhf: $Header-height*2;
 
 $Nav-width: 208px;
 
diff --git a/apps/fabric-website/src/utilities/pageroute.ts b/apps/fabric-website/src/utilities/pageroute.ts
index 62c04a1498bfd..1e19957463ec6 100644
--- a/apps/fabric-website/src/utilities/pageroute.ts
+++ b/apps/fabric-website/src/utilities/pageroute.ts
@@ -1,7 +1,11 @@
 
 /*
-  Retreive the route URL for a page in a group from the the AppState
+  Retreive the route URL for a page without the string after the last hash.
 */
-export function getPageRouteFromState(pageName: string): string {
-  return '';
+export function getPathMinusLastHash(path: string): string {
+  const hashIndex = path.lastIndexOf('#');
+  if (hashIndex > 0) {
+    path = path.substr(0, hashIndex);
+  }
+  return path;
 }
\ No newline at end of file
diff --git a/apps/fabric-website/tslint.json b/apps/fabric-website/tslint.json
index c1579f8b41531..150bae09e1c3e 100644
--- a/apps/fabric-website/tslint.json
+++ b/apps/fabric-website/tslint.json
@@ -14,6 +14,7 @@
     "jsx-alignment": false,
     "jsx-ban-props": false,
     "jsx-no-string-ref": false,
-    "jsx-no-bind": false
+    "jsx-no-bind": false,
+    "prefer-const": false
   }
 }
\ No newline at end of file
diff --git a/apps/fabric-website/webpack.uhf.serve.config.js b/apps/fabric-website/webpack.uhf.serve.config.js
index 4e0fa2d8a562c..a88cccf14be92 100644
--- a/apps/fabric-website/webpack.uhf.serve.config.js
+++ b/apps/fabric-website/webpack.uhf.serve.config.js
@@ -14,20 +14,22 @@ const version = require('./package.json').version;
 const isProduction = process.argv.indexOf('--production') > -1;
 const minFileNamePart = isProduction ? '.min' : '';
 const entryPointFilename = 'fabric-sitev5';
+const devServer = {
+  host: HOST_NAME,
+  disableHostCheck: true,
+  port: 4324
+}
 
 module.exports = resources.createServeConfig({
   entry: './src/root.tsx',
   output: {
     filename: entryPointFilename + '.js',
     path: path.join(__dirname, 'dist'),
-    publicPath: '/dist/',
+    publicPath: 'http://'+ HOST_NAME +':' + devServer.port + '/dist/',
     chunkFilename: `${entryPointFilename}-${version}-[name]${minFileNamePart}.js`
   },
 
-  devServer: {
-    host: HOST_NAME,
-    disableHostCheck: true
-  },
+  devServer: devServer,
 
   externals: {
     'react': 'React',
diff --git a/apps/ssr-tests/CHANGELOG.json b/apps/ssr-tests/CHANGELOG.json
new file mode 100644
index 0000000000000..a7493db923324
--- /dev/null
+++ b/apps/ssr-tests/CHANGELOG.json
@@ -0,0 +1,17 @@
+{
+  "name": "ssr-tests",
+  "entries": [
+    {
+      "version": "5.0.1",
+      "tag": "ssr-tests_v5.0.1",
+      "date": "Mon, 12 Mar 2018 06:29:20 GMT",
+      "comments": {
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.62.1 <6.0.0` to `>=5.63.0 <6.0.0`"
+          }
+        ]
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/ssr-tests/CHANGELOG.md b/apps/ssr-tests/CHANGELOG.md
new file mode 100644
index 0000000000000..00e6e7475291d
--- /dev/null
+++ b/apps/ssr-tests/CHANGELOG.md
@@ -0,0 +1,9 @@
+# Change Log - ssr-tests
+
+This log was last generated on Mon, 12 Mar 2018 06:29:20 GMT and should not be manually modified.
+
+## 5.0.1
+Mon, 12 Mar 2018 06:29:20 GMT
+
+*Initial release*
+
diff --git a/apps/ssr-tests/package.json b/apps/ssr-tests/package.json
index d93a62255b90c..2d14e8a95200a 100644
--- a/apps/ssr-tests/package.json
+++ b/apps/ssr-tests/package.json
@@ -21,7 +21,7 @@
     "@types/mocha": "2.2.39",
     "@types/webpack-env": "1.13.0",
     "mocha": "^3.3.0",
-    "office-ui-fabric-react": ">=5.45.1 <6.0.0",
+    "office-ui-fabric-react": ">=5.64.3 <6.0.0",
     "raw-loader": "^0.5.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
diff --git a/apps/test-bundle-button/CHANGELOG.json b/apps/test-bundle-button/CHANGELOG.json
new file mode 100644
index 0000000000000..685744c0f8f93
--- /dev/null
+++ b/apps/test-bundle-button/CHANGELOG.json
@@ -0,0 +1,17 @@
+{
+  "name": "test-bundle-button",
+  "entries": [
+    {
+      "version": "5.0.1",
+      "tag": "test-bundle-button_v5.0.1",
+      "date": "Mon, 12 Mar 2018 06:29:20 GMT",
+      "comments": {
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.62.1 <6.0.0` to `>=5.63.0 <6.0.0`"
+          }
+        ]
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/test-bundle-button/CHANGELOG.md b/apps/test-bundle-button/CHANGELOG.md
new file mode 100644
index 0000000000000..00ae70f82d049
--- /dev/null
+++ b/apps/test-bundle-button/CHANGELOG.md
@@ -0,0 +1,9 @@
+# Change Log - test-bundle-button
+
+This log was last generated on Mon, 12 Mar 2018 06:29:20 GMT and should not be manually modified.
+
+## 5.0.1
+Mon, 12 Mar 2018 06:29:20 GMT
+
+*Initial release*
+
diff --git a/apps/test-bundle-button/package.json b/apps/test-bundle-button/package.json
index 423e47748dc17..40d2365aa19f0 100644
--- a/apps/test-bundle-button/package.json
+++ b/apps/test-bundle-button/package.json
@@ -25,7 +25,7 @@
   "dependencies": {
     "react": "^0.14 || ^15.0.1-0 || ^16.0.0-0",
     "react-dom": "^0.14 || ^15.0.1-0 || ^16.0.0-0",
-    "office-ui-fabric-react": ">=5.45.1 <6.0.0",
+    "office-ui-fabric-react": ">=5.64.3 <6.0.0",
     "tslib": "^1.7.1"
   }
 }
\ No newline at end of file
diff --git a/apps/test-bundle-button/tsconfig.json b/apps/test-bundle-button/tsconfig.json
index 39d960a137572..ae0d33a8e9be2 100644
--- a/apps/test-bundle-button/tsconfig.json
+++ b/apps/test-bundle-button/tsconfig.json
@@ -11,7 +11,7 @@
     "importHelpers": true,
     "forceConsistentCasingInFileNames": true,
     "moduleResolution": "node",
-    "preserveConstEnums": true,
+    "preserveConstEnums": false,
     "types": [
       "webpack-env"
     ],
diff --git a/apps/todo-app/CHANGELOG.json b/apps/todo-app/CHANGELOG.json
new file mode 100644
index 0000000000000..a74c6bfd883d1
--- /dev/null
+++ b/apps/todo-app/CHANGELOG.json
@@ -0,0 +1,17 @@
+{
+  "name": "todo-app",
+  "entries": [
+    {
+      "version": "5.0.1",
+      "tag": "todo-app_v5.0.1",
+      "date": "Mon, 12 Mar 2018 06:29:20 GMT",
+      "comments": {
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.62.1 <6.0.0` to `>=5.63.0 <6.0.0`"
+          }
+        ]
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/todo-app/CHANGELOG.md b/apps/todo-app/CHANGELOG.md
new file mode 100644
index 0000000000000..9248491dc4d8d
--- /dev/null
+++ b/apps/todo-app/CHANGELOG.md
@@ -0,0 +1,9 @@
+# Change Log - todo-app
+
+This log was last generated on Mon, 12 Mar 2018 06:29:20 GMT and should not be manually modified.
+
+## 5.0.1
+Mon, 12 Mar 2018 06:29:20 GMT
+
+*Initial release*
+
diff --git a/apps/todo-app/package.json b/apps/todo-app/package.json
index 86563e4c8da56..49b3155b3d942 100644
--- a/apps/todo-app/package.json
+++ b/apps/todo-app/package.json
@@ -19,10 +19,10 @@
     "@microsoft/load-themed-styles": "^1.7.13",
     "es6-promise": "^4.1.0",
     "immutability-helper": "^2.6.4",
-    "office-ui-fabric-react": ">=5.45.1 <6.0.0",
+    "office-ui-fabric-react": ">=5.64.3 <6.0.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "typescript": "2.6.2",
+    "typescript": "2.7.2",
     "tslib": "^1.7.1"
   }
 }
\ No newline at end of file
diff --git a/apps/todo-app/src/DataProvider.ts b/apps/todo-app/src/DataProvider.ts
index 630f1a4278f06..368a058c4c009 100644
--- a/apps/todo-app/src/DataProvider.ts
+++ b/apps/todo-app/src/DataProvider.ts
@@ -110,7 +110,7 @@ export default class DataProvider implements IDataProvider {
    */
   public toggleComplete(item: ITodoItem): Promise<ITodoItem[]> {
     // Create a new Item in which the PercentComplete value has been changed.
-    const newItem: ITodoItem = update(item, {
+    const newItem: ITodoItem = (update as any)(item, {
       isComplete: { $set: item.isComplete === true ? false : true }
     });
 
diff --git a/apps/todo-app/src/components/TodoForm.tsx b/apps/todo-app/src/components/TodoForm.tsx
index 72b714bc40964..f2c71d9439c07 100644
--- a/apps/todo-app/src/components/TodoForm.tsx
+++ b/apps/todo-app/src/components/TodoForm.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { autobind, BaseComponent, IBaseProps } from 'office-ui-fabric-react/lib/Utilities';
+import { autobind, BaseComponent, IBaseProps, createRef } from 'office-ui-fabric-react/lib/Utilities';
 import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
 import { TextField, ITextField } from 'office-ui-fabric-react/lib/TextField';
 import * as stylesImport from './Todo.scss';
@@ -42,7 +42,7 @@ export interface ITodoFormState {
  * Button: https://fabricreact.azurewebsites.net/fabric-react/master/#/examples/button
  */
 export default class TodoForm extends BaseComponent<ITodoFormProps, ITodoFormState> {
-  private _textField: ITextField;
+  private _textField = createRef<ITextField>();
 
   constructor(props: ITodoFormProps) {
     super(props);
@@ -62,7 +62,7 @@ export default class TodoForm extends BaseComponent<ITodoFormProps, ITodoFormSta
         <TextField
           className={ styles.textField }
           value={ this.state.inputValue }
-          componentRef={ this._resolveRef('_textField') }
+          componentRef={ this._textField }
           placeholder={ strings.inputBoxPlaceholder }
           onBeforeChange={ this._onBeforeTextFieldChange }
           autoComplete='off'
@@ -82,18 +82,23 @@ export default class TodoForm extends BaseComponent<ITodoFormProps, ITodoFormSta
   private _onSubmit(event: React.FormEvent<HTMLElement>): void {
     event.preventDefault();
 
-    if (!this._getTitleErrorMessage(this._textField.value || '')) {
+    const { value: textField } = this._textField;
+    if (!textField) {
+      return;
+    }
+
+    if (!this._getTitleErrorMessage(textField.value || '')) {
       this.setState({
         inputValue: ''
       } as ITodoFormState);
 
-      this.props.onSubmit(this._textField.value || '');
+      this.props.onSubmit(textField.value || '');
     } else {
       this.setState({
         errorMessage: this._getTitleErrorMessage(this.state.inputValue)
       } as ITodoFormState);
 
-      this._textField.focus();
+      textField.focus();
     }
   }
 
diff --git a/apps/todo-app/src/components/TodoItem.tsx b/apps/todo-app/src/components/TodoItem.tsx
index dbb215e6ab296..79e4ec8bcd066 100644
--- a/apps/todo-app/src/components/TodoItem.tsx
+++ b/apps/todo-app/src/components/TodoItem.tsx
@@ -20,8 +20,8 @@ import strings from './../strings';
 export default class TodoItem extends React.Component<ITodoItemProps, {}> {
   private static ANIMATION_TIMEOUT = 200;
 
-  private _animationTimeoutId: number;
-  private _rowItem: HTMLDivElement;
+  private _animationTimeoutId!: number;
+  private _rowItem!: HTMLDivElement;
 
   constructor(props: ITodoItemProps) {
     super(props);
diff --git a/apps/todo-app/tslint.json b/apps/todo-app/tslint.json
index cd3b575b4545f..640af822902da 100644
--- a/apps/todo-app/tslint.json
+++ b/apps/todo-app/tslint.json
@@ -6,6 +6,7 @@
     "no-any": false,
     "typedef": [
       false
-    ]
+    ],
+    "prefer-const": false
   }
 }
\ No newline at end of file
diff --git a/apps/vr-tests/CHANGELOG.json b/apps/vr-tests/CHANGELOG.json
new file mode 100644
index 0000000000000..235caca4618d0
--- /dev/null
+++ b/apps/vr-tests/CHANGELOG.json
@@ -0,0 +1,17 @@
+{
+  "name": "vr-tests",
+  "entries": [
+    {
+      "version": "5.0.1",
+      "tag": "vr-tests_v5.0.1",
+      "date": "Mon, 12 Mar 2018 06:29:20 GMT",
+      "comments": {
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.62.1 <6.0.0` to `>=5.63.0 <6.0.0`"
+          }
+        ]
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/apps/vr-tests/CHANGELOG.md b/apps/vr-tests/CHANGELOG.md
new file mode 100644
index 0000000000000..e0559aaa4ce10
--- /dev/null
+++ b/apps/vr-tests/CHANGELOG.md
@@ -0,0 +1,9 @@
+# Change Log - vr-tests
+
+This log was last generated on Mon, 12 Mar 2018 06:29:20 GMT and should not be manually modified.
+
+## 5.0.1
+Mon, 12 Mar 2018 06:29:20 GMT
+
+*Initial release*
+
diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json
index 87619aa70d8f7..0a56de76ce057 100644
--- a/apps/vr-tests/package.json
+++ b/apps/vr-tests/package.json
@@ -23,15 +23,15 @@
     "style-loader": "^0.19.0",
     "awesome-typescript-loader": "^3.2.3",
     "office-ui-fabric-react-tslint": ">=5.0.0 <6.0.0",
-    "screener-storybook": "^0.9.2",
+    "screener-storybook": "^0.11.1",
     "screener-runner": "^0.6.19",
     "storybook-readme": "=3.0.6"
   },
   "dependencies": {
-    "office-ui-fabric-react": ">=5.45.1 <6.0.0",
+    "office-ui-fabric-react": ">=5.64.3 <6.0.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
-    "typescript": "2.6.2",
+    "typescript": "2.7.2",
     "tslib": "^1.7.1"
   }
 }
\ No newline at end of file
diff --git a/apps/vr-tests/src/stories/Button.stories.tsx b/apps/vr-tests/src/stories/Button.stories.tsx
index 00748de83e905..ce9b0125a0087 100644
--- a/apps/vr-tests/src/stories/Button.stories.tsx
+++ b/apps/vr-tests/src/stories/Button.stories.tsx
@@ -22,12 +22,16 @@ const commandProps: IButtonProps = {
       {
         key: 'emailMessage',
         name: 'Email message',
-        icon: 'Mail'
+        iconProps: {
+          iconName: 'Mail'
+        }
       },
       {
         key: 'calendarEvent',
         name: 'Calendar event',
-        icon: 'Calendar'
+        iconProps: {
+          iconName: 'Calendar'
+        }
       }
     ]
   }
@@ -137,6 +141,7 @@ storiesOf('Button Split', module)
         .mouseDown('.ms-Button:nth-child(1)')
         .snapshot('pressed main', { cropTo: '.testWrapper' })
         .hover('.ms-Button') // reset mouseDown
+        .mouseUp('.ms-Button:nth-child(2)')
         .mouseDown('.ms-Button:nth-child(2)')
         .snapshot('pressed split', { cropTo: '.testWrapper' })
         .click('.ms-Button:nth-child(2)')
diff --git a/apps/vr-tests/src/stories/ChoiceGroup.stories.tsx b/apps/vr-tests/src/stories/ChoiceGroup.stories.tsx
index b3facd8fe5b42..21fa7b976c834 100644
--- a/apps/vr-tests/src/stories/ChoiceGroup.stories.tsx
+++ b/apps/vr-tests/src/stories/ChoiceGroup.stories.tsx
@@ -29,9 +29,12 @@ storiesOf('ChoiceGroup', module)
       steps={ new Screener.Steps()
         .snapshot('default', { cropTo: '.testWrapper' })
         .hover('div.ms-ChoiceField:nth-of-type(1)')
-        .snapshot('hover selected', { cropTo: '.testWrapper' })
-        .hover('div.ms-ChoiceField:nth-of-type(2)')
         .snapshot('hover unselected', { cropTo: '.testWrapper' })
+        .click('div.ms-ChoiceField:nth-of-type(1)')
+        .snapshot('selected', { cropTo: '.testWrapper' })
+        .click('div.ms-ChoiceField:nth-of-type(1)')
+        .hover('div.ms-ChoiceField:nth-of-type(1)')
+        .snapshot('hover selected', { cropTo: '.testWrapper' })
         .end()
       }
     >
@@ -40,14 +43,12 @@ storiesOf('ChoiceGroup', module)
   ))
   .add('Root', () => (
     <ChoiceGroup
-      defaultSelectedKey='A'
       options={ options }
       label='Pick one'
     />
   ))
   .add('Required', () => (
     <ChoiceGroup
-      defaultSelectedKey='A'
       options={ options }
       label='Pick one'
       required
@@ -56,7 +57,6 @@ storiesOf('ChoiceGroup', module)
   .add('With icons', () => (
     <ChoiceGroup
       label='Pick one icon'
-      defaultSelectedKey='day'
       options={ [
         {
           key: 'day',
@@ -77,23 +77,41 @@ storiesOf('ChoiceGroup', module)
       ] }
     />
   ))
-  .add('With images', () => (
+  .add('With default size images', () => (
     <ChoiceGroup
       label='Pick one image'
-      defaultSelectedKey='bar'
       options={ [
         {
           key: 'bar',
           imageSrc: TestImages.choiceGroupBarUnselected,
           selectedImageSrc: TestImages.choiceGroupBarSelected,
-          imageSize: { width: 32, height: 32 },
           text: 'Clustered bar chart'
         },
         {
           key: 'pie',
           imageSrc: TestImages.choiceGroupBarUnselected,
           selectedImageSrc: TestImages.choiceGroupBarSelected,
-          imageSize: { width: 32, height: 32 },
+          text: 'Pie chart'
+        }
+      ] }
+    />
+  ))
+  .add('With large size images', () => (
+    <ChoiceGroup
+      label='Pick one image'
+      options={ [
+        {
+          key: 'bar2',
+          imageSrc: TestImages.choiceGroupBarUnselected,
+          selectedImageSrc: TestImages.choiceGroupBarSelected,
+          imageSize: { width: 120, height: 120 },
+          text: 'Clustered bar chart'
+        },
+        {
+          key: 'pie2',
+          imageSrc: TestImages.choiceGroupBarUnselected,
+          selectedImageSrc: TestImages.choiceGroupBarSelected,
+          imageSize: { width: 120, height: 120 },
           text: 'Pie chart'
         }
       ] }
diff --git a/apps/vr-tests/src/stories/CommandBar.stories.tsx b/apps/vr-tests/src/stories/CommandBar.stories.tsx
index 4915dc68c6207..7fd8133cd4fba 100644
--- a/apps/vr-tests/src/stories/CommandBar.stories.tsx
+++ b/apps/vr-tests/src/stories/CommandBar.stories.tsx
@@ -9,18 +9,24 @@ const items = [
   {
     key: 'newItem',
     name: 'New',
-    icon: 'Add',
+    iconProps: {
+      iconName: 'Add'
+    },
     subMenuProps: {
       items: [
         {
           key: 'emailMessage',
           name: 'Email message',
-          icon: 'Mail'
+          iconProps: {
+            iconName: 'Mail'
+          }
         },
         {
           key: 'calendarEvent',
           name: 'Calendar event',
-          icon: 'Calendar'
+          iconProps: {
+            iconName: 'Calendar'
+          }
         }
       ],
     },
@@ -28,22 +34,30 @@ const items = [
   {
     key: 'upload',
     name: 'Upload',
-    icon: 'Upload'
+    iconProps: {
+      iconName: 'Upload'
+    }
   },
   {
     key: 'share',
     name: 'Share',
-    icon: 'Share'
+    iconProps: {
+      iconName: 'Share'
+    }
   },
   {
     key: 'download',
     name: 'Download',
-    icon: 'Download'
+    iconProps: {
+      iconName: 'Download'
+    }
   },
   {
     key: 'disabled',
     name: 'Disabled...',
-    icon: 'Cancel',
+    iconProps: {
+      iconName: 'Cancel'
+    },
     disabled: true
   }
 ];
@@ -52,17 +66,23 @@ const farItems = [
   {
     key: 'sort',
     name: 'Sort',
-    icon: 'SortLines'
+    iconProps: {
+      iconName: 'SortLines'
+    }
   },
   {
     key: 'tile',
     name: 'Grid view',
-    icon: 'Tiles'
+    iconProps: {
+      iconName: 'Tiles'
+    }
   },
   {
     key: 'info',
     name: 'Info',
-    icon: 'Info'
+    iconProps: {
+      iconName: 'Info'
+    }
   }
 ];
 
@@ -100,8 +120,8 @@ storiesOf('CommandBar', module)
   .add('Text only', () => (
     <CommandBar
       isSearchBoxVisible={ false }
-      items={ items.map(item => ({ ...item, icon: '' })) }
-      farItems={ farItems.map(item => ({ ...item, icon: '' })) }
+      items={ items.map(item => ({ ...item, iconProps: undefined })) }
+      farItems={ farItems.map(item => ({ ...item, iconProps: undefined })) }
     />
   ))
   .add('Icons only', () => (
diff --git a/apps/vr-tests/src/stories/Icon.stories.tsx b/apps/vr-tests/src/stories/Icon.stories.tsx
index 07ae7372a7795..98c0d82dc3e00 100644
--- a/apps/vr-tests/src/stories/Icon.stories.tsx
+++ b/apps/vr-tests/src/stories/Icon.stories.tsx
@@ -4,8 +4,16 @@ import Screener, { Steps } from 'screener-storybook/src/screener';
 import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { Icon, IconType, getIconClassName } from 'office-ui-fabric-react';
+import * as IconNames from '../../../../packages/icons/src/IconNames';
+
 import { TestImages } from '../common/TestImages';
 
+// Rendering allIcons tests that the icon package can initialize all icons from the cdn
+let allIcons: JSX.Element[] = [];
+for (let iconName in (IconNames as any)['IconNames']) {
+  allIcons.push(<Icon iconName={ iconName } />);
+}
+
 storiesOf('Icon', module)
   .addDecorator(FabricDecorator)
   .addDecorator(story => (
@@ -20,9 +28,7 @@ storiesOf('Icon', module)
   )).add('Root', () => (
     <div>
       <div>
-        <Icon iconName='CompassNW' />
-        <Icon iconName='Upload' />
-        <Icon iconName='Share' />
+        { allIcons }
       </div>
       <div>
         <Icon className={ getIconClassName('CompassNW') } />
diff --git a/apps/vr-tests/src/stories/Image.css b/apps/vr-tests/src/stories/Image.css
deleted file mode 100644
index 8e2860d398bec..0000000000000
--- a/apps/vr-tests/src/stories/Image.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.ms-Image {
-  border: 2px solid #aaa;
-  margin-bottom: 20px;
-}
\ No newline at end of file
diff --git a/apps/vr-tests/src/stories/Image.stories.tsx b/apps/vr-tests/src/stories/Image.stories.tsx
index 3263598b35319..c9950f1725517 100644
--- a/apps/vr-tests/src/stories/Image.stories.tsx
+++ b/apps/vr-tests/src/stories/Image.stories.tsx
@@ -5,8 +5,6 @@ import { storiesOf } from '@storybook/react';
 import { FabricDecorator } from '../utilities';
 import { Image, ImageFit, Label, Layer } from 'office-ui-fabric-react';
 
-import './Image.css';
-
 const img350x150 = 'http://placehold.it/350x150';
 
 let imagePropsFitNone = {
diff --git a/apps/vr-tests/src/stories/SearchBox.stories.tsx b/apps/vr-tests/src/stories/SearchBox.stories.tsx
index 242d606fab3f6..9e44c3fd5f4aa 100644
--- a/apps/vr-tests/src/stories/SearchBox.stories.tsx
+++ b/apps/vr-tests/src/stories/SearchBox.stories.tsx
@@ -26,11 +26,11 @@ storiesOf('SearchBox', module)
   )).add('Root', () => (
     <Fabric style={ { display: 'flex' } }>
       <div className='testWrapper' style={ { padding: '10px', overflow: 'hidden', width: '300px' } }>
-        <SearchBox />
+        <SearchBox placeholder='Search' />
       </div>
     </Fabric>
   )).add('Full', () => (
     <Fabric className='testWrapper'>
-      <SearchBox />
+      <SearchBox placeholder='Search' />
     </Fabric>
   ));
\ No newline at end of file
diff --git a/common/changes/@uifabric/example-app-base/jolore-addingWorkWeekDateRange_2018-01-24-01-39.json b/common/changes/@uifabric/example-app-base/jolore-addingWorkWeekDateRange_2018-01-24-01-39.json
deleted file mode 100644
index 9401437d55539..0000000000000
--- a/common/changes/@uifabric/example-app-base/jolore-addingWorkWeekDateRange_2018-01-24-01-39.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "comment": "",
-      "packageName": "@uifabric/example-app-base",
-      "type": "none"
-    }
-  ],
-  "packageName": "@uifabric/example-app-base",
-  "email": "jolore@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/fabric-website/jolore-addingWorkWeekDateRange_2018-01-24-01-39.json b/common/changes/@uifabric/fabric-website/jolore-addingWorkWeekDateRange_2018-01-24-01-39.json
deleted file mode 100644
index 6218fcd512b73..0000000000000
--- a/common/changes/@uifabric/fabric-website/jolore-addingWorkWeekDateRange_2018-01-24-01-39.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "comment": "",
-      "packageName": "@uifabric/fabric-website",
-      "type": "none"
-    }
-  ],
-  "packageName": "@uifabric/fabric-website",
-  "email": "jolore@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/file-type-icons/jolore-addingWorkWeekDateRange_2018-01-24-01-39.json b/common/changes/@uifabric/file-type-icons/jolore-addingWorkWeekDateRange_2018-01-24-01-39.json
deleted file mode 100644
index b8195d1db67c5..0000000000000
--- a/common/changes/@uifabric/file-type-icons/jolore-addingWorkWeekDateRange_2018-01-24-01-39.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "comment": "",
-      "packageName": "@uifabric/file-type-icons",
-      "type": "none"
-    }
-  ],
-  "packageName": "@uifabric/file-type-icons",
-  "email": "jolore@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/icons/srideshpande-icon-config-update2_2018-01-31-22-05.json b/common/changes/@uifabric/icons/srideshpande-icon-config-update2_2018-01-31-22-05.json
deleted file mode 100644
index 4ce5961009bea..0000000000000
--- a/common/changes/@uifabric/icons/srideshpande-icon-config-update2_2018-01-31-22-05.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/icons",
-      "comment": "updating config files in @uifabric/icons package",
-      "type": "patch"
-    }
-  ],
-  "packageName": "@uifabric/icons",
-  "email": "srdeshpa@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/@uifabric/icons/srideshpande-icon-update_2018-01-24-23-44.json b/common/changes/@uifabric/icons/srideshpande-icon-update_2018-01-24-23-44.json
deleted file mode 100644
index 6fcb96111e0eb..0000000000000
--- a/common/changes/@uifabric/icons/srideshpande-icon-update_2018-01-24-23-44.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "@uifabric/icons",
-      "comment": "Updating fabric icons in office-ui-fabric-react's  @uifabric/icons package",
-      "type": "patch"
-    }
-  ],
-  "packageName": "@uifabric/icons",
-  "email": "srdeshpa@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/-1350-controlled-textfield_2018-01-24-23-29.json b/common/changes/office-ui-fabric-react/-1350-controlled-textfield_2018-01-24-23-29.json
deleted file mode 100644
index 7a07c28b30bbc..0000000000000
--- a/common/changes/office-ui-fabric-react/-1350-controlled-textfield_2018-01-24-23-29.json
+++ /dev/null
@@ -1,11 +0,0 @@
-{
-  "changes": [
-    {
-      "packageName": "office-ui-fabric-react",
-      "comment": "Adds the _isControlled flag to the TextField component that disabled onChange if the value prop is set, which follows developer expectations with React inputs.",
-      "type": "patch"
-    }
-  ],
-  "packageName": "office-ui-fabric-react",
-  "email": "v-jojanz@microsoft.com"
-}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/basebutton-description-props_2018-03-15-14-54.json b/common/changes/office-ui-fabric-react/basebutton-description-props_2018-03-15-14-54.json
new file mode 100644
index 0000000000000..efd3b5ba2a758
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/basebutton-description-props_2018-03-15-14-54.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Button: fixed bug causes by onRenderDescription pulling from this.props instead of passed in props",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "mgodbolt@microsoft.com"
+}
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/stick-bgc-3776_2018-01-29-23-43.json b/common/changes/office-ui-fabric-react/detailslist-dataselectionfix-4077_2018-03-15-17-58.json
similarity index 58%
rename from common/changes/office-ui-fabric-react/stick-bgc-3776_2018-01-29-23-43.json
rename to common/changes/office-ui-fabric-react/detailslist-dataselectionfix-4077_2018-03-15-17-58.json
index de7f060b2fb53..077f693e0967d 100644
--- a/common/changes/office-ui-fabric-react/stick-bgc-3776_2018-01-29-23-43.json
+++ b/common/changes/office-ui-fabric-react/detailslist-dataselectionfix-4077_2018-03-15-17-58.json
@@ -2,7 +2,7 @@
   "changes": [
     {
       "packageName": "office-ui-fabric-react",
-      "comment": "added return default when reaching the html tag in while loop inside _getBackground() inside Sticky component.",
+      "comment": "Added _isSelectionDisabled check in SelectionZone's onMouseDown event handler",
       "type": "patch"
     }
   ],
diff --git a/common/changes/office-ui-fabric-react/selection-modal_2018-01-30-15-24.json b/common/changes/office-ui-fabric-react/magellan-nullPickersItem_2018-03-14-23-46.json
similarity index 60%
rename from common/changes/office-ui-fabric-react/selection-modal_2018-01-30-15-24.json
rename to common/changes/office-ui-fabric-react/magellan-nullPickersItem_2018-03-14-23-46.json
index 8c3438eeae852..f84444314565c 100644
--- a/common/changes/office-ui-fabric-react/selection-modal_2018-01-30-15-24.json
+++ b/common/changes/office-ui-fabric-react/magellan-nullPickersItem_2018-03-14-23-46.json
@@ -2,10 +2,10 @@
   "changes": [
     {
       "packageName": "office-ui-fabric-react",
-      "comment": "Fix bug in modal selection handling",
+      "comment": "Pickers: Allow onItemSelected to return null",
       "type": "patch"
     }
   ],
   "packageName": "office-ui-fabric-react",
-  "email": "tmichon@microsoft.com"
+  "email": "law@microsoft.com"
 }
\ No newline at end of file
diff --git a/common/changes/office-ui-fabric-react/users-demarcey-anchorMenuItems_2018-03-06-21-28.json b/common/changes/office-ui-fabric-react/users-demarcey-anchorMenuItems_2018-03-06-21-28.json
new file mode 100644
index 0000000000000..93a460742b19c
--- /dev/null
+++ b/common/changes/office-ui-fabric-react/users-demarcey-anchorMenuItems_2018-03-06-21-28.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "ContextualMenu: Allow anchor menu items to have sub menus. Added prop for sub menu hover delay.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "demarcey@microsoft.com"
+}
diff --git a/common/config/rush/npm-shrinkwrap.json b/common/config/rush/npm-shrinkwrap.json
index 2abaf9ca0411e..bad9b61a44a68 100644
--- a/common/config/rush/npm-shrinkwrap.json
+++ b/common/config/rush/npm-shrinkwrap.json
@@ -4,18 +4,13 @@
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
-    "@hypnosphi/fuse.js": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/@hypnosphi/fuse.js/-/fuse.js-3.0.9.tgz",
-      "integrity": "sha1-6pn2EhtKjwZbTHH4VZXbJxRJiAc="
-    },
     "@microsoft/api-extractor": {
-      "version": "4.3.4",
-      "resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-4.3.4.tgz",
-      "integrity": "sha1-YLgRx/KPIVPpM2qS26p06RWiA/Q=",
+      "version": "4.3.7",
+      "resolved": "https://registry.npmjs.org/@microsoft/api-extractor/-/api-extractor-4.3.7.tgz",
+      "integrity": "sha1-lwkA2yt7qjbQxTzmS6eZfMAri3o=",
       "requires": {
-        "@microsoft/node-core-library": "0.3.21",
-        "@microsoft/ts-command-line": "2.2.9",
+        "@microsoft/node-core-library": "0.3.24",
+        "@microsoft/ts-command-line": "2.2.12",
         "@types/fs-extra": "0.0.37",
         "@types/node": "6.0.88",
         "@types/z-schema": "3.16.31",
@@ -40,23 +35,23 @@
       }
     },
     "@microsoft/load-themed-styles": {
-      "version": "1.7.14",
-      "resolved": "https://registry.npmjs.org/@microsoft/load-themed-styles/-/load-themed-styles-1.7.14.tgz",
-      "integrity": "sha1-94a/GDCgjx4973fPHgd7WbX1K0A="
+      "version": "1.7.35",
+      "resolved": "https://registry.npmjs.org/@microsoft/load-themed-styles/-/load-themed-styles-1.7.35.tgz",
+      "integrity": "sha1-R0hnGj9ENnN0vZ+i3mUIg5/DXG0="
     },
     "@microsoft/loader-load-themed-styles": {
-      "version": "1.6.9",
-      "resolved": "https://registry.npmjs.org/@microsoft/loader-load-themed-styles/-/loader-load-themed-styles-1.6.9.tgz",
-      "integrity": "sha1-y/ydLav1P8tnNcGogtMLURPtiWg=",
+      "version": "1.7.16",
+      "resolved": "https://registry.npmjs.org/@microsoft/loader-load-themed-styles/-/loader-load-themed-styles-1.7.16.tgz",
+      "integrity": "sha1-D9UEsZp7iY+xfMQwS80OxviQzZA=",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.14",
+        "@microsoft/load-themed-styles": "1.7.35",
         "loader-utils": "1.1.0"
       }
     },
     "@microsoft/node-core-library": {
-      "version": "0.3.21",
-      "resolved": "https://registry.npmjs.org/@microsoft/node-core-library/-/node-core-library-0.3.21.tgz",
-      "integrity": "sha1-jBt2IAW65+7DK3jw0LksdCAgTXI=",
+      "version": "0.3.24",
+      "resolved": "https://registry.npmjs.org/@microsoft/node-core-library/-/node-core-library-0.3.24.tgz",
+      "integrity": "sha1-GnbISyDF+kgnmFJIphmvEHmMqyw=",
       "requires": {
         "@types/fs-extra": "0.0.37",
         "@types/node": "6.0.88",
@@ -74,13 +69,13 @@
       }
     },
     "@microsoft/ts-command-line": {
-      "version": "2.2.9",
-      "resolved": "https://registry.npmjs.org/@microsoft/ts-command-line/-/ts-command-line-2.2.9.tgz",
-      "integrity": "sha1-lKiqVYrXQFqBp10oARbspgw9Tuo=",
+      "version": "2.2.12",
+      "resolved": "https://registry.npmjs.org/@microsoft/ts-command-line/-/ts-command-line-2.2.12.tgz",
+      "integrity": "sha1-bNvP8KxY9DUsKRXnNeQKtviRBrA=",
       "requires": {
         "@types/argparse": "1.0.33",
         "@types/node": "6.0.88",
-        "argparse": "1.0.9",
+        "argparse": "1.0.10",
         "colors": "1.1.2"
       },
       "dependencies": {
@@ -93,18 +88,18 @@
     },
     "@rush-temp/build": {
       "version": "file:projects/build.tgz",
-      "integrity": "sha1-w/7BKfX9iJm7TQC9hTv5Dzugs7o=",
+      "integrity": "sha1-Ver5mhBaDTlt7Y5nDUvWPDdQhPI=",
       "requires": {
-        "@microsoft/api-extractor": "4.3.4",
-        "@microsoft/load-themed-styles": "1.7.14",
-        "@microsoft/loader-load-themed-styles": "1.6.9",
-        "autoprefixer": "7.2.3",
-        "awesome-typescript-loader": "3.4.1",
+        "@microsoft/api-extractor": "4.3.7",
+        "@microsoft/load-themed-styles": "1.7.35",
+        "@microsoft/loader-load-themed-styles": "1.7.16",
+        "autoprefixer": "7.2.6",
+        "awesome-typescript-loader": "3.5.0",
         "bundlesize": "0.15.3",
-        "chalk": "2.3.0",
+        "chalk": "2.3.1",
         "command-line-args": "4.0.7",
         "cpx": "1.5.0",
-        "css-loader": "0.28.7",
+        "css-loader": "0.28.10",
         "github": "7.3.2",
         "glob": "7.1.2",
         "gzip-size": "3.0.0",
@@ -113,8 +108,8 @@
         "mustache": "2.3.0",
         "node-sass": "4.7.2",
         "open": "0.0.5",
-        "postcss": "6.0.14",
-        "postcss-loader": "2.0.9",
+        "postcss": "6.0.19",
+        "postcss-loader": "2.1.1",
         "postcss-modules": "0.8.0",
         "raf": "3.4.0",
         "raw-loader": "0.5.1",
@@ -122,20 +117,20 @@
         "source-map-loader": "0.2.3",
         "style-loader": "0.19.1",
         "ts-jest": "21.2.4",
-        "tslint": "5.8.0",
-        "tslint-microsoft-contrib": "5.0.1",
-        "typescript": "2.6.2",
+        "tslint": "5.9.1",
+        "tslint-microsoft-contrib": "5.0.3",
+        "typescript": "2.7.2",
         "uglifyjs-webpack-plugin": "0.4.6",
-        "webpack": "3.10.0",
-        "webpack-bundle-analyzer": "2.9.1",
-        "webpack-dev-server": "2.9.7",
-        "webpack-notifier": "1.5.0",
+        "webpack": "3.11.0",
+        "webpack-bundle-analyzer": "2.11.0",
+        "webpack-dev-server": "2.11.2",
+        "webpack-notifier": "1.5.1",
         "yargs": "6.6.0"
       }
     },
     "@rush-temp/example-app-base": {
       "version": "file:projects/example-app-base.tgz",
-      "integrity": "sha1-yv/gcJU5bSKdZDTXrlZiwqyhgOc=",
+      "integrity": "sha1-9dFwsZXpye1aVKCC4clouHgGnBE=",
       "requires": {
         "@types/es6-promise": "0.0.32",
         "@types/highlight.js": "9.12.2",
@@ -143,20 +138,20 @@
         "@types/react-dom": "16.0.3",
         "@types/webpack-env": "1.13.0",
         "es6-map": "0.1.5",
-        "es6-promise": "4.1.1",
+        "es6-promise": "4.2.4",
         "es6-weak-map": "2.0.2",
         "highlight.js": "9.12.0",
-        "office-ui-fabric-react": "5.33.1",
+        "office-ui-fabric-react": "5.56.0",
         "react": "16.2.0",
         "react-dom": "16.2.0",
-        "tslib": "1.8.1"
+        "tslib": "1.9.0"
       }
     },
     "@rush-temp/experiments": {
       "version": "file:projects/experiments.tgz",
-      "integrity": "sha1-YEUlDKp26ZYNmnnZ98ZjxkfyfcU=",
+      "integrity": "sha1-DN9S5Fs/j/ZkpFT0xo2wzGt34+I=",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.14",
+        "@microsoft/load-themed-styles": "1.7.35",
         "@types/enzyme": "3.1.5",
         "@types/enzyme-adapter-react-16": "1.0.1",
         "@types/es6-promise": "0.0.32",
@@ -165,27 +160,27 @@
         "@types/react": "16.0.25",
         "@types/react-addons-test-utils": "0.14.18",
         "@types/react-dom": "16.0.3",
-        "@types/react-test-renderer": "16.0.0",
+        "@types/react-test-renderer": "16.0.1",
         "@types/resemblejs": "1.3.28",
         "@types/sinon": "2.2.2",
         "@types/webpack-env": "1.13.0",
-        "enzyme": "3.2.0",
-        "enzyme-adapter-react-16": "1.1.0",
+        "enzyme": "3.3.0",
+        "enzyme-adapter-react-16": "1.1.1",
         "es6-weak-map": "2.0.2",
-        "prop-types": "15.6.0",
+        "prop-types": "15.6.1",
         "react": "16.2.0",
         "react-dom": "16.2.0",
         "react-highlight": "0.10.0",
         "react-test-renderer": "16.2.0",
-        "sinon": "4.1.3",
-        "tslib": "1.8.1"
+        "sinon": "4.4.2",
+        "tslib": "1.9.0"
       }
     },
     "@rush-temp/fabric-website": {
       "version": "file:projects/fabric-website.tgz",
-      "integrity": "sha1-gYsXsKWTmM+W9uqrQeIiMpcSjIY=",
+      "integrity": "sha1-ZiTAxKp6omRHIlx54OVhUZsnloo=",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.14",
+        "@microsoft/load-themed-styles": "1.7.35",
         "@types/es6-promise": "0.0.32",
         "@types/node": "8.0.26",
         "@types/prop-types": "15.5.2",
@@ -194,56 +189,56 @@
         "@types/resemblejs": "1.3.28",
         "@types/webpack-env": "1.13.0",
         "color-functions": "1.1.0",
-        "es6-promise": "4.1.1",
+        "es6-promise": "4.2.4",
         "es6-weak-map": "2.0.2",
         "highlight.js": "9.12.0",
         "json-loader": "0.5.7",
-        "office-ui-fabric-core": "9.3.0",
+        "office-ui-fabric-core": "9.4.0",
         "react": "16.2.0",
         "react-dom": "16.2.0",
         "react-highlight": "0.10.0",
-        "tslib": "1.8.1",
+        "tslib": "1.9.0",
         "write-file-webpack-plugin": "4.2.0"
       }
     },
     "@rush-temp/file-type-icons": {
       "version": "file:projects/file-type-icons.tgz",
-      "integrity": "sha1-iodhc0X0kWDVfFEa1EXIbJlBAkg=",
+      "integrity": "sha1-4G9oT36P2AYqCpjXHfSm2Nlt2PI=",
       "requires": {
         "@types/react": "16.0.25",
         "@types/react-dom": "16.0.3",
         "react": "16.2.0",
         "react-dom": "16.2.0",
-        "tslib": "1.8.1"
+        "tslib": "1.9.0"
       }
     },
     "@rush-temp/icons": {
       "version": "file:projects/icons.tgz",
-      "integrity": "sha1-h1sg1jJD+9BQBWnTZGky86SthHU=",
+      "integrity": "sha1-DnOJqyGa3UW80sWtP83EaHf3cGM=",
       "requires": {
-        "tslib": "1.8.1"
+        "tslib": "1.9.0"
       }
     },
     "@rush-temp/jest-serializer-merge-styles": {
       "version": "file:projects/jest-serializer-merge-styles.tgz",
-      "integrity": "sha1-7yqvQu+aqWCLHvTvFA9SKYaTAIM=",
+      "integrity": "sha1-kit2DYaoDkGt01iWhFQnsRGFoTc=",
       "requires": {
         "@types/jest": "21.1.8"
       }
     },
     "@rush-temp/merge-styles": {
       "version": "file:projects/merge-styles.tgz",
-      "integrity": "sha1-wrp/z/fR48MjQ7UM2pHEM4fZJpg=",
+      "integrity": "sha1-N4mnfc8Hv2i6QE1IvJxt4gi9AuY=",
       "requires": {
         "@types/jest": "21.1.8",
-        "tslib": "1.8.1"
+        "tslib": "1.9.0"
       }
     },
     "@rush-temp/office-ui-fabric-react": {
       "version": "file:projects/office-ui-fabric-react.tgz",
-      "integrity": "sha1-OQC5rWWFkJt2uAakLsUkrdaoUAk=",
+      "integrity": "sha1-ADTTmStgRKaou3YbaCqOSn0awyU=",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.14",
+        "@microsoft/load-themed-styles": "1.7.35",
         "@types/enzyme": "3.1.5",
         "@types/enzyme-adapter-react-16": "1.0.1",
         "@types/es6-promise": "0.0.32",
@@ -251,56 +246,56 @@
         "@types/prop-types": "15.5.2",
         "@types/react": "16.0.25",
         "@types/react-dom": "16.0.3",
-        "@types/react-test-renderer": "16.0.0",
+        "@types/react-test-renderer": "16.0.1",
         "@types/resemblejs": "1.3.28",
         "@types/sinon": "2.2.2",
         "@types/webpack-env": "1.13.0",
-        "enzyme": "3.2.0",
-        "enzyme-adapter-react-16": "1.1.0",
+        "enzyme": "3.3.0",
+        "enzyme-adapter-react-16": "1.1.1",
         "es6-map": "0.1.5",
-        "es6-promise": "4.1.1",
+        "es6-promise": "4.2.4",
         "es6-weak-map": "2.0.2",
         "highlight.js": "9.12.0",
-        "office-ui-fabric-core": "9.3.0",
-        "prop-types": "15.6.0",
+        "office-ui-fabric-core": "9.4.0",
+        "prop-types": "15.6.1",
         "react": "16.2.0",
         "react-dom": "16.2.0",
         "react-highlight": "0.10.0",
         "react-test-renderer": "16.2.0",
         "resemblejs": "2.2.6",
-        "sinon": "4.1.3",
-        "tslib": "1.8.1"
+        "sinon": "4.4.2",
+        "tslib": "1.9.0"
       }
     },
     "@rush-temp/office-ui-fabric-react-tslint": {
       "version": "file:projects/office-ui-fabric-react-tslint.tgz",
-      "integrity": "sha1-WhVDndm+8A91sOhaSJP4DoVcWUs=",
+      "integrity": "sha1-RqQY3nSg/9snfOzrcQNVR41UiP8=",
       "requires": {
-        "tslint-react": "3.2.0"
+        "tslint-react": "3.5.1"
       }
     },
     "@rush-temp/ssr-tests": {
       "version": "file:projects/ssr-tests.tgz",
-      "integrity": "sha1-lTlFe2tuN/0ZkkB9qZcy+hcoMP0=",
+      "integrity": "sha1-/RiZyyAIm4YIGMN/gmh0EFB/2Jw=",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.14",
+        "@microsoft/load-themed-styles": "1.7.35",
         "@types/es6-promise": "0.0.32",
         "@types/mocha": "2.2.39",
         "@types/webpack-env": "1.13.0",
-        "es6-promise": "4.1.1",
+        "es6-promise": "4.2.4",
         "mocha": "3.5.3",
         "raw-loader": "0.5.1",
         "react": "16.2.0",
         "react-dom": "16.2.0",
-        "tslib": "1.8.1",
-        "webpack": "3.10.0"
+        "tslib": "1.9.0",
+        "webpack": "3.11.0"
       }
     },
     "@rush-temp/styling": {
       "version": "file:projects/styling.tgz",
-      "integrity": "sha1-5ZFIqOTdmEnfFV4YvdtxwfzZgoo=",
+      "integrity": "sha1-yooDPN6j4bEXiRcw/nKoruCTENM=",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.14",
+        "@microsoft/load-themed-styles": "1.7.35",
         "@types/jest": "21.1.8",
         "@types/react": "16.0.25",
         "@types/webpack-env": "1.13.0",
@@ -308,12 +303,12 @@
         "es6-weak-map": "2.0.2",
         "react": "16.2.0",
         "react-dom": "16.2.0",
-        "tslib": "1.8.1"
+        "tslib": "1.9.0"
       }
     },
     "@rush-temp/test-bundle-button": {
       "version": "file:projects/test-bundle-button.tgz",
-      "integrity": "sha1-Y2JNJ5HZUs1pH2q6Xui4Sz4IMy0=",
+      "integrity": "sha1-hHSH1ybHvJHL39pq1wIYc+s71lU=",
       "requires": {
         "@types/prop-types": "15.5.2",
         "@types/react": "16.0.25",
@@ -321,31 +316,31 @@
         "@types/webpack-env": "1.13.0",
         "react": "16.2.0",
         "react-dom": "16.2.0",
-        "tslib": "1.8.1"
+        "tslib": "1.9.0"
       }
     },
     "@rush-temp/todo-app": {
       "version": "file:projects/todo-app.tgz",
-      "integrity": "sha1-Iqd75WQ6efvycKDtaFlYUU465eA=",
+      "integrity": "sha1-TgRNk3WpedPAxOPIzAAWpZWU69I=",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.14",
+        "@microsoft/load-themed-styles": "1.7.35",
         "@types/es6-promise": "0.0.32",
         "@types/react": "16.0.25",
         "@types/react-dom": "16.0.3",
         "@types/webpack-env": "1.13.0",
-        "es6-promise": "4.1.1",
-        "immutability-helper": "2.6.4",
+        "es6-promise": "4.2.4",
+        "immutability-helper": "2.6.5",
         "react": "16.2.0",
         "react-dom": "16.2.0",
-        "tslib": "1.8.1",
-        "typescript": "2.6.2"
+        "tslib": "1.9.0",
+        "typescript": "2.7.2"
       }
     },
     "@rush-temp/utilities": {
       "version": "file:projects/utilities.tgz",
-      "integrity": "sha1-luCc+RU7XhQ8TdzZ/AIuHYh9Or4=",
+      "integrity": "sha1-PEyJRbuw/Ha4QmT2cGhecacPKEs=",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.14",
+        "@microsoft/load-themed-styles": "1.7.35",
         "@types/enzyme": "3.1.5",
         "@types/enzyme-adapter-react-16": "1.0.1",
         "@types/jest": "21.1.8",
@@ -353,58 +348,76 @@
         "@types/react": "16.0.25",
         "@types/react-dom": "16.0.3",
         "@types/sinon": "2.2.2",
-        "enzyme": "3.2.0",
-        "enzyme-adapter-react-16": "1.1.0",
-        "prop-types": "15.6.0",
+        "enzyme": "3.3.0",
+        "enzyme-adapter-react-16": "1.1.1",
+        "prop-types": "15.6.1",
         "react": "16.2.0",
         "react-dom": "16.2.0",
-        "sinon": "4.1.3",
-        "tslib": "1.8.1"
+        "sinon": "4.4.2",
+        "tslib": "1.9.0"
+      }
+    },
+    "@rush-temp/variants": {
+      "version": "file:projects/variants.tgz",
+      "integrity": "sha1-vxbJXzxQp+9DbiRutWD7vAQX7ew=",
+      "requires": {
+        "@types/jest": "21.1.8",
+        "tslib": "1.9.0"
       }
     },
     "@rush-temp/vr-tests": {
       "version": "file:projects/vr-tests.tgz",
-      "integrity": "sha1-ZBRZ+Dnb2VRC5EVyPHdbe7DcQ4E=",
+      "integrity": "sha1-NzAoR+bMCugFFdIuBZSNjwY5yXM=",
       "requires": {
         "@storybook/addon-options": "3.2.3",
-        "@storybook/react": "3.2.17",
+        "@storybook/react": "3.3.14",
         "@types/react": "16.0.25",
         "@types/react-dom": "16.0.3",
         "@types/storybook__react": "3.0.5",
-        "awesome-typescript-loader": "3.4.1",
-        "css-loader": "0.28.7",
+        "awesome-typescript-loader": "3.5.0",
+        "css-loader": "0.28.10",
         "file-loader": "0.11.2",
-        "postcss-loader": "2.0.9",
+        "postcss-loader": "2.1.1",
         "raw-loader": "0.5.1",
         "react": "16.2.0",
         "react-dom": "16.2.0",
         "screener-runner": "0.6.19",
-        "screener-storybook": "0.9.15",
+        "screener-storybook": "0.11.3",
         "storybook-readme": "3.0.6",
         "style-loader": "0.19.1",
-        "tslib": "1.8.1",
-        "typescript": "2.6.2"
+        "tslib": "1.9.0",
+        "typescript": "2.7.2"
+      }
+    },
+    "@sinonjs/formatio": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@sinonjs/formatio/-/formatio-2.0.0.tgz",
+      "integrity": "sha512-ls6CAMA6/5gG+O/IdsBcblvnd8qcO/l1TYoNeAzp3wcISOxlPXQEus0mLcdwazEkWjaBdaJ3TaxmNgCLWwvWzg==",
+      "requires": {
+        "samsam": "1.3.0"
       }
     },
     "@storybook/addon-actions": {
-      "version": "3.2.17",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-3.2.17.tgz",
-      "integrity": "sha512-B4++4+p6zWTeTBzqe9lgzT8J0onaMfSZsBRJpa5URoDo3d4kTq+DTDs2qHhhTKJb2Drtu24/JlEgJG7lv0Fb0w==",
+      "version": "3.3.14",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-3.3.14.tgz",
+      "integrity": "sha512-MU+Sz80hlC3+VJW15yoa9y7mzsNechtd9X7WvugIB1Pg6AwY2IYNZoagy2dXwdBD6+sUTj1zWt0c7P7y5A/EAg==",
       "requires": {
-        "@storybook/addons": "3.2.17",
         "deep-equal": "1.0.1",
-        "json-stringify-safe": "5.0.1",
-        "prop-types": "15.6.0",
+        "global": "4.3.2",
+        "make-error": "1.3.4",
+        "prop-types": "15.6.1",
         "react-inspector": "2.2.2",
-        "uuid": "3.1.0"
+        "uuid": "3.2.1"
       }
     },
     "@storybook/addon-links": {
-      "version": "3.2.17",
-      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-3.2.17.tgz",
-      "integrity": "sha512-AdCH9DsbOfiMDv42/l0Zfk2yhiBrlWuzHk7ubhSwqF3/61sXr+BWFv+SlOx2oFfSWAT7zfg2sC7Wr+us8gs7GQ==",
+      "version": "3.3.14",
+      "resolved": "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-3.3.14.tgz",
+      "integrity": "sha512-pD+/aOpGPcDQ/4h7UHA+nu3ye0w1KJ8GFz4MCX7a+38rYDUe1ePD5xmLT56zHCKqyKZgrrIoGZg/yEQjpQCJug==",
       "requires": {
-        "@storybook/addons": "3.2.17"
+        "@storybook/components": "3.3.14",
+        "global": "4.3.2",
+        "prop-types": "15.6.1"
       }
     },
     "@storybook/addon-options": {
@@ -412,37 +425,42 @@
       "resolved": "https://registry.npmjs.org/@storybook/addon-options/-/addon-options-3.2.3.tgz",
       "integrity": "sha1-6jdA0onUKc52fpaZvzpkfddBWS0=",
       "requires": {
-        "@storybook/addons": "3.2.17"
+        "@storybook/addons": "3.3.14"
       }
     },
     "@storybook/addons": {
-      "version": "3.2.17",
-      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-3.2.17.tgz",
-      "integrity": "sha512-1/Ux++3hMfYqAgBwgWbGtGAM0CfSdAchf//wDLBUmX09+E5CjiQvW3YwVplNYzfRuAsSrE1GOYJRAsz639oTYQ=="
+      "version": "3.3.14",
+      "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-3.3.14.tgz",
+      "integrity": "sha512-cVSowQdWOr/XxWk60ykr4a+0gnpVnfWkJ0pIbGQUBcq6tvGrAoZ76Cq18lYS7NHNL2lwoEQT3wBs7w0UaJtOTA=="
     },
     "@storybook/channel-postmessage": {
-      "version": "3.2.17",
-      "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-3.2.17.tgz",
-      "integrity": "sha512-sNlXcHTKM6aIxRsQMaMbowsAToYRlbeP/THqulVxoRRKNDPndNnZe/Lu3eSjBjAfNWBLRFfgX903adt82QAPCA==",
+      "version": "3.3.14",
+      "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-3.3.14.tgz",
+      "integrity": "sha512-xFmc2F/OKqrrdMjrvJTfADOl3+fKxKCs4vNr8w26k8gBLDp/JuoSomnar7kR7PfX9mAAfVgVle8erUMkHc0Tsg==",
       "requires": {
-        "@storybook/channels": "3.2.17",
+        "@storybook/channels": "3.3.14",
         "global": "4.3.2",
         "json-stringify-safe": "5.0.1"
       }
     },
     "@storybook/channels": {
-      "version": "3.2.17",
-      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-3.2.17.tgz",
-      "integrity": "sha512-HIdRmFTFVLcbrwYFf6+LyAlgcd57ki+6DDTmcvXQTHCWrOOCJKwfKjHgn6tbnHlGHiWByA8lAdO1bFcYhHxl4Q=="
+      "version": "3.3.14",
+      "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-3.3.14.tgz",
+      "integrity": "sha512-qrd7WnQDmdX0uMGbTmRKlLL9R8mrVClsT2Idb1YsL7gbTE2X4QyOTt4ANFeCmvZ8LxqOmEv5glcBmfBRNjBPgQ=="
+    },
+    "@storybook/client-logger": {
+      "version": "3.3.14",
+      "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-3.3.14.tgz",
+      "integrity": "sha512-dKuASmwvZqriu63CsNlvvUWyQ9EuYqS6sXmdy5yhusycFl+LfhvMMNKzENxb91ZSAcE75wH39VZVdLZTxsH9Fw=="
     },
     "@storybook/components": {
-      "version": "3.2.17",
-      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-3.2.17.tgz",
-      "integrity": "sha512-pXwNKLavYCu18B2EynFu9EKXlKi0LDo0B/KctbJvidxR5ubzqkZu9h2ti3hPPVomR2DQiRx61Vzqd7cbcyy14w==",
+      "version": "3.3.14",
+      "resolved": "https://registry.npmjs.org/@storybook/components/-/components-3.3.14.tgz",
+      "integrity": "sha512-MCUx0JWk21jspFUb/dqaqBB1ZCBHhSIHlkBt438+oub4CRlTHl5q3tDffyDUzgdzMULi1xubtEH8f9pet87A8w==",
       "requires": {
         "glamor": "2.20.40",
-        "glamorous": "4.11.0",
-        "prop-types": "15.6.0"
+        "glamorous": "4.11.6",
+        "prop-types": "15.6.1"
       }
     },
     "@storybook/mantra-core": {
@@ -455,96 +473,130 @@
         "babel-runtime": "6.26.0"
       }
     },
+    "@storybook/node-logger": {
+      "version": "3.3.14",
+      "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-3.3.14.tgz",
+      "integrity": "sha512-MBVr0J//5ENuDqNT5LWKTbLF7rmUJk0BpBnuJJrIif1Z+AfNs1gJz7MeL5V/3GNnUx8jc6NzNWCvNFJUIvf0uw==",
+      "requires": {
+        "chalk": "2.3.1",
+        "npmlog": "4.1.2"
+      }
+    },
+    "@storybook/podda": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@storybook/podda/-/podda-1.2.3.tgz",
+      "integrity": "sha512-g7dsdsn50AhlGZ8iIDKdF8bi7Am++iFOq+QN+hNKz3FvgLuf8Dz+mpC/BFl90eE9bEYxXqXKeMf87399Ec5Qhw==",
+      "requires": {
+        "babel-runtime": "6.26.0",
+        "immutable": "3.8.2"
+      }
+    },
     "@storybook/react": {
-      "version": "3.2.17",
-      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-3.2.17.tgz",
-      "integrity": "sha512-1bZXP0wGdlTgRiGsTLQ90G0Swx+Re7o3IAblOdobS/E5fREzEC1zEHdSQYC5ROUoWDLourqcF/zo4I9HpKvnZg==",
-      "requires": {
-        "@storybook/addon-actions": "3.2.17",
-        "@storybook/addon-links": "3.2.17",
-        "@storybook/addons": "3.2.17",
-        "@storybook/channel-postmessage": "3.2.17",
-        "@storybook/ui": "3.2.17",
-        "airbnb-js-shims": "1.4.0",
-        "autoprefixer": "7.2.3",
-        "babel-core": "6.26.0",
-        "babel-loader": "7.1.2",
-        "babel-plugin-react-docgen": "1.8.1",
+      "version": "3.3.14",
+      "resolved": "https://registry.npmjs.org/@storybook/react/-/react-3.3.14.tgz",
+      "integrity": "sha512-qeeEhP5JyqmZKKbNdkSIj2SqWN1Q4bqy8ed+b+CS3gPoSGPy7DscbSwykllXvaTO9NASYGjFHG9b6hohQSQurw==",
+      "requires": {
+        "@storybook/addon-actions": "3.3.14",
+        "@storybook/addon-links": "3.3.14",
+        "@storybook/addons": "3.3.14",
+        "@storybook/channel-postmessage": "3.3.14",
+        "@storybook/client-logger": "3.3.14",
+        "@storybook/node-logger": "3.3.14",
+        "@storybook/ui": "3.3.14",
+        "airbnb-js-shims": "1.4.1",
+        "autoprefixer": "7.2.6",
+        "babel-loader": "7.1.3",
+        "babel-plugin-react-docgen": "1.8.3",
         "babel-plugin-transform-regenerator": "6.26.0",
         "babel-plugin-transform-runtime": "6.23.0",
         "babel-preset-env": "1.6.1",
         "babel-preset-minify": "0.2.0",
         "babel-preset-react": "6.24.1",
-        "babel-preset-react-app": "3.1.0",
+        "babel-preset-react-app": "3.1.1",
         "babel-preset-stage-0": "6.24.1",
         "babel-runtime": "6.26.0",
         "case-sensitive-paths-webpack-plugin": "2.1.1",
-        "chalk": "2.3.0",
-        "commander": "2.12.2",
-        "common-tags": "1.5.1",
+        "chalk": "2.3.1",
+        "commander": "2.14.1",
+        "common-tags": "1.7.2",
         "configstore": "3.1.1",
         "core-js": "2.5.3",
-        "css-loader": "0.28.7",
-        "dotenv-webpack": "1.5.4",
+        "css-loader": "0.28.10",
+        "dotenv-webpack": "1.5.5",
         "express": "4.16.2",
-        "file-loader": "1.1.5",
+        "file-loader": "1.1.10",
         "find-cache-dir": "1.0.0",
         "glamor": "2.20.40",
-        "glamorous": "4.11.0",
+        "glamorous": "4.11.6",
         "global": "4.3.2",
+        "html-loader": "0.5.5",
+        "html-webpack-plugin": "2.30.1",
         "json-loader": "0.5.7",
         "json-stringify-safe": "5.0.1",
         "json5": "0.5.1",
         "lodash.flattendeep": "4.4.0",
-        "lodash.pick": "4.4.0",
-        "postcss-flexbugs-fixes": "3.2.0",
-        "postcss-loader": "2.0.9",
-        "prop-types": "15.6.0",
+        "markdown-loader": "2.0.2",
+        "npmlog": "4.1.2",
+        "postcss-flexbugs-fixes": "3.3.0",
+        "postcss-loader": "2.1.1",
+        "prop-types": "15.6.1",
         "qs": "6.5.1",
         "redux": "3.7.2",
         "request": "2.83.0",
         "serve-favicon": "2.4.5",
         "shelljs": "0.7.8",
-        "style-loader": "0.18.2",
+        "style-loader": "0.19.1",
+        "uglifyjs-webpack-plugin": "1.2.2",
         "url-loader": "0.6.2",
         "util-deprecate": "1.0.2",
-        "uuid": "3.1.0",
-        "webpack": "3.10.0",
+        "uuid": "3.2.1",
+        "webpack": "3.11.0",
         "webpack-dev-middleware": "1.12.2",
-        "webpack-hot-middleware": "2.21.0"
+        "webpack-hot-middleware": "2.21.1"
       },
       "dependencies": {
         "file-loader": {
-          "version": "1.1.5",
-          "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-1.1.5.tgz",
-          "integrity": "sha512-RzGHDatcVNpGISTvCpfUfOGpYuSR7HSsSg87ki+wF6rw1Hm0RALPTiAdsxAq1UwLf0RRhbe22/eHK6nhXspiOQ==",
+          "version": "1.1.10",
+          "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-1.1.10.tgz",
+          "integrity": "sha512-dNnT4yJgUPtGDg0+m03kQ0b/PZi3Y12EnqYuRPNCsbYkBZc6j+fwVWy40jWzZjn5kIzQ4BLIxzJimbwAYlnPGw==",
           "requires": {
             "loader-utils": "1.1.0",
-            "schema-utils": "0.3.0"
+            "schema-utils": "0.4.5"
           }
         },
-        "style-loader": {
-          "version": "0.18.2",
-          "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-0.18.2.tgz",
-          "integrity": "sha512-WPpJPZGUxWYHWIUMNNOYqql7zh85zGmr84FdTVWq52WTIkqlW9xSxD3QYWi/T31cqn9UNSsietVEgGn2aaSCzw==",
+        "uglify-es": {
+          "version": "3.3.9",
+          "resolved": "https://registry.npmjs.org/uglify-es/-/uglify-es-3.3.9.tgz",
+          "integrity": "sha512-r+MU0rfv4L/0eeW3xZrd16t4NZfK8Ld4SWVglYBb7ez5uXFWHuVRs6xCTrf1yirs9a4j4Y27nn7SRfO6v67XsQ==",
           "requires": {
-            "loader-utils": "1.1.0",
-            "schema-utils": "0.3.0"
+            "commander": "2.13.0",
+            "source-map": "0.6.1"
+          },
+          "dependencies": {
+            "commander": {
+              "version": "2.13.0",
+              "resolved": "https://registry.npmjs.org/commander/-/commander-2.13.0.tgz",
+              "integrity": "sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA=="
+            }
+          }
+        },
+        "uglifyjs-webpack-plugin": {
+          "version": "1.2.2",
+          "resolved": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.2.2.tgz",
+          "integrity": "sha512-CG/NvzXfemUAm5Y4Guh5eEaJYHtkG7kKNpXEJHp9QpxsFVB5/qKvYWoMaq4sa99ccZ0hM3MK8vQV9XPZB4357A==",
+          "requires": {
+            "cacache": "10.0.4",
+            "find-cache-dir": "1.0.0",
+            "schema-utils": "0.4.5",
+            "serialize-javascript": "1.4.0",
+            "source-map": "0.6.1",
+            "uglify-es": "3.3.9",
+            "webpack-sources": "1.1.0",
+            "worker-farm": "1.5.4"
           }
         }
       }
     },
-    "@storybook/react-fuzzy": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/@storybook/react-fuzzy/-/react-fuzzy-0.4.3.tgz",
-      "integrity": "sha512-TaFbDiEc/34eiAFyOjyvrh5tOqoKscyVH2BHJB15cQ8RepccX3LKIBqSNr7IUi1jmMB5aWjeefvJywPQf13ByQ==",
-      "requires": {
-        "babel-runtime": "6.26.0",
-        "classnames": "2.2.5",
-        "fuse.js": "3.2.0",
-        "prop-types": "15.6.0"
-      }
-    },
     "@storybook/react-komposer": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/@storybook/react-komposer/-/react-komposer-2.0.3.tgz",
@@ -563,9 +615,9 @@
       "integrity": "sha512-RH6gPQaYMs/VzQX2dgbZU8DQMKFXVOv1ruohHjjNPys4q+YdqMFMDe5jOP1AUE3j9g01x0eW7bVjRawSpl++Ew==",
       "requires": {
         "babel-runtime": "6.26.0",
-        "create-react-class": "15.6.2",
+        "create-react-class": "15.6.3",
         "hoist-non-react-statics": "1.2.0",
-        "prop-types": "15.6.0"
+        "prop-types": "15.6.1"
       }
     },
     "@storybook/react-stubber": {
@@ -577,31 +629,31 @@
       }
     },
     "@storybook/ui": {
-      "version": "3.2.17",
-      "resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-3.2.17.tgz",
-      "integrity": "sha512-At0oWWTALJrJhtdnP+0AMANBC5omIBnEg3Pin3M0+yzUy6Poelcvt8+81dQEKLBP6LiyFOVpiDjfqpiHR5l0ow==",
+      "version": "3.3.14",
+      "resolved": "https://registry.npmjs.org/@storybook/ui/-/ui-3.3.14.tgz",
+      "integrity": "sha512-aL5mqZ8WNW+bRGVaLuvCfxiLtKvorL9poXosgyc1jZurwi3Z05k7injkg16LuA1dE0wSib/mgHXjgzKXHN+Fhg==",
       "requires": {
-        "@hypnosphi/fuse.js": "3.0.9",
-        "@storybook/components": "3.2.17",
+        "@storybook/components": "3.3.14",
         "@storybook/mantra-core": "1.7.2",
-        "@storybook/react-fuzzy": "0.4.3",
+        "@storybook/podda": "1.2.3",
         "@storybook/react-komposer": "2.0.3",
         "babel-runtime": "6.26.0",
         "deep-equal": "1.0.1",
         "events": "1.1.1",
+        "fuse.js": "3.2.0",
         "global": "4.3.2",
         "json-stringify-safe": "5.0.1",
         "keycode": "2.1.9",
         "lodash.debounce": "4.0.8",
         "lodash.pick": "4.4.0",
         "lodash.sortby": "4.7.0",
-        "podda": "1.2.2",
-        "prop-types": "15.6.0",
+        "prop-types": "15.6.1",
         "qs": "6.5.1",
+        "react-fuzzy": "0.5.2",
         "react-icons": "2.2.7",
         "react-inspector": "2.2.2",
-        "react-modal": "3.1.8",
-        "react-split-pane": "0.1.71",
+        "react-modal": "3.3.1",
+        "react-split-pane": "0.1.77",
         "react-treebeard": "2.1.0",
         "redux": "3.7.2"
       }
@@ -612,16 +664,16 @@
       "integrity": "sha512-VQgHxyPMTj3hIlq9SY1mctqx+Jj8kpQfoLvDlVSDNOyuYs8JYfkuY3OW/4+dO657yPmNhHpePRx0/Tje5ImNVQ=="
     },
     "@types/cheerio": {
-      "version": "0.22.6",
-      "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.6.tgz",
-      "integrity": "sha512-Nyk3Gut4CMFZOebvutYAk/Nis7d6u9b7VX4OcG4zUX5gnKnXMiq+8EPdcX7FVakeL4+t770iy8E46W8ZSSXeFA=="
+      "version": "0.22.7",
+      "resolved": "https://registry.npmjs.org/@types/cheerio/-/cheerio-0.22.7.tgz",
+      "integrity": "sha512-+T9qBbqe/jXtTjzVddArZExahoPPmt8eq3O1ZuCKZXjBVxf/ciUYNXrIDZJEVgYvpELnv6VlPRCfLzufRxpAag=="
     },
     "@types/enzyme": {
       "version": "3.1.5",
       "resolved": "https://registry.npmjs.org/@types/enzyme/-/enzyme-3.1.5.tgz",
       "integrity": "sha512-f1HnxoBnHsK+mcjF6xAofaewv+vPrMtBdxAQuRyO4MltIJV20nf9EVILPBJqfl6/9Gbf9ygbxv4bmwCY9CFsnQ==",
       "requires": {
-        "@types/cheerio": "0.22.6",
+        "@types/cheerio": "0.22.7",
         "@types/react": "16.0.25"
       }
     },
@@ -651,11 +703,6 @@
       "resolved": "https://registry.npmjs.org/@types/highlight.js/-/highlight.js-9.12.2.tgz",
       "integrity": "sha512-y5x0XD/WXDaGSyiTaTcKS4FurULJtSiYbGTeQd0m2LYZGBcZZ/7fM6t5H/DzeUF+kv8y6UfmF6yJABQsHcp9VQ=="
     },
-    "@types/inline-style-prefixer": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/@types/inline-style-prefixer/-/inline-style-prefixer-3.0.1.tgz",
-      "integrity": "sha512-+kbOcYW1/noncDwRryRoB9tH87IYcMfdBGvw98iocK39LtTA2DFL7agmk4UHW/GxjzVfwrxfjlLrqrgA7MCtmg=="
-    },
     "@types/jest": {
       "version": "21.1.8",
       "resolved": "https://registry.npmjs.org/@types/jest/-/jest-21.1.8.tgz",
@@ -699,9 +746,9 @@
       }
     },
     "@types/react-test-renderer": {
-      "version": "16.0.0",
-      "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-16.0.0.tgz",
-      "integrity": "sha512-tbuDajGYu8tEBAGVXZqh0Hmfm+pZA9P+4UfMIWTvzO4PA8yBbL2TCsZNSky+S74oAKy96Z/PBdDTj22iPMYqcQ==",
+      "version": "16.0.1",
+      "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-16.0.1.tgz",
+      "integrity": "sha512-kmNh8g67Ck/y/vp6KX+4JTJXiTGLZBylNhu+R7sm7zcvsrnIGVO6J1zew5inVg428j9f8yHpl68RcYOZXVborQ==",
       "requires": {
         "@types/react": "16.0.25"
       }
@@ -736,42 +783,42 @@
       "integrity": "sha1-LrHQCl5Ow/pYx2r94S4YK2bcXBw="
     },
     "@uifabric/icons": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-5.3.0.tgz",
-      "integrity": "sha512-3jh++ktFidYimHCnnJLMAFHbVvCLABTrU1ikii5FmfdqYpwYL5mOBdRgyCBCAUcQn+w3fXfn+TREM5PXa2Ihzg==",
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-5.4.2.tgz",
+      "integrity": "sha512-JG0euHlQhcVsI9wCfKE/DYDoDjzQNcHDg2Wh1NeFeVPz/6L0s0D7Izw2ULkZgW1TCLFcNx0xdwN+SSnGjIlTkw==",
       "requires": {
-        "@uifabric/styling": "5.14.0",
-        "tslib": "1.8.1"
+        "@uifabric/styling": "5.19.0",
+        "tslib": "1.9.0"
       }
     },
     "@uifabric/merge-styles": {
-      "version": "5.8.1",
-      "resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.8.1.tgz",
-      "integrity": "sha512-mgxb0rMwxJ7LfrPjF4dSUAPJkamlGCjKxzd5nR0wSxde9/k0Sw3zcf4BoefrbR03jnVkdtDXfj1rpq2yYbXXoA==",
+      "version": "5.12.2",
+      "resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-5.12.2.tgz",
+      "integrity": "sha512-PVUu9IIa6voT5YvZAfd3GJvHZpTyA6m3WCAqSjCvNScGJN1EdQ9YQjfJpC1FWsUNYcXIBQqLl7YiuAE+aCz99A==",
       "requires": {
-        "tslib": "1.8.1"
+        "tslib": "1.9.0"
       }
     },
     "@uifabric/styling": {
-      "version": "5.14.0",
-      "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-5.14.0.tgz",
-      "integrity": "sha512-xHW/KuMMFbvr5z3+YRzUlz/yizDdUEh9MW2kzF0D1Omg1Jdfjg6qrDTVPifuyNQTbW9nCiAnb2lX4f0DEl/tuQ==",
+      "version": "5.19.0",
+      "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-5.19.0.tgz",
+      "integrity": "sha512-XZw+RFaw6RscwAvAO7+w4MXbLI0/lVqBcriU65EKYLvBXvMbYry3cY4AxobQ/5e0LdjXs8YPOFHOJHfTvw18Gg==",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.14",
-        "@uifabric/merge-styles": "5.8.1",
-        "@uifabric/utilities": "5.5.0",
-        "tslib": "1.8.1"
+        "@microsoft/load-themed-styles": "1.7.35",
+        "@uifabric/merge-styles": "5.12.2",
+        "@uifabric/utilities": "5.13.0",
+        "tslib": "1.9.0"
       }
     },
     "@uifabric/utilities": {
-      "version": "5.5.0",
-      "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-5.5.0.tgz",
-      "integrity": "sha512-+U5gM9s9ue1zKYXlguzOHMl/NSYNvPZre7/LLH5RLfrBYJwkddUZ5AOFDD3xRT6nwpRhb5fPSJaJldAakFVY8Q==",
+      "version": "5.13.0",
+      "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-5.13.0.tgz",
+      "integrity": "sha512-fgKKMs/tea/TTSvyWuBzDT/SpDLzeUp6/fNqrrK2iSM0CxSn8wfTQdAwL6WBVAsgR4TZvTU0RioJVM/Tg/H9QQ==",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.14",
-        "@uifabric/merge-styles": "5.8.1",
-        "prop-types": "15.6.0",
-        "tslib": "1.8.1"
+        "@microsoft/load-themed-styles": "1.7.35",
+        "@uifabric/merge-styles": "5.12.2",
+        "prop-types": "15.6.1",
+        "tslib": "1.9.0"
       }
     },
     "abab": {
@@ -789,7 +836,7 @@
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.4.tgz",
       "integrity": "sha1-hiRnWMfdbSGmR0/whKR0DsBesh8=",
       "requires": {
-        "mime-types": "2.1.17",
+        "mime-types": "2.1.18",
         "negotiator": "0.6.1"
       }
     },
@@ -831,16 +878,16 @@
       }
     },
     "airbnb-js-shims": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/airbnb-js-shims/-/airbnb-js-shims-1.4.0.tgz",
-      "integrity": "sha512-KIlW3epMtB1x3PtJr2L7ltkoYvuKzjqrgZPq6mzJUL6Gz+3Y2Oc9FS9ZRzRWym2/jk1r+JsDOOyS2Vavc0E3Pw==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/airbnb-js-shims/-/airbnb-js-shims-1.4.1.tgz",
+      "integrity": "sha512-b7S3d+DPRMwaDAs0cgKQTMLO/JG/iSehIlzEGvt2FpxIztRDDABEjWI73AfTxkSiK3/OsraPRYxVNAX3yhSNLw==",
       "requires": {
         "array-includes": "3.0.3",
-        "array.prototype.flatmap": "1.1.1",
-        "array.prototype.flatten": "1.1.1",
-        "es5-shim": "4.5.9",
+        "array.prototype.flatmap": "1.2.1",
+        "array.prototype.flatten": "1.2.1",
+        "es5-shim": "4.5.10",
         "es6-shim": "0.35.3",
-        "function.prototype.name": "1.0.3",
+        "function.prototype.name": "1.1.0",
         "object.entries": "1.0.4",
         "object.getownpropertydescriptors": "2.0.3",
         "object.values": "1.0.4",
@@ -850,20 +897,20 @@
       }
     },
     "ajv": {
-      "version": "5.5.1",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.1.tgz",
-      "integrity": "sha1-s4u4h22ehr7plJVqBOch6IskjrI=",
+      "version": "5.5.2",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-5.5.2.tgz",
+      "integrity": "sha1-c7Xuyj+rZT49P5Qis0GtQiBdyWU=",
       "requires": {
         "co": "4.6.0",
-        "fast-deep-equal": "1.0.0",
+        "fast-deep-equal": "1.1.0",
         "fast-json-stable-stringify": "2.0.0",
         "json-schema-traverse": "0.3.1"
       }
     },
     "ajv-keywords": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-2.1.1.tgz",
-      "integrity": "sha1-YXmX/F9gV2iUxDX5QNgZ4TW4B2I="
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.1.0.tgz",
+      "integrity": "sha1-rCsnk5xUPpXSwG5/f1wnvkqlQ74="
     },
     "align-text": {
       "version": "0.1.4",
@@ -918,11 +965,6 @@
         "color-convert": "1.9.1"
       }
     },
-    "ansicolors": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/ansicolors/-/ansicolors-0.2.1.tgz",
-      "integrity": "sha1-vgiVmQl7dKXJxKhKDNvNtivYeu8="
-    },
     "anymatch": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-1.3.2.tgz",
@@ -1020,13 +1062,13 @@
       "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
       "requires": {
         "delegates": "1.0.0",
-        "readable-stream": "2.3.3"
+        "readable-stream": "2.3.4"
       }
     },
     "argparse": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.9.tgz",
-      "integrity": "sha1-c9g7wmP4bpf4zE9rrhsOkKfSLIY=",
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+      "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
       "requires": {
         "sprintf-js": "1.0.3"
       }
@@ -1117,9 +1159,9 @@
       "integrity": "sha1-qJS3XUvE9s1nnvMkSp/Y9Gri1Cg="
     },
     "array.prototype.flatmap": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.1.1.tgz",
-      "integrity": "sha512-LYxij5OIk/e1wxCPu0Ng1Rtqpe3c1FmfQ/uS/2HGk9GfySnzEpJ4N8eKJgnTCI3PSBBsNNwbUORetjs7B+3oLA==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.1.tgz",
+      "integrity": "sha512-i18e2APdsiezkcqDyZor78Pbfjfds3S94dG6dgIV2ZASJaUf1N0dz2tGdrmwrmlZuNUgxH+wz6Z0zYVH2c5xzQ==",
       "requires": {
         "define-properties": "1.1.2",
         "es-abstract": "1.10.0",
@@ -1127,9 +1169,9 @@
       }
     },
     "array.prototype.flatten": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/array.prototype.flatten/-/array.prototype.flatten-1.1.1.tgz",
-      "integrity": "sha512-9DM+ZgShl2O01ERvRiEqljn+UAOn5yUwvfdrhM/NBLxuh98+MN/6SyBpvIpJBA0UcUuayRl/5BhmZ4TyjlHqyg==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatten/-/array.prototype.flatten-1.2.1.tgz",
+      "integrity": "sha512-3GhsA78XgK//wQKbhUe6L93kknekGlTRY0kvYcpuSi0aa9rVrMr/okeIIv/XSpN8fZ5iUM+bWifhf2/7CYKtIg==",
       "requires": {
         "define-properties": "1.1.2",
         "es-abstract": "1.10.0",
@@ -1152,9 +1194,9 @@
       "integrity": "sha1-2sh4dxPJlmhJ/IGAd36+nB3fO4Y="
     },
     "asn1.js": {
-      "version": "4.9.2",
-      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.9.2.tgz",
-      "integrity": "sha512-b/OsSjvWEo8Pi8H0zsDd2P6Uqo2TK2pH8gNLSJtNLM2Db0v2QaAZ0pBQJXVjAn4gBuugeVDr7s63ZogpUIwWDg==",
+      "version": "4.10.1",
+      "resolved": "https://registry.npmjs.org/asn1.js/-/asn1.js-4.10.1.tgz",
+      "integrity": "sha512-p32cOF5q0Zqs9uBiONKYLm6BClCoBCM5O9JfeUSlnQLBTxYdTK+pW+nXflm8UkKd2UYlEbYz5qEi0JuZR9ckSw==",
       "requires": {
         "bn.js": "4.11.8",
         "inherits": "2.0.3",
@@ -1174,6 +1216,11 @@
       "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
       "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU="
     },
+    "assign-symbols": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/assign-symbols/-/assign-symbols-1.0.0.tgz",
+      "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c="
+    },
     "ast-types": {
       "version": "0.10.1",
       "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.10.1.tgz",
@@ -1223,37 +1270,36 @@
       "integrity": "sha1-NCQX2PLzRhsUzwkIjV7fh5HcmDI="
     },
     "autoprefixer": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-7.2.3.tgz",
-      "integrity": "sha512-dqzVGiz3v934+s3YZA6nk7tAs9xuTz5wMJbX1M+L4cY/MTNkOUqP61c1GWkEVlUL/PEy1pKRSCFuoRZrXYx9qA==",
+      "version": "7.2.6",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-7.2.6.tgz",
+      "integrity": "sha512-Iq8TRIB+/9eQ8rbGhcP7ct5cYb/3qjNYAR2SnzLCEcwF6rvVOax8+9+fccgXk4bEhQGjOZd5TLhsksmAdsbGqQ==",
       "requires": {
-        "browserslist": "2.10.0",
-        "caniuse-lite": "1.0.30000783",
+        "browserslist": "2.11.3",
+        "caniuse-lite": "1.0.30000810",
         "normalize-range": "0.1.2",
         "num2fraction": "1.2.2",
-        "postcss": "6.0.14",
+        "postcss": "6.0.19",
         "postcss-value-parser": "3.3.0"
       }
     },
     "awesome-typescript-loader": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/awesome-typescript-loader/-/awesome-typescript-loader-3.4.1.tgz",
-      "integrity": "sha512-fYxBtN6s4Dm6vtsROWi8IQ4I+KcmwRWePAVvhI06mFcHbtHfZopOs4qGNu9LyCPEw403LDROKFA+NVV6ig5yNw==",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/awesome-typescript-loader/-/awesome-typescript-loader-3.5.0.tgz",
+      "integrity": "sha512-qzgm9SEvodVkSi9QY7Me1/rujg+YBNMjayNSAyzNghwTEez++gXoPCwMvpbHRG7wrOkDCiF6dquvv9ESmUBAuw==",
       "requires": {
-        "colors": "1.1.2",
+        "chalk": "2.3.1",
         "enhanced-resolve": "3.3.0",
         "loader-utils": "1.1.0",
-        "lodash": "4.17.4",
-        "micromatch": "3.1.4",
+        "lodash": "4.17.5",
+        "micromatch": "3.1.9",
         "mkdirp": "0.5.1",
-        "object-assign": "4.1.1",
-        "source-map-support": "0.4.18"
+        "source-map-support": "0.5.3"
       },
       "dependencies": {
         "lodash": {
-          "version": "4.17.4",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
+          "version": "4.17.5",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+          "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
         }
       }
     },
@@ -1272,7 +1318,7 @@
       "resolved": "https://registry.npmjs.org/axios/-/axios-0.16.2.tgz",
       "integrity": "sha1-uk+S8XFn37q0CYN4VFS5rBScPG0=",
       "requires": {
-        "follow-redirects": "1.2.6",
+        "follow-redirects": "1.4.1",
         "is-buffer": "1.1.6"
       }
     },
@@ -1316,7 +1362,7 @@
       "integrity": "sha1-rzL3izGm/O8RnIew/Y2XU/A6C7g=",
       "requires": {
         "babel-code-frame": "6.26.0",
-        "babel-generator": "6.26.0",
+        "babel-generator": "6.26.1",
         "babel-helpers": "6.24.1",
         "babel-messages": "6.23.0",
         "babel-register": "6.26.0",
@@ -1328,7 +1374,7 @@
         "convert-source-map": "1.5.1",
         "debug": "2.6.9",
         "json5": "0.5.1",
-        "lodash": "4.17.4",
+        "lodash": "4.17.5",
         "minimatch": "3.0.4",
         "path-is-absolute": "1.0.1",
         "private": "0.1.8",
@@ -1337,9 +1383,9 @@
       },
       "dependencies": {
         "lodash": {
-          "version": "4.17.4",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
+          "version": "4.17.5",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+          "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
         },
         "source-map": {
           "version": "0.5.7",
@@ -1349,16 +1395,16 @@
       }
     },
     "babel-generator": {
-      "version": "6.26.0",
-      "resolved": "https://registry.npmjs.org/babel-generator/-/babel-generator-6.26.0.tgz",
-      "integrity": "sha1-rBriAHC3n248odMmlhMFN3TyDcU=",
+      "version": "6.26.1",
+      "resolved": "https://registry.npmjs.org/babel-generator/-/babel-generator-6.26.1.tgz",
+      "integrity": "sha512-HyfwY6ApZj7BYTcJURpM5tznulaBvyio7/0d4zFOeMPUmfxkCjHocCuoLa2SAGzBI8AREcH3eP3758F672DppA==",
       "requires": {
         "babel-messages": "6.23.0",
         "babel-runtime": "6.26.0",
         "babel-types": "6.26.0",
         "detect-indent": "4.0.0",
         "jsesc": "1.3.0",
-        "lodash": "4.17.4",
+        "lodash": "4.17.5",
         "source-map": "0.5.7",
         "trim-right": "1.0.1"
       },
@@ -1369,9 +1415,9 @@
           "integrity": "sha1-RsP+yMGJKxKwgz25vHYiF226s0s="
         },
         "lodash": {
-          "version": "4.17.4",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
+          "version": "4.17.5",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+          "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
         },
         "source-map": {
           "version": "0.5.7",
@@ -1429,13 +1475,13 @@
         "babel-helper-function-name": "6.24.1",
         "babel-runtime": "6.26.0",
         "babel-types": "6.26.0",
-        "lodash": "4.17.4"
+        "lodash": "4.17.5"
       },
       "dependencies": {
         "lodash": {
-          "version": "4.17.4",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
+          "version": "4.17.5",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+          "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
         }
       }
     },
@@ -1531,13 +1577,13 @@
       "requires": {
         "babel-runtime": "6.26.0",
         "babel-types": "6.26.0",
-        "lodash": "4.17.4"
+        "lodash": "4.17.5"
       },
       "dependencies": {
         "lodash": {
-          "version": "4.17.4",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
+          "version": "4.17.5",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+          "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
         }
       }
     },
@@ -1595,9 +1641,9 @@
       }
     },
     "babel-loader": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-7.1.2.tgz",
-      "integrity": "sha512-jRwlFbINAeyDStqK6Dd5YuY0k5YuzQUvlz2ZamuXrXmxav3pNqe9vfJ402+2G+OmlJSXxCOpB6Uz0INM7RQe2A==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/babel-loader/-/babel-loader-7.1.3.tgz",
+      "integrity": "sha512-PeN29YvOynPMvNk7QCzsHqxpmfXwKAC+uxkiSNFQsmXBBVltzEkVWmv/Ip3tx7yk149dQUwk497bTXNu+DZjLA==",
       "requires": {
         "find-cache-dir": "1.0.0",
         "loader-utils": "1.1.0",
@@ -1636,8 +1682,8 @@
       "integrity": "sha1-Z2DN2Xf0EdPhdbsGTyvDJ9mbK24=",
       "requires": {
         "find-up": "2.1.0",
-        "istanbul-lib-instrument": "1.9.1",
-        "test-exclude": "4.1.1"
+        "istanbul-lib-instrument": "1.9.2",
+        "test-exclude": "4.2.0"
       }
     },
     "babel-plugin-jest-hoist": {
@@ -1730,13 +1776,20 @@
       }
     },
     "babel-plugin-react-docgen": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/babel-plugin-react-docgen/-/babel-plugin-react-docgen-1.8.1.tgz",
-      "integrity": "sha512-11Yxwk8/iEULr+n5DG0BxXD6j/9htpiiR0/hLfi/gtEAK/d6NCNkyKFrC8loQcyMvF3hehPo30SKXG/itSX+hw==",
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/babel-plugin-react-docgen/-/babel-plugin-react-docgen-1.8.3.tgz",
+      "integrity": "sha512-yJVPObZu8HLQmOsiJATqBE/+6xZiF/b5SnWTxgV0nfELHjz5lWzIHgBzuAe5ael613+Hgf6VnRa98OVILZI07w==",
       "requires": {
         "babel-types": "6.26.0",
-        "lodash": "4.15.0",
-        "react-docgen": "2.20.0"
+        "lodash": "4.17.5",
+        "react-docgen": "2.20.1"
+      },
+      "dependencies": {
+        "lodash": {
+          "version": "4.17.5",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+          "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
+        }
       }
     },
     "babel-plugin-syntax-async-functions": {
@@ -1896,13 +1949,13 @@
         "babel-template": "6.26.0",
         "babel-traverse": "6.26.0",
         "babel-types": "6.26.0",
-        "lodash": "4.17.4"
+        "lodash": "4.17.5"
       },
       "dependencies": {
         "lodash": {
-          "version": "4.17.4",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
+          "version": "4.17.5",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+          "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
         }
       }
     },
@@ -2145,19 +2198,19 @@
       "integrity": "sha512-GlhOuLOQ28ua9prg0hT33HslCrEmz9xWXy9ZNZSACppCyRxxRW+haYtRgm7uYXCcd0q8ggCWD2pfWEJp5iiZfQ=="
     },
     "babel-plugin-transform-member-expression-literals": {
-      "version": "6.8.5",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-member-expression-literals/-/babel-plugin-transform-member-expression-literals-6.8.5.tgz",
-      "integrity": "sha512-Ux3ligf+ukzWaCbBYOstDuFBhRgMiJHlpJBKV4P47qtzVkd0lg1ddPj9fqIJqAM0n+CvxipyrZrnNnw3CdtQCg=="
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-member-expression-literals/-/babel-plugin-transform-member-expression-literals-6.9.0.tgz",
+      "integrity": "sha512-bxtac+8w755ctVeDs4vU98RhWY49eW1wO02HAN+eirZYSKk/dVrKONIznXbHmxWKxT4UX1rpTKOCyezuzLpbTw=="
     },
     "babel-plugin-transform-merge-sibling-variables": {
-      "version": "6.8.6",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-merge-sibling-variables/-/babel-plugin-transform-merge-sibling-variables-6.8.6.tgz",
-      "integrity": "sha512-o5Jioq553HtEAUN5uty7ELJMenXIxHI3PIs1yLqYWYQwP6mg6IPVAJ+U7i4zr9XGF/kb2RGsdehglGTV+vngqA=="
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-merge-sibling-variables/-/babel-plugin-transform-merge-sibling-variables-6.9.0.tgz",
+      "integrity": "sha512-9G1URVEEKoQLDqe0GwqYudECN7kE/q0OCNo5TiD1iwWnnaKi97xY915l5r2KKUvNflXEm9c3faNWknSXYQ7h6Q=="
     },
     "babel-plugin-transform-minify-booleans": {
-      "version": "6.8.3",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-minify-booleans/-/babel-plugin-transform-minify-booleans-6.8.3.tgz",
-      "integrity": "sha512-bPbUhkeN2Nc0KH0/A19GwQGj8w+CvdJzyu8t59VoEDgsNMQ9Bopzi5DrVkrSsVjbYUaZpzq/DYLrH+wD5K2Tig=="
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-minify-booleans/-/babel-plugin-transform-minify-booleans-6.9.0.tgz",
+      "integrity": "sha512-JtpyTRyF+wF/r7GSxpRbNCrVve5M/aCC8xoGcnFItaPUDqjxKmFYvBzMc9u+g0lgo8NWjuZLc16MYaIwkHKD/A=="
     },
     "babel-plugin-transform-object-rest-spread": {
       "version": "6.26.0",
@@ -2169,9 +2222,9 @@
       }
     },
     "babel-plugin-transform-property-literals": {
-      "version": "6.8.5",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-property-literals/-/babel-plugin-transform-property-literals-6.8.5.tgz",
-      "integrity": "sha512-MmiQsQ5AcIaRZMJD0zY5C4H3xuHm06/nWgtOsz7AXV44VEIXIlPiJ39IFYJ4Qx67/fEm8zJAedzR8t+B7d10Bg==",
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-property-literals/-/babel-plugin-transform-property-literals-6.9.0.tgz",
+      "integrity": "sha512-B8s+71+4DPye9+pmZiPGgLPy3YqcmIuvE/9UcZLczPlwL5ALwF6qRUdLC3Fk17NhL6jxp4u33ZVZ8R4kvASPzw==",
       "requires": {
         "esutils": "2.0.2"
       }
@@ -2234,14 +2287,14 @@
       "integrity": "sha512-7IsQ6aQx6LAaOqy97/PthTf+5Nx9grZww3r6E62IdWe76Yr8KsuwVjxzqSPQvESJqTE3EMADQ9S0RtwWDGNG9Q=="
     },
     "babel-plugin-transform-remove-console": {
-      "version": "6.8.5",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-remove-console/-/babel-plugin-transform-remove-console-6.8.5.tgz",
-      "integrity": "sha512-uuCKvtweCyIvvC8fi92EcWRtO2Kt5KMNMRK6BhpDXdeb3sxvGM7453RSmgeu4DlKns3OlvY9Ep5Q9m5a7RQAgg=="
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-remove-console/-/babel-plugin-transform-remove-console-6.9.0.tgz",
+      "integrity": "sha512-mck9//yGTwObqqqDzY/sISO88/5/XfIB3ILb4uJLXk2xq124NT4yQVjFSRgVSbLcNq8OyBAn2acxKUqg4W/okQ=="
     },
     "babel-plugin-transform-remove-debugger": {
-      "version": "6.8.5",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-remove-debugger/-/babel-plugin-transform-remove-debugger-6.8.5.tgz",
-      "integrity": "sha512-InDQDdHPOLJKM+G6oXrEesf+P29QFBmcTXID+TAvZziVz+38xe2VO/Bn3FcRcRtnOOycbgsJkUNp9jIK+ist6g=="
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-remove-debugger/-/babel-plugin-transform-remove-debugger-6.9.0.tgz",
+      "integrity": "sha512-i/HWGjsmL2d1N2dl+eIzf44XpSP5v7hi1/GXB0xzom9kjrU8js3T8Kadizn95ZxfHK592Vg8P4JJWP/fvimEWw=="
     },
     "babel-plugin-transform-remove-undefined": {
       "version": "0.2.0",
@@ -2260,9 +2313,9 @@
       }
     },
     "babel-plugin-transform-simplify-comparison-operators": {
-      "version": "6.8.5",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-simplify-comparison-operators/-/babel-plugin-transform-simplify-comparison-operators-6.8.5.tgz",
-      "integrity": "sha512-B3HlBZb+Uq86nRj5yNPO6pJ3noEdqHvzYkEYoUWtrsWTv48ZIRatYlumoOiif/v8llF13YjYjx9zhyznDx+N9g=="
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-simplify-comparison-operators/-/babel-plugin-transform-simplify-comparison-operators-6.9.0.tgz",
+      "integrity": "sha512-EJyfYeph0CSekwQuwWVwJqy2go/bETkR95iaWQ/HTUis7tkCGNYmXngaFzuIXdmoPXfvmXYCvAXR4/93hqHVjw=="
     },
     "babel-plugin-transform-strict-mode": {
       "version": "6.24.1",
@@ -2274,9 +2327,9 @@
       }
     },
     "babel-plugin-transform-undefined-to-void": {
-      "version": "6.8.3",
-      "resolved": "https://registry.npmjs.org/babel-plugin-transform-undefined-to-void/-/babel-plugin-transform-undefined-to-void-6.8.3.tgz",
-      "integrity": "sha512-goYwp8dMrzHD6x9GjZ2M85Mk2vxf1h85CnUgAjfftUnlJvzF4uj5MrbReHBTbjQ96C8CuRzvhYZ3tv8H3Sc1ZA=="
+      "version": "6.9.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-transform-undefined-to-void/-/babel-plugin-transform-undefined-to-void-6.9.0.tgz",
+      "integrity": "sha512-AVDVEmp0S9mbF1O8zekWbsOOmqnR08PZah5NRZJqSvJnFgiL0ep4Lwo4EymH8OieJR2QgQdR3q71TNW+wiVn4g=="
     },
     "babel-polyfill": {
       "version": "6.23.0",
@@ -2320,9 +2373,9 @@
         "babel-plugin-transform-es2015-unicode-regex": "6.24.1",
         "babel-plugin-transform-exponentiation-operator": "6.24.1",
         "babel-plugin-transform-regenerator": "6.26.0",
-        "browserslist": "2.10.0",
-        "invariant": "2.2.2",
-        "semver": "5.4.1"
+        "browserslist": "2.11.3",
+        "invariant": "2.2.3",
+        "semver": "5.5.0"
       }
     },
     "babel-preset-flow": {
@@ -2359,16 +2412,16 @@
         "babel-plugin-minify-simplify": "0.2.0",
         "babel-plugin-minify-type-constructors": "0.2.0",
         "babel-plugin-transform-inline-consecutive-adds": "0.2.0",
-        "babel-plugin-transform-member-expression-literals": "6.8.5",
-        "babel-plugin-transform-merge-sibling-variables": "6.8.6",
-        "babel-plugin-transform-minify-booleans": "6.8.3",
-        "babel-plugin-transform-property-literals": "6.8.5",
+        "babel-plugin-transform-member-expression-literals": "6.9.0",
+        "babel-plugin-transform-merge-sibling-variables": "6.9.0",
+        "babel-plugin-transform-minify-booleans": "6.9.0",
+        "babel-plugin-transform-property-literals": "6.9.0",
         "babel-plugin-transform-regexp-constructors": "0.2.0",
-        "babel-plugin-transform-remove-console": "6.8.5",
-        "babel-plugin-transform-remove-debugger": "6.8.5",
+        "babel-plugin-transform-remove-console": "6.9.0",
+        "babel-plugin-transform-remove-debugger": "6.9.0",
         "babel-plugin-transform-remove-undefined": "0.2.0",
-        "babel-plugin-transform-simplify-comparison-operators": "6.8.5",
-        "babel-plugin-transform-undefined-to-void": "6.8.3",
+        "babel-plugin-transform-simplify-comparison-operators": "6.9.0",
+        "babel-plugin-transform-undefined-to-void": "6.9.0",
         "lodash.isplainobject": "4.0.6"
       }
     },
@@ -2386,13 +2439,14 @@
       }
     },
     "babel-preset-react-app": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/babel-preset-react-app/-/babel-preset-react-app-3.1.0.tgz",
-      "integrity": "sha512-jEAeVozxLzftLl0iDZ0d5jrmfbo3yogON/eI4AsEDIs8p6WW+t9mDRUsj5l12bqPOLSiVOElCQ3QyGjMcyBiwA==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/babel-preset-react-app/-/babel-preset-react-app-3.1.1.tgz",
+      "integrity": "sha512-9fRHopNaGL5ScRZdPSoyxRaABKmkS2fx0HUJ5Yphan5G8QDFD7lETsPyY7El6b7YPT3sNrw9gfrWzl4/LsJcfA==",
       "requires": {
         "babel-plugin-dynamic-import-node": "1.1.0",
         "babel-plugin-syntax-dynamic-import": "6.18.0",
         "babel-plugin-transform-class-properties": "6.24.1",
+        "babel-plugin-transform-es2015-destructuring": "6.23.0",
         "babel-plugin-transform-object-rest-spread": "6.26.0",
         "babel-plugin-transform-react-constant-elements": "6.23.0",
         "babel-plugin-transform-react-jsx": "6.24.1",
@@ -2456,15 +2510,28 @@
         "babel-runtime": "6.26.0",
         "core-js": "2.5.3",
         "home-or-tmp": "2.0.0",
-        "lodash": "4.17.4",
+        "lodash": "4.17.5",
         "mkdirp": "0.5.1",
         "source-map-support": "0.4.18"
       },
       "dependencies": {
         "lodash": {
-          "version": "4.17.4",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
+          "version": "4.17.5",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+          "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        },
+        "source-map-support": {
+          "version": "0.4.18",
+          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.18.tgz",
+          "integrity": "sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==",
+          "requires": {
+            "source-map": "0.5.7"
+          }
         }
       }
     },
@@ -2493,13 +2560,13 @@
         "babel-traverse": "6.26.0",
         "babel-types": "6.26.0",
         "babylon": "6.18.0",
-        "lodash": "4.17.4"
+        "lodash": "4.17.5"
       },
       "dependencies": {
         "lodash": {
-          "version": "4.17.4",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
+          "version": "4.17.5",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+          "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
         }
       }
     },
@@ -2515,14 +2582,14 @@
         "babylon": "6.18.0",
         "debug": "2.6.9",
         "globals": "9.18.0",
-        "invariant": "2.2.2",
-        "lodash": "4.17.4"
+        "invariant": "2.2.3",
+        "lodash": "4.17.5"
       },
       "dependencies": {
         "lodash": {
-          "version": "4.17.4",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
+          "version": "4.17.5",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+          "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
         }
       }
     },
@@ -2533,14 +2600,14 @@
       "requires": {
         "babel-runtime": "6.26.0",
         "esutils": "2.0.2",
-        "lodash": "4.17.4",
+        "lodash": "4.17.5",
         "to-fast-properties": "1.0.3"
       },
       "dependencies": {
         "lodash": {
-          "version": "4.17.4",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
+          "version": "4.17.5",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+          "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
         }
       }
     },
@@ -2560,24 +2627,44 @@
       "integrity": "sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==",
       "requires": {
         "cache-base": "1.0.1",
-        "class-utils": "0.3.5",
+        "class-utils": "0.3.6",
         "component-emitter": "1.2.1",
         "define-property": "1.0.0",
         "isobject": "3.0.1",
-        "mixin-deep": "1.3.0",
+        "mixin-deep": "1.3.1",
         "pascalcase": "0.1.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "requires": {
+            "is-descriptor": "1.0.2"
+          }
+        }
       }
     },
     "base64-js": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.2.1.tgz",
-      "integrity": "sha512-dwVUVIXsBZXwTuwnXI9RK8sBmgq09NDHzyR9SAph9eqk76gKK2JSQmZARC2zRC81JC2QTtxD0ARU5qTS25gIGw=="
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.2.3.tgz",
+      "integrity": "sha512-MsAhsUW1GxCdgYSO6tAfZrNapmUKk7mWx/k5mFY/A1gBtkaCaNapTg+FExCw1r9yeaZhqx/xPg43xgTFH6KL5w=="
     },
     "batch": {
       "version": "0.6.1",
       "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
       "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY="
     },
+    "bfj-node4": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/bfj-node4/-/bfj-node4-5.2.1.tgz",
+      "integrity": "sha512-w+OTPD/R0AvDVR/sy/uVUVeoCpEgUoYj9/1P2zB6mR1yx7F/ADzLX4nlvZ/91WWzGgdZnuLxWP/J89D7ZDt0DA==",
+      "requires": {
+        "bluebird": "3.5.1",
+        "check-types": "7.3.0",
+        "tryer": "1.0.0"
+      }
+    },
     "big.js": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/big.js/-/big.js-3.2.0.tgz",
@@ -2606,9 +2693,9 @@
       }
     },
     "bluebird": {
-      "version": "3.4.7",
-      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
-      "integrity": "sha1-9y12C+Cbf3bQjtj66Ysomo0F+rM="
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.1.tgz",
+      "integrity": "sha512-MKiLiV+I1AA596t9w1sQJ8jkiSr5+ZKi0WKrYGUn6d1Fx+Ij4tIj+m2WMQSGczs5jZVxV339chE8iwk6F64wjA=="
     },
     "bn.js": {
       "version": "4.11.8",
@@ -2623,13 +2710,13 @@
         "bytes": "3.0.0",
         "content-type": "1.0.4",
         "debug": "2.6.9",
-        "depd": "1.1.1",
+        "depd": "1.1.2",
         "http-errors": "1.6.2",
         "iconv-lite": "0.4.19",
         "on-finished": "2.3.0",
         "qs": "6.5.1",
         "raw-body": "2.3.2",
-        "type-is": "1.6.15"
+        "type-is": "1.6.16"
       }
     },
     "bonjour": {
@@ -2641,7 +2728,7 @@
         "deep-equal": "1.0.1",
         "dns-equal": "1.0.0",
         "dns-txt": "2.0.2",
-        "multicast-dns": "6.2.1",
+        "multicast-dns": "6.2.3",
         "multicast-dns-service-types": "1.1.0"
       },
       "dependencies": {
@@ -2662,27 +2749,27 @@
       "resolved": "https://registry.npmjs.org/boom/-/boom-4.3.1.tgz",
       "integrity": "sha1-T4owBctKfjiJ90kDD9JbluAdLjE=",
       "requires": {
-        "hoek": "4.2.0"
+        "hoek": "4.2.1"
       }
     },
     "bowser": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.8.1.tgz",
-      "integrity": "sha512-NMPaR8ILtdLSWzxQtEs16XbxMcY8ohWGQ5V+TZSJS3fNUt/PBAGkF6YWO9B/4qWE23bK3o0moQKq8UyFEosYkA=="
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/bowser/-/bowser-1.9.2.tgz",
+      "integrity": "sha512-fuiANC1Bqbqa/S4gmvfCt7bGBmNELMsGZj4Wg3PrP6esP66Ttoj1JSlzFlXtHyduMv07kDNmDsX6VsMWT/MLGg=="
     },
     "brace-expansion": {
-      "version": "1.1.8",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz",
-      "integrity": "sha1-wHshHHyVLsH479Uad+8NHTmQopI=",
+      "version": "1.1.11",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
+      "integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
       "requires": {
         "balanced-match": "1.0.0",
         "concat-map": "0.0.1"
       }
     },
     "braces": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.0.tgz",
-      "integrity": "sha512-P4O8UQRdGiMLWSizsApmXVQDBS6KCt7dSexgLKBmH5Hr1CZq7vsnscFh8oR1sP1ab1Zj0uCHCEzZeV6SfUf3rA==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-2.3.1.tgz",
+      "integrity": "sha512-SO5lYHA3vO6gz66erVvedSCkp7AKWdv6VcQ2N4ysXfPxdAlxAMMAdwegGGcv1Bqwm7naF1hNdk5d6AAIEHV2nQ==",
       "requires": {
         "arr-flatten": "1.1.0",
         "array-unique": "0.3.2",
@@ -2690,11 +2777,30 @@
         "extend-shallow": "2.0.1",
         "fill-range": "4.0.0",
         "isobject": "3.0.1",
+        "kind-of": "6.0.2",
         "repeat-element": "1.1.2",
         "snapdragon": "0.8.1",
         "snapdragon-node": "2.1.1",
         "split-string": "3.1.0",
-        "to-regex": "3.0.1"
+        "to-regex": "3.0.2"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "requires": {
+            "is-descriptor": "1.0.2"
+          }
+        },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "requires": {
+            "is-extendable": "0.1.1"
+          }
+        }
       }
     },
     "brcast": {
@@ -2766,7 +2872,7 @@
       "integrity": "sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=",
       "requires": {
         "bn.js": "4.11.8",
-        "randombytes": "2.0.5"
+        "randombytes": "2.0.6"
       }
     },
     "browserify-sign": {
@@ -2792,12 +2898,12 @@
       }
     },
     "browserslist": {
-      "version": "2.10.0",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.10.0.tgz",
-      "integrity": "sha512-WyvzSLsuAVPOjbljXnyeWl14Ae+ukAT8MUuagKVzIDvwBxl4UAwD1xqtyQs2eWYPGUKMeC3Ol62goqYuKqTTcw==",
+      "version": "2.11.3",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-2.11.3.tgz",
+      "integrity": "sha512-yWu5cXT7Av6mVwzWc8lMsJMHWn4xyjSuGYi4IozbVTLUOEYPSagUB8kiMDUHA1fS3zjr8nkxkn9jdvug4BBRmA==",
       "requires": {
-        "caniuse-lite": "1.0.30000783",
-        "electron-to-chromium": "1.3.28"
+        "caniuse-lite": "1.0.30000810",
+        "electron-to-chromium": "1.3.34"
       }
     },
     "bser": {
@@ -2813,7 +2919,7 @@
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.1.tgz",
       "integrity": "sha1-bRu2AbB6TvztlwlBMgkwJ8lbwpg=",
       "requires": {
-        "base64-js": "1.2.1",
+        "base64-js": "1.2.3",
         "ieee754": "1.1.8",
         "isarray": "1.0.0"
       }
@@ -2851,7 +2957,7 @@
         "axios": "0.16.2",
         "bytes": "3.0.0",
         "ci-env": "1.5.2",
-        "commander": "2.12.2",
+        "commander": "2.14.1",
         "github-build": "1.2.0",
         "glob": "7.1.2",
         "gzip-size": "4.1.0",
@@ -2876,6 +2982,33 @@
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
       "integrity": "sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg="
     },
+    "cacache": {
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/cacache/-/cacache-10.0.4.tgz",
+      "integrity": "sha512-Dph0MzuH+rTQzGPNT9fAnrPmMmjKfST6trxJeK7NQuHRaVw24VzPRWTmg9MpcwOVQZO0E1FBICUlFeNaKPIfHA==",
+      "requires": {
+        "bluebird": "3.5.1",
+        "chownr": "1.0.1",
+        "glob": "7.1.2",
+        "graceful-fs": "4.1.11",
+        "lru-cache": "4.1.1",
+        "mississippi": "2.0.0",
+        "mkdirp": "0.5.1",
+        "move-concurrently": "1.0.1",
+        "promise-inflight": "1.0.1",
+        "rimraf": "2.6.2",
+        "ssri": "5.2.4",
+        "unique-filename": "1.1.0",
+        "y18n": "4.0.0"
+      },
+      "dependencies": {
+        "y18n": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
+          "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
+        }
+      }
+    },
     "cache-base": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/cache-base/-/cache-base-1.0.1.tgz",
@@ -2897,6 +3030,15 @@
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-2.0.0.tgz",
       "integrity": "sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA="
     },
+    "camel-case": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz",
+      "integrity": "sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=",
+      "requires": {
+        "no-case": "2.3.2",
+        "upper-case": "1.1.3"
+      }
+    },
     "camelcase": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-4.1.0.tgz",
@@ -2924,7 +3066,7 @@
       "integrity": "sha1-tTTnxzTE+B7F++isoq0kNUuWLGw=",
       "requires": {
         "browserslist": "1.7.7",
-        "caniuse-db": "1.0.30000783",
+        "caniuse-db": "1.0.30000810",
         "lodash.memoize": "4.1.2",
         "lodash.uniq": "4.5.0"
       },
@@ -2934,30 +3076,21 @@
           "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
           "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
           "requires": {
-            "caniuse-db": "1.0.30000783",
-            "electron-to-chromium": "1.3.28"
+            "caniuse-db": "1.0.30000810",
+            "electron-to-chromium": "1.3.34"
           }
         }
       }
     },
     "caniuse-db": {
-      "version": "1.0.30000783",
-      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000783.tgz",
-      "integrity": "sha1-FrMNRyZqT1FcxprgMWtnDJYDzb4="
+      "version": "1.0.30000810",
+      "resolved": "https://registry.npmjs.org/caniuse-db/-/caniuse-db-1.0.30000810.tgz",
+      "integrity": "sha1-vSWDDEHvq2Qzmi44H0lnc0PIRQk="
     },
     "caniuse-lite": {
-      "version": "1.0.30000783",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000783.tgz",
-      "integrity": "sha1-m1SZ+xtQPSNF0SqmuGEoUvQnb/0="
-    },
-    "cardinal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/cardinal/-/cardinal-1.0.0.tgz",
-      "integrity": "sha1-UOIcGwqjdyn5N33vGWtanOyTLuk=",
-      "requires": {
-        "ansicolors": "0.2.1",
-        "redeyed": "1.0.1"
-      }
+      "version": "1.0.30000810",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30000810.tgz",
+      "integrity": "sha512-/0Q00Oie9C72P8zQHtFvzmkrMC3oOFUnMWjCy5F2+BE8lzICm91hQPhh0+XIsAFPKOe2Dh3pKgbRmU3EKxfldA=="
     },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.1.1",
@@ -2999,13 +3132,13 @@
       }
     },
     "chalk": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.0.tgz",
-      "integrity": "sha512-Az5zJR2CBujap2rqXGaJKaPHyJ0IrUimvYNX+ncCy8PJP4ltOGTrHUIo097ZaL2zMeKYpiCdqDvS6zdrTFok3Q==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.3.1.tgz",
+      "integrity": "sha512-QUU4ofkDoMIVO7hcx1iPTISs88wsO8jA92RQIm4JAwZvFGGAV2hSAA1NX7oVj2Ej2Q6NDTcRDjPTFrMCRZoJ6g==",
       "requires": {
         "ansi-styles": "3.2.0",
         "escape-string-regexp": "1.0.5",
-        "supports-color": "4.5.0"
+        "supports-color": "5.2.0"
       }
     },
     "chardet": {
@@ -3013,6 +3146,11 @@
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.4.2.tgz",
       "integrity": "sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I="
     },
+    "check-types": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/check-types/-/check-types-7.3.0.tgz",
+      "integrity": "sha1-Ro9XGkQ1wkJI9f0MsOjYfDw0Hn0="
+    },
     "cheerio": {
       "version": "1.0.0-rc.2",
       "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.2.tgz",
@@ -3051,6 +3189,11 @@
         "readdirp": "2.1.0"
       }
     },
+    "chownr": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.0.1.tgz",
+      "integrity": "sha1-4qdQQqlVGQi+vSW4Uj1fl2nXkYE="
+    },
     "ci-env": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/ci-env/-/ci-env-1.5.2.tgz",
@@ -3103,14 +3246,13 @@
       }
     },
     "class-utils": {
-      "version": "0.3.5",
-      "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.5.tgz",
-      "integrity": "sha1-F+eTEDdQ+WJ7IXbqNM/RtWWQPIA=",
+      "version": "0.3.6",
+      "resolved": "https://registry.npmjs.org/class-utils/-/class-utils-0.3.6.tgz",
+      "integrity": "sha512-qOhPa/Fj7s6TY8H8esGu5QNpMMQxz79h+urzrNYN6mn+9BnxlDGf5QZ+XeCDsxSjPqsSR56XOZOJmpeurnLMeg==",
       "requires": {
         "arr-union": "3.1.0",
         "define-property": "0.2.5",
         "isobject": "3.0.1",
-        "lazy-cache": "2.0.2",
         "static-extend": "0.1.2"
       },
       "dependencies": {
@@ -3122,6 +3264,42 @@
             "is-descriptor": "0.1.6"
           }
         },
+        "is-accessor-descriptor": {
+          "version": "0.1.6",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+          "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+          "requires": {
+            "kind-of": "3.2.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "requires": {
+                "is-buffer": "1.1.6"
+              }
+            }
+          }
+        },
+        "is-data-descriptor": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+          "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+          "requires": {
+            "kind-of": "3.2.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "requires": {
+                "is-buffer": "1.1.6"
+              }
+            }
+          }
+        },
         "is-descriptor": {
           "version": "0.1.6",
           "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
@@ -3144,36 +3322,27 @@
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.5.tgz",
       "integrity": "sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0="
     },
-    "cli-cursor": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
-      "integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=",
-      "requires": {
-        "restore-cursor": "2.0.0"
-      }
-    },
-    "cli-table": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/cli-table/-/cli-table-0.3.1.tgz",
-      "integrity": "sha1-9TsFJmqLGguTSz0IIebi3FkUriM=",
+    "clean-css": {
+      "version": "4.1.9",
+      "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.1.9.tgz",
+      "integrity": "sha1-Nc7ornaHpJuYA09w3gDE7dOCYwE=",
       "requires": {
-        "colors": "1.0.3"
+        "source-map": "0.5.7"
       },
       "dependencies": {
-        "colors": {
-          "version": "1.0.3",
-          "resolved": "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz",
-          "integrity": "sha1-BDP0TYCWgP3rYO0mDxsMJi6CpAs="
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
         }
       }
     },
-    "cli-usage": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/cli-usage/-/cli-usage-0.1.4.tgz",
-      "integrity": "sha1-fAHg3HBsI0s5yTODjI4gshdXduI=",
+    "cli-cursor": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-2.1.0.tgz",
+      "integrity": "sha1-s12sN2R5+sw+lHR9QdDQ9SOP/LU=",
       "requires": {
-        "marked": "0.3.7",
-        "marked-terminal": "1.7.0"
+        "restore-cursor": "2.0.0"
       }
     },
     "cli-width": {
@@ -3324,9 +3493,9 @@
       "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM="
     },
     "combined-stream": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz",
-      "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=",
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz",
+      "integrity": "sha1-cj599ugBrFYTETp+RFqbactjKBg=",
       "requires": {
         "delayed-stream": "1.0.0"
       }
@@ -3342,14 +3511,14 @@
       }
     },
     "commander": {
-      "version": "2.12.2",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.12.2.tgz",
-      "integrity": "sha512-BFnaq5ZOGcDN7FlrtBT4xxkgIToalIIxwjxLWVJ8bGTpe1LroqMiqQXdA7ygc7CRvaYS+9zfPGFnJqFSayx+AA=="
+      "version": "2.14.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.14.1.tgz",
+      "integrity": "sha512-+YR16o3rK53SmWHU3rEM3tPAh2rwb1yPcQX5irVn7mb0gXbwuCCrnkbV5+PBfETdfg1vui07nM6PCG1zndcjQw=="
     },
     "common-tags": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.5.1.tgz",
-      "integrity": "sha512-NrUYGY5TApAk9KB+IZXkR3GR4tA3g26HDsoiGt4kCMHZ727gOGkC+UNfq0Z22jE15bLkc/6RV5Jw1RBW6Usg6A==",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.7.2.tgz",
+      "integrity": "sha512-joj9ZlUOjCrwdbmiLqafeUSgkUM74NqhLsZtSqDmhKudaIY197zTrb8JMl31fMnCUuxwFT23eC/oWvrZzDLRJQ==",
       "requires": {
         "babel-runtime": "6.26.0"
       }
@@ -3365,21 +3534,21 @@
       "integrity": "sha1-E3kY1teCg/ffemt8WmPhQOaUJeY="
     },
     "compressible": {
-      "version": "2.0.12",
-      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.12.tgz",
-      "integrity": "sha1-xZpcmdt2dn6YdlAOJx72OzSTvWY=",
+      "version": "2.0.13",
+      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.13.tgz",
+      "integrity": "sha1-DRAgq5JLL9tNYnmHXH1tq6a6p6k=",
       "requires": {
-        "mime-db": "1.30.0"
+        "mime-db": "1.33.0"
       }
     },
     "compression": {
-      "version": "1.7.1",
-      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.1.tgz",
-      "integrity": "sha1-7/JgPvwuIs+G810uuTWJ+YdTc9s=",
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.2.tgz",
+      "integrity": "sha1-qv+81qr4VLROuygDU9WtFlH1mmk=",
       "requires": {
         "accepts": "1.3.4",
         "bytes": "3.0.0",
-        "compressible": "2.0.12",
+        "compressible": "2.0.13",
         "debug": "2.6.9",
         "on-headers": "1.0.1",
         "safe-buffer": "5.1.1",
@@ -3391,6 +3560,16 @@
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
       "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
     },
+    "concat-stream": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.0.tgz",
+      "integrity": "sha1-CqxmL9Ur54lk1VMvaUeE5wEQrPc=",
+      "requires": {
+        "inherits": "2.0.3",
+        "readable-stream": "2.3.4",
+        "typedarray": "0.0.6"
+      }
+    },
     "configstore": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/configstore/-/configstore-3.1.1.tgz",
@@ -3398,7 +3577,7 @@
       "requires": {
         "dot-prop": "4.2.0",
         "graceful-fs": "4.1.11",
-        "make-dir": "1.1.0",
+        "make-dir": "1.2.0",
         "unique-string": "1.0.0",
         "write-file-atomic": "2.3.0",
         "xdg-basedir": "3.0.0"
@@ -3500,6 +3679,19 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
     },
+    "copy-concurrently": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
+      "integrity": "sha512-f2domd9fsVDFtaFcbaRZuYXwtdmnzqbADSwhSWYxYB/Q8zsdUUFMXVRwXGDMWmbEzAn1kdRrtI1T/KTFOL4X2A==",
+      "requires": {
+        "aproba": "1.2.0",
+        "fs-write-stream-atomic": "1.0.10",
+        "iferr": "0.1.5",
+        "mkdirp": "0.5.1",
+        "rimraf": "2.6.2",
+        "run-queue": "1.0.3"
+      }
+    },
     "copy-descriptor": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
@@ -3571,7 +3763,7 @@
         "cipher-base": "1.0.4",
         "inherits": "2.0.3",
         "ripemd160": "2.0.1",
-        "sha.js": "2.4.9"
+        "sha.js": "2.4.10"
       }
     },
     "create-hmac": {
@@ -3584,13 +3776,13 @@
         "inherits": "2.0.3",
         "ripemd160": "2.0.1",
         "safe-buffer": "5.1.1",
-        "sha.js": "2.4.9"
+        "sha.js": "2.4.10"
       }
     },
     "create-react-class": {
-      "version": "15.6.2",
-      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.2.tgz",
-      "integrity": "sha1-zx7RXxKq1/FO9fLf4F5sQvke8Co=",
+      "version": "15.6.3",
+      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz",
+      "integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==",
       "requires": {
         "fbjs": "0.8.16",
         "loose-envify": "1.3.1",
@@ -3620,7 +3812,7 @@
           "resolved": "https://registry.npmjs.org/boom/-/boom-5.2.0.tgz",
           "integrity": "sha512-Z5BTk6ZRe4tXXQlkqftmsAUANpXmuwlsF5Oov8ThoMbQRzdGTA1ngYRW160GexgOgjsFOKJz0LYhoNi+2AMBUw==",
           "requires": {
-            "hoek": "4.2.0"
+            "hoek": "4.2.1"
           }
         }
       }
@@ -3639,8 +3831,8 @@
         "inherits": "2.0.3",
         "pbkdf2": "3.0.14",
         "public-encrypt": "4.0.0",
-        "randombytes": "2.0.5",
-        "randomfill": "1.0.3"
+        "randombytes": "2.0.6",
+        "randomfill": "1.0.4"
       }
     },
     "crypto-random-string": {
@@ -3662,9 +3854,9 @@
       }
     },
     "css-loader": {
-      "version": "0.28.7",
-      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-0.28.7.tgz",
-      "integrity": "sha512-GxMpax8a/VgcfRrVy0gXD6yLd5ePYbXX/5zGgTVYp4wXtJklS8Z2VaUArJgc//f6/Dzil7BaJObdSv8eKKCPgg==",
+      "version": "0.28.10",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-0.28.10.tgz",
+      "integrity": "sha512-X1IJteKnW9Llmrd+lJ0f7QZHh9Arf+11S7iRcoT2+riig3BK0QaCaOtubAulMK6Itbo08W6d3l8sW21r+Jhp5Q==",
       "requires": {
         "babel-code-frame": "6.26.0",
         "css-selector-tokenizer": "0.7.0",
@@ -3674,7 +3866,7 @@
         "lodash.camelcase": "4.3.0",
         "object-assign": "4.1.1",
         "postcss": "5.2.18",
-        "postcss-modules-extract-imports": "1.1.0",
+        "postcss-modules-extract-imports": "1.2.0",
         "postcss-modules-local-by-default": "1.2.0",
         "postcss-modules-scope": "1.1.0",
         "postcss-modules-values": "1.3.0",
@@ -3717,7 +3909,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -3789,6 +3981,14 @@
             "supports-color": "3.2.3"
           }
         },
+        "postcss-modules-extract-imports": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz",
+          "integrity": "sha1-thTJcgvmgW6u41+zpfqh26agXds=",
+          "requires": {
+            "postcss": "6.0.1"
+          }
+        },
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
@@ -3885,7 +4085,7 @@
           "integrity": "sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ=",
           "requires": {
             "browserslist": "1.7.7",
-            "caniuse-db": "1.0.30000783",
+            "caniuse-db": "1.0.30000810",
             "normalize-range": "0.1.2",
             "num2fraction": "1.2.2",
             "postcss": "5.2.18",
@@ -3897,8 +4097,8 @@
           "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
           "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
           "requires": {
-            "caniuse-db": "1.0.30000783",
-            "electron-to-chromium": "1.3.28"
+            "caniuse-db": "1.0.30000810",
+            "electron-to-chromium": "1.3.34"
           }
         },
         "chalk": {
@@ -3931,7 +4131,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -3988,12 +4188,17 @@
         "array-find-index": "1.0.2"
       }
     },
+    "cyclist": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",
+      "integrity": "sha1-GzN5LhHpFKL9bW7WRHRkRE5fpkA="
+    },
     "d": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
       "integrity": "sha1-dUu1v+VUUdpppYuU1F9MWwRi1Y8=",
       "requires": {
-        "es5-ext": "0.10.37"
+        "es5-ext": "0.10.39"
       }
     },
     "dashdash": {
@@ -4102,11 +4307,12 @@
       }
     },
     "define-property": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
-      "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/define-property/-/define-property-2.0.2.tgz",
+      "integrity": "sha512-jwK2UV4cnPpbcG7+VRARKTZPUWowwXA8bzH5NP6ud0oeAxyYPuGZUAC7hMugpCdz4BeSZl2Dl9k66CHJ/46ZYQ==",
       "requires": {
-        "is-descriptor": "1.0.1"
+        "is-descriptor": "1.0.2",
+        "isobject": "3.0.1"
       }
     },
     "defined": {
@@ -4138,9 +4344,9 @@
       "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
     },
     "depd": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz",
-      "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
+      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak="
     },
     "des.js": {
       "version": "1.0.0",
@@ -4181,7 +4387,7 @@
       "requires": {
         "bn.js": "4.11.8",
         "miller-rabin": "4.0.1",
-        "randombytes": "2.0.5"
+        "randombytes": "2.0.6"
       }
     },
     "discontinuous-range": {
@@ -4195,9 +4401,9 @@
       "integrity": "sha1-s55/HabrCnW6nBcySzR1PEfgZU0="
     },
     "dns-packet": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.2.2.tgz",
-      "integrity": "sha512-kN+DjfGF7dJGUL7nWRktL9Z18t1rWP3aQlyZdY8XlpvU3Nc6GeFTQApftcjtWKxAZfiggZSGrCEoszNgvnpwDg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.1.tgz",
+      "integrity": "sha512-0UxfQkMhYAUaZI+xrNZOz/as5KgDU0M/fQ9b6SpkyLbk3GEswDi6PADJVaYJradtRVsRIlF1zLyOodbcTCDzUg==",
       "requires": {
         "ip": "1.1.5",
         "safe-buffer": "5.1.1"
@@ -4212,17 +4418,32 @@
       }
     },
     "doctrine": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.0.2.tgz",
-      "integrity": "sha512-y0tm5Pq6ywp3qSTZ1vPgVdAnbDEoeoc5wlOHXoY1c4Wug/a7JvqHIl7BTvwodaHmejWkK/9dSb3sCYfyo/om8A==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
       "requires": {
         "esutils": "2.0.2"
       }
     },
+    "dom-converter": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.1.4.tgz",
+      "integrity": "sha1-pF71cnuJDJv/5tfIduexnLDhfzs=",
+      "requires": {
+        "utila": "0.3.3"
+      },
+      "dependencies": {
+        "utila": {
+          "version": "0.3.3",
+          "resolved": "https://registry.npmjs.org/utila/-/utila-0.3.3.tgz",
+          "integrity": "sha1-1+jn1+MJEHCSsF+NloiCTWM6QiY="
+        }
+      }
+    },
     "dom-helpers": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.2.1.tgz",
-      "integrity": "sha1-MgPgf+0he9H0JLAZc1WC/Deyglo="
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.3.1.tgz",
+      "integrity": "sha512-2Sm+JaYn74OiTM2wHvxJOo3roiq/h25Yi69Fqk269cNUwIXsCvATB6CRSFC9Am/20G2b28hGv/+7NiWydIrPvg=="
     },
     "dom-serializer": {
       "version": "0.1.0",
@@ -4246,9 +4467,9 @@
       "integrity": "sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg="
     },
     "domain-browser": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.1.7.tgz",
-      "integrity": "sha1-hnqksJP6oF8d4IwG9NeyH9+GmLw="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
+      "integrity": "sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA=="
     },
     "domelementtype": {
       "version": "1.3.0",
@@ -4281,16 +4502,16 @@
       }
     },
     "dotenv": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-4.0.0.tgz",
-      "integrity": "sha1-hk7xN5rO1Vzm+V3r7NzhefegzR0="
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-5.0.1.tgz",
+      "integrity": "sha512-4As8uPrjfwb7VXC+WnLCbXK7y+Ueb2B3zgNCePYfhxS1PYeaO1YTeplffTEcbfLhvFNGLAz90VvJs9yomG7bow=="
     },
     "dotenv-webpack": {
-      "version": "1.5.4",
-      "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-1.5.4.tgz",
-      "integrity": "sha1-nJLkbkEqHPvGAhftM9adK7/dv58=",
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/dotenv-webpack/-/dotenv-webpack-1.5.5.tgz",
+      "integrity": "sha1-NEEJTwTTBLYRnmtyUk5i+zJS9fI=",
       "requires": {
-        "dotenv": "4.0.0"
+        "dotenv": "5.0.1"
       }
     },
     "duplexer": {
@@ -4298,6 +4519,17 @@
       "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
       "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E="
     },
+    "duplexify": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.5.3.tgz",
+      "integrity": "sha512-g8ID9OroF9hKt2POf8YLayy+9594PzmM3scI00/uBXocX3TWNgoB67hjzkFe9ITAbQOne/lLdBxHXvYUM4ZgGA==",
+      "requires": {
+        "end-of-stream": "1.4.1",
+        "inherits": "2.0.3",
+        "readable-stream": "2.3.4",
+        "stream-shift": "1.0.0"
+      }
+    },
     "ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
@@ -4309,9 +4541,9 @@
       "integrity": "sha1-zIcsFoiArjxxiXYv1f/ACJbJUYo="
     },
     "electron-to-chromium": {
-      "version": "1.3.28",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.28.tgz",
-      "integrity": "sha1-jdTmRYCGZE6fnwoc8y4qH53/2e4="
+      "version": "1.3.34",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.34.tgz",
+      "integrity": "sha1-2TSY9AORuwwWpgPYJBuZUUBBV+0="
     },
     "elliptic": {
       "version": "6.4.0",
@@ -4333,9 +4565,9 @@
       "integrity": "sha1-TapNnbAPmBmIDHn6RXrlsJof04k="
     },
     "encodeurl": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.1.tgz",
-      "integrity": "sha1-eePVhlU0aQn+bw9Fpd5oEDspTSA="
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
+      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k="
     },
     "encoding": {
       "version": "0.1.12",
@@ -4345,6 +4577,14 @@
         "iconv-lite": "0.4.19"
       }
     },
+    "end-of-stream": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.1.tgz",
+      "integrity": "sha512-1MkrZNvWTKCaigbn+W15elq2BB/L22nqrSY5DKlo3X6+vclJm8Bb5djXJBmEX6fS3+zCh/F4VBK5Z2KxJt4s2Q==",
+      "requires": {
+        "once": "1.4.0"
+      }
+    },
     "enhanced-resolve": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-3.3.0.tgz",
@@ -4362,17 +4602,22 @@
       "integrity": "sha1-blwtClYhtdra7O+AuQ7ftc13cvA="
     },
     "enzyme": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.2.0.tgz",
-      "integrity": "sha512-l0HcjycivXjB4IXkwuRc1K5z8hzWIVZB2b/Y/H2bao9eFTpBz4ACOwAQf44SgG5Nu3d1jF41LasxDgFWZeeysA==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/enzyme/-/enzyme-3.3.0.tgz",
+      "integrity": "sha512-l8csyPyLmtxskTz6pX9W8eDOyH1ckEtDttXk/vlFWCjv00SkjTjtoUrogqp4yEvMyneU9dUJoOLnqFoiHb8IHA==",
       "requires": {
         "cheerio": "1.0.0-rc.2",
-        "function.prototype.name": "1.0.3",
+        "function.prototype.name": "1.1.0",
         "has": "1.0.1",
+        "is-boolean-object": "1.0.0",
+        "is-callable": "1.1.3",
+        "is-number-object": "1.0.3",
+        "is-string": "1.0.4",
         "is-subset": "0.1.1",
-        "lodash": "4.17.4",
+        "lodash": "4.17.5",
+        "object-inspect": "1.5.0",
         "object-is": "1.0.1",
-        "object.assign": "4.0.4",
+        "object.assign": "4.1.0",
         "object.entries": "1.0.4",
         "object.values": "1.0.4",
         "raf": "3.4.0",
@@ -4380,53 +4625,54 @@
       },
       "dependencies": {
         "lodash": {
-          "version": "4.17.4",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
+          "version": "4.17.5",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+          "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
         }
       }
     },
     "enzyme-adapter-react-16": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.1.0.tgz",
-      "integrity": "sha512-OlZJn5PJUJ91EOQQRuISZpXgPlqT9fYR2yBZQPu9UYok+wS19Rn4teXywF34LMcyw2AzE1s0ZRDtcI952/vQHg==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.1.1.tgz",
+      "integrity": "sha512-kC8pAtU2Jk3OJ0EG8Y2813dg9Ol0TXi7UNxHzHiWs30Jo/hj7alc//G1YpKUsPP1oKl9X+Lkx+WlGJpPYA+nvw==",
       "requires": {
-        "enzyme-adapter-utils": "1.2.0",
-        "lodash": "4.17.4",
-        "object.assign": "4.0.4",
+        "enzyme-adapter-utils": "1.3.0",
+        "lodash": "4.17.5",
+        "object.assign": "4.1.0",
         "object.values": "1.0.4",
-        "prop-types": "15.6.0",
+        "prop-types": "15.6.1",
+        "react-reconciler": "0.7.0",
         "react-test-renderer": "16.2.0"
       },
       "dependencies": {
         "lodash": {
-          "version": "4.17.4",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
+          "version": "4.17.5",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+          "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
         }
       }
     },
     "enzyme-adapter-utils": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.2.0.tgz",
-      "integrity": "sha512-6CeIrmymLWoQgvH5m/ixJLaCsa6pSoWU2nlMeO0nHCZR8LQ+tKzP/jPh4qceTPlB4oFfyMRFeqr0+IryY4gAxg==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/enzyme-adapter-utils/-/enzyme-adapter-utils-1.3.0.tgz",
+      "integrity": "sha512-vVXSt6uDv230DIv+ebCG66T1Pm36Kv+m74L1TrF4kaE7e1V7Q/LcxO0QRkajk5cA6R3uu9wJf5h13wOTezTbjA==",
       "requires": {
-        "lodash": "4.17.4",
-        "object.assign": "4.0.4",
-        "prop-types": "15.6.0"
+        "lodash": "4.17.5",
+        "object.assign": "4.1.0",
+        "prop-types": "15.6.1"
       },
       "dependencies": {
         "lodash": {
-          "version": "4.17.4",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
+          "version": "4.17.5",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+          "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
         }
       }
     },
     "errno": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.6.tgz",
-      "integrity": "sha512-IsORQDpaaSwcDP4ZZnHxgE85werpo34VYn1Ud3mq+eUsF593faR8oCZNXrROVkpFu2TsbrNhHin0aUrTsQ9vNw==",
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz",
+      "integrity": "sha512-MfrRBDWzIWifgq6tJj60gkAwtLNb6sQPlcFrSOflcP1aFmmruKQ2wRnze/8V6kgyz7H3FF8Npzv78mZ7XLLflg==",
       "requires": {
         "prr": "1.0.1"
       }
@@ -4462,18 +4708,18 @@
       }
     },
     "es5-ext": {
-      "version": "0.10.37",
-      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.37.tgz",
-      "integrity": "sha1-DudB0Ui4AGm6J9AgOTdWryV978M=",
+      "version": "0.10.39",
+      "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.39.tgz",
+      "integrity": "sha512-AlaXZhPHl0po/uxMx1tyrlt1O86M6D5iVaDH8UgLfgek4kXTX6vzsRfJQWC2Ku+aG8pkw1XWzh9eTkwfVrsD5g==",
       "requires": {
         "es6-iterator": "2.0.3",
         "es6-symbol": "3.1.1"
       }
     },
     "es5-shim": {
-      "version": "4.5.9",
-      "resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-4.5.9.tgz",
-      "integrity": "sha1-Kh4rnlg/9f7Qwgo+4svz91IwpcA="
+      "version": "4.5.10",
+      "resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-4.5.10.tgz",
+      "integrity": "sha512-vmryBdqKRO8Ei9LJ4yyEk/EOmAOGIagcHDYPpTAi6pot4IMHS1AC2q5cTKPmydpijg2iX8DVmCuqgrNxIWj8Yg=="
     },
     "es6-iterator": {
       "version": "2.0.3",
@@ -4481,7 +4727,7 @@
       "integrity": "sha1-p96IkUGgWpSwhUQDstCg+/qY87c=",
       "requires": {
         "d": "1.0.0",
-        "es5-ext": "0.10.37",
+        "es5-ext": "0.10.39",
         "es6-symbol": "3.1.1"
       }
     },
@@ -4491,7 +4737,7 @@
       "integrity": "sha1-kTbgUD3MBqMBaQ8LsU/042TpSfA=",
       "requires": {
         "d": "1.0.0",
-        "es5-ext": "0.10.37",
+        "es5-ext": "0.10.39",
         "es6-iterator": "2.0.3",
         "es6-set": "0.1.5",
         "es6-symbol": "3.1.1",
@@ -4499,9 +4745,9 @@
       }
     },
     "es6-promise": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.1.1.tgz",
-      "integrity": "sha512-OaU1hHjgJf+b0NzsxCg7NdIYERD6Hy/PEmFLTjw+b65scuisG3Kt4QoTvJ66BBkPZ581gr0kpoVzKnxniM8nng=="
+      "version": "4.2.4",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.4.tgz",
+      "integrity": "sha512-/NdNZVJg+uZgtm9eS3O6lrOLYmQag2DjdEXuPaHlZ6RuVqgqaVZfgYCepEIKsLqwdQArOPtC3XzRLqGGfT8KQQ=="
     },
     "es6-set": {
       "version": "0.1.5",
@@ -4509,7 +4755,7 @@
       "integrity": "sha1-0rPsXU2ADO2BjbU40ol02wpzzLE=",
       "requires": {
         "d": "1.0.0",
-        "es5-ext": "0.10.37",
+        "es5-ext": "0.10.39",
         "es6-iterator": "2.0.3",
         "es6-symbol": "3.1.1",
         "event-emitter": "0.3.5"
@@ -4526,7 +4772,44 @@
       "integrity": "sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=",
       "requires": {
         "d": "1.0.0",
-        "es5-ext": "0.10.37"
+        "es5-ext": "0.10.39"
+      }
+    },
+    "es6-templates": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/es6-templates/-/es6-templates-0.2.3.tgz",
+      "integrity": "sha1-XLmsn7He1usSOTQrgdeSu7QHjuQ=",
+      "requires": {
+        "recast": "0.11.23",
+        "through": "2.3.8"
+      },
+      "dependencies": {
+        "ast-types": {
+          "version": "0.9.6",
+          "resolved": "https://registry.npmjs.org/ast-types/-/ast-types-0.9.6.tgz",
+          "integrity": "sha1-ECyenpAF0+fjgpvwxPok7oYu6bk="
+        },
+        "esprima": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
+          "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM="
+        },
+        "recast": {
+          "version": "0.11.23",
+          "resolved": "https://registry.npmjs.org/recast/-/recast-0.11.23.tgz",
+          "integrity": "sha1-RR/TAEqx5N+bTktmN2sqIZEkYtM=",
+          "requires": {
+            "ast-types": "0.9.6",
+            "esprima": "3.1.3",
+            "private": "0.1.8",
+            "source-map": "0.5.7"
+          }
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        }
       }
     },
     "es6-weak-map": {
@@ -4535,7 +4818,7 @@
       "integrity": "sha1-XjqzIlH/0VOKH45f+hNXdy+S2W8=",
       "requires": {
         "d": "1.0.0",
-        "es5-ext": "0.10.37",
+        "es5-ext": "0.10.39",
         "es6-iterator": "2.0.3",
         "es6-symbol": "3.1.1"
       }
@@ -4551,14 +4834,15 @@
       "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
     },
     "escodegen": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.9.0.tgz",
-      "integrity": "sha512-v0MYvNQ32bzwoG2OSFzWAkuahDQHK92JBN0pTAALJ4RIxEZe766QJPDR8Hqy7XNUy5K3fnVL76OqYAdc4TZEIw==",
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.9.1.tgz",
+      "integrity": "sha512-6hTjO1NAWkHnDk3OqQ4YrCuwwmGHL9S3nPlzBOUG/R44rda3wLNrfvQ5fkSGjyhHFKM7ALPKcKGrwvCLe0lC7Q==",
       "requires": {
         "esprima": "3.1.3",
         "estraverse": "4.2.0",
         "esutils": "2.0.2",
-        "optionator": "0.8.2"
+        "optionator": "0.8.2",
+        "source-map": "0.6.1"
       },
       "dependencies": {
         "esprima": {
@@ -4575,7 +4859,7 @@
       "requires": {
         "es6-map": "0.1.5",
         "es6-weak-map": "2.0.2",
-        "esrecurse": "4.2.0",
+        "esrecurse": "4.2.1",
         "estraverse": "4.2.0"
       }
     },
@@ -4585,12 +4869,11 @@
       "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE="
     },
     "esrecurse": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.0.tgz",
-      "integrity": "sha1-+pVo2Y04I/mkHZHpAtyrnqblsWM=",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.2.1.tgz",
+      "integrity": "sha512-64RBB++fIOAXPw3P9cy89qfMlvZEXZkqqJkjqqXIvzP5ezRZjW+lPWjw35UX/3EhUPFYbg5ER4JYgDw4007/DQ==",
       "requires": {
-        "estraverse": "4.2.0",
-        "object-assign": "4.1.1"
+        "estraverse": "4.2.0"
       }
     },
     "estraverse": {
@@ -4614,7 +4897,7 @@
       "integrity": "sha1-34xp7vFkeSPHFXuc6DhAYQsCzDk=",
       "requires": {
         "d": "1.0.0",
-        "es5-ext": "0.10.37"
+        "es5-ext": "0.10.39"
       }
     },
     "eventemitter3": {
@@ -4680,9 +4963,9 @@
         "define-property": "0.2.5",
         "extend-shallow": "2.0.1",
         "posix-character-classes": "0.1.1",
-        "regex-not": "1.0.0",
+        "regex-not": "1.0.2",
         "snapdragon": "0.8.1",
-        "to-regex": "3.0.1"
+        "to-regex": "3.0.2"
       },
       "dependencies": {
         "define-property": {
@@ -4693,6 +4976,50 @@
             "is-descriptor": "0.1.6"
           }
         },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "requires": {
+            "is-extendable": "0.1.1"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "0.1.6",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+          "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+          "requires": {
+            "kind-of": "3.2.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "requires": {
+                "is-buffer": "1.1.6"
+              }
+            }
+          }
+        },
+        "is-data-descriptor": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+          "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+          "requires": {
+            "kind-of": "3.2.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "requires": {
+                "is-buffer": "1.1.6"
+              }
+            }
+          }
+        },
         "is-descriptor": {
           "version": "0.1.6",
           "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
@@ -4782,8 +5109,8 @@
         "cookie": "0.3.1",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
-        "depd": "1.1.1",
-        "encodeurl": "1.0.1",
+        "depd": "1.1.2",
+        "encodeurl": "1.0.2",
         "escape-html": "1.0.3",
         "etag": "1.8.1",
         "finalhandler": "1.1.0",
@@ -4793,7 +5120,7 @@
         "on-finished": "2.3.0",
         "parseurl": "1.3.2",
         "path-to-regexp": "0.1.7",
-        "proxy-addr": "2.0.2",
+        "proxy-addr": "2.0.3",
         "qs": "6.5.1",
         "range-parser": "1.2.0",
         "safe-buffer": "5.1.1",
@@ -4801,7 +5128,7 @@
         "serve-static": "1.13.1",
         "setprototypeof": "1.1.0",
         "statuses": "1.3.1",
-        "type-is": "1.6.15",
+        "type-is": "1.6.16",
         "utils-merge": "1.0.1",
         "vary": "1.1.2"
       }
@@ -4812,11 +5139,22 @@
       "integrity": "sha1-p1Xqe8Gt/MWjHOfnYtuq3F5jZEQ="
     },
     "extend-shallow": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
-      "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.2.tgz",
+      "integrity": "sha1-Jqcarwc7OfshJxcnRhMcJwQCjbg=",
       "requires": {
-        "is-extendable": "0.1.1"
+        "assign-symbols": "1.0.0",
+        "is-extendable": "1.0.1"
+      },
+      "dependencies": {
+        "is-extendable": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
+          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
+          "requires": {
+            "is-plain-object": "2.0.4"
+          }
+        }
       }
     },
     "external-editor": {
@@ -4830,18 +5168,36 @@
       }
     },
     "extglob": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.2.tgz",
-      "integrity": "sha512-I0+eZBH+jFGL8F5BnIz2ON2nKCjTS3AS3H/5PeSmCp7UVC70Ym8IhdRiQly2juKYQ//f7z1aj1BRpQniFJoU1w==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/extglob/-/extglob-2.0.4.tgz",
+      "integrity": "sha512-Nmb6QXkELsuBr24CJSkilo6UHHgbekK5UiZgfE6UHD3Eb27YC6oD+bhcT+tJ6cl8dmsgdQxnWlcry8ksBIBLpw==",
       "requires": {
         "array-unique": "0.3.2",
         "define-property": "1.0.0",
         "expand-brackets": "2.1.4",
         "extend-shallow": "2.0.1",
         "fragment-cache": "0.2.1",
-        "regex-not": "1.0.0",
+        "regex-not": "1.0.2",
         "snapdragon": "0.8.1",
-        "to-regex": "3.0.1"
+        "to-regex": "3.0.2"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "requires": {
+            "is-descriptor": "1.0.2"
+          }
+        },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "requires": {
+            "is-extendable": "0.1.1"
+          }
+        }
       }
     },
     "extsprintf": {
@@ -4850,9 +5206,9 @@
       "integrity": "sha1-lpGEQOMEGnpBT4xS48V06zw+HgU="
     },
     "fast-deep-equal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.0.0.tgz",
-      "integrity": "sha1-liVqO8l1WV6zbYLpkp0GDYk0Of8="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz",
+      "integrity": "sha1-wFNHeBfIa1HaqFPIHgWbcz0CNhQ="
     },
     "fast-json-stable-stringify": {
       "version": "2.0.0",
@@ -4865,9 +5221,9 @@
       "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc="
     },
     "fast-memoize": {
-      "version": "2.2.8",
-      "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.2.8.tgz",
-      "integrity": "sha512-3ppTC3fZ9Vwtjslx8DkhSIbI9PH1nM4pobuTHQINOxTxchG8n3SDGZ8L6jbatGJCGLKR+gbkNWKFN4E1iUROSA=="
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.3.0.tgz",
+      "integrity": "sha512-wH36QD7q17IXIq3WDEQTb+eehTzpCXXdGRAYw4jQdVmMWdBZc5ysRhV/5nZx67KBNgFt1H1XwLgDiYxQL3uXJw=="
     },
     "fastparse": {
       "version": "1.1.1",
@@ -4942,9 +5298,9 @@
       }
     },
     "filesize": {
-      "version": "3.5.11",
-      "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.5.11.tgz",
-      "integrity": "sha512-ZH7loueKBoDb7yG9esn1U+fgq7BzlzW6NRi5/rMdxIZ05dj7GFD/Xc5rq2CDt5Yq86CyfSYVyx4242QQNZbx1g=="
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/filesize/-/filesize-3.6.0.tgz",
+      "integrity": "sha512-g5OWtoZWcPI56js1DFhIEqyG9tnu/7sG3foHwgS9KGYFMfsYguI3E+PRVCmtmE96VajQIEMRU2OhN+ME589Gdw=="
     },
     "fill-range": {
       "version": "4.0.0",
@@ -4955,6 +5311,16 @@
         "is-number": "3.0.0",
         "repeat-string": "1.6.1",
         "to-regex-range": "2.1.1"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "requires": {
+            "is-extendable": "0.1.1"
+          }
+        }
       }
     },
     "finalhandler": {
@@ -4963,7 +5329,7 @@
       "integrity": "sha1-zgtoVbRYU+eRsvzGgARtiCU91/U=",
       "requires": {
         "debug": "2.6.9",
-        "encodeurl": "1.0.1",
+        "encodeurl": "1.0.2",
         "escape-html": "1.0.3",
         "on-finished": "2.3.0",
         "parseurl": "1.3.2",
@@ -4977,7 +5343,7 @@
       "integrity": "sha1-kojj6ePMN0hxfTnq3hfPcfww7m8=",
       "requires": {
         "commondir": "1.0.1",
-        "make-dir": "1.1.0",
+        "make-dir": "1.2.0",
         "pkg-dir": "2.0.0"
       }
     },
@@ -5018,10 +5384,19 @@
       "resolved": "https://registry.npmjs.org/flatten/-/flatten-1.0.2.tgz",
       "integrity": "sha1-2uRqnXj74lKSJYzB54CkHZXAN4I="
     },
+    "flush-write-stream": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/flush-write-stream/-/flush-write-stream-1.0.2.tgz",
+      "integrity": "sha1-yBuQ2HRnZvGmCaRoCZRsRd2K5Bc=",
+      "requires": {
+        "inherits": "2.0.3",
+        "readable-stream": "2.3.4"
+      }
+    },
     "follow-redirects": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.2.6.tgz",
-      "integrity": "sha512-FrMqZ/FONtHnbqO651UPpfRUVukIEwJhXMfdr/JWAmrDbeYBu773b1J6gdWDyRIj4hvvzQEHoEOTrdR8o6KLYA==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.4.1.tgz",
+      "integrity": "sha512-uxYePVPogtya1ktGnAAXOacnbIuRMB4dkvqeNz2qTtTQsuzSfbDolV+wMMKxAmCx0bLgAKLbBOkjItMbbkR1vg==",
       "requires": {
         "debug": "3.1.0"
       },
@@ -5060,21 +5435,13 @@
       "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE="
     },
     "form-data": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.1.tgz",
-      "integrity": "sha1-b7lPvXGIUwbXPRXMSX/kzE7NRL8=",
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.3.2.tgz",
+      "integrity": "sha1-SXBJi+YEwgwAXU9cI67NIda0kJk=",
       "requires": {
         "asynckit": "0.4.0",
-        "combined-stream": "1.0.5",
-        "mime-types": "2.1.17"
-      }
-    },
-    "formatio": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/formatio/-/formatio-1.2.0.tgz",
-      "integrity": "sha1-87IWfZBoxGmKjVH092CjmlTYGOs=",
-      "requires": {
-        "samsam": "1.3.0"
+        "combined-stream": "1.0.6",
+        "mime-types": "2.1.18"
       }
     },
     "forwarded": {
@@ -5095,6 +5462,15 @@
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
       "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac="
     },
+    "from2": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/from2/-/from2-2.3.0.tgz",
+      "integrity": "sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=",
+      "requires": {
+        "inherits": "2.0.3",
+        "readable-stream": "2.3.4"
+      }
+    },
     "fs-extra": {
       "version": "0.26.7",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-0.26.7.tgz",
@@ -5107,6 +5483,17 @@
         "rimraf": "2.6.2"
       }
     },
+    "fs-write-stream-atomic": {
+      "version": "1.0.10",
+      "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
+      "integrity": "sha1-tH31NJPvkR33VzHnCp3tAYnbQMk=",
+      "requires": {
+        "graceful-fs": "4.1.11",
+        "iferr": "0.1.5",
+        "imurmurhash": "0.1.4",
+        "readable-stream": "2.3.4"
+      }
+    },
     "fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -5129,9 +5516,9 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
     },
     "function.prototype.name": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.0.3.tgz",
-      "integrity": "sha512-5EblxZUdioXi2JiMZ9FUbwYj40eQ9MFHyzFLBSPdlRl3SO8l7SLWuAnQ/at/1Wi4hjJwME/C5WpF2ZfAc8nGNw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.0.tgz",
+      "integrity": "sha512-Bs0VRrTz4ghD8pTmbJQD1mZ8A/mN0ur/jGz+A6FBxPDUPkm1tNfF6bhTYPA7i7aF4lZJVr+OXTNNrnnIl58Wfg==",
       "requires": {
         "define-properties": "1.1.2",
         "function-bind": "1.1.1",
@@ -5270,7 +5657,7 @@
           "integrity": "sha1-NLkLqyqRGqNHVx2pDyK9NuzYqRk=",
           "requires": {
             "debug": "2.6.9",
-            "stream-consume": "0.1.0"
+            "stream-consume": "0.1.1"
           }
         }
       }
@@ -5309,17 +5696,17 @@
         "fbjs": "0.8.16",
         "inline-style-prefixer": "3.0.8",
         "object-assign": "4.1.1",
-        "prop-types": "15.6.0",
+        "prop-types": "15.6.1",
         "through": "2.3.8"
       }
     },
     "glamorous": {
-      "version": "4.11.0",
-      "resolved": "https://registry.npmjs.org/glamorous/-/glamorous-4.11.0.tgz",
-      "integrity": "sha512-qWRmq5HZ6kGnp09/z3I0L5ZWZF8PX9W90ED8Ndm3ccfaamWRcEURYilk3zA1M1VW1xJlV28+aD2XlwbQF5YlSw==",
+      "version": "4.11.6",
+      "resolved": "https://registry.npmjs.org/glamorous/-/glamorous-4.11.6.tgz",
+      "integrity": "sha512-fR9jTVipC3Vb4Jps4aQFjxEuGPexo/J74ZUZIA8ZpgENljGUL+9SdKk0Ut1iZc23tLLtbi6wRmAqQG3thwzjAw==",
       "requires": {
         "brcast": "3.0.1",
-        "fast-memoize": "2.2.8",
+        "fast-memoize": "2.3.0",
         "html-tag-names": "1.1.2",
         "is-function": "1.0.1",
         "is-plain-object": "2.0.4",
@@ -5411,14 +5798,14 @@
       "integrity": "sha1-HcScaCLdnoovoAuiopUAboZkvQk=",
       "requires": {
         "glob": "7.1.2",
-        "lodash": "4.17.4",
+        "lodash": "4.17.5",
         "minimatch": "3.0.4"
       },
       "dependencies": {
         "lodash": {
-          "version": "4.17.4",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
+          "version": "4.17.5",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+          "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
         }
       }
     },
@@ -5491,7 +5878,7 @@
       "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-5.0.3.tgz",
       "integrity": "sha1-ukAsJmGU8VlW7xXg/PJCmT9qff0=",
       "requires": {
-        "ajv": "5.5.1",
+        "ajv": "5.5.2",
         "har-schema": "2.0.0"
       }
     },
@@ -5512,9 +5899,14 @@
       }
     },
     "has-flag": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
-      "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
+      "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+    },
+    "has-symbols": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.0.tgz",
+      "integrity": "sha1-uhqPGvKg/DllD1yFA2dwQSIGO0Q="
     },
     "has-unicode": {
       "version": "2.0.1",
@@ -5574,7 +5966,7 @@
       "requires": {
         "boom": "4.3.1",
         "cryptiles": "3.1.2",
-        "hoek": "4.2.0",
+        "hoek": "4.2.1",
         "sntp": "2.1.0"
       }
     },
@@ -5599,9 +5991,9 @@
       }
     },
     "hoek": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.0.tgz",
-      "integrity": "sha512-v0XCLxICi9nPfYrS9RL8HbYnXi9obYAeLbSP00BmnZwCK9+Ih9WOjoZ8YoHCoav2csqn4FOz4Orldsy2dmDwmQ=="
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/hoek/-/hoek-4.2.1.tgz",
+      "integrity": "sha512-QLg82fGkfnJ/4iy1xZ81/9SIJiq1NGFUMGs6ParyjBZr6jW2Ufj/snDqTHixNlHdPNwN2RLVD0Pi3igeK9+JfA=="
     },
     "hoist-non-react-statics": {
       "version": "1.2.0",
@@ -5629,7 +6021,7 @@
       "requires": {
         "inherits": "2.0.3",
         "obuf": "1.1.1",
-        "readable-stream": "2.3.3",
+        "readable-stream": "2.3.4",
         "wbuf": "1.7.2"
       }
     },
@@ -5656,11 +6048,80 @@
       "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-1.2.1.tgz",
       "integrity": "sha1-DfKTUfByEWNRXfueVUPl9u7VFi8="
     },
+    "html-loader": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/html-loader/-/html-loader-0.5.5.tgz",
+      "integrity": "sha512-7hIW7YinOYUpo//kSYcPB6dCKoceKLmOwjEMmhIobHuWGDVl0Nwe4l68mdG/Ru0wcUxQjVMEoZpkalZ/SE7zog==",
+      "requires": {
+        "es6-templates": "0.2.3",
+        "fastparse": "1.1.1",
+        "html-minifier": "3.5.9",
+        "loader-utils": "1.1.0",
+        "object-assign": "4.1.1"
+      }
+    },
+    "html-minifier": {
+      "version": "3.5.9",
+      "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.9.tgz",
+      "integrity": "sha512-EZqO91XJwkj8BeLx9C12sKB/AHoTANaZax39vEOP9f/X/9jgJ3r1O2+neabuHqpz5kJO71TapP9JrtCY39su1A==",
+      "requires": {
+        "camel-case": "3.0.0",
+        "clean-css": "4.1.9",
+        "commander": "2.14.1",
+        "he": "1.1.1",
+        "ncname": "1.0.0",
+        "param-case": "2.1.1",
+        "relateurl": "0.2.7",
+        "uglify-js": "3.3.12"
+      },
+      "dependencies": {
+        "uglify-js": {
+          "version": "3.3.12",
+          "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.3.12.tgz",
+          "integrity": "sha512-4jxrTXlV0HaXTsNILfXW0eey7Qo8qHYM6ih5ZNh45erDWU2GHmKDmekwBTskDb12h+kdd2DBvdzqVb47YzNmTA==",
+          "requires": {
+            "commander": "2.14.1",
+            "source-map": "0.6.1"
+          }
+        }
+      }
+    },
     "html-tag-names": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/html-tag-names/-/html-tag-names-1.1.2.tgz",
       "integrity": "sha1-9lFolkxanIJnXv2ogoddyyqHXCI="
     },
+    "html-webpack-plugin": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-2.30.1.tgz",
+      "integrity": "sha1-f5xCG36pHsRg9WUn1430hO51N9U=",
+      "requires": {
+        "bluebird": "3.5.1",
+        "html-minifier": "3.5.9",
+        "loader-utils": "0.2.17",
+        "lodash": "4.17.5",
+        "pretty-error": "2.1.1",
+        "toposort": "1.0.6"
+      },
+      "dependencies": {
+        "loader-utils": {
+          "version": "0.2.17",
+          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-0.2.17.tgz",
+          "integrity": "sha1-+G5jdNQyBabmxg6RlvF8Apm/s0g=",
+          "requires": {
+            "big.js": "3.2.0",
+            "emojis-list": "2.1.0",
+            "json5": "0.5.1",
+            "object-assign": "4.1.1"
+          }
+        },
+        "lodash": {
+          "version": "4.17.5",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+          "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
+        }
+      }
+    },
     "htmlparser2": {
       "version": "3.9.2",
       "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.9.2.tgz",
@@ -5671,7 +6132,7 @@
         "domutils": "1.5.1",
         "entities": "1.1.1",
         "inherits": "2.0.3",
-        "readable-stream": "2.3.3"
+        "readable-stream": "2.3.4"
       }
     },
     "http-deceiver": {
@@ -5690,6 +6151,11 @@
         "statuses": "1.3.1"
       },
       "dependencies": {
+        "depd": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz",
+          "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k="
+        },
         "setprototypeof": {
           "version": "1.0.3",
           "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz",
@@ -5698,9 +6164,9 @@
       }
     },
     "http-parser-js": {
-      "version": "0.4.9",
-      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.4.9.tgz",
-      "integrity": "sha1-6hoE+2St/wJC6ZdPKX3Uw8rSceE="
+      "version": "0.4.10",
+      "resolved": "https://registry.npmjs.org/http-parser-js/-/http-parser-js-0.4.10.tgz",
+      "integrity": "sha1-ksnBN0w1CF912zWexWzCV8u5P6Q="
     },
     "http-proxy": {
       "version": "1.16.2",
@@ -5718,7 +6184,7 @@
       "requires": {
         "http-proxy": "1.16.2",
         "is-glob": "3.1.0",
-        "lodash": "4.17.4",
+        "lodash": "4.17.5",
         "micromatch": "2.3.11"
       },
       "dependencies": {
@@ -5790,9 +6256,9 @@
           }
         },
         "lodash": {
-          "version": "4.17.4",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
+          "version": "4.17.5",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+          "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
         },
         "micromatch": {
           "version": "2.3.11",
@@ -5876,7 +6342,7 @@
       "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-2.1.0.tgz",
       "integrity": "sha1-g/Cg7DeL8yRheLbCrZE28TWxyWI=",
       "requires": {
-        "postcss": "6.0.14"
+        "postcss": "6.0.19"
       }
     },
     "ieee754": {
@@ -5884,11 +6350,17 @@
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.8.tgz",
       "integrity": "sha1-vjPUCsEO8ZJnAfbwii2G+/0a0+Q="
     },
+    "iferr": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/iferr/-/iferr-0.1.5.tgz",
+      "integrity": "sha1-xg7taebY/bazEEofy8ocGS3FtQE="
+    },
     "immutability-helper": {
-      "version": "2.6.4",
-      "resolved": "https://registry.npmjs.org/immutability-helper/-/immutability-helper-2.6.4.tgz",
+      "version": "2.6.5",
+      "resolved": "https://registry.npmjs.org/immutability-helper/-/immutability-helper-2.6.5.tgz",
+      "integrity": "sha512-nRj5RN2em1O3NK25Zz0eBszg+kQ3mR5WgZp3wRajbyeu/Ii/eXhpwjB8JG4Hd78JUnuFVXSchWF5EZBI6F+vEA==",
       "requires": {
-        "invariant": "2.2.2"
+        "invariant": "2.2.3"
       }
     },
     "immutable": {
@@ -5897,9 +6369,9 @@
       "integrity": "sha1-wkOZUUVbs5kT2vKBN28VMOEErfM="
     },
     "import-local": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/import-local/-/import-local-0.1.1.tgz",
-      "integrity": "sha1-sReVcqrNwRxqkQCftDDbyrX2aKg=",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/import-local/-/import-local-1.0.0.tgz",
+      "integrity": "sha512-vAaZHieK9qjGo58agRBg+bhHX3hoTZU/Oa3GESWLz7t1U62fk63aHuDJJEteXoDeTCcPmUT+z38gkHPZkkmpmQ==",
       "requires": {
         "pkg-dir": "2.0.0",
         "resolve-cwd": "2.0.0"
@@ -5952,7 +6424,7 @@
       "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz",
       "integrity": "sha1-hVG45bTVcyROZqNLBPfTIHaitTQ=",
       "requires": {
-        "bowser": "1.8.1",
+        "bowser": "1.9.2",
         "css-in-js-utils": "2.0.0"
       }
     },
@@ -6014,9 +6486,9 @@
       "integrity": "sha1-ftGxQQxqDg94z5XTuEQMY/eLhhQ="
     },
     "invariant": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz",
-      "integrity": "sha1-nh9WrArNtr8wMwbzOL47IErmA2A=",
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.3.tgz",
+      "integrity": "sha512-7Z5PPegwDTyjbaeCnV0efcyS6vdKAU51kpEmS7QFib3P4822l8ICYyMn7qvJnc+WzLoDsuI9gPMKbJ8pCu8XtA==",
       "requires": {
         "loose-envify": "1.3.1"
       }
@@ -6032,9 +6504,9 @@
       "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo="
     },
     "ipaddr.js": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.5.2.tgz",
-      "integrity": "sha1-1LUFvemUaYfM8PxY2QEP+WB+P6A="
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.6.0.tgz",
+      "integrity": "sha1-4/o1e3c9phnybpXwSdBVxyeW+Gs="
     },
     "is-absolute-url": {
       "version": "2.1.0",
@@ -6042,21 +6514,11 @@
       "integrity": "sha1-UFMN+4T8yap9vnhS6Do3uTufKqY="
     },
     "is-accessor-descriptor": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
-      "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-1.0.0.tgz",
+      "integrity": "sha512-m5hnHTkcVsPfqx3AKlyttIPb7J+XykHvJP2B9bZDjlhLIoEq4XoK64Vg7boZlVWYK6LUY94dYPEE7Lh0ZkZKcQ==",
       "requires": {
-        "kind-of": "3.2.2"
-      },
-      "dependencies": {
-        "kind-of": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "requires": {
-            "is-buffer": "1.1.6"
-          }
-        }
+        "kind-of": "6.0.2"
       }
     },
     "is-arrayish": {
@@ -6072,6 +6534,11 @@
         "binary-extensions": "1.11.0"
       }
     },
+    "is-boolean-object": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.0.0.tgz",
+      "integrity": "sha1-mPiygDBoQhmpXzdc+9iM40Bd/5M="
+    },
     "is-buffer": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
@@ -6091,29 +6558,19 @@
       "integrity": "sha1-hut1OSgF3cM69xySoO7fdO52BLI="
     },
     "is-ci": {
-      "version": "1.0.10",
-      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.0.10.tgz",
-      "integrity": "sha1-9zkzayYyNlBhqdSCcM1WrjNpMY4=",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-1.1.0.tgz",
+      "integrity": "sha512-c7TnwxLePuqIlxHgr7xtxzycJPegNHFuIrBkwbf8hc58//+Op1CqFkyS+xnIMkwn9UsJIwc174BIjkyBmSpjKg==",
       "requires": {
         "ci-info": "1.1.2"
       }
     },
     "is-data-descriptor": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
-      "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-1.0.0.tgz",
+      "integrity": "sha512-jbRXy1FmtAoCjQkVmIVYwuuqDFUbaOeDjmed1tOGPrsMhtJA4rD9tkgA0F1qJ3gRFRXcHYVkdeaP50Q5rE/jLQ==",
       "requires": {
-        "kind-of": "3.2.2"
-      },
-      "dependencies": {
-        "kind-of": {
-          "version": "3.2.2",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-          "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-          "requires": {
-            "is-buffer": "1.1.6"
-          }
-        }
+        "kind-of": "6.0.2"
       }
     },
     "is-date-object": {
@@ -6122,20 +6579,13 @@
       "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY="
     },
     "is-descriptor": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.1.tgz",
-      "integrity": "sha512-G3fFVFTqfaqu7r4YuSBHKBAuOaLz8Sy7ekklUpFEliaLMP1Y2ZjoN9jS62YWCAPQrQpMUQSitRlrzibbuCZjdA==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-1.0.2.tgz",
+      "integrity": "sha512-2eis5WqQGV7peooDyLmNEPUrps9+SXX5c9pL3xEB+4e9HnGuDa7mB7kHxHw4CbqS9k1T2hOH3miL8n8WtiYVtg==",
       "requires": {
-        "is-accessor-descriptor": "0.1.6",
-        "is-data-descriptor": "0.1.4",
-        "kind-of": "5.1.0"
-      },
-      "dependencies": {
-        "kind-of": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
-          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
-        }
+        "is-accessor-descriptor": "1.0.0",
+        "is-data-descriptor": "1.0.0",
+        "kind-of": "6.0.2"
       }
     },
     "is-directory": {
@@ -6197,13 +6647,19 @@
         "is-extglob": "1.0.0"
       }
     },
+    "is-my-ip-valid": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-my-ip-valid/-/is-my-ip-valid-1.0.0.tgz",
+      "integrity": "sha512-gmh/eWXROncUzRnIa1Ubrt5b8ep/MGSnfAUI3aRp+sqTCs1tv1Isl8d8F6JmkN3dXKc3ehZMrtiPN9eL03NuaQ=="
+    },
     "is-my-json-valid": {
-      "version": "2.16.1",
-      "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.16.1.tgz",
-      "integrity": "sha512-ochPsqWS1WXj8ZnMIV0vnNXooaMhp7cyL4FMSIPKTtnV0Ha/T19G2b9kkhcNsabV9bxYkze7/aLZJb/bYuFduQ==",
+      "version": "2.17.2",
+      "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.17.2.tgz",
+      "integrity": "sha512-IBhBslgngMQN8DDSppmgDv7RNrlFotuuDsKcrCP3+HbFaVivIBU7u9oiiErw8sH4ynx3+gOGQ3q2otkgiSi6kg==",
       "requires": {
         "generate-function": "2.0.0",
         "generate-object-property": "1.2.0",
+        "is-my-ip-valid": "1.0.0",
         "jsonpointer": "4.0.1",
         "xtend": "4.0.1"
       }
@@ -6226,17 +6682,29 @@
         }
       }
     },
+    "is-number-object": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.3.tgz",
+      "integrity": "sha1-8mWrian0RQNO9q/xWo8AsA9VF5k="
+    },
     "is-obj": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
       "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8="
     },
     "is-odd": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-odd/-/is-odd-1.0.0.tgz",
-      "integrity": "sha1-O4qTLrAos3dcObsJ6RdnrM22kIg=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-odd/-/is-odd-2.0.0.tgz",
+      "integrity": "sha512-OTiixgpZAT1M4NHgS5IguFp/Vz2VI3U7Goh4/HA1adtwyLtSBrxYlcSYkhpAE07s4fKEcjrFxyvtQBND4vFQyQ==",
       "requires": {
-        "is-number": "3.0.0"
+        "is-number": "4.0.0"
+      },
+      "dependencies": {
+        "is-number": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-4.0.0.tgz",
+          "integrity": "sha512-rSklcAIlf1OmFdyAqbnWTLVelsQ58uvZ66S/ZyawjWqIviTWCjg2PzVGw8WUA+nNuPTqb4wgA+NszrJ+08LlgQ=="
+        }
       }
     },
     "is-path-cwd": {
@@ -6306,6 +6774,11 @@
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
       "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
     },
+    "is-string": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.4.tgz",
+      "integrity": "sha1-zDqbaYV9Yh6WNyWiTK7shzuCbmQ="
+    },
     "is-subset": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/is-subset/-/is-subset-0.1.1.tgz",
@@ -6334,6 +6807,11 @@
       "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
       "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI="
     },
+    "is-windows": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
+      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA=="
+    },
     "is-wsl": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
@@ -6374,27 +6852,27 @@
       "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo="
     },
     "istanbul-api": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/istanbul-api/-/istanbul-api-1.2.1.tgz",
-      "integrity": "sha512-oFCwXvd65amgaPCzqrR+a2XjanS1MvpXN6l/MlMUTv6uiA1NOgGX+I0uyq8Lg3GDxsxPsaP1049krz3hIJ5+KA==",
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/istanbul-api/-/istanbul-api-1.2.2.tgz",
+      "integrity": "sha512-kH5YRdqdbs5hiH4/Rr1Q0cSAGgjh3jTtg8vu9NLebBAoK3adVO4jk81J+TYOkTr2+Q4NLeb1ACvmEt65iG/Vbw==",
       "requires": {
         "async": "2.6.0",
         "fileset": "2.0.3",
-        "istanbul-lib-coverage": "1.1.1",
+        "istanbul-lib-coverage": "1.1.2",
         "istanbul-lib-hook": "1.1.0",
-        "istanbul-lib-instrument": "1.9.1",
-        "istanbul-lib-report": "1.1.2",
-        "istanbul-lib-source-maps": "1.2.2",
-        "istanbul-reports": "1.1.3",
+        "istanbul-lib-instrument": "1.9.2",
+        "istanbul-lib-report": "1.1.3",
+        "istanbul-lib-source-maps": "1.2.3",
+        "istanbul-reports": "1.1.4",
         "js-yaml": "3.7.0",
         "mkdirp": "0.5.1",
         "once": "1.4.0"
       }
     },
     "istanbul-lib-coverage": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-1.1.1.tgz",
-      "integrity": "sha512-0+1vDkmzxqJIn5rcoEqapSB4DmPxE31EtI2dF2aCkV5esN9EWHxZ0dwgDClivMXJqE7zaYQxq30hj5L0nlTN5Q=="
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-1.1.2.tgz",
+      "integrity": "sha512-tZYA0v5A7qBSsOzcebJJ/z3lk3oSzH62puG78DbBA1+zupipX2CakDyiPV3pOb8He+jBwVimuwB0dTnh38hX0w=="
     },
     "istanbul-lib-hook": {
       "version": "1.1.0",
@@ -6405,25 +6883,25 @@
       }
     },
     "istanbul-lib-instrument": {
-      "version": "1.9.1",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-1.9.1.tgz",
-      "integrity": "sha512-RQmXeQ7sphar7k7O1wTNzVczF9igKpaeGQAG9qR2L+BS4DCJNTI9nytRmIVYevwO0bbq+2CXvJmYDuz0gMrywA==",
+      "version": "1.9.2",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-instrument/-/istanbul-lib-instrument-1.9.2.tgz",
+      "integrity": "sha512-nz8t4HQ2206a/3AXi+NHFWEa844DMpPsgbcUteJbt1j8LX1xg56H9rOMnhvcvVvPbW60qAIyrSk44H8ZDqaSSA==",
       "requires": {
-        "babel-generator": "6.26.0",
+        "babel-generator": "6.26.1",
         "babel-template": "6.26.0",
         "babel-traverse": "6.26.0",
         "babel-types": "6.26.0",
         "babylon": "6.18.0",
-        "istanbul-lib-coverage": "1.1.1",
-        "semver": "5.4.1"
+        "istanbul-lib-coverage": "1.1.2",
+        "semver": "5.5.0"
       }
     },
     "istanbul-lib-report": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-1.1.2.tgz",
-      "integrity": "sha512-UTv4VGx+HZivJQwAo1wnRwe1KTvFpfi/NYwN7DcsrdzMXwpRT/Yb6r4SBPoHWj4VuQPakR32g4PUUeyKkdDkBA==",
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-report/-/istanbul-lib-report-1.1.3.tgz",
+      "integrity": "sha512-D4jVbMDtT2dPmloPJS/rmeP626N5Pr3Rp+SovrPn1+zPChGHcggd/0sL29jnbm4oK9W0wHjCRsdch9oLd7cm6g==",
       "requires": {
-        "istanbul-lib-coverage": "1.1.1",
+        "istanbul-lib-coverage": "1.1.2",
         "mkdirp": "0.5.1",
         "path-parse": "1.0.5",
         "supports-color": "3.2.3"
@@ -6445,12 +6923,12 @@
       }
     },
     "istanbul-lib-source-maps": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.2.tgz",
-      "integrity": "sha512-8BfdqSfEdtip7/wo1RnrvLpHVEd8zMZEDmOFEnpC6dg0vXflHt9nvoAyQUzig2uMSXfF2OBEYBV3CVjIL9JvaQ==",
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/istanbul-lib-source-maps/-/istanbul-lib-source-maps-1.2.3.tgz",
+      "integrity": "sha512-fDa0hwU/5sDXwAklXgAoCJCOsFsBplVQ6WBldz5UwaqOzmDhUK4nfuR7/G//G2lERlblUNJB8P6e8cXq3a7MlA==",
       "requires": {
         "debug": "3.1.0",
-        "istanbul-lib-coverage": "1.1.1",
+        "istanbul-lib-coverage": "1.1.2",
         "mkdirp": "0.5.1",
         "rimraf": "2.6.2",
         "source-map": "0.5.7"
@@ -6472,9 +6950,9 @@
       }
     },
     "istanbul-reports": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-1.1.3.tgz",
-      "integrity": "sha512-ZEelkHh8hrZNI5xDaKwPMFwDsUf5wIEI2bXAFGp1e6deR2mnEKBPhLJEgr4ZBt8Gi6Mj38E/C8kcy9XLggVO2Q==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/istanbul-reports/-/istanbul-reports-1.1.4.tgz",
+      "integrity": "sha512-DfSTVOTkuO+kRmbO8Gk650Wqm1WRGr6lrdi2EwDK1vxpS71vdlLd613EpzOKdIFioB5f/scJTjeWBnvd1FWejg==",
       "requires": {
         "handlebars": "4.0.11"
       }
@@ -6547,14 +7025,14 @@
           "integrity": "sha512-T1BzrbFxDIW/LLYQqVfo94y/hhaj1NzVQkZgBumAC+sxbjMROI7VkihOdxNR758iYbQykL2ZOWUBurFgkQrzdg==",
           "requires": {
             "ansi-escapes": "3.0.0",
-            "chalk": "2.3.0",
+            "chalk": "2.3.1",
             "glob": "7.1.2",
             "graceful-fs": "4.1.11",
-            "is-ci": "1.0.10",
-            "istanbul-api": "1.2.1",
-            "istanbul-lib-coverage": "1.1.1",
-            "istanbul-lib-instrument": "1.9.1",
-            "istanbul-lib-source-maps": "1.2.2",
+            "is-ci": "1.1.0",
+            "istanbul-api": "1.2.2",
+            "istanbul-lib-coverage": "1.1.2",
+            "istanbul-lib-instrument": "1.9.2",
+            "istanbul-lib-source-maps": "1.2.3",
             "jest-changed-files": "21.2.0",
             "jest-config": "21.2.1",
             "jest-environment-jsdom": "21.2.1",
@@ -6567,13 +7045,13 @@
             "jest-snapshot": "21.2.1",
             "jest-util": "21.2.1",
             "micromatch": "2.3.11",
-            "node-notifier": "5.1.2",
+            "node-notifier": "5.2.1",
             "pify": "3.0.0",
             "slash": "1.0.0",
             "string-length": "2.0.0",
             "strip-ansi": "4.0.0",
             "which": "1.3.0",
-            "worker-farm": "1.5.2",
+            "worker-farm": "1.5.4",
             "yargs": "9.0.1"
           }
         },
@@ -6648,7 +7126,7 @@
       "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-21.2.1.tgz",
       "integrity": "sha512-fJru5HtlD/5l2o25eY9xT0doK3t2dlglrqoGpbktduyoI0T5CwuB++2YfoNZCrgZipTwPuAGonYv0q7+8yDc/A==",
       "requires": {
-        "chalk": "2.3.0",
+        "chalk": "2.3.1",
         "glob": "7.1.2",
         "jest-environment-jsdom": "21.2.1",
         "jest-environment-node": "21.2.1",
@@ -6666,7 +7144,7 @@
       "resolved": "https://registry.npmjs.org/jest-diff/-/jest-diff-21.2.1.tgz",
       "integrity": "sha512-E5fu6r7PvvPr5qAWE1RaUwIh/k6Zx/3OOkZ4rk5dBJkEWRrUuSgbMt2EO8IUTPTd6DOqU3LW6uTIwX5FRvXoFA==",
       "requires": {
-        "chalk": "2.3.0",
+        "chalk": "2.3.1",
         "diff": "3.4.0",
         "jest-get-type": "21.2.0",
         "pretty-format": "21.2.1"
@@ -6710,8 +7188,8 @@
         "graceful-fs": "4.1.11",
         "jest-docblock": "21.2.0",
         "micromatch": "2.3.11",
-        "sane": "2.2.0",
-        "worker-farm": "1.5.2"
+        "sane": "2.4.1",
+        "worker-farm": "1.5.4"
       },
       "dependencies": {
         "arr-diff": {
@@ -6788,7 +7266,7 @@
       "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-21.2.1.tgz",
       "integrity": "sha512-lw8FXXIEekD+jYNlStfgNsUHpfMWhWWCgHV7n0B7mA/vendH7vBFs8xybjQsDzJSduptBZJHqQX9SMssya9+3A==",
       "requires": {
-        "chalk": "2.3.0",
+        "chalk": "2.3.1",
         "expect": "21.2.1",
         "graceful-fs": "4.1.11",
         "jest-diff": "21.2.1",
@@ -6803,7 +7281,7 @@
       "resolved": "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-21.2.1.tgz",
       "integrity": "sha512-kn56My+sekD43dwQPrXBl9Zn9tAqwoy25xxe7/iY4u+mG8P3ALj5IK7MLHZ4Mi3xW7uWVCjGY8cm4PqgbsqMCg==",
       "requires": {
-        "chalk": "2.3.0",
+        "chalk": "2.3.1",
         "jest-get-type": "21.2.0",
         "pretty-format": "21.2.1"
       }
@@ -6813,7 +7291,7 @@
       "resolved": "https://registry.npmjs.org/jest-message-util/-/jest-message-util-21.2.1.tgz",
       "integrity": "sha512-EbC1X2n0t9IdeMECJn2BOg7buOGivCvVNjqKMXTzQOu7uIfLml+keUfCALDh8o4rbtndIeyGU8/BKfoTr/LVDQ==",
       "requires": {
-        "chalk": "2.3.0",
+        "chalk": "2.3.1",
         "micromatch": "2.3.11",
         "slash": "1.0.0"
       },
@@ -6903,7 +7381,7 @@
       "integrity": "sha512-vefQ/Lr+VdNvHUZFQXWtOqHX3HEdOc2MtSahBO89qXywEbUxGPB9ZLP9+BHinkxb60UT2Q/tTDOS6rYc6Mwigw==",
       "requires": {
         "browser-resolve": "1.11.2",
-        "chalk": "2.3.0",
+        "chalk": "2.3.1",
         "is-builtin-module": "1.0.0"
       }
     },
@@ -6929,7 +7407,7 @@
         "jest-util": "21.2.1",
         "pify": "3.0.0",
         "throat": "4.1.0",
-        "worker-farm": "1.5.2"
+        "worker-farm": "1.5.4"
       }
     },
     "jest-runtime": {
@@ -6940,7 +7418,7 @@
         "babel-core": "6.26.0",
         "babel-jest": "21.2.0",
         "babel-plugin-istanbul": "4.1.5",
-        "chalk": "2.3.0",
+        "chalk": "2.3.1",
         "convert-source-map": "1.5.1",
         "graceful-fs": "4.1.11",
         "jest-config": "21.2.1",
@@ -7050,7 +7528,7 @@
       "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-21.2.1.tgz",
       "integrity": "sha512-bpaeBnDpdqaRTzN8tWg0DqOTo2DvD3StOemxn67CUd1p1Po+BUpvePAp44jdJ7Pxcjfg+42o4NHw1SxdCA2rvg==",
       "requires": {
-        "chalk": "2.3.0",
+        "chalk": "2.3.1",
         "jest-diff": "21.2.1",
         "jest-matcher-utils": "21.2.1",
         "mkdirp": "0.5.1",
@@ -7064,7 +7542,7 @@
       "integrity": "sha512-r20W91rmHY3fnCoO7aOAlyfC51x2yeV3xF+prGsJAUsYhKeV670ZB8NO88Lwm7ASu8SdH0S+U+eFf498kjhA4g==",
       "requires": {
         "callsites": "2.0.0",
-        "chalk": "2.3.0",
+        "chalk": "2.3.1",
         "graceful-fs": "4.1.11",
         "jest-message-util": "21.2.1",
         "jest-mock": "21.2.0",
@@ -7077,7 +7555,7 @@
       "resolved": "https://registry.npmjs.org/jest-validate/-/jest-validate-21.2.1.tgz",
       "integrity": "sha512-k4HLI1rZQjlU+EC682RlQ6oZvLrE5SCh3brseQc24vbZTxzT/k/3urar5QMCVgjadmSO7lECeGdc6YxnM3yEGg==",
       "requires": {
-        "chalk": "2.3.0",
+        "chalk": "2.3.1",
         "jest-get-type": "21.2.0",
         "leven": "2.1.0",
         "pretty-format": "21.2.1"
@@ -7093,17 +7571,17 @@
       "resolved": "https://registry.npmjs.org/joi/-/joi-9.2.0.tgz",
       "integrity": "sha1-M4WseQGSEwy+Iw6ALsAskhW7/to=",
       "requires": {
-        "hoek": "4.2.0",
+        "hoek": "4.2.1",
         "isemail": "2.2.1",
         "items": "2.1.1",
-        "moment": "2.19.4",
+        "moment": "2.20.1",
         "topo": "2.0.2"
       }
     },
     "js-base64": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.0.tgz",
-      "integrity": "sha512-Wehd+7Pf9tFvGb+ydPm9TjYjV8X1YHOVyG8QyELZxEMqOhemVwGRmoG8iQ/soqI3n8v4xn59zaLxiCJiaaRzKA=="
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/js-base64/-/js-base64-2.4.3.tgz",
+      "integrity": "sha512-H7ErYLM34CvDMto3GbD6xD0JLUGYXR3QTcH6B/tr4Hi/QpSThnCsIp+Sy5FRTw3B0d6py4HcNkW7nO/wdtGWEw=="
     },
     "js-tokens": {
       "version": "3.0.2",
@@ -7115,7 +7593,7 @@
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.7.0.tgz",
       "integrity": "sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=",
       "requires": {
-        "argparse": "1.0.9",
+        "argparse": "1.0.10",
         "esprima": "2.7.3"
       }
     },
@@ -7131,14 +7609,14 @@
         "content-type-parser": "1.0.2",
         "cssom": "0.3.2",
         "cssstyle": "0.2.37",
-        "escodegen": "1.9.0",
+        "escodegen": "1.9.1",
         "html-encoding-sniffer": "1.0.2",
         "nwmatcher": "1.4.3",
         "parse5": "1.5.1",
         "request": "2.83.0",
         "sax": "1.2.4",
         "symbol-tree": "3.2.2",
-        "tough-cookie": "2.3.3",
+        "tough-cookie": "2.3.4",
         "webidl-conversions": "4.0.2",
         "whatwg-encoding": "1.0.3",
         "whatwg-url": "4.8.0",
@@ -7328,19 +7806,9 @@
       "integrity": "sha1-MWI5HY8BQKoiz49rPDTWt/Y9Oqk="
     },
     "lodash-es": {
-      "version": "4.17.4",
-      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.4.tgz",
-      "integrity": "sha1-3MHXVS4VCgZABzupyzHXDwMpUOc="
-    },
-    "lodash._arraycopy": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._arraycopy/-/lodash._arraycopy-3.0.0.tgz",
-      "integrity": "sha1-due3wfH7klRzdIeKVi7Qaj5Q9uE="
-    },
-    "lodash._arrayeach": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/lodash._arrayeach/-/lodash._arrayeach-3.0.0.tgz",
-      "integrity": "sha1-urFWsqkNPxu9XGU0AzSeXlkz754="
+      "version": "4.17.5",
+      "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.5.tgz",
+      "integrity": "sha512-Ez3ONp3TK9gX1HYKp6IhetcVybD+2F+Yp6GS9dfH8ue6EOCEzQtQEh4K0FYWBP9qLv+lzeQAYXw+3ySfxyZqkw=="
     },
     "lodash._baseassign": {
       "version": "3.2.0",
@@ -7351,19 +7819,6 @@
         "lodash.keys": "3.1.2"
       }
     },
-    "lodash._baseclone": {
-      "version": "3.3.0",
-      "resolved": "https://registry.npmjs.org/lodash._baseclone/-/lodash._baseclone-3.3.0.tgz",
-      "integrity": "sha1-MDUZv2OT/n5C802LYw73eU41Qrc=",
-      "requires": {
-        "lodash._arraycopy": "3.0.0",
-        "lodash._arrayeach": "3.0.0",
-        "lodash._baseassign": "3.2.0",
-        "lodash._basefor": "3.0.3",
-        "lodash.isarray": "3.0.4",
-        "lodash.keys": "3.1.2"
-      }
-    },
     "lodash._basecopy": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
@@ -7374,16 +7829,6 @@
       "resolved": "https://registry.npmjs.org/lodash._basecreate/-/lodash._basecreate-3.0.3.tgz",
       "integrity": "sha1-G8ZhYU2qf8MRt9A78WgGoCE8+CE="
     },
-    "lodash._basefor": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/lodash._basefor/-/lodash._basefor-3.0.3.tgz",
-      "integrity": "sha1-dVC06SGO8J+tJDQ7YSAhx5tMIMI="
-    },
-    "lodash._bindcallback": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz",
-      "integrity": "sha1-5THCdkTPi1epnhftlbNcdIeJOS4="
-    },
     "lodash._getnative": {
       "version": "3.9.1",
       "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
@@ -7470,9 +7915,9 @@
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4="
     },
     "lodash.mergewith": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz",
-      "integrity": "sha1-FQzwoWeR9ZA7iJHqsVRgknS96lU="
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz",
+      "integrity": "sha512-eWw5r+PYICtEBgrBE5hhlT6aAa75f411bgDz/ZL2KZqYV03USvucsxcHUIlGTDTECs1eunpI7HOV7U+WLDvNdQ=="
     },
     "lodash.pick": {
       "version": "4.4.0",
@@ -7494,25 +7939,20 @@
       "resolved": "https://registry.npmjs.org/lodash.tail/-/lodash.tail-4.1.1.tgz",
       "integrity": "sha1-0jM6NtnncXyK0vfKyv7HwytERmQ="
     },
-    "lodash.toarray": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/lodash.toarray/-/lodash.toarray-4.4.0.tgz",
-      "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE="
-    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
       "integrity": "sha1-0CJTc662Uq3BvILklFM5qEJ1R3M="
     },
     "loglevel": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.0.tgz",
-      "integrity": "sha1-rgyqVhERSYxboTcj1vtjHSQAOTQ="
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.6.1.tgz",
+      "integrity": "sha1-4PyVEztu8nbNyIh82vJKpvFW+Po="
     },
     "lolex": {
-      "version": "2.3.1",
-      "resolved": "https://registry.npmjs.org/lolex/-/lolex-2.3.1.tgz",
-      "integrity": "sha512-mQuW55GhduF3ppo+ZRUTz1PRjEh1hS5BbqU7d8D0ez2OKxHDod7StPPeAVKisZR5aLkHZjdGWSL42LSONUJsZw=="
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/lolex/-/lolex-2.3.2.tgz",
+      "integrity": "sha512-A5pN2tkFj7H0dGIAM6MFvHKMJcPnjZsOMvR7ujCjfgW5TbV6H9vb1PgxLtHvjqNZTHsUolz+6/WEO0N1xNx2ng=="
     },
     "longest": {
       "version": "1.0.1",
@@ -7536,6 +7976,11 @@
         "signal-exit": "3.0.2"
       }
     },
+    "lower-case": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz",
+      "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw="
+    },
     "lru-cache": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.1.tgz",
@@ -7551,13 +7996,18 @@
       "integrity": "sha1-WQTcU3w57G2+/q6QIycTX6hRHxI="
     },
     "make-dir": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.1.0.tgz",
-      "integrity": "sha512-0Pkui4wLJ7rxvmfUvs87skoEaxmu0hCUApF8nonzpl7q//FWp9zu8W61Scz4sd/kUiqDxvUhtoam2efDyiBzcA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-1.2.0.tgz",
+      "integrity": "sha512-aNUAa4UMg/UougV25bbrU4ZaaKNjJ/3/xnvg/twpmKROPdKZPZ9wGgI0opdZzO8q/zUFawoUuixuOv33eZ61Iw==",
       "requires": {
         "pify": "3.0.0"
       }
     },
+    "make-error": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.4.tgz",
+      "integrity": "sha512-0Dab5btKVPhibSalc9QGXb559ED7G7iLjFXBaj9Wq8O3vorueR5K5jaE3hkG6ZQINyhA/JgG6Qk4qdFQjsYV6g=="
+    },
     "makeerror": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.11.tgz",
@@ -7584,47 +8034,20 @@
         "object-visit": "1.0.1"
       }
     },
-    "marked": {
-      "version": "0.3.7",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.7.tgz",
-      "integrity": "sha512-zBEP4qO1YQp5aXHt8S5wTiOv9i2X74V/LQL0zhUNvVaklt6Ywa6lChxIvS+ibYlCGgADwKwZFhjC3+XfpsvQvQ=="
-    },
-    "marked-terminal": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/marked-terminal/-/marked-terminal-1.7.0.tgz",
-      "integrity": "sha1-yMRgiBx3LHYEtkNnAH7l938SWQQ=",
+    "markdown-loader": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/markdown-loader/-/markdown-loader-2.0.2.tgz",
+      "integrity": "sha512-v/ej7DflZbb6t//3Yu9vg0T+sun+Q9EoqggifeyABKfvFROqPwwwpv+hd1NKT2QxTRg6VCFk10IIJcMI13yCoQ==",
       "requires": {
-        "cardinal": "1.0.0",
-        "chalk": "1.1.3",
-        "cli-table": "0.3.1",
-        "lodash.assign": "4.2.0",
-        "node-emoji": "1.8.1"
-      },
-      "dependencies": {
-        "ansi-styles": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
-        },
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "requires": {
-            "ansi-styles": "2.2.1",
-            "escape-string-regexp": "1.0.5",
-            "has-ansi": "2.0.0",
-            "strip-ansi": "3.0.1",
-            "supports-color": "2.0.0"
-          }
-        },
-        "supports-color": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
-        }
+        "loader-utils": "1.1.0",
+        "marked": "0.3.17"
       }
     },
+    "marked": {
+      "version": "0.3.17",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-0.3.17.tgz",
+      "integrity": "sha512-+AKbNsjZl6jFfLPwHhWmGTqE009wTKn3RTmn9K8oUKHrX/abPJjtcRtXpYB/FFrwPJRUA86LX/de3T0knkPCmQ=="
+    },
     "math-expression-evaluator": {
       "version": "1.2.17",
       "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
@@ -7660,7 +8083,7 @@
       "resolved": "https://registry.npmjs.org/mem/-/mem-1.1.0.tgz",
       "integrity": "sha1-Xt1StIXKHZAP5kiVUFOZoN+kX3Y=",
       "requires": {
-        "mimic-fn": "1.1.0"
+        "mimic-fn": "1.2.0"
       }
     },
     "memory-fs": {
@@ -7668,8 +8091,8 @@
       "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.4.1.tgz",
       "integrity": "sha1-OpoguEYlI+RHz7x+i7gO1me/xVI=",
       "requires": {
-        "errno": "0.1.6",
-        "readable-stream": "2.3.3"
+        "errno": "0.1.7",
+        "readable-stream": "2.3.4"
       }
     },
     "meow": {
@@ -7783,23 +8206,23 @@
       "integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
     },
     "micromatch": {
-      "version": "3.1.4",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.4.tgz",
-      "integrity": "sha512-kFRtviKYoAJT+t7HggMl0tBFGNAKLw/S7N+CO9qfEQyisob1Oy4pao+geRbkyeEd+V9aOkvZ4mhuyPvI/q9Sfg==",
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.9.tgz",
+      "integrity": "sha512-SlIz6sv5UPaAVVFRKodKjCg48EbNoIhgetzfK/Cy0v5U52Z6zB136M8tp0UC9jM53LYbmIRihJszvvqpKkfm9g==",
       "requires": {
         "arr-diff": "4.0.0",
         "array-unique": "0.3.2",
-        "braces": "2.3.0",
-        "define-property": "1.0.0",
-        "extend-shallow": "2.0.1",
-        "extglob": "2.0.2",
+        "braces": "2.3.1",
+        "define-property": "2.0.2",
+        "extend-shallow": "3.0.2",
+        "extglob": "2.0.4",
         "fragment-cache": "0.2.1",
         "kind-of": "6.0.2",
-        "nanomatch": "1.2.6",
+        "nanomatch": "1.2.9",
         "object.pick": "1.3.0",
-        "regex-not": "1.0.0",
+        "regex-not": "1.0.2",
         "snapdragon": "0.8.1",
-        "to-regex": "3.0.1"
+        "to-regex": "3.0.2"
       }
     },
     "miller-rabin": {
@@ -7817,22 +8240,22 @@
       "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg=="
     },
     "mime-db": {
-      "version": "1.30.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.30.0.tgz",
-      "integrity": "sha1-dMZD2i3Z1qRTmZY0ZbJtXKfXHwE="
+      "version": "1.33.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
+      "integrity": "sha512-BHJ/EKruNIqJf/QahvxwQZXKygOQ256myeN/Ew+THcAa5q+PjyTTMMeNQC4DZw5AwfvelsUrA6B67NKMqXDbzQ=="
     },
     "mime-types": {
-      "version": "2.1.17",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.17.tgz",
-      "integrity": "sha1-Cdejk/A+mVp5+K+Fe3Cp4KsWVXo=",
+      "version": "2.1.18",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.18.tgz",
+      "integrity": "sha512-lc/aahn+t4/SWV/qcmumYjymLsWfN3ELhpmVuUFjgsORruuZPVSwAQryq+HHGvO/SI2KVX26bx+En+zhM8g8hQ==",
       "requires": {
-        "mime-db": "1.30.0"
+        "mime-db": "1.33.0"
       }
     },
     "mimic-fn": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.1.0.tgz",
-      "integrity": "sha1-5md4PZLonb00KBi1IwudYqZyrRg="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-1.2.0.tgz",
+      "integrity": "sha512-jf84uxzwiuiIVKiOLpfYk7N46TSy8ubTonmneY9vrpHNAnp0QBt2BxWV9dO3/j+BoVAb+a5G6YDPW3M5HOdMWQ=="
     },
     "min-document": {
       "version": "2.19.0",
@@ -7857,7 +8280,7 @@
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
       "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
       "requires": {
-        "brace-expansion": "1.1.8"
+        "brace-expansion": "1.1.11"
       }
     },
     "minimist": {
@@ -7865,10 +8288,27 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
       "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
     },
+    "mississippi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-2.0.0.tgz",
+      "integrity": "sha512-zHo8v+otD1J10j/tC+VNoGK9keCuByhKovAvdn74dmxJl9+mWHnx6EMsDN4lgRoMI/eYo2nchAxniIbUPb5onw==",
+      "requires": {
+        "concat-stream": "1.6.0",
+        "duplexify": "3.5.3",
+        "end-of-stream": "1.4.1",
+        "flush-write-stream": "1.0.2",
+        "from2": "2.3.0",
+        "parallel-transform": "1.1.0",
+        "pump": "2.0.1",
+        "pumpify": "1.4.0",
+        "stream-each": "1.2.2",
+        "through2": "2.0.3"
+      }
+    },
     "mixin-deep": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.0.tgz",
-      "integrity": "sha512-dgaCvoh6i1nosAUBKb0l0pfJ78K8+S9fluyIR2YvAeUD/QuMahnFnF3xYty5eYXMjhGSsB0DsW6A0uAZyetoAg==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/mixin-deep/-/mixin-deep-1.3.1.tgz",
+      "integrity": "sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==",
       "requires": {
         "for-in": "1.0.2",
         "is-extendable": "1.0.1"
@@ -7982,9 +8422,22 @@
       }
     },
     "moment": {
-      "version": "2.19.4",
-      "resolved": "https://registry.npmjs.org/moment/-/moment-2.19.4.tgz",
-      "integrity": "sha512-1xFTAknSLfc47DIxHDUbnJWC+UwgWxATmymaxIPQpmMh7LBm7ZbwVEsuushqwL2GYZU0jie4xO+TK44hJPjNSQ=="
+      "version": "2.20.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.20.1.tgz",
+      "integrity": "sha512-Yh9y73JRljxW5QxN08Fner68eFLxM5ynNOAw2LbIB1YAGeQzZT8QFSUvkAz609Zf+IHhhaUxqZK8dG3W/+HEvg=="
+    },
+    "move-concurrently": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
+      "integrity": "sha1-viwAX9oy4LKa8fBdfEszIUxwH5I=",
+      "requires": {
+        "aproba": "1.2.0",
+        "copy-concurrently": "1.0.5",
+        "fs-write-stream-atomic": "1.0.10",
+        "mkdirp": "0.5.1",
+        "rimraf": "2.6.2",
+        "run-queue": "1.0.3"
+      }
     },
     "ms": {
       "version": "2.0.0",
@@ -7992,12 +8445,12 @@
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
     "multicast-dns": {
-      "version": "6.2.1",
-      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.1.tgz",
-      "integrity": "sha512-uV3/ckdsffHx9IrGQrx613mturMdMqQ06WTq+C09NsStJ9iNG6RcUWgPKs1Rfjy+idZT6tfQoXEusGNnEZhT3w==",
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz",
+      "integrity": "sha512-ji6J5enbMyGRHIAkAOu3WdV8nggqviKCEKtXcOqfphZZtQrmHKycfynJ2V7eVPUA4NhJ6V7Wf4TmGbTwKE9B6g==",
       "requires": {
-        "dns-packet": "1.2.2",
-        "thunky": "0.1.0"
+        "dns-packet": "1.3.1",
+        "thunky": "1.0.2"
       }
     },
     "multicast-dns-service-types": {
@@ -8016,33 +8469,27 @@
       "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s="
     },
     "nan": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.8.0.tgz",
-      "integrity": "sha1-7XFfP+neArV6XmJS2QqWZ14fCFo="
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.9.2.tgz",
+      "integrity": "sha512-ltW65co7f3PQWBDbqVvaU1WtFJUsNW7sWWm4HINhbMQIyVyzIeyZ8toX5TC5eeooE6piZoaEh4cZkueSKG3KYw=="
     },
     "nanomatch": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.6.tgz",
-      "integrity": "sha512-WJ6XTCbvWXUFPbi/bDwKcYkCeOGUHzaJj72KbuPqGn78Ba/F5Vu26Zlo6SuMQbCIst1RGKL1zfWBCOGAlbRLAg==",
+      "version": "1.2.9",
+      "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.9.tgz",
+      "integrity": "sha512-n8R9bS8yQ6eSXaV6jHUpKzD8gLsin02w1HSFiegwrs9E098Ylhw5jdyKPaYqvHknHaSCKTPp7C8dGCQ0q9koXA==",
       "requires": {
         "arr-diff": "4.0.0",
         "array-unique": "0.3.2",
-        "define-property": "1.0.0",
-        "extend-shallow": "2.0.1",
+        "define-property": "2.0.2",
+        "extend-shallow": "3.0.2",
         "fragment-cache": "0.2.1",
-        "is-odd": "1.0.0",
-        "kind-of": "5.1.0",
+        "is-odd": "2.0.0",
+        "is-windows": "1.0.2",
+        "kind-of": "6.0.2",
         "object.pick": "1.3.0",
-        "regex-not": "1.0.0",
+        "regex-not": "1.0.2",
         "snapdragon": "0.8.1",
-        "to-regex": "3.0.1"
-      },
-      "dependencies": {
-        "kind-of": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
-          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
-        }
+        "to-regex": "3.0.2"
       }
     },
     "natural-compare": {
@@ -8050,14 +8497,23 @@
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc="
     },
+    "ncname": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/ncname/-/ncname-1.0.0.tgz",
+      "integrity": "sha1-W1etGLHKCShk72Kwse2BlPODtxw=",
+      "requires": {
+        "xml-char-classes": "1.0.0"
+      }
+    },
     "nearley": {
-      "version": "2.11.0",
-      "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.11.0.tgz",
-      "integrity": "sha512-clqqhEuP0ZCJQ85Xv2I/4o2Gs/fvSR6fCg5ZHVE2c8evWyNk2G++ih4JOO3lMb/k/09x6ihQ2nzKUlB/APCWjg==",
+      "version": "2.11.1",
+      "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.11.1.tgz",
+      "integrity": "sha512-1azpqq1JvHKZNPEixS1jNEXf4kDilhFtr8AIZIGjP8N0TcAcUhKgi354niI5pM4JoOsMQ+H6vzCYWQa95LQjcw==",
       "requires": {
         "nomnom": "1.6.2",
         "railroad-diagrams": "1.0.0",
-        "randexp": "0.4.6"
+        "randexp": "0.4.6",
+        "semver": "5.5.0"
       }
     },
     "negotiator": {
@@ -8065,32 +8521,37 @@
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
       "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk="
     },
+    "neo-async": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.5.0.tgz",
+      "integrity": "sha512-nJmSswG4As/MkRq7QZFuH/sf/yuv8ODdMZrY4Bedjp77a5MK4A6s7YbBB64c9u79EBUOfXUXBvArmvzTD0X+6g=="
+    },
     "netrc": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/netrc/-/netrc-0.1.4.tgz",
       "integrity": "sha1-a+lPysqNd63gqWcNxGCRTJRHJEQ="
     },
     "ngrok": {
-      "version": "2.2.24",
-      "resolved": "https://registry.npmjs.org/ngrok/-/ngrok-2.2.24.tgz",
-      "integrity": "sha512-tz1X/yS3PD5N+Cwijn+bwSrDGNRNPpQPM0TEHtaT8K4sMpFUHFBhRJLlFyoGQyfmSML7Tdq9Fq17AKoEtGaJzw==",
+      "version": "2.2.26",
+      "resolved": "https://registry.npmjs.org/ngrok/-/ngrok-2.2.26.tgz",
+      "integrity": "sha512-DAWmOerUpBvtjLnX+Da9iE5JFCCWXBqYVFwjQtllnveIHL+u/TRjtsYqg4zttkoXXceG+gGon92atDGQd2SgiA==",
       "requires": {
         "@types/node": "8.0.26",
         "async": "2.6.0",
         "decompress-zip": "0.3.0",
         "lock": "0.1.4",
         "request": "2.83.0",
-        "uuid": "3.1.0"
+        "uuid": "3.2.1"
       }
     },
     "nise": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/nise/-/nise-1.2.0.tgz",
-      "integrity": "sha512-q9jXh3UNsMV28KeqI43ILz5+c3l+RiNW8mhurEwCKckuHQbL+hTJIKKTiUlCPKlgQ/OukFvSnKB/Jk3+sFbkGA==",
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/nise/-/nise-1.2.7.tgz",
+      "integrity": "sha512-8LqP1pFLB1v5QU8KlT2WqWzhMRJ3o9LwnZHz+VCbVB8rTsRTFCjtOYv/BatcmLOWp21NedTrErVGinfxe6XYtA==",
       "requires": {
-        "formatio": "1.2.0",
+        "@sinonjs/formatio": "2.0.0",
         "just-extend": "1.1.27",
-        "lolex": "1.6.0",
+        "lolex": "2.3.2",
         "path-to-regexp": "1.7.0",
         "text-encoding": "0.6.4"
       },
@@ -8100,11 +8561,6 @@
           "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
           "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
         },
-        "lolex": {
-          "version": "1.6.0",
-          "resolved": "https://registry.npmjs.org/lolex/-/lolex-1.6.0.tgz",
-          "integrity": "sha1-OpoCg0UqR9dDnnJzG54H1zhuSfY="
-        },
         "path-to-regexp": {
           "version": "1.7.0",
           "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.7.0.tgz",
@@ -8115,6 +8571,14 @@
         }
       }
     },
+    "no-case": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
+      "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==",
+      "requires": {
+        "lower-case": "1.1.4"
+      }
+    },
     "node-dir": {
       "version": "0.1.17",
       "resolved": "https://registry.npmjs.org/node-dir/-/node-dir-0.1.17.tgz",
@@ -8123,14 +8587,6 @@
         "minimatch": "3.0.4"
       }
     },
-    "node-emoji": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.8.1.tgz",
-      "integrity": "sha512-+ktMAh1Jwas+TnGodfCfjUbJKoANqPaJFN0z0iqh41eqD8dvguNzcitVSBSVK1pidz0AqGbLKcoVuVLRVZ/aVg==",
-      "requires": {
-        "lodash.toarray": "4.4.0"
-      }
-    },
     "node-fetch": {
       "version": "1.6.3",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.6.3.tgz",
@@ -8141,9 +8597,9 @@
       }
     },
     "node-forge": {
-      "version": "0.6.33",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.6.33.tgz",
-      "integrity": "sha1-RjgRh59XPUUVWtap9D3ClujoXrw="
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.7.1.tgz",
+      "integrity": "sha1-naYR6giYL0uUIGs760zJZl8gwwA="
     },
     "node-gyp": {
       "version": "3.6.2",
@@ -8157,7 +8613,7 @@
         "mkdirp": "0.5.1",
         "nopt": "3.0.6",
         "npmlog": "4.1.2",
-        "osenv": "0.1.4",
+        "osenv": "0.1.5",
         "request": "2.83.0",
         "rimraf": "2.6.2",
         "semver": "5.3.0",
@@ -8188,7 +8644,7 @@
         "console-browserify": "1.1.0",
         "constants-browserify": "1.0.0",
         "crypto-browserify": "3.12.0",
-        "domain-browser": "1.1.7",
+        "domain-browser": "1.2.0",
         "events": "1.1.1",
         "https-browserify": "1.0.0",
         "os-browserify": "0.3.0",
@@ -8196,11 +8652,11 @@
         "process": "0.11.10",
         "punycode": "1.4.1",
         "querystring-es3": "0.2.1",
-        "readable-stream": "2.3.3",
+        "readable-stream": "2.3.4",
         "stream-browserify": "2.0.1",
-        "stream-http": "2.7.2",
+        "stream-http": "2.8.0",
         "string_decoder": "1.0.3",
-        "timers-browserify": "2.0.4",
+        "timers-browserify": "2.0.6",
         "tty-browserify": "0.0.0",
         "url": "0.11.0",
         "util": "0.10.3",
@@ -8208,12 +8664,12 @@
       }
     },
     "node-notifier": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-5.1.2.tgz",
-      "integrity": "sha1-L6nhJgX6EACdRFSdb82KY93g5P8=",
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-5.2.1.tgz",
+      "integrity": "sha512-MIBs+AAd6dJ2SklbbE8RUDRlIVhU8MaNLh1A9SUZDUHPiZkWLFde6UNwG41yQHZEToHgJMXqyVZ9UcS/ReOVTg==",
       "requires": {
         "growly": "1.3.0",
-        "semver": "5.4.1",
+        "semver": "5.5.0",
         "shellwords": "0.1.1",
         "which": "1.3.0"
       }
@@ -8232,10 +8688,10 @@
         "in-publish": "2.0.0",
         "lodash.assign": "4.2.0",
         "lodash.clonedeep": "4.5.0",
-        "lodash.mergewith": "4.6.0",
+        "lodash.mergewith": "4.6.1",
         "meow": "3.7.0",
         "mkdirp": "0.5.1",
-        "nan": "2.8.0",
+        "nan": "2.9.2",
         "node-gyp": "3.6.2",
         "npmlog": "4.1.2",
         "request": "2.79.0",
@@ -8307,8 +8763,8 @@
           "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
           "requires": {
             "asynckit": "0.4.0",
-            "combined-stream": "1.0.5",
-            "mime-types": "2.1.17"
+            "combined-stream": "1.0.6",
+            "mime-types": "2.1.18"
           }
         },
         "har-validator": {
@@ -8317,8 +8773,8 @@
           "integrity": "sha1-zcvAgYgmWtEZtqWnyKtw7s+10n0=",
           "requires": {
             "chalk": "1.1.3",
-            "commander": "2.12.2",
-            "is-my-json-valid": "2.16.1",
+            "commander": "2.14.1",
+            "is-my-json-valid": "2.17.2",
             "pinkie-promise": "2.0.1"
           }
         },
@@ -8361,7 +8817,7 @@
             "aws-sign2": "0.6.0",
             "aws4": "1.6.0",
             "caseless": "0.11.0",
-            "combined-stream": "1.0.5",
+            "combined-stream": "1.0.6",
             "extend": "3.0.1",
             "forever-agent": "0.6.1",
             "form-data": "2.1.4",
@@ -8371,13 +8827,13 @@
             "is-typedarray": "1.0.0",
             "isstream": "0.1.2",
             "json-stringify-safe": "5.0.1",
-            "mime-types": "2.1.17",
+            "mime-types": "2.1.18",
             "oauth-sign": "0.8.2",
             "qs": "6.3.2",
             "stringstream": "0.0.5",
-            "tough-cookie": "2.3.3",
+            "tough-cookie": "2.3.4",
             "tunnel-agent": "0.4.3",
-            "uuid": "3.1.0"
+            "uuid": "3.2.1"
           }
         },
         "sntp": {
@@ -8431,8 +8887,8 @@
       "requires": {
         "hosted-git-info": "2.5.0",
         "is-builtin-module": "1.0.0",
-        "semver": "5.4.1",
-        "validate-npm-package-license": "3.0.1"
+        "semver": "5.5.0",
+        "validate-npm-package-license": "3.0.3"
       }
     },
     "normalize-path": {
@@ -8529,6 +8985,22 @@
             "is-descriptor": "0.1.6"
           }
         },
+        "is-accessor-descriptor": {
+          "version": "0.1.6",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+          "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+          "requires": {
+            "kind-of": "3.2.2"
+          }
+        },
+        "is-data-descriptor": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+          "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+          "requires": {
+            "kind-of": "3.2.2"
+          }
+        },
         "is-descriptor": {
           "version": "0.1.6",
           "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
@@ -8556,6 +9028,11 @@
         }
       }
     },
+    "object-inspect": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.5.0.tgz",
+      "integrity": "sha512-UmOFbHbwvv+XHj7BerrhVq+knjceBdkvU5AriwLMvhv2qi+e7DJzxfBeFpILEjVzCp+xA+W/pIf06RGPWlZNfw=="
+    },
     "object-is": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.0.1.tgz",
@@ -8575,12 +9052,13 @@
       }
     },
     "object.assign": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.0.4.tgz",
-      "integrity": "sha1-scnMBE7xuf5jYG/BQau7MuFHMMw=",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/object.assign/-/object.assign-4.1.0.tgz",
+      "integrity": "sha512-exHJeq6kBKj58mqGyTQ9DFvrZC/eR6OwxzoM9YRoGBqrXYonaFyGiFMuc9VZrXf7DarreEwMpurG3dd+CNyW5w==",
       "requires": {
         "define-properties": "1.1.2",
         "function-bind": "1.1.1",
+        "has-symbols": "1.0.0",
         "object-keys": "1.0.11"
       }
     },
@@ -8638,22 +9116,22 @@
       "integrity": "sha1-EEEktsYCxnlogaBCVB0220OlJk4="
     },
     "office-ui-fabric-core": {
-      "version": "9.3.0",
-      "resolved": "https://registry.npmjs.org/office-ui-fabric-core/-/office-ui-fabric-core-9.3.0.tgz",
-      "integrity": "sha1-FE19kSUBS9+lf41fXmptgl2EJ0I="
+      "version": "9.4.0",
+      "resolved": "https://registry.npmjs.org/office-ui-fabric-core/-/office-ui-fabric-core-9.4.0.tgz",
+      "integrity": "sha1-z1dU/7D63H0ewKVoxnNxxw8ranE="
     },
     "office-ui-fabric-react": {
-      "version": "5.33.1",
-      "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-5.33.1.tgz",
-      "integrity": "sha512-LrE9EYmXQ9tTZG/gtsKhWnrym2WB0TrmQ7WfyYclQXeJmt1PB6F80sUdzddNrgmsPz7Q0KJboeV4m6nASBCQDQ==",
+      "version": "5.56.0",
+      "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-5.56.0.tgz",
+      "integrity": "sha512-sTVFSjqeUDQVGSekeTdSfyn/2BZNGqK0TfHDnpNnsYgrimKv7JsXoiln/yGus+rPkSGONhD5eNZVU02uOBygMw==",
       "requires": {
-        "@microsoft/load-themed-styles": "1.7.14",
-        "@uifabric/icons": "5.3.0",
-        "@uifabric/merge-styles": "5.8.1",
-        "@uifabric/styling": "5.14.0",
-        "@uifabric/utilities": "5.5.0",
-        "prop-types": "15.6.0",
-        "tslib": "1.8.1"
+        "@microsoft/load-themed-styles": "1.7.35",
+        "@uifabric/icons": "5.4.2",
+        "@uifabric/merge-styles": "5.12.2",
+        "@uifabric/styling": "5.19.0",
+        "@uifabric/utilities": "5.13.0",
+        "prop-types": "15.6.1",
+        "tslib": "1.9.0"
       }
     },
     "on-finished": {
@@ -8682,7 +9160,7 @@
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
       "integrity": "sha1-BnQoIw/WdEOyeUsiu6UotoZ5YtQ=",
       "requires": {
-        "mimic-fn": "1.1.0"
+        "mimic-fn": "1.2.0"
       }
     },
     "open": {
@@ -8820,9 +9298,9 @@
       "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ="
     },
     "osenv": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.4.tgz",
-      "integrity": "sha1-Qv5tWVPfBsgGS+bxdsPQWqqjRkQ=",
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
       "requires": {
         "os-homedir": "1.0.2",
         "os-tmpdir": "1.0.2"
@@ -8839,16 +9317,19 @@
       "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4="
     },
     "p-limit": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.1.0.tgz",
-      "integrity": "sha1-sH/y2aXYi+yAYDWJWiurZqJ5iLw="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-1.2.0.tgz",
+      "integrity": "sha512-Y/OtIaXtUPr4/YpMv1pCL5L5ed0rumAaAeBSj12F+bSlMdys7i8oQF/GUJmfpTS/QoaRrS/k6pma29haJpsMng==",
+      "requires": {
+        "p-try": "1.0.0"
+      }
     },
     "p-locate": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-2.0.0.tgz",
       "integrity": "sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=",
       "requires": {
-        "p-limit": "1.1.0"
+        "p-limit": "1.2.0"
       }
     },
     "p-map": {
@@ -8856,17 +9337,40 @@
       "resolved": "https://registry.npmjs.org/p-map/-/p-map-1.2.0.tgz",
       "integrity": "sha512-r6zKACMNhjPJMTl8KcFH4li//gkrXWfbD6feV8l6doRHlzljFWGJ2AP6iKaCJXyZmAUMOPtvbW7EXkbWO/pLEA=="
     },
+    "p-try": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
+      "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M="
+    },
     "pako": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.6.tgz",
       "integrity": "sha512-lQe48YPsMJAig+yngZ87Lus+NF+3mtu7DVOBu6b/gHO1YpKwIj5AWjZ/TOS7i46HD/UixzWb1zeWDZfGZ3iYcg=="
     },
+    "parallel-transform": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/parallel-transform/-/parallel-transform-1.1.0.tgz",
+      "integrity": "sha1-1BDwZbBdojCB/NEPKIVMKb2jOwY=",
+      "requires": {
+        "cyclist": "0.2.2",
+        "inherits": "2.0.3",
+        "readable-stream": "2.3.4"
+      }
+    },
+    "param-case": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz",
+      "integrity": "sha1-35T9jPZTHs915r75oIWPvHK+Ikc=",
+      "requires": {
+        "no-case": "2.3.2"
+      }
+    },
     "parse-asn1": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.0.tgz",
       "integrity": "sha1-N8T5t+06tlx0gXtfJICTf7+XxxI=",
       "requires": {
-        "asn1.js": "4.9.2",
+        "asn1.js": "4.10.1",
         "browserify-aes": "1.1.1",
         "create-hash": "1.1.3",
         "evp_bytestokey": "1.0.3",
@@ -8912,6 +9416,11 @@
       "resolved": "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.0.tgz",
       "integrity": "sha1-oLhwcpquIUAFt9UDLsLLuw+0RRo="
     },
+    "path-dirname": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz",
+      "integrity": "sha1-zDPSTVJeCZpTiMAzbG4yuRYGCeA="
+    },
     "path-exists": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz",
@@ -8966,7 +9475,7 @@
         "create-hmac": "1.1.6",
         "ripemd160": "2.0.1",
         "safe-buffer": "5.1.1",
-        "sha.js": "2.4.9"
+        "sha.js": "2.4.10"
       }
     },
     "performance-now": {
@@ -9000,15 +9509,6 @@
         "find-up": "2.1.0"
       }
     },
-    "podda": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/podda/-/podda-1.2.2.tgz",
-      "integrity": "sha1-FbDtvTNK3hRYEzQ/Xs+cEKcc9QA=",
-      "requires": {
-        "babel-runtime": "6.26.0",
-        "immutable": "3.8.2"
-      }
-    },
     "portfinder": {
       "version": "1.0.13",
       "resolved": "https://registry.npmjs.org/portfinder/-/portfinder-1.0.13.tgz",
@@ -9032,13 +9532,13 @@
       "integrity": "sha1-AerA/jta9xoqbAL+q7jB/vfgDqs="
     },
     "postcss": {
-      "version": "6.0.14",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.14.tgz",
-      "integrity": "sha512-NJ1z0f+1offCgadPhz+DvGm5Mkci+mmV5BqD13S992o0Xk9eElxUfPPF+t2ksH5R/17gz4xVK8KWocUQ5o3Rog==",
+      "version": "6.0.19",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.19.tgz",
+      "integrity": "sha512-f13HRz0HtVwVaEuW6J6cOUCBLFtymhgyLPV7t4QEk2UD3twRI9IluDcQNdzQdBpiixkXj2OmzejhhTbSbDxNTg==",
       "requires": {
-        "chalk": "2.3.0",
+        "chalk": "2.3.1",
         "source-map": "0.6.1",
-        "supports-color": "4.5.0"
+        "supports-color": "5.2.0"
       }
     },
     "postcss-calc": {
@@ -9086,7 +9586,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9151,7 +9651,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9215,7 +9715,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9278,7 +9778,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9341,7 +9841,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9404,7 +9904,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9467,7 +9967,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9531,7 +10031,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9595,7 +10095,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9616,11 +10116,11 @@
       }
     },
     "postcss-flexbugs-fixes": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-3.2.0.tgz",
-      "integrity": "sha512-0AuD9HG1Ey3/3nqPWu9yqf7rL0KCPu5VgjDsjf5mzEcuo9H/z8nco/fljKgjsOUrZypa95MI0kS4xBZeBzz2lw==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/postcss-flexbugs-fixes/-/postcss-flexbugs-fixes-3.3.0.tgz",
+      "integrity": "sha512-15JauG6a2hu2XZHdB9BaOwCLrI9oyK2UB8kt1ToTGdP1Pd3BQ/TJI9tNiTALntll25/66xMLUIyUPA9w/3BLtg==",
       "requires": {
-        "postcss": "6.0.14"
+        "postcss": "6.0.19"
       }
     },
     "postcss-load-config": {
@@ -9653,14 +10153,14 @@
       }
     },
     "postcss-loader": {
-      "version": "2.0.9",
-      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-2.0.9.tgz",
-      "integrity": "sha512-sgoXPtmgVT3aBAhU47Kig8oPF+mbXl8Unjvtz1Qj1q2D2EvSVJW2mKJNzxv5y/LvA9xWwuvdysvhc7Zn80UWWw==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-2.1.1.tgz",
+      "integrity": "sha512-f0J/DWE/hyO9/LH0WHpXkny/ZZ238sSaG3p1SRBtVZnFWUtD7GXIEgHoBg8cnAeRbmEvUxHQptY46zWfwNYj/w==",
       "requires": {
         "loader-utils": "1.1.0",
-        "postcss": "6.0.14",
+        "postcss": "6.0.19",
         "postcss-load-config": "1.2.0",
-        "schema-utils": "0.3.0"
+        "schema-utils": "0.4.5"
       }
     },
     "postcss-merge-idents": {
@@ -9708,7 +10208,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9771,7 +10271,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9813,8 +10313,8 @@
           "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-1.7.7.tgz",
           "integrity": "sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk=",
           "requires": {
-            "caniuse-db": "1.0.30000783",
-            "electron-to-chromium": "1.3.28"
+            "caniuse-db": "1.0.30000810",
+            "electron-to-chromium": "1.3.34"
           }
         },
         "chalk": {
@@ -9847,7 +10347,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9917,7 +10417,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -9981,7 +10481,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10047,7 +10547,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10113,7 +10613,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10140,16 +10640,16 @@
       "requires": {
         "css-modules-loader-core": "1.1.0",
         "generic-names": "1.0.3",
-        "postcss": "6.0.14",
+        "postcss": "6.0.19",
         "string-hash": "1.1.3"
       }
     },
     "postcss-modules-extract-imports": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz",
-      "integrity": "sha1-thTJcgvmgW6u41+zpfqh26agXds=",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.0.tgz",
+      "integrity": "sha1-ZhQOzs447wa/DT41XWm/WdFB6oU=",
       "requires": {
-        "postcss": "6.0.14"
+        "postcss": "6.0.19"
       }
     },
     "postcss-modules-local-by-default": {
@@ -10158,7 +10658,7 @@
       "integrity": "sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk=",
       "requires": {
         "css-selector-tokenizer": "0.7.0",
-        "postcss": "6.0.14"
+        "postcss": "6.0.19"
       }
     },
     "postcss-modules-scope": {
@@ -10167,7 +10667,7 @@
       "integrity": "sha1-1upkmUx5+XtipytCb75gVqGUu5A=",
       "requires": {
         "css-selector-tokenizer": "0.7.0",
-        "postcss": "6.0.14"
+        "postcss": "6.0.19"
       }
     },
     "postcss-modules-values": {
@@ -10176,7 +10676,7 @@
       "integrity": "sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA=",
       "requires": {
         "icss-replace-symbols": "1.1.0",
-        "postcss": "6.0.14"
+        "postcss": "6.0.19"
       }
     },
     "postcss-normalize-charset": {
@@ -10222,7 +10722,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10288,7 +10788,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10352,7 +10852,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10416,7 +10916,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10479,7 +10979,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10544,7 +11044,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10620,7 +11120,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10685,7 +11185,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10755,7 +11255,7 @@
           "integrity": "sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg==",
           "requires": {
             "chalk": "1.1.3",
-            "js-base64": "2.4.0",
+            "js-base64": "2.4.3",
             "source-map": "0.5.7",
             "supports-color": "3.2.3"
           }
@@ -10790,6 +11290,15 @@
       "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
       "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks="
     },
+    "pretty-error": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.1.tgz",
+      "integrity": "sha1-X0+HyPkeWuPzuoerTPXgOxoX8aM=",
+      "requires": {
+        "renderkid": "2.0.1",
+        "utila": "0.4.0"
+      }
+    },
     "pretty-format": {
       "version": "21.2.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-21.2.1.tgz",
@@ -10823,6 +11332,19 @@
             "escape-string-regexp": "1.0.5",
             "supports-color": "4.5.0"
           }
+        },
+        "has-flag": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
+          "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE="
+        },
+        "supports-color": {
+          "version": "4.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
+          "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
+          "requires": {
+            "has-flag": "2.0.0"
+          }
         }
       }
     },
@@ -10837,9 +11359,9 @@
       "integrity": "sha1-czIwDoQBYb2j5podHZGn1LwW8YI="
     },
     "process-nextick-args": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
-      "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M="
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.0.tgz",
+      "integrity": "sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw=="
     },
     "promise": {
       "version": "7.3.1",
@@ -10849,6 +11371,11 @@
         "asap": "2.0.6"
       }
     },
+    "promise-inflight": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",
+      "integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM="
+    },
     "promise.prototype.finally": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/promise.prototype.finally/-/promise.prototype.finally-3.1.0.tgz",
@@ -10860,9 +11387,9 @@
       }
     },
     "prop-types": {
-      "version": "15.6.0",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.0.tgz",
-      "integrity": "sha1-zq8IMCL8RrSjX2nhPvda7Q1jmFY=",
+      "version": "15.6.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.1.tgz",
+      "integrity": "sha512-4ec7bY1Y66LymSUOH/zARVYObB23AT2h8cf6e/O6ZALB/N0sqZFEx7rq6EYPX2MkOdKORuooI/H5k9TlR4q7kQ==",
       "requires": {
         "fbjs": "0.8.16",
         "loose-envify": "1.3.1",
@@ -10870,12 +11397,12 @@
       }
     },
     "proxy-addr": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.2.tgz",
-      "integrity": "sha1-ZXFQT0e7mI7IGAJT+F3X4UlSvew=",
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.3.tgz",
+      "integrity": "sha512-jQTChiCJteusULxjBp8+jftSQE5Obdl3k4cnmLA6WXtK6XFuWRnvVL7aCiBqaLPM8c4ph0S4tKna8XvmIwEnXQ==",
       "requires": {
         "forwarded": "0.1.2",
-        "ipaddr.js": "1.5.2"
+        "ipaddr.js": "1.6.0"
       }
     },
     "prr": {
@@ -10897,7 +11424,26 @@
         "browserify-rsa": "4.0.1",
         "create-hash": "1.1.3",
         "parse-asn1": "5.1.0",
-        "randombytes": "2.0.5"
+        "randombytes": "2.0.6"
+      }
+    },
+    "pump": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pump/-/pump-2.0.1.tgz",
+      "integrity": "sha512-ruPMNRkN3MHP1cWJc9OWr+T/xDP0jhXYCLfJcBuX54hhfIBnaQmAUMfDcG4DM5UMWByBbJY69QSphm3jtDKIkA==",
+      "requires": {
+        "end-of-stream": "1.4.1",
+        "once": "1.4.0"
+      }
+    },
+    "pumpify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/pumpify/-/pumpify-1.4.0.tgz",
+      "integrity": "sha512-2kmNR9ry+Pf45opRVirpNuIFotsxUGLaYqxIwuR77AYrYRMuFCz9eryHBS52L360O+NcR383CL4QYlMKPq4zYA==",
+      "requires": {
+        "duplexify": "3.5.3",
+        "inherits": "2.0.3",
+        "pump": "2.0.1"
       }
     },
     "punycode": {
@@ -10947,7 +11493,7 @@
         "array-find": "1.0.0",
         "exenv": "1.2.2",
         "inline-style-prefixer": "2.0.5",
-        "prop-types": "15.6.0"
+        "prop-types": "15.6.1"
       },
       "dependencies": {
         "inline-style-prefixer": {
@@ -10955,7 +11501,7 @@
           "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-2.0.5.tgz",
           "integrity": "sha1-wVPH6I/YT+9cYC6VqBaLJ3BnH+c=",
           "requires": {
-            "bowser": "1.8.1",
+            "bowser": "1.9.2",
             "hyphenate-style-name": "1.0.2"
           }
         }
@@ -11003,19 +11549,19 @@
       }
     },
     "randombytes": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.0.5.tgz",
-      "integrity": "sha512-8T7Zn1AhMsQ/HI1SjcCfT/t4ii3eAqco3yOcSzS4mozsOz69lHLsoMXmF9nZgnFanYscnSlUSgs8uZyKzpE6kg==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.0.6.tgz",
+      "integrity": "sha512-CIQ5OFxf4Jou6uOKe9t1AOgqpeU5fd70A8NPdHSGeYXqXsPe6peOwI0cUl88RWZ6sP1vPMV3avd/R6cZ5/sP1A==",
       "requires": {
         "safe-buffer": "5.1.1"
       }
     },
     "randomfill": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.3.tgz",
-      "integrity": "sha512-YL6GrhrWoic0Eq8rXVbMptH7dAxCs0J+mh5Y0euNekPPYaxEmdVGim6GdoxoRzKW2yJoU8tueifS7mYxvcFDEQ==",
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/randomfill/-/randomfill-1.0.4.tgz",
+      "integrity": "sha512-87lcbR8+MhcWcUiQ+9e+Rwx8MyR2P7qnt15ynUlbm3TU/fjbgz4GsvfSUDTemtCCtVCqb4ZcEFlyPNTh9bBTLw==",
       "requires": {
-        "randombytes": "2.0.5",
+        "randombytes": "2.0.6",
         "safe-buffer": "5.1.1"
       }
     },
@@ -11048,19 +11594,19 @@
         "fbjs": "0.8.16",
         "loose-envify": "1.3.1",
         "object-assign": "4.1.1",
-        "prop-types": "15.6.0"
+        "prop-types": "15.6.1"
       }
     },
     "react-docgen": {
-      "version": "2.20.0",
-      "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-2.20.0.tgz",
-      "integrity": "sha512-+fW1dthCr/cqrAreHTMk2Luzdb3I7xJishC/g4k+vIWiPj4/jM6Ij67WvUjXqio0/TRh7AQtRDYRwqNyinN0LA==",
+      "version": "2.20.1",
+      "resolved": "https://registry.npmjs.org/react-docgen/-/react-docgen-2.20.1.tgz",
+      "integrity": "sha512-NYmD8nDPMWpIpqWqhSZjQ3P5iQml55IMkDG0ZInyWP7JD2ljaNhrxNWZnXPrOezUu6bYlcZUCxjw19s7zhE2uw==",
       "requires": {
         "async": "2.6.0",
         "babel-runtime": "6.26.0",
         "babylon": "5.8.38",
-        "commander": "2.12.2",
-        "doctrine": "2.0.2",
+        "commander": "2.14.1",
+        "doctrine": "2.1.0",
         "node-dir": "0.1.17",
         "recast": "0.12.9"
       },
@@ -11080,7 +11626,18 @@
         "fbjs": "0.8.16",
         "loose-envify": "1.3.1",
         "object-assign": "4.1.1",
-        "prop-types": "15.6.0"
+        "prop-types": "15.6.1"
+      }
+    },
+    "react-fuzzy": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/react-fuzzy/-/react-fuzzy-0.5.2.tgz",
+      "integrity": "sha512-qIZZxaCheb/HhcBi5fABbiCFg85+K5r1TCps1D4uaL0LAMMD/1zm/x1/kNR130Tx7nnY9V7mbFyY0DquPYeLAw==",
+      "requires": {
+        "babel-runtime": "6.26.0",
+        "classnames": "2.2.5",
+        "fuse.js": "3.2.0",
+        "prop-types": "15.6.1"
       }
     },
     "react-highlight": {
@@ -11098,11 +11655,11 @@
           "resolved": "https://registry.npmjs.org/react/-/react-15.6.2.tgz",
           "integrity": "sha1-26BDSrQ5z+gvEI8PURZjkIF5qnI=",
           "requires": {
-            "create-react-class": "15.6.2",
+            "create-react-class": "15.6.3",
             "fbjs": "0.8.16",
             "loose-envify": "1.3.1",
             "object-assign": "4.1.1",
-            "prop-types": "15.6.0"
+            "prop-types": "15.6.1"
           }
         },
         "react-dom": {
@@ -11113,7 +11670,7 @@
             "fbjs": "0.8.16",
             "loose-envify": "1.3.1",
             "object-assign": "4.1.1",
-            "prop-types": "15.6.0"
+            "prop-types": "15.6.1"
           }
         }
       }
@@ -11149,15 +11706,26 @@
       }
     },
     "react-modal": {
-      "version": "3.1.8",
-      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.1.8.tgz",
-      "integrity": "sha512-cp5fSUBuwkyojclrxZuWXudK2kTBycbDG9Eg1t/bEPdUVBW6vDiGE+4eZg7bVwMyFtiwvyVJ2ugdCOFllNPReg==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.3.1.tgz",
+      "integrity": "sha512-d1A8xXIvW+YVKwRMrFY5qneuC5FSa4OnOE78hgqfz+MYLb1Ai/B3D3Dzx1Zrw4ZD5rS16SKiPe5rl4UZt+AjpQ==",
       "requires": {
         "exenv": "1.2.2",
-        "prop-types": "15.6.0",
+        "prop-types": "15.6.1",
         "warning": "3.0.0"
       }
     },
+    "react-reconciler": {
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/react-reconciler/-/react-reconciler-0.7.0.tgz",
+      "integrity": "sha512-50JwZ3yNyMS8fchN+jjWEJOH3Oze7UmhxeoJLn2j6f3NjpfCRbcmih83XTWmzqtar/ivd5f7tvQhvvhism2fgg==",
+      "requires": {
+        "fbjs": "0.8.16",
+        "loose-envify": "1.3.1",
+        "object-assign": "4.1.1",
+        "prop-types": "15.6.1"
+      }
+    },
     "react-remarkable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/react-remarkable/-/react-remarkable-1.1.3.tgz",
@@ -11167,23 +11735,21 @@
       }
     },
     "react-split-pane": {
-      "version": "0.1.71",
-      "resolved": "https://registry.npmjs.org/react-split-pane/-/react-split-pane-0.1.71.tgz",
-      "integrity": "sha512-c7aK5ffRyeOySSWVeoSEsQHBUrNtzXTB9TFNUnZv/2EM7HEnN1Rfsgxag/bpDcl5GuaY5IuMvq7XySc6nyokog==",
+      "version": "0.1.77",
+      "resolved": "https://registry.npmjs.org/react-split-pane/-/react-split-pane-0.1.77.tgz",
+      "integrity": "sha512-xq0PPsbkNI9xEd6yTrGPr7hzf6XfIgnsxuUEdRJELq+kLPHMsO3ymFCjhiYP35wlDPn9W46+rHDsJd7LFYteMw==",
       "requires": {
-        "@types/inline-style-prefixer": "3.0.1",
-        "@types/react": "16.0.25",
         "inline-style-prefixer": "3.0.8",
-        "prop-types": "15.6.0",
-        "react-style-proptype": "3.1.0"
+        "prop-types": "15.6.1",
+        "react-style-proptype": "3.2.0"
       }
     },
     "react-style-proptype": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/react-style-proptype/-/react-style-proptype-3.1.0.tgz",
-      "integrity": "sha512-e4lOMjF4f8Pp/jdO9myNzDvSAx1aG5r0olziD64Bgk40LN8LxidRCgnKeI2RiKrqYD6j2Z8ByXoUbwV+/mwpwg==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/react-style-proptype/-/react-style-proptype-3.2.0.tgz",
+      "integrity": "sha512-Mafmkzj3oNmLSJNOlH+WWWyGIdzVLhPj+d12fDxQMQdwDQ5sMX7vQKOLpry4U+zRWieTCx448AyRKK0NLWuXmg==",
       "requires": {
-        "prop-types": "15.6.0"
+        "prop-types": "15.6.1"
       }
     },
     "react-test-renderer": {
@@ -11193,7 +11759,7 @@
       "requires": {
         "fbjs": "0.8.16",
         "object-assign": "4.1.1",
-        "prop-types": "15.6.0"
+        "prop-types": "15.6.1"
       }
     },
     "react-transition-group": {
@@ -11202,9 +11768,9 @@
       "integrity": "sha512-CWaL3laCmgAFdxdKbhhps+c0HRGF4c+hdM4H23+FI1QBNUyx/AMeIJGWorehPNSaKnQNOAxL7PQmqMu78CDj3Q==",
       "requires": {
         "chain-function": "1.0.0",
-        "dom-helpers": "3.2.1",
+        "dom-helpers": "3.3.1",
         "loose-envify": "1.3.1",
-        "prop-types": "15.6.0",
+        "prop-types": "15.6.1",
         "warning": "3.0.0"
       }
     },
@@ -11215,7 +11781,7 @@
       "requires": {
         "babel-runtime": "6.26.0",
         "deep-equal": "1.0.1",
-        "prop-types": "15.6.0",
+        "prop-types": "15.6.1",
         "radium": "0.19.6",
         "shallowequal": "0.2.2",
         "velocity-react": "1.3.3"
@@ -11241,14 +11807,14 @@
       }
     },
     "readable-stream": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.3.tgz",
-      "integrity": "sha512-m+qzzcn7KUxEmd1gMbchF+Y2eIUbieUaxkWtptyHywrX0rE8QEYqPC07Vuy4Wm32/xE16NcdBctb8S0Xe/5IeQ==",
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.4.tgz",
+      "integrity": "sha512-vuYxeWYM+fde14+rajzqgeohAI7YoJcHE7kXDAc4Nk0EbuKnJfqtY9YtRkLo/tqkuF7MsBQRhPnPeyjYITp3ZQ==",
       "requires": {
         "core-util-is": "1.0.2",
         "inherits": "2.0.3",
         "isarray": "1.0.0",
-        "process-nextick-args": "1.0.7",
+        "process-nextick-args": "2.0.0",
         "safe-buffer": "5.1.1",
         "string_decoder": "1.0.3",
         "util-deprecate": "1.0.2"
@@ -11261,7 +11827,7 @@
       "requires": {
         "graceful-fs": "4.1.11",
         "minimatch": "3.0.4",
-        "readable-stream": "2.3.3",
+        "readable-stream": "2.3.4",
         "set-immediate-shim": "1.0.1"
       }
     },
@@ -11301,21 +11867,6 @@
         "strip-indent": "1.0.1"
       }
     },
-    "redeyed": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/redeyed/-/redeyed-1.0.1.tgz",
-      "integrity": "sha1-6WwZO0DAgWsArshCaY5hGF5VSYo=",
-      "requires": {
-        "esprima": "3.0.0"
-      },
-      "dependencies": {
-        "esprima": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.0.0.tgz",
-          "integrity": "sha1-U88kes2ncxPlUcOqLnM0LT+099k="
-        }
-      }
-    },
     "reduce-css-calc": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/reduce-css-calc/-/reduce-css-calc-1.3.0.tgz",
@@ -11354,9 +11905,9 @@
       "integrity": "sha512-pNqnf9q1hI5HHZRBkj3bAngGZW/JMCmexDlOxw4XagXY2o1327nHH54LoTjiPJ0gizoqPDRqWyX/00g0hD6w+A==",
       "requires": {
         "lodash": "4.15.0",
-        "lodash-es": "4.17.4",
+        "lodash-es": "4.17.5",
         "loose-envify": "1.3.1",
-        "symbol-observable": "1.1.0"
+        "symbol-observable": "1.2.0"
       }
     },
     "regenerate": {
@@ -11388,11 +11939,12 @@
       }
     },
     "regex-not": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.0.tgz",
-      "integrity": "sha1-Qvg+OXcWIt+CawKvF2Ul1qXxV/k=",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
+      "integrity": "sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==",
       "requires": {
-        "extend-shallow": "2.0.1"
+        "extend-shallow": "3.0.2",
+        "safe-regex": "1.1.0"
       }
     },
     "regexpu-core": {
@@ -11418,6 +11970,11 @@
         "jsesc": "0.5.0"
       }
     },
+    "relateurl": {
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz",
+      "integrity": "sha1-VNvzd+UUQKypCkzSdGANP/LYiKk="
+    },
     "remarkable": {
       "version": "1.7.1",
       "resolved": "https://registry.npmjs.org/remarkable/-/remarkable-1.7.1.tgz",
@@ -11448,6 +12005,73 @@
       "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz",
       "integrity": "sha1-wkvOKig62tW8P1jg1IJJuSN52O8="
     },
+    "renderkid": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/renderkid/-/renderkid-2.0.1.tgz",
+      "integrity": "sha1-iYyr/Ivt5Le5ETWj/9Mj5YwNsxk=",
+      "requires": {
+        "css-select": "1.2.0",
+        "dom-converter": "0.1.4",
+        "htmlparser2": "3.3.0",
+        "strip-ansi": "3.0.1",
+        "utila": "0.3.3"
+      },
+      "dependencies": {
+        "domhandler": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.1.0.tgz",
+          "integrity": "sha1-0mRvXlf2w7qxHPbLBdPArPdBJZQ=",
+          "requires": {
+            "domelementtype": "1.3.0"
+          }
+        },
+        "domutils": {
+          "version": "1.1.6",
+          "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.1.6.tgz",
+          "integrity": "sha1-vdw94Jm5ou+sxRxiPyj0FuzFdIU=",
+          "requires": {
+            "domelementtype": "1.3.0"
+          }
+        },
+        "htmlparser2": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.3.0.tgz",
+          "integrity": "sha1-zHDQWln2VC5D8OaFyYLhTJJKnv4=",
+          "requires": {
+            "domelementtype": "1.3.0",
+            "domhandler": "2.1.0",
+            "domutils": "1.1.6",
+            "readable-stream": "1.0.34"
+          }
+        },
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+          "requires": {
+            "core-util-is": "1.0.2",
+            "inherits": "2.0.3",
+            "isarray": "0.0.1",
+            "string_decoder": "0.10.31"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        },
+        "utila": {
+          "version": "0.3.3",
+          "resolved": "https://registry.npmjs.org/utila/-/utila-0.3.3.tgz",
+          "integrity": "sha1-1+jn1+MJEHCSsF+NloiCTWM6QiY="
+        }
+      }
+    },
     "repeat-element": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.2.tgz",
@@ -11474,25 +12098,25 @@
         "aws-sign2": "0.7.0",
         "aws4": "1.6.0",
         "caseless": "0.12.0",
-        "combined-stream": "1.0.5",
+        "combined-stream": "1.0.6",
         "extend": "3.0.1",
         "forever-agent": "0.6.1",
-        "form-data": "2.3.1",
+        "form-data": "2.3.2",
         "har-validator": "5.0.3",
         "hawk": "6.0.2",
         "http-signature": "1.2.0",
         "is-typedarray": "1.0.0",
         "isstream": "0.1.2",
         "json-stringify-safe": "5.0.1",
-        "mime-types": "2.1.17",
+        "mime-types": "2.1.18",
         "oauth-sign": "0.8.2",
         "performance-now": "2.1.0",
         "qs": "6.5.1",
         "safe-buffer": "5.1.1",
         "stringstream": "0.0.5",
-        "tough-cookie": "2.3.3",
+        "tough-cookie": "2.3.4",
         "tunnel-agent": "0.6.0",
-        "uuid": "3.1.0"
+        "uuid": "3.2.1"
       }
     },
     "request-promise": {
@@ -11500,7 +12124,7 @@
       "resolved": "https://registry.npmjs.org/request-promise/-/request-promise-4.1.1.tgz",
       "integrity": "sha1-JgIeT29W/Uwwn2vx69jJepWsH7U=",
       "requires": {
-        "bluebird": "3.4.7",
+        "bluebird": "3.5.1",
         "request-promise-core": "1.1.1",
         "stealthy-require": "1.1.1"
       }
@@ -11514,9 +12138,9 @@
       }
     },
     "requestretry": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/requestretry/-/requestretry-1.12.2.tgz",
-      "integrity": "sha512-wDYnH4imurLs5upu31WoPaOFfEu31qhFlF7KgpYbBsmBagFmreZZo8E/XpoQ3erCP5za+72t8k8QI4wlrtwVXw==",
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/requestretry/-/requestretry-1.12.3.tgz",
+      "integrity": "sha512-3H5xTOfORJGSDWV0WZYWLt39tqFyW19V+joQqsKvbbIR1AfJo8b1PDYlSYBoC5jPvmQcG0ZS0DkAKF23mChTow==",
       "requires": {
         "extend": "3.0.1",
         "lodash": "4.15.0",
@@ -11620,7 +12244,7 @@
       "integrity": "sha1-gbIw6i/MYGbInjRy3nlChdmwPZE=",
       "requires": {
         "lodash.flattendeep": "4.4.0",
-        "nearley": "2.11.0"
+        "nearley": "2.11.1"
       }
     },
     "run-async": {
@@ -11631,6 +12255,14 @@
         "is-promise": "2.1.0"
       }
     },
+    "run-queue": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/run-queue/-/run-queue-1.0.3.tgz",
+      "integrity": "sha1-6Eg5bwV9Ij8kOGkkYY4laUFh7Ec=",
+      "requires": {
+        "aproba": "1.2.0"
+      }
+    },
     "rx": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/rx/-/rx-4.1.0.tgz",
@@ -11641,15 +12273,23 @@
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz",
       "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg=="
     },
+    "safe-regex": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/safe-regex/-/safe-regex-1.1.0.tgz",
+      "integrity": "sha1-QKNmnzsHfR6UPURinhV91IAjvy4=",
+      "requires": {
+        "ret": "0.1.15"
+      }
+    },
     "samsam": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/samsam/-/samsam-1.3.0.tgz",
       "integrity": "sha512-1HwIYD/8UlOtFS3QO3w7ey+SdSDFE4HRNLZoZRYVQefrOY3l17epswImeB1ijgJFQJodIaHcwkp3r/myBjFVbg=="
     },
     "sane": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/sane/-/sane-2.2.0.tgz",
-      "integrity": "sha512-OSJxhHO0CgPUw3lUm3GhfREAfza45smvEI9ozuFrxKG10GHVo0ryW9FK5VYlLvxj0SV7HVKHW0voYJIRu27GWg==",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/sane/-/sane-2.4.1.tgz",
+      "integrity": "sha512-fW9svvNd81XzHDZyis9/tEY1bZikDGryy8Hi1BErPyNPYv47CdLseUN+tI5FBHWXEENRtj1SWtX/jBnggLaP0w==",
       "requires": {
         "anymatch": "1.3.2",
         "exec-sh": "0.2.1",
@@ -11833,11 +12473,24 @@
       "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
     },
     "schema-utils": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.3.0.tgz",
-      "integrity": "sha1-9YdyIs4+kx7a4DnxfrNxbnE3+M8=",
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.5.tgz",
+      "integrity": "sha512-yYrjb9TX2k/J1Y5UNy3KYdZq10xhYcF8nMpAW6o3hy6Q8WSIEf9lJHG/ePnOBfziPM3fvQwfOwa13U/Fh8qTfA==",
       "requires": {
-        "ajv": "5.5.1"
+        "ajv": "6.2.0",
+        "ajv-keywords": "3.1.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.2.0.tgz",
+          "integrity": "sha1-r6wpW7qgFSRJ5SJ0LkVHwa6TKNI=",
+          "requires": {
+            "fast-deep-equal": "1.1.0",
+            "fast-json-stable-stringify": "2.0.0",
+            "json-schema-traverse": "0.3.1"
+          }
+        }
       }
     },
     "screener-runner": {
@@ -11853,7 +12506,7 @@
         "http-proxy": "1.16.2",
         "joi": "9.2.0",
         "lodash": "4.16.6",
-        "ngrok": "2.2.24",
+        "ngrok": "2.2.26",
         "portfinder": "1.0.13",
         "request": "2.78.0",
         "request-promise": "4.1.1"
@@ -11874,6 +12527,11 @@
           "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
           "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8="
         },
+        "bluebird": {
+          "version": "3.4.7",
+          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
+          "integrity": "sha1-9y12C+Cbf3bQjtj66Ysomo0F+rM="
+        },
         "boom": {
           "version": "2.10.1",
           "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
@@ -11919,7 +12577,7 @@
           "requires": {
             "accepts": "1.3.4",
             "bytes": "2.3.0",
-            "compressible": "2.0.12",
+            "compressible": "2.0.13",
             "debug": "2.2.0",
             "on-headers": "1.0.1",
             "vary": "1.1.2"
@@ -11947,8 +12605,8 @@
           "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
           "requires": {
             "asynckit": "0.4.0",
-            "combined-stream": "1.0.5",
-            "mime-types": "2.1.17"
+            "combined-stream": "1.0.6",
+            "mime-types": "2.1.18"
           }
         },
         "har-validator": {
@@ -11958,7 +12616,7 @@
           "requires": {
             "chalk": "1.1.3",
             "commander": "2.9.0",
-            "is-my-json-valid": "2.16.1",
+            "is-my-json-valid": "2.17.2",
             "pinkie-promise": "2.0.1"
           }
         },
@@ -12016,7 +12674,7 @@
             "aws-sign2": "0.6.0",
             "aws4": "1.6.0",
             "caseless": "0.11.0",
-            "combined-stream": "1.0.5",
+            "combined-stream": "1.0.6",
             "extend": "3.0.1",
             "forever-agent": "0.6.1",
             "form-data": "2.1.4",
@@ -12026,12 +12684,12 @@
             "is-typedarray": "1.0.0",
             "isstream": "0.1.2",
             "json-stringify-safe": "5.0.1",
-            "mime-types": "2.1.17",
+            "mime-types": "2.1.18",
             "node-uuid": "1.4.8",
             "oauth-sign": "0.8.2",
             "qs": "6.3.2",
             "stringstream": "0.0.5",
-            "tough-cookie": "2.3.3",
+            "tough-cookie": "2.3.4",
             "tunnel-agent": "0.4.3"
           }
         },
@@ -12056,9 +12714,9 @@
       }
     },
     "screener-storybook": {
-      "version": "0.9.15",
-      "resolved": "https://registry.npmjs.org/screener-storybook/-/screener-storybook-0.9.15.tgz",
-      "integrity": "sha1-EtU1lXPUBH5G1LwCgHC2TMbqKmU=",
+      "version": "0.11.3",
+      "resolved": "https://registry.npmjs.org/screener-storybook/-/screener-storybook-0.11.3.tgz",
+      "integrity": "sha1-21arkALnjhJOUsvPk7TlettPjLY=",
       "requires": {
         "bluebird": "3.4.7",
         "colors": "1.1.2",
@@ -12066,13 +12724,13 @@
         "get-port": "3.2.0",
         "joi": "10.0.6",
         "jsdom": "9.8.3",
-        "lodash": "4.17.4",
-        "prop-types": "15.6.0",
+        "lodash": "4.17.5",
+        "prop-types": "15.6.1",
         "react": "15.6.2",
         "react-dom": "15.4.2",
         "request": "2.81.0",
-        "requestretry": "1.12.2",
-        "screener-runner": "0.7.12"
+        "requestretry": "1.12.3",
+        "screener-runner": "0.8.2"
       },
       "dependencies": {
         "acorn": {
@@ -12112,6 +12770,11 @@
           "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
           "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8="
         },
+        "bluebird": {
+          "version": "3.4.7",
+          "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.4.7.tgz",
+          "integrity": "sha1-9y12C+Cbf3bQjtj66Ysomo0F+rM="
+        },
         "boom": {
           "version": "2.10.1",
           "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
@@ -12159,7 +12822,7 @@
           "requires": {
             "accepts": "1.3.4",
             "bytes": "2.3.0",
-            "compressible": "2.0.12",
+            "compressible": "2.0.13",
             "debug": "2.2.0",
             "on-headers": "1.0.1",
             "vary": "1.1.2"
@@ -12187,8 +12850,8 @@
           "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
           "requires": {
             "asynckit": "0.4.0",
-            "combined-stream": "1.0.5",
-            "mime-types": "2.1.17"
+            "combined-stream": "1.0.6",
+            "mime-types": "2.1.18"
           }
         },
         "har-schema": {
@@ -12238,7 +12901,7 @@
           "resolved": "https://registry.npmjs.org/joi/-/joi-10.0.6.tgz",
           "integrity": "sha1-26y78wtNu50o72cW2CxFgLsEwJY=",
           "requires": {
-            "hoek": "4.2.0",
+            "hoek": "4.2.1",
             "isemail": "2.2.1",
             "items": "2.1.1",
             "topo": "2.0.2"
@@ -12256,7 +12919,7 @@
             "content-type-parser": "1.0.2",
             "cssom": "0.3.2",
             "cssstyle": "0.2.37",
-            "escodegen": "1.9.0",
+            "escodegen": "1.9.1",
             "html-encoding-sniffer": "1.0.2",
             "iconv-lite": "0.4.19",
             "nwmatcher": "1.4.3",
@@ -12264,7 +12927,7 @@
             "request": "2.81.0",
             "sax": "1.2.4",
             "symbol-tree": "3.2.2",
-            "tough-cookie": "2.3.3",
+            "tough-cookie": "2.3.4",
             "webidl-conversions": "3.0.1",
             "whatwg-encoding": "1.0.3",
             "whatwg-url": "3.1.0",
@@ -12272,9 +12935,9 @@
           }
         },
         "lodash": {
-          "version": "4.17.4",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
+          "version": "4.17.5",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+          "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
         },
         "ms": {
           "version": "0.7.1",
@@ -12289,7 +12952,7 @@
             "decompress-zip": "0.3.0",
             "lock": "0.1.4",
             "request": "2.81.0",
-            "uuid": "3.1.0"
+            "uuid": "3.2.1"
           }
         },
         "node-uuid": {
@@ -12312,11 +12975,11 @@
           "resolved": "https://registry.npmjs.org/react/-/react-15.6.2.tgz",
           "integrity": "sha1-26BDSrQ5z+gvEI8PURZjkIF5qnI=",
           "requires": {
-            "create-react-class": "15.6.2",
+            "create-react-class": "15.6.3",
             "fbjs": "0.8.16",
             "loose-envify": "1.3.1",
             "object-assign": "4.1.1",
-            "prop-types": "15.6.0"
+            "prop-types": "15.6.1"
           }
         },
         "react-dom": {
@@ -12337,7 +13000,7 @@
             "aws-sign2": "0.6.0",
             "aws4": "1.6.0",
             "caseless": "0.12.0",
-            "combined-stream": "1.0.5",
+            "combined-stream": "1.0.6",
             "extend": "3.0.1",
             "forever-agent": "0.6.1",
             "form-data": "2.1.4",
@@ -12347,21 +13010,21 @@
             "is-typedarray": "1.0.0",
             "isstream": "0.1.2",
             "json-stringify-safe": "5.0.1",
-            "mime-types": "2.1.17",
+            "mime-types": "2.1.18",
             "oauth-sign": "0.8.2",
             "performance-now": "0.2.0",
             "qs": "6.4.0",
             "safe-buffer": "5.1.1",
             "stringstream": "0.0.5",
-            "tough-cookie": "2.3.3",
+            "tough-cookie": "2.3.4",
             "tunnel-agent": "0.6.0",
-            "uuid": "3.1.0"
+            "uuid": "3.2.1"
           }
         },
         "screener-runner": {
-          "version": "0.7.12",
-          "resolved": "https://registry.npmjs.org/screener-runner/-/screener-runner-0.7.12.tgz",
-          "integrity": "sha1-2+wn4gRAVEueDBFFQK5fEGm6sm4=",
+          "version": "0.8.2",
+          "resolved": "https://registry.npmjs.org/screener-runner/-/screener-runner-0.8.2.tgz",
+          "integrity": "sha1-6s1x1kjguLZLTc6BA/E2uElTUFc=",
           "requires": {
             "bluebird": "3.4.7",
             "colors": "1.1.2",
@@ -12389,7 +13052,7 @@
               "requires": {
                 "chalk": "1.1.3",
                 "commander": "2.9.0",
-                "is-my-json-valid": "2.16.1",
+                "is-my-json-valid": "2.17.2",
                 "pinkie-promise": "2.0.1"
               }
             },
@@ -12398,10 +13061,10 @@
               "resolved": "https://registry.npmjs.org/joi/-/joi-9.2.0.tgz",
               "integrity": "sha1-M4WseQGSEwy+Iw6ALsAskhW7/to=",
               "requires": {
-                "hoek": "4.2.0",
+                "hoek": "4.2.1",
                 "isemail": "2.2.1",
                 "items": "2.1.1",
-                "moment": "2.19.4",
+                "moment": "2.20.1",
                 "topo": "2.0.2"
               }
             },
@@ -12423,7 +13086,7 @@
                 "aws-sign2": "0.6.0",
                 "aws4": "1.6.0",
                 "caseless": "0.11.0",
-                "combined-stream": "1.0.5",
+                "combined-stream": "1.0.6",
                 "extend": "3.0.1",
                 "forever-agent": "0.6.1",
                 "form-data": "2.1.4",
@@ -12433,12 +13096,12 @@
                 "is-typedarray": "1.0.0",
                 "isstream": "0.1.2",
                 "json-stringify-safe": "5.0.1",
-                "mime-types": "2.1.17",
+                "mime-types": "2.1.18",
                 "node-uuid": "1.4.8",
                 "oauth-sign": "0.8.2",
                 "qs": "6.3.2",
                 "stringstream": "0.0.5",
-                "tough-cookie": "2.3.3",
+                "tough-cookie": "2.3.4",
                 "tunnel-agent": "0.4.3"
               }
             },
@@ -12490,7 +13153,7 @@
       "resolved": "https://registry.npmjs.org/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz",
       "integrity": "sha1-jrBtualyMzOCTT9VMGQRSYR85dE=",
       "requires": {
-        "js-base64": "2.4.0",
+        "js-base64": "2.4.3",
         "source-map": "0.4.4"
       },
       "dependencies": {
@@ -12510,17 +13173,17 @@
       "integrity": "sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo="
     },
     "selfsigned": {
-      "version": "1.10.1",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.1.tgz",
-      "integrity": "sha1-v4y3uDJWxFUeMTR8YxF3jbme7FI=",
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.2.tgz",
+      "integrity": "sha1-tESVgNmZKbZbEKSDiTAaZZIIh1g=",
       "requires": {
-        "node-forge": "0.6.33"
+        "node-forge": "0.7.1"
       }
     },
     "semver": {
-      "version": "5.4.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.4.1.tgz",
-      "integrity": "sha512-WfG/X9+oATh81XtllIo/I8gOiY9EXRdv1cQdyykeXK17YcUW3EXUAi2To4pcH6nZtJPr7ZOpM5OMyWJZm+8Rsg=="
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.5.0.tgz",
+      "integrity": "sha512-4SJ3dm0WAwWy/NVeioZh5AntkdJoWKxHxcmyP622fOkgHa4z3R0TdBJICINyaSDE6uNwVc8gZr+ZinwZAH4xIA=="
     },
     "send": {
       "version": "0.16.1",
@@ -12528,9 +13191,9 @@
       "integrity": "sha512-ElCLJdJIKPk6ux/Hocwhk7NFHpI3pVm/IZOYWqUmoxcgeyM+MpxHHKhb8QmlJDX1pU6WrgaHBkVNm73Sv7uc2A==",
       "requires": {
         "debug": "2.6.9",
-        "depd": "1.1.1",
+        "depd": "1.1.2",
         "destroy": "1.0.4",
-        "encodeurl": "1.0.1",
+        "encodeurl": "1.0.2",
         "escape-html": "1.0.3",
         "etag": "1.8.1",
         "fresh": "0.5.2",
@@ -12549,6 +13212,11 @@
         }
       }
     },
+    "serialize-javascript": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-1.4.0.tgz",
+      "integrity": "sha1-fJWFFNtqwkQ6irwGLcn3iGp/YAU="
+    },
     "serve-favicon": {
       "version": "2.4.5",
       "resolved": "https://registry.npmjs.org/serve-favicon/-/serve-favicon-2.4.5.tgz",
@@ -12571,7 +13239,7 @@
         "debug": "2.6.9",
         "escape-html": "1.0.3",
         "http-errors": "1.6.2",
-        "mime-types": "2.1.17",
+        "mime-types": "2.1.18",
         "parseurl": "1.3.2"
       }
     },
@@ -12580,7 +13248,7 @@
       "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.13.1.tgz",
       "integrity": "sha512-hSMUZrsPa/I09VYFJwa627JJkNs0NrfL1Uzuup+GqHfToR2KcsXFymXSV90hoyw3M+msjFuQly+YzIH/q0MGlQ==",
       "requires": {
-        "encodeurl": "1.0.1",
+        "encodeurl": "1.0.2",
         "escape-html": "1.0.3",
         "parseurl": "1.3.2",
         "send": "0.16.1"
@@ -12613,6 +13281,16 @@
         "is-extendable": "0.1.1",
         "is-plain-object": "2.0.4",
         "split-string": "3.1.0"
+      },
+      "dependencies": {
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "requires": {
+            "is-extendable": "0.1.1"
+          }
+        }
       }
     },
     "setimmediate": {
@@ -12626,9 +13304,9 @@
       "integrity": "sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ=="
     },
     "sha.js": {
-      "version": "2.4.9",
-      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.9.tgz",
-      "integrity": "sha512-G8zektVqbiPHrylgew9Zg1VRB1L/DtXNUVAM6q4QLy8NE3qtHlFXTf8VLL4k1Yl6c7NMjtZUTdXV+X44nFaT6A==",
+      "version": "2.4.10",
+      "resolved": "https://registry.npmjs.org/sha.js/-/sha.js-2.4.10.tgz",
+      "integrity": "sha512-vnwmrFDlOExK4Nm16J2KMWHLrp14lBrjxMxBJpu++EnsuBmpiYaM/MEs46Vxxm/4FvdP5yTwuCTO9it5FSjrqA==",
       "requires": {
         "inherits": "2.0.3",
         "safe-buffer": "5.1.1"
@@ -12713,17 +13391,17 @@
       "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0="
     },
     "sinon": {
-      "version": "4.1.3",
-      "resolved": "https://registry.npmjs.org/sinon/-/sinon-4.1.3.tgz",
-      "integrity": "sha512-c7u0ZuvBRX1eXuB4jN3BRCAOGiUTlM8SE3TxbJHrNiHUKL7wonujMOB6Fi1gQc00U91IscFORQHDga/eccqpbw==",
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/sinon/-/sinon-4.4.2.tgz",
+      "integrity": "sha512-cpOHpnRyY3Dk9dTHBYMfVBB0HUCSKIpxW07X6OGW2NiYPovs4AkcL8Q8MzecbAROjbfRA9esJCmlZgikxDz7DA==",
       "requires": {
+        "@sinonjs/formatio": "2.0.0",
         "diff": "3.4.0",
-        "formatio": "1.2.0",
         "lodash.get": "4.4.2",
-        "lolex": "2.3.1",
-        "nise": "1.2.0",
-        "supports-color": "4.5.0",
-        "type-detect": "4.0.5"
+        "lolex": "2.3.2",
+        "nise": "1.2.7",
+        "supports-color": "5.2.0",
+        "type-detect": "4.0.8"
       }
     },
     "slash": {
@@ -12754,6 +13432,50 @@
             "is-descriptor": "0.1.6"
           }
         },
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "requires": {
+            "is-extendable": "0.1.1"
+          }
+        },
+        "is-accessor-descriptor": {
+          "version": "0.1.6",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+          "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+          "requires": {
+            "kind-of": "3.2.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "requires": {
+                "is-buffer": "1.1.6"
+              }
+            }
+          }
+        },
+        "is-data-descriptor": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+          "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+          "requires": {
+            "kind-of": "3.2.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "requires": {
+                "is-buffer": "1.1.6"
+              }
+            }
+          }
+        },
         "is-descriptor": {
           "version": "0.1.6",
           "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
@@ -12784,6 +13506,16 @@
         "define-property": "1.0.0",
         "isobject": "3.0.1",
         "snapdragon-util": "3.0.1"
+      },
+      "dependencies": {
+        "define-property": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/define-property/-/define-property-1.0.0.tgz",
+          "integrity": "sha1-dp66rz9KY6rTr56NMEybvnm/sOY=",
+          "requires": {
+            "is-descriptor": "1.0.2"
+          }
+        }
       }
     },
     "snapdragon-util": {
@@ -12809,23 +13541,16 @@
       "resolved": "https://registry.npmjs.org/sntp/-/sntp-2.1.0.tgz",
       "integrity": "sha512-FL1b58BDrqS3A11lJ0zEdnJ3UOKqVxawAkF3k7F0CVN7VQ34aZrV+G8BZ1WC9ZL7NyrwsW0oviwsWDgRuVYtJg==",
       "requires": {
-        "hoek": "4.2.0"
+        "hoek": "4.2.1"
       }
     },
     "sockjs": {
-      "version": "0.3.18",
-      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.18.tgz",
-      "integrity": "sha1-2bKJMWyn33dZXvKZ4HXw+TfrQgc=",
+      "version": "0.3.19",
+      "resolved": "https://registry.npmjs.org/sockjs/-/sockjs-0.3.19.tgz",
+      "integrity": "sha512-V48klKZl8T6MzatbLlzzRNhMepEys9Y4oGFpypBFFn1gLI/QQ9HtLLyWJNbPlwGLelOVOEijUbTTJeLLI59jLw==",
       "requires": {
         "faye-websocket": "0.10.0",
-        "uuid": "2.0.3"
-      },
-      "dependencies": {
-        "uuid": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.3.tgz",
-          "integrity": "sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho="
-        }
+        "uuid": "3.2.1"
       }
     },
     "sockjs-client": {
@@ -12905,18 +13630,11 @@
       }
     },
     "source-map-support": {
-      "version": "0.4.18",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.4.18.tgz",
-      "integrity": "sha512-try0/JqxPLF9nOjvSta7tVondkP5dwgyLDjVoyMDlmjugT2lRZ1OfsrYTkCd2hkDnJTKRbO/Rl3orm8vlsUzbA==",
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.3.tgz",
+      "integrity": "sha512-eKkTgWYeBOQqFGXRfKabMFdnWepo51vWqEdoeikaEPFiJC7MCU5j2h4+6Q8npkZTeLGbSyecZvRxiSoWl3rh+w==",
       "requires": {
-        "source-map": "0.5.7"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
-        }
+        "source-map": "0.6.1"
       }
     },
     "source-map-url": {
@@ -12925,22 +13643,32 @@
       "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM="
     },
     "spdx-correct": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-1.0.2.tgz",
-      "integrity": "sha1-SzBz2TP/UfORLwOsVRlJikFQ20A=",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.0.0.tgz",
+      "integrity": "sha512-N19o9z5cEyc8yQQPukRCZ9EUmb4HUpnrmaL/fxS2pBo2jbfcFRVuFZ/oFC+vZz0MNNk0h80iMn5/S6qGZOL5+g==",
       "requires": {
-        "spdx-license-ids": "1.2.2"
+        "spdx-expression-parse": "3.0.0",
+        "spdx-license-ids": "3.0.0"
       }
     },
+    "spdx-exceptions": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.1.0.tgz",
+      "integrity": "sha512-4K1NsmrlCU1JJgUrtgEeTVyfx8VaYea9J9LvARxhbHtVtohPs/gFGG5yy49beySjlIMhhXZ4QqujIZEfS4l6Cg=="
+    },
     "spdx-expression-parse": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-1.0.4.tgz",
-      "integrity": "sha1-m98vIOH0DtRH++JzJmGR/O1RYmw="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz",
+      "integrity": "sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==",
+      "requires": {
+        "spdx-exceptions": "2.1.0",
+        "spdx-license-ids": "3.0.0"
+      }
     },
     "spdx-license-ids": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz",
-      "integrity": "sha1-yd96NCRZSt5r0RkA1ZZpbcBrrFc="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.0.tgz",
+      "integrity": "sha512-2+EPwgbnmOIl8HjGBXXMd9NAu02vLjOO1nWw4kmeRDFyHn+M/ETfHxQUK0oXg8ctgVnl9t3rosNVsZ1jG61nDA=="
     },
     "spdy": {
       "version": "3.4.7",
@@ -12964,7 +13692,7 @@
         "detect-node": "2.0.3",
         "hpack.js": "2.1.6",
         "obuf": "1.1.1",
-        "readable-stream": "2.3.3",
+        "readable-stream": "2.3.4",
         "safe-buffer": "5.1.1",
         "wbuf": "1.7.2"
       }
@@ -12974,25 +13702,7 @@
       "resolved": "https://registry.npmjs.org/split-string/-/split-string-3.1.0.tgz",
       "integrity": "sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==",
       "requires": {
-        "extend-shallow": "3.0.1"
-      },
-      "dependencies": {
-        "extend-shallow": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-3.0.1.tgz",
-          "integrity": "sha512-Fg1xXAv+qXKdwHiJFMcZSqsMcbPlkzsZtf8KkLJ2fqnP+lqg2RjEKgDcSfO9CO1+p4LZKgApDBUUUqKaaRhwZQ==",
-          "requires": {
-            "is-extendable": "1.0.1"
-          }
-        },
-        "is-extendable": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-1.0.1.tgz",
-          "integrity": "sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==",
-          "requires": {
-            "is-plain-object": "2.0.4"
-          }
-        }
+        "extend-shallow": "3.0.2"
       }
     },
     "sprintf-js": {
@@ -13011,6 +13721,14 @@
         "getpass": "0.1.7"
       }
     },
+    "ssri": {
+      "version": "5.2.4",
+      "resolved": "https://registry.npmjs.org/ssri/-/ssri-5.2.4.tgz",
+      "integrity": "sha512-UnEAgMZa15973iH7cUi0AHjJn1ACDIkaMyZILoqwN6yzt+4P81I8tBc5Hl+qwi5auMplZtPQsHrPBR5vJLcQtQ==",
+      "requires": {
+        "safe-buffer": "5.1.1"
+      }
+    },
     "static-extend": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/static-extend/-/static-extend-0.1.2.tgz",
@@ -13028,6 +13746,42 @@
             "is-descriptor": "0.1.6"
           }
         },
+        "is-accessor-descriptor": {
+          "version": "0.1.6",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+          "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+          "requires": {
+            "kind-of": "3.2.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "requires": {
+                "is-buffer": "1.1.6"
+              }
+            }
+          }
+        },
+        "is-data-descriptor": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+          "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+          "requires": {
+            "kind-of": "3.2.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "requires": {
+                "is-buffer": "1.1.6"
+              }
+            }
+          }
+        },
         "is-descriptor": {
           "version": "0.1.6",
           "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
@@ -13055,7 +13809,7 @@
       "resolved": "https://registry.npmjs.org/stdout-stream/-/stdout-stream-1.4.0.tgz",
       "integrity": "sha1-osfIWH5U2UJ+qe2zrD8s1SLfN4s=",
       "requires": {
-        "readable-stream": "2.3.3"
+        "readable-stream": "2.3.4"
       }
     },
     "stealthy-require": {
@@ -13068,7 +13822,7 @@
       "resolved": "https://registry.npmjs.org/storybook-readme/-/storybook-readme-3.0.6.tgz",
       "integrity": "sha1-R1oUpbOdx6hcQjQxJTor8fWxx4Y=",
       "requires": {
-        "prop-types": "15.6.0",
+        "prop-types": "15.6.1",
         "react-remarkable": "1.1.3",
         "string-raw": "1.0.1"
       }
@@ -13079,31 +13833,53 @@
       "integrity": "sha1-ZiZu5fm9uZQKTkUUyvtDu3Hlyds=",
       "requires": {
         "inherits": "2.0.3",
-        "readable-stream": "2.3.3"
+        "readable-stream": "2.3.4"
       }
     },
     "stream-consume": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/stream-consume/-/stream-consume-0.1.0.tgz",
-      "integrity": "sha1-pB6tGm1ggc63n2WwYZAbbY89HQ8="
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/stream-consume/-/stream-consume-0.1.1.tgz",
+      "integrity": "sha512-tNa3hzgkjEP7XbCkbRXe1jpg+ievoa0O4SCFlMOYEscGSS4JJsckGL8swUyAa/ApGU3Ae4t6Honor4HhL+tRyg=="
+    },
+    "stream-each": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/stream-each/-/stream-each-1.2.2.tgz",
+      "integrity": "sha512-mc1dbFhGBxvTM3bIWmAAINbqiuAk9TATcfIQC8P+/+HJefgaiTlMn2dHvkX8qlI12KeYKSQ1Ua9RrIqrn1VPoA==",
+      "requires": {
+        "end-of-stream": "1.4.1",
+        "stream-shift": "1.0.0"
+      }
     },
     "stream-http": {
-      "version": "2.7.2",
-      "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.7.2.tgz",
-      "integrity": "sha512-c0yTD2rbQzXtSsFSVhtpvY/vS6u066PcXOX9kBB3mSO76RiUQzL340uJkGBWnlBg4/HZzqiUXtaVA7wcRcJgEw==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.8.0.tgz",
+      "integrity": "sha512-sZOFxI/5xw058XIRHl4dU3dZ+TTOIGJR78Dvo0oEAejIt4ou27k+3ne1zYmCV+v7UucbxIFQuOgnkTVHh8YPnw==",
       "requires": {
         "builtin-status-codes": "3.0.0",
         "inherits": "2.0.3",
-        "readable-stream": "2.3.3",
+        "readable-stream": "2.3.4",
         "to-arraybuffer": "1.0.1",
         "xtend": "4.0.1"
       }
     },
+    "stream-shift": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.0.tgz",
+      "integrity": "sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI="
+    },
     "strict-uri-encode": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
       "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
     },
+    "string_decoder": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
+      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
+      "requires": {
+        "safe-buffer": "5.1.1"
+      }
+    },
     "string-hash": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
@@ -13182,14 +13958,6 @@
         "function-bind": "1.1.1"
       }
     },
-    "string_decoder": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz",
-      "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==",
-      "requires": {
-        "safe-buffer": "5.1.1"
-      }
-    },
     "stringstream": {
       "version": "0.0.5",
       "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
@@ -13228,6 +13996,16 @@
       "requires": {
         "loader-utils": "1.1.0",
         "schema-utils": "0.3.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.3.0.tgz",
+          "integrity": "sha1-9YdyIs4+kx7a4DnxfrNxbnE3+M8=",
+          "requires": {
+            "ajv": "5.5.2"
+          }
+        }
       }
     },
     "subarg": {
@@ -13246,11 +14024,11 @@
       }
     },
     "supports-color": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
-      "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.2.0.tgz",
+      "integrity": "sha512-F39vS48la4YvTZUPVeTqsjsFNrvcMwrV3RLZINsmHo+7djCvuUzSIeXOnZ5hmjef4bajL1dNccN+tg5XAliO5Q==",
       "requires": {
-        "has-flag": "2.0.0"
+        "has-flag": "3.0.0"
       }
     },
     "svg-tag-names": {
@@ -13273,9 +14051,9 @@
       }
     },
     "symbol-observable": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.1.0.tgz",
-      "integrity": "sha512-dQoid9tqQ+uotGhuTKEY11X4xhyYePVnqGSoSm3OGKh2E8LZ6RPULp1uXTctk33IeERlrRJYoVSBglsL05F5Uw=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
+      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
     },
     "symbol-tree": {
       "version": "3.2.2",
@@ -13298,9 +14076,9 @@
       }
     },
     "test-exclude": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-4.1.1.tgz",
-      "integrity": "sha512-35+Asrsk3XHJDBgf/VRFexPgh3UyETv8IAn/LRTiZjVy6rjPVqdEk8dJcJYBzl1w0XCJM48lvTy8SfEsCWS4nA==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/test-exclude/-/test-exclude-4.2.0.tgz",
+      "integrity": "sha512-8hMFzjxbPv6xSlwGhXSvOMJ/vTy3bkng+2pxmf6E1z6VF7I9nIyNfvHtaw+NBPgvz647gADBbMSbwLfZYppT/w==",
       "requires": {
         "arrify": "1.0.1",
         "micromatch": "2.3.11",
@@ -13483,10 +14261,19 @@
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
       "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
     },
+    "through2": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-2.0.3.tgz",
+      "integrity": "sha1-AARWmzfHx0ujnEPzzteNGtlBQL4=",
+      "requires": {
+        "readable-stream": "2.3.4",
+        "xtend": "4.0.1"
+      }
+    },
     "thunky": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/thunky/-/thunky-0.1.0.tgz",
-      "integrity": "sha1-vzAUaCTituZ7Dy16Ssi+smkIaE4="
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.0.2.tgz",
+      "integrity": "sha1-qGLgGOP7HqLsP85dVWBc9X8kc3E="
     },
     "time-stamp": {
       "version": "2.0.0",
@@ -13494,9 +14281,9 @@
       "integrity": "sha1-lcakRTDhW6jW9KPsuMOj+sRto1c="
     },
     "timers-browserify": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.4.tgz",
-      "integrity": "sha512-uZYhyU3EX8O7HQP+J9fTVYwsq90Vr68xPEFo7yrVImIxYvHgukBEgOB/SgGoorWVTzGM/3Z+wUNnboA4M8jWrg==",
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.6.tgz",
+      "integrity": "sha512-HQ3nbYRAowdVd0ckGFvmJPPCOH/CHleFN/Y0YQCX1DVaB7t+KFvisuyN09fuP8Jtp1CpfSh8O8bMkHbdbPe6Pw==",
       "requires": {
         "setimmediate": "1.0.5"
       }
@@ -13543,38 +14330,14 @@
       }
     },
     "to-regex": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.1.tgz",
-      "integrity": "sha1-FTWL7kosg712N3uh3ASdDxiDeq4=",
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/to-regex/-/to-regex-3.0.2.tgz",
+      "integrity": "sha512-FWtleNAtZ/Ki2qtqej2CXTOayOH9bHDQF+Q48VpWyDXjbYxA4Yz8iDB31zXOBUlOHHKidDbqGVrTUvQMPmBGBw==",
       "requires": {
-        "define-property": "0.2.5",
-        "extend-shallow": "2.0.1",
-        "regex-not": "1.0.0"
-      },
-      "dependencies": {
-        "define-property": {
-          "version": "0.2.5",
-          "resolved": "https://registry.npmjs.org/define-property/-/define-property-0.2.5.tgz",
-          "integrity": "sha1-w1se+RjsPJkPmlvFe+BKrOxcgRY=",
-          "requires": {
-            "is-descriptor": "0.1.6"
-          }
-        },
-        "is-descriptor": {
-          "version": "0.1.6",
-          "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
-          "integrity": "sha512-avDYr0SB3DwO9zsMov0gKCESFYqCnE4hq/4z3TdUlukEy5t9C0YRq7HLrsN52NAcqXKaepeCD0n+B0arnVG3Hg==",
-          "requires": {
-            "is-accessor-descriptor": "0.1.6",
-            "is-data-descriptor": "0.1.4",
-            "kind-of": "5.1.0"
-          }
-        },
-        "kind-of": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-5.1.0.tgz",
-          "integrity": "sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw=="
-        }
+        "define-property": "2.0.2",
+        "extend-shallow": "3.0.2",
+        "regex-not": "1.0.2",
+        "safe-regex": "1.1.0"
       }
     },
     "to-regex-range": {
@@ -13591,9 +14354,14 @@
       "resolved": "https://registry.npmjs.org/topo/-/topo-2.0.2.tgz",
       "integrity": "sha1-zVYVdSU5BXwNwEkaYhw7xvvh0YI=",
       "requires": {
-        "hoek": "4.2.0"
+        "hoek": "4.2.1"
       }
     },
+    "toposort": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toposort/-/toposort-1.0.6.tgz",
+      "integrity": "sha1-wxdI5V0hDv/AD9zcfW5o19e7nOw="
+    },
     "touch": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/touch/-/touch-0.0.3.tgz",
@@ -13613,9 +14381,9 @@
       }
     },
     "tough-cookie": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.3.tgz",
-      "integrity": "sha1-C2GKVWW23qkL80JdBNVe3EdadWE=",
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.4.tgz",
+      "integrity": "sha512-TZ6TTfI5NtZnuyy/Kecv+CnoROnyXn2DN97LontgQpCwsX2XyLYCC0ENhYkehSOwAp8rTQKc/NUIF7BkQ5rKLA==",
       "requires": {
         "punycode": "1.4.1"
       }
@@ -13662,6 +14430,11 @@
         }
       }
     },
+    "tryer": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/tryer/-/tryer-1.0.0.tgz",
+      "integrity": "sha1-Antp+oIyJeVRys4+8DsR9qs3wdc="
+    },
     "ts-jest": {
       "version": "21.2.4",
       "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-21.2.4.tgz",
@@ -13675,10 +14448,25 @@
         "fs-extra": "4.0.3",
         "jest-config": "21.2.1",
         "pkg-dir": "2.0.0",
-        "source-map-support": "0.5.0",
-        "yargs": "10.0.3"
+        "source-map-support": "0.5.3",
+        "yargs": "10.1.2"
       },
       "dependencies": {
+        "ansi-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
+          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg="
+        },
+        "cliui": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-4.0.0.tgz",
+          "integrity": "sha512-nY3W5Gu2racvdDk//ELReY+dHjb9PlIcVDFXP72nVIhq2Gy3LuVXYwJoPVudwQnv1shtohpgkdCKT2YaKY0CKw==",
+          "requires": {
+            "string-width": "2.1.1",
+            "strip-ansi": "4.0.0",
+            "wrap-ansi": "2.1.0"
+          }
+        },
         "fs-extra": {
           "version": "4.0.3",
           "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-4.0.3.tgz",
@@ -13697,20 +14485,20 @@
             "graceful-fs": "4.1.11"
           }
         },
-        "source-map-support": {
-          "version": "0.5.0",
-          "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.0.tgz",
-          "integrity": "sha512-vUoN3I7fHQe0R/SJLKRdKYuEdRGogsviXFkHHo17AWaTGv17VLnxw+CFXvqy+y4ORZ3doWLQcxRYfwKrsd/H7Q==",
+        "strip-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
+          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
           "requires": {
-            "source-map": "0.6.1"
+            "ansi-regex": "3.0.0"
           }
         },
         "yargs": {
-          "version": "10.0.3",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-10.0.3.tgz",
-          "integrity": "sha512-DqBpQ8NAUX4GyPP/ijDGHsJya4tYqLQrjPr95HNsr1YwL3+daCfvBwg7+gIC6IdJhR2kATh3hb61vjzMWEtjdw==",
+          "version": "10.1.2",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-10.1.2.tgz",
+          "integrity": "sha512-ivSoxqBGYOqQVruxD35+EyCFDYNEFL/Uo6FcOnz+9xZdZzK0Zzw4r4KhbrME1Oo2gOggwJod2MnsdamSG7H9ig==",
           "requires": {
-            "cliui": "3.2.0",
+            "cliui": "4.0.0",
             "decamelize": "1.2.0",
             "find-up": "2.1.0",
             "get-caller-file": "1.0.2",
@@ -13721,13 +14509,13 @@
             "string-width": "2.1.1",
             "which-module": "2.0.0",
             "y18n": "3.2.1",
-            "yargs-parser": "8.0.0"
+            "yargs-parser": "8.1.0"
           }
         },
         "yargs-parser": {
-          "version": "8.0.0",
-          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-8.0.0.tgz",
-          "integrity": "sha1-IdR2Mw5agieaS4gTRb8GYQLiGcY=",
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-8.1.0.tgz",
+          "integrity": "sha512-yP+6QqN8BmrgW2ggLtTbdrOyBNSI7zBa4IykmiV5R1wl1JWNxQvWhMfMdmzIYtKU7oP3OOInY/tl2ov3BDjnJQ==",
           "requires": {
             "camelcase": "4.1.0"
           }
@@ -13735,57 +14523,51 @@
       }
     },
     "tslib": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.8.1.tgz",
-      "integrity": "sha1-aUavLR1lGnsYY7Ux1uWvpBqkTqw="
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.0.tgz",
+      "integrity": "sha512-f/qGG2tUkrISBlQZEjEqoZ3B2+npJjIf04H1wuAv9iA8i04Icp+61KRXxFdha22670NJopsZCIjhC3SnjPRKrQ=="
     },
     "tslint": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.8.0.tgz",
-      "integrity": "sha1-H0mtWy53x2w69N3K5VKuTjYS6xM=",
+      "version": "5.9.1",
+      "resolved": "https://registry.npmjs.org/tslint/-/tslint-5.9.1.tgz",
+      "integrity": "sha1-ElX4ej/1frCw4fDmEKi0dIBGya4=",
       "requires": {
         "babel-code-frame": "6.26.0",
         "builtin-modules": "1.1.1",
-        "chalk": "2.3.0",
-        "commander": "2.12.2",
+        "chalk": "2.3.1",
+        "commander": "2.14.1",
         "diff": "3.4.0",
         "glob": "7.1.2",
+        "js-yaml": "3.7.0",
         "minimatch": "3.0.4",
         "resolve": "1.5.0",
-        "semver": "5.4.1",
-        "tslib": "1.8.1",
-        "tsutils": "2.13.1"
+        "semver": "5.5.0",
+        "tslib": "1.9.0",
+        "tsutils": "2.21.2"
       }
     },
     "tslint-microsoft-contrib": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/tslint-microsoft-contrib/-/tslint-microsoft-contrib-5.0.1.tgz",
-      "integrity": "sha1-Mo7pwo0HzfeTKTIEyW4v+rkiGZQ=",
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/tslint-microsoft-contrib/-/tslint-microsoft-contrib-5.0.3.tgz",
+      "integrity": "sha512-5AnfTGlfpUzpRHLmoojPBKFTTmbjnwgdaTHMdllausa4GBPya5u36i9ddrTX4PhetGZvd4JUYIpAmgHqVnsctg==",
       "requires": {
-        "tsutils": "1.9.1"
-      },
-      "dependencies": {
-        "tsutils": {
-          "version": "1.9.1",
-          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-1.9.1.tgz",
-          "integrity": "sha1-ufmrROVa+WgYMdXyjQrur1x1DLA="
-        }
+        "tsutils": "2.21.2"
       }
     },
     "tslint-react": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/tslint-react/-/tslint-react-3.2.0.tgz",
-      "integrity": "sha1-hR+1BSAcY9A0PFFybmNk9+mtLpk=",
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/tslint-react/-/tslint-react-3.5.1.tgz",
+      "integrity": "sha512-ndS/iOOGrasATcf5YU3JxoIwPGVykjrKhzmlVsRdT1xzl/RbNg9n627rtAGbCjkQepyiaQYgxWQT5G/qUpQCaA==",
       "requires": {
-        "tsutils": "2.13.1"
+        "tsutils": "2.21.2"
       }
     },
     "tsutils": {
-      "version": "2.13.1",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.13.1.tgz",
-      "integrity": "sha512-XMOEvc2TiYesVSOJMI7OYPnBMSgcvERuGW5Li/J+2A0TuH607BPQnOLQ82oSPZCssB8c9+QGi6qhTBa/f1xQRA==",
+      "version": "2.21.2",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.21.2.tgz",
+      "integrity": "sha512-iaIuyjIUeFLdD39MYdzqBuY7Zv6+uGxSwRH4mf+HuzsnznjFz0R2tGrAe0/JvtNh91WrN8UN/DZRFTZNDuVekA==",
       "requires": {
-        "tslib": "1.8.1"
+        "tslib": "1.9.0"
       }
     },
     "tty-browserify": {
@@ -13810,23 +14592,28 @@
       }
     },
     "type-detect": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.5.tgz",
-      "integrity": "sha512-N9IvkQslUGYGC24RkJk1ba99foK6TkwC2FHAEBlQFBP0RxQZS8ZpJuAZcwiY/w9ZJHFQb1aOXBI60OdxhTrwEQ=="
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/type-detect/-/type-detect-4.0.8.tgz",
+      "integrity": "sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g=="
     },
     "type-is": {
-      "version": "1.6.15",
-      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.15.tgz",
-      "integrity": "sha1-yrEPtJCeRByChC6v4a1kbIGARBA=",
+      "version": "1.6.16",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.16.tgz",
+      "integrity": "sha512-HRkVv/5qY2G6I8iab9cI7v1bOIdhm94dVjQCPFElW9W+3GeDOSHmy2EBYe4VTApuzolPcmgFTN3ftVJRKR2J9Q==",
       "requires": {
         "media-typer": "0.3.0",
-        "mime-types": "2.1.17"
+        "mime-types": "2.1.18"
       }
     },
+    "typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c="
+    },
     "typescript": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.6.2.tgz",
-      "integrity": "sha1-PFtv1/beCRQmkCfwPAlGdY92c6Q="
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.7.2.tgz",
+      "integrity": "sha512-p5TCYZDAO0m4G344hD+wx/LATebLWZNkkh2asWUFqSsD2OrDNhbAHuSjobrmsUmdzjJjEeZVU9g1h3O6vpstnw=="
     },
     "typical": {
       "version": "2.6.1",
@@ -13902,11 +14689,6 @@
         }
       }
     },
-    "ultron": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ultron/-/ultron-1.1.1.tgz",
-      "integrity": "sha512-UIEXBNeYmKptWH6z8ZnqTeS8fV74zG0/eRU9VGkpzz+LIJNs8W/zM/L+7ctCkRrgbNnnR0xxw4bKOr0cW0N0Og=="
-    },
     "underscore": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.4.4.tgz",
@@ -13928,6 +14710,14 @@
         "set-value": "0.4.3"
       },
       "dependencies": {
+        "extend-shallow": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/extend-shallow/-/extend-shallow-2.0.1.tgz",
+          "integrity": "sha1-Ua99YUrZqfYQ6huvu5idaxxWiQ8=",
+          "requires": {
+            "is-extendable": "0.1.1"
+          }
+        },
         "set-value": {
           "version": "0.4.3",
           "resolved": "https://registry.npmjs.org/set-value/-/set-value-0.4.3.tgz",
@@ -13959,6 +14749,22 @@
       "resolved": "https://registry.npmjs.org/uniqs/-/uniqs-2.0.0.tgz",
       "integrity": "sha1-/+3ks2slKQaW5uFl1KWe25mOawI="
     },
+    "unique-filename": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/unique-filename/-/unique-filename-1.1.0.tgz",
+      "integrity": "sha1-0F8v5AMlYIcfMOk8vnNe6iAVFPM=",
+      "requires": {
+        "unique-slug": "2.0.0"
+      }
+    },
+    "unique-slug": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/unique-slug/-/unique-slug-2.0.0.tgz",
+      "integrity": "sha1-22Z258fMBimHj/GWCXx4hVrp9Ks=",
+      "requires": {
+        "imurmurhash": "0.1.4"
+      }
+    },
     "unique-string": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unique-string/-/unique-string-1.0.0.tgz",
@@ -14013,6 +14819,16 @@
         }
       }
     },
+    "upath": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/upath/-/upath-1.0.4.tgz",
+      "integrity": "sha512-d4SJySNBXDaQp+DPrziv3xGS6w3d2Xt69FijJr86zMPBy23JEloMCEOUBBzuN7xCtjLCnmB9tI/z7SBCahHBOw=="
+    },
+    "upper-case": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz",
+      "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg="
+    },
     "urix": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/urix/-/urix-0.1.0.tgz",
@@ -14042,6 +14858,16 @@
         "loader-utils": "1.1.0",
         "mime": "1.6.0",
         "schema-utils": "0.3.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "0.3.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.3.0.tgz",
+          "integrity": "sha1-9YdyIs4+kx7a4DnxfrNxbnE3+M8=",
+          "requires": {
+            "ajv": "5.5.2"
+          }
+        }
       }
     },
     "url-parse": {
@@ -14078,6 +14904,42 @@
             "is-descriptor": "0.1.6"
           }
         },
+        "is-accessor-descriptor": {
+          "version": "0.1.6",
+          "resolved": "https://registry.npmjs.org/is-accessor-descriptor/-/is-accessor-descriptor-0.1.6.tgz",
+          "integrity": "sha1-qeEss66Nh2cn7u84Q/igiXtcmNY=",
+          "requires": {
+            "kind-of": "3.2.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "requires": {
+                "is-buffer": "1.1.6"
+              }
+            }
+          }
+        },
+        "is-data-descriptor": {
+          "version": "0.1.4",
+          "resolved": "https://registry.npmjs.org/is-data-descriptor/-/is-data-descriptor-0.1.4.tgz",
+          "integrity": "sha1-C17mSDiOLIYCgueT8YVv7D8wG1Y=",
+          "requires": {
+            "kind-of": "3.2.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "requires": {
+                "is-buffer": "1.1.6"
+              }
+            }
+          }
+        },
         "is-descriptor": {
           "version": "0.1.6",
           "resolved": "https://registry.npmjs.org/is-descriptor/-/is-descriptor-0.1.6.tgz",
@@ -14115,23 +14977,28 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
     },
+    "utila": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz",
+      "integrity": "sha1-ihagXURWV6Oupe7MWxKk+lN5dyw="
+    },
     "utils-merge": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.1.tgz",
       "integrity": "sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM="
     },
     "uuid": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.1.0.tgz",
-      "integrity": "sha512-DIWtzUkw04M4k3bf1IcpS2tngXEL26YUD2M0tMDUpnUrz2hgzUBlD55a4FjdLGPvfHxS6uluGWvaVEqgBcVa+g=="
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.2.1.tgz",
+      "integrity": "sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA=="
     },
     "validate-npm-package-license": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.1.tgz",
-      "integrity": "sha1-KAS6vnEq0zeUWaz74kdGqywwP7w=",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.3.tgz",
+      "integrity": "sha512-63ZOUnL4SIXj4L0NixR3L1lcjO38crAbgrTpl28t8jjrfuiOBL5Iygm+60qPs/KsZGzPNg6Smnc/oY16QTjF0g==",
       "requires": {
-        "spdx-correct": "1.0.2",
-        "spdx-expression-parse": "1.0.4"
+        "spdx-correct": "3.0.0",
+        "spdx-expression-parse": "3.0.0"
       }
     },
     "validator": {
@@ -14145,9 +15012,9 @@
       "integrity": "sha1-IpnwLG3tMNSllhsLn3RSShj2NPw="
     },
     "velocity-animate": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/velocity-animate/-/velocity-animate-1.5.0.tgz",
-      "integrity": "sha1-/Idx2N/hE2/wKnB+EPuwlXxLAw8="
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/velocity-animate/-/velocity-animate-1.5.1.tgz",
+      "integrity": "sha512-VJ3csMz5zP1ifkbBlsNYpxnoWkPHfVRQ8tUongS78W5DxSGHB68pjYHDTgUYBkVM7P/HpYdVukgVUFcxjr1gGg=="
     },
     "velocity-react": {
       "version": "1.3.3",
@@ -14155,9 +15022,9 @@
       "integrity": "sha1-1tRyds/Ivip1Yjh5sgFArFjBuCs=",
       "requires": {
         "lodash": "3.10.1",
-        "prop-types": "15.6.0",
+        "prop-types": "15.6.1",
         "react-transition-group": "1.2.1",
-        "velocity-animate": "1.5.0"
+        "velocity-animate": "1.5.1"
       },
       "dependencies": {
         "lodash": {
@@ -14223,13 +15090,74 @@
       }
     },
     "watchpack": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.4.0.tgz",
-      "integrity": "sha1-ShRyvLuVK9Cpu0A2gB+VTfs5+qw=",
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.5.0.tgz",
+      "integrity": "sha512-RSlipNQB1u48cq0wH/BNfCu1tD/cJ8ydFIkNYhp9o+3d+8unClkIovpW5qpFPgmL9OE48wfAnlZydXByWP82AA==",
       "requires": {
-        "async": "2.6.0",
-        "chokidar": "1.7.0",
-        "graceful-fs": "4.1.11"
+        "chokidar": "2.0.2",
+        "graceful-fs": "4.1.11",
+        "neo-async": "2.5.0"
+      },
+      "dependencies": {
+        "anymatch": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
+          "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
+          "requires": {
+            "micromatch": "3.1.9",
+            "normalize-path": "2.1.1"
+          }
+        },
+        "chokidar": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.2.tgz",
+          "integrity": "sha512-l32Hw3wqB0L2kGVmSbK/a+xXLDrUEsc84pSgMkmwygHvD7ubRsP/vxxHa5BtB6oix1XLLVCHyYMsckRXxThmZw==",
+          "requires": {
+            "anymatch": "2.0.0",
+            "async-each": "1.0.1",
+            "braces": "2.3.1",
+            "glob-parent": "3.1.0",
+            "inherits": "2.0.3",
+            "is-binary-path": "1.0.1",
+            "is-glob": "4.0.0",
+            "normalize-path": "2.1.1",
+            "path-is-absolute": "1.0.1",
+            "readdirp": "2.1.0",
+            "upath": "1.0.4"
+          }
+        },
+        "glob-parent": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+          "requires": {
+            "is-glob": "3.1.0",
+            "path-dirname": "1.0.2"
+          },
+          "dependencies": {
+            "is-glob": {
+              "version": "3.1.0",
+              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+              "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+              "requires": {
+                "is-extglob": "2.1.1"
+              }
+            }
+          }
+        },
+        "is-extglob": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+          "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
+        },
+        "is-glob": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.0.tgz",
+          "integrity": "sha1-lSHHaEXMJhCoUgPd8ICpWML/q8A=",
+          "requires": {
+            "is-extglob": "2.1.1"
+          }
+        }
       }
     },
     "wbuf": {
@@ -14246,14 +15174,14 @@
       "integrity": "sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg=="
     },
     "webpack": {
-      "version": "3.10.0",
-      "resolved": "https://registry.npmjs.org/webpack/-/webpack-3.10.0.tgz",
-      "integrity": "sha512-fxxKXoicjdXNUMY7LIdY89tkJJJ0m1Oo8PQutZ5rLgWbV5QVKI15Cn7+/IHnRTd3vfKfiwBx6SBqlorAuNA8LA==",
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/webpack/-/webpack-3.11.0.tgz",
+      "integrity": "sha512-3kOFejWqj5ISpJk4Qj/V7w98h9Vl52wak3CLiw/cDOfbVTq7FeoZ0SdoHHY9PYlHr50ZS42OfvzE2vB4nncKQg==",
       "requires": {
-        "acorn": "5.2.1",
+        "acorn": "5.5.0",
         "acorn-dynamic-import": "2.0.2",
-        "ajv": "5.5.1",
-        "ajv-keywords": "2.1.1",
+        "ajv": "6.2.0",
+        "ajv-keywords": "3.1.0",
         "async": "2.6.0",
         "enhanced-resolve": "3.4.1",
         "escope": "3.6.0",
@@ -14269,15 +15197,25 @@
         "supports-color": "4.5.0",
         "tapable": "0.2.8",
         "uglifyjs-webpack-plugin": "0.4.6",
-        "watchpack": "1.4.0",
+        "watchpack": "1.5.0",
         "webpack-sources": "1.1.0",
         "yargs": "8.0.2"
       },
       "dependencies": {
         "acorn": {
-          "version": "5.2.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.2.1.tgz",
-          "integrity": "sha512-jG0u7c4Ly+3QkkW18V+NRDN+4bWHdln30NL1ZL2AvFZZmQe/BfopYCtghCKKVBUSetZ4QKcyA0pY6/4Gw8Pv8w=="
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.5.0.tgz",
+          "integrity": "sha512-arn53F07VXmls4o4pUhSzBa4fvaagPRe7AVZ8l7NHxFWUie2DsuFSBMMNAkgzRlOhEhzAnxeKyaWVzOH4xqp/g=="
+        },
+        "ajv": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.2.0.tgz",
+          "integrity": "sha1-r6wpW7qgFSRJ5SJ0LkVHwa6TKNI=",
+          "requires": {
+            "fast-deep-equal": "1.1.0",
+            "fast-json-stable-stringify": "2.0.0",
+            "json-schema-traverse": "0.3.1"
+          }
         },
         "enhanced-resolve": {
           "version": "3.4.1",
@@ -14290,11 +15228,24 @@
             "tapable": "0.2.8"
           }
         },
+        "has-flag": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-2.0.0.tgz",
+          "integrity": "sha1-6CB68cx7MNRGzHC3NLXovhj4jVE="
+        },
         "source-map": {
           "version": "0.5.7",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
           "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
         },
+        "supports-color": {
+          "version": "4.5.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-4.5.0.tgz",
+          "integrity": "sha1-vnoN5ITexcXN34s9WRJQRJEvY1s=",
+          "requires": {
+            "has-flag": "2.0.0"
+          }
+        },
         "yargs": {
           "version": "8.0.2",
           "resolved": "https://registry.npmjs.org/yargs/-/yargs-8.0.2.tgz",
@@ -14318,54 +15269,42 @@
       }
     },
     "webpack-bundle-analyzer": {
-      "version": "2.9.1",
-      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.9.1.tgz",
-      "integrity": "sha512-a+UcvlsXvCmclNgfThT8PVyuJKd029By7CxkYEbNNCfs0Lqj9gagjkdv3S3MBvCIKBaUGYs8l4UpiVI0bFoh2Q==",
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.11.0.tgz",
+      "integrity": "sha512-GGz//de6DHqKIBN75vRPUqwTUobgYCzygS+ei/Z5wRpKYEZ+HO2e8Pd6CbQewGfofjRHoCFqL10pi2lu+/fqDg==",
       "requires": {
-        "acorn": "5.2.1",
-        "chalk": "1.1.3",
-        "commander": "2.12.2",
+        "acorn": "5.5.0",
+        "bfj-node4": "5.2.1",
+        "chalk": "2.3.1",
+        "commander": "2.14.1",
         "ejs": "2.5.7",
         "express": "4.16.2",
-        "filesize": "3.5.11",
-        "gzip-size": "3.0.0",
-        "lodash": "4.17.4",
+        "filesize": "3.6.0",
+        "gzip-size": "4.1.0",
+        "lodash": "4.17.5",
         "mkdirp": "0.5.1",
         "opener": "1.4.3",
-        "ws": "3.3.2"
+        "ws": "4.1.0"
       },
       "dependencies": {
         "acorn": {
-          "version": "5.2.1",
-          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.2.1.tgz",
-          "integrity": "sha512-jG0u7c4Ly+3QkkW18V+NRDN+4bWHdln30NL1ZL2AvFZZmQe/BfopYCtghCKKVBUSetZ4QKcyA0pY6/4Gw8Pv8w=="
+          "version": "5.5.0",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-5.5.0.tgz",
+          "integrity": "sha512-arn53F07VXmls4o4pUhSzBa4fvaagPRe7AVZ8l7NHxFWUie2DsuFSBMMNAkgzRlOhEhzAnxeKyaWVzOH4xqp/g=="
         },
-        "ansi-styles": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4="
-        },
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+        "gzip-size": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/gzip-size/-/gzip-size-4.1.0.tgz",
+          "integrity": "sha1-iuCWJX6r59acRb4rZ8RIEk/7UXw=",
           "requires": {
-            "ansi-styles": "2.2.1",
-            "escape-string-regexp": "1.0.5",
-            "has-ansi": "2.0.0",
-            "strip-ansi": "3.0.1",
-            "supports-color": "2.0.0"
+            "duplexer": "0.1.1",
+            "pify": "3.0.0"
           }
         },
         "lodash": {
-          "version": "4.17.4",
-          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-          "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4="
-        },
-        "supports-color": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
+          "version": "4.17.5",
+          "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.5.tgz",
+          "integrity": "sha512-svL3uiZf1RwhH+cWrfZn3A4+U58wbP0tGVTLQPbjplZxZ8ROD9VLuNgsRniTlLe7OlSqR79RUehXgpBW/s0IQw=="
         }
       }
     },
@@ -14382,39 +15321,66 @@
       }
     },
     "webpack-dev-server": {
-      "version": "2.9.7",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-2.9.7.tgz",
-      "integrity": "sha512-Pu7uoQFgQj5RE5wmlfkpYSzihMKxulwEuO2xCsaMnAnyRSApwoVi3B8WCm9XbigyWTHaIMzYGkB90Vr6leAeTQ==",
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-2.11.2.tgz",
+      "integrity": "sha512-zrPoX97bx47vZiAXfDrkw8pe9QjJ+lunQl3dypojyWwWr1M5I2h0VSrMPfTjopHQPRNn+NqfjcMmhoLcUJe2gA==",
       "requires": {
         "ansi-html": "0.0.7",
         "array-includes": "3.0.3",
         "bonjour": "3.5.0",
-        "chokidar": "1.7.0",
-        "compression": "1.7.1",
+        "chokidar": "2.0.2",
+        "compression": "1.7.2",
         "connect-history-api-fallback": "1.5.0",
         "debug": "3.1.0",
         "del": "3.0.0",
         "express": "4.16.2",
         "html-entities": "1.2.1",
         "http-proxy-middleware": "0.17.4",
-        "import-local": "0.1.1",
+        "import-local": "1.0.0",
         "internal-ip": "1.2.0",
         "ip": "1.1.5",
         "killable": "1.0.0",
-        "loglevel": "1.6.0",
-        "opn": "5.1.0",
+        "loglevel": "1.6.1",
+        "opn": "5.2.0",
         "portfinder": "1.0.13",
-        "selfsigned": "1.10.1",
+        "selfsigned": "1.10.2",
         "serve-index": "1.9.1",
-        "sockjs": "0.3.18",
+        "sockjs": "0.3.19",
         "sockjs-client": "1.1.4",
         "spdy": "3.4.7",
         "strip-ansi": "3.0.1",
-        "supports-color": "4.5.0",
+        "supports-color": "5.2.0",
         "webpack-dev-middleware": "1.12.2",
         "yargs": "6.6.0"
       },
       "dependencies": {
+        "anymatch": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-2.0.0.tgz",
+          "integrity": "sha512-5teOsQWABXHHBFP9y3skS5P3d/WfWXpv3FUpy+LorMrNYaT9pI4oLMQX7jzQ2KklNpGpWHzdCXTDT2Y3XGlZBw==",
+          "requires": {
+            "micromatch": "3.1.9",
+            "normalize-path": "2.1.1"
+          }
+        },
+        "chokidar": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.0.2.tgz",
+          "integrity": "sha512-l32Hw3wqB0L2kGVmSbK/a+xXLDrUEsc84pSgMkmwygHvD7ubRsP/vxxHa5BtB6oix1XLLVCHyYMsckRXxThmZw==",
+          "requires": {
+            "anymatch": "2.0.0",
+            "async-each": "1.0.1",
+            "braces": "2.3.1",
+            "glob-parent": "3.1.0",
+            "inherits": "2.0.3",
+            "is-binary-path": "1.0.1",
+            "is-glob": "4.0.0",
+            "normalize-path": "2.1.1",
+            "path-is-absolute": "1.0.1",
+            "readdirp": "2.1.0",
+            "upath": "1.0.4"
+          }
+        },
         "debug": {
           "version": "3.1.0",
           "resolved": "https://registry.npmjs.org/debug/-/debug-3.1.0.tgz",
@@ -14423,10 +15389,42 @@
             "ms": "2.0.0"
           }
         },
+        "glob-parent": {
+          "version": "3.1.0",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz",
+          "integrity": "sha1-nmr2KZ2NO9K9QEMIMr0RPfkGxa4=",
+          "requires": {
+            "is-glob": "3.1.0",
+            "path-dirname": "1.0.2"
+          },
+          "dependencies": {
+            "is-glob": {
+              "version": "3.1.0",
+              "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-3.1.0.tgz",
+              "integrity": "sha1-e6WuJCF4BKxwcHuWkiVnSGzD6Eo=",
+              "requires": {
+                "is-extglob": "2.1.1"
+              }
+            }
+          }
+        },
+        "is-extglob": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+          "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI="
+        },
+        "is-glob": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.0.tgz",
+          "integrity": "sha1-lSHHaEXMJhCoUgPd8ICpWML/q8A=",
+          "requires": {
+            "is-extglob": "2.1.1"
+          }
+        },
         "opn": {
-          "version": "5.1.0",
-          "resolved": "https://registry.npmjs.org/opn/-/opn-5.1.0.tgz",
-          "integrity": "sha512-iPNl7SyM8L30Rm1sjGdLLheyHVw5YXVfi3SKWJzBI7efxRwHojfRFjwE/OLM6qp9xJYMgab8WicTU1cPoY+Hpg==",
+          "version": "5.2.0",
+          "resolved": "https://registry.npmjs.org/opn/-/opn-5.2.0.tgz",
+          "integrity": "sha512-Jd/GpzPyHF4P2/aNOVmS3lfMSWV9J7cOhCG1s08XCEAsPkB7lp6ddiU0J7XzyQRDUh8BqJ7PchfINjR8jyofRQ==",
           "requires": {
             "is-wsl": "1.1.0"
           }
@@ -14434,9 +15432,9 @@
       }
     },
     "webpack-hot-middleware": {
-      "version": "2.21.0",
-      "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.21.0.tgz",
-      "integrity": "sha512-P6xiOLy10QlSVSO7GanU9PLxN6zLLQ7RG16MPTvmFwf2KUG7jMp6m+fmdgsR7xoaVVLA7OlX3YO6JjoZEKjCuA==",
+      "version": "2.21.1",
+      "resolved": "https://registry.npmjs.org/webpack-hot-middleware/-/webpack-hot-middleware-2.21.1.tgz",
+      "integrity": "sha512-HaxZpATbq/bpuduum2i79pgE1vpSFfV2BVUyYi4lhocTJ5xpofWuYCCmd0c6eoJjY8szCuM5TsQk3M59Z9jpwA==",
       "requires": {
         "ansi-html": "0.0.7",
         "html-entities": "1.2.1",
@@ -14445,43 +15443,13 @@
       }
     },
     "webpack-notifier": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/webpack-notifier/-/webpack-notifier-1.5.0.tgz",
-      "integrity": "sha1-wBAAfUSM68NN78mezyiPpejGuvY=",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/webpack-notifier/-/webpack-notifier-1.5.1.tgz",
+      "integrity": "sha1-z19rmhcR+Alpu8T3vRXUDqexh2E=",
       "requires": {
-        "node-notifier": "4.6.1",
+        "node-notifier": "5.2.1",
         "object-assign": "4.1.1",
         "strip-ansi": "3.0.1"
-      },
-      "dependencies": {
-        "lodash.clonedeep": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-3.0.2.tgz",
-          "integrity": "sha1-oKHkDYKl6on/WxR7hETtY9koJ9s=",
-          "requires": {
-            "lodash._baseclone": "3.3.0",
-            "lodash._bindcallback": "3.0.1"
-          }
-        },
-        "minimist": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ="
-        },
-        "node-notifier": {
-          "version": "4.6.1",
-          "resolved": "https://registry.npmjs.org/node-notifier/-/node-notifier-4.6.1.tgz",
-          "integrity": "sha1-BW0UJE89zBzq3+aK+c/wxUc6M/M=",
-          "requires": {
-            "cli-usage": "0.1.4",
-            "growly": "1.3.0",
-            "lodash.clonedeep": "3.0.2",
-            "minimist": "1.2.0",
-            "semver": "5.4.1",
-            "shellwords": "0.1.1",
-            "which": "1.3.0"
-          }
-        }
       }
     },
     "webpack-sources": {
@@ -14498,7 +15466,7 @@
       "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.0.tgz",
       "integrity": "sha1-DK+dLXVdk67gSdS90NP+LMoqJOs=",
       "requires": {
-        "http-parser-js": "0.4.9",
+        "http-parser-js": "0.4.10",
         "websocket-extensions": "0.1.3"
       }
     },
@@ -14598,11 +15566,11 @@
       "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc="
     },
     "worker-farm": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.5.2.tgz",
-      "integrity": "sha512-XxiQ9kZN5n6mmnW+mFJ+wXjNNI/Nx4DIdaAKLX1Bn6LYBWlN/zaBhu34DQYPZ1AJobQuu67S2OfDdNSVULvXkQ==",
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/worker-farm/-/worker-farm-1.5.4.tgz",
+      "integrity": "sha512-ITyClEvcfv0ozqJl1vmWFWhvI+OIrkbInYqkEPE50wFPXj8J9Gd3FYf8+CkZJXJJsQBYe+2DvmoK9Zhx5w8W+w==",
       "requires": {
-        "errno": "0.1.6",
+        "errno": "0.1.7",
         "xtend": "4.0.1"
       }
     },
@@ -14657,10 +15625,10 @@
       "requires": {
         "chalk": "1.1.3",
         "debug": "2.6.9",
-        "filesize": "3.5.11",
+        "filesize": "3.6.0",
         "lodash": "4.15.0",
         "mkdirp": "0.5.1",
-        "moment": "2.19.4"
+        "moment": "2.20.1"
       },
       "dependencies": {
         "ansi-styles": {
@@ -14688,13 +15656,12 @@
       }
     },
     "ws": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-3.3.2.tgz",
-      "integrity": "sha512-t+WGpsNxhMR4v6EClXS8r8km5ZljKJzyGhJf7goJz9k5Ye3+b5Bvno5rjqPuIBn5mnn5GBb7o8IrIWHxX1qOLQ==",
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-4.1.0.tgz",
+      "integrity": "sha512-ZGh/8kF9rrRNffkLFV4AzhvooEclrOH0xaugmqGsIfFgOE/pIz4fMc4Ef+5HSQqTEug2S9JZIWDR47duDSLfaA==",
       "requires": {
         "async-limiter": "1.0.0",
-        "safe-buffer": "5.1.1",
-        "ultron": "1.1.1"
+        "safe-buffer": "5.1.1"
       }
     },
     "xdg-basedir": {
@@ -14702,6 +15669,11 @@
       "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-3.0.0.tgz",
       "integrity": "sha1-SWsswQnsqNus/i3HK2A8F8WHCtQ="
     },
+    "xml-char-classes": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/xml-char-classes/-/xml-char-classes-1.0.0.tgz",
+      "integrity": "sha1-ZGV4SKIP/F31g6Qq2KJ3tFErvE0="
+    },
     "xml-name-validator": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-2.0.1.tgz",
@@ -14872,11 +15844,11 @@
       "resolved": "https://registry.npmjs.org/z-schema/-/z-schema-3.18.4.tgz",
       "integrity": "sha512-DUOKC/IhbkdLKKiV89gw9DUauTV8U/8yJl1sjf6MtDmzevLKOF2duNJ495S3MFVjqZarr+qNGCPbkg4mu4PpLw==",
       "requires": {
-        "commander": "2.12.2",
+        "commander": "2.14.1",
         "lodash.get": "4.4.2",
         "lodash.isequal": "4.5.0",
         "validator": "8.2.0"
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/ghdocs/BESTPRACTICES.md b/ghdocs/BESTPRACTICES.md
index bcf01c605c34f..9b8481f5b30cc 100644
--- a/ghdocs/BESTPRACTICES.md
+++ b/ghdocs/BESTPRACTICES.md
@@ -172,13 +172,27 @@ public render() {
 }
 ```
 
-Best, use _resolveRef in BaseComponent:
+Best, use createRef:
+
+The `createRef` function in `lib/Utilities` is a polyfill for [React.createRef](https://github.com/facebook/react/pull/11555). (When Fabric switches over to React 16, we'll use React.createRef instead)
+
+`createRef` creates a reference object that has the following type `{ value: T | null }`, where T is the element to reference (either a dom node or a react component). You set the reference by passing the reference object as the `ref` prop. You can then subsequently access the reference through the `.value` property on the reference object elsewhere in your code.
+
 ```typescript
+import { createRef } from 'office-ui-fabric-react/lib/Utilities';
+
 class Foo extends BaseComponent<...> {
-  private _root: HTMLElement;
+  // Create the reference object that will be used for setting and accessing the reference
+  private _root = createRef<HTMLButtonElement>();
 
   public render() {
-    return <div ref={ this._resolveRef('_root') } />;
+    // Set the reference by passing the reference object as the ref prop
+    return <button ref={ _root } onClick={this._onClick} />;
+  }
+  
+  private _onClick() {
+    // Access the reference through the .value property on the reference object
+    this._root.value.focus();
   }
 }
 ```
@@ -187,10 +201,6 @@ Note that it's very critical you do NOT inline the functions in render! This cau
 is recreated. If you do this, react will call your function with null to clear it, and then render, and then once complete, will
 call it again with the element. This creates timing issues where your ref may be null when you didn't expect.
 
-See example here that illustates refs being re-evaluated:
-
-http://codepen.io/dzearing/pen/WGZOaR
-
 ## Use unique keys for items in a mapped array, avoid indexes for keys
 
 ```typescript
diff --git a/ghdocs/CONTRIBUTING.md b/ghdocs/CONTRIBUTING.md
index a2ab1d7bfd15e..212f1c6369634 100644
--- a/ghdocs/CONTRIBUTING.md
+++ b/ghdocs/CONTRIBUTING.md
@@ -2,8 +2,6 @@
 
 Office UI Fabric React is an evolving snapshot of the Office 365 Design Language's components, built with [React](https://facebook.github.io/react/).
 
-Right now, the project is in a **pre-v1** state, so we're mainly driving torwards the goals outlined in the [roadmap](https://github.com/OfficeDev/office-ui-fabric-react/blob/master/ghdocs/ROADMAP.md). With this in mind, feel free to file bugs but new components or additional features will probably not be considered to be executed on until after the v1 state is reached.
-
 ### Contribution license agreement
 For pull requests affecting fewer than 15 lines of code, you will need to sign a [Contribution License Agreement (CLA)](https://cla.microsoft.com/) before your contribution can be incorporated. To complete the CLA, you will need to submit the request via the form and then electronically sign the CLA when you receive the email containing the link to the document.
 
diff --git a/ghdocs/STYLING.md b/ghdocs/STYLING.md
index ae05ec3fca792..9777f8c931d52 100644
--- a/ghdocs/STYLING.md
+++ b/ghdocs/STYLING.md
@@ -71,7 +71,7 @@ class Comp extends React.Component {
 
 A component should consist of these files:
 
-* `ComponentName.props.ts` - The interfaces for the component. We separate these out for documentation reasons.
+* `ComponentName.types.ts` - The interfaces for the component. We separate these out for documentation reasons.
 * `ComponentName.base.tsx` - The unstyled component. This renders DOM structure and conrtains logic, MINUS styling opinions.
 * `ComponentName.styles.ts` - Exports a `getStyles` function for the component which takes in `IComponentNameStyleProps` and returns `IComponentNameStyles`.
 
@@ -195,36 +195,29 @@ export const ComponentName = styled(
 );
 ```
 
-#### Support for customized sub component styling
+#### Support for customizable sub-component styling
 
-Note that the component may also intend to provide customized styling for nested components. For example, a `Breadcrumb` component may want to expose the `getStyles` function for nested `Crumb` components.
+The component may also intend to provide customized styling for nested components. For example, a `Breadcrumb` component may want to render `Crumb` components, which may take in their own styles.
 
-The extra getStyles function would be added to the outer compoent's props:
+The recommended approach is to avoid exposing the individual `Crumb` props at the `Breadcrumb` layer. Instead, expose a way to provide an alternative component for the `Crumb` using the `as` prop convention. This lets the caller create their own `Crumb` variant and use it within the `Breadcrumb`. It also opens up other scenarios such as providing additional default props on the sub-component, or replacing it completely.
 
-```
-getCrumbStyles?: IStyleFunction<ICrumbStyleProps, ICrumbStyles>;
-```
+In the `Breadcrumb` case, we would expose an optional `crumbAs` prop. This would allow the consumer to make a `Breadcrumb` variant which renders red `Crumb` components:
 
-The base component would pipe the function into the child:
+```
+const RedCrumb = styled(Crumb, props => ({ root: background: 'red' }));
 
-```tsx
-let { getCrumbStyles } = this.props;
+render() {
+  return <Breadcrumb crumbAs={ RedCrumb } ... />
+```
 
-// ...and in the render function:
+Additionally this "breadcrumb with red crumbs" scenario could be abstracted as its own component, by passing in the 3rd optional param to `styled`, which lets the caller provide new default prop values:
 
-<Crumb getStyles={ getCrumbStyles }>
 ```
+const RedBreadcrumb = styled(Breadcrumb, undefined, { crumbAs: RedCrumb });
 
-And finally, the composite component created by the `styles` wrapper would link default styling for the property:
-
-```tsx
-export const Breadcrumb = styled(
-  BreadcrumbBase,
-  {
-    getStyles,
-    getCrumbStyles
-  }
-)
+render() {
+  return <RedBreadcrumb ... />
+}
 ```
 
 ### ComponentName.test.tsx
diff --git a/ghdocs/Theming.md b/ghdocs/Theming.md
index 1c2b28edfd90f..e6f79bf369294 100644
--- a/ghdocs/Theming.md
+++ b/ghdocs/Theming.md
@@ -25,7 +25,8 @@ Customizing Fabric palette slots allows broad-stroke changes to the overall colo
 Semantic slots are documented in [ISemanticColors.ts](https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/styling/src/interfaces/ISemanticColors.ts).
 These, on the other hand, are prescriptive slots, each slot having an intended use.
 This allows more targeted customizations.
-For example, you could change the light gray color of a disabled checkbox without affecting the light gray used by list item hover/selection state.
+For example, you could change the light gray color of a disabled checkbox without affecting the light gray background used by list item hover/selection state, even though they share the same color, because they use different slots.
+This wouldn't be possible with Fabric palette slots.
 We highly recommend using semantic slots wherever possible.
 
 
diff --git a/package.json b/package.json
index e0d02cda28eb4..7ce5f0b04aa3b 100644
--- a/package.json
+++ b/package.json
@@ -23,10 +23,11 @@
     "generate": "node node_modules/@microsoft/rush/bin/rush generate --force",
     "bundlesize": "cd scripts && npm run bundlesize",
     "create-component": "node scripts/create-component.js",
-    "checkchange": "node node_modules/@microsoft/rush/bin/rush change -v"
+    "checkchange": "node node_modules/@microsoft/rush/bin/rush change -v",
+    "update-snapshots": "cd packages/office-ui-fabric-react && npm run update-snapshots"
   },
   "license": "MIT",
   "devDependencies": {
-    "@microsoft/rush": "4.1.0"
+    "@microsoft/rush": "4.3.0"
   }
 }
diff --git a/packages/example-app-base/CHANGELOG.json b/packages/example-app-base/CHANGELOG.json
index 7dd97650925ab..5396b1ccc87c6 100644
--- a/packages/example-app-base/CHANGELOG.json
+++ b/packages/example-app-base/CHANGELOG.json
@@ -1,6 +1,44 @@
 {
   "name": "@uifabric/example-app-base",
   "entries": [
+    {
+      "version": "5.3.0",
+      "tag": "@uifabric/example-app-base_v5.3.0",
+      "date": "Fri, 02 Mar 2018 11:25:35 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Christian Gonzalez <christianjordangonzalez@gmail.com>",
+            "commit": "77c1e54e140be51f9c7f252748bb5f868f957919",
+            "comment": "Upgrade to TypeScript 2.7.2"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.13.0 <6.0.0` to `>=5.14.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.2.2",
+      "tag": "@uifabric/example-app-base_v5.2.2",
+      "date": "Wed, 21 Feb 2018 11:12:11 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "51d47a80898d9834d40205274268e60730f306a1",
+            "comment": "Tweaking css for example pages."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.12.0 <6.0.0` to `>=5.12.1 <6.0.0`"
+          }
+        ]
+      }
+    },
     {
       "version": "5.2.1",
       "tag": "@uifabric/example-app-base_v5.2.1",
diff --git a/packages/example-app-base/CHANGELOG.md b/packages/example-app-base/CHANGELOG.md
index 5d7c957178263..f876906e5f52d 100644
--- a/packages/example-app-base/CHANGELOG.md
+++ b/packages/example-app-base/CHANGELOG.md
@@ -1,6 +1,20 @@
 # Change Log - @uifabric/example-app-base
 
-This log was last generated on Mon, 22 Jan 2018 11:14:27 GMT and should not be manually modified.
+This log was last generated on Fri, 02 Mar 2018 11:25:35 GMT and should not be manually modified.
+
+## 5.3.0
+Fri, 02 Mar 2018 11:25:35 GMT
+
+### Minor changes
+
+- Upgrade to TypeScript 2.7.2
+
+## 5.2.2
+Wed, 21 Feb 2018 11:12:11 GMT
+
+### Patches
+
+- Tweaking css for example pages.
 
 ## 5.2.1
 Mon, 22 Jan 2018 11:14:27 GMT
diff --git a/packages/example-app-base/package.json b/packages/example-app-base/package.json
index 2bf696bc634db..dd2ecde9867a2 100644
--- a/packages/example-app-base/package.json
+++ b/packages/example-app-base/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uifabric/example-app-base",
-  "version": "5.2.1",
+  "version": "5.3.0",
   "description": "Office UI Fabric example app base utilities for building example sites.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -32,8 +32,8 @@
     "react-dom": "^0.14.9 || ^15.0.1-0 || ^16.0.0-0"
   },
   "dependencies": {
-    "@uifabric/styling": ">=5.17.0 <6.0.0",
-    "@uifabric/utilities": ">=5.9.0 <6.0.0",
+    "@uifabric/styling": ">=5.19.1 <6.0.0",
+    "@uifabric/utilities": ">=5.18.2 <6.0.0",
     "highlight.js": "^9.12.0",
     "office-ui-fabric-react": ">=5.1.0 <6.0.0",
     "tslib": "^1.7.1"
diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss b/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss
index d7ef28480b82e..9e4557531f4f9 100644
--- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss
+++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss
@@ -11,6 +11,7 @@ $dontColor: #A61E22;
 
   .ComponentPage {
     background-color: $ms-color-white;
+    overflow: hidden;
   }
 
   .ComponentPage-header {
diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx
index 8461dfeb7d4fa..133752d29f0fd 100644
--- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx
+++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.tsx
@@ -6,6 +6,7 @@ import {
 import {
   Link
 } from 'office-ui-fabric-react/lib/Link';
+import { MessageBar } from 'office-ui-fabric-react/lib/MessageBar';
 import './ComponentPage.scss';
 
 export interface IComponentPageSection {
@@ -28,7 +29,9 @@ export interface IComponentPageProps {
   areBadgesVisible?: boolean;
   className?: string;
   componentStatus?: JSX.Element;
-  otherSections?: [IComponentPageSection];
+  otherSections?: IComponentPageSection[];
+  allowNativeProps?: boolean | string;
+  nativePropsElement?: string | string[] | undefined;
 }
 
 export class ComponentPage extends React.Component<IComponentPageProps, {}> {
@@ -148,11 +151,43 @@ export class ComponentPage extends React.Component<IComponentPageProps, {}> {
     }
   }
 
+  private _getNativePropsInfo(): JSX.Element | undefined {
+    if (this.props.allowNativeProps) {
+      let elementString: string | string[] | JSX.Element = this.props.nativePropsElement || 'div',
+        componentString: JSX.Element | undefined;
+      if (typeof elementString === 'object' && elementString.length > 1) {
+        const elementArr = elementString.slice();
+        for (let _i = 0; _i < elementArr.length; _i++) {
+          if (_i === 0) {
+            elementString = <><code>{ '<' }{ elementArr[_i] }{ '>' }</code></>;
+          } else {
+            elementString = <>{ elementString } and <code>{ '<' }{ elementArr[_i] }{ '>' }</code></>;
+          }
+        }
+        elementString = <>{ elementString } tags</>;
+      } else {
+        elementString = <><code>{ '<' }{ elementString }{ '>' }</code> tag</>;
+      }
+
+      if (typeof this.props.allowNativeProps === 'string') {
+        componentString = <> <code>{ this.props.allowNativeProps }</code></>;
+      }
+
+      return (
+        <MessageBar>
+          <strong>Native Props Allowed{ componentString }</strong> - all HTML attributes native to the { elementString },
+          including all aria and custom data attributes, can be applied as native props on{ componentString || <> this component</> }.
+        </MessageBar>
+      );
+    }
+  }
+
   private _getPropertiesTable(): JSX.Element | undefined {
     if (this.props.propertiesTables) {
       return (
         <div className='ComponentPage-implementationSection'>
           <h2 className='ComponentPage-subHeading' id='Implementation'>Implementation</h2>
+          { this._getNativePropsInfo() }
           { this.props.propertiesTables }
         </div>
       );
diff --git a/packages/example-app-base/src/components/ExampleCard/ExampleCard.scss b/packages/example-app-base/src/components/ExampleCard/ExampleCard.scss
index 1446d102617ee..b20740c108081 100644
--- a/packages/example-app-base/src/components/ExampleCard/ExampleCard.scss
+++ b/packages/example-app-base/src/components/ExampleCard/ExampleCard.scss
@@ -57,7 +57,7 @@
     max-height: 80vh;
     overflow-x: hidden;
     overflow-y: auto;
-    padding: 20px 0;
+    padding: 20px 4px;
     position: relative;
   }
 
diff --git a/packages/example-app-base/src/components/Header/Header.tsx b/packages/example-app-base/src/components/Header/Header.tsx
index 4ad1bd3331cfc..5e75803c20ae4 100644
--- a/packages/example-app-base/src/components/Header/Header.tsx
+++ b/packages/example-app-base/src/components/Header/Header.tsx
@@ -125,7 +125,7 @@ export class Header extends React.Component<IHeaderProps, IHeaderState> {
     return [{
       key: 'isRTL',
       name: `Render in ${this._isRTLEnabled ? 'LTR' : 'RTL'}`,
-      icon: 'Settings',
+      iconProps: { iconName: 'Settings' },
       onClick: this._onRTLToggled
     }];
   }
diff --git a/packages/example-app-base/src/components/Highlight/Highlight.tsx b/packages/example-app-base/src/components/Highlight/Highlight.tsx
index bec5eb68d3d58..c11c2a5993fd4 100644
--- a/packages/example-app-base/src/components/Highlight/Highlight.tsx
+++ b/packages/example-app-base/src/components/Highlight/Highlight.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { registerLanguage, highlightBlock } from 'highlight.js';
 import * as javascript from 'highlight.js/lib/languages/javascript';
 import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
+import { createRef } from '@uifabric/utilities/lib/createRef';
 
 registerLanguage('javascript', javascript);
 
@@ -10,13 +11,13 @@ export interface IHighlightProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 
 export class Highlight extends BaseComponent<IHighlightProps, {}> {
-  private _codeElement: HTMLElement;
+  private _codeElement = createRef<HTMLElement>();
 
   public render(): JSX.Element {
     return (
       <pre>
         <code
-          ref={ this._resolveRef('_codeElement') }
+          ref={ this._codeElement }
           className='javascript'
         >
           { this.props.children }
@@ -30,6 +31,8 @@ export class Highlight extends BaseComponent<IHighlightProps, {}> {
   }
 
   public componentDidMount(): void {
-    highlightBlock(this._codeElement);
+    if (this._codeElement.value) {
+      highlightBlock(this._codeElement.value);
+    }
   }
 }
diff --git a/packages/example-app-base/tslint.json b/packages/example-app-base/tslint.json
index 621ee6ba04605..672d9eba8927e 100644
--- a/packages/example-app-base/tslint.json
+++ b/packages/example-app-base/tslint.json
@@ -2,5 +2,7 @@
   "extends": [
     "office-ui-fabric-react-tslint"
   ],
-  "rules": {}
+  "rules": {
+    "prefer-const": false
+  }
 }
\ No newline at end of file
diff --git a/packages/experiments/CHANGELOG.json b/packages/experiments/CHANGELOG.json
index 68522e4ca708d..7e959a5634a09 100644
--- a/packages/experiments/CHANGELOG.json
+++ b/packages/experiments/CHANGELOG.json
@@ -1,6 +1,254 @@
 {
   "name": "@uifabric/experiments",
   "entries": [
+    {
+      "version": "5.25.0",
+      "tag": "@uifabric/experiments_v5.25.0",
+      "date": "Mon, 12 Mar 2018 06:29:20 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Vitalie Braga <vitaliebraga@gmail.com>",
+            "commit": "8fefccb51072642d80de8370c550a3c49d49e45a",
+            "comment": "Adds a new Shimmer Component to experiments package."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.62.1 <6.0.0` to `>=5.63.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.24.1",
+      "tag": "@uifabric/experiments_v5.24.1",
+      "date": "Thu, 08 Mar 2018 11:27:23 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Kelsey Young <kelseyyoung4@gmail.com>",
+            "commit": "ddc5731a85effd6082a93fe3458528224674a70c",
+            "comment": "Add Keytip and KeytipLayer to experiments export"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.60.1 <6.0.0` to `>=5.61.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.24.0",
+      "tag": "@uifabric/experiments_v5.24.0",
+      "date": "Wed, 07 Mar 2018 11:16:50 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "amyngu <31973030+amyngu@users.noreply.github.com>",
+            "commit": "1b57c33b6ad1e00bdd844461fff3ba3f1acb94cc",
+            "comment": "add clearInput on BaseExtendedPicker"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.59.1 <6.0.0` to `>=5.60.1 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.23.1",
+      "tag": "@uifabric/experiments_v5.23.1",
+      "date": "Tue, 06 Mar 2018 02:06:59 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Kelsey Young <kelseyyoung4@gmail.com>",
+            "commit": "caad61fa2976154001c279b61ea0f597752f1115",
+            "comment": "Add Keytip and KeytipLayer to experiments export"
+          },
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "8a4dc859a5f8016b630220775caa98691ddf5345",
+            "comment": "Replaced PureComponent with Component to appease website's UHF react version."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.59.0 <6.0.0` to `>=5.59.1 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.23.0",
+      "tag": "@uifabric/experiments_v5.23.0",
+      "date": "Mon, 05 Mar 2018 11:16:58 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "5e24983e16790428d43d3c8252f361bc32c7f99f",
+            "comment": "Converting Image SCSS to MergeStyles step 2 - style conversion (snapshots updated)"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.58.0 <6.0.0` to `>=5.59.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.22.0",
+      "tag": "@uifabric/experiments_v5.22.0",
+      "date": "Fri, 02 Mar 2018 11:25:35 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "amyngu <31973030+amyngu@users.noreply.github.com>",
+            "commit": "1340339d7c62eeb1b526f08d9edbd7fe44b398f3",
+            "comment": "BaseExtendedPicker: Create component to wrap the rendered item, so users get contextual menu if certain props are present, get rid of loading state, fix autofocus on input after suggestion selection"
+          }
+        ],
+        "patch": [
+          {
+            "author": "Kelsey Young <kelseyyoung4@gmail.com>",
+            "commit": "44ca7b84a94649581e68a693971891fb1a834720",
+            "comment": "Add initial set of Keytip work"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.57.0 <6.0.0` to `>=5.58.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/icons\" from `>=5.4.2 <6.0.0` to `>=5.5.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/example-app-base\" from `>=5.2.2 <6.0.0` to `>=5.3.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.21.0",
+      "tag": "@uifabric/experiments_v5.21.0",
+      "date": "Fri, 16 Feb 2018 11:23:28 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "amyngu <31973030+amyngu@users.noreply.github.com>",
+            "commit": "01b3c8a05ea5c33bd1a12bda479f7587f02eb8eb",
+            "comment": "Hook up onPaste for BaseExtendedPicker"
+          }
+        ],
+        "minor": [
+          {
+            "author": "John Miller <rubixws@gmail.com>",
+            "commit": "44b167af31b9b6dd079359209f101f1af10762a5",
+            "comment": "Removing Coachmark"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.50.0 <6.0.0` to `>=5.51.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.20.0",
+      "tag": "@uifabric/experiments_v5.20.0",
+      "date": "Wed, 14 Feb 2018 22:10:49 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "amyngu <31973030+amyngu@users.noreply.github.com>",
+            "commit": "cdd6bafa27a6514e51ffe816ebb89b8a71b63a94",
+            "comment": "Use new \"use current input\" command in Suggestions"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.49.3 <6.0.0` to `>=5.50.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.19.0",
+      "tag": "@uifabric/experiments_v5.19.0",
+      "date": "Wed, 07 Feb 2018 11:23:59 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Thomas Michon <thomas@michon.com>",
+            "commit": "a91d1e819adc9c9b7973fc6fce0a9cd3a8c2ab4a",
+            "comment": "Added a fillHorizontal mode to TilesList"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.47.0 <6.0.0` to `>=5.48.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.18.0",
+      "tag": "@uifabric/experiments_v5.18.0",
+      "date": "Tue, 06 Feb 2018 11:14:36 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Jon Schectman <joschect@microsoft.com>",
+            "commit": "92c237d5804d8864ed44310ecb5ed93e835554e7",
+            "comment": "BasePicker: Use correct autofillnow"
+          }
+        ],
+        "minor": [
+          {
+            "author": "amyngu <31973030+amyngu@users.noreply.github.com>",
+            "commit": "36c24d4e085515a0d74f2eb1b1cafd847af67667",
+            "comment": "change persona pill css"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.45.3 <6.0.0` to `>=5.47.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.17.0",
+      "tag": "@uifabric/experiments_v5.17.0",
+      "date": "Fri, 02 Feb 2018 11:24:16 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "amyngu <31973030+amyngu@users.noreply.github.com>",
+            "commit": "83be28cba3b75cf3db87c21da190f2247f4bc33e",
+            "comment": "allow editing of selected items in selected people list"
+          }
+        ],
+        "patch": [
+          {
+            "author": "lejimsft <32402358+lejimsft@users.noreply.github.com>",
+            "commit": "1b709bc84a01334f990fd6474d9fba0a07dbe61d",
+            "comment": "consume BlockedSite icon for malware detected signal"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"office-ui-fabric-react\" from `>=5.45.2 <6.0.0` to `>=5.45.3 <6.0.0`"
+          }
+        ]
+      }
+    },
     {
       "version": "5.16.1",
       "tag": "@uifabric/experiments_v5.16.1",
diff --git a/packages/experiments/CHANGELOG.md b/packages/experiments/CHANGELOG.md
index dbda5316b63fd..77aa23e42001e 100644
--- a/packages/experiments/CHANGELOG.md
+++ b/packages/experiments/CHANGELOG.md
@@ -1,6 +1,100 @@
 # Change Log - @uifabric/experiments
 
-This log was last generated on Wed, 31 Jan 2018 11:11:59 GMT and should not be manually modified.
+This log was last generated on Mon, 12 Mar 2018 06:29:20 GMT and should not be manually modified.
+
+## 5.25.0
+Mon, 12 Mar 2018 06:29:20 GMT
+
+### Minor changes
+
+- Adds a new Shimmer Component to experiments package.
+
+## 5.24.1
+Thu, 08 Mar 2018 11:27:23 GMT
+
+### Patches
+
+- Add Keytip and KeytipLayer to experiments export
+
+## 5.24.0
+Wed, 07 Mar 2018 11:16:50 GMT
+
+### Minor changes
+
+- add clearInput on BaseExtendedPicker
+
+## 5.23.1
+Tue, 06 Mar 2018 02:06:59 GMT
+
+### Patches
+
+- Add Keytip and KeytipLayer to experiments export
+- Replaced PureComponent with Component to appease website's UHF react version.
+
+## 5.23.0
+Mon, 05 Mar 2018 11:16:58 GMT
+
+### Minor changes
+
+- Converting Image SCSS to MergeStyles step 2 - style conversion (snapshots updated)
+
+## 5.22.0
+Fri, 02 Mar 2018 11:25:35 GMT
+
+### Minor changes
+
+- BaseExtendedPicker: Create component to wrap the rendered item, so users get contextual menu if certain props are present, get rid of loading state, fix autofocus on input after suggestion selection
+
+### Patches
+
+- Add initial set of Keytip work
+
+## 5.21.0
+Fri, 16 Feb 2018 11:23:28 GMT
+
+### Minor changes
+
+- Removing Coachmark
+
+### Patches
+
+- Hook up onPaste for BaseExtendedPicker
+
+## 5.20.0
+Wed, 14 Feb 2018 22:10:49 GMT
+
+### Minor changes
+
+- Use new "use current input" command in Suggestions
+
+## 5.19.0
+Wed, 07 Feb 2018 11:23:59 GMT
+
+### Minor changes
+
+- Added a fillHorizontal mode to TilesList
+
+## 5.18.0
+Tue, 06 Feb 2018 11:14:36 GMT
+
+### Minor changes
+
+- change persona pill css
+
+### Patches
+
+- BasePicker: Use correct autofillnow
+
+## 5.17.0
+Fri, 02 Feb 2018 11:24:16 GMT
+
+### Minor changes
+
+- allow editing of selected items in selected people list
+
+### Patches
+
+- consume BlockedSite icon for malware detected signal
 
 ## 5.16.1
 Wed, 31 Jan 2018 11:11:59 GMT
diff --git a/packages/experiments/package.json b/packages/experiments/package.json
index 54932f82bea6f..a709e423813d6 100644
--- a/packages/experiments/package.json
+++ b/packages/experiments/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uifabric/experiments",
-  "version": "5.16.1",
+  "version": "5.25.0",
   "description": "Experimental React components for building experiences for Office 365.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -29,8 +29,8 @@
     "@types/enzyme": "3.1.5",
     "@types/enzyme-adapter-react-16": "1.0.1",
     "@types/webpack-env": "1.13.0",
-    "@uifabric/example-app-base": ">=5.2.1 <6.0.0",
-    "@uifabric/file-type-icons": ">=0.3.0 <1.0.0",
+    "@uifabric/example-app-base": ">=5.3.0 <6.0.0",
+    "@uifabric/file-type-icons": ">=0.5.0 <1.0.0",
     "@uifabric/jest-serializer-merge-styles": ">=5.1.0 <6.0.0",
     "es6-weak-map": "^2.0.2",
     "enzyme": "^3.2.0",
@@ -44,8 +44,8 @@
   },
   "dependencies": {
     "@microsoft/load-themed-styles": "^1.7.13",
-    "office-ui-fabric-react": ">=5.45.1 <6.0.0",
-    "@uifabric/icons": ">=5.4.1 <6.0.0",
+    "office-ui-fabric-react": ">=5.64.3 <6.0.0",
+    "@uifabric/icons": ">=5.6.0 <6.0.0",
     "prop-types": "^15.5.10",
     "tslib": "^1.7.1"
   },
diff --git a/packages/experiments/src/Keytip.ts b/packages/experiments/src/Keytip.ts
new file mode 100644
index 0000000000000..a1243d8c2ad1a
--- /dev/null
+++ b/packages/experiments/src/Keytip.ts
@@ -0,0 +1,3 @@
+export * from './components/Keytip/index';
+export * from './utilities/keytip/index';
+export * from './utilities/keysequence/index';
\ No newline at end of file
diff --git a/packages/experiments/src/KeytipLayer.ts b/packages/experiments/src/KeytipLayer.ts
new file mode 100644
index 0000000000000..39e83ed745652
--- /dev/null
+++ b/packages/experiments/src/KeytipLayer.ts
@@ -0,0 +1 @@
+export * from './components/KeytipLayer/index';
\ No newline at end of file
diff --git a/packages/experiments/src/PositioningContainer.ts b/packages/experiments/src/PositioningContainer.ts
deleted file mode 100644
index ddecfbb4488e6..0000000000000
--- a/packages/experiments/src/PositioningContainer.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './components/PositioningContainer/index';
\ No newline at end of file
diff --git a/packages/experiments/src/Shimmer.ts b/packages/experiments/src/Shimmer.ts
new file mode 100644
index 0000000000000..aa038dd0c57a2
--- /dev/null
+++ b/packages/experiments/src/Shimmer.ts
@@ -0,0 +1 @@
+export * from './components/Shimmer/index';
\ No newline at end of file
diff --git a/packages/experiments/src/Utilities.ts b/packages/experiments/src/Utilities.ts
index 4661a875ed729..cce14ea6abb0f 100644
--- a/packages/experiments/src/Utilities.ts
+++ b/packages/experiments/src/Utilities.ts
@@ -1 +1 @@
-export * from 'office-ui-fabric-react/lib/Utilities';
+export * from 'office-ui-fabric-react/lib/Utilities';
\ No newline at end of file
diff --git a/packages/experiments/src/components/Coachmark/Coachmark.tsx b/packages/experiments/src/components/Coachmark/Coachmark.tsx
deleted file mode 100644
index 8e41d4eeb3374..0000000000000
--- a/packages/experiments/src/components/Coachmark/Coachmark.tsx
+++ /dev/null
@@ -1,230 +0,0 @@
-// Utilities
-import * as React from 'react';
-import { BaseComponent, classNamesFunction } from '../../Utilities';
-
-// Component Dependencies
-import { PositioningContainer } from '../PositioningContainer/PositioningContainer';
-
-// Coachmark
-import { ICoachmarkProps } from './Coachmark.types';
-import { getStyles, ICoachmarkStyles, ICoachmarkStyleProps } from './Coachmark.styles';
-
-const getClassNames = classNamesFunction<ICoachmarkStyleProps, ICoachmarkStyles>();
-
-/**
- * An interface for the cached dimensions of entity inner host.
- */
-export interface IEntityRect {
-  width: number;
-  height: number;
-}
-
-export interface ICoachmarkState {
-  /**
-   * Is the Coachmark currently collapsed into
-   * a tear drop shape
-   */
-  collapsed: boolean;
-
-  /**
-   * Enables/Disables the beacon that radiates
-   * from the center of the coachmark.
-   */
-  isBeaconAnimating: boolean;
-
-  /**
-   * Is the teaching bubble currently retreiving the
-   * original dimensions of the hosted entity.
-   */
-  isMeasuring: boolean;
-
-  /**
-   * Cached width and height of _entityInnerHostElement
-   */
-  entityInnerHostRect: IEntityRect;
-
-  /**
-   * Is the mouse in proximity of the default target element
-   */
-  isMouseInProximity: boolean;
-}
-
-export class Coachmark extends BaseComponent<ICoachmarkProps, ICoachmarkState> {
-  public static defaultProps: Partial<ICoachmarkProps> = {
-    collapsed: true,
-    mouseProximityOffset: 100
-  };
-
-  /**
-   * The cached HTMLElement reference to the Entity Inner Host
-   * element.
-   */
-  private _entityInnerHostElement: HTMLElement;
-  private _translateAnimationContainer: HTMLElement;
-
-  constructor(props: ICoachmarkProps) {
-    super(props);
-
-    // Set defaults for state
-    this.state = {
-      collapsed: props.collapsed!,
-      isBeaconAnimating: true,
-      isMeasuring: true,
-      entityInnerHostRect: {
-        width: 0,
-        height: 0
-      },
-      isMouseInProximity: true
-    };
-  }
-
-  public render(): JSX.Element {
-    let {
-      children
-    } = this.props;
-
-    const classNames = getClassNames(getStyles, {
-      collapsed: this.state.collapsed,
-      isBeaconAnimating: this.state.isBeaconAnimating,
-      isMeasuring: this.state.isMeasuring,
-      entityHostHeight: this.state.entityInnerHostRect.height + 'px',
-      entityHostWidth: this.state.entityInnerHostRect.width + 'px'
-    });
-
-    return (
-      <PositioningContainer
-        target={ this.props.target }
-      >
-        <div
-          className={ classNames.root }
-        >
-          <div className={ classNames.pulsingBeacon } />
-          <div
-            className={ classNames.translateAnimationContainer }
-            ref={ this._resolveRef('_translateAnimationContainer') }
-          >
-            <div
-              className={ classNames.scaleAnimationLayer }
-              ref={ this._resolveRef('_scaleAnimationContainer') }
-            >
-              <div
-                className={ classNames.rotateAnimationLayer }
-                ref={ this._resolveRef('_rotateAnimationContainer') }
-              >
-                <div
-                  className={ classNames.entityHost }
-                  ref={ this._resolveRef('_entityHost') }
-                >
-                  <div
-                    className={ classNames.entityInnerHost }
-                    ref={ this._resolveRef('_entityInnerHostElement') }
-                  >
-                    { children }
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </PositioningContainer>
-    );
-  }
-
-  public componentWillReceiveProps(newProps: ICoachmarkProps): void {
-    if (this.props.collapsed && !newProps.collapsed) {
-      // The coachmark is about to open
-      this._openCoachmark();
-    }
-  }
-
-  public componentDidMount(): void {
-    // If we have already accessed the width and height
-    // We do not wan't to do it again.
-    if (this.state.isMeasuring) {
-      this._async.setTimeout((): void => {
-        if ((this.state.entityInnerHostRect.width + this.state.entityInnerHostRect.width) === 0) {
-          this.setState({
-            isMeasuring: false,
-            entityInnerHostRect: {
-              width: this._entityInnerHostElement.offsetWidth,
-              height: this._entityInnerHostElement.offsetHeight
-            }
-          });
-
-          this.forceUpdate();
-        }
-
-        // Initialize element in proximity now that initial
-        // measurements have been taken
-        this._isElementInProximity(this._entityInnerHostElement);
-      }, 10);
-    }
-  }
-
-  private _openCoachmark(): void {
-    this.setState({
-      collapsed: false
-    });
-
-    this._translateAnimationContainer.addEventListener('animationstart', (): void => {
-      if (this.props.onAnimationOpenStart) {
-        this.props.onAnimationOpenStart();
-      }
-    });
-
-    this._translateAnimationContainer.addEventListener('animationend', (): void => {
-      if (this.props.onAnimationOpenEnd) {
-        this.props.onAnimationOpenEnd();
-      }
-    });
-  }
-
-  private _isElementInProximity(targetElement: HTMLElement, mouseProximityOffset: number = 0): void {
-    /**
-     * An array of cached ids returned when setTimeout runs during
-     * the window resize event trigger.
-     */
-    let timeoutIds: number[] = [];
-
-    /**
-     * The target element the mouse would be in
-     * proximity to
-     */
-    let targetElementRect: ClientRect = targetElement.getBoundingClientRect();
-
-    // When the window resizes we want to async
-    // get the bounding client rectangle.
-    // Every time the event is triggered we wan't to
-    // setTimeout and then clear any previous instances
-    // of setTimeout.
-    this._events.on(window, 'resize', (): void => {
-      timeoutIds.forEach((value: number): void => {
-        clearInterval(value);
-      });
-
-      timeoutIds.push(this._async.setTimeout((): void => {
-        targetElementRect = targetElement.getBoundingClientRect();
-      }, 100));
-    });
-
-    // Everytime the document's mouse move is triggered
-    // we want to check if inside of an element and
-    // set the state with the result.
-    this._events.on(document, 'mousemove', (e: MouseEvent) => {
-      let mouseY = e.pageY;
-      let mouseX = e.pageX;
-      let isMouseInProximity = this._isInsideElement(targetElementRect, mouseX, mouseY);
-
-      if (isMouseInProximity !== this.state.isMouseInProximity) {
-        this.setState({
-          isMouseInProximity: isMouseInProximity
-        });
-      }
-    });
-  }
-
-  private _isInsideElement(elementRect: ClientRect, mouseX: number, mouseY: number, mouseProximityOffset: number = 0): boolean {
-    return mouseX > (elementRect.left - mouseProximityOffset) && mouseX < ((elementRect.left + elementRect.width) + mouseProximityOffset) &&
-      mouseY > (elementRect.top - mouseProximityOffset) && mouseY < ((elementRect.top + elementRect.height) + mouseProximityOffset);
-  }
-}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Coachmark/Coachmark.types.ts b/packages/experiments/src/components/Coachmark/Coachmark.types.ts
deleted file mode 100644
index 943e5e4ea562b..0000000000000
--- a/packages/experiments/src/components/Coachmark/Coachmark.types.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-import * as React from 'react';
-import { Coachmark } from './Coachmark';
-import { ICoachmarkStyles, ICoachmarkStyleProps } from './Coachmark.styles';
-import { IPositioningContainerTypes } from '../PositioningContainer/PositioningContainer.types';
-import { IPoint, IStyleFunction } from '../../Utilities';
-
-export interface ICoachmark {
-}
-
-export interface ICoachmarkProps extends React.Props<Coachmark> {
-  /**
-  * All props for your component are to be defined here.
-  */
-  componentRef?: (component: ICoachmark) => void;
-
-  /**
-   * Get styles method
-   */
-  getStyles?: IStyleFunction<ICoachmarkStyleProps, ICoachmarkStyles>;
-
-  /**
-   * The target that the TeachingBubble should try to position itself based on.
-   * It can be either an HTMLElement a querySelector string of a valid HTMLElement
-   * or a MouseEvent. If MouseEvent is given then the origin point of the event will be used.
-   */
-  target?: HTMLElement | string | MouseEvent | IPoint | null;
-
-  positioningContainerProps?: IPositioningContainerTypes;
-
-  /**
-   * Is the Coachmark expanded
-   * @default true
-   */
-  collapsed?: boolean;
-
-  /**
-   * The distance in pixels the mouse is located
-   * before opening up the coachmark.
-   * @default 100
-   */
-  mouseProximityOffset?: number;
-
-  /**
-   * Callback when the opening animation begins
-   */
-  onAnimationOpenStart?: () => void;
-
-  /**
-   * Callback when the opening animation completes
-   */
-  onAnimationOpenEnd?: () => void;
-}
diff --git a/packages/experiments/src/components/CommandBar/CommandBar.base.tsx b/packages/experiments/src/components/CommandBar/CommandBar.base.tsx
index 150dfbf4ed8f3..ebebfacc0fa62 100644
--- a/packages/experiments/src/components/CommandBar/CommandBar.base.tsx
+++ b/packages/experiments/src/components/CommandBar/CommandBar.base.tsx
@@ -17,7 +17,8 @@ import { OverflowSet, IOverflowSet } from 'office-ui-fabric-react/lib/OverflowSe
 import { ResizeGroup, IResizeGroup } from 'office-ui-fabric-react/lib/ResizeGroup';
 import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
 import {
-  classNamesFunction
+  classNamesFunction,
+  createRef
 } from '../../Utilities';
 
 const getClassNames = classNamesFunction<ICommandBarStyleProps, ICommandBarStyles>();
@@ -54,8 +55,8 @@ export class CommandBarBase extends BaseComponent<ICommandBarProps, {}> implemen
     elipisisIconProps: { iconName: 'More' }
   };
 
-  private _overflowSet: IOverflowSet;
-  private _resizeGroup: IResizeGroup;
+  private _overflowSet = createRef<IOverflowSet>();
+  private _resizeGroup = createRef<IResizeGroup>();
   private _classNames: {[key in keyof ICommandBarStyles]: string };
 
   public render(): JSX.Element {
@@ -88,7 +89,7 @@ export class CommandBarBase extends BaseComponent<ICommandBarProps, {}> implemen
 
     return (
       <ResizeGroup
-        componentRef={ this._resolveRef('_resizeGroup') }
+        componentRef={ this._resizeGroup }
         className={ className }
         data={ commandBardata }
         onReduceData={ onReduceData }
@@ -100,7 +101,7 @@ export class CommandBarBase extends BaseComponent<ICommandBarProps, {}> implemen
 
               {/*Primary Items*/ }
               <OverflowSet
-                componentRef={ this._resolveRef('_overflowSet') }
+                componentRef={ this._overflowSet }
                 className={ css(this._classNames.primarySet) }
                 items={ data.primaryItems }
                 overflowItems={ data.overflowItems.length ? data.overflowItems : undefined }
@@ -134,11 +135,13 @@ export class CommandBarBase extends BaseComponent<ICommandBarProps, {}> implemen
   }
 
   public focus(): void {
-    this._overflowSet.focus();
+    const { value: overflowSet } = this._overflowSet;
+
+    overflowSet && overflowSet.focus();
   }
 
   public remeasure(): void {
-    this._resizeGroup.remeasure();
+    this._resizeGroup.value && this._resizeGroup.value.remeasure();
   }
 
   private _computeCacheKey(primaryItems: ICommandBarItemProps[], farItems: ICommandBarItemProps[], overflow: boolean): string {
@@ -235,6 +238,6 @@ export class CommandBarBase extends BaseComponent<ICommandBarProps, {}> implemen
   @autobind
   private _onRenderButton(props: ICommandBarItemProps): JSX.Element {
     // tslint:disable-next-line:no-any
-    return <CommandBarButton {...props as any} />;
+    return <CommandBarButton { ...props as any } />;
   }
 }
diff --git a/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap b/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
index 75d5b04109162..31a3fe9326de1 100644
--- a/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
+++ b/packages/experiments/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
@@ -2,10 +2,21 @@
 
 exports[`CommandBar renders commands correctly 1`] = `
 <div
-  className="ms-ResizeGroup TestClassName"
+  className=
+      ms-ResizeGroup
+      TestClassName
+      {
+        display: block;
+        position: relative;
+      }
 >
   <div
-    className=""
+    style={
+      Object {
+        "position": "fixed",
+        "visibility": "hidden",
+      }
+    }
   >
     <div
       className=
@@ -59,7 +70,7 @@ exports[`CommandBar renders commands correctly 1`] = `
                   color: #333333;
                   cursor: pointer;
                   display: inline-block;
-                  font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
                   height: 100%;
@@ -160,7 +171,7 @@ exports[`CommandBar renders commands correctly 1`] = `
                   color: #333333;
                   cursor: pointer;
                   display: inline-block;
-                  font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
                   height: 100%;
diff --git a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tests.tsx b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tests.tsx
new file mode 100644
index 0000000000000..2e87311114a5a
--- /dev/null
+++ b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tests.tsx
@@ -0,0 +1,174 @@
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import * as ReactTestUtils from 'react-dom/test-utils';
+/* tslint:enable:no-unused-variable */
+import * as renderer from 'react-test-renderer';
+
+import { IBaseExtendedPickerProps } from './BaseExtendedPicker.types';
+import { BaseExtendedPicker } from './BaseExtendedPicker';
+import { SuggestionsController } from 'office-ui-fabric-react/lib/Pickers';
+import { IBaseFloatingPickerProps, BaseFloatingPicker } from '../FloatingPicker';
+import { IBaseSelectedItemsListProps, ISelectedItemProps, BaseSelectedItemsList } from '../SelectedItemsList';
+import { KeyCodes } from '../../Utilities';
+
+function onResolveSuggestions(text: string): ISimple[] {
+  return [
+    'black',
+    'blue',
+    'brown',
+    'cyan',
+    'green',
+    'magenta',
+    'mauve',
+    'orange',
+    'pink',
+    'purple',
+    'red',
+    'rose',
+    'violet',
+    'white',
+    'yellow'
+  ].filter((tag: string) => tag.toLowerCase().indexOf(text.toLowerCase()) === 0).map(((item: string) => ({ key: item, name: item })));
+}
+
+const BasePickerWithType = BaseFloatingPicker as new (props: IBaseFloatingPickerProps<ISimple>)
+  => BaseFloatingPicker<ISimple, IBaseFloatingPickerProps<ISimple>>;
+
+const BaseSelectedItemsListWithType = BaseSelectedItemsList as new (props: IBaseSelectedItemsListProps<ISimple>)
+  => BaseSelectedItemsList<ISimple, IBaseSelectedItemsListProps<ISimple>>;
+
+const basicSuggestionRenderer = (props: ISimple) => {
+  return <div> { props.name } </div>;
+};
+
+const basicItemRenderer = (props: ISelectedItemProps<ISimple>) => {
+  return <div> { props.name } </div>;
+};
+
+const basicRenderFloatingPicker = (props: IBaseFloatingPickerProps<ISimple>) => {
+  return <BasePickerWithType { ...props } />;
+};
+
+const basicRenderSelectedItemsList = (props: IBaseSelectedItemsListProps<ISimple>) => {
+  return <BaseSelectedItemsListWithType />;
+};
+
+const floatingPickerProps = {
+  onResolveSuggestions: onResolveSuggestions,
+  onRenderSuggestionsItem: basicSuggestionRenderer,
+  suggestionsController: new SuggestionsController<ISimple>()
+};
+
+const selectedItemsListProps: IBaseSelectedItemsListProps<ISimple> = {
+  onRenderItem: basicItemRenderer
+};
+
+export interface ISimple {
+  key: string;
+  name: string;
+}
+
+export type TypedBaseExtendedPicker = BaseExtendedPicker<ISimple, IBaseExtendedPickerProps<ISimple>>;
+
+describe('Pickers', () => {
+  describe('BasePicker', () => {
+    const BaseExtendedPickerWithType = BaseExtendedPicker as new (props: IBaseExtendedPickerProps<ISimple>)
+      => BaseExtendedPicker<ISimple, IBaseExtendedPickerProps<ISimple>>;
+
+    it('renders BaseExtendedPicker correctly', () => {
+      const component = renderer.create(
+        <BaseExtendedPickerWithType
+          floatingPickerProps={ floatingPickerProps }
+          selectedItemsListProps={ selectedItemsListProps }
+          onRenderSelectedItems={ basicRenderSelectedItemsList }
+          onRenderFloatingPicker={ basicRenderFloatingPicker }
+        />
+      );
+      let tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('force resolves to the first suggestion', () => {
+      let root = document.createElement('div');
+      document.body.appendChild(root);
+
+      let picker: TypedBaseExtendedPicker = ReactDOM.render(
+        <BaseExtendedPickerWithType
+          floatingPickerProps={ floatingPickerProps }
+          selectedItemsListProps={ selectedItemsListProps }
+          onRenderSelectedItems={ basicRenderSelectedItemsList }
+          onRenderFloatingPicker={ basicRenderFloatingPicker }
+        />,
+        root
+      ) as TypedBaseExtendedPicker;
+
+      if (picker.inputElement) {
+        picker.inputElement.value = 'bl';
+      }
+
+      expect(picker.floatingPicker.suggestions.length).toBe(2);
+      expect(picker.floatingPicker.suggestions[0].name).toBe('black');
+
+      // Force resolve to the first suggestions
+      picker.floatingPicker.forceResolveSuggestion();
+      expect(picker.items.length).toBe(1);
+      expect(picker.items[0].name).toBe('black');
+
+      ReactDOM.unmountComponentAtNode(root);
+    });
+
+    it('Can hide and show picker', () => {
+      let root = document.createElement('div');
+      document.body.appendChild(root);
+
+      let picker: TypedBaseExtendedPicker = ReactDOM.render(
+        <BaseExtendedPickerWithType
+          floatingPickerProps={ floatingPickerProps }
+          selectedItemsListProps={ selectedItemsListProps }
+          onRenderSelectedItems={ basicRenderSelectedItemsList }
+          onRenderFloatingPicker={ basicRenderFloatingPicker }
+        />,
+        root
+      ) as TypedBaseExtendedPicker;
+
+      if (picker.inputElement) {
+        picker.inputElement.value = 'bl';
+      }
+
+      expect(picker.floatingPicker.isSuggestionsShown).toBeTruthy();
+      picker.floatingPicker.hidePicker();
+      expect(picker.floatingPicker.isSuggestionsShown).toBeFalsy();
+      picker.floatingPicker.showPicker();
+      expect(picker.floatingPicker.isSuggestionsShown).toBeTruthy();
+
+      ReactDOM.unmountComponentAtNode(root);
+    });
+
+    it('Completes the suggestion', () => {
+      let root = document.createElement('div');
+      document.body.appendChild(root);
+
+      let picker: TypedBaseExtendedPicker = ReactDOM.render(
+        <BaseExtendedPickerWithType
+          floatingPickerProps={ floatingPickerProps }
+          selectedItemsListProps={ selectedItemsListProps }
+          onRenderSelectedItems={ basicRenderSelectedItemsList }
+          onRenderFloatingPicker={ basicRenderFloatingPicker }
+        />,
+        root
+      ) as TypedBaseExtendedPicker;
+
+      if (picker.inputElement) {
+        picker.inputElement.value = 'bl';
+        ReactTestUtils.Simulate.keyDown(picker.inputElement, { which: KeyCodes.down });
+      }
+
+      picker.floatingPicker.completeSuggestion();
+      expect(picker.selectedItemsList.items.length).toBe(1);
+      expect(picker.selectedItemsList.items[0].name).toBe('blue');
+
+      ReactDOM.unmountComponentAtNode(root);
+    });
+  });
+});
diff --git a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx
index b02d495cb1d07..8268e739d052a 100644
--- a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx
+++ b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.tsx
@@ -9,7 +9,7 @@ import {
   FocusZone,
   FocusZoneDirection
 } from 'office-ui-fabric-react/lib/FocusZone';
-import { BaseAutoFill } from 'office-ui-fabric-react/lib/components/pickers/AutoFill/BaseAutoFill';
+import { Autofill } from 'office-ui-fabric-react/lib/components/Autofill/Autofill';
 import { IPickerItemProps, IInputProps } from 'office-ui-fabric-react/lib/Pickers';
 import * as stylesImport from './BaseExtendedPicker.scss';
 import { IBaseExtendedPickerProps, IBaseExtendedPicker } from './BaseExtendedPicker.types';
@@ -37,7 +37,7 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
   public selectedItemsList: BaseSelectedItemsList<T, IBaseSelectedItemsListProps<T>>;
 
   protected root: HTMLElement;
-  protected input: BaseAutoFill;
+  protected input: Autofill;
   protected focusZone: FocusZone;
   protected selection: Selection;
   protected floatingPickerProps: IBaseFloatingPickerProps<T>;
@@ -70,17 +70,24 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
   }
 
   public focus(): void {
-    console.log('extended picker focus');
     this.focusZone.focus();
   }
 
+  public clearInput(): void {
+    this.input.clear();
+  }
+
+  public get inputElement(): HTMLInputElement | null {
+    return this.input.inputElement;
+  }
+
   public render(): JSX.Element {
     let { suggestedDisplayValue } = this.state;
     let {
       className,
       inputProps,
       disabled
-        } = this.props;
+    } = this.props;
 
     return (
       <div
@@ -96,12 +103,11 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
           onKeyDown={ this.onBackspace }
           onCopy={ this.onCopy }
         >
-
           <SelectionZone selection={ this.selection } selectionMode={ SelectionMode.multiple }>
             <div className={ css('ms-BasePicker-text', styles.pickerText) } role={ 'list' }>
               { this.props.headerComponent }
               { this.renderSelectedItemsList() }
-              { this.canAddItems() && (<BaseAutoFill
+              { this.canAddItems() && (<Autofill
                 { ...inputProps as IInputProps }
                 className={ css('ms-BasePicker-input', styles.pickerInput) }
                 ref={ this._resolveRef('input') }
@@ -117,6 +123,7 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
                 role='combobox'
                 disabled={ disabled }
                 aria-controls='selected-suggestion-alert'
+                onPaste={ this.onPaste }
               />) }
             </div>
           </SelectionZone>
@@ -126,6 +133,7 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
     );
   }
 
+  @autobind
   protected onSelectionChange(): void {
     this.forceUpdate();
   }
@@ -177,7 +185,7 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
   }
 
   @autobind
-  protected onInputFocus(ev: React.FocusEvent<HTMLInputElement | BaseAutoFill>): void {
+  protected onInputFocus(ev: React.FocusEvent<HTMLInputElement | Autofill>): void {
     this.selectedItemsList.unselectAll();
     this.floatingPicker.showPicker();
 
@@ -194,7 +202,7 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
       return;
     }
     if (this.state.items.length && !this.input || !this.input.isValueSelected) {
-      if ((this.input as BaseAutoFill).cursorLocation === 0) {
+      if ((this.input as Autofill).cursorLocation === 0) {
         this.selectedItemsList.removeItemAt(this.items.length - 1);
         this._onSelectedItemsChanged();
       }
@@ -207,6 +215,15 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
     this.selectedItemsList.onCopy(ev);
   }
 
+  @autobind
+  protected onPaste(ev: React.ClipboardEvent<Autofill | HTMLInputElement>): void {
+    if (this.props.onPaste) {
+      let inputText = ev.clipboardData.getData('Text');
+      ev.preventDefault();
+      this.props.onPaste(inputText);
+    }
+  }
+
   @autobind
   protected _isFocusZoneInnerKeystroke(ev: React.KeyboardEvent<HTMLElement>): boolean {
     // If suggestions are shown let up/down keys control them, otherwise allow them through to control the focusZone.
@@ -229,13 +246,17 @@ export class BaseExtendedPicker<T, P extends IBaseExtendedPickerProps<T>> extend
   @autobind
   protected _onSuggestionSelected(item: T): void {
     this.selectedItemsList.addItems([item]);
+    if (this.props.onItemSelected) {
+      this.props.onItemSelected(item);
+    }
     this.input.clear();
 
     this.floatingPicker.hidePicker();
+    this.focus();
   }
 
   @autobind
   protected _onSelectedItemsChanged(): void {
-    this.input.focus();
+    this.focus();
   }
 }
\ No newline at end of file
diff --git a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.types.ts b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.types.ts
index 49b9a584262b8..df410ca4b822b 100644
--- a/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.types.ts
+++ b/packages/experiments/src/components/ExtendedPicker/BaseExtendedPicker.types.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { BaseAutoFill, IInputProps } from 'office-ui-fabric-react/lib/Pickers';
+import { Autofill } from 'office-ui-fabric-react/lib/Autofill';
+import { IInputProps } from 'office-ui-fabric-react/lib/Pickers';
 import { IBaseFloatingPickerProps } from '../../FloatingPicker';
 import { IBaseSelectedItemsListProps } from '../../SelectedItemsList';
 
@@ -41,12 +42,12 @@ export interface IBaseExtendedPickerProps<T> {
   /**
    * A callback for when the user put focus on the picker
    */
-  onFocus?: React.FocusEventHandler<HTMLInputElement | BaseAutoFill>;
+  onFocus?: React.FocusEventHandler<HTMLInputElement | Autofill>;
 
   /**
    * A callback for when the user moves the focus away from the picker
    */
-  onBlur?: React.FocusEventHandler<HTMLInputElement | BaseAutoFill>;
+  onBlur?: React.FocusEventHandler<HTMLInputElement | Autofill>;
 
   /**
    * ClassName for the picker.
@@ -74,7 +75,7 @@ export interface IBaseExtendedPickerProps<T> {
   selectedItemsListProps: IBaseSelectedItemsListProps<T>;
 
   /**
-   * AutoFill input native props
+   * Autofill input native props
    * @default undefined
    */
   inputProps?: IInputProps;
diff --git a/packages/experiments/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.tsx b/packages/experiments/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.tsx
index e09881c71fca5..11170195a87ee 100644
--- a/packages/experiments/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.tsx
+++ b/packages/experiments/src/components/ExtendedPicker/PeoplePicker/ExtendedPeoplePicker.tsx
@@ -1,19 +1,20 @@
 /* tslint:disable */
-import { IPickerItemProps, ValidationState } from 'office-ui-fabric-react/lib/Pickers';
+import { IPickerItemProps } from 'office-ui-fabric-react/lib/Pickers';
 /* tslint:enable */
 
 import { IExtendedPersonaProps } from '../../../SelectedItemsList';
+import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
 import './ExtendedPeoplePicker.scss';
 import { BaseExtendedPicker } from '../BaseExtendedPicker';
 import { IBaseExtendedPickerProps } from '../BaseExtendedPicker.types';
 
-export interface IPeoplePickerItemProps extends IPickerItemProps<IExtendedPersonaProps & { ValidationState: ValidationState }> {
+export interface IPeoplePickerItemProps extends IPickerItemProps<IExtendedPersonaProps> {
 }
 
-export interface IExtendedPeoplePickerProps extends IBaseExtendedPickerProps<IExtendedPersonaProps> {
+export interface IExtendedPeoplePickerProps extends IBaseExtendedPickerProps<IPersonaProps> {
 }
 
-export class BaseExtendedPeoplePicker extends BaseExtendedPicker<IExtendedPersonaProps, IExtendedPeoplePickerProps> {
+export class BaseExtendedPeoplePicker extends BaseExtendedPicker<IPersonaProps, IExtendedPeoplePickerProps> {
 }
 
 export class ExtendedPeoplePicker extends BaseExtendedPeoplePicker {
diff --git a/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx b/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx
index 719bac468612b..f54deb5ca5a35 100644
--- a/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx
+++ b/packages/experiments/src/components/ExtendedPicker/examples/ExtendedPeoplePicker.Basic.Example.tsx
@@ -7,14 +7,14 @@ import {
   autobind
 } from 'office-ui-fabric-react/lib/Utilities';
 import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
-import { IBasePickerSuggestionsProps, ValidationState, SuggestionsController } from 'office-ui-fabric-react/lib/Pickers';
+import { IBasePickerSuggestionsProps, SuggestionsController } from 'office-ui-fabric-react/lib/Pickers';
 import { ExtendedPeoplePicker } from '../PeoplePicker/ExtendedPeoplePicker';
 import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
 import { IPersonaWithMenu } from 'office-ui-fabric-react/lib/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.types';
 import { people, mru, groupOne, groupTwo } from './PeopleExampleData';
 import './ExtendedPeoplePicker.Basic.Example.scss';
 import { FloatingPeoplePicker, IBaseFloatingPickerProps } from '../../FloatingPicker';
-import { IBaseSelectedItemsListProps, IExtendedPersonaProps, ISelectedPeopleProps, SelectedPeopleList }
+import { IBaseSelectedItemsListProps, ISelectedPeopleProps, SelectedPeopleList, IExtendedPersonaProps }
   from '../../SelectedItemsList';
 
 export interface IPeoplePickerExampleState {
@@ -22,22 +22,12 @@ export interface IPeoplePickerExampleState {
   mostRecentlyUsed: IPersonaProps[];
 }
 
-const suggestionProps: IBasePickerSuggestionsProps = {
-  suggestionsHeaderText: 'Suggested People',
-  mostRecentlyUsedHeaderText: 'Suggested Contacts',
-  noResultsFoundText: 'No results found',
-  loadingText: 'Loading',
-  showRemoveButtons: true,
-  suggestionsAvailableAlertText: 'People Picker Suggestions available',
-  suggestionsContainerAriaLabel: 'Suggested contacts',
-  searchForMoreText: 'Search more',
-};
-
 // tslint:disable-next-line:no-any
 export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeoplePickerExampleState> {
   private _picker: ExtendedPeoplePicker;
-  private floatingPickerProps: IBaseFloatingPickerProps<IExtendedPersonaProps>;
-  private selectedItemsListProps: ISelectedPeopleProps;
+  private _floatingPickerProps: IBaseFloatingPickerProps<IPersonaProps>;
+  private _selectedItemsListProps: ISelectedPeopleProps;
+  private _suggestionProps: IBasePickerSuggestionsProps;
 
   constructor(props: {}) {
     super(props);
@@ -54,22 +44,39 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
       mostRecentlyUsed: mru,
     };
 
-    this.floatingPickerProps = {
-      suggestionsController: new SuggestionsController<IExtendedPersonaProps>(),
+    this._suggestionProps = {
+      suggestionsHeaderText: 'Suggested People',
+      mostRecentlyUsedHeaderText: 'Suggested Contacts',
+      noResultsFoundText: 'No results found',
+      loadingText: 'Loading',
+      showRemoveButtons: true,
+      suggestionsAvailableAlertText: 'People Picker Suggestions available',
+      suggestionsContainerAriaLabel: 'Suggested contacts',
+      searchForMoreText: 'Search more',
+      forceResolveText: 'Use this name',
+    };
+
+    this._floatingPickerProps = {
+      suggestionsController: new SuggestionsController<IPersonaProps>(),
       onResolveSuggestions: this._onFilterChanged,
       getTextFromItem: this._getTextFromItem,
-      pickerSuggestionsProps: suggestionProps,
+      pickerSuggestionsProps: this._suggestionProps,
       key: 'normal',
       onRemoveSuggestion: this._onRemoveSuggestion,
       onValidateInput: this._validateInput,
       onZeroQuerySuggestion: this._returnMostRecentlyUsed,
+      showForceResolve: this._shouldShowForceResolve,
     };
 
-    this.selectedItemsListProps = {
+    this._selectedItemsListProps = {
       onCopyItems: this._onCopyItems,
       onExpandGroup: this._onExpandItem,
       removeMenuItemText: 'Remove',
       copyMenuItemText: 'Copy name',
+      editMenuItemText: 'Edit',
+      getEditingItemText: this._getEditingItemText,
+      onRenderFloatingPicker: this._onRenderFloatingPicker,
+      floatingPickerProps: this._floatingPickerProps,
     };
   }
 
@@ -88,8 +95,8 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
   private _renderExtendedPicker(): JSX.Element {
     return (
       <ExtendedPeoplePicker
-        floatingPickerProps={ this.floatingPickerProps }
-        selectedItemsListProps={ this.selectedItemsListProps }
+        floatingPickerProps={ this._floatingPickerProps }
+        selectedItemsListProps={ this._selectedItemsListProps }
         onRenderFloatingPicker={ this._onRenderFloatingPicker }
         onRenderSelectedItems={ this._onRenderSelectedItems }
         className={ 'ms-PeoplePicker' }
@@ -109,12 +116,16 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
     return <div>TO:</div>;
   }
 
-  private _onRenderFloatingPicker(props: IBaseFloatingPickerProps<IExtendedPersonaProps>): JSX.Element {
-    return (<FloatingPeoplePicker {...props} />);
+  private _onRenderFloatingPicker(props: IBaseFloatingPickerProps<IPersonaProps>): JSX.Element {
+    return (<FloatingPeoplePicker { ...props } />);
   }
 
   private _onRenderSelectedItems(props: IBaseSelectedItemsListProps<IExtendedPersonaProps>): JSX.Element {
-    return (<SelectedPeopleList {...props} />);
+    return (<SelectedPeopleList { ...props } />);
+  }
+
+  private _getEditingItemText(item: IExtendedPersonaProps): string {
+    return item.primaryText as string;
   }
 
   @autobind
@@ -132,7 +143,7 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
   @autobind
   private _onExpandItem(item: IExtendedPersonaProps): void {
     // tslint:disable-next-line:no-any
-    (this._picker.selectedItemsList as SelectedPeopleList).onExpandItem(item, this._getExpandedGroupItems(item as any));
+    (this._picker.selectedItemsList as SelectedPeopleList).replaceItem(item, this._getExpandedGroupItems(item as any));
   }
 
   @autobind
@@ -153,15 +164,15 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
   }
 
   @autobind
-  private _onFilterChanged(filterText: string, currentPersonas: IPersonaProps[], limitResults?: number): IPersonaProps[] {
+  private _onFilterChanged(filterText: string, currentPersonas: IPersonaProps[], limitResults?: number): Promise<IPersonaProps[]> | null {
     if (filterText) {
       let filteredPersonas: IPersonaProps[] = this._filterPersonasByText(filterText);
 
       filteredPersonas = this._removeDuplicates(filteredPersonas, currentPersonas);
       filteredPersonas = limitResults ? filteredPersonas.splice(0, limitResults) : filteredPersonas;
-      return filteredPersonas;
+      return this._convertResultsToPromise(filteredPersonas);
     } else {
-      return [];
+      return this._convertResultsToPromise([]);
     }
   }
 
@@ -169,7 +180,7 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
   private _returnMostRecentlyUsed(currentPersonas: IPersonaProps[]): IPersonaProps[] | Promise<IPersonaProps[]> {
     let { mostRecentlyUsed } = this.state;
     mostRecentlyUsed = this._removeDuplicates(mostRecentlyUsed, this._picker.items);
-    return mostRecentlyUsed;
+    return this._convertResultsToPromise(mostRecentlyUsed);
   }
 
   private _onCopyItems(items: IExtendedPersonaProps[]): string {
@@ -185,6 +196,15 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
     return copyText;
   }
 
+  @autobind
+  private _shouldShowForceResolve(): boolean {
+    return Boolean(
+      this._picker.floatingPicker &&
+      this._validateInput(this._picker.floatingPicker.inputText) &&
+      this._picker.floatingPicker.suggestions.length === 0
+    );
+  }
+
   private _listContainsPersona(persona: IPersonaProps, personas: IPersonaProps[]): boolean {
     if (!personas || !personas.length || personas.length === 0) {
       return false;
@@ -208,14 +228,19 @@ export class ExtendedPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
     return persona.primaryText as string;
   }
 
+  private _convertResultsToPromise(results: IPersonaProps[]): Promise<IPersonaProps[]> {
+    // tslint:disable-next-line:no-any
+    return new Promise<IPersonaProps[]>((resolve: any, reject: any) => setTimeout(() => resolve(results), 150));
+  }
+
   @autobind
-  private _validateInput(input: string): ValidationState {
+  private _validateInput(input: string): boolean {
     if (input.indexOf('@') !== -1) {
-      return ValidationState.valid;
+      return true;
     } else if (input.length > 1) {
-      return ValidationState.warning;
+      return false;
     } else {
-      return ValidationState.invalid;
+      return false;
     }
   }
 
diff --git a/packages/experiments/src/components/ExtendedPicker/examples/PeopleExampleData.ts b/packages/experiments/src/components/ExtendedPicker/examples/PeopleExampleData.ts
index 10564ef8270c9..fc064ccf50ac3 100644
--- a/packages/experiments/src/components/ExtendedPicker/examples/PeopleExampleData.ts
+++ b/packages/experiments/src/components/ExtendedPicker/examples/PeopleExampleData.ts
@@ -11,6 +11,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.online
   },
   {
@@ -21,6 +22,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.busy
   },
   {
@@ -31,6 +33,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'Software Developer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.dnd
   },
   {
@@ -41,6 +44,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'Financial Analyst',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.offline
   },
   {
@@ -51,6 +55,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'Sr. Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.online
   },
   {
@@ -61,6 +66,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'Design Developer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.online
   },
   {
@@ -71,6 +77,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'UX Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.away
   },
   {
@@ -81,6 +88,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.busy
   },
   {
@@ -91,6 +99,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.dnd
   },
   {
@@ -101,6 +110,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'Software Developer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.offline
   },
   {
@@ -111,6 +121,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'Financial Analyst',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.none
 
   },
@@ -122,6 +133,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'Sr. Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.busy
   },
   {
@@ -132,6 +144,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'Design Developer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.busy
   },
   {
@@ -142,6 +155,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'UX Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.blocked
   },
   {
@@ -152,6 +166,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'SDE',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.blocked
   },
   {
@@ -162,6 +177,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'SE',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.away
   },
   {
@@ -172,6 +188,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'SDET',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.online
   },
   {
@@ -182,6 +199,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'Senior Manager of SDET',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.offline
   },
   {
@@ -192,6 +210,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'Junior Manager of Software',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.away
   },
   {
@@ -202,6 +221,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'UX Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.blocked
   },
   {
@@ -212,6 +232,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'Design Developer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.online
   },
   {
@@ -222,6 +243,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'UX Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.online
   },
   {
@@ -232,6 +254,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'Design Developer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.blocked
   },
   {
@@ -242,6 +265,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'UX Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.offline
   },
   {
@@ -252,6 +276,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'Design Developer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 3:00pm',
+    isValid: true,
     presence: PersonaPresence.online
   },
   {
@@ -262,6 +287,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'UX Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 3:00pm',
+    isValid: true,
     presence: PersonaPresence.away
   },
   {
@@ -272,6 +298,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'UX Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.busy
   },
   {
@@ -282,6 +309,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'UX Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.online
   },
   {
@@ -292,6 +320,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'UX Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.busy
   },
   {
@@ -302,6 +331,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'UX Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.dnd
   },
   {
@@ -312,6 +342,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'UX Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.blocked
   },
   {
@@ -322,6 +353,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'UX Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.online
   },
   {
@@ -332,6 +364,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'UX Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.away
   },
   {
@@ -342,6 +375,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'UX Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.offline
   },
   {
@@ -352,6 +386,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'UX Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.busy
   },
   {
@@ -362,6 +397,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'UX Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.busy
   },
   {
@@ -372,6 +408,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'UX Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.offline
   },
   {
@@ -382,6 +419,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'UX Designer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.online
   },
   {
@@ -392,6 +430,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'Software Developer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.dnd
   },
   {
@@ -402,6 +441,7 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     secondaryText: 'Software Developer',
     tertiaryText: 'In a meeting',
     optionalText: 'Available at 4:00pm',
+    isValid: true,
     presence: PersonaPresence.online
   },
   {
@@ -409,12 +449,14 @@ export const people: (IExtendedPersonaProps & { key: string | number })[] = [
     imageInitials: 'GO',
     primaryText: 'Group One',
     canExpand: true,
+    isValid: true,
   },
   {
     key: 42,
     imageInitials: 'GT',
     primaryText: 'Group Two',
     canExpand: true,
+    isValid: true,
   },
 ];
 
diff --git a/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.test.tsx b/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.test.tsx
new file mode 100644
index 0000000000000..fa1dad84dfc0d
--- /dev/null
+++ b/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.test.tsx
@@ -0,0 +1,117 @@
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+/* tslint:enable:no-unused-variable */
+import * as renderer from 'react-test-renderer';
+
+import { IBaseFloatingPickerProps } from './BaseFloatingPicker.types';
+import { BaseFloatingPicker } from './BaseFloatingPicker';
+import { SuggestionsController } from 'office-ui-fabric-react/lib/Pickers';
+
+function onResolveSuggestions(text: string): ISimple[] {
+  return [
+    'black',
+    'blue',
+    'brown',
+    'cyan',
+    'green',
+    'magenta',
+    'mauve',
+    'orange',
+    'pink',
+    'purple',
+    'red',
+    'rose',
+    'violet',
+    'white',
+    'yellow'
+  ].filter((tag: string) => tag.toLowerCase().indexOf(text.toLowerCase()) === 0).map((item: string) => ({ key: item, name: item }));
+}
+
+function onZeroQuerySuggestion(): ISimple[] {
+  return [
+    'black',
+    'blue',
+    'brown',
+    'cyan'].map((item: string) => ({ key: item, name: item }));
+}
+
+const basicSuggestionRenderer = (props: ISimple) => {
+  return <div key={ props.key } > { props.name } </div>;
+};
+
+export interface ISimple {
+  key: string;
+  name: string;
+}
+
+export type TypedBaseFloatingPicker = BaseFloatingPicker<ISimple, IBaseFloatingPickerProps<ISimple>>;
+
+describe('Pickers', () => {
+  describe('BasePicker', () => {
+    const BaseFloatingPickerWithType = BaseFloatingPicker as new (props: IBaseFloatingPickerProps<ISimple>)
+      => BaseFloatingPicker<ISimple, IBaseFloatingPickerProps<ISimple>>;
+
+    it('renders BaseFloatingPicker correctly', () => {
+      const component = renderer.create(
+        <BaseFloatingPickerWithType
+          onResolveSuggestions={ onResolveSuggestions }
+          onRenderSuggestionsItem={ basicSuggestionRenderer }
+          suggestionsController={ new SuggestionsController() }
+        />
+      );
+      let tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('shows zero query options on empty input', () => {
+      let root = document.createElement('div');
+      let input = document.createElement('input');
+      document.body.appendChild(input);
+      document.body.appendChild(root);
+
+      let picker: TypedBaseFloatingPicker = ReactDOM.render(
+        <BaseFloatingPickerWithType
+          onResolveSuggestions={ onResolveSuggestions }
+          onRenderSuggestionsItem={ basicSuggestionRenderer }
+          suggestionsController={ new SuggestionsController() }
+          onZeroQuerySuggestion={ onZeroQuerySuggestion }
+          inputElement={ input }
+        />,
+        root
+      ) as TypedBaseFloatingPicker;
+
+      picker.onQueryStringChanged('a');
+
+      // Change input to be empty string
+      picker.onQueryStringChanged('');
+
+      expect(picker.suggestions.length).toEqual(4);
+
+      ReactDOM.unmountComponentAtNode(root);
+    });
+
+    it('updates suggestions on query string changed', () => {
+      let root = document.createElement('div');
+      let input = document.createElement('input');
+      document.body.appendChild(input);
+      document.body.appendChild(root);
+
+      let picker: TypedBaseFloatingPicker = ReactDOM.render(
+        <BaseFloatingPickerWithType
+          onResolveSuggestions={ onResolveSuggestions }
+          onRenderSuggestionsItem={ basicSuggestionRenderer }
+          suggestionsController={ new SuggestionsController() }
+          inputElement={ input }
+        />,
+        root
+      ) as TypedBaseFloatingPicker;
+
+      picker.onQueryStringChanged('b');
+
+      expect(picker.suggestions.length).toEqual(3);
+
+      ReactDOM.unmountComponentAtNode(root);
+    });
+  });
+});
diff --git a/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx b/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx
index d657288ad95a3..e7457593e83e8 100644
--- a/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx
+++ b/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.tsx
@@ -4,10 +4,11 @@ import {
   KeyCodes,
   autobind,
   css,
-  getRTL
+  getRTL,
+  createRef
 } from '../../Utilities';
 import { Callout, DirectionalHint } from 'office-ui-fabric-react/lib/Callout';
-import { ValidationState, Suggestions, ISuggestionsProps, SuggestionsController, IBasePickerSuggestionsProps, ISuggestionModel }
+import { Suggestions, ISuggestionsProps, SuggestionsController, IBasePickerSuggestionsProps, ISuggestionModel }
   from 'office-ui-fabric-react/lib/Pickers';
 import { IBaseFloatingPicker, IBaseFloatingPickerProps } from './BaseFloatingPicker.types';
 import * as stylesImport from './BaseFloatingPicker.scss';
@@ -30,12 +31,12 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
   implements IBaseFloatingPicker {
   protected selection: Selection;
 
-  protected root: HTMLElement;
-  protected suggestionElement: Suggestions<T>;
+  protected root = createRef<HTMLDivElement>();
+  protected suggestionElement = createRef<Suggestions<T>>();
 
   protected suggestionStore: SuggestionsController<T>;
   protected SuggestionOfProperType: new (props: ISuggestionsProps<T>) => Suggestions<T> =
-  Suggestions as new (props: ISuggestionsProps<T>) => Suggestions<T>;
+    Suggestions as new (props: ISuggestionsProps<T>) => Suggestions<T>;
   protected loadingTimer: number | undefined;
   // tslint:disable-next-line:no-any
   protected currentPromise: PromiseLike<any>;
@@ -54,6 +55,23 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
     };
   }
 
+  public get inputText(): string {
+    return this.state.queryString;
+  }
+
+  // tslint:disable-next-line:no-any
+  public get suggestions(): any[] {
+    return this.suggestionStore.suggestions;
+  }
+
+  public forceResolveSuggestion(): void {
+    if (this.suggestionStore.hasSelectedSuggestion()) {
+      this.completeSuggestion();
+    } else {
+      this._onValidateInput();
+    }
+  }
+
   public get isSuggestionsShown(): boolean {
     return this.state.suggestionsVisible ? false : this.state.suggestionsVisible as boolean;
   }
@@ -71,7 +89,6 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
       } else {
         this.updateValue(queryString);
       }
-
     }
   }
 
@@ -79,7 +96,6 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
     this.setState({
       suggestionsVisible: false,
     });
-    console.log('hidepicker');
   }
 
   public showPicker(): void {
@@ -87,10 +103,13 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
       suggestionsVisible: true,
     });
 
-    if (this.state.queryString === '') {
-      this.updateSuggestionWithZeroState();
-    } else {
-      this.updateValue(this.state.queryString);
+    if (this.suggestionStore.suggestions.length === 0
+      || this.props.inputElement && this.props.inputElement.textContent !== this.state.queryString) {
+      if (this.state.queryString === '') {
+        this.updateSuggestionWithZeroState();
+      } else {
+        this.updateValue(this.state.queryString);
+      }
     }
   }
 
@@ -121,12 +140,14 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
 
   @autobind
   public refocusSuggestions(keyCode: KeyCodes): void {
-    if (keyCode === KeyCodes.up) {
-      this.suggestionStore.setSelectedSuggestion(
-        this.suggestionStore.suggestions.length - 1
-      );
-    } else if (keyCode === KeyCodes.down) {
-      this.suggestionStore.setSelectedSuggestion(0);
+    if (this.suggestionStore.suggestions && this.suggestionStore.suggestions.length > 0) {
+      if (keyCode === KeyCodes.up) {
+        this.suggestionStore.setSelectedSuggestion(
+          this.suggestionStore.suggestions.length - 1
+        );
+      } else if (keyCode === KeyCodes.down) {
+        this.suggestionStore.setSelectedSuggestion(0);
+      }
     }
   }
 
@@ -134,7 +155,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
     let { className } = this.props;
     return (
       <div
-        ref={ this._resolveRef('root') }
+        ref={ this.root }
         className={ css('ms-BasePicker', className ? className : '') }
       >
         { this.renderSuggestions() }
@@ -161,11 +182,13 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
         calloutWidth={ this.props.calloutWidth ? this.props.calloutWidth : 0 }
       >
         <TypedSuggestion
+          showForceResolve={ this._showForceResolve }
+          createGenericItem={ this._onValidateInput }
           onRenderSuggestion={ this.props.onRenderSuggestionsItem }
           onSuggestionClick={ this.onSuggestionClick }
           onSuggestionRemove={ this.onSuggestionRemove }
           suggestions={ this.suggestionStore.getSuggestions() }
-          ref={ this._resolveRef('suggestionElement') }
+          ref={ this.suggestionElement }
           onGetMoreResults={ this.onGetMoreResults }
           moreSuggestionsAvailable={ this.state.moreSuggestionsAvailable }
           isLoading={ this.state.suggestionsLoading }
@@ -173,7 +196,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
           isMostRecentlyUsedVisible={ this.state.isMostRecentlyUsedVisible }
           isResultsFooterVisible={ this.state.isResultsFooterVisible }
           refocusSuggestions={ this.refocusSuggestions }
-          {...this.props.pickerSuggestionsProps as IBasePickerSuggestionsProps}
+          { ...this.props.pickerSuggestionsProps as IBasePickerSuggestionsProps }
         />
       </Callout>
     ) : null;
@@ -235,18 +258,9 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
         this.suggestionStore.updateSuggestions(suggestionsArray, 0);
       }
     } else if (suggestionsPromiseLike && suggestionsPromiseLike.then) {
-      if (!this.loadingTimer) {
-        this.loadingTimer = this._async.setTimeout(
-          () =>
-            this.setState({
-              suggestionsLoading: true
-            }),
-          500
-        );
-      }
-
-      // Clear suggestions
-      this.suggestionStore.updateSuggestions([]);
+      this.setState({
+        suggestionsLoading: true
+      });
 
       if (updatedValue !== undefined) {
         this.setState({
@@ -269,6 +283,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
           } else {
             this.suggestionStore.updateSuggestions(newSuggestions);
             this.setState({
+              suggestionsVisible: newSuggestions.length > 0,
               suggestionsLoading: false
             });
           }
@@ -310,7 +325,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
     ev: React.MouseEvent<HTMLElement>,
     item: T,
     index: number
-    ): void {
+  ): void {
     this.onChange(item);
   }
 
@@ -319,7 +334,7 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
     ev: React.MouseEvent<HTMLElement>,
     item: T,
     index: number
-    ): void {
+  ): void {
     if (this.props.onRemoveSuggestion) {
       (this.props.onRemoveSuggestion as ((item: T) => void))(item);
     }
@@ -333,7 +348,9 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
         !(this.props.inputElement as HTMLElement).contains(ev.target as HTMLElement))) {
       return;
     }
-    switch (ev.which) {
+    let keyCode = ev.which;
+    let { value: suggestionElement } = this.suggestionElement;
+    switch (keyCode) {
       case KeyCodes.escape:
         this.setState({ suggestionsVisible: false });
         ev.preventDefault();
@@ -342,8 +359,9 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
 
       case KeyCodes.tab:
       case KeyCodes.enter:
-        if (
-          !ev.shiftKey &&
+        if (suggestionElement && suggestionElement.hasSuggestedActionSelected()) {
+          suggestionElement.executeSelectedAction();
+        } else if (!ev.shiftKey &&
           !ev.ctrlKey &&
           this.suggestionStore.hasSelectedSuggestion()) {
           this.completeSuggestion();
@@ -370,38 +388,50 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
         break;
 
       case KeyCodes.up:
-        if (
-          this.state.moreSuggestionsAvailable &&
-          this.suggestionElement.props.searchForMoreText &&
-          this.suggestionStore.currentIndex === 0
-        ) {
-          this.suggestionElement.focusSearchForMoreButton();
-          this.suggestionStore.deselectAllSuggestions();
-          this.forceUpdate();
+        if (suggestionElement && suggestionElement.tryHandleKeyDown(keyCode, this.suggestionStore.currentIndex)) {
+          ev.preventDefault();
+          ev.stopPropagation();
         } else {
-          if (this.suggestionStore.previousSuggestion()) {
+          if (suggestionElement && suggestionElement.hasSuggestedAction() &&
+            this.suggestionStore.currentIndex === 0
+          ) {
             ev.preventDefault();
             ev.stopPropagation();
-            this.onSuggestionSelect();
+            suggestionElement.focusAboveSuggestions();
+            this.suggestionStore.deselectAllSuggestions();
+            this.forceUpdate();
+          } else {
+            if (this.suggestionStore.previousSuggestion()) {
+              ev.preventDefault();
+              ev.stopPropagation();
+              this.onSuggestionSelect();
+            }
           }
         }
         break;
 
       case KeyCodes.down:
-        if (
-          this.state.moreSuggestionsAvailable &&
-          this.suggestionElement.props.searchForMoreText &&
-          this.suggestionStore.currentIndex + 1 ===
-          this.suggestionStore.suggestions.length
-        ) {
-          this.suggestionElement.focusSearchForMoreButton();
-          this.suggestionStore.deselectAllSuggestions();
-          this.forceUpdate();
+        if (suggestionElement && suggestionElement.tryHandleKeyDown(keyCode, this.suggestionStore.currentIndex)) {
+          ev.preventDefault();
+          ev.stopPropagation();
         } else {
-          if (this.suggestionStore.nextSuggestion()) {
+          if (
+            suggestionElement &&
+            suggestionElement.hasSuggestedAction() &&
+            this.suggestionStore.currentIndex + 1 ===
+            this.suggestionStore.suggestions.length
+          ) {
             ev.preventDefault();
             ev.stopPropagation();
-            this.onSuggestionSelect();
+            suggestionElement.focusBelowSuggestions();
+            this.suggestionStore.deselectAllSuggestions();
+            this.forceUpdate();
+          } else {
+            if (this.suggestionStore.nextSuggestion()) {
+              ev.preventDefault();
+              ev.stopPropagation();
+              this.onSuggestionSelect();
+            }
           }
         }
         break;
@@ -450,30 +480,36 @@ export class BaseFloatingPicker<T, P extends IBaseFloatingPickerProps<T>> extend
   }
 
   private _onResolveSuggestions(updatedValue: string): void {
-    let suggestions: T[] | PromiseLike<T[]> = this.props.onResolveSuggestions(updatedValue, this.props.selectedItems);
+    let suggestions: T[] | PromiseLike<T[]> | null = this.props.onResolveSuggestions(updatedValue, this.props.selectedItems);
 
-    this.updateSuggestionsList(suggestions, updatedValue);
+    if (suggestions !== null) {
+      this.updateSuggestionsList(suggestions, updatedValue);
+    }
   }
 
+  @autobind
   private _onValidateInput(): void {
     if (
       this.props.onValidateInput &&
-      (this.props.onValidateInput as ((input: string) => ValidationState))(this.state.queryString) !==
-      ValidationState.invalid &&
       this.props.createGenericItem
     ) {
       let itemToConvert = (this.props.createGenericItem as ((
         input: string,
-        ValidationState: ValidationState
+        isValid: boolean
       ) => ISuggestionModel<T>))(
         this.state.queryString,
-        (this.props.onValidateInput as ((input: string) => ValidationState))(this.state.queryString)
-        );
+        (this.props.onValidateInput as ((input: string) => boolean))(this.state.queryString)
+      );
       this.suggestionStore.createGenericSuggestion(itemToConvert);
       this.completeSuggestion();
     }
   }
 
+  @autobind
+  private _showForceResolve(): boolean {
+    return this.props.showForceResolve ? this.props.showForceResolve() : false;
+  }
+
   private _getTextFromItem(item: T, currentValue?: string): string {
     if (this.props.getTextFromItem) {
       return (this.props.getTextFromItem as ((item: T, currentValue?: string) => string))(item, currentValue);
diff --git a/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.types.ts b/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.types.ts
index a4e9c83f12fea..3d960290cb61c 100644
--- a/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.types.ts
+++ b/packages/experiments/src/components/FloatingPicker/BaseFloatingPicker.types.ts
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ISuggestionModel, ValidationState, IBasePickerSuggestionsProps, SuggestionsController } from 'office-ui-fabric-react/lib/Pickers';
+import { ISuggestionModel, IBasePickerSuggestionsProps, SuggestionsController } from 'office-ui-fabric-react/lib/Pickers';
 import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
 
 export interface IBaseFloatingPicker {
@@ -21,7 +21,7 @@ export interface IBaseFloatingPicker {
 // displaying persona's than type T could either be of Persona or Ipersona props
 // tslint:disable-next-line:no-any
 export interface IBaseFloatingPickerProps<T> extends React.Props<any> {
-  componentRef?: (component?: IBaseFloatingPicker) => void;
+  componentRef?: (component?: IBaseFloatingPicker | null) => void;
 
   /** The suggestions controller */
   suggestionsController: SuggestionsController<T>;
@@ -34,7 +34,7 @@ export interface IBaseFloatingPickerProps<T> extends React.Props<any> {
   /**
    * The input element to listen on events
    */
-  inputElement?: HTMLElement;
+  inputElement?: HTMLElement | null;
 
   /**
    * Function that specifies how an individual suggestion item will appear.
@@ -46,7 +46,7 @@ export interface IBaseFloatingPickerProps<T> extends React.Props<any> {
    * Returns the already selected items so the resolver can filter them out.
    * If used in conjunction with resolveDelay this will ony kick off after the delay throttle.
    */
-  onResolveSuggestions: (filter: string, selectedItems?: T[]) => T[] | PromiseLike<T[]>;
+  onResolveSuggestions: (filter: string, selectedItems?: T[]) => T[] | PromiseLike<T[]> | null;
 
   /**
    * A callback for when the input has been changed
@@ -84,7 +84,7 @@ export interface IBaseFloatingPickerProps<T> extends React.Props<any> {
   /**
    * A function used to validate if raw text entered into the well can be added
    */
-  onValidateInput?: (input: string) => ValidationState;
+  onValidateInput?: (input: string) => boolean;
   /**
    * The text to display while searching for more results in a limited suggestions list
    */
@@ -95,9 +95,14 @@ export interface IBaseFloatingPickerProps<T> extends React.Props<any> {
    */
   createGenericItem?: (
     input: string,
-    ValidationState: ValidationState
+    isValid: boolean
   ) => ISuggestionModel<T>;
 
+  /**
+   * The callback that should be called to see if the force resolve command should be shown
+   */
+  showForceResolve?: () => boolean;
+
   /**
    * The items that the base picker should currently display as selected. If this is provided then the picker will act as a controlled
    * component.
@@ -113,4 +118,4 @@ export interface IBaseFloatingPickerProps<T> extends React.Props<any> {
    * Width for the suggestions callout
    */
   calloutWidth?: number;
-}
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePicker.tsx b/packages/experiments/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePicker.tsx
index 39bb8945a12fa..de027adbf4790 100644
--- a/packages/experiments/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePicker.tsx
+++ b/packages/experiments/src/components/FloatingPicker/PeoplePicker/FloatingPeoplePicker.tsx
@@ -4,7 +4,7 @@ import { IBaseFloatingPickerProps } from '../BaseFloatingPicker.types';
 import { SuggestionItemNormal } from './PeoplePickerItems/SuggestionItemDefault';
 import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
 import './PeoplePicker.scss';
-import { ValidationState, IBasePickerSuggestionsProps, ISuggestionModel } from 'office-ui-fabric-react/lib/Pickers';
+import { IBasePickerSuggestionsProps, ISuggestionModel } from 'office-ui-fabric-react/lib/Pickers';
 
 export interface IPeopleFloatingPickerProps extends IBaseFloatingPickerProps<IPersonaProps> {
 }
@@ -21,16 +21,16 @@ export class FloatingPeoplePicker extends BaseFloatingPeoplePicker {
   };
 }
 
-export function createGenericItem(name: string, currentValidationState: ValidationState): ISuggestionModel<IPersonaProps> {
+export function createGenericItem(name: string, isValid: boolean): ISuggestionModel<IPersonaProps> {
   // tslint:disable-next-line:no-any
   let personaToConvert: any = {
     key: name,
     primaryText: name,
     imageInitials: '!',
-    ValidationState: currentValidationState
+    isValid: isValid
   };
 
-  if (currentValidationState !== ValidationState.warning) {
+  if (!isValid) {
     personaToConvert.imageInitials = getInitials(name, getRTL());
   }
 
diff --git a/packages/experiments/src/components/FloatingPicker/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx b/packages/experiments/src/components/FloatingPicker/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx
index 9ef6684af2a67..1799e953076ad 100644
--- a/packages/experiments/src/components/FloatingPicker/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx
+++ b/packages/experiments/src/components/FloatingPicker/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx
@@ -4,7 +4,6 @@ import * as React from 'react';
 import { css, getId } from '../../../../Utilities';
 import { Persona, PersonaSize, PersonaPresence } from 'office-ui-fabric-react/lib/Persona';
 import { IPeoplePickerItemProps } from '../../../ExtendedPicker';
-import { ValidationState } from 'office-ui-fabric-react/lib/Pickers';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
 import * as stylesImport from './PickerItemsDefault.scss';
 // tslint:disable-next-line:no-any
@@ -34,7 +33,7 @@ export const SelectedItemDefault: (props: IPeoplePickerItemProps) => JSX.Element
         'ms-PickerPersona-container',
         styles.personaContainer,
         { ['is-selected ' + styles.personaContainerIsSelected]: selected },
-        { ['is-invalid ' + styles.validationError]: item.ValidationState === ValidationState.warning }
+        { ['is-invalid ' + styles.validationError]: !item.isValid }
       ) }
       data-is-focusable={ true }
       data-is-sub-focuszone={ true }
diff --git a/packages/experiments/src/components/FloatingPicker/PeoplePicker/examples/FloatingPeoplePicker.Basic.Example.tsx b/packages/experiments/src/components/FloatingPicker/PeoplePicker/examples/FloatingPeoplePicker.Basic.Example.tsx
index 2c27db626b9a4..ef37a1aef7939 100644
--- a/packages/experiments/src/components/FloatingPicker/PeoplePicker/examples/FloatingPeoplePicker.Basic.Example.tsx
+++ b/packages/experiments/src/components/FloatingPicker/PeoplePicker/examples/FloatingPeoplePicker.Basic.Example.tsx
@@ -7,7 +7,7 @@ import {
   autobind
 } from 'office-ui-fabric-react/lib/Utilities';
 import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
-import { IBasePickerSuggestionsProps, ValidationState, SuggestionsController } from 'office-ui-fabric-react/lib/Pickers';
+import { IBasePickerSuggestionsProps, SuggestionsController } from 'office-ui-fabric-react/lib/Pickers';
 import { IBaseFloatingPicker } from '../../BaseFloatingPicker.types';
 import { FloatingPeoplePicker } from '../FloatingPeoplePicker';
 import { IPersonaWithMenu } from 'office-ui-fabric-react/lib/components/pickers/PeoplePicker/PeoplePickerItems/PeoplePickerItem.types';
@@ -60,7 +60,7 @@ export class FloatingPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
       <div>
         <div className='ms-SearchBoxSmallExample' ref={ (ref: HTMLDivElement) => this._inputElement = ref }>
           <SearchBox
-            labelText={ 'Search a person' }
+            placeholder={ 'Search a person' }
             onChange={ this._onSearchChange }
             value={ this.state.searchValue }
           />
@@ -161,13 +161,13 @@ export class FloatingPeoplePickerTypesExample extends BaseComponent<{}, IPeopleP
   }
 
   @autobind
-  private _validateInput(input: string): ValidationState {
+  private _validateInput(input: string): boolean {
     if (input.indexOf('@') !== -1) {
-      return ValidationState.valid;
+      return true;
     } else if (input.length > 1) {
-      return ValidationState.warning;
+      return false;
     } else {
-      return ValidationState.invalid;
+      return false;
     }
   }
 }
diff --git a/packages/experiments/src/components/FloatingPicker/__snapshots__/BaseFloatingPicker.test.tsx.snap b/packages/experiments/src/components/FloatingPicker/__snapshots__/BaseFloatingPicker.test.tsx.snap
new file mode 100644
index 0000000000000..46955019814ea
--- /dev/null
+++ b/packages/experiments/src/components/FloatingPicker/__snapshots__/BaseFloatingPicker.test.tsx.snap
@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Pickers BasePicker renders BaseFloatingPicker correctly 1`] = `
+<div
+  className="ms-BasePicker"
+/>
+`;
diff --git a/packages/experiments/src/components/Keytip/Keytip.styles.ts b/packages/experiments/src/components/Keytip/Keytip.styles.ts
new file mode 100644
index 0000000000000..95630b3c7a7b5
--- /dev/null
+++ b/packages/experiments/src/components/Keytip/Keytip.styles.ts
@@ -0,0 +1,52 @@
+import { IKeytipStyleProps, IKeytipStyles } from './Keytip.types';
+import { ICalloutContentStyleProps, ICalloutContentStyles } from 'office-ui-fabric-react/lib/Callout';
+
+export const getStyles = (props: IKeytipStyleProps): IKeytipStyles => {
+  const { theme, disabled, visible } = props;
+  return {
+    container: [
+      {
+        backgroundColor: theme.palette.neutralDark
+      },
+      disabled && {
+        opacity: 0.5,
+      },
+      !visible && {
+        visibility: 'hidden'
+      }
+    ],
+    root: [{
+      textAlign: 'center',
+      paddingLeft: 3,
+      paddingRight: 3,
+      backgroundColor: theme.palette.neutralDark,
+      color: theme.palette.neutralLight,
+      minWidth: 11,
+      lineHeight: 17,
+      height: 17,
+      display: 'inline-block'
+    },
+    disabled && {
+      color: '#b1b1b1'
+    }]
+  };
+};
+
+export const getCalloutStyles = (props: ICalloutContentStyleProps): ICalloutContentStyles => {
+  return {
+    container: [
+    ],
+    root: [{
+      border: 'none',
+      boxShadow: 'none'
+    }],
+    beak: [
+    ],
+    beakCurtain: [
+    ],
+    calloutMain: [{
+      backgroundColor: 'transparent'
+    }
+    ]
+  };
+};
\ No newline at end of file
diff --git a/packages/experiments/src/components/Keytip/Keytip.tsx b/packages/experiments/src/components/Keytip/Keytip.tsx
new file mode 100644
index 0000000000000..4d99c15fefd76
--- /dev/null
+++ b/packages/experiments/src/components/Keytip/Keytip.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { BaseComponent } from '../../Utilities';
+import { Callout } from 'office-ui-fabric-react/lib/Callout';
+import { DirectionalHint } from 'office-ui-fabric-react/lib/ContextualMenu';
+import { IKeytip, IKeytipProps } from './Keytip.types';
+import { KeytipContent } from './KeytipContent';
+import { getCalloutStyles } from './Keytip.styles';
+import { constructKeytipTargetFromSequences } from '../../utilities/keytip/KeytipUtils';
+
+/**
+ * A callout corresponding to another Fabric component to describe a key sequence that will activate that component
+ *
+ * @export
+ * @class Keytip
+ * @extends {BaseComponent<IKeytipProps, {}}>}
+ */
+export class Keytip extends BaseComponent<IKeytipProps, {}> implements IKeytip {
+
+  // tslint:disable-next-line:no-any
+  constructor(props: IKeytipProps, context: any) {
+    super(props, context);
+  }
+
+  public render(): JSX.Element {
+    const {
+      calloutProps,
+      keySequences,
+      offset = 0 // Default value for gap is 0
+    } = this.props;
+
+    return (
+      <Callout
+        { ...calloutProps }
+        gapSpace={ offset }
+        isBeakVisible={ false }
+        doNotLayer={ true }
+        directionalHint={ DirectionalHint.bottomCenter }
+        target={ constructKeytipTargetFromSequences(keySequences) }
+        getStyles={ getCalloutStyles }
+        preventDismissOnScroll={ true }
+      >
+        <KeytipContent {...this.props} />
+      </Callout>
+    );
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Keytip/Keytip.types.ts b/packages/experiments/src/components/Keytip/Keytip.types.ts
new file mode 100644
index 0000000000000..9f5c4094c8595
--- /dev/null
+++ b/packages/experiments/src/components/Keytip/Keytip.types.ts
@@ -0,0 +1,156 @@
+import { ICalloutProps } from 'office-ui-fabric-react/lib/Callout';
+import { IStyle, ITheme } from '../../Styling';
+import { IStyleFunction } from '../../Utilities';
+import { IKeySequence } from '../../utilities/keysequence/IKeySequence';
+
+export interface IKeytip {
+}
+
+export interface IKeytipProps {
+  /**
+   * Optional callback to access the Keytip component. Use this instead of ref for accessing
+   * the public methods and properties of the component.
+   */
+  componentRef?: (component: IKeytip) => void;
+
+  /**
+   * Content to put inside the keytip
+   *
+   * @type {string}
+   */
+  content: string;
+
+  /**
+   * Theme for the component
+   *
+   * @type {ITheme}
+   */
+  theme?: ITheme;
+
+  /**
+   * T/F if the corresponding control is disabled
+   *
+   * @type {boolean}
+   */
+  disabled?: boolean;
+
+  /**
+   * T/F if the keytip is visible
+   *
+   * @type {boolean}
+   */
+  visible?: boolean;
+
+  /**
+   * Function to call when this keytip is activated
+   * 'el' is the DOM element that the keytip is attached to
+   *
+   * @type {(HTMLElement) => void}
+   */
+  onExecute?: (el: HTMLElement) => void;
+
+  /**
+   * Function to call when the keytip is returned to
+   * 'el' is the DOM element that the keytip is attached to
+   *
+   * @type {(HTMLElement) => void}
+   */
+  onReturn?: (el: HTMLElement) => void;
+
+  /**
+   * Array of KeySequences which is the full key sequence to trigger this keytip
+   * Should not include initial 'start' key sequence
+   *
+   * @type {IKeySequence[]}
+   */
+  keySequences: IKeySequence[];
+
+  /**
+   * KeySequence of overflow set which will trigger the keytip.
+   *
+   * @type {IKeySequence}
+   */
+  overflowSetSequence?: IKeySequence;
+
+  /**
+   * ICalloutProps to pass to the callout element
+   *
+   * @type {string}
+   */
+  calloutProps?: ICalloutProps;
+
+  /**
+   * Optional styles for the component.
+   *
+   * @type {IStyleFunction<IKeytipStyleProps, IKeytipStyles>}
+   */
+  getStyles?: IStyleFunction<IKeytipStyleProps, IKeytipStyles>;
+
+  /**
+   * Offset distance in px between the target element and the positioning of the keytip.this keytip
+   *
+   * @type {number}
+   * @default 0
+   */
+  offset?: number;
+
+  /**
+   * Whether or not this node has children nodes or not. Should be used for menus/overflow components, that have
+   * their children registered after the initial rendering of the DOM.
+   *
+   * @type {boolean}
+   */
+  hasChildrenNodes?: boolean;
+}
+
+/**
+ * Props to style Keytip component
+ */
+export interface IKeytipStyleProps {
+
+  /**
+   * The theme for the keytip.
+   *
+   * @type {ITheme}
+   */
+  theme: ITheme;
+
+  /**
+   * Whether the keytip is disabled or not.
+   *
+   * @type {boolean}
+   */
+  disabled?: boolean;
+
+  /**
+   * T/F if the keytip is visible
+   *
+   * @type {boolean}
+   */
+  visible?: boolean;
+}
+
+export interface IKeytipStyles {
+
+  /**
+   * Style for the div container surrounding the keytip content.
+   *
+   * @type {IStyle}
+   */
+  container: IStyle;
+
+  /**
+   * Style for the keytip content element.
+   *
+   * @type {IStyle}
+   */
+  root: IStyle;
+}
+
+export enum KeytipTransitionModifier {
+  shift = 16,
+  ctrl = 17,
+  alt = 18,
+  leftWindow = 91,
+  rightWindow = 92
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Keytip/KeytipContent.base.tsx b/packages/experiments/src/components/Keytip/KeytipContent.base.tsx
new file mode 100644
index 0000000000000..2068168345c58
--- /dev/null
+++ b/packages/experiments/src/components/Keytip/KeytipContent.base.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { BaseComponent, classNamesFunction, customizable } from '../../Utilities';
+import { convertSequencesToKeytipID } from '../../utilities/keysequence/IKeySequence';
+import { IKeytipProps, IKeytipStyleProps, IKeytipStyles } from './Keytip.types';
+
+/**
+ * A component corresponding the the content rendered inside the callout of the keytip component.
+ *
+ * @export
+ * @class KeytipContent
+ * @extends {BaseComponent<IKeytipProps>}
+ */
+@customizable('KeytipContent', ['theme'])
+export class KeytipContentBase extends BaseComponent<IKeytipProps, {}> {
+
+  public render(): JSX.Element {
+    let {
+      content,
+      getStyles,
+      theme,
+      disabled,
+      keySequences,
+      visible
+      } = this.props;
+
+    const getClassNames = classNamesFunction<IKeytipStyleProps, IKeytipStyles>();
+    let classNames = getClassNames(
+      getStyles!,
+      {
+        theme: theme!,
+        disabled,
+        visible
+      }
+    );
+
+    return (
+      <div className={ classNames.container } >
+        <span id={ convertSequencesToKeytipID(keySequences) } className={ classNames.root }>{ content }</span>
+      </div >
+    );
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Keytip/KeytipContent.test.tsx b/packages/experiments/src/components/Keytip/KeytipContent.test.tsx
new file mode 100644
index 0000000000000..5edcb5e58c62c
--- /dev/null
+++ b/packages/experiments/src/components/Keytip/KeytipContent.test.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import * as renderer from 'react-test-renderer';
+import { IKeySequence } from '../../utilities/keysequence/IKeySequence';
+import { KeytipContent } from './KeytipContent';
+
+const sequence: IKeySequence[] = [{ keys: ['a'] }];
+const keyCont = 'A';
+
+describe('Keytip', () => {
+  it('renders visible Keytip correctly', () => {
+    const componentContent = renderer.create(<KeytipContent visible={ true } content={ keyCont } keySequences={ sequence } />);
+    let tree = componentContent.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders visible disabled Keytip correctly', () => {
+    const componentContent = renderer.create(
+      <KeytipContent
+        visible={ true }
+        disabled={ true }
+        content={ keyCont }
+        keySequences={ sequence }
+      />);
+    let tree = componentContent.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders invisible Keytip correctly', () => {
+    const componentContent = renderer.create(<KeytipContent visible={ false } content={ keyCont } keySequences={ sequence } />);
+    let tree = componentContent.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});
\ No newline at end of file
diff --git a/packages/experiments/src/components/Keytip/KeytipContent.tsx b/packages/experiments/src/components/Keytip/KeytipContent.tsx
new file mode 100644
index 0000000000000..9e83cf7ddd0e2
--- /dev/null
+++ b/packages/experiments/src/components/Keytip/KeytipContent.tsx
@@ -0,0 +1,9 @@
+import { styled } from '../../Utilities';
+import { IKeytipProps, IKeytipStyleProps, IKeytipStyles } from './Keytip.types';
+import { KeytipContentBase } from './KeytipContent.base';
+import { getStyles } from './Keytip.styles';
+
+export const KeytipContent = styled<IKeytipProps, IKeytipStyleProps, IKeytipStyles>(
+  KeytipContentBase,
+  getStyles
+);
\ No newline at end of file
diff --git a/packages/experiments/src/components/Keytip/KeytipPage.tsx b/packages/experiments/src/components/Keytip/KeytipPage.tsx
new file mode 100644
index 0000000000000..0e2c14c866702
--- /dev/null
+++ b/packages/experiments/src/components/Keytip/KeytipPage.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react';
+import {
+  ExampleCard,
+  IComponentDemoPageProps,
+  ComponentPage
+} from '@uifabric/example-app-base';
+import { KeytipBasicExample } from './examples/Keytip.Basic.Example';
+import { KeytipDisabledExample } from './examples/Keytip.Disabled.Example';
+import { KeytipLanguageExample } from './examples/Keytip.Language.Example';
+import { KeytipLayer } from '../../KeytipLayer';
+
+export class KeytipPage extends React.Component<IComponentDemoPageProps, {}> {
+  public render(): JSX.Element {
+    return (
+      <div>
+        <ComponentPage
+          title='Keytip'
+          componentName='Keytip'
+          exampleCards={
+            <div>
+              <ExampleCard title='Basic Keytip'>
+                <KeytipBasicExample />
+              </ExampleCard>
+              <ExampleCard title='Disabled Keytip'>
+                <KeytipDisabledExample />
+              </ExampleCard>
+              <ExampleCard title='Keytip Languages'>
+                <KeytipLanguageExample />
+              </ExampleCard>
+            </div>
+          }
+          overview={
+            <div>
+              <p>A Keytip is a small popup near a component that indicates a key sequence that will trigger that component. These are not
+                to be confused with keyboard shortcuts; they are instead key sequences to traverse through UI components. Technically, a
+                Keytip is a wrapper around a Callout where the target element is discovered through a 'data-ktp-id' attribute on that
+                element.
+              </p>
+
+              <p>The key sequence for a Keytip must be any combination of alphanumeric characters (A-Z, 0-9). No modifiers (Alt, Shift,
+                Ctrl) can be used for these sequences.</p>
+            </div>
+          }
+          bestPractices={
+            <div />
+          }
+          dos={
+            <div>
+              <ul>
+                <li>The content in the Keytip should only be the alphanumeric letters that will trigger this Keytip</li>
+              </ul>
+            </div>
+          }
+          donts={
+            <div>
+              <ul>
+                <li>Don't add Keytips directly into your app. They should be added with the registerKeytip helper through another
+                  component</li>
+              </ul>
+            </div>
+          }
+          isHeaderVisible={ this.props.isHeaderVisible }
+        />
+        <KeytipLayer id={ 'test-id' } />
+      </div>
+    );
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Keytip/__snapshots__/KeytipContent.test.tsx.snap b/packages/experiments/src/components/Keytip/__snapshots__/KeytipContent.test.tsx.snap
new file mode 100644
index 0000000000000..ba8fca629a859
--- /dev/null
+++ b/packages/experiments/src/components/Keytip/__snapshots__/KeytipContent.test.tsx.snap
@@ -0,0 +1,90 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Keytip renders invisible Keytip correctly 1`] = `
+<div
+  className=
+
+      {
+        background-color: #212121;
+        visibility: hidden;
+      }
+>
+  <span
+    className=
+
+        {
+          background-color: #212121;
+          color: #eaeaea;
+          display: inline-block;
+          height: 17px;
+          line-height: 17px;
+          min-width: 11px;
+          padding-left: 3px;
+          padding-right: 3px;
+          text-align: center;
+        }
+    id="ktp-a"
+  >
+    A
+  </span>
+</div>
+`;
+
+exports[`Keytip renders visible Keytip correctly 1`] = `
+<div
+  className=
+
+      {
+        background-color: #212121;
+      }
+>
+  <span
+    className=
+
+        {
+          background-color: #212121;
+          color: #eaeaea;
+          display: inline-block;
+          height: 17px;
+          line-height: 17px;
+          min-width: 11px;
+          padding-left: 3px;
+          padding-right: 3px;
+          text-align: center;
+        }
+    id="ktp-a"
+  >
+    A
+  </span>
+</div>
+`;
+
+exports[`Keytip renders visible disabled Keytip correctly 1`] = `
+<div
+  className=
+
+      {
+        background-color: #212121;
+        opacity: 0.5;
+      }
+>
+  <span
+    className=
+
+        {
+          background-color: #212121;
+          color: #b1b1b1;
+          display: inline-block;
+          height: 17px;
+          line-height: 17px;
+          min-width: 11px;
+          padding-left: 3px;
+          padding-right: 3px;
+          text-align: center;
+        }
+    id="ktp-a"
+  >
+    A
+  </span>
+</div>
+`;
diff --git a/packages/experiments/src/components/Keytip/examples/Keytip.Basic.Example.tsx b/packages/experiments/src/components/Keytip/examples/Keytip.Basic.Example.tsx
new file mode 100644
index 0000000000000..6695d48a76ba6
--- /dev/null
+++ b/packages/experiments/src/components/Keytip/examples/Keytip.Basic.Example.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { IKeytipProps, Keytip } from '../../Keytip';
+import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import { convertSequencesToKeytipID } from '../../../utilities/keysequence/IKeySequence';
+
+export interface IKeytipExampleState {
+  keytipVisible: boolean;
+}
+
+export interface IKeytipMap {
+  [componentKeytipId: string]: IKeytipProps;
+}
+
+export function onKeytipButtonClick(): void {
+  this.setState((previousState: IKeytipExampleState) => {
+    let currentKeytipVisible = !previousState.keytipVisible;
+    return { keytipVisible: currentKeytipVisible };
+  });
+}
+
+export class KeytipBasicExample extends React.Component<{}, IKeytipExampleState> {
+  private keytipMap: IKeytipMap = {};
+
+  constructor(props: {}) {
+    super(props);
+
+    this.state = {
+      keytipVisible: false,
+    };
+
+    // Setup keytips
+    this.keytipMap.Keytip1 = {
+      content: 'A',
+      keySequences: [{ keys: ['a'] }],
+    } as IKeytipProps;
+  }
+
+  /* tslint:disable:jsx-ban-props */
+  public render(): JSX.Element {
+    let btnClick = onKeytipButtonClick.bind(this);
+
+    return (
+      <div>
+        <DefaultButton
+          text='Click to toggle keytip'
+          data-ktp-id={ convertSequencesToKeytipID(this.keytipMap.Keytip1.keySequences) }
+          onClick={ btnClick }
+        />
+        <Keytip
+          content={ this.keytipMap.Keytip1.content }
+          offset={ -8 }
+          keySequences={ this.keytipMap.Keytip1.keySequences }
+          visible={ this.state.keytipVisible }
+        />
+      </div>
+    );
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Keytip/examples/Keytip.Disabled.Example.tsx b/packages/experiments/src/components/Keytip/examples/Keytip.Disabled.Example.tsx
new file mode 100644
index 0000000000000..71a3fd77aded8
--- /dev/null
+++ b/packages/experiments/src/components/Keytip/examples/Keytip.Disabled.Example.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { IKeytipProps, Keytip } from '../../Keytip';
+import { convertSequencesToKeytipID } from '../../../utilities/keysequence/IKeySequence';
+import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import { IKeytipExampleState, onKeytipButtonClick } from './Keytip.Basic.Example';
+
+export interface IKeytipMap {
+  [componentKeytipId: string]: IKeytipProps;
+}
+
+export class KeytipDisabledExample extends React.Component<{}, IKeytipExampleState> {
+  private keytipMap: IKeytipMap = {};
+
+  constructor(props: {}) {
+    super(props);
+
+    this.state = {
+      keytipVisible: false
+    };
+
+    // Setup keytips
+    this.keytipMap.Keytip1 = {
+      content: 'B',
+      keySequences: [{ keys: ['b'] }],
+      disabled: true
+    } as IKeytipProps;
+  }
+
+  /* tslint:disable:jsx-ban-props */
+  public render(): JSX.Element {
+    let btnClick = onKeytipButtonClick.bind(this);
+    return (
+      <div>
+        <p>A disabled keytip will be displayed when keytips are enabled, but the component will not
+          be activated when its keys are pressed</p>
+        <DefaultButton
+          text='Click to toggle keytip'
+          data-ktp-id={ convertSequencesToKeytipID(this.keytipMap.Keytip1.keySequences) }
+          onClick={ btnClick }
+        />
+        <Keytip
+          content={ this.keytipMap.Keytip1.content }
+          keySequences={ this.keytipMap.Keytip1.keySequences }
+          visible={ this.state.keytipVisible }
+          disabled={ this.keytipMap.Keytip1.disabled }
+        />
+      </div>
+    );
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Keytip/examples/Keytip.Language.Example.tsx b/packages/experiments/src/components/Keytip/examples/Keytip.Language.Example.tsx
new file mode 100644
index 0000000000000..e7baab3f1e9b9
--- /dev/null
+++ b/packages/experiments/src/components/Keytip/examples/Keytip.Language.Example.tsx
@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { IKeytipProps, Keytip } from '../../Keytip';
+import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import { convertSequencesToKeytipID } from '../../../utilities/keysequence/IKeySequence';
+import { IKeytipExampleState, onKeytipButtonClick } from './Keytip.Basic.Example';
+
+export interface IKeytipMap {
+  [componentKeytipId: string]: IKeytipProps;
+}
+
+export class KeytipLanguageExample extends React.Component<{}, IKeytipExampleState> {
+  private keytipMap: IKeytipMap = {};
+
+  constructor(props: {}) {
+    super(props);
+
+    this.state = {
+      keytipVisible: false,
+    };
+
+    // Setup keytips
+    this.keytipMap.Keytip1 = {
+      content: 'ы ñ خ',
+      keySequences: [{ keys: ['c'] }],
+    } as IKeytipProps;
+  }
+
+  /* tslint:disable:jsx-ban-props */
+  public render(): JSX.Element {
+    let btnClick = onKeytipButtonClick.bind(this);
+    return (
+      <div>
+        <p>Keytips can support displaying and processing keys for any unicode language</p>
+        <DefaultButton
+          text='Click to toggle keytip'
+          data-ktp-id={ convertSequencesToKeytipID(this.keytipMap.Keytip1.keySequences) }
+          onClick={ btnClick }
+        />
+        <Keytip
+          content={ this.keytipMap.Keytip1.content }
+          keySequences={ this.keytipMap.Keytip1.keySequences }
+          visible={ this.state.keytipVisible }
+        />
+      </div>
+    );
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Keytip/index.ts b/packages/experiments/src/components/Keytip/index.ts
new file mode 100644
index 0000000000000..e1a7019416b87
--- /dev/null
+++ b/packages/experiments/src/components/Keytip/index.ts
@@ -0,0 +1,2 @@
+export * from './Keytip';
+export * from './Keytip.types';
\ No newline at end of file
diff --git a/packages/experiments/src/components/KeytipLayer/KeytipLayer.tsx b/packages/experiments/src/components/KeytipLayer/KeytipLayer.tsx
new file mode 100644
index 0000000000000..806b112832552
--- /dev/null
+++ b/packages/experiments/src/components/KeytipLayer/KeytipLayer.tsx
@@ -0,0 +1,248 @@
+import * as React from 'react';
+import { IKeytipLayerProps } from './KeytipLayer.types';
+import { Keytip, IKeytipProps, KeytipTransitionModifier } from '../Keytip';
+import {
+  autobind,
+  BaseComponent
+} from '../../Utilities';
+import { Layer } from 'office-ui-fabric-react/lib/Layer';
+import { KeyCodes, findIndex } from '../../Utilities';
+import { convertSequencesToKeytipID, fullKeySequencesAreEqual } from '../../utilities/keysequence/IKeySequence';
+import { IKeytipTransitionKey } from '../../utilities/keysequence/IKeytipTransitionKey';
+import { KeytipManager } from '../../utilities/keytip/KeytipManager';
+import { ktpFullPrefix, ktpSeparator } from '../../utilities/keytip/KeytipUtils';
+
+export interface IKeytipLayerState {
+  inKeytipMode: boolean;
+  keytips: IKeytipProps[];
+}
+
+const defaultStartSequence: IKeytipTransitionKey = {
+  key: 'Meta', modifierKeys: [KeytipTransitionModifier.alt]
+};
+
+const defaultExitSequence: IKeytipTransitionKey = {
+  key: 'Meta', modifierKeys: [KeytipTransitionModifier.alt]
+};
+
+const defaultReturnSequence: IKeytipTransitionKey = {
+  key: 'Escape'
+};
+
+/**
+ * A layer that holds all keytip items
+ *
+ * @export
+ * @class KeytipLayer
+ * @extends {BaseComponent<IKeytipLayerProps>}
+ */
+export class KeytipLayer extends BaseComponent<IKeytipLayerProps, IKeytipLayerState> {
+  public static defaultProps: IKeytipLayerProps = {
+    keytipStartSequences: [defaultStartSequence],
+    keytipExitSequences: [defaultExitSequence],
+    keytipReturnSequences: [defaultReturnSequence],
+    id: ktpFullPrefix + 'Alt' + ktpSeparator + 'Meta'
+  };
+
+  private _keytipManager: KeytipManager = KeytipManager.getInstance();
+
+  // tslint:disable-next-line:no-any
+  constructor(props: IKeytipLayerProps, context: any) {
+    super(props, context);
+
+    this.state = {
+      inKeytipMode: false,
+      keytips: []
+    };
+
+    this._keytipManager.init(this);
+  }
+
+  /**
+   * Register a keytip in this layer
+   *
+   * @param keytipProps - IKeytipProps to add to this layer
+   */
+  public registerKeytip(keytipProps: IKeytipProps): void {
+    this.setState(this.addKeytip(keytipProps));
+  }
+
+  /**
+   * Unregister a keytip in this layer
+   *
+   * @param keytipProps - IKeytipProps to remove from this layer
+   */
+  public unregisterKeytip(keytipProps: IKeytipProps): void {
+    this.setState(this.removeKeytip(keytipProps));
+  }
+
+  /**
+   * Add or update a keytip to this layer by modifying this layer's state
+   *
+   * @param keytipProps - Keytip to add or update in the layer
+   * @returns Function to call with setState
+   */
+  public addKeytip(keytipProps: IKeytipProps): {} {
+    return (previousState: IKeytipLayerState) => {
+      let previousKeytips: IKeytipProps[] = previousState.keytips;
+
+      // Try to find keytipProps in previousKeytips to update
+      let keytipToUpdateIndex = findIndex(previousKeytips, (previousKeytip: IKeytipProps) => {
+        return fullKeySequencesAreEqual(keytipProps.keySequences, previousKeytip.keySequences);
+      });
+
+      let currentKeytips = [...previousState.keytips];
+      if (keytipToUpdateIndex >= 0) {
+        // Replace the keytip props
+        currentKeytips.splice(keytipToUpdateIndex, 1, keytipProps);
+      } else {
+        // Add the new keytip props
+        currentKeytips.push(keytipProps);
+      }
+      return { ...previousState, keytips: currentKeytips };
+    };
+  }
+
+  /**
+   * Removes a keytip from this layer's state
+   *
+   * @param keytipToRemove - IKeytipProps of the keytip to remove
+   * @returns Function to call with setState
+   */
+  public removeKeytip(keytipToRemove: IKeytipProps): {} {
+    return (previousState: IKeytipLayerState) => {
+      let currentKeytips = previousState.keytips;
+      // Filter out keytips that don't equal the one to remove
+      let filteredKeytips: IKeytipProps[] = currentKeytips.filter((currentKeytip: IKeytipProps) => {
+        return !fullKeySequencesAreEqual(currentKeytip.keySequences, keytipToRemove.keySequences);
+      });
+      return { ...previousState, keytips: filteredKeytips };
+    };
+  }
+
+  /**
+   * Sets the visibility of the keytips in this layer
+   *
+   * @param ids - Keytip IDs that should have their visibility updated
+   * @param visible - T/F if the specified Keytips will be visible or not
+   */
+  public setKeytipVisibility(ids: string[], visible: boolean): void {
+    this.setState((previousState: IKeytipLayerState, currentProps: IKeytipLayerState) => {
+      let currentKeytips: IKeytipProps[] = [...previousState.keytips];
+      for (let keytip of currentKeytips) {
+        let keytipId = convertSequencesToKeytipID(keytip.keySequences);
+        if (ids.indexOf(keytipId) >= 0) {
+          keytip.visible = visible;
+        }
+      }
+      return { ...previousState, keytips: currentKeytips };
+    });
+  }
+
+  public render(): JSX.Element {
+    const {
+      id
+    } = this.props;
+
+    const {
+      keytips
+    } = this.state;
+
+    return (
+      <Layer id={ id }>
+        { keytips && keytips.map((keytipProps: IKeytipProps, index: number) => {
+          return <Keytip key={ index } { ...keytipProps } />;
+        }) }
+      </Layer>
+    );
+  }
+
+  public componentDidMount(): void {
+    this._events.on(window, 'mousedown', this._onDismiss);
+    this._events.on(window, 'resize', this._onDismiss);
+    this._events.on(window, 'keydown', this._onKeyDown, true /* useCapture */);
+    this._events.on(window, 'keypress', this._onKeyPress, true /* useCapture */);
+
+    // Add handler to remove Keytips when we scroll the page
+    window.addEventListener('scroll', (): void => {
+      if (this.state.inKeytipMode) {
+        this._keytipManager.exitKeytipMode();
+      }
+    }, { capture: true });
+  }
+
+  /**
+   * Exits keytip mode for this layer
+   */
+  public exitKeytipMode(): void {
+    if (this.props.onExitKeytipMode) {
+      this.props.onExitKeytipMode();
+    }
+    this.setState({ inKeytipMode: false });
+  }
+
+  /**
+   * Enters keytip mode for this layer
+   */
+  public enterKeytipMode(): void {
+    if (this.props.onEnterKeytipMode) {
+      this.props.onEnterKeytipMode();
+    }
+    this.setState({ inKeytipMode: true });
+  }
+
+  @autobind
+  private _onDismiss(ev?: React.MouseEvent<HTMLElement>): void {
+    // if we are in keytip mode, then exit keytip mode
+    if (this.state.inKeytipMode) {
+      this._keytipManager.exitKeytipMode();
+    }
+  }
+
+  @autobind
+  private _onKeyDown(ev: React.KeyboardEvent<HTMLElement>): void {
+    switch (ev.which) {
+      case KeyCodes.alt:
+        // ALT puts focus in the browser bar, so it should not be used as a key for keytips.
+        // It can be used as a modifier
+        break;
+      case KeyCodes.tab:
+      case KeyCodes.enter:
+      case KeyCodes.space:
+        this._keytipManager.exitKeytipMode();
+        break;
+      default:
+        let transitionKey: IKeytipTransitionKey = { key: ev.key };
+        transitionKey.modifierKeys = this._getModifierKey(ev);
+        this._keytipManager.processTransitionInput(transitionKey);
+        break;
+    }
+  }
+
+  /**
+   * Gets the ModifierKeyCodes based on the keyboard event
+   *
+   * @param ev - React.KeyboardEvent
+   * @returns List of ModifierKeyCodes that were pressed
+   */
+  private _getModifierKey(ev: React.KeyboardEvent<HTMLElement>): KeytipTransitionModifier[] | undefined {
+    let modifierKeys = [];
+    if (ev.altKey) {
+      modifierKeys.push(KeytipTransitionModifier.alt);
+    }
+    if (ev.ctrlKey) {
+      modifierKeys.push(KeytipTransitionModifier.ctrl);
+    }
+    if (ev.shiftKey) {
+      modifierKeys.push(KeytipTransitionModifier.shift);
+    }
+    // TODO: include windows key or option for MAC
+    return modifierKeys.length ? modifierKeys : undefined;
+  }
+
+  @autobind
+  private _onKeyPress(ev: React.KeyboardEvent<HTMLElement>): void {
+    // Call processInput
+    this._keytipManager.processInput(ev.key);
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/KeytipLayer/KeytipLayer.types.ts b/packages/experiments/src/components/KeytipLayer/KeytipLayer.types.ts
new file mode 100644
index 0000000000000..c060857d2b8a0
--- /dev/null
+++ b/packages/experiments/src/components/KeytipLayer/KeytipLayer.types.ts
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { IKeytipTransitionKey } from '../../utilities/keysequence/IKeytipTransitionKey';
+import { KeytipLayer } from './KeytipLayer';
+
+export interface IKeytipLayerProps extends React.Props<KeytipLayer> {
+  /**
+   * Optional callback to access the KeytipLayer component. Use this instead of ref for accessing
+   * the public methods and properties of the component.
+   */
+  componentRef?: (component: KeytipLayer) => void;
+
+  /**
+   * The DOM ID to use as the hostId for the child keytips
+   *
+   * @type {string}
+   */
+  id: string;
+
+  /**
+  * List of key sequences that will start keytips mode
+  *
+  * @type {KeySequence}
+  */
+  keytipStartSequences?: IKeytipTransitionKey[];
+
+  /**
+   * List of key sequences that execute the return functionality in keytips (going back to the previous level of keytips)
+   *
+   * @type {KeySequence}
+   */
+  keytipReturnSequences?: IKeytipTransitionKey[];
+
+  /**
+   * List of key sequences that will exit keytips mode
+   *
+   * @type {KeySequence}
+   */
+  keytipExitSequences?: IKeytipTransitionKey[];
+
+  /**
+   * Callback function triggered when keytip mode is exited
+   *
+   * @type {() => void}
+   */
+  onExitKeytipMode?: () => void;
+
+  /**
+   * Callback function triggered when keytip mode is entered
+   *
+   * @type {() => void)}
+   */
+  onEnterKeytipMode?: () => void;
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/KeytipLayer/KeytipLayerPage.tsx b/packages/experiments/src/components/KeytipLayer/KeytipLayerPage.tsx
new file mode 100644
index 0000000000000..e053c602bdd29
--- /dev/null
+++ b/packages/experiments/src/components/KeytipLayer/KeytipLayerPage.tsx
@@ -0,0 +1,53 @@
+import * as React from 'react';
+import {
+  ExampleCard,
+  IComponentDemoPageProps,
+  ComponentPage
+} from '@uifabric/example-app-base';
+import { KeytipLayerBasicExample } from './examples/KeytipLayer.Basic.Example';
+
+export class KeytipLayerPage extends React.Component<IComponentDemoPageProps, {}> {
+  public render(): JSX.Element {
+    return (
+      <ComponentPage
+        title='Keytip Layer'
+        componentName='KeytipLayer'
+        exampleCards={
+          <div>
+            <ExampleCard title='KeytipLayer Basic'>
+              <KeytipLayerBasicExample />
+            </ExampleCard>
+          </div>
+        }
+        overview={
+          <div>
+            <p>A KeytipLayer is the component to add to your app to enable Keytips. It can be added anywhere in your document, but must
+              only be added once. Use the registerKeytip utility helper to add a Keytip to your app through the component render() function
+              it belongs to.</p>
+            <p>Key sequences can be defined to enter and exit Keytip mode. These sequences can be any keys along with modifiers (Alt, Shift
+              Ctrl, etc). The enter and exit sequences default to Alt-Win. There is also a sequence to 'return' up a level of keytips, this
+              defaults to 'Esc'.</p>
+          </div>
+        }
+        bestPractices={
+          <div />
+        }
+        dos={
+          <div>
+            <ul>
+              <li>Keytip sequences can be duplicated as long as none of their siblings have the same sequence</li>
+            </ul>
+          </div>
+        }
+        donts={
+          <div>
+            <ul>
+              <li>Don't create more than 1 KeytipLayer per app. This will cause issues with the key listeners</li>
+            </ul>
+          </div>
+        }
+        isHeaderVisible={ this.props.isHeaderVisible }
+      />
+    );
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/KeytipLayer/examples/KeytipLayer.Basic.Example.tsx b/packages/experiments/src/components/KeytipLayer/examples/KeytipLayer.Basic.Example.tsx
new file mode 100644
index 0000000000000..ad1ba8cb4b812
--- /dev/null
+++ b/packages/experiments/src/components/KeytipLayer/examples/KeytipLayer.Basic.Example.tsx
@@ -0,0 +1,237 @@
+import * as React from 'react';
+import { convertSequencesToKeytipID } from '../../../utilities/keysequence/IKeySequence';
+import { IKeytipTransitionKey } from '../../../utilities/keysequence/IKeytipTransitionKey';
+import { registerKeytip, addKeytipSequence } from '../../../utilities/keytip/KeytipUtils';
+import { KeytipLayer } from '../KeytipLayer';
+import { IKeytipProps, KeytipTransitionModifier } from '../../Keytip';
+import { DefaultButton, ActionButton } from 'office-ui-fabric-react/lib/Button';
+import { CommandBar } from 'office-ui-fabric-react/lib/CommandBar';
+import { Modal } from 'office-ui-fabric-react/lib/Modal';
+import { MessageBar, MessageBarType } from 'office-ui-fabric-react/lib/MessageBar';
+import { autobind } from '../../../Utilities';
+
+export interface IKeytipLayerBasicExampleState {
+  showModal: boolean;
+  showMessageBar: boolean;
+}
+
+export interface IKeytipMap {
+  [componentKeytipId: string]: IKeytipProps;
+}
+
+export class KeytipLayerBasicExample extends React.Component<{}, IKeytipLayerBasicExampleState> {
+
+  private startingKeySequence: IKeytipTransitionKey = { key: 'Meta', modifierKeys: [KeytipTransitionModifier.alt] };
+  private keytipMap: IKeytipMap = {};
+
+  constructor(props: {}) {
+    super(props);
+
+    // Setup state
+    this.state = {
+      showModal: false,
+      showMessageBar: false
+    };
+
+    // Setup keytips
+    this.keytipMap.Pivot1Keytip = {
+      content: 'A',
+      keySequences: [{ keys: ['a'] }]
+    } as IKeytipProps;
+
+    this.keytipMap.Pivot2Keytip = {
+      content: 'B',
+      keySequences: [{ keys: ['b'] }]
+    } as IKeytipProps;
+
+    this.keytipMap.Button1Pivot1Keytip = {
+      content: '1B',
+      keySequences: addKeytipSequence(this.keytipMap.Pivot1Keytip.keySequences, { keys: ['1', 'b'] }),
+      onExecute: (el: HTMLElement) => {
+        el.click();
+      }
+    } as IKeytipProps;
+
+    this.keytipMap.Button2Pivot1Keytip = {
+      content: '1A',
+      keySequences: addKeytipSequence(this.keytipMap.Pivot1Keytip.keySequences, { keys: ['1', 'a'] }),
+      onExecute: (el: HTMLElement) => {
+        el.click();
+      }
+    } as IKeytipProps;
+
+    this.keytipMap.Button3Pivot1Keytip = {
+      content: 'M',
+      keySequences: addKeytipSequence(this.keytipMap.Pivot1Keytip.keySequences, { keys: ['m'] }),
+      onExecute: (el: HTMLElement) => {
+        el.click();
+      }
+    } as IKeytipProps;
+
+    this.keytipMap.CommandButton1Pivot2Keytip = {
+      content: '2',
+      keySequences: addKeytipSequence(this.keytipMap.Pivot2Keytip.keySequences, { keys: ['2'] }),
+      onExecute: (el: HTMLElement) => {
+        el.click();
+      }
+    } as IKeytipProps;
+
+    this.keytipMap.CommandButton2Pivot2Keytip = {
+      content: 'Y',
+      keySequences: addKeytipSequence(this.keytipMap.Pivot2Keytip.keySequences, { keys: ['y'] }),
+      onExecute: (el: HTMLElement) => {
+        el.click();
+      }
+    } as IKeytipProps;
+
+    this.keytipMap.CommandButton3Pivot2Keytip = {
+      content: 'LK',
+      keySequences: addKeytipSequence(this.keytipMap.Pivot2Keytip.keySequences, { keys: ['l', 'k'] }),
+      onExecute: (el: HTMLElement) => {
+        el.click();
+      }
+    } as IKeytipProps;
+  }
+
+  /* tslint:disable:jsx-ban-props jsx-no-lambda */
+  public render(): JSX.Element {
+    let divStyle = {
+      width: '50%',
+      display: 'inline-block',
+      verticalAlign: 'top'
+    };
+
+    return (
+      <div>
+        <p>Press Alt-Win to enable keytips, Esc to return up a level, and Alt-Win to exit keytip mode</p>
+        <div>
+          <div style={ divStyle }>
+            <div>
+              <ActionButton
+                data-ktp-id={ convertSequencesToKeytipID(this.keytipMap.Pivot1Keytip.keySequences) }
+                text='Mock Pivot 1'
+              />
+            </div>
+            <div>
+              <DefaultButton
+                data-ktp-id={ convertSequencesToKeytipID(this.keytipMap.Button1Pivot1Keytip.keySequences) }
+                text='Test Button 1'
+                onClick={ () => { alert('Button 1'); } }
+              />
+              <DefaultButton
+                data-ktp-id={ convertSequencesToKeytipID(this.keytipMap.Button2Pivot1Keytip.keySequences) }
+                text='Test Button 2'
+                onClick={ () => { alert('Button 2'); } }
+              />
+              <DefaultButton
+                data-ktp-id={ convertSequencesToKeytipID(this.keytipMap.Button3Pivot1Keytip.keySequences) }
+                text='Test Button 3'
+                onClick={ () => { alert('Button 3'); } }
+              />
+            </div>
+          </div>
+          <div style={ divStyle }>
+            <div>
+              <ActionButton
+                data-ktp-id={ convertSequencesToKeytipID(this.keytipMap.Pivot2Keytip.keySequences) }
+                text='Mock Pivot 2'
+              />
+            </div>
+            <CommandBar
+              items={
+                [
+                  {
+                    key: 'commandBarItem1',
+                    name: 'New',
+                    icon: 'Add',
+                    onClick: this._showModal,
+                    ['data-ktp-id']: convertSequencesToKeytipID(this.keytipMap.CommandButton1Pivot2Keytip.keySequences)
+                  },
+                  {
+                    key: 'commandBarItem2',
+                    name: 'Upload',
+                    icon: 'Upload',
+                    onClick: this._showMessageBar,
+                    ['data-ktp-id']: convertSequencesToKeytipID(this.keytipMap.CommandButton2Pivot2Keytip.keySequences)
+                  }
+                ]
+              }
+              farItems={
+                [
+                  {
+                    key: 'farItem1',
+                    name: 'SubMenu',
+                    icon: 'SortLines',
+                    ['data-ktp-id']: convertSequencesToKeytipID(this.keytipMap.CommandButton3Pivot2Keytip.keySequences),
+                    subMenuProps: {
+                      items: [
+                        {
+                          key: 'emailMessage',
+                          name: 'Email message',
+                          icon: 'Mail',
+                        },
+                        {
+                          key: 'calendarEvent',
+                          name: 'Calendar event',
+                          icon: 'Calendar'
+                        }
+                      ],
+                    },
+                  }
+                ]
+              }
+            />
+          </div>
+        </div>
+        { this.state.showMessageBar &&
+          <MessageBar messageBarType={ MessageBarType.success }>
+            Success Uploading
+          </MessageBar>
+        }
+        <Modal
+          isOpen={ this.state.showModal }
+          onDismiss={ this._hideModal }
+          isBlocking={ false }
+        >
+          <h2>Hello this is a Modal</h2>
+        </Modal>
+        <KeytipLayer
+          keytipStartSequences={ [this.startingKeySequence] }
+          keytipExitSequences={ [this.startingKeySequence] }
+          id={ 'test-id' }
+        />
+      </div>
+    );
+  }
+
+  public componentDidMount(): void {
+    // Manually add keytips to the KeytipManager for now
+    // This should really be done in each component
+    for (let component of Object.keys(this.keytipMap)) {
+      registerKeytip(this.keytipMap[component]);
+    }
+  }
+
+  @autobind
+  private _showModal(): void {
+    this.setState({ showModal: true });
+  }
+
+  @autobind
+  private _hideModal(): void {
+    this.setState({ showModal: false });
+  }
+
+  @autobind
+  private _showMessageBar(): void {
+    this.setState({ showMessageBar: true });
+
+    // Hide the MessageBar after 2 seconds
+    setTimeout(this._hideMessageBar, 2000);
+  }
+
+  @autobind
+  private _hideMessageBar(): void {
+    this.setState({ showMessageBar: false });
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/KeytipLayer/index.ts b/packages/experiments/src/components/KeytipLayer/index.ts
new file mode 100644
index 0000000000000..d05637efc9388
--- /dev/null
+++ b/packages/experiments/src/components/KeytipLayer/index.ts
@@ -0,0 +1,2 @@
+export * from './KeytipLayer';
+export * from './KeytipLayer.types';
\ No newline at end of file
diff --git a/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.test.tsx b/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.test.tsx
new file mode 100644
index 0000000000000..f725e47c0a009
--- /dev/null
+++ b/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.test.tsx
@@ -0,0 +1,71 @@
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+/* tslint:enable:no-unused-variable */
+import * as renderer from 'react-test-renderer';
+
+import { IBaseSelectedItemsListProps, ISelectedItemProps } from './BaseSelectedItemsList.types';
+import { BaseSelectedItemsList } from './BaseSelectedItemsList';
+
+export interface ISimple {
+  key: string;
+  name: string;
+}
+
+const basicItemRenderer = (props: ISelectedItemProps<ISimple>) => {
+  return <div key={ props.key }> { props.name } </div>;
+};
+
+export type TypedBaseSelectedItemsList = BaseSelectedItemsList<ISimple, IBaseSelectedItemsListProps<ISimple>>;
+
+describe('SelectedItemsList', () => {
+  describe('BaseSelectedItemsList', () => {
+    const BaseSelectedItemsListWithType = BaseSelectedItemsList as new (props: IBaseSelectedItemsListProps<ISimple>)
+      => BaseSelectedItemsList<ISimple, IBaseSelectedItemsListProps<ISimple>>;
+
+    it('renders BaseSelectedItemsList correctly', () => {
+      const component = renderer.create(
+        <BaseSelectedItemsListWithType
+        />
+      );
+      let tree = component.toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+
+    it('can remove items', () => {
+      const root = document.createElement('div');
+
+      const onChange = (items: ISimple[] | undefined): void => {
+        expect(items!.length).toBe(1);
+        expect(items![0].name).toBe('b');
+      };
+
+      const itemsList: TypedBaseSelectedItemsList = ReactDOM.render(
+        <BaseSelectedItemsListWithType
+          onRenderItem={ basicItemRenderer }
+          selectedItems={ [{ key: '1', name: 'a' }, { key: '2', name: 'b' }] }
+          onChange={ onChange }
+        />,
+        root
+      ) as TypedBaseSelectedItemsList;
+
+      expect(itemsList.items.length).toEqual(2);
+      itemsList.removeItemAt(0);
+    });
+
+    it('can add items', () => {
+      const root = document.createElement('div');
+      const itemsList: TypedBaseSelectedItemsList = ReactDOM.render(
+        <BaseSelectedItemsListWithType
+          onRenderItem={ basicItemRenderer }
+        />,
+        root
+      ) as TypedBaseSelectedItemsList;
+
+      let items: ISimple[] = [{ key: '1', name: 'a' }, { key: '2', name: 'b' }];
+      itemsList.addItems(items);
+
+      expect(itemsList.items.length).toEqual(2);
+    });
+  });
+});
diff --git a/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.tsx b/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.tsx
index 3e4791a6bceab..b288ae1690b02 100644
--- a/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.tsx
+++ b/packages/experiments/src/components/SelectedItemsList/BaseSelectedItemsList.tsx
@@ -35,7 +35,9 @@ export class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>>
     };
 
     // Create a new selection if one is not specified
-    this.selection = this.props.selection ? this.props.selection as Selection : new Selection({ onSelectionChanged: this.forceUpdate });
+    this.selection = this.props.selection
+      ? this.props.selection as Selection
+      : new Selection({ onSelectionChanged: this.onSelectionChanged });
   }
 
   public get items(): T[] {
@@ -130,6 +132,11 @@ export class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>>
     }));
   }
 
+  @autobind
+  protected onSelectionChanged(): void {
+    this.forceUpdate();
+  }
+
   protected onChange(items?: T[]): void {
     if (this.props.onChange) {
       (this.props.onChange as (items?: T[]) => void)(items);
diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.scss b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.scss
new file mode 100644
index 0000000000000..c2b4d2dbd7240
--- /dev/null
+++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.scss
@@ -0,0 +1,13 @@
+.editingInput {
+  border: 0px;
+  outline: none;
+  width: 100%;
+
+  &::-ms-clear {
+    display: none;
+  }
+}
+
+.editingContainer {
+  margin: 4px;
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx
new file mode 100644
index 0000000000000..77b3c9fe43d6b
--- /dev/null
+++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/EditingItem.tsx
@@ -0,0 +1,135 @@
+/* tslint:disable */
+import * as React from 'react';
+/* tslint:enable */
+import {
+  BaseComponent,
+  KeyCodes,
+  autobind,
+  getId,
+  getNativeProps,
+  inputProperties,
+  css,
+  createRef
+} from '../../../../Utilities';
+import { FloatingPeoplePicker, IBaseFloatingPickerProps } from '../../../../FloatingPicker';
+import { ISelectedPeopleItemProps } from '../SelectedPeopleList';
+import { IExtendedPersonaProps } from '../SelectedPeopleList';
+import { IPeoplePickerItemState } from './ExtendedSelectedItem';
+import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
+
+import * as stylesImport from './EditingItem.scss';
+
+// tslint:disable-next-line:no-any
+const styles: any = stylesImport;
+
+export interface IEditingSelectedPeopleItemProps extends ISelectedPeopleItemProps {
+  // tslint:disable-next-line:no-any
+  onEditingComplete: (oldItem: any, newItem: any) => void;
+  onRenderFloatingPicker?: (props: IBaseFloatingPickerProps<IPersonaProps>) => JSX.Element;
+  floatingPickerProps?: IBaseFloatingPickerProps<IPersonaProps>;
+  getEditingItemText?: (item: IExtendedPersonaProps) => string;
+}
+
+export class EditingItem extends BaseComponent<IEditingSelectedPeopleItemProps, IPeoplePickerItemState> {
+  private _editingInput: HTMLInputElement;
+  private _editingFloatingPicker = createRef<FloatingPeoplePicker>();
+  private _onRenderFloatingPicker: (props: IBaseFloatingPickerProps<IExtendedPersonaProps>) => JSX.Element;
+  private _floatingPickerProps: IBaseFloatingPickerProps<IExtendedPersonaProps>;
+
+  constructor(props: IEditingSelectedPeopleItemProps) {
+    super(props);
+    this.state = { contextualMenuVisible: false };
+    this._onRenderFloatingPicker = this.props.onRenderFloatingPicker as
+      (props: IBaseFloatingPickerProps<IExtendedPersonaProps>) => JSX.Element;
+    this._floatingPickerProps = this.props.floatingPickerProps as IBaseFloatingPickerProps<IExtendedPersonaProps>;
+  }
+
+  @autobind
+  public componentDidMount(): void {
+    let getEditingItemText = this.props.getEditingItemText as (item: IExtendedPersonaProps) => string;
+    let itemText = getEditingItemText(this.props.item);
+    this._editingFloatingPicker.value && this._editingFloatingPicker.value.onQueryStringChanged(itemText);
+    this._editingInput.value = itemText;
+    this._editingInput.focus();
+  }
+
+  @autobind
+  public render(): JSX.Element {
+    const itemId = getId();
+    const nativeProps = getNativeProps(this.props, inputProperties);
+    return (
+      <div aria-labelledby={ 'editingItemPersona-' + itemId } className={ css('ms-EditingItem', styles.editingContainer) }>
+        <input
+          { ...nativeProps }
+          ref={ this._resolveInputRef }
+          autoCapitalize={ 'off' }
+          autoComplete={ 'off' }
+          onChange={ this._onInputChange }
+          onKeyDown={ this._onInputKeyDown }
+          onBlur={ this._onInputBlur }
+          onClick={ this._onInputClick }
+          data-lpignore={ true }
+          className={ styles.editingInput }
+          id={ itemId }
+        />
+        { this._renderEditingSuggestions() }
+      </div>);
+  }
+
+  @autobind
+  private _renderEditingSuggestions(): JSX.Element {
+    let onRenderFloatingPicker = this._onRenderFloatingPicker;
+    return (onRenderFloatingPicker({
+      componentRef: this._editingFloatingPicker,
+      onChange: this._onSuggestionSelected,
+      inputElement: this._editingInput,
+      selectedItems: [],
+      ...this._floatingPickerProps
+    }));
+  }
+
+  @autobind
+  private _resolveInputRef(ref: HTMLInputElement): void {
+    this._editingInput = ref;
+
+    this.forceUpdate(() => { this._editingInput.focus(); });
+  }
+
+  @autobind
+  private _onInputClick(): void {
+    this._editingFloatingPicker.value && this._editingFloatingPicker.value.showPicker();
+  }
+
+  @autobind
+  private _onInputBlur(ev: React.FocusEvent<HTMLElement>): void {
+    if (this._editingFloatingPicker.value &&
+      (ev.relatedTarget === null || (ev.relatedTarget as HTMLElement).className.indexOf('ms-SearchMore-button') === -1)
+    ) {
+      this._editingFloatingPicker.value.forceResolveSuggestion();
+    }
+  }
+
+  @autobind
+  private _onInputChange(ev: React.FormEvent<HTMLElement>): void {
+    let value: string = (ev.target as HTMLInputElement).value;
+
+    if (value === '') {
+      if (this.props.onRemoveItem) {
+        this.props.onRemoveItem();
+      }
+    } else {
+      this._editingFloatingPicker.value && this._editingFloatingPicker.value.onQueryStringChanged(value);
+    }
+  }
+
+  private _onInputKeyDown(ev: React.KeyboardEvent<HTMLInputElement>): void {
+    if (ev.which === KeyCodes.backspace || ev.which === KeyCodes.del) {
+      ev.stopPropagation();
+    }
+  }
+
+  @autobind
+  private _onSuggestionSelected(item: IExtendedPersonaProps): void {
+    this.props.onEditingComplete(this.props.item, item);
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.scss b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.scss
index 322c8b7bcd3c9..0c9387646b656 100644
--- a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.scss
+++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.scss
@@ -5,24 +5,57 @@
   border-radius: 15px;
   display: inline-flex;
   align-items: center;
-  background: $ms-color-neutralLighter;
+  background: $ms-color-themeLighterAlt;
   margin: 4px;
   cursor: default;
   user-select: none;
-  max-width: 300px;
   vertical-align: middle;
   position: relative;
 
+  // Setting global values here to override persona's normal behavior specifically in this selected variation
+  :global(.ms-Persona-primaryText) {
+    color: $ms-color-themeDark;
+    @include ms-font-m;
+
+    &.hover {
+      color: $ms-color-themeDark;
+    }
+
+    @include high-contrast {
+      color: HighlightText;
+    }
+  }
+
+  .actionButton {
+    &:hover {
+      background: $ms-color-themeLight;
+    }
+
+    :global(.ms-Button-icon) {
+      color: $ms-color-themeDark;
+
+      @include high-contrast {
+        color: HighlightText;
+      }
+    }
+  }
+
   &:hover {
-    background: $ms-color-neutralLight;
+    background: $ms-color-themeLighter;
 
-    .removeButton {
-      color: $ms-color-neutralPrimary;
+    // Setting global values here to override persona's normal behavior specifically in this selected variation
+    :global(.ms-Persona-primaryText) {
+      color: $ms-color-themeDark;
+      @include ms-font-m;
+
+      @include high-contrast {
+        color: HighlightText;
+      }
     }
   }
 
   &.personaContainerIsSelected {
-    background: $ms-color-blue;
+    background: $ms-color-themePrimary;
 
     // Setting global values here to override persona's normal behavior specifically in this selected variation
     :global(.ms-Persona-primaryText) {
@@ -34,18 +67,19 @@
     }
 
     .actionButton {
+      color: $ms-color-white;
+
       :global(.ms-Button-icon) {
-        color: $ms-color-white;
+        color: $ms-color-themeDark;
+
+        &:hover {
+          background: $ms-color-themeDark;
+        }
 
         @include high-contrast {
           color: HighlightText;
         }
       }
-
-      &:hover {
-        color: $ms-color-white;
-        background: $ms-color-themeDark;
-      }
     }
 
     @include high-contrast {
@@ -58,26 +92,12 @@
   &.validationError {
     // Setting global values here to override persona's normal behavior in the error version
     :global(.ms-Persona-primaryText) {
-      color: $ms-color-redDark;
-      border-bottom: 2px dotted $ms-color-redDark;
+      color: $ms-color-red;
     }
 
     :global(.ms-Persona-initials) {
       font-size: 20px;
     }
-
-    &.personaContainerIsSelected {
-      background: $ms-color-redDark;
-
-      :global(.ms-Persona-primaryText) {
-        color: $ms-color-white;
-        border-bottom: 2px dotted $ms-color-white;
-      }
-
-      .removeButton:hover {
-        background: $ms-color-red;
-      }
-    }
   }
 
   @include high-contrast {
@@ -96,33 +116,28 @@
   .removeButton {
     border-radius: 15px;
     flex: 0 0 auto;
-    width: 28px;
-    height: 28px;
-    flex-basis: 28px;
-
-    &:hover {
-      background: $ms-color-neutralTertiaryAlt;
-      color: $ms-color-neutralDark;
-    }
+    width: 33px;
+    height: 33px;
+    flex-basis: 32px;
   }
 
   .expandButton {
     border-radius: 15px 0px 0px 15px;
-    height: 28px;
-    flex-basis: 28px;
-    padding-right: 12px;
+    height: 33px;
+    width: 44px;
+    padding-right: 16px;
     position: inherit;
-    margin-right: -8px;
-
-    &:hover {
-      background: $ms-color-neutralTertiaryAlt;
-      color: $ms-color-neutralDark;
-    }
+    display: flex;
+    margin-right: -17px;
   }
 
   .personaWrapper {
     position: relative;
     display: inherit;
+
+    :global(.ms-Persona-details) {
+      padding: 0px 8px;
+    }
   }
 
   .personaDetails {
diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.tsx
index f2802a5602b28..296b6cf76819b 100644
--- a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.tsx
+++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/ExtendedSelectedItem.tsx
@@ -1,12 +1,10 @@
 /* tslint:disable */
 import * as React from 'react';
 /* tslint:enable */
-import { BaseComponent, autobind, css, getId } from '../../../../Utilities';
-import { Persona, PersonaSize, PersonaPresence } from 'office-ui-fabric-react/lib/Persona';
-import { ValidationState } from 'office-ui-fabric-react/lib/Pickers';
+import { BaseComponent, css, getId, createRef } from '../../../../Utilities';
+import { Persona, PersonaSize } from 'office-ui-fabric-react/lib/Persona';
 import { ISelectedPeopleItemProps } from '../SelectedPeopleList';
 import { IconButton } from 'office-ui-fabric-react/lib/Button';
-import { ContextualMenu, DirectionalHint } from 'office-ui-fabric-react/lib/ContextualMenu';
 import * as stylesImport from './ExtendedSelectedItem.scss';
 // tslint:disable-next-line:no-any
 const styles: any = stylesImport;
@@ -16,7 +14,7 @@ export interface IPeoplePickerItemState {
 }
 
 export class ExtendedSelectedItem extends BaseComponent<ISelectedPeopleItemProps, IPeoplePickerItemState> {
-  protected persona: HTMLElement;
+  protected persona = createRef<HTMLDivElement>();
 
   constructor(props: ISelectedPeopleItemProps) {
     super(props);
@@ -35,24 +33,23 @@ export class ExtendedSelectedItem extends BaseComponent<ISelectedPeopleItemProps
     const itemId = getId();
     return (
       <div
-        ref={ this._resolveRef('persona') }
+        ref={ this.persona }
         className={ css(
           'ms-PickerPersona-container',
           styles.personaContainer,
           { ['is-selected ' + styles.personaContainerIsSelected]: selected },
-          { ['is-invalid ' + styles.validationError]: item.ValidationState === ValidationState.warning }
+          { ['is-invalid ' + styles.validationError]: !item.isValid }
         ) }
         data-is-focusable={ true }
         data-is-sub-focuszone={ true }
         data-selection-index={ index }
         role={ 'listitem' }
         aria-labelledby={ 'selectedItemPersona-' + itemId }
-        onContextMenu={ this._onClick }
       >
         <div hidden={ !item.canExpand || onExpandItem === undefined }>
           <IconButton
-            onClick={ this.onClickIconButton(onExpandItem) }
-            iconProps={ { iconName: 'Add', style: { fontSize: '12px' } } }
+            onClick={ this._onClickIconButton(onExpandItem) }
+            iconProps={ { iconName: 'Add', style: { fontSize: '14px' } } }
             className={ css('ms-PickerItem-removeButton', styles.expandButton, styles.actionButton) }
             ariaLabel={ removeButtonAriaLabel }
           />
@@ -64,46 +61,28 @@ export class ExtendedSelectedItem extends BaseComponent<ISelectedPeopleItemProps
           >
             <Persona
               { ...item }
-              presence={ item.presence !== undefined ? item.presence : PersonaPresence.none }
-              size={ PersonaSize.size28 }
+              onRenderCoin={ this.props.renderPersonaCoin }
+              onRenderPrimaryText={ this.props.renderPrimaryText }
+              size={ PersonaSize.size32 }
             />
           </div>
           <IconButton
-            onClick={ this.onClickIconButton(onRemoveItem) }
-            iconProps={ { iconName: 'Cancel', style: { fontSize: '12px' } } }
+            onClick={ this._onClickIconButton(onRemoveItem) }
+            iconProps={ { iconName: 'Cancel', style: { fontSize: '14px' } } }
             className={ css('ms-PickerItem-removeButton', styles.removeButton, styles.actionButton) }
             ariaLabel={ removeButtonAriaLabel }
           />
         </div >
-        { this.state.contextualMenuVisible ? (
-          <ContextualMenu
-            items={ this.props.menuItems }
-            shouldFocusOnMount={ true }
-            target={ this.persona }
-            onDismiss={ this._onCloseContextualMenu }
-            directionalHint={ DirectionalHint.bottomAutoEdge }
-          />)
-          : null
-        }
       </div >);
   }
 
-  private onClickIconButton = (action: (() => void) | undefined): () => void => {
-    return (): void => {
+  private _onClickIconButton(action: (() => void) | undefined): (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) => void {
+    return (ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>): void => {
+      ev.stopPropagation();
+      ev.preventDefault();
       if (action) {
         action();
       }
     };
   }
-
-  @autobind
-  private _onClick(ev: React.MouseEvent<HTMLElement>): void {
-    ev.preventDefault();
-    this.setState({ contextualMenuVisible: true });
-  }
-
-  @autobind
-  private _onCloseContextualMenu(ev: Event): void {
-    this.setState({ contextualMenuVisible: false });
-  }
 }
\ No newline at end of file
diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.tsx
new file mode 100644
index 0000000000000..5abc76f2f865a
--- /dev/null
+++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/Items/SelectedItemWithContextMenu.tsx
@@ -0,0 +1,63 @@
+/* tslint:disable */
+import * as React from 'react';
+/* tslint:enable */
+import { BaseComponent, autobind, createRef, RefObject } from '../../../../Utilities';
+import { IExtendedPersonaProps } from '../SelectedPeopleList';
+import { ContextualMenu, DirectionalHint } from 'office-ui-fabric-react/lib/ContextualMenu';
+import { IContextualMenuItem } from 'office-ui-fabric-react/lib/ContextualMenu';
+import { IBaseProps } from 'office-ui-fabric-react/lib/Utilities';
+
+export interface IPeoplePickerItemState {
+  contextualMenuVisible: boolean;
+}
+
+export interface ISelectedItemWithContextMenuProps extends IBaseProps {
+  renderedItem: JSX.Element;
+  beginEditing?: (item: IExtendedPersonaProps) => void;
+  menuItems: IContextualMenuItem[];
+  item: IExtendedPersonaProps;
+}
+
+export class SelectedItemWithContextMenu extends BaseComponent<ISelectedItemWithContextMenuProps, IPeoplePickerItemState> {
+  protected itemElement: RefObject<HTMLDivElement> = createRef<HTMLDivElement>();
+
+  constructor(props: ISelectedItemWithContextMenuProps) {
+    super(props);
+    this.state = { contextualMenuVisible: false };
+  }
+
+  public render(): JSX.Element {
+    return (
+      <div
+        ref={ this.itemElement }
+        onContextMenu={ this._onClick }
+      >
+        { this.props.renderedItem }
+        { this.state.contextualMenuVisible ? (
+          <ContextualMenu
+            items={ this.props.menuItems }
+            shouldFocusOnMount={ true }
+            target={ this.itemElement.value }
+            onDismiss={ this._onCloseContextualMenu }
+            directionalHint={ DirectionalHint.bottomLeftEdge }
+          />)
+          : null
+        }
+      </div >);
+  }
+
+  @autobind
+  private _onClick(ev: React.MouseEvent<HTMLElement>): void {
+    ev.preventDefault();
+    if (this.props.beginEditing && !this.props.item.isValid) {
+      this.props.beginEditing(this.props.item);
+    } else {
+      this.setState({ contextualMenuVisible: true });
+    }
+  }
+
+  @autobind
+  private _onCloseContextualMenu(ev: Event): void {
+    this.setState({ contextualMenuVisible: false });
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx
index 63bd372d812e4..3c854dbad16b3 100644
--- a/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx
+++ b/packages/experiments/src/components/SelectedItemsList/SelectedPeopleList/SelectedPeopleList.tsx
@@ -1,27 +1,38 @@
 /* tslint:disable */
 import * as React from 'react';
-import { ValidationState } from 'office-ui-fabric-react/lib/Pickers';
 /* tslint:enable */
 import { BaseSelectedItemsList } from '../BaseSelectedItemsList';
 import { IBaseSelectedItemsListProps, ISelectedItemProps } from '../BaseSelectedItemsList.types';
 import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
 import { ExtendedSelectedItem } from './Items/ExtendedSelectedItem';
-import { autobind } from '../../../Utilities';
+import { SelectedItemWithContextMenu } from './Items/SelectedItemWithContextMenu';
+import { autobind, IRenderFunction } from '../../../Utilities';
 import { IContextualMenuItem } from 'office-ui-fabric-react/lib/ContextualMenu';
+import { IBaseFloatingPickerProps } from '../../../FloatingPicker';
+import { EditingItem } from './Items/EditingItem';
 
 export interface IExtendedPersonaProps extends IPersonaProps {
+  isValid: boolean;
+  blockRecipientRemoval?: boolean;
+  shouldBlockSelection?: boolean;
   canExpand?: boolean;
+  isEditing?: boolean;
 }
 
-export interface ISelectedPeopleItemProps extends ISelectedItemProps<IExtendedPersonaProps & { ValidationState: ValidationState }> {
+export interface ISelectedPeopleItemProps extends ISelectedItemProps<IExtendedPersonaProps> {
   onExpandItem?: () => void;
-  menuItems: IContextualMenuItem[];
+  renderPersonaCoin?: IRenderFunction<IPersonaProps>;
+  renderPrimaryText?: IRenderFunction<IPersonaProps>;
 }
 
 export interface ISelectedPeopleProps extends IBaseSelectedItemsListProps<IExtendedPersonaProps> {
   onExpandGroup?: (item: IExtendedPersonaProps) => void;
   removeMenuItemText?: string;
   copyMenuItemText?: string;
+  editMenuItemText?: string;
+  getEditingItemText?: (item: IExtendedPersonaProps) => string;
+  onRenderFloatingPicker?: (props: IBaseFloatingPickerProps<IPersonaProps>) => JSX.Element;
+  floatingPickerProps?: IBaseFloatingPickerProps<IPersonaProps>;
 }
 
 export class BasePeopleSelectedItemsList extends BaseSelectedItemsList<IExtendedPersonaProps, ISelectedPeopleProps> {
@@ -37,25 +48,27 @@ export class SelectedPeopleList extends BasePeopleSelectedItemsList {
     onRenderItem: (props: ISelectedPeopleItemProps) => <ExtendedSelectedItem {...props} />,
   };
 
-  public onExpandItem(itemToExpand: IExtendedPersonaProps, expandedItems: IExtendedPersonaProps[]): void {
+  @autobind
+  public replaceItem(itemToReplace: IExtendedPersonaProps, itemsToReplaceWith: IExtendedPersonaProps[]): void {
     let { items } = this.state;
-    let index: number = items.indexOf(itemToExpand);
-    // tslint:disable-next-line:no-any
-    let filteredExpandedItems = expandedItems.filter((item: any) => items.indexOf(item) === -1);
+    let index: number = items.indexOf(itemToReplace);
     if (index > -1) {
-      let newItems = items.slice(0, index).concat(filteredExpandedItems).concat(items.slice(index + 1));
+      let newItems = items.slice(0, index).concat(itemsToReplaceWith).concat(items.slice(index + 1));
       this.updateItems(newItems);
     }
   }
 
   @autobind
   protected renderItems(): JSX.Element[] {
-    let { removeButtonAriaLabel } = this.props;
-    let onRenderItem = this.props.onRenderItem as (props: ISelectedPeopleItemProps) => JSX.Element;
-
     let { items } = this.state;
     // tslint:disable-next-line:no-any
-    return items.map((item: any, index: number) => onRenderItem({
+    return items.map((item: any, index: number) => this._renderItem(item, index));
+  }
+
+  // tslint:disable-next-line:no-any
+  private _renderItem(item: any, index: number): JSX.Element {
+    let { removeButtonAriaLabel } = this.props;
+    let props = {
       item,
       index,
       key: item.key ? item.key : index,
@@ -66,30 +79,89 @@ export class SelectedPeopleList extends BasePeopleSelectedItemsList {
       onCopyItem: (itemToCopy: IExtendedPersonaProps) => this.copyItems([itemToCopy]),
       onExpandItem: this.props.onExpandGroup ? () => (this.props.onExpandGroup as (item: IExtendedPersonaProps) => void)(item) : undefined,
       menuItems: this._createMenuItems(item),
-    }));
+    };
+
+    if ((item as IExtendedPersonaProps).isEditing) {
+      return (
+        <EditingItem
+          {...props}
+          onRenderFloatingPicker={ this.props.onRenderFloatingPicker }
+          floatingPickerProps={ this.props.floatingPickerProps }
+          onEditingComplete={ this._completeEditing }
+          getEditingItemText={ this.props.getEditingItemText }
+        />
+      );
+    } else {
+      let onRenderItem = this.props.onRenderItem as (props: ISelectedPeopleItemProps) => JSX.Element;
+      let renderedItem = onRenderItem(props);
+      return (
+        props.menuItems.length > 0 ?
+          (
+            <SelectedItemWithContextMenu
+              renderedItem={ renderedItem }
+              beginEditing={ this._beginEditing }
+              menuItems={ this._createMenuItems(props.item) }
+              item={ props.item }
+            />
+          )
+          : renderedItem
+      );
+    }
+  }
+
+  @autobind
+  private _beginEditing(item: IExtendedPersonaProps): void {
+    item.isEditing = true;
+    this.forceUpdate();
+  }
+
+  @autobind
+  // tslint:disable-next-line:no-any
+  private _completeEditing(oldItem: any, newItem: any): void {
+    oldItem.isEditing = false;
+    this.replaceItem(oldItem, newItem);
   }
 
   // tslint:disable-next-line:no-any
   private _createMenuItems(item: any): IContextualMenuItem[] {
-    return [
-      {
+    let menuItems: IContextualMenuItem[] = [];
+
+    if (this.props.editMenuItemText && this.props.getEditingItemText) {
+      menuItems.push({
+        key: 'Edit',
+        name: this.props.editMenuItemText,
+        onClick: (ev: React.MouseEvent<HTMLElement>, menuItem: IContextualMenuItem) => {
+          this._beginEditing(menuItem.data);
+        },
+        data: item,
+      });
+    }
+
+    if (this.props.removeMenuItemText) {
+      menuItems.push(
+        {
+          key: 'Remove',
+          name: this.props.removeMenuItemText,
+          onClick: (ev: React.MouseEvent<HTMLElement>, menuItem: IContextualMenuItem) => {
+            this.removeItem(menuItem.data as ISelectedItemProps<IExtendedPersonaProps>);
+          },
+          data: item,
+        });
+    }
+
+    if (this.props.copyMenuItemText) {
+      menuItems.push({
         key: 'Copy',
-        name: this.props.copyMenuItemText ? this.props.copyMenuItemText : 'Copy',
+        name: this.props.copyMenuItemText,
         onClick: (ev: React.MouseEvent<HTMLElement>, menuItem: IContextualMenuItem) => {
           if (this.props.onCopyItems) {
             (this.copyItems as (items: IExtendedPersonaProps[]) => void)([menuItem.data] as IExtendedPersonaProps[]);
           }
         },
         data: item,
-      },
-      {
-        key: 'Remove',
-        name: this.props.removeMenuItemText ? this.props.removeMenuItemText : 'Remove',
-        onClick: (ev: React.MouseEvent<HTMLElement>, menuItem: IContextualMenuItem) => {
-          this.removeItem(menuItem.data as ISelectedItemProps<IExtendedPersonaProps>);
-        },
-        data: item,
-      },
-    ];
+      });
+    }
+
+    return menuItems;
   }
 }
\ No newline at end of file
diff --git a/packages/experiments/src/components/SelectedItemsList/__snapshots__/BaseSelectedItemsList.test.tsx.snap b/packages/experiments/src/components/SelectedItemsList/__snapshots__/BaseSelectedItemsList.test.tsx.snap
new file mode 100644
index 0000000000000..46c04acc82f53
--- /dev/null
+++ b/packages/experiments/src/components/SelectedItemsList/__snapshots__/BaseSelectedItemsList.test.tsx.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectedItemsList BaseSelectedItemsList renders BaseSelectedItemsList correctly 1`] = `null`;
diff --git a/packages/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.scss b/packages/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.scss
new file mode 100644
index 0000000000000..8691a2ef04e0e
--- /dev/null
+++ b/packages/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.scss
@@ -0,0 +1,4 @@
+.persona {
+  fontSize: '14px';
+  verticalAlign: '-webkit-baseline-middle'
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx b/packages/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx
index 1402db0f8d37b..245f2b544db3e 100644
--- a/packages/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx
+++ b/packages/experiments/src/components/SelectedItemsList/examples/SelectedPeopleList.Basic.Example.tsx
@@ -8,8 +8,13 @@ import {
 import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
 import { people, groupOne, groupTwo } from '../../ExtendedPicker';
 import 'office-ui-fabric-react/lib/components/Pickers/PeoplePicker/examples/PeoplePicker.Types.Example.scss';
-import { IExtendedPersonaProps, SelectedPeopleList } from '../SelectedPeopleList/SelectedPeopleList';
+import { IExtendedPersonaProps, SelectedPeopleList, ISelectedPeopleItemProps } from '../SelectedPeopleList/SelectedPeopleList';
+import { ExtendedSelectedItem } from '../SelectedPeopleList/Items/ExtendedSelectedItem';
 import { Selection } from 'office-ui-fabric-react/lib/Selection';
+import { IPersonaProps } from 'office-ui-fabric-react/lib/Persona';
+import { Icon } from 'office-ui-fabric-react/lib/Icon';
+
+import * as styles from './SelectedPeopleList.Basic.Example.scss';
 
 export class PeopleSelectedItemsListExample extends BaseComponent<{}, {}> {
   private _selectionList: SelectedPeopleList;
@@ -41,6 +46,26 @@ export class PeopleSelectedItemsListExample extends BaseComponent<{}, {}> {
         copyMenuItemText={ 'Copy' }
         removeMenuItemText={ 'Remove' }
         selection={ this.selection }
+        onRenderItem={ this._onRenderItem }
+      />
+    );
+  }
+
+  @autobind
+  private _onRenderItem(props: ISelectedPeopleItemProps): JSX.Element {
+    return (
+      <ExtendedSelectedItem
+        {...props}
+        renderPersonaCoin={ this._renderPersonaElement }
+      />
+    );
+  }
+
+  private _renderPersonaElement(props: IPersonaProps, defaultRender: (props?: IPersonaProps) => JSX.Element | null): JSX.Element {
+    return (
+      <Icon
+        iconName={ 'Contact' }
+        className={ styles.persona }
       />
     );
   }
@@ -64,7 +89,7 @@ export class PeopleSelectedItemsListExample extends BaseComponent<{}, {}> {
   @autobind
   private _onExpandItem(item: IExtendedPersonaProps): void {
     // tslint:disable-next-line:no-any
-    this._selectionList.onExpandItem(item, this._getExpandedGroupItems(item as any));
+    this._selectionList.replaceItem(item, this._getExpandedGroupItems(item as any));
   }
 
   private _onSelectionChange(): void {
diff --git a/packages/experiments/src/components/SelectedItemsList/index.ts b/packages/experiments/src/components/SelectedItemsList/index.ts
index d89176bdc78f0..cd2a173d7958d 100644
--- a/packages/experiments/src/components/SelectedItemsList/index.ts
+++ b/packages/experiments/src/components/SelectedItemsList/index.ts
@@ -1,3 +1,4 @@
 export * from './BaseSelectedItemsList.types';
 export * from './BaseSelectedItemsList';
-export * from './SelectedPeopleList/SelectedPeopleList';
\ No newline at end of file
+export * from './SelectedPeopleList/SelectedPeopleList';
+export * from './SelectedPeopleList/Items/ExtendedSelectedItem';
\ No newline at end of file
diff --git a/packages/experiments/src/components/Shimmer/Shimmer.base.tsx b/packages/experiments/src/components/Shimmer/Shimmer.base.tsx
new file mode 100644
index 0000000000000..70ce162d2824e
--- /dev/null
+++ b/packages/experiments/src/components/Shimmer/Shimmer.base.tsx
@@ -0,0 +1,139 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  classNamesFunction,
+} from '../../Utilities';
+import {
+  IShimmerProps,
+  IShimmerStyleProps,
+  IShimmerStyles,
+  ShimmerElementType,
+  ICircle,
+  ILine,
+  IGap,
+  ShimmerElementVerticalAlign,
+} from './Shimmer.types';
+import {
+  DefaultPalette,
+  IStyleSet
+} from '../../Styling';
+import { ShimmerRectangle } from './ShimmerRectangle/ShimmerRectangle';
+import { ShimmerCircle } from './ShimmerCircle/ShimmerCircle';
+
+const getClassNames = classNamesFunction<IShimmerStyleProps, IShimmerStyles>();
+
+export class ShimmerBase extends BaseComponent<IShimmerProps, {}> {
+  public static defaultProps: IShimmerProps = {
+    width: 100,
+    isDataLoaded: false
+  };
+  private _classNames: {[key in keyof IShimmerStyles]: string};
+  constructor(props: IShimmerProps) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    const { getStyles, width, lineElements, children, isDataLoaded } = this.props;
+    const maxHeight: number | undefined = lineElements ? this._findMaxHeight(lineElements) : undefined;
+    this._classNames = getClassNames(getStyles!, { width, maxHeight, isDataLoaded });
+
+    const elements: JSX.Element[] | JSX.Element = lineElements ?
+      lineElements.map((elem: ICircle | ILine | IGap, index: number): JSX.Element => {
+        switch (elem.type) {
+          case ShimmerElementType.CIRCLE:
+            return (
+              <ShimmerCircle
+                key={ index }
+                { ...elem }
+                borderAlignStyle={ this._getBorderAlignStyles(maxHeight, elem) }
+              />
+            );
+          case ShimmerElementType.GAP:
+            const gapWidth = elem.width ? elem.width + '%' : '1%';
+            return (
+              <div
+                key={ index }
+                // tslint:disable-next-line:jsx-ban-props
+                style={ {
+                  width: gapWidth,
+                  height: maxHeight + 'px',
+                  backgroundColor: `${DefaultPalette.white}`
+                } }
+              />
+            );
+          case ShimmerElementType.RECTANGLE:
+            return (
+              <ShimmerRectangle
+                key={ index }
+                { ...elem }
+                borderAlignStyle={ this._getBorderAlignStyles(maxHeight, elem) }
+              />
+            );
+        }
+      }) :
+      <ShimmerRectangle />;
+
+    return (
+      <div className={ this._classNames.root }>
+        <div className={ this._classNames.shimmerWrapper }>
+          { elements }
+        </div>
+        <div className={ this._classNames.dataWrapper }>
+          { !!isDataLoaded ?
+            !!children ? children : null
+            : null }
+        </div>
+      </div>
+    );
+  }
+
+  private _findMaxHeight(items: Array<ICircle | IGap | ILine>): number {
+    const maxHeight = items.reduce((acc: number, next: ICircle | IGap | ILine): number => {
+      return next.height ?
+        next.height > acc ? next.height : acc
+        : acc;
+    }, 0);
+    return maxHeight;
+  }
+
+  private _getBorderAlignStyles(maxHeight: number | undefined, elem: ICircle | IGap | ILine): IStyleSet | undefined {
+    let height: number | undefined;
+    switch (elem.type) {
+      case ShimmerElementType.RECTANGLE:
+        height = !!elem.height ? elem.height : 16;
+        break;
+      case ShimmerElementType.CIRCLE:
+        height = !!elem.height ? elem.height : 24;
+        break;
+    }
+    console.log(height);
+    const dif: number | undefined = maxHeight && height ?
+      maxHeight - height > 0 ?
+        maxHeight - height : undefined
+      : undefined;
+
+    let borderStyle: IStyleSet | undefined;
+    const hasVerticalAlign: boolean = elem.verticalAlign ? true : false;
+
+    if (elem.verticalAlign === ShimmerElementVerticalAlign.CENTER || !hasVerticalAlign) {
+      borderStyle = {
+        alignSelf: 'center',
+        borderBottom: `${dif ? dif / 2 : 0}px solid ${DefaultPalette.white}`,
+        borderTop: `${dif ? dif / 2 : 0}px solid ${DefaultPalette.white}`
+      };
+    } else if (elem.verticalAlign === ShimmerElementVerticalAlign.TOP && hasVerticalAlign) {
+      borderStyle = {
+        alignSelf: 'top',
+        borderBottom: `${dif ? dif : 0}px solid ${DefaultPalette.white}`,
+        borderTop: `0px solid ${DefaultPalette.white}`
+      };
+    } else if (elem.verticalAlign === ShimmerElementVerticalAlign.BOTTOM && hasVerticalAlign) {
+      borderStyle = {
+        alignSelf: 'bottom',
+        borderBottom: `0px solid ${DefaultPalette.white}`,
+        borderTop: `${dif ? dif : 0}px solid ${DefaultPalette.white}`
+      };
+    }
+    return borderStyle;
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Shimmer/Shimmer.styles.ts b/packages/experiments/src/components/Shimmer/Shimmer.styles.ts
new file mode 100644
index 0000000000000..ef1f852e36b7a
--- /dev/null
+++ b/packages/experiments/src/components/Shimmer/Shimmer.styles.ts
@@ -0,0 +1,79 @@
+import { IShimmerStyleProps, IShimmerStyles } from './Shimmer.types';
+import {
+  keyframes,
+  DefaultPalette
+} from '../../Styling';
+
+export function getStyles(props: IShimmerStyleProps): IShimmerStyles {
+  const {
+    width,
+    maxHeight,
+    isDataLoaded
+  } = props;
+
+  const shimmerAnimation: string = keyframes({
+    '0%': {
+      backgroundPosition: '-900%'
+    },
+    '100%': {
+      backgroundPosition: '1000%'
+    }
+  });
+
+  return {
+    root: [
+      'ms-Shimmer-container',
+      {
+        position: 'relative',
+        margin: '10px',
+        boxSizing: 'content-box',
+        minHeight: maxHeight ? `${maxHeight}px` : '16px'
+      }
+    ],
+    shimmerWrapper: [
+      'ms-Shimmer-shimmerWrapper',
+      {
+        display: 'flex',
+        position: 'absolute',
+        top: '0',
+        alignItems: 'center',
+        alignContent: 'space-between',
+        width: `${width}%`,
+        height: 'auto',
+        boxSizing: 'border-box',
+        background: `${DefaultPalette.neutralLighter}
+                    linear-gradient(
+                      to right,
+                      ${DefaultPalette.neutralLighter} 0%,
+                      ${DefaultPalette.neutralLight} 50%,
+                      ${DefaultPalette.neutralLighter} 100%)
+                    0 0 / 90% 100%
+                    no-repeat
+                    content-box`,
+        animationDuration: '2s',
+        animationTimingFunction: 'ease-in-out',
+        animationDirection: 'normal',
+        animationIterationCount: 'infinite',
+        animationName: shimmerAnimation,
+        transition: 'opacity 200ms, visibility 200ms'
+      },
+      isDataLoaded && {
+        opacity: '0',
+        visibility: 'hidden'
+      }
+    ],
+    dataWrapper: [
+      'ms-Shimmer-dataWrapper',
+      {
+        opacity: '0',
+        lineHeight: '1',
+        background: 'none',
+        border: 'none',
+        transition: 'opacity 200ms'
+      },
+      isDataLoaded && {
+        opacity: '1'
+      }
+    ]
+  };
+}
diff --git a/packages/experiments/src/components/Shimmer/Shimmer.tsx b/packages/experiments/src/components/Shimmer/Shimmer.tsx
new file mode 100644
index 0000000000000..5f1ca7a546d2b
--- /dev/null
+++ b/packages/experiments/src/components/Shimmer/Shimmer.tsx
@@ -0,0 +1,9 @@
+import { styled } from '../../Utilities';
+import { IShimmerProps, IShimmerStyleProps, IShimmerStyles } from './Shimmer.types';
+import { getStyles } from './Shimmer.styles';
+import { ShimmerBase } from './Shimmer.base';
+
+export const Shimmer = styled<IShimmerProps, IShimmerStyleProps, IShimmerStyles>(
+  ShimmerBase,
+  getStyles
+);
diff --git a/packages/experiments/src/components/Shimmer/Shimmer.types.ts b/packages/experiments/src/components/Shimmer/Shimmer.types.ts
new file mode 100644
index 0000000000000..e5fe6b32ca4b9
--- /dev/null
+++ b/packages/experiments/src/components/Shimmer/Shimmer.types.ts
@@ -0,0 +1,135 @@
+import * as React from 'react';
+import {
+  IStyle
+} from '../../Styling';
+import { IStyleFunction } from '../../Utilities';
+
+export interface IShimmer {
+
+}
+
+/**
+ * Shimmer component props.
+ */
+export interface IShimmerProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Optional callback to access the IShimmer interface. Use this instead of ref for accessing
+   * the public methods and properties of the component.
+   */
+  componentRef?: (component: IShimmer) => void;
+
+  /**
+   * Sets the width of the shimmer wave container in percentages.
+   * @default 100%
+   */
+  width?: number;
+
+  /**
+   * Controls when the shimmer is swapped with actual data through an animated transition.
+   * @default false
+   */
+  isDataLoaded?: boolean;
+
+  /**
+   * Elements to render in one line of the Shimmer.
+   */
+  lineElements?: Array<ICircle | IGap | ILine>;
+
+  /**
+   * Call to provide customized styling that will layer on top of the variant rules.
+   */
+  getStyles?: IStyleFunction<IShimmerStyleProps, IShimmerStyles>;
+}
+
+export interface IShimmerElement {
+  /**
+   * Required for every element you intend to use.
+   */
+  type: ShimmerElementType;
+
+  /**
+   * The hight of the element (ICircle, ILine, IGap).
+   * Read more details for each specific element.
+   */
+  height?: number;
+
+  /**
+   * The width of the element (ICircle, ILine, IGap).
+   * Read more details for each specific element.
+   */
+  width?: number;
+
+  /**
+   * The vertical alignemt of the element (ICircle, ILine, IGap).
+   * @default center
+   */
+  verticalAlign?: ShimmerElementVerticalAlign;
+}
+
+export interface ILine extends IShimmerElement {
+  /**
+   * Sets the height of the rectangle.
+   * The value will represent the height in pixels.
+   * @default 16
+   */
+  height?: number;
+
+  /**
+   * If not provided the line will the take the remaining space to fill the shimmer container.
+   * The value provided will represent the width as '%' relative to the shimmer container.
+   */
+  width?: number;
+}
+
+export interface ICircle extends IShimmerElement {
+  /**
+   * Sets the height of the circle.
+   * The value will represent the height in pixels.
+   * @default 24
+   */
+  height?: number;
+
+  /**
+   * Width of the circle element if provided will be ignored.
+   * The value will be set equal to the height of the circle for scale ratio reasons.
+   */
+  width?: number;
+}
+
+export interface IGap extends IShimmerElement {
+  /**
+   * Height for gap element will be ignored and set equal to the heighest element on the line.
+   */
+  height?: number;
+
+  /**
+   * Sets the width relative to the shimmer container width for responsiveness reasons.
+   * The value will be calculated as '%' relative the to shimmer container.
+   * @default 1%
+   */
+  width?: number;
+}
+
+export interface IShimmerStyleProps {
+  width?: number;
+  maxHeight?: number;
+  isDataLoaded?: boolean;
+}
+
+export interface IShimmerStyles {
+  root?: IStyle;
+  shimmerWrapper?: IStyle;
+  dataWrapper?: IStyle;
+}
+
+export const enum ShimmerElementType {
+  RECTANGLE = 'line',
+  CIRCLE = 'circle',
+  GAP = 'gap'
+}
+
+export const enum ShimmerElementVerticalAlign {
+  CENTER = 'center',
+  BOTTOM = 'bottom',
+  TOP = 'top'
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.base.tsx b/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.base.tsx
new file mode 100644
index 0000000000000..b5c88d108ca59
--- /dev/null
+++ b/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.base.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  classNamesFunction,
+} from '../../../Utilities';
+import {
+  IShimmerCircleProps,
+  IShimmerCircleStyleProps,
+  IShimmerCircleStyles
+} from './ShimmerCircle.styles';
+
+const getClassNames = classNamesFunction<IShimmerCircleStyleProps, IShimmerCircleStyles>();
+
+export class ShimmerCircleBase extends BaseComponent<IShimmerCircleProps, {}> {
+  public static defaultProps: IShimmerCircleProps = {
+    height: 24
+  };
+  private _classNames: {[key in keyof IShimmerCircleStyles]: string};
+  constructor(props: IShimmerCircleProps) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    const { height, getStyles, borderAlignStyle } = this.props;
+    this._classNames = getClassNames(getStyles!, { height, borderAlignStyle });
+
+    return (
+      <div className={ this._classNames.root }>
+        <svg
+          viewBox='0 0 10 10'
+          width={ height }
+          height={ height }
+          className={ this._classNames.svg }
+        >
+          <path
+            // tslint:disable-next-line:max-line-length
+            d='M0,0 L10,0 L10,10 L0,10 L0,0 Z M0,5 C0,7.76142375 2.23857625,10 5,10 C7.76142375,10 10,7.76142375 10,5 C10,2.23857625 7.76142375,2.22044605e-16 5,0 C2.23857625,-2.22044605e-16 0,2.23857625 0,5 L0,5 Z'
+          />
+        </svg>
+      </div>
+    );
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts b/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts
new file mode 100644
index 0000000000000..f3947ce7061e9
--- /dev/null
+++ b/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts
@@ -0,0 +1,74 @@
+import * as React from 'react';
+import {
+  IStyle,
+  DefaultPalette,
+  IStyleSet
+} from '../../../Styling';
+import { IStyleFunction } from '../../../Utilities';
+
+export interface IShimmerCircle {
+
+}
+
+/**
+ * ShimmerCircle component props.
+ */
+export interface IShimmerCircleProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Optional callback to access the IShimmerCircle interface. Use this instead of ref for accessing
+   * the public methods and properties of the component.
+   */
+  componentRef?: (component: IShimmerCircle) => void;
+
+  /**
+   * Sets the height of the circle.
+   * @default 24px
+   */
+  height?: number;
+
+  /**
+   * Used to
+   */
+  borderAlignStyle?: IStyleSet;
+
+  /**
+   * Call to provide customized styling that will layer on top of the variant rules.
+   */
+  getStyles?: IStyleFunction<IShimmerCircleStyleProps, IShimmerCircleStyles>;
+}
+
+export interface IShimmerCircleStyleProps {
+  height?: number;
+  borderAlignStyle?: IStyleSet;
+}
+
+export interface IShimmerCircleStyles {
+  root?: IStyle;
+  svg?: IStyle;
+}
+
+export function getStyles(props: IShimmerCircleStyleProps): IShimmerCircleStyles {
+  const {
+    height,
+    borderAlignStyle
+  } = props;
+
+  const styles: IStyleSet = !!borderAlignStyle ? borderAlignStyle : {};
+
+  return {
+    root: [
+      'ms-ShimmerCircle-wrapper',
+      {
+        width: `${height}px`,
+        height: `${height}px`,
+      },
+      styles
+    ],
+    svg: [
+      'ms-ShimmerCircle-svg',
+      {
+        fill: `${DefaultPalette.white}`
+      }
+    ]
+  };
+}
diff --git a/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.tsx b/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.tsx
new file mode 100644
index 0000000000000..594bb1b89f052
--- /dev/null
+++ b/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.tsx
@@ -0,0 +1,10 @@
+import {
+  styled
+} from '../../../Utilities';
+import { getStyles, IShimmerCircleProps, IShimmerCircleStyleProps, IShimmerCircleStyles } from './ShimmerCircle.styles';
+import { ShimmerCircleBase } from './ShimmerCircle.base';
+
+export const ShimmerCircle = styled<IShimmerCircleProps, IShimmerCircleStyleProps, IShimmerCircleStyles>(
+  ShimmerCircleBase,
+  getStyles
+);
diff --git a/packages/experiments/src/components/Shimmer/ShimmerPage.tsx b/packages/experiments/src/components/Shimmer/ShimmerPage.tsx
new file mode 100644
index 0000000000000..db429abc2c0f4
--- /dev/null
+++ b/packages/experiments/src/components/Shimmer/ShimmerPage.tsx
@@ -0,0 +1,81 @@
+import * as React from 'react';
+import {
+  ExampleCard,
+  ComponentPage,
+  IComponentDemoPageProps,
+  PropertiesTableSet
+} from '@uifabric/example-app-base';
+import { ShimmerBasicExample } from './examples/Shimmer.Basic.Example';
+import { ShimmerLoadDataExample } from './examples/Shimmer.LoadData.Example';
+
+const ShimmerBasicExampleCode = require('!raw-loader!experiments/src/components/Shimmer/examples/Shimmer.Basic.Example.tsx') as string;
+// tslint:disable-next-line:max-line-length
+const ShimmerLoadDataExampleCode = require('!raw-loader!experiments/src/components/Shimmer/examples/Shimmer.LoadData.Example.tsx') as string;
+
+export class ShimmerPage extends React.Component<IComponentDemoPageProps, {}> {
+  public render(): JSX.Element {
+    return (
+      <ComponentPage
+        title='Shimmer'
+        componentName='ShimmerExample'
+        exampleCards={
+          <div>
+            <ExampleCard
+              title='Basic Shimmer'
+              code={ ShimmerBasicExampleCode }
+            >
+              <ShimmerBasicExample />
+            </ExampleCard>
+            <ExampleCard
+              title='Enabling Data Shimmer'
+              code={ ShimmerLoadDataExampleCode }
+            >
+              <ShimmerLoadDataExample />
+            </ExampleCard>
+          </div>
+        }
+        propertiesTables={
+          <PropertiesTableSet
+            sources={ [
+              require<string>('!raw-loader!experiments/src/components/Shimmer/Shimmer.types.ts')
+            ] }
+          />
+        }
+        overview={
+          <div>
+            <p>
+              Shimmer is a temporary animation placeholder for the upcoming data from an API call
+            </p>
+          </div>
+        }
+        bestPractices={
+          <div />
+        }
+        dos={
+          <div>
+            <ul>
+              <li>
+                When construncting a shimmer line using different elements like Circle, Rectangle or Gap, best if providing widths for each
+                of them to experience a better layout looking as close as possible to real data it is replacing.
+              </li>
+              <li>
+                Try avoiding multiple shimmer lines of different widths. Each shimmer line is it's own animation and it is dependent on the
+                width you provide. So for a better visual animation keep the widths consistent.
+              </li>
+            </ul>
+          </div>
+        }
+        donts={
+          <div>
+            <ul>
+              <li>
+                Thinking... )
+              </li>
+            </ul>
+          </div>
+        }
+        isHeaderVisible={ this.props.isHeaderVisible }
+      />
+    );
+  }
+}
diff --git a/packages/experiments/src/components/Shimmer/ShimmerRectangle/ShimmerRectangle.base.tsx b/packages/experiments/src/components/Shimmer/ShimmerRectangle/ShimmerRectangle.base.tsx
new file mode 100644
index 0000000000000..961f6674860d0
--- /dev/null
+++ b/packages/experiments/src/components/Shimmer/ShimmerRectangle/ShimmerRectangle.base.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  classNamesFunction,
+} from '../../../Utilities';
+import { IShimmerRectangleProps, IShimmerRectangleStyleProps, IShimmerRectangleStyles } from './ShimmerRectangle.styles';
+import { ShimmerElementVerticalAlign } from 'experiments/lib/Shimmer';
+
+const getClassNames = classNamesFunction<IShimmerRectangleStyleProps, IShimmerRectangleStyles>();
+
+export class ShimmerRectangleBase extends BaseComponent<IShimmerRectangleProps, {}> {
+  public static defaultProps: IShimmerRectangleProps = {
+    height: 16,
+    verticalAlign: ShimmerElementVerticalAlign.CENTER,
+    width: 100
+  };
+  private _classNames: {[key in keyof IShimmerRectangleStyles]: string};
+
+  constructor(props: IShimmerRectangleProps) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    const { height, getStyles, width, borderAlignStyle } = this.props;
+
+    this._classNames = getClassNames(getStyles!, { height, width, borderAlignStyle });
+
+    return (
+      <div className={ this._classNames.root } />
+    );
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Shimmer/ShimmerRectangle/ShimmerRectangle.styles.ts b/packages/experiments/src/components/Shimmer/ShimmerRectangle/ShimmerRectangle.styles.ts
new file mode 100644
index 0000000000000..19c7059c1e1d9
--- /dev/null
+++ b/packages/experiments/src/components/Shimmer/ShimmerRectangle/ShimmerRectangle.styles.ts
@@ -0,0 +1,82 @@
+import * as React from 'react';
+import {
+  IStyle,
+  IStyleSet
+} from '../../../Styling';
+import { IStyleFunction } from '../../../Utilities';
+
+export interface IShimmerRectangle {
+
+}
+
+/**
+ * ShimmerRectangle component props.
+ */
+export interface IShimmerRectangleProps extends React.AllHTMLAttributes<HTMLElement> {
+  /**
+   * Optional callback to access the IShimmerRectangle interface. Use this instead of ref for accessing
+   * the public methods and properties of the component.
+   */
+  componentRef?: (component: IShimmerRectangle) => void;
+
+  /**
+   * Sets the height of the rectangle.
+   * @default 16px
+   */
+  height?: number;
+
+  /**
+   * Sets width of the elemnts.
+   * @default 100%
+   */
+  width?: number;
+
+  /**
+   * @default center
+   */
+  verticalAlign?: string;
+
+  /**
+   * Sets custom styling of the rectangle.
+   */
+  borderAlignStyle?: IStyleSet;
+
+  /**
+   * Call to provide customized styling that will layer on top of the variant rules.
+   */
+  getStyles?: IStyleFunction<IShimmerRectangleStyleProps, IShimmerRectangleStyles>;
+}
+
+export interface IShimmerRectangleStyleProps {
+  height?: number;
+  verticalAlign?: string;
+  width?: number;
+  borderAlignStyle?: IStyleSet;
+}
+
+export interface IShimmerRectangleStyles {
+  root?: IStyle;
+}
+
+export function getStyles(props: IShimmerRectangleStyleProps): IShimmerRectangleStyles {
+  const {
+    height,
+    width,
+    borderAlignStyle
+  } = props;
+
+  const styles: IStyleSet = !!borderAlignStyle ? borderAlignStyle : {};
+
+  return {
+    root: [
+      'ms-ShimmerRectangle-line',
+      {
+        color: 'transparent',
+        width: `${width}%`,
+        height: `${height}px`,
+        boxSizing: 'content-box',
+      },
+      styles
+    ]
+  };
+}
diff --git a/packages/experiments/src/components/Shimmer/ShimmerRectangle/ShimmerRectangle.tsx b/packages/experiments/src/components/Shimmer/ShimmerRectangle/ShimmerRectangle.tsx
new file mode 100644
index 0000000000000..50b4947ae84c7
--- /dev/null
+++ b/packages/experiments/src/components/Shimmer/ShimmerRectangle/ShimmerRectangle.tsx
@@ -0,0 +1,10 @@
+import {
+  styled
+} from '../../../Utilities';
+import { getStyles, IShimmerRectangleProps, IShimmerRectangleStyleProps, IShimmerRectangleStyles } from './ShimmerRectangle.styles';
+import { ShimmerRectangleBase } from './ShimmerRectangle.base';
+
+export const ShimmerRectangle = styled<IShimmerRectangleProps, IShimmerRectangleStyleProps, IShimmerRectangleStyles>(
+  ShimmerRectangleBase,
+  getStyles
+);
diff --git a/packages/experiments/src/components/Shimmer/examples/Shimmer.Application.Example.tsx b/packages/experiments/src/components/Shimmer/examples/Shimmer.Application.Example.tsx
new file mode 100644
index 0000000000000..6eddf4414c785
--- /dev/null
+++ b/packages/experiments/src/components/Shimmer/examples/Shimmer.Application.Example.tsx
@@ -0,0 +1,113 @@
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
+import {
+  HoverCard,
+  IExpandingCardProps
+} from 'office-ui-fabric-react/lib/HoverCard';
+import { DetailsList, buildColumns, IColumn } from 'office-ui-fabric-react/lib/DetailsList';
+import { autobind } from 'office-ui-fabric-react/lib/Utilities';
+import { createListItems } from '@uifabric/example-app-base';
+import './Shimmer.Example.scss';
+
+export interface IItem {
+  [index: string]: string | number;
+  thumbnail: string;
+  key: string;
+  name: string;
+  description: string;
+  color: string;
+  shape: string;
+  location: string;
+  width: number;
+  height: number;
+}
+
+let _items: IItem[];
+
+export interface IShimmerApplicationExampleState {
+  items?: IItem[];
+  columns?: IColumn[];
+}
+
+export class ShimmerApplicationExample extends BaseComponent<{}, IShimmerApplicationExampleState> {
+
+  constructor(props: {}) {
+    super(props);
+
+    _items = _items || createListItems(10);
+
+    this.state = {
+      items: _items,
+      columns: _buildColumns()
+    };
+  }
+
+  public render(): JSX.Element {
+    const { items, columns } = this.state;
+
+    return (
+      <div>
+        <p> Hover over location of a row item to see the card </p>
+        <DetailsList
+          setKey='hoverSet'
+          items={ items! }
+          columns={ columns }
+          onRenderItemColumn={ this._onRenderItemColumn }
+        />
+      </div>
+    );
+  }
+
+  @autobind
+  private _onRenderItemColumn(item: IItem, index: number, column: IColumn): JSX.Element | string | number {
+    const expandingCardProps: IExpandingCardProps = {
+      onRenderCompactCard: this._onRenderCompactCard,
+      onRenderExpandedCard: this._onRenderExpandedCard,
+      renderData: item
+    };
+
+    if (column.key === 'key') {
+      return (
+        <HoverCard id='myID1' expandingCardProps={ expandingCardProps } instantOpenOnClick={ true }>
+          <div className='HoverCard-item'>
+            { item.key }
+          </div>
+        </HoverCard>
+      );
+    }
+
+    return item[column.key];
+  }
+
+  @autobind
+  private _onRenderCompactCard(item: IItem): JSX.Element {
+    return (
+      <div className='hoverCardExample-compactCard'>
+        <a target='_blank' href={ `http://wikipedia.org/wiki/${item.location}` }>
+          { item.location }
+        </a>
+      </div>
+    );
+  }
+
+  @autobind
+  private _onRenderExpandedCard(item: IItem): JSX.Element {
+    const { items, columns } = this.state;
+    return (
+      <div className='hoverCardExample-expandedCard'>
+        { item.description }
+        <DetailsList
+          setKey='expandedCardSet'
+          items={ items! }
+          columns={ columns }
+        />
+      </div>
+    );
+  }
+}
+
+function _buildColumns(): IColumn[] {
+  return buildColumns(_items).filter((column: IColumn) => column.name === 'location' || column.name === 'key');
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Shimmer/examples/Shimmer.Basic.Example.tsx b/packages/experiments/src/components/Shimmer/examples/Shimmer.Basic.Example.tsx
new file mode 100644
index 0000000000000..72f53f5c1bdd9
--- /dev/null
+++ b/packages/experiments/src/components/Shimmer/examples/Shimmer.Basic.Example.tsx
@@ -0,0 +1,82 @@
+import * as React from 'react';
+import {
+  Shimmer,
+  ShimmerElementType as ElemType,
+  ShimmerElementVerticalAlign as ElemVerticalAlign
+} from 'experiments/lib/Shimmer';
+
+export class ShimmerBasicExample extends React.Component<{}, {}> {
+
+  constructor(props: {}) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+
+    return (
+      // tslint:disable-next-line:jsx-ban-props
+      <div style={ { padding: '2px' } }>
+        Generic Shimmer with no elements provided.
+        <Shimmer />
+        <Shimmer
+          width={ 75 }
+        />
+        <Shimmer
+          width={ 50 }
+        />
+        Custom Shimmer with elements provided.
+        <Shimmer
+          lineElements={ [
+            { type: ElemType.CIRCLE, height: 24 },
+            { type: ElemType.GAP, width: 2 },
+            { type: ElemType.RECTANGLE, height: 16 },
+          ] }
+        />
+        Notice how the same elements change relative to the shimmer width provided.
+        <Shimmer
+          lineElements={ [
+            { type: ElemType.CIRCLE, height: 24 },
+            { type: ElemType.GAP, width: 2 },
+            { type: ElemType.RECTANGLE, height: 16, width: 20 },
+            { type: ElemType.GAP, width: 5 },
+            { type: ElemType.RECTANGLE, height: 16, width: 20 },
+            { type: ElemType.GAP, width: 10 },
+            { type: ElemType.RECTANGLE, height: 16, width: 15 },
+            { type: ElemType.GAP, width: 10 },
+            { type: ElemType.RECTANGLE, height: 16 }
+          ] }
+        />
+        <Shimmer
+          width={ 70 }
+          lineElements={ [
+            { type: ElemType.CIRCLE, height: 24 },
+            { type: ElemType.GAP, width: 2 },
+            { type: ElemType.RECTANGLE, height: 16, width: 20 },
+            { type: ElemType.GAP, width: 5 },
+            { type: ElemType.RECTANGLE, height: 16, width: 20 },
+            { type: ElemType.GAP, width: 10 },
+            { type: ElemType.RECTANGLE, height: 16, width: 15 },
+            { type: ElemType.GAP, width: 10 },
+            { type: ElemType.RECTANGLE, height: 16 }
+          ] }
+        />
+        Variations of vertical alignment for Circles and Rectangles.
+        <Shimmer
+          lineElements={ [
+            { type: ElemType.CIRCLE, height: 24 },
+            { type: ElemType.GAP, width: 2 },
+            { type: ElemType.CIRCLE, height: 15, verticalAlign: ElemVerticalAlign.TOP },
+            { type: ElemType.GAP, width: 2 },
+            { type: ElemType.RECTANGLE, verticalAlign: ElemVerticalAlign.BOTTOM, width: 20 },
+            { type: ElemType.GAP, width: 2 },
+            { type: ElemType.RECTANGLE, height: 5, verticalAlign: ElemVerticalAlign.TOP, width: 20 },
+            { type: ElemType.GAP, width: 2 },
+            { type: ElemType.RECTANGLE, height: 16, width: 15 },
+            { type: ElemType.GAP, width: 2 },
+            { type: ElemType.RECTANGLE, height: 10, verticalAlign: ElemVerticalAlign.BOTTOM }
+          ] }
+        />
+      </div>
+    );
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Shimmer/examples/Shimmer.Example.scss b/packages/experiments/src/components/Shimmer/examples/Shimmer.Example.scss
new file mode 100644
index 0000000000000..501e970ec958c
--- /dev/null
+++ b/packages/experiments/src/components/Shimmer/examples/Shimmer.Example.scss
@@ -0,0 +1,17 @@
+:global {
+  .hoverCardExample-compactCard {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+
+  .hoverCardExample-expandedCard {
+    padding: 16px 24px;
+  }
+
+  .HoverCard-item:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Shimmer/examples/Shimmer.LoadData.Example.tsx b/packages/experiments/src/components/Shimmer/examples/Shimmer.LoadData.Example.tsx
new file mode 100644
index 0000000000000..b0db227a6fded
--- /dev/null
+++ b/packages/experiments/src/components/Shimmer/examples/Shimmer.LoadData.Example.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Shimmer } from 'experiments/lib/Shimmer';
+import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
+
+export interface IShimmerLoadDataExample {
+  isDataLoaded?: boolean;
+}
+
+export class ShimmerLoadDataExample extends React.Component<{}, IShimmerLoadDataExample> {
+
+  constructor(props: {}) {
+    super(props);
+    this.state = {
+      isDataLoaded: false
+    };
+  }
+
+  public render(): JSX.Element {
+    const {
+      isDataLoaded: dataLoaded,
+    } = this.state;
+
+    return (
+      // tslint:disable-next-line:jsx-ban-props
+      <div style={ { padding: '2px' } }>
+        <Shimmer
+          isDataLoaded={ dataLoaded }
+        >
+          <div>Data Loaded Data Loaded Data Loaded Data Loaded Data Loaded Data Loaded Data Loaded</div>
+        </Shimmer>
+        <Toggle
+          label='Load data switch'
+          checked={ dataLoaded }
+          // tslint:disable-next-line:jsx-no-lambda
+          onChanged={ (isDataLoaded: boolean) => this.setState({ isDataLoaded }) }
+          onText='Loaded'
+          offText='Loading...'
+        />
+      </div>
+    );
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Shimmer/index.ts b/packages/experiments/src/components/Shimmer/index.ts
new file mode 100644
index 0000000000000..ff79f4663bead
--- /dev/null
+++ b/packages/experiments/src/components/Shimmer/index.ts
@@ -0,0 +1,2 @@
+export * from './Shimmer';
+export * from './Shimmer.types';
\ No newline at end of file
diff --git a/packages/experiments/src/components/StaticList/StaticList.tsx b/packages/experiments/src/components/StaticList/StaticList.tsx
index 3c6ca4f5938e9..d82897bdf2d84 100644
--- a/packages/experiments/src/components/StaticList/StaticList.tsx
+++ b/packages/experiments/src/components/StaticList/StaticList.tsx
@@ -5,7 +5,7 @@ import { IStaticListProps } from './StaticList.types';
 
 import * as stylesImport from './StaticList.scss';
 
-export class StaticList<TItem extends IObjectWithKey> extends React.PureComponent<IStaticListProps<TItem>> {
+export class StaticList<TItem extends IObjectWithKey> extends React.Component<IStaticListProps<TItem>> {
   public render(): JSX.Element {
     const {
       className,
diff --git a/packages/experiments/src/components/TilesList/TilesList.tsx b/packages/experiments/src/components/TilesList/TilesList.tsx
index e68fd816ed4a1..13dfac23629ef 100644
--- a/packages/experiments/src/components/TilesList/TilesList.tsx
+++ b/packages/experiments/src/components/TilesList/TilesList.tsx
@@ -148,9 +148,13 @@ export class TilesList<TItem> extends React.Component<ITilesListProps<TItem>, IT
         className={ css(TilesListStyles.cell) }
         // tslint:disable-next-line:jsx-ban-props
         style={
-          {
-            paddingTop: `${(100 * itemHeightOverWidth).toFixed(2)}%`
-          }
+          item.grid.mode === TilesGridMode.fillHorizontal ?
+            {
+              height: `${item.grid.minRowHeight}px`
+            } :
+            {
+              paddingTop: `${(100 * itemHeightOverWidth).toFixed(2)}%`
+            }
         }
       >
         <div
@@ -214,12 +218,17 @@ export class TilesList<TItem> extends React.Component<ITilesListProps<TItem>, IT
             scaleFactor
           } = currentRow;
 
-          if (grid.mode === TilesGridMode.fill && (!currentRow.isLastRow || scaleFactor <= grid.maxScaleFactor)) {
+          if ((grid.mode === TilesGridMode.fill ||
+            grid.mode === TilesGridMode.fillHorizontal) &&
+            (!currentRow.isLastRow ||
+              scaleFactor <= grid.maxScaleFactor)) {
             const finalScaleFactor = Math.min(grid.maxScaleFactor, scaleFactor);
 
             finalSize = {
               width: finalSize.width * finalScaleFactor,
-              height: finalSize.height * finalScaleFactor
+              height: grid.mode === TilesGridMode.fill ?
+                finalSize.height * finalScaleFactor :
+                grid.minRowHeight
             };
           }
         }
@@ -390,7 +399,10 @@ export class TilesList<TItem> extends React.Component<ITilesListProps<TItem>, IT
         currentRow.scaleFactor = (boundsWidth - totalMargin) / (rowWidth - totalMargin);
       }
 
-      if (!isAtGridEnd && currentRow.scaleFactor > (grid.mode === TilesGridMode.fill ? grid.maxScaleFactor : 1)) {
+      if (!isAtGridEnd && currentRow.scaleFactor > (
+        grid.mode === TilesGridMode.fill || grid.mode === TilesGridMode.fillHorizontal ?
+          grid.maxScaleFactor :
+          1)) {
         // If the last computed row is not the end of the grid, and the content cannot scale to fit the width,
         // declare these cells as 'extra' and let them be pushed into the next page.
         extraCells = cells.slice(rowStart, i);
@@ -442,7 +454,7 @@ export class TilesList<TItem> extends React.Component<ITilesListProps<TItem>, IT
 
     const itemWidthOverHeight = item.aspectRatio || 1;
     const margin = grid.spacing / 2;
-    const isFill = gridMode === TilesGridMode.fill;
+    const isFill = gridMode === TilesGridMode.fill || gridMode === TilesGridMode.fillHorizontal;
     const width = itemWidthOverHeight * grid.minRowHeight;
 
     return {
diff --git a/packages/experiments/src/components/TilesList/TilesList.types.ts b/packages/experiments/src/components/TilesList/TilesList.types.ts
index 622e5e032ae27..43636b91c24cf 100644
--- a/packages/experiments/src/components/TilesList/TilesList.types.ts
+++ b/packages/experiments/src/components/TilesList/TilesList.types.ts
@@ -36,9 +36,13 @@ export const enum TilesGridMode {
    */
   stack,
   /**
-   * Items in the row are stretched if necessary to fill the row.
+   * Items in the row are stretched proportionally if necessary to fill the row.
    */
-  fill
+  fill,
+  /**
+   * Items in the row are stretched horizontally only if necessary to fill the row.
+   */
+  fillHorizontal
 }
 
 export interface ITilesGridSegment<TItem> {
diff --git a/packages/experiments/src/components/TilesList/examples/ExampleHelpers.tsx b/packages/experiments/src/components/TilesList/examples/ExampleHelpers.tsx
index ef41583327410..c6267a4d0974d 100644
--- a/packages/experiments/src/components/TilesList/examples/ExampleHelpers.tsx
+++ b/packages/experiments/src/components/TilesList/examples/ExampleHelpers.tsx
@@ -78,10 +78,12 @@ export function createGroup(items: IExampleItem[], type: 'document' | 'media', i
 
 export function getTileCells(groups: IExampleGroup[], {
   onRenderCell,
-  onRenderHeader
+  onRenderHeader,
+  size = 'large'
 }: {
     onRenderHeader: (item: IExampleItem) => JSX.Element;
     onRenderCell: (item: IExampleItem, finalSize?: ITileSize) => JSX.Element;
+    size?: 'large' | 'small'
   }): (ITilesGridSegment<IExampleItem> | ITilesGridItem<IExampleItem>)[] {
   const items: (ITilesGridSegment<IExampleItem> | ITilesGridItem<IExampleItem>)[] = [];
 
@@ -89,9 +91,9 @@ export function getTileCells(groups: IExampleGroup[], {
     const header: ITilesGridItem<IExampleItem> = {
       key: `header-${group.key}`,
       content: {
-        key: '',
+        key: group.key,
         aspectRatio: 1,
-        name: lorem(6),
+        name: group.name,
         index: group.index
       },
       onRender: onRenderHeader
@@ -118,7 +120,9 @@ export function getTileCells(groups: IExampleGroup[], {
       marginBottom: 40,
       minRowHeight: 171,
       mode: group.type === 'document' ?
-        TilesGridMode.stack :
+        size === 'small' ?
+          TilesGridMode.fillHorizontal :
+          TilesGridMode.stack :
         TilesGridMode.fill,
       key: group.key
     });
diff --git a/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx b/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx
index 79184324579f9..75d6c43b68243 100644
--- a/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx
+++ b/packages/experiments/src/components/VirtualizedList/VirtualizedList.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { IVirtualizedListProps } from './VirtualizedList.types';
 import { IScrollContainerContext, ScrollContainerContextTypes } from '../../utilities/scrolling/ScrollContainer';
 import { IObjectWithKey } from 'office-ui-fabric-react/lib/Selection';
-import { BaseComponent, getParent, css, autobind } from 'office-ui-fabric-react/lib/Utilities';
+import { BaseComponent, getParent, css, autobind, createRef } from 'office-ui-fabric-react/lib/Utilities';
 
 interface IRange {
   /** Start of range */
@@ -26,7 +26,7 @@ export class VirtualizedList<TItem extends IObjectWithKey> extends BaseComponent
   public static contextTypes: typeof ScrollContainerContextTypes = ScrollContainerContextTypes;
   public context: IScrollContainerContext;
 
-  private _root: HTMLElement;
+  private _root = createRef<HTMLDivElement>();
 
   private _spacerElements: { [key: string]: HTMLElement } = {};
 
@@ -80,7 +80,7 @@ export class VirtualizedList<TItem extends IObjectWithKey> extends BaseComponent
     return (
       <div
         className={ css('ms-VirtualizedList', className) }
-        ref={ this._resolveRef('_root') }
+        ref={ this._root }
       >
         { items }
       </div>
@@ -213,7 +213,7 @@ export class VirtualizedList<TItem extends IObjectWithKey> extends BaseComponent
   private _onFocus(ev: React.FocusEvent<HTMLDivElement>): void {
     let target = ev.target as HTMLElement;
 
-    while (target !== this._root) {
+    while (target !== this._root.value) {
       let indexString = target.getAttribute('data-selection-index');
 
       if (indexString) {
diff --git a/packages/experiments/src/components/signals/Signals.tsx b/packages/experiments/src/components/signals/Signals.tsx
index 34e6037bfe556..5b7622957e6a1 100644
--- a/packages/experiments/src/components/signals/Signals.tsx
+++ b/packages/experiments/src/components/signals/Signals.tsx
@@ -201,7 +201,7 @@ export const MalwareDetectedSignal: Signal = (props: ISignalProps): JSX.Element
     <Icon
       ariaLabel={ props.ariaLabel }
       className={ css(SignalStyles.signal, SignalsStyles.malwareDetected) }
-      iconName='ATPLogo'
+      iconName='BlockedSite'
     />
   );
 };
diff --git a/packages/experiments/src/demo/AppDefinition.tsx b/packages/experiments/src/demo/AppDefinition.tsx
index 705d2e5420d29..4452a2655f980 100644
--- a/packages/experiments/src/demo/AppDefinition.tsx
+++ b/packages/experiments/src/demo/AppDefinition.tsx
@@ -10,18 +10,6 @@ export const AppDefinition: IAppDefinition = {
   examplePages: [
     {
       links: [
-        {
-          component: require<any>('../components/PositioningContainer/PositioningContainerPage').PositioningContainerPage,
-          key: 'PositioningContainer',
-          name: 'PositioningContainer',
-          url: '#/examples/PositioningContainer'
-        },
-        {
-          component: require<any>('../components/Coachmark/CoachmarkPage').CoachmarkPage,
-          key: 'Coachmark',
-          name: 'Coachmark',
-          url: '#/examples/coachmark'
-        },
         {
           component: require<any>('../components/CommandBar/CommandBarPage').CommandBarPage,
           key: 'CommandBar',
@@ -46,6 +34,18 @@ export const AppDefinition: IAppDefinition = {
           name: 'FileTypeIcon',
           url: '#/examples/filetypeicon'
         },
+        {
+          component: require<any>('../components/Keytip/KeytipPage').KeytipPage,
+          key: 'Keytip',
+          name: 'Keytip',
+          url: '#/examples/keytip'
+        },
+        {
+          component: require<any>('../components/KeytipLayer/KeytipLayerPage').KeytipLayerPage,
+          key: 'KeytipLayer',
+          name: 'KeytipLayer',
+          url: '#/examples/keytipLayer'
+        },
         {
           component: require<any>('../components/LayoutGroup/LayoutGroupPage').LayoutGroupPage,
           key: 'LayoutGroup',
@@ -70,6 +70,12 @@ export const AppDefinition: IAppDefinition = {
           name: 'TilesList',
           url: '#/examples/tileslist'
         },
+        {
+          component: require<any>('../components/Shimmer/ShimmerPage').ShimmerPage,
+          key: 'Shimmer',
+          name: 'Shimmer',
+          url: '#/examples/shimmer'
+        },
         {
           component: require<any>('../components/FloatingPicker/PeoplePicker/FloatingPeoplePickerPage').FloatingPeoplePickerPage,
           key: 'FloatingPeoplePicker',
diff --git a/packages/experiments/src/index.ts b/packages/experiments/src/index.ts
index 584e8cffa5718..d5163bf4ed8cb 100644
--- a/packages/experiments/src/index.ts
+++ b/packages/experiments/src/index.ts
@@ -6,4 +6,7 @@ export { TilesList } from './TilesList';
 export { CommandBar as ExperimentCommandBar } from './CommandBar';
 export { FloatingPeoplePicker } from './FloatingPicker';
 export { SelectedPeopleList } from './SelectedItemsList';
-export { ExtendedPeoplePicker } from './ExtendedPicker';
\ No newline at end of file
+export { ExtendedPeoplePicker } from './ExtendedPicker';
+export { Keytip } from './Keytip';
+export { KeytipLayer } from './KeytipLayer';
+export { Shimmer } from './Shimmer';
\ No newline at end of file
diff --git a/packages/experiments/src/utilities/keysequence/IKeySequence.test.ts b/packages/experiments/src/utilities/keysequence/IKeySequence.test.ts
new file mode 100644
index 0000000000000..0e1c057e9d82a
--- /dev/null
+++ b/packages/experiments/src/utilities/keysequence/IKeySequence.test.ts
@@ -0,0 +1,157 @@
+import {
+  IKeySequence,
+  keySequencesAreEqual,
+  keySequenceStartsWith,
+  keySequencesContain,
+  convertSequencesToKeytipID,
+  fullKeySequencesAreEqual
+} from './IKeySequence';
+import { ktpFullPrefix, ktpSeparator } from '../keytip/KeytipUtils';
+
+describe('IKeySequence', () => {
+
+  describe('keySequencesAreEqual', () => {
+    it('empty key', () => {
+      let seq1: IKeySequence = { keys: ['a'] };
+      let seq2: IKeySequence = { keys: [] };
+      expect(keySequencesAreEqual(seq1, seq2)).toEqual(false);
+    });
+
+    it('single key', () => {
+      let seq1: IKeySequence = { keys: ['a'] };
+      let seq2: IKeySequence = { keys: ['a'] };
+      let seq3: IKeySequence = { keys: ['b'] };
+      expect(keySequencesAreEqual(seq1, seq2)).toEqual(true);
+      expect(keySequencesAreEqual(seq1, seq3)).toEqual(false);
+    });
+
+    it('multiple keys', () => {
+      let seq1: IKeySequence = { keys: ['a', 'b'] };
+      let seq2: IKeySequence = { keys: ['a', 'b'] };
+      let seq3: IKeySequence = { keys: ['b', 'a'] };
+      expect(keySequencesAreEqual(seq1, seq2)).toEqual(true);
+      expect(keySequencesAreEqual(seq1, seq3)).toEqual(false);
+    });
+
+    it('should be false when sequences are different length', () => {
+      let seq1: IKeySequence = { keys: ['a'] };
+      let seq2: IKeySequence = { keys: ['a', 'b'] };
+      expect(keySequencesAreEqual(seq1, seq2)).toEqual(false);
+    });
+  });
+
+  describe('keySequencesContain', () => {
+    it('empty sequences', () => {
+      let seq1: IKeySequence = { keys: ['a'] };
+      let sequences: IKeySequence[] = [{ keys: [] }];
+      expect(keySequencesContain(sequences, seq1)).toEqual(false);
+    });
+
+    it('empty key sequence', () => {
+      let seq1: IKeySequence = { keys: [] };
+      let sequences: IKeySequence[] = [{ keys: ['a'] }, { keys: ['b'] }];
+      expect(keySequencesContain(sequences, seq1)).toEqual(false);
+    });
+
+    it('single key', () => {
+      let seq1: IKeySequence = { keys: ['a'] };
+      let sequences: IKeySequence[] = [{ keys: ['a'] }, { keys: ['b'] }];
+      let sequences2: IKeySequence[] = [{ keys: ['a', 'b'] }];
+      expect(keySequencesContain(sequences, seq1)).toEqual(true);
+      expect(keySequencesContain(sequences2, seq1)).toEqual(false);
+    });
+
+    it('multiple keys', () => {
+      let seq1: IKeySequence = { keys: ['a', 'b'] };
+      let sequences: IKeySequence[] = [{ keys: ['a'] }, { keys: ['b'] }];
+      let sequences2: IKeySequence[] = [{ keys: ['a', 'b'] }, { keys: ['c', 'd'] }];
+      expect(keySequencesContain(sequences, seq1)).toEqual(false);
+      expect(keySequencesContain(sequences2, seq1)).toEqual(true);
+    });
+  });
+
+  describe('keySequencesStartsWith', () => {
+    it('false when the key sequence for seq1 is zero ', () => {
+      let seq1: IKeySequence = { keys: [] };
+      let seq2: IKeySequence = { keys: ['b'] };
+      expect(keySequenceStartsWith(seq1, seq2)).toEqual(false);
+    });
+
+    it('false when the key sequence for seq2 is zero ', () => {
+      let seq1: IKeySequence = { keys: ['a'] };
+      let seq2: IKeySequence = { keys: [] };
+      expect(keySequenceStartsWith(seq1, seq2)).toEqual(false);
+    });
+
+    it('false when sequence start is different', () => {
+      let seq1: IKeySequence = { keys: ['a'] };
+      let seq2: IKeySequence = { keys: ['b'] };
+      expect(keySequenceStartsWith(seq1, seq2)).toEqual(false);
+    });
+
+    it('true when sequences are equal', () => {
+      let seq1: IKeySequence = { keys: ['a'] };
+      let seq2: IKeySequence = { keys: ['a'] };
+      expect(keySequenceStartsWith(seq1, seq2)).toEqual(true);
+    });
+
+    it('true when sequence1 is a subset of sequence 2', () => {
+      let seq1: IKeySequence = { keys: ['a'] };
+      let seq2: IKeySequence = { keys: ['a', 'b'] };
+      expect(keySequenceStartsWith(seq1, seq2)).toEqual(true);
+    });
+
+    it('true when sequence2 is a subset of sequence 1', () => {
+      let seq1: IKeySequence = { keys: ['a', 'b'] };
+      let seq2: IKeySequence = { keys: ['a'] };
+      expect(keySequenceStartsWith(seq1, seq2)).toEqual(true);
+    });
+  });
+
+  describe('convertSequencesToKeytipID', () => {
+    it('for one singular key sequence', () => {
+      let keySequence: IKeySequence[] = [{ keys: ['a'] }];
+      let keytipID = convertSequencesToKeytipID(keySequence);
+      expect(keytipID).toEqual(ktpFullPrefix + 'a');
+    });
+
+    it('for one complex key sequence', () => {
+      let complexKeySequence: IKeySequence[] = [{ keys: ['a', 'd'] }];
+      let keytipID = convertSequencesToKeytipID(complexKeySequence);
+      expect(keytipID).toEqual(ktpFullPrefix + 'a' + ktpSeparator + 'd');
+    });
+
+    it('for multiple singular key sequences', () => {
+      let keySequences: IKeySequence[] = [{ keys: ['a'] }, { keys: ['c'] }];
+      let keytipID = convertSequencesToKeytipID(keySequences);
+      expect(keytipID).toEqual(ktpFullPrefix + 'a' + ktpSeparator + 'c');
+    });
+
+    it('for multiple complex key sequences', () => {
+      let complexKeySequences: IKeySequence[] = [{ keys: ['a', 'n'] }, { keys: ['c', 'b'] }];
+      let keytipID = convertSequencesToKeytipID(complexKeySequences);
+      expect(keytipID).toEqual(ktpFullPrefix + 'a' +
+        ktpSeparator + 'n' + ktpSeparator +
+        'c' + ktpSeparator + 'b');
+    });
+  });
+
+  describe('fullKeySequencesAreEqual', () => {
+    it('different lengths should not be equal', () => {
+      let keySequences1: IKeySequence[] = [{ keys: ['a', 'n'] }, { keys: ['c', 'b'] }];
+      let keySequences2: IKeySequence[] = [{ keys: ['a', 'n'] }];
+      expect(fullKeySequencesAreEqual(keySequences1, keySequences2)).toEqual(false);
+    });
+
+    it('should correctly be equal', () => {
+      let keySequences1: IKeySequence[] = [{ keys: ['a', 'n'] }, { keys: ['c', 'b'] }];
+      let keySequences2: IKeySequence[] = [{ keys: ['a', 'n'] }, { keys: ['c', 'b'] }];
+      let keySequences3: IKeySequence[] = [{ keys: ['n', 'a'] }, { keys: ['c', 'b'] }];
+      let keySequences4: IKeySequence[] = [{ keys: ['a'] }, { keys: ['c', 'b'] }];
+
+      expect(fullKeySequencesAreEqual(keySequences1, keySequences2)).toEqual(true);
+      expect(fullKeySequencesAreEqual(keySequences1, keySequences3)).toEqual(false);
+      expect(fullKeySequencesAreEqual(keySequences1, keySequences4)).toEqual(false);
+    });
+  });
+});
\ No newline at end of file
diff --git a/packages/experiments/src/utilities/keysequence/IKeySequence.ts b/packages/experiments/src/utilities/keysequence/IKeySequence.ts
new file mode 100644
index 0000000000000..f7f6e7a57731e
--- /dev/null
+++ b/packages/experiments/src/utilities/keysequence/IKeySequence.ts
@@ -0,0 +1,83 @@
+import { ktpPrefix, ktpSeparator } from '../keytip/KeytipUtils';
+import { find } from '../../Utilities';
+
+export interface IKeySequence {
+  keys: string[];
+}
+
+/**
+ * Tests for equality between two IKeySequences
+ *
+ * @param seq1 - First IKeySequence
+ * @param seq2 - Second IKeySequence
+ * @returns {boolean} T/F if the two sequences are equal
+ */
+export function keySequencesAreEqual(seq1: IKeySequence, seq2: IKeySequence): boolean {
+  let keyCodes1 = seq1.keys.join();
+  let keyCodes2 = seq2.keys.join();
+  return keyCodes1 === keyCodes2;
+}
+
+/**
+ * Tests for equality between two arrays of IKeySequence
+ *
+ * @param seq1 - First IKeySequence[]
+ * @param seq2 - Second IKeySequence[]
+ * @returns {boolean} T/F if the sequences are equal
+ */
+export function fullKeySequencesAreEqual(seq1: IKeySequence[], seq2: IKeySequence[]): boolean {
+  if (seq1.length !== seq2.length) {
+    return false;
+  }
+
+  for (let i = 0; i < seq1.length; i++) {
+    if (!keySequencesAreEqual(seq1[i], seq2[i])) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+/**
+ * Tests if 'seq' is present in 'sequences'
+ *
+ * @param sequences - Array of IKeySequence
+ * @param seq - IKeySequence to check for in 'sequences'
+ * @returns {boolean} T/F if 'sequences' contains 'seq'
+ */
+export function keySequencesContain(sequences: IKeySequence[], seq: IKeySequence): boolean {
+  return !!find(sequences, (sequence: IKeySequence) => {
+    return keySequencesAreEqual(sequence, seq);
+  });
+}
+
+/**
+ * Method returns true if the key squence of the object with minimum length is in the other key sequence.
+ * If the minium length is zero, then it will default to false.
+ *
+ * @param seq1 - First IKeySequence
+ * @param seq2 - Second IKeySequence
+ * @returns {boolean} T/F if seq1 starts with seq2, or vice versa
+ */
+export function keySequenceStartsWith(seq1: IKeySequence, seq2: IKeySequence): boolean {
+  let keyCodes1 = seq1.keys.join();
+  let keyCodes2 = seq2.keys.join();
+  if (keyCodes1.length === 0 || keyCodes2.length === 0) {
+    return false;
+  }
+  return keyCodes1.indexOf(keyCodes2) === 0 || keyCodes2.indexOf(keyCodes1) === 0;
+}
+
+/**
+ * Converts a whole set of KeySequences into one keytip ID, which will be the ID for the last keytip sequence specified
+ * keySequences should not include the initial keytip 'start' sequence
+ *
+ * @param keySequences - Full path of IKeySequences for one keytip
+ * @returns {string} String to use for the keytip ID
+ */
+export function convertSequencesToKeytipID(keySequences: IKeySequence[]): string {
+  return keySequences.reduce((prevValue: string, keySequence: IKeySequence): string => {
+    return prevValue + ktpSeparator + keySequence.keys.join(ktpSeparator);
+  }, ktpPrefix);
+}
\ No newline at end of file
diff --git a/packages/experiments/src/utilities/keysequence/IKeytipTransitionKey.test.ts b/packages/experiments/src/utilities/keysequence/IKeytipTransitionKey.test.ts
new file mode 100644
index 0000000000000..0024e7ae23188
--- /dev/null
+++ b/packages/experiments/src/utilities/keysequence/IKeytipTransitionKey.test.ts
@@ -0,0 +1,59 @@
+import { IKeytipTransitionKey, transitionKeysAreEqual, transitionKeysContain } from './IKeytipTransitionKey';
+import { KeytipTransitionModifier } from '../../Keytip';
+
+describe('IKeytipTransitionKey', () => {
+
+  describe('transitionKeysAreEqual', () => {
+    it('key only equality', () => {
+      let key1: IKeytipTransitionKey = { key: 'a' };
+      let key2: IKeytipTransitionKey = { key: 'b' };
+      let key3: IKeytipTransitionKey = { key: 'a' };
+
+      expect(transitionKeysAreEqual(key1, key2)).toEqual(false);
+      expect(transitionKeysAreEqual(key1, key3)).toEqual(true);
+    });
+
+    it('key and modifier equality', () => {
+      let key1: IKeytipTransitionKey = { key: 'a', modifierKeys: [KeytipTransitionModifier.alt] };
+      let key2: IKeytipTransitionKey = { key: 'a' };
+      let key3: IKeytipTransitionKey = { key: 'a', modifierKeys: [KeytipTransitionModifier.ctrl] };
+      let key4: IKeytipTransitionKey = { key: 'a', modifierKeys: [KeytipTransitionModifier.alt, KeytipTransitionModifier.shift] };
+      let key5: IKeytipTransitionKey = { key: 'a', modifierKeys: [KeytipTransitionModifier.shift, KeytipTransitionModifier.alt] };
+
+      expect(transitionKeysAreEqual(key1, key2)).toEqual(false);
+      expect(transitionKeysAreEqual(key1, key3)).toEqual(false);
+      expect(transitionKeysAreEqual(key1, key4)).toEqual(false);
+      // Order doesn't matter
+      expect(transitionKeysAreEqual(key4, key5)).toEqual(true);
+    });
+  });
+
+  describe('transitionKeySequencesContain', () => {
+    it('key only', () => {
+      let key1: IKeytipTransitionKey = { key: 'a' };
+
+      let keys1: IKeytipTransitionKey[] = [{ key: 'a' }];
+      let keys2: IKeytipTransitionKey[] = [{ key: 'a' }, { key: 'b' }];
+      let keys3: IKeytipTransitionKey[] = [{ key: 'c' }, { key: 'b' }];
+
+      expect(transitionKeysContain(keys1, key1)).toEqual(true);
+      expect(transitionKeysContain(keys2, key1)).toEqual(true);
+      expect(transitionKeysContain(keys3, key1)).toEqual(false);
+    });
+
+    it('key and modifier', () => {
+      let key1: IKeytipTransitionKey = { key: 'a', modifierKeys: [KeytipTransitionModifier.alt] };
+
+      let keys1: IKeytipTransitionKey[] = [{ key: 'a', modifierKeys: [KeytipTransitionModifier.alt] }];
+      let keys2: IKeytipTransitionKey[] = [{ key: 'b', modifierKeys: [KeytipTransitionModifier.alt] }];
+      let keys3: IKeytipTransitionKey[] = [
+        { key: 'a', modifierKeys: [KeytipTransitionModifier.alt, KeytipTransitionModifier.ctrl] },
+        { key: 'a', modifierKeys: [KeytipTransitionModifier.alt] }
+      ];
+
+      expect(transitionKeysContain(keys1, key1)).toEqual(true);
+      expect(transitionKeysContain(keys2, key1)).toEqual(false);
+      expect(transitionKeysContain(keys3, key1)).toEqual(true);
+    });
+  });
+});
\ No newline at end of file
diff --git a/packages/experiments/src/utilities/keysequence/IKeytipTransitionKey.ts b/packages/experiments/src/utilities/keysequence/IKeytipTransitionKey.ts
new file mode 100644
index 0000000000000..9c02307f9a6e7
--- /dev/null
+++ b/packages/experiments/src/utilities/keysequence/IKeytipTransitionKey.ts
@@ -0,0 +1,58 @@
+import { KeytipTransitionModifier } from '../../Keytip';
+import { find } from '../../Utilities';
+
+export interface IKeytipTransitionKey {
+  key: string;
+  modifierKeys?: KeytipTransitionModifier[];
+}
+
+/**
+ * Tests for equality between two IKeytipTransitionKeys
+ *
+ * @param key1 - First IKeytipTransitionKey
+ * @param key2 - Second IKeytipTransitionKey
+ * @returns {boolean} T/F if the transition keys are equal
+ */
+export function transitionKeysAreEqual(key1: IKeytipTransitionKey, key2: IKeytipTransitionKey): boolean {
+  if (key1.key !== key2.key) {
+    return false;
+  }
+
+  let mod1 = key1.modifierKeys;
+  let mod2 = key2.modifierKeys;
+
+  if ((!mod1 && mod2) || (mod1 && !mod2)) {
+    // Not equal if one modifier is defined and the other isn't
+    return false;
+  }
+
+  if (mod1 && mod2) {
+    if (mod1.length !== mod2.length) {
+      return false;
+    }
+
+    // Sort both arrays
+    mod1 = mod1.sort();
+    mod2 = mod2.sort();
+    for (let i = 0; i < mod1.length; i++) {
+      if (mod1[i] !== mod2[i]) {
+        return false;
+      }
+    }
+  }
+
+  return true;
+}
+
+/**
+ * Tests if 'key' is present in 'keys'
+ *
+ * @param keys - Array of IKeytipTransitionKey
+ * @param key - IKeytipTransitionKey to find in 'keys'
+ * @returns {boolean} T/F if 'keys' contains 'key'
+ */
+export function transitionKeysContain(keys: IKeytipTransitionKey[], key: IKeytipTransitionKey): boolean {
+  return !!find(keys, (transitionKey: IKeytipTransitionKey) => {
+    return transitionKeysAreEqual(transitionKey, key);
+  });
+}
\ No newline at end of file
diff --git a/packages/experiments/src/utilities/keysequence/index.ts b/packages/experiments/src/utilities/keysequence/index.ts
new file mode 100644
index 0000000000000..ce0536414968a
--- /dev/null
+++ b/packages/experiments/src/utilities/keysequence/index.ts
@@ -0,0 +1,2 @@
+export * from './IKeySequence';
+export * from './IKeytipTransitionKey';
\ No newline at end of file
diff --git a/packages/experiments/src/utilities/keytip/KeytipManager.test.tsx b/packages/experiments/src/utilities/keytip/KeytipManager.test.tsx
new file mode 100644
index 0000000000000..210b8921341a7
--- /dev/null
+++ b/packages/experiments/src/utilities/keytip/KeytipManager.test.tsx
@@ -0,0 +1,326 @@
+import * as React from 'react';
+
+import { KeytipManager } from './KeytipManager';
+import { IKeySequence, convertSequencesToKeytipID } from '../../utilities/keysequence/IKeySequence';
+import { IKeytipTransitionKey } from '../../utilities/keysequence/IKeytipTransitionKey';
+import { KeytipTree, IKeytipTreeNode } from './KeytipTree';
+import { KeytipLayer } from '../../KeytipLayer';
+import { IKeytipProps, KeytipTransitionModifier } from '../../Keytip';
+import { ktpSeparator, ktpFullPrefix } from '../../utilities/keytip/KeytipUtils';
+import { mount, ReactWrapper } from 'enzyme';
+
+const keytipStartSequences: IKeytipTransitionKey[] = [{ key: 'Meta', modifierKeys: [KeytipTransitionModifier.alt] }];
+const keytipExitSequences: IKeytipTransitionKey[] = [{ key: 'Meta', modifierKeys: [KeytipTransitionModifier.alt] }];
+const keytipReturnSequences: IKeytipTransitionKey[] = [{ key: 'Escape' }];
+const layerID = 'my-layer-id';
+const keytipIdB = ktpFullPrefix + 'b';
+const keytipIdC = ktpFullPrefix + 'c';
+const keytipIdE1 = ktpFullPrefix + 'e' + ktpSeparator + '1';
+const keytipIdE2 = ktpFullPrefix + 'e' + ktpSeparator + '2';
+const keytipOverflowIdM = ktpFullPrefix + 'o' + ktpSeparator + 'm';
+
+describe('KeytipManager', () => {
+  const keytipManager = KeytipManager.getInstance();
+  const onEnterKeytipMode: jest.Mock = jest.fn();
+  const onExitKeytipMode: jest.Mock = jest.fn();
+
+  let defaultKeytipLayer: ReactWrapper;
+
+  beforeEach(() => {
+    // Create layer
+    defaultKeytipLayer = mount(
+      <KeytipLayer
+        id={ layerID }
+        keytipStartSequences={ keytipStartSequences }
+        keytipReturnSequences={ keytipReturnSequences }
+        keytipExitSequences={ keytipExitSequences }
+        onEnterKeytipMode={ onEnterKeytipMode }
+        onExitKeytipMode={ onExitKeytipMode }
+      />
+    );
+  });
+
+  describe('getAriaDescribedBy', () => {
+
+    it('returns just the layer ID when an empty sequence is passed in', () => {
+      let keySequence: IKeySequence[] = [];
+      let ariaDescribedBy = keytipManager.getAriaDescribedBy(keySequence);
+      expect(ariaDescribedBy).toEqual(layerID);
+    });
+
+    it('for one singular key sequence', () => {
+      let keySequence: IKeySequence[] = [{ keys: ['b'] }];
+      let ariaDescribedBy = keytipManager.getAriaDescribedBy(keySequence);
+      expect(ariaDescribedBy).toEqual(layerID + ' ' + convertSequencesToKeytipID(keySequence));
+    });
+
+    it('for one complex key sequence', () => {
+      let keySequence: IKeySequence[] = [{ keys: ['b', 'c'] }];
+      let ariaDescribedBy = keytipManager.getAriaDescribedBy(keySequence);
+      expect(ariaDescribedBy).toEqual(layerID + ' ' + convertSequencesToKeytipID(keySequence));
+    });
+
+    it('for multiple singular key sequences', () => {
+      let keySequences: IKeySequence[] = [{ keys: ['b'] }, { keys: ['c'] }];
+      let ariaDescribedBy = keytipManager.getAriaDescribedBy(keySequences);
+      expect(ariaDescribedBy).toEqual(layerID +
+        ' ' + convertSequencesToKeytipID([keySequences[0]]) +
+        ' ' + convertSequencesToKeytipID(keySequences));
+    });
+
+    it('for multiple complex key sequences', () => {
+      let keySequences: IKeySequence[] = [{ keys: ['a', 'n'] }, { keys: ['c', 'b'] }];
+      let ariaDescribedBy = keytipManager.getAriaDescribedBy(keySequences);
+      expect(ariaDescribedBy).toEqual(layerID +
+        ' ' + convertSequencesToKeytipID([keySequences[0]]) +
+        ' ' + convertSequencesToKeytipID(keySequences));
+    });
+  });
+
+  describe('processInput tests', () => {
+
+    beforeEach(() => {
+      keytipManager.keytipTree = populateTreeMap(keytipManager.keytipTree, layerID);
+    });
+
+    // On Exit keytip mode
+    it('Call on exit keytip mode when we process alt + left win ', () => {
+      keytipManager.keytipTree.currentKeytip = keytipManager.keytipTree.root;
+      keytipManager.processTransitionInput({ key: 'Meta', modifierKeys: [KeytipTransitionModifier.alt] });
+      expect(onExitKeytipMode).toBeCalled();
+    });
+
+    // On Enter keytip mode
+    it('Call on enter keytip mode when we process alt + left win', () => {
+      keytipManager.processTransitionInput({ key: 'Meta', modifierKeys: [KeytipTransitionModifier.alt] });
+      expect(onEnterKeytipMode).toBeCalled();
+    });
+
+    // Return Tests
+    it('Should call on exit keytip mode because we are going back in the root', () => {
+      keytipManager.keytipTree.currentKeytip = keytipManager.keytipTree.root;
+      keytipManager.processTransitionInput({ key: 'Escape' });
+      expect(onExitKeytipMode).toBeCalled();
+    });
+
+    it('C`s Return func should be invoked and Current keytip pointer should return to equal root node', () => {
+      const onReturnC: jest.Mock = jest.fn();
+      keytipManager.keytipTree.currentKeytip = { ...keytipManager.keytipTree.nodeMap[keytipIdC], onReturn: onReturnC };
+      keytipManager.processTransitionInput({ key: 'Escape' });
+      expect(keytipManager.keytipTree.currentKeytip).toEqual(keytipManager.keytipTree.root);
+      expect(onReturnC).toBeCalled();
+    });
+
+    // Processing keys tests
+    it('Processing a leaf node should execute it`s onExecute func and trigger onExitKeytipMode', () => {
+      const onExecuteC: jest.Mock = jest.fn();
+      keytipManager.keytipTree.nodeMap[keytipIdC] = { ...keytipManager.keytipTree.nodeMap[keytipIdC], onExecute: onExecuteC };
+      keytipManager.keytipTree.currentKeytip = keytipManager.keytipTree.root;
+      keytipManager.processInput('c');
+      expect(onExecuteC).toBeCalled();
+      expect(onExitKeytipMode).toBeCalled();
+      expect(keytipManager.currentSequence.keys.length).toEqual(0);
+    });
+
+    it('Processing a node with two keys should save sequence and wait for second key', () => {
+      const onExecuteE2: jest.Mock = jest.fn();
+      keytipManager.keytipTree.nodeMap[keytipIdE2] = { ...keytipManager.keytipTree.nodeMap[keytipIdE2], onExecute: onExecuteE2 };
+      keytipManager.keytipTree.currentKeytip = keytipManager.keytipTree.root;
+      keytipManager.processInput('e');
+      // We are still waiting for second key
+      expect(keytipManager.currentSequence.keys.length).toEqual(1);
+      keytipManager.processInput('2');
+      expect(onExecuteE2).toBeCalled();
+      expect(keytipManager.currentSequence.keys.length).toEqual(0);
+      expect(onExitKeytipMode).toBeCalled();
+    });
+
+    it('Processing a node with two keys should wait for second key and if not leaf make children visible', () => {
+      const onExecuteE1: jest.Mock = jest.fn();
+      keytipManager.keytipTree.nodeMap[keytipIdE1] = { ...keytipManager.keytipTree.nodeMap[keytipIdE1], onExecute: onExecuteE1 };
+      keytipManager.keytipTree.currentKeytip = keytipManager.keytipTree.root;
+      keytipManager.processInput('e');
+      // We are still waiting for second key
+      expect(keytipManager.currentSequence.keys.length).toEqual(1);
+      keytipManager.processInput('1');
+      expect(onExecuteE1).toBeCalled();
+      // There is no more buffer in the sequence
+      expect(keytipManager.currentSequence.keys.length).toEqual(0);
+      // Children keytips should be visible
+      let childrenKeytips = getKeytips(defaultKeytipLayer, keytipManager.keytipTree.currentKeytip.children);
+      for (let childrenKeytip of childrenKeytips) {
+        expect(childrenKeytip.visible).toEqual(true);
+      }
+      // We haven't exited keytip mode (current keytip is not undefined and is set to the matched keytip)
+      expect(keytipManager.keytipTree.currentKeytip).toEqual(keytipManager.keytipTree.nodeMap[keytipIdE1]);
+    });
+
+    it('Processing a node which is not leaf but its children are not in the DOM', () => {
+      const onExecuteB: jest.Mock = jest.fn();
+      keytipManager.keytipTree.nodeMap[keytipIdB] = { ...keytipManager.keytipTree.nodeMap[keytipIdB], onExecute: onExecuteB };
+      keytipManager.keytipTree.currentKeytip = keytipManager.keytipTree.root;
+      keytipManager.processInput('b');
+      // Node B' on execute should be called
+      expect(onExecuteB).toBeCalled();
+      // There is no more buffer in the sequence
+      expect(keytipManager.currentSequence.keys.length).toEqual(0);
+      // We haven't exited keytip mode (current keytip is not undefined and is set to the matched keytip)
+      expect(keytipManager.keytipTree.currentKeytip).toEqual(keytipManager.keytipTree.nodeMap[keytipIdB]);
+    });
+
+    it('Processing a node with with a keytipLink should make currentKeytip its link', () => {
+      const onExecuteOM: jest.Mock = jest.fn();
+      let nodeOverflowM = keytipManager.keytipTree.nodeMap[keytipOverflowIdM];
+      nodeOverflowM.onExecute = onExecuteOM;
+      keytipManager.keytipTree.currentKeytip = keytipManager.keytipTree.root;
+      keytipManager.processInput('m');
+      // Expect overflow m node's execute func to be
+      expect(onExecuteOM).toBeCalled();
+    });
+  });
+
+  describe('registerKeytip', () => {
+
+    it('should automatically show Keytip when currentKeytip is its parent', () => {
+      // Create keytip b
+      const keytipSequenceB: IKeySequence[] = [{ keys: ['b'] }];
+      const keytipBProps: IKeytipProps = {
+        keySequences: keytipSequenceB,
+        content: 'B'
+      };
+      keytipManager.registerKeytip(keytipBProps);
+
+      // Set currentKeytip to 'b'
+      keytipManager.keytipTree.currentKeytip = keytipManager.keytipTree.nodeMap[keytipIdB];
+
+      // Add a node 'g' who's parent is 'b'
+      const keytipSequenceG: IKeySequence[] = [{ keys: ['b'] }, { keys: ['g'] }];
+      const keytipIdG = ktpFullPrefix + 'b' + ktpSeparator + 'g';
+      const keytipGProps: IKeytipProps = {
+        keySequences: keytipSequenceG,
+        content: 'G'
+      };
+      keytipManager.registerKeytip(keytipGProps);
+
+      // G should now be visible in the layer
+      let keytipG = getKeytips(defaultKeytipLayer, [keytipIdG]);
+      expect(keytipG).toHaveLength(1);
+      expect(keytipG[0].visible).toEqual(true);
+    });
+
+    it('should update the keytip if it has the same key sequence', () => {
+      // Create keytip b
+      const keytipSequenceB: IKeySequence[] = [{ keys: ['b'] }];
+      const keytipBProps: IKeytipProps = {
+        keySequences: keytipSequenceB,
+        content: 'B',
+        disabled: false
+      };
+      keytipManager.registerKeytip(keytipBProps);
+
+      let keytipB = getKeytips(defaultKeytipLayer, [keytipIdB]);
+      let keytipNodeB = keytipManager.keytipTree.nodeMap[keytipIdB];
+      expect(keytipB).toHaveLength(1);
+      expect(keytipB[0].disabled).toEqual(false);
+      expect(keytipB[0].content).toEqual('B');
+      expect(keytipNodeB.disabled).toEqual(false);
+
+      // Change some properties
+      keytipBProps.disabled = true;
+      keytipBProps.content = 'BEE';
+
+      // Re-register
+      keytipManager.registerKeytip(keytipBProps);
+
+      keytipB = getKeytips(defaultKeytipLayer, [keytipIdB]);
+      keytipNodeB = keytipManager.keytipTree.nodeMap[keytipIdB];
+      expect(keytipB).toHaveLength(1);
+      expect(keytipB[0].disabled).toEqual(true);
+      expect(keytipB[0].content).toEqual('BEE');
+      expect(keytipNodeB.disabled).toEqual(true);
+    });
+  });
+});
+
+function getKeytips(keytipLayer: ReactWrapper, keytipIDs?: string[]): IKeytipProps[] {
+  let currentKeytips: IKeytipProps[] = keytipLayer.state('keytips');
+  if (keytipIDs) {
+    return currentKeytips.filter((currentKeytip: IKeytipProps) => {
+      return keytipIDs.indexOf(convertSequencesToKeytipID(currentKeytip.keySequences)) !== -1;
+    });
+  } else {
+    return currentKeytips;
+  }
+}
+
+function populateTreeMap(keytipTree: KeytipTree, rootId: string): KeytipTree {
+  /**
+   *   Tree should end up looking like:
+   *
+   *            a
+   *     /     /   |   \   \   \
+   *     b   c    e1   e2   o   m
+   *             / \        |
+   *            d   f       m
+   *
+   */
+
+  const keytipSequenceB: IKeySequence = { keys: ['b'] };
+  // Node C
+  const keytipSequenceC: IKeySequence = { keys: ['c'] };
+
+  // Node D
+  const keytipIdD = ktpFullPrefix + 'e' + ktpSeparator + '1' + ktpSeparator + 'd';
+  const keytipSequenceD: IKeySequence = { keys: ['d'] };
+
+  // Node F
+  const keytipIdF = ktpFullPrefix + 'e' + ktpSeparator + '1' + ktpSeparator + 'f';
+  const keytipSequenceF: IKeySequence = { keys: ['f'] };
+
+  // Node E1
+  const keytipSequenceE1: IKeySequence = { keys: ['e', '1'] };
+
+  // Node E2
+  const keytipSequenceE2: IKeySequence = { keys: ['e', '2'] };
+
+  // Node O
+  const keytipIdO = ktpFullPrefix + 'o';
+  const keytipOverflowSeq: IKeySequence = { keys: ['o'] };
+
+  // Node M
+  const keytipIdM = ktpFullPrefix + 'm';
+  const keytipSeqM: IKeySequence = { keys: ['m'] };
+
+  let nodeB = createTreeNode(keytipIdB, rootId, [], keytipSequenceB, true /* hasChildrenNodes*/);
+  let nodeC = createTreeNode(keytipIdC, rootId, [], keytipSequenceC);
+  let nodeE1 = createTreeNode(keytipIdE1, rootId, [keytipIdD, keytipIdF], keytipSequenceE1);
+  let nodeE2 = createTreeNode(keytipIdE2, rootId, [keytipIdD, keytipIdF], keytipSequenceE2);
+  let nodeD = createTreeNode(keytipIdD, keytipIdE1, [], keytipSequenceD);
+  let nodeF = createTreeNode(keytipIdF, keytipIdE1, [], keytipSequenceF);
+  let nodeO = createTreeNode(keytipIdO, rootId, [keytipOverflowIdM], keytipOverflowSeq, true);
+  let nodeOM = createTreeNode(keytipOverflowIdM, keytipIdO, [], keytipSeqM);
+  let nodeM = createTreeNode(keytipIdM, rootId, [], keytipSeqM);
+  nodeM.keytipLink = nodeOM;
+  keytipTree.nodeMap[rootId].children.push(keytipIdB, keytipIdC, keytipIdE1, keytipIdE2, keytipIdO, keytipIdM);
+  keytipTree.nodeMap[keytipIdB] = nodeB;
+  keytipTree.nodeMap[keytipIdC] = nodeC;
+  keytipTree.nodeMap[keytipIdE1] = nodeE1;
+  keytipTree.nodeMap[keytipIdE2] = nodeE2;
+  keytipTree.nodeMap[keytipIdD] = nodeD;
+  keytipTree.nodeMap[keytipIdF] = nodeF;
+  keytipTree.nodeMap[keytipIdO] = nodeO;
+  keytipTree.nodeMap[keytipOverflowIdM] = nodeOM;
+  keytipTree.nodeMap[keytipIdM] = nodeM;
+  return keytipTree;
+}
+
+function createTreeNode(id: string, parentId: string, childrenIds: string[],
+  sequence: IKeySequence, hasChildren?: boolean): IKeytipTreeNode {
+  return {
+    id,
+    parent: parentId,
+    children: childrenIds,
+    keytipSequence: sequence,
+    hasChildrenNodes: hasChildren
+  };
+}
\ No newline at end of file
diff --git a/packages/experiments/src/utilities/keytip/KeytipManager.ts b/packages/experiments/src/utilities/keytip/KeytipManager.ts
new file mode 100644
index 0000000000000..74d804118d371
--- /dev/null
+++ b/packages/experiments/src/utilities/keytip/KeytipManager.ts
@@ -0,0 +1,267 @@
+import { KeytipLayer } from '../../KeytipLayer';
+import { KeytipTree, IKeytipTreeNode } from './KeytipTree';
+import { IKeytipProps } from '../../Keytip';
+import {
+  IKeySequence,
+  convertSequencesToKeytipID,
+} from '../../utilities/keysequence/IKeySequence';
+import {
+  transitionKeysContain,
+  IKeytipTransitionKey
+} from '../../utilities/keysequence/IKeytipTransitionKey';
+import { constructKeytipTargetFromId } from '../../utilities/keytip/KeytipUtils';
+
+export class KeytipManager {
+  private static _instance: KeytipManager = new KeytipManager();
+
+  public keytipTree: KeytipTree;
+  public currentSequence: IKeySequence;
+
+  private _layer: KeytipLayer;
+  private _enableSequences: IKeytipTransitionKey[];
+  private _exitSequences: IKeytipTransitionKey[];
+  private _returnSequences: IKeytipTransitionKey[];
+
+  /**
+   * Static function to get singleton KeytipManager instance
+   *
+   * @returns {KeytipManager} Singleton KeytipManager instance
+   */
+  public static getInstance(): KeytipManager {
+    return this._instance;
+  }
+
+  /**
+   * Sets the _layer property and creates a KeytipTree
+   * Should be called from the KeytipLayer constructor
+   *
+   * @param layer - KeytipLayer object
+   */
+  public init(layer: KeytipLayer): void {
+    this._layer = layer;
+    this.currentSequence = { keys: [] };
+    this._enableSequences = this._layer.props.keytipStartSequences!;
+    this._exitSequences = this._layer.props.keytipExitSequences!;
+    this._returnSequences = this._layer.props.keytipReturnSequences!;
+    // Create the KeytipTree
+    this.keytipTree = new KeytipTree(this._layer.props.id);
+  }
+
+  /**
+   * Gets the aria-describedby property for a set of keySequences
+   * keySequences should not include the initial keytip 'start' sequence
+   *
+   * @param keySequences - Full path of IKeySequences for one keytip
+   * @returns {string} String to use for the aria-describedby property for the element with this Keytip
+   */
+  public getAriaDescribedBy(keySequences: IKeySequence[]): string {
+    let describedby = this._layer.props.id;
+    if (!keySequences.length) {
+      // Return just the layer ID
+      return describedby;
+    }
+
+    return keySequences.reduce((prevValue: string, keySequence: IKeySequence, currentIndex: number): string => {
+      return prevValue + ' ' + convertSequencesToKeytipID(keySequences.slice(0, currentIndex + 1));
+    }, describedby);
+  }
+
+  /**
+   * Registers a keytip
+   * TODO: should this return an any? or something else
+   *
+   * @param keytipProps - Keytip to register
+   * @returns {any} Object containing the aria-describedby and data-ktp-id DOM properties
+   */
+  // tslint:disable-next-line:no-any
+  public registerKeytip(keytipProps: IKeytipProps): any {
+    // Set 'visible' property to true in keytipProps if currentKeytip is this keytips parent
+    if (this._isCurrentKeytipParent(keytipProps)) {
+      keytipProps.visible = true;
+    }
+
+    // Set the 'keytips' property in _layer
+    this._layer.registerKeytip(keytipProps);
+    this.keytipTree.addNode(keytipProps);
+
+    // Construct aria-describedby and data-ktp-id attributes and return
+    let ariaDescribedBy = this.getAriaDescribedBy(keytipProps.keySequences);
+    let ktpId = convertSequencesToKeytipID(keytipProps.keySequences);
+
+    return {
+      'aria-describedby': ariaDescribedBy,
+      'data-ktp-id': ktpId
+    };
+  }
+
+  /**
+   * Unregisters a keytip
+   *
+   * @param keytipToRemove - IKeytipProps of the keytip to remove
+   */
+  public unregisterKeytip(keytipToRemove: IKeytipProps): void {
+    this._layer.unregisterKeytip(keytipToRemove);
+    this.keytipTree.removeNode(keytipToRemove.keySequences);
+  }
+
+  /**
+   * Method that makes visible keytips currently in the DOM given a list of IDs.
+   *
+   * @param ids: list of Ids to show.
+   */
+  public showKeytips(ids: string[]): void {
+    this._changeKeytipVisibility(ids, true /*visible*/);
+  }
+
+  /**
+   * Method that hides keytips from the DOM given a list of IDs.
+   * If a list is not passed in, than it will hide all the currently registered keytips.
+   *
+   * @param ids: optional list of Ids to hide.
+   */
+  public hideKeytips(ids?: string[]): void {
+    // We can either hide keytips from the supplied array of ids, or all keytips.
+    let keysToHide = ids ? ids : Object.keys(this.keytipTree.nodeMap);
+    this._changeKeytipVisibility(keysToHide, false /* visible */);
+  }
+
+  public getLayerId(): string {
+    return this._layer.props.id;
+  }
+
+  public exitKeytipMode(): void {
+    this.hideKeytips();
+    this.keytipTree.currentKeytip = undefined;
+    this._layer.exitKeytipMode();
+  }
+
+  public enterKeytipMode(): void {
+    this._layer.enterKeytipMode();
+  }
+
+  /**
+   * Processes an IKeytipTransitionKey entered by the user
+   *
+   * @param transitionKey - IKeytipTransitionKey received by the layer to process
+   */
+  public processTransitionInput(transitionKey: IKeytipTransitionKey): void {
+    if (transitionKeysContain(this._exitSequences, transitionKey) && this.keytipTree.currentKeytip) {
+      // If key sequence is in 'exit sequences', exit keytip mode
+      this.exitKeytipMode();
+    } else if (transitionKeysContain(this._returnSequences, transitionKey)) {
+      // If key sequence is in return sequences, move currentKeytip to parent (or if currentKeytip is the root, exit)
+      if (this.keytipTree.currentKeytip) {
+        if (this.keytipTree.currentKeytip.id === this.keytipTree.root.id) {
+          // We are at the root, exit keytip mode
+          this.exitKeytipMode();
+        } else {
+          // If this keytip has a onReturn prop, we execute the func.
+          if (this.keytipTree.currentKeytip.onReturn) {
+            let domEl = this._getKeytipDOMElement(this.keytipTree.currentKeytip.id);
+            this.keytipTree.currentKeytip.onReturn(domEl);
+          }
+
+          // Clean currentSequence array
+          this.currentSequence.keys = [];
+          // Return pointer to its parent
+          this.keytipTree.currentKeytip = this.keytipTree.nodeMap[this.keytipTree.currentKeytip.parent!];
+          // Hide all keytips
+          this.hideKeytips();
+          // Show children keytips of the new currentKeytip
+          this.showKeytips(this.keytipTree.currentKeytip.children);
+        }
+      }
+    } else if (transitionKeysContain(this._enableSequences, transitionKey) && !this.keytipTree.currentKeytip) {
+      // If key sequence is in 'entry sequences' and currentKeytip is null, set currentKeytip to root
+      this.keytipTree.currentKeytip = this.keytipTree.root;
+      this.hideKeytips();
+      // Show children of root
+      this.showKeytips(this.keytipTree.currentKeytip.children);
+      // Trigger onEnter callback
+      this.enterKeytipMode();
+    }
+  }
+
+  /**
+   * Processes inputs from the document listener and traverse the keytip tree
+   *
+   * @param key - Key pressed by the user
+   */
+  public processInput(key: string): void {
+    // Concat the input key with the current sequence
+    let currentSequence: IKeySequence = { keys: [...this.currentSequence.keys, ...[key]] };
+
+    // currentKeytip must be defined, otherwise we haven't entered keytip mode yet
+    if (this.keytipTree.currentKeytip) {
+      let node = this.keytipTree.getExactMatchedNode(currentSequence, this.keytipTree.currentKeytip);
+      if (node) {
+        // If this is a persisted keytip, then we use its keytipLink
+        this.keytipTree.currentKeytip = node.keytipLink ? node.keytipLink : node;
+
+        // Execute this node's onExecute if defined
+        if (this.keytipTree.currentKeytip.onExecute) {
+          let domEl = this._getKeytipDOMElement(this.keytipTree.currentKeytip.id);
+          this.keytipTree.currentKeytip.onExecute(domEl);
+        }
+
+        // To exit keytipMode after executing keytip we should check if currentKeytip has no children and
+        // if the node doesn't have children nodes.
+        if (this.keytipTree.currentKeytip.children.length === 0 && !this.keytipTree.currentKeytip.hasChildrenNodes) {
+          this.exitKeytipMode();
+        } else {
+          // Show all children keytips
+          this.hideKeytips();
+          this.showKeytips(this.keytipTree.currentKeytip.children);
+        }
+
+        // Clear currentSequence
+        this.currentSequence = { keys: [] };
+        return;
+      }
+
+      let partialNodes = this.keytipTree.getPartiallyMatchedNodes(currentSequence, this.keytipTree.currentKeytip);
+      if (partialNodes.length > 0) {
+        // We found nodes that partially match the sequence, so we show only those.
+        this.hideKeytips();
+        let ids = partialNodes.map((partialNode: IKeytipTreeNode) => { return partialNode.id; });
+        this.showKeytips(ids);
+        // Save currentSequence
+        this.currentSequence = currentSequence;
+      }
+    }
+  }
+
+  private _changeKeytipVisibility(ids: string[], visible: boolean): void {
+    // Change visibility in layer
+    this._layer.setKeytipVisibility(ids, visible);
+  }
+
+  /**
+   * Tests if the currentKeytip in this.keytipTree is the parent of 'keytipProps'
+   *
+   * @param keytipProps - Keytip to test the parent for
+   * @returns {boolean} T/F if the currentKeytip is this keytipProps' parent
+   */
+  private _isCurrentKeytipParent(keytipProps: IKeytipProps): boolean {
+    if (this.keytipTree.currentKeytip) {
+      let fullSequence = [...keytipProps.keySequences];
+      // Take off the last sequence to calculate the parent ID
+      fullSequence.pop();
+      // Parent ID is the root if there aren't any more sequences
+      let parentID = fullSequence.length === 0 ? this.keytipTree.root.id : convertSequencesToKeytipID(fullSequence);
+      return this.keytipTree.currentKeytip.id === parentID;
+    }
+    return false;
+  }
+
+  /**
+   * Gets the DOM element for the specified keytip
+   *
+   * @param keytipId - ID of the keytip to query for
+   * @return {HTMLElement} DOM element of the keytip
+   */
+  private _getKeytipDOMElement(keytipId: string): HTMLElement {
+    let dataKeytipId = constructKeytipTargetFromId(keytipId);
+    return document.querySelector(dataKeytipId) as HTMLElement;
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments/src/utilities/keytip/KeytipTree.test.tsx b/packages/experiments/src/utilities/keytip/KeytipTree.test.tsx
new file mode 100644
index 0000000000000..3fa2d92a72578
--- /dev/null
+++ b/packages/experiments/src/utilities/keytip/KeytipTree.test.tsx
@@ -0,0 +1,652 @@
+import * as React from 'react';
+
+import * as ReactTestUtils from 'react-dom/test-utils';
+import { IKeytipProps, KeytipTransitionModifier } from '../../Keytip';
+import { KeytipTree, IKeytipTreeNode } from './KeytipTree';
+import { KeytipLayer } from '../../KeytipLayer';
+import { KeytipManager } from './KeytipManager';
+import { IKeySequence } from '../../utilities/keysequence/IKeySequence';
+import { IKeytipTransitionKey } from '../../utilities/keysequence/IKeytipTransitionKey';
+import { ktpSeparator, ktpFullPrefix } from '../../utilities/keytip/KeytipUtils';
+
+describe('KeytipTree', () => {
+  const layerID = 'my-layer-id';
+  const keytipStartSequences: IKeytipTransitionKey[] = [{ key: 'Meta', modifierKeys: [KeytipTransitionModifier.alt] }];
+  const keytipExitSequences: IKeytipTransitionKey[] = [{ key: 'Meta', modifierKeys: [KeytipTransitionModifier.alt] }];
+  const keytipReturnSequences: IKeytipTransitionKey[] = [{ key: 'Escape' }];
+  const keytipManager = KeytipManager.getInstance();
+
+  beforeEach(() => {
+    // Create layer
+    ReactTestUtils.renderIntoDocument<KeytipLayer>(
+      <KeytipLayer
+        id={ layerID }
+        keytipStartSequences={ keytipStartSequences }
+        keytipReturnSequences={ keytipReturnSequences }
+        keytipExitSequences={ keytipExitSequences }
+      />
+    );
+  });
+
+  it('constructor creates a root node', () => {
+    let keytipTree = keytipManager.keytipTree;
+
+    // Tree root ID should be the layer's ID
+    expect(keytipTree.root.id).toEqual(layerID);
+    // Tree root should not have any children
+    expect(keytipTree.root.children).toHaveLength(0);
+
+    // Only the root should be specified in the nodeMap
+    expect(keytipTree.nodeMap[layerID]).toBeDefined();
+    expect(Object.keys(keytipTree.nodeMap)).toHaveLength(1);
+  });
+
+  describe('addNode', () => {
+    it('directly under root works correctly', () => {
+      let keytipTree = keytipManager.keytipTree;
+
+      // TreeNode C, will be child of root
+      const keytipIdC = ktpFullPrefix + 'c';
+      const sampleKeySequence: IKeySequence[] = [{ keys: ['c'] }];
+
+      keytipTree.addNode(createKeytipProps(sampleKeySequence));
+
+      // Test C has been added to root's children
+      expect(keytipTree.root.children).toHaveLength(1);
+      expect(keytipTree.root.children).toContain(keytipIdC);
+
+      // Test C was added to nodeMap
+      expect(Object.keys(keytipTree.nodeMap)).toHaveLength(2);
+      let keytipNodeC = keytipTree.nodeMap[keytipIdC];
+      expect(keytipNodeC).toBeDefined();
+
+      // Test TreeNode C properties
+      expect(keytipNodeC.id).toEqual(keytipIdC);
+      expect(keytipNodeC.children).toHaveLength(0);
+      expect(keytipNodeC.parent).toEqual(layerID);
+    });
+
+    it('two levels from root', () => {
+      let keytipTree = keytipManager.keytipTree;
+
+      // Parent
+      const keytipIdC = ktpFullPrefix + 'c';
+      const keytipSequenceC: IKeySequence[] = [{ keys: ['c'] }];
+
+      const keytipIdB = ktpFullPrefix + 'c' + ktpSeparator + 'b';
+      const keytipSequenceB: IKeySequence[] = [{ keys: ['c'] }, { keys: ['b'] }];
+
+      keytipTree.addNode(createKeytipProps(keytipSequenceC));
+      keytipTree.addNode(createKeytipProps(keytipSequenceB));
+
+      // Test B was added to C's children
+      expect(keytipTree.nodeMap[keytipIdC].children).toHaveLength(1);
+      expect(keytipTree.nodeMap[keytipIdC].children).toContain(keytipIdB);
+
+      // Test B was added to nodeMap
+      let keytipNodeB = keytipTree.nodeMap[keytipIdB];
+      expect(keytipNodeB).toBeDefined();
+
+      // Test TreeNode B properties
+      expect(keytipNodeB.id).toEqual(keytipIdB);
+      expect(keytipNodeB.children).toHaveLength(0);
+      expect(keytipNodeB.parent).toEqual(keytipIdC);
+    });
+
+    it('add a child node before its parent', () => {
+      let keytipTree = keytipManager.keytipTree;
+
+      // Parent
+      const keytipIdC = ktpFullPrefix + 'c';
+      const keytipSequenceC: IKeySequence[] = [{ keys: ['c'] }];
+
+      // Child
+      const keytipIdB = ktpFullPrefix + 'c' + ktpSeparator + 'b';
+      const keytipSequenceB: IKeySequence[] = [{ keys: ['c'] }, { keys: ['b'] }];
+
+      keytipTree.addNode(createKeytipProps(keytipSequenceB));
+
+      // Test B was added to nodeMap
+      let keytipNodeB = keytipTree.nodeMap[keytipIdB];
+      expect(keytipNodeB).toBeDefined();
+
+      // Test B has C set as parent
+      expect(keytipNodeB.parent).toEqual(keytipIdC);
+
+      // Test root still has no children
+      expect(keytipTree.root.children).toHaveLength(0);
+
+      // Test C is added to nodeMap
+      let keytipNodeC = keytipTree.nodeMap[keytipIdC];
+      expect(keytipNodeC).toBeDefined();
+
+      // Test C has no parent
+      expect(keytipNodeC.parent).toBeFalsy();
+
+      // Test C has B as its child
+      expect(keytipTree.nodeMap[keytipIdC].children).toHaveLength(1);
+      expect(keytipTree.nodeMap[keytipIdC].children).toContain(keytipIdB);
+
+      // Add parent
+      keytipTree.addNode(createKeytipProps(keytipSequenceC));
+
+      keytipNodeC = keytipTree.nodeMap[keytipIdC];
+      expect(keytipNodeC).toBeDefined();
+
+      // Test C has B as its child
+      expect(keytipTree.nodeMap[keytipIdC].children).toHaveLength(1);
+      expect(keytipTree.nodeMap[keytipIdC].children).toContain(keytipIdB);
+
+      // Test root has C as its child
+      expect(keytipTree.root.children).toHaveLength(1);
+      expect(keytipTree.root.children).toContain(keytipIdC);
+    });
+
+    it('creates a correct Tree when many nodes are added out of order', () => {
+      /**
+       *   Tree should end up looking like:
+       *
+       *            a
+       *          /   \
+       *         c     e
+       *        /     / \
+       *       b     d   f
+       *
+       * Nodes will be added in order: F, C, B, D, E
+       */
+
+      let keytipTree = keytipManager.keytipTree;
+
+      // Node B
+      const keytipIdB = ktpFullPrefix + 'c' + ktpSeparator + 'b';
+      const keytipSequenceB: IKeySequence[] = [{ keys: ['c'] }, { keys: ['b'] }];
+
+      // Node C
+      const keytipIdC = ktpFullPrefix + 'c';
+      const keytipSequenceC: IKeySequence[] = [{ keys: ['c'] }];
+
+      // Node D
+      const keytipIdD = ktpFullPrefix + 'e' + ktpSeparator + 'd';
+      const keytipSequenceD: IKeySequence[] = [{ keys: ['e'] }, { keys: ['d'] }];
+
+      // Node E
+      const keytipIdE = ktpFullPrefix + 'e';
+      const keytipSequenceE: IKeySequence[] = [{ keys: ['e'] }];
+
+      // Node F
+      const keytipIdF = ktpFullPrefix + 'e' + ktpSeparator + 'f';
+      const keytipSequenceF: IKeySequence[] = [{ keys: ['e'] }, { keys: ['f'] }];
+
+      keytipTree.addNode(createKeytipProps(keytipSequenceF));
+      keytipTree.addNode(createKeytipProps(keytipSequenceC));
+      keytipTree.addNode(createKeytipProps(keytipSequenceB));
+      keytipTree.addNode(createKeytipProps(keytipSequenceD));
+      keytipTree.addNode(createKeytipProps(keytipSequenceE));
+
+      // Test all nodes are in the nodeMap
+      let keytipNodeB = keytipTree.nodeMap[keytipIdB];
+      expect(keytipNodeB).toBeDefined();
+      let keytipNodeC = keytipTree.nodeMap[keytipIdC];
+      expect(keytipNodeC).toBeDefined();
+      let keytipNodeD = keytipTree.nodeMap[keytipIdD];
+      expect(keytipNodeD).toBeDefined();
+      let keytipNodeE = keytipTree.nodeMap[keytipIdE];
+      expect(keytipNodeE).toBeDefined();
+      let keytipNodeF = keytipTree.nodeMap[keytipIdF];
+      expect(keytipNodeF).toBeDefined();
+
+      // Test each node's parent and children
+      expect(keytipNodeB.parent).toEqual(keytipIdC);
+      expect(keytipNodeB.children).toHaveLength(0);
+
+      expect(keytipNodeC.parent).toEqual(layerID);
+      expect(keytipNodeC.children).toHaveLength(1);
+      expect(keytipNodeC.children).toContain(keytipIdB);
+
+      expect(keytipNodeD.parent).toEqual(keytipIdE);
+      expect(keytipNodeD.children).toHaveLength(0);
+
+      expect(keytipNodeE.parent).toEqual(layerID);
+      expect(keytipNodeE.children).toHaveLength(2);
+      expect(keytipNodeE.children).toContain(keytipIdD);
+      expect(keytipNodeE.children).toContain(keytipIdF);
+
+      expect(keytipNodeF.parent).toEqual(keytipIdE);
+      expect(keytipNodeF.children).toHaveLength(0);
+
+      // Test root's children
+      expect(keytipTree.root.children).toHaveLength(2);
+      expect(keytipTree.root.children).toContain(keytipIdC);
+      expect(keytipTree.root.children).toContain(keytipIdE);
+    });
+
+    it('add a node with overflowsetSequence when overflow node already has been created', () => {
+      let rootId = 'a';
+      let keytipTree = new KeytipTree(rootId);
+      /**
+       *   Tree should end up looking like: Where O is overflow menu and d is inside
+       *
+       *              a
+       *          /   |
+       *          o  d
+       *          |
+       *          d
+       *
+       */
+
+      const keytipIdO = ktpFullPrefix + 'o';
+      const overflowSequence: IKeySequence = { keys: ['o'] };
+      keytipTree.addNode({ keySequences: [overflowSequence], content: '' });
+
+      const keytipPersistedIdD = ktpFullPrefix + 'd';
+      const keytipOverflowIdD = ktpFullPrefix + 'o' + ktpSeparator + 'd';
+      const keytipSequenceD: IKeySequence[] = [{ keys: ['d'] }];
+      let keytipProps = createKeytipProps(keytipSequenceD, overflowSequence);
+
+      // Add d node with an overflow sequence
+      keytipTree.addNode(keytipProps);
+
+      // Root should have overflow keytip node and persisted keytip node.
+      expect(keytipTree.root.children).toHaveLength(2);
+
+      // Test nodes are in the node map
+      let keytipOverflowNode = keytipTree.nodeMap[keytipIdO];
+      expect(keytipOverflowNode).toBeDefined();
+      let keytipPersistedD = keytipTree.nodeMap[keytipPersistedIdD];
+      expect(keytipPersistedD).toBeDefined();
+      let keytipOverflowD = keytipTree.nodeMap[keytipOverflowIdD];
+      expect(keytipOverflowD).toBeDefined();
+
+      // Test hierarchy
+      expect(keytipOverflowNode.parent).toEqual(rootId);
+      expect(keytipPersistedD.parent).toEqual(rootId);
+      expect(keytipOverflowD.parent).toEqual(keytipIdO);
+
+      // Persisted keytip keytip link should be the node in the overflow
+      expect(keytipPersistedD.keytipLink).toEqual(keytipOverflowD);
+    });
+
+    it('add a node with overflowsetSequence when overflow node has not been created', () => {
+      let rootId = 'a';
+      let keytipTree = new KeytipTree(rootId);
+      /**
+       *   Tree should end up looking like: Where O is overflow menu and d is inside
+       *
+       *              a
+       *          /   |
+       *          o  d
+       *          |
+       *          d
+       *
+       */
+
+      const keytipIdO = ktpFullPrefix + 'o';
+      const overflowSequence: IKeySequence = { keys: ['o'] };
+
+      const keytipPersistedIdD = ktpFullPrefix + 'd';
+      const keytipOverflowIdD = ktpFullPrefix + 'o' + ktpSeparator + 'd';
+      const keytipSequenceD: IKeySequence[] = [{ keys: ['d'] }];
+      let keytipProps = createKeytipProps(keytipSequenceD, overflowSequence);
+
+      // Add d node with an overflow sequence
+      keytipTree.addNode(keytipProps);
+
+      // Root should have overflow keytip node and persisted keytip node.
+      expect(keytipTree.root.children).toHaveLength(2);
+
+      // Test nodes are in the node map
+      let keytipOverflowNode = keytipTree.nodeMap[keytipIdO];
+      expect(keytipOverflowNode).toBeDefined();
+      let keytipPersistedD = keytipTree.nodeMap[keytipPersistedIdD];
+      expect(keytipPersistedD).toBeDefined();
+      let keytipOverflowD = keytipTree.nodeMap[keytipOverflowIdD];
+      expect(keytipOverflowD).toBeDefined();
+
+      // Test hierarchy
+      expect(keytipOverflowNode.parent).toEqual(rootId);
+      expect(keytipPersistedD.parent).toEqual(rootId);
+      expect(keytipOverflowD.parent).toEqual(keytipIdO);
+
+      // Persisted keytip keytip link should be the node in the overflow
+      expect(keytipPersistedD.keytipLink).toEqual(keytipOverflowD);
+    });
+  });
+
+  describe('removeNode', () => {
+    it('removes a child node of root and has no children', () => {
+      let keytipTree = keytipManager.keytipTree;
+
+      // Node C
+      const keytipIdC = ktpFullPrefix + 'c';
+      const keytipSequenceC: IKeySequence[] = [{ keys: ['c'] }];
+
+      keytipTree.addNode(createKeytipProps(keytipSequenceC));
+
+      // Remove C from the tree
+      keytipTree.removeNode(keytipSequenceC);
+
+      // Verify that C is not in the node map
+      expect(keytipTree.nodeMap[keytipIdC]).toBeUndefined();
+
+      // Verify that root has no children
+      expect(keytipTree.root.children).toHaveLength(0);
+    });
+
+    it('removes multiple nodes in order correctly', () => {
+      let keytipTree = keytipManager.keytipTree;
+
+      // Node C
+      const keytipIdC = ktpFullPrefix + 'c';
+      const keytipSequenceC: IKeySequence[] = [{ keys: ['c'] }];
+
+      // Node B
+      const keytipIdB = ktpFullPrefix + 'c' + ktpSeparator + 'b';
+      const keytipSequenceB: IKeySequence[] = [{ keys: ['c'] }, { keys: ['b'] }];
+
+      keytipTree.addNode(createKeytipProps(keytipSequenceC));
+      keytipTree.addNode(createKeytipProps(keytipSequenceB));
+
+      // Remove B
+      keytipTree.removeNode(keytipSequenceB);
+
+      // Verify that B is not in the node map
+      expect(keytipTree.nodeMap[keytipIdB]).toBeUndefined();
+
+      // Verify C has no children
+      let nodeC = keytipTree.nodeMap[keytipIdC];
+      expect(nodeC.children).toHaveLength(0);
+
+      // Remove C
+      keytipTree.removeNode(keytipSequenceC);
+
+      // Verify that C is not in the node map
+      expect(keytipTree.nodeMap[keytipIdC]).toBeUndefined();
+
+      // Verify that root has no children
+      expect(keytipTree.root.children).toHaveLength(0);
+    });
+
+    it('removes children as well when a parent is removed', () => {
+      let keytipTree = keytipManager.keytipTree;
+
+      // Node C
+      const keytipIdC = ktpFullPrefix + 'c';
+      const keytipSequenceC: IKeySequence[] = [{ keys: ['c'] }];
+
+      // Node B
+      const keytipIdB = ktpFullPrefix + 'c' + ktpSeparator + 'b';
+      const keytipSequenceB: IKeySequence[] = [{ keys: ['c'] }, { keys: ['b'] }];
+
+      keytipTree.addNode(createKeytipProps(keytipSequenceC));
+      keytipTree.addNode(createKeytipProps(keytipSequenceB));
+
+      // Remove C
+      keytipTree.removeNode(keytipSequenceC);
+
+      // Verify that C is not in the node map
+      expect(keytipTree.nodeMap[keytipIdC]).toBeUndefined();
+      // Verify that B is not in the node map
+      expect(keytipTree.nodeMap[keytipIdB]).toBeUndefined();
+
+      // Verify that root has no children
+      expect(keytipTree.root.children).toHaveLength(0);
+    });
+
+    it('Removing persisted keytip also removes overflow link node', () => {
+      let rootId = 'a';
+      let keytipTree = new KeytipTree(rootId);
+      /**
+       *   Tree should end up looking like: Where O is overflow menu and d is inside
+       *
+       *              a
+       *          /   |
+       *          o  d
+       *          |
+       *          d
+       *
+       */
+
+      const keytipIdO = ktpFullPrefix + 'o';
+      const overflowSequence: IKeySequence = { keys: ['o'] };
+      keytipTree.addNode({ keySequences: [overflowSequence], content: '' });
+
+      const keytipSequenceD: IKeySequence[] = [{ keys: ['d'] }];
+      let keytipProps = createKeytipProps(keytipSequenceD, overflowSequence);
+
+      // Add d node with an overflow sequence
+      keytipTree.addNode(keytipProps);
+
+      keytipTree.removeNode(keytipSequenceD);
+      expect(keytipTree.nodeMap[rootId].children).toHaveLength(1);
+      // Removing persisted d, should also remove o's children.
+      expect(keytipTree.nodeMap[keytipIdO].children).toHaveLength(0);
+    });
+  });
+
+  describe('getExactlyMatchedNodes', () => {
+    it('get matched node tests ', () => {
+      let keytipTree = new KeytipTree('id1');
+
+      /**
+       *   Tree should end up looking like:
+       *
+       *              a
+       *          /   |   \
+       *         c    e1   e2
+       *              / \
+       *             d   f
+       *
+       */
+
+      // Node C
+      const keytipIdC = ktpFullPrefix + 'c';
+      const keytipSequenceC: IKeySequence = { keys: ['c'] };
+
+      // Node D
+      const keytipIdD = ktpFullPrefix + 'e' + ktpSeparator + '1' + ktpSeparator + 'd';
+      const keytipSequenceD: IKeySequence = { keys: ['d'] };
+
+      // Node F
+      const keytipIdF = ktpFullPrefix + 'e' + ktpSeparator + '1' + ktpSeparator + 'f';
+      const keytipSequenceF: IKeySequence = { keys: ['f'] };
+
+      // Node E1
+      const keytipIdE1 = ktpFullPrefix + 'e' + ktpSeparator + '1';
+      const keytipSequenceE1: IKeySequence = { keys: ['e', '1'] };
+
+      // Node E2
+      const keytipIdE2 = ktpFullPrefix + 'e' + ktpSeparator + '2';
+      const keytipSequenceE2: IKeySequence = { keys: ['e', '2'] };
+
+      // Node A
+      const keytipIdA = ktpFullPrefix + 'a';
+      const keytipSequenceA: IKeySequence = { keys: ['a'] };
+
+      let nodeA = createTreeNode(keytipIdA, '', [keytipIdC, keytipIdE1, keytipIdE2], keytipSequenceA);
+      let nodeC = createTreeNode(keytipIdC, keytipIdA, [], keytipSequenceC);
+      let nodeE1 = createTreeNode(keytipIdE1, keytipIdA, [keytipIdD, keytipIdF], keytipSequenceE1);
+      let nodeE2 = createTreeNode(keytipIdE2, keytipIdA, [keytipIdD, keytipIdF], keytipSequenceE2);
+      let nodeD = createTreeNode(keytipIdD, keytipIdE1, [], keytipSequenceD);
+      let nodeF = createTreeNode(keytipIdF, keytipIdE1, [], keytipSequenceF);
+
+      keytipTree.nodeMap[keytipIdA] = nodeA;
+      keytipTree.nodeMap[keytipIdC] = nodeC;
+      keytipTree.nodeMap[keytipIdE1] = nodeE1;
+      keytipTree.nodeMap[keytipIdE2] = nodeE2;
+      keytipTree.nodeMap[keytipIdD] = nodeD;
+      keytipTree.nodeMap[keytipIdF] = nodeF;
+
+      // node should be undefined because it is not a child of node A.
+      let matchedNode1 = keytipTree.getExactMatchedNode({ keys: ['n'] }, nodeA);
+      expect(matchedNode1).toBeUndefined();
+
+      // node should be equal to node c due to keysequnce.
+      let matchedNode2 = keytipTree.getExactMatchedNode({ keys: ['c'] }, nodeA);
+      expect(matchedNode2).toEqual(nodeC);
+    });
+
+    it('should be undefined is matched node is disabled ', () => {
+      let keytipTree = new KeytipTree('id1');
+
+      /**
+       *   Tree should end up looking like:
+       *
+       *              a
+       *          /   |   \
+       *         c    e1   e2
+
+       *
+       */
+
+      // Node C
+      const keytipIdC = ktpFullPrefix + 'c';
+      const keytipSequenceC: IKeySequence = { keys: ['c'] };
+
+      // Node E1
+      const keytipIdE1 = ktpFullPrefix + 'e' + ktpSeparator + '1';
+      const keytipSequenceE1: IKeySequence = { keys: ['e', '1'] };
+
+      // Node E2
+      const keytipIdE2 = ktpFullPrefix + 'e' + ktpSeparator + '2';
+      const keytipSequenceE2: IKeySequence = { keys: ['e', '2'] };
+
+      // Node A
+      const keytipIdA = ktpFullPrefix + 'a';
+      const keytipSequenceA: IKeySequence = { keys: ['a'] };
+
+      let nodeA = createTreeNode(keytipIdA, '', [keytipIdC, keytipIdE1, keytipIdE2], keytipSequenceA);
+      let nodeC = createTreeNode(keytipIdC, keytipIdA, [], keytipSequenceC);
+      nodeC.disabled = true;
+      let nodeE1 = createTreeNode(keytipIdE1, keytipIdA, [], keytipSequenceE1);
+      let nodeE2 = createTreeNode(keytipIdE2, keytipIdA, [], keytipSequenceE2);
+
+      keytipTree.nodeMap[keytipIdA] = nodeA;
+      keytipTree.nodeMap[keytipIdC] = nodeC;
+      keytipTree.nodeMap[keytipIdE1] = nodeE1;
+      keytipTree.nodeMap[keytipIdE2] = nodeE2;
+
+      // node should be undefined because it is disabled.
+      let matchedNode1 = keytipTree.getExactMatchedNode({ keys: ['c'] }, nodeA);
+      expect(matchedNode1).toBeUndefined();
+    });
+  });
+
+  describe('getPartiallyMatchedNodes', () => {
+    it('get partially matched node tests ', () => {
+      let keytipTree = new KeytipTree('id1');
+
+      /**
+       *   Tree should end up looking like:
+       *
+       *              a
+       *             |   \
+       *            e1   e2
+       *              / \
+       *             d   f
+       *
+       */
+
+      // Node D
+      const keytipIdD = ktpFullPrefix + 'e' + ktpSeparator + '1' + ktpSeparator + 'd';
+      const keytipSequenceD: IKeySequence = { keys: ['d'] };
+
+      // Node F
+      const keytipIdF = ktpFullPrefix + 'e' + ktpSeparator + '1' + ktpSeparator + 'f';
+      const keytipSequenceF: IKeySequence = { keys: ['f'] };
+
+      // Node E1
+      const keytipIdE1 = ktpFullPrefix + 'e' + ktpSeparator + '1';
+      const keytipSequenceE1: IKeySequence = { keys: ['e', '1'] };
+
+      // Node E2
+      const keytipIdE2 = ktpFullPrefix + 'e' + ktpSeparator + '2';
+      const keytipSequenceE2: IKeySequence = { keys: ['e', '2'] };
+
+      // Node A
+      const keytipIdA = ktpFullPrefix + 'a';
+      const keytipSequenceA: IKeySequence = { keys: ['a'] };
+
+      let nodeA = createTreeNode(keytipIdA, '', [keytipIdE1, keytipIdE2], keytipSequenceA);
+      let nodeE1 = createTreeNode(keytipIdE1, keytipIdA, [keytipIdD, keytipIdF], keytipSequenceE1);
+      let nodeE2 = createTreeNode(keytipIdE2, keytipIdA, [keytipIdD, keytipIdF], keytipSequenceE2);
+      let nodeD = createTreeNode(keytipIdD, keytipIdE1, [], keytipSequenceD);
+      let nodeF = createTreeNode(keytipIdF, keytipIdE1, [], keytipSequenceF);
+
+      keytipTree.nodeMap[keytipIdA] = nodeA;
+      keytipTree.nodeMap[keytipIdE1] = nodeE1;
+      keytipTree.nodeMap[keytipIdE2] = nodeE2;
+      keytipTree.nodeMap[keytipIdD] = nodeD;
+      keytipTree.nodeMap[keytipIdF] = nodeF;
+
+      // nodes array should be empty.
+      let matchedNodes1 = keytipTree.getPartiallyMatchedNodes({ keys: ['n'] }, nodeA);
+      expect(matchedNodes1.length).toEqual(0);
+
+      // nodes array should be empty.
+      let matchedNodes2 = keytipTree.getPartiallyMatchedNodes({ keys: [] }, nodeA);
+      expect(matchedNodes2.length).toEqual(0);
+
+      // nodes array should be equal to 2.
+      let matchedNodes3 = keytipTree.getPartiallyMatchedNodes({ keys: ['e'] }, nodeA);
+      expect(matchedNodes3.length).toEqual(2);
+    });
+
+    it('get partially matched nodes that are not disabled ', () => {
+      let keytipTree = new KeytipTree('id1');
+
+      /**
+       *   Tree should end up looking like:
+       *
+       *              a
+       *             |   \
+       *            e1   e2
+       *              / \
+       *             d   f
+       *
+       */
+
+      // Node E1
+      const keytipIdE1 = ktpFullPrefix + 'e' + ktpSeparator + '1';
+      const keytipSequenceE1: IKeySequence = { keys: ['e', '1'] };
+
+      // Node E2
+      const keytipIdE2 = ktpFullPrefix + 'e' + ktpSeparator + '2';
+      const keytipSequenceE2: IKeySequence = { keys: ['e', '2'] };
+
+      // Node A
+      const keytipIdA = ktpFullPrefix + 'a';
+      const keytipSequenceA: IKeySequence = { keys: ['a'] };
+
+      let nodeA = createTreeNode(keytipIdA, '', [keytipIdE1, keytipIdE2], keytipSequenceA);
+      let nodeE1 = createTreeNode(keytipIdE1, keytipIdA, [], keytipSequenceE1);
+      let nodeE2 = createTreeNode(keytipIdE2, keytipIdA, [], keytipSequenceE2);
+      nodeE2.disabled = true;
+
+      keytipTree.nodeMap[keytipIdA] = nodeA;
+      keytipTree.nodeMap[keytipIdE1] = nodeE1;
+      keytipTree.nodeMap[keytipIdE2] = nodeE2;
+
+      // nodes array should equal 1, for node e2 is disabled.
+      let matchedNodes = keytipTree.getPartiallyMatchedNodes({ keys: ['e'] }, nodeA);
+      expect(matchedNodes.length).toEqual(1);
+    });
+  });
+});
+
+function createKeytipProps(keySequences: IKeySequence[], overflowSequence?: IKeySequence): IKeytipProps {
+  return {
+    keySequences,
+    overflowSetSequence: overflowSequence,
+    // Just add empty content since it's required, but not needed for tests
+    content: ''
+  };
+}
+
+function createTreeNode(id: string, parentId: string, childrenIds: string[], sequence: IKeySequence): IKeytipTreeNode {
+  return {
+    id,
+    parent: parentId,
+    children: childrenIds,
+    keytipSequence: sequence
+  };
+}
\ No newline at end of file
diff --git a/packages/experiments/src/utilities/keytip/KeytipTree.ts b/packages/experiments/src/utilities/keytip/KeytipTree.ts
new file mode 100644
index 0000000000000..064e96fded598
--- /dev/null
+++ b/packages/experiments/src/utilities/keytip/KeytipTree.ts
@@ -0,0 +1,294 @@
+import {
+  IKeySequence,
+  keySequencesAreEqual,
+  keySequenceStartsWith,
+  convertSequencesToKeytipID
+} from '../../utilities/keysequence/IKeySequence';
+import { IKeytipProps } from '../../Keytip';
+import { find } from '../../Utilities';
+
+export interface IKeytipTreeNode {
+  /**
+   * ID of the <Keytip> DOM element. Needed to locate the correct keytip in the KeytipLayer's 'keytip' state array
+   */
+  id: string;
+
+  /**
+   * KeySequence that invokes this KeytipTreeNode's onExecute function
+   */
+  keytipSequence: IKeySequence;
+
+  /**
+   * Control's execute function for when keytip is invoked, passed from the component to the Manager in the IKeytipProps
+   */
+  onExecute?: (el: HTMLElement) => void;
+
+  /**
+   * Function to execute when we return to this keytip
+   */
+  onReturn?: (el: HTMLElement) => void;
+
+  /**
+   * List of keytip IDs that should become visible when this keytip is pressed, can be empty
+   */
+  children: string[];
+
+  /**
+   * Parent keytip ID
+   */
+  parent: string;
+
+  /**
+   * Whether or not this node has children nodes or not. Should be used for menus/overflow components, that have
+   * their children registered after the initial rendering of the DOM.
+   */
+  hasChildrenNodes?: boolean;
+
+  /**
+   * T/F if this keytip's component is currently disabled
+   */
+  disabled?: boolean;
+
+  /**
+   * Link to another keytip node if this is a persisted keytip
+   */
+  keytipLink?: IKeytipTreeNode;
+}
+
+export interface IKeytipTreeNodeMap {
+  [nodeId: string]: IKeytipTreeNode;
+}
+
+export class KeytipTree {
+  public currentKeytip?: IKeytipTreeNode;
+  public currentSequence: IKeySequence;
+  public root: IKeytipTreeNode;
+  public nodeMap: IKeytipTreeNodeMap = {};
+
+  /**
+   * KeytipTree constructor
+   *
+   * @param rootId - Layer ID to create the root node of the tree
+   */
+  constructor(rootId: string) {
+
+    // Root has no keytipSequence, we instead check _enableSequences to handle multiple entry points
+    this.root = {
+      id: rootId,
+      children: [],
+      parent: '',
+      keytipSequence: { keys: [] },
+      hasChildrenNodes: true
+    };
+    this.currentSequence = { keys: [] };
+    this.nodeMap[this.root.id] = this.root;
+  }
+
+  /**
+   * Add a keytip node to this KeytipTree
+   *
+   * @param keytipProps - Keytip to add to the Tree
+   */
+  public addNode(keytipProps: IKeytipProps): void {
+    let fullSequence = [...keytipProps.keySequences];
+    let nodeID = convertSequencesToKeytipID(fullSequence);
+    // This keytip's sequence is the last one defined
+    let keytipSequence = fullSequence.pop();
+    // Parent ID is the root if there aren't any more sequences
+    let parentID = fullSequence.length === 0 ? this.root.id : convertSequencesToKeytipID(fullSequence);
+
+    let overflowNode = undefined;
+    // Account for overflowSetSequence
+    if (keytipProps.overflowSetSequence && keytipSequence) {
+      let overflowParentNode = this._getOrCreateOverflowNode(keytipProps.overflowSetSequence, parentID, fullSequence);
+      let overflowNodeID = convertSequencesToKeytipID([...fullSequence, keytipProps.overflowSetSequence, keytipSequence]);
+      overflowNode = this.nodeMap[overflowNodeID];
+
+      // Create or update the persisted keytip
+      if (overflowNode) {
+        overflowNode.keytipSequence = keytipSequence;
+        overflowNode.onExecute = keytipProps.onExecute;
+        overflowNode.hasChildrenNodes = keytipProps.hasChildrenNodes;
+        overflowNode.parent = overflowParentNode.id;
+        overflowNode.disabled = keytipProps.disabled;
+      } else {
+        overflowNode = this._createNode(overflowNodeID, keytipSequence, overflowParentNode.id, [], keytipProps.hasChildrenNodes);
+        this.nodeMap[overflowNodeID] = overflowNode;
+      }
+      overflowParentNode.children.push(overflowNodeID);
+    }
+
+    // See if node already exists
+    let node = this.nodeMap[nodeID];
+    if (node) {
+      // If node exists, it was added when one of its children was added or is now being updated
+      // Update values
+      node.keytipSequence = keytipSequence!;
+      node.onExecute = keytipProps.onExecute;
+      node.onReturn = keytipProps.onReturn;
+      node.hasChildrenNodes = keytipProps.hasChildrenNodes;
+      node.keytipLink = overflowNode;
+      node.parent = parentID;
+      node.disabled = keytipProps.disabled;
+    } else {
+      // If node doesn't exist, add node
+      node = this._createNode(nodeID, keytipSequence!, parentID, [], keytipProps.hasChildrenNodes,
+        keytipProps.onExecute, keytipProps.onReturn, keytipProps.disabled);
+      node.keytipLink = overflowNode;
+      this.nodeMap[nodeID] = node;
+    }
+
+    // Get parent node given its id.
+    let parent = this._getOrCreateParentNode(parentID);
+
+    // Add node to parent's children if not already added
+    if (parent.children.indexOf(nodeID) === -1) {
+      parent.children.push(nodeID);
+    }
+  }
+
+  /**
+   * Removes a node from the KeytipTree
+   * Will also remove all of the node's children from the Tree
+   *
+   * @param sequence - full IKeySequence of the node to remove
+   */
+  public removeNode(sequence: IKeySequence[]): void {
+    let fullSequence = [...sequence];
+    let nodeID = convertSequencesToKeytipID(fullSequence);
+    // Take off the last sequence to calculate the parent ID
+    fullSequence.pop();
+    // Parent ID is the root if there aren't any more sequences
+    let parentID = fullSequence.length === 0 ? this.root.id : convertSequencesToKeytipID(fullSequence);
+
+    let parent = this.nodeMap[parentID];
+    if (parent) {
+      // Remove node from its parent's children
+      parent.children.splice(parent.children.indexOf(nodeID), 1);
+    }
+
+    let node = this.nodeMap[nodeID];
+    if (node) {
+      // Remove all the node's children from the nodeMap
+      let children = node.children;
+      for (let child of children) {
+        delete this.nodeMap[child];
+      }
+
+      // If node has an overflowLink, delete that node too.
+      let overflowLink = node.keytipLink;
+      if (overflowLink) {
+        let parentOverflow = this.nodeMap[overflowLink.parent];
+        parentOverflow.children.splice(parentOverflow.children.indexOf(overflowLink.id, 1));
+        delete this.nodeMap[overflowLink.id];
+      }
+
+      // Remove the node from the nodeMap
+      delete this.nodeMap[nodeID];
+    }
+  }
+
+  /**
+   * Searches the currentKeytip's children to exactly match a sequence
+   *
+   * @param keySequence - IKeySequence to match
+   * @param currentKeytip - The keytip who's children will try to match
+   * @returns {IKeytipTreeNode | undefined} The node that exactly matched the keySequence, or undefined if none matched
+   */
+  public getExactMatchedNode(keySequence: IKeySequence, currentKeytip: IKeytipTreeNode): IKeytipTreeNode | undefined {
+    let possibleNodes = this._getNodes(currentKeytip.children);
+
+    return find(possibleNodes, (node: IKeytipTreeNode) => {
+      return keySequencesAreEqual(node.keytipSequence, keySequence) && !node.disabled;
+    });
+  }
+
+  /**
+   * Searches the currentKeytip's children to find nodes that start with the given sequence
+   *
+   * @param keySequence - IKeySequence to partially match
+   * @param currentKeytip - The keytip who's children will try to partially match
+   * @returns {IKeytipTreeNode[]} List of tree nodes that partially match the given sequence
+   */
+  public getPartiallyMatchedNodes(keySequence: IKeySequence, currentKeytip: IKeytipTreeNode): IKeytipTreeNode[] {
+    let possibleNodes = this._getNodes(currentKeytip.children);
+
+    return possibleNodes.filter((node: IKeytipTreeNode) => {
+      return keySequenceStartsWith(node.keytipSequence, keySequence) && !node.disabled;
+    });
+  }
+
+  /**
+   * Retrieves or creates a parent node based on an ID
+   *
+   * @param parentId - ID of the parent node
+   * @returns {IKeytipTreeNode} Node retrieved or created from the given parent ID
+   */
+  private _getOrCreateParentNode(parentId: string): IKeytipTreeNode {
+    let parent = this.nodeMap[parentId];
+    if (!parent) {
+      // If parent doesn't exist, create parent with ID and children only
+      parent = this._createNode(parentId, { keys: [] }, '' /* parentId */, [] /* childrenIds */, true /*hasChildren */);
+      this.nodeMap[parentId] = parent;
+    }
+    return parent;
+  }
+
+  private _createNode(
+    id: string,
+    sequence: IKeySequence,
+    parentId: string,
+    children: string[],
+    hasChildrenNodes?: boolean,
+    onExecute?: (el: HTMLElement) => void,
+    onReturn?: (el: HTMLElement) => void,
+    disabled?: boolean): IKeytipTreeNode {
+    return {
+      id,
+      keytipSequence: sequence,
+      parent: parentId,
+      children,
+      onExecute,
+      onReturn,
+      hasChildrenNodes,
+      disabled
+    };
+  }
+
+  /**
+   * Gets all nodes from their IDs
+   *
+   * @param ids List of keytip IDs
+   * @returns {IKeytipTreeNode[]} Array of nodes that match the given IDs
+   */
+  private _getNodes(ids: string[]): IKeytipTreeNode[] {
+    return ids.map((id: string): IKeytipTreeNode => {
+      return this.nodeMap[id];
+    });
+  }
+
+  /**
+   * Retrieves or creates an overflow node
+   *
+   * @param overflowSequence - Single key sequence for the overflow item
+   * @param parentId - ID of the parent keytip
+   * @param parentSequence - Full IKeySequence[] of the parent
+   * @returns {IKeytipTreeNode} - Node for this overflow item
+   */
+  private _getOrCreateOverflowNode(overflowSequence: IKeySequence, parentId: string, parentSequence: IKeySequence[]): IKeytipTreeNode {
+    let fullOverflowSequence = [...parentSequence, ...[overflowSequence]];
+    let overflowNodeId = convertSequencesToKeytipID(fullOverflowSequence);
+
+    let node = this.nodeMap[overflowNodeId];
+
+    // if overflow node has not been added, we create it
+    if (!node) {
+      node = this._createNode(overflowNodeId, overflowSequence, parentId, [], true);
+      this.nodeMap[overflowNodeId] = node;
+      let parent = this._getOrCreateParentNode(parentId);
+      parent.children.push(overflowNodeId);
+    }
+
+    return node;
+  }
+}
\ No newline at end of file
diff --git a/packages/experiments/src/utilities/keytip/KeytipUtils.ts b/packages/experiments/src/utilities/keytip/KeytipUtils.ts
new file mode 100644
index 0000000000000..141746cf7c62e
--- /dev/null
+++ b/packages/experiments/src/utilities/keytip/KeytipUtils.ts
@@ -0,0 +1,60 @@
+import { IKeySequence, convertSequencesToKeytipID } from '../keysequence/IKeySequence';
+import { IKeytipProps } from '../../Keytip';
+import { KeytipManager } from './KeytipManager';
+
+// Constants
+export const ktpPrefix = 'ktp';
+export const ktpSeparator = '-';
+export const ktpFullPrefix = ktpPrefix + ktpSeparator;
+export const dataKtpId = 'data-ktp-id';
+
+/**
+ * Adds an IKeySequence to a list of sequences
+ * Returns a new array of IKeySequence
+ *
+ * @param sequences - Array of sequences to append to
+ * @param seq1 - IKeySequence to append
+ */
+export function addKeytipSequence(sequences: IKeySequence[], seq1: IKeySequence): IKeySequence[] {
+  return [...sequences, { keys: [...seq1.keys] }];
+}
+
+/**
+ * Utility funciton to register a keytip in the KeytipManager
+ *
+ * @param keytipProps - Keytip to register
+ * @returns - any {} containing the aria-describedby and data-ktp-id to add to the relevant element
+ */
+// tslint:disable-next-line:no-any
+export function registerKeytip(keytipProps: IKeytipProps): any {
+  let ktpMgr = KeytipManager.getInstance();
+  return ktpMgr.registerKeytip(keytipProps);
+}
+
+/**
+ * Utility funciton to unregister a keytip in the KeytipManager
+ *
+ * @param keytipProps - Keytip to unregister
+ */
+export function unregisterKeytip(keytipProps: IKeytipProps): void {
+  let ktpMgr = KeytipManager.getInstance();
+  ktpMgr.unregisterKeytip(keytipProps);
+}
+
+/**
+ * Constructs the data-ktp-id attribute selector from a full key sequence
+ *
+ * @param keySequences - Full IKeySequence for a Keytip
+ */
+export function constructKeytipTargetFromSequences(keySequences: IKeySequence[]): string {
+  return '[' + dataKtpId + '="' + convertSequencesToKeytipID(keySequences) + '"]';
+}
+
+/**
+ * Constructs the data-ktp-id attribute selector from a keytip ID
+ *
+ * @param keytipId - ID of the Keytip
+ */
+export function constructKeytipTargetFromId(keytipId: string): string {
+  return '[' + dataKtpId + '="' + keytipId + '"]';
+}
\ No newline at end of file
diff --git a/packages/experiments/src/utilities/keytip/index.ts b/packages/experiments/src/utilities/keytip/index.ts
new file mode 100644
index 0000000000000..2b45a08035998
--- /dev/null
+++ b/packages/experiments/src/utilities/keytip/index.ts
@@ -0,0 +1,3 @@
+export * from './KeytipManager';
+export * from './KeytipTree';
+export * from './KeytipUtils';
\ No newline at end of file
diff --git a/packages/experiments/tslint.json b/packages/experiments/tslint.json
index 621ee6ba04605..672d9eba8927e 100644
--- a/packages/experiments/tslint.json
+++ b/packages/experiments/tslint.json
@@ -2,5 +2,7 @@
   "extends": [
     "office-ui-fabric-react-tslint"
   ],
-  "rules": {}
+  "rules": {
+    "prefer-const": false
+  }
 }
\ No newline at end of file
diff --git a/packages/file-type-icons/.npmignore b/packages/file-type-icons/.npmignore
new file mode 100644
index 0000000000000..bc156d511e38c
--- /dev/null
+++ b/packages/file-type-icons/.npmignore
@@ -0,0 +1,29 @@
+*.config.js
+*.nuspec
+*.yml
+*.test.*
+.editorconfig
+.gitattributes
+.gitignore
+.vscode
+coverage
+temp
+images
+results
+*.build.log
+dist/*.stats.html
+dist/demo*.*
+gulpfile.js
+index.html
+jsconfig.json
+karma.config.js
+node_modules
+src/**/*
+!src/**/*.types.ts
+!src/**/examples/*.tsx
+tsconfig.json
+tsd.json
+tslint.json
+typings
+webpack.config.js
+fabric-test*
\ No newline at end of file
diff --git a/packages/file-type-icons/.npmrc b/packages/file-type-icons/.npmrc
new file mode 100644
index 0000000000000..825c83e09df4d
--- /dev/null
+++ b/packages/file-type-icons/.npmrc
@@ -0,0 +1,2 @@
+registry=https://registry.npmjs.org/
+
diff --git a/packages/file-type-icons/CHANGELOG.json b/packages/file-type-icons/CHANGELOG.json
index 2c7d865154efa..3d0e4af5dbb6c 100644
--- a/packages/file-type-icons/CHANGELOG.json
+++ b/packages/file-type-icons/CHANGELOG.json
@@ -1,6 +1,34 @@
 {
   "name": "@uifabric/file-type-icons",
   "entries": [
+    {
+      "version": "0.5.0",
+      "tag": "@uifabric/file-type-icons_v0.5.0",
+      "date": "Tue, 13 Mar 2018 20:00:06 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "f973b9c00982af3a844f34c6e11aa0644fb2d0a6",
+            "comment": "Adjusting npmrc to ensure we have pu"
+          }
+        ]
+      }
+    },
+    {
+      "version": "0.4.0",
+      "tag": "@uifabric/file-type-icons_v0.4.0",
+      "date": "Tue, 13 Mar 2018 10:17:37 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "KatherineThayerMicrosoft <kathayer@microsoft.com>",
+            "commit": "a8fe4f8358c01b5a3c3db0b8b94bea7f55281e20",
+            "comment": "Update file type icon mappings"
+          }
+        ]
+      }
+    },
     {
       "version": "0.3.0",
       "tag": "@uifabric/file-type-icons_v0.3.0",
diff --git a/packages/file-type-icons/CHANGELOG.md b/packages/file-type-icons/CHANGELOG.md
index 93eaac50b83ab..151753557eee9 100644
--- a/packages/file-type-icons/CHANGELOG.md
+++ b/packages/file-type-icons/CHANGELOG.md
@@ -1,6 +1,20 @@
 # Change Log - @uifabric/file-type-icons
 
-This log was last generated on Fri, 12 Jan 2018 20:03:22 GMT and should not be manually modified.
+This log was last generated on Tue, 13 Mar 2018 20:00:06 GMT and should not be manually modified.
+
+## 0.5.0
+Tue, 13 Mar 2018 20:00:06 GMT
+
+### Minor changes
+
+- Adjusting npmrc to ensure we have pu
+
+## 0.4.0
+Tue, 13 Mar 2018 10:17:37 GMT
+
+### Minor changes
+
+- Update file type icon mappings
 
 ## 0.3.0
 Fri, 12 Jan 2018 20:03:21 GMT
diff --git a/packages/file-type-icons/package.json b/packages/file-type-icons/package.json
index 1cda2d14ad073..1fa3df1587e5c 100644
--- a/packages/file-type-icons/package.json
+++ b/packages/file-type-icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uifabric/file-type-icons",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Office UI Fabric file type icon set.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -26,7 +26,7 @@
     "react-dom": "^16.2.0"
   },
   "dependencies": {
-    "@uifabric/styling": ">=5.16.0 <6.0.0",
+    "@uifabric/styling": ">=5.19.1 <6.0.0",
     "tslib": "^1.7.1"
   },
   "peerDependencies": {
diff --git a/packages/file-type-icons/src/FileTypeIconMap.ts b/packages/file-type-icons/src/FileTypeIconMap.ts
index f6afa3259c8b1..c747a95e71c26 100644
--- a/packages/file-type-icons/src/FileTypeIconMap.ts
+++ b/packages/file-type-icons/src/FileTypeIconMap.ts
@@ -28,7 +28,7 @@ export const FileTypeIconMap: { [key: string]: { extensions?: string[] } } = {
       'profile', 'ps1', 'pss', 'pt', 'py', 'pyw', 'r', 'rake', 'rb', 'rbx', 'rc', 'rdf', 're', 'reg',
       'rest', 'resw', 'resx', 'rhtml', 'rjs', 'rprofile', 'rpy', 'rss', 'rst', 'ruby', 'rxml', 's',
       'sass', 'scala', 'scm', 'sconscript', 'sconstruct', 'script', 'scss', 'sgml', 'sh', 'sh',
-      'shtml', 'sml', 'svn-base', 'sql', 'sql', 'sty', 'tcl', 'tex', 'textile', 'tld', 'tli',
+      'shtml', 'sml', 'svn-base', 'swift', 'sql', 'sty', 'tcl', 'tex', 'textile', 'tld', 'tli',
       'tmpl', 'tpl', 'vb', 'vi', 'vim', 'vmg', 'webpart', 'wsp', 'wsdl', 'xhtml', 'xoml', 'xsd',
       'xslt', 'yaml', 'yaws', 'yml', 'zsh'
     ]
@@ -49,14 +49,11 @@ export const FileTypeIconMap: { [key: string]: { extensions?: string[] } } = {
   'model': {
     extensions: [
       '3ds', '3mf', 'blend', 'cool', 'dae', 'df', 'dwfx', 'dwg', 'dxf', 'fbx', 'glb', 'gltf', 'holo',
-      'layout', 'max', 'off', 'ply', 'skp', 'stp', 'stl', 't', 'thl', 'x'
+      'layout', 'max', 'mtl', 'obj', 'off', 'ply', 'skp', 'stp', 'stl', 't', 'thl', 'x'
     ]
   },
   'mpp': { extensions: ['mpp'] },
   'mpt': { extensions: ['mpt'] },
-  'odp': { extensions: ['odp'] },
-  'ods': { extensions: ['ods'] },
-  'odt': { extensions: ['odt'] },
   'one': { extensions: ['one', 'onepkg'] }, // this is a format for exported single-file notebook pages
   'onetoc': { extensions: ['ms-one-stub', 'onetoc', 'onetoc2'] }, // this icon represents a complete, logical notebook.
   'pdf': { extensions: ['pdf'] },
@@ -70,9 +67,11 @@ export const FileTypeIconMap: { [key: string]: { extensions?: string[] } } = {
   'potx': { extensions: ['pot', 'potm', 'potx'] },
   'ppsx': { extensions: ['pps', 'ppsm', 'ppsx'] },
   'pptx': { extensions: ['ppt', 'pptm', 'pptx'] },
+  'presentation': { extensions: ['odp', 'gslides', 'key'] },
   'pub': { extensions: ['pub'] },
   'spo': { extensions: ['aspx'] },
-  'rtf': { extensions: ['epub', 'rtf', 'wri'] },
+  'spreadsheet': { extensions: ['ods', 'gsheet', 'numbers'] },
+  'rtf': { extensions: ['epub', 'gdoc', 'odt', 'rtf', 'wri', 'pages'] },
   'sharedfolder': {},
   'sysfile': {
     extensions: [
@@ -82,7 +81,11 @@ export const FileTypeIconMap: { [key: string]: { extensions?: string[] } } = {
     ]
   },
   'txt': { extensions: ['dif', 'diff', 'readme', 'out', 'plist', 'properties', 'text', 'txt'] },
-  'vector': { extensions: ['ai', 'dgn', 'pd', 'emf', 'eps', 'indd', 'indt', 'ps', 'svg', 'svgz', 'wmf', 'oxps', 'xps', 'xd', 'sketch'] },
+  'vector': {
+    extensions: [
+      'ai', 'dgn', 'gdraw', 'pd', 'emf', 'eps', 'indd', 'indt', 'ps', 'svg', 'svgz', 'wmf', 'oxps', 'xps', 'xd', 'sketch'
+    ]
+  },
   'video': {
     extensions: ['3gp', 'asf', 'avi', 'dvr-ms', 'flv', 'm1v', 'm4v', 'mkv', 'mod', 'mov',
       'mm4p', 'mp2', 'mp2v', 'mp4', ' mpa', 'mpe', 'mpeg', 'mpg', 'mpv', 'mpv2', 'mts', 'ogg', 'qt',
diff --git a/packages/file-type-icons/src/getFileTypeIconProps.ts b/packages/file-type-icons/src/getFileTypeIconProps.ts
index 831b4cf0a5201..8a7b7307c1eb5 100644
--- a/packages/file-type-icons/src/getFileTypeIconProps.ts
+++ b/packages/file-type-icons/src/getFileTypeIconProps.ts
@@ -105,36 +105,24 @@ function _getFileTypeIconSuffix(size: FileTypeIconSize, imageFileType: ImageFile
   let devicePixelRatio: number = window.devicePixelRatio;
   let devicePixelRatioSuffix = ''; // Default is 1x
 
-  if (size !== 64) {
-    // SVGs scale well, so you can generally use the default image.
-    // 1.5x is a special case where SVGs need a different image.
-    if (imageFileType === 'svg' && 1 < devicePixelRatio && devicePixelRatio <= 1.5) {
-      // Currently missing 1.5x SVGs at sizes 20 and 40, snap to 1x for now
-      if (size !== 20 && size !== 40) {
-        devicePixelRatioSuffix = '_1.5x';
-      }
-    } else if (imageFileType === 'png') {
-      // To look good, PNGs should use a different image for higher device pixel ratios
-      if (1 < devicePixelRatio && devicePixelRatio <= 1.5) {
-        // Currently missing 1.5x icons for size 20, snap to 2x for now
-        devicePixelRatioSuffix = (size === 20) ? '_2x' : '_1.5x';
-      } else if (1.5 < devicePixelRatio && devicePixelRatio <= 2) {
-        devicePixelRatioSuffix = '_2x';
-      } else if (2 < devicePixelRatio && devicePixelRatio <= 3) {
-        devicePixelRatioSuffix = '_3x';
-      } else if (3 < devicePixelRatio) {
-        devicePixelRatioSuffix = '_4x';
-      }
+  // SVGs scale well, so you can generally use the default image.
+  // 1.5x is a special case where SVGs need a different image.
+  if (imageFileType === 'svg' && 1 < devicePixelRatio && devicePixelRatio <= 1.5) {
+    // Currently missing 1.5x SVGs at size 20, snap to 1x for now
+    if (size !== 20) {
+      devicePixelRatioSuffix = '_1.5x';
     }
-  } else {
-    // Currently we have a more limited set of image files for size 64.
-    // For SVGs, we only have the default 1x. For PNGs, we have 1x, 1.5x, and 2x.
-    if (imageFileType === 'png') {
-      if (1 < devicePixelRatio && devicePixelRatio <= 1.5) {
-        devicePixelRatioSuffix = '_1.5x';
-      } else if (1.5 < devicePixelRatio) {
-        devicePixelRatioSuffix = '_2x';
-      }
+  } else if (imageFileType === 'png') {
+    // To look good, PNGs should use a different image for higher device pixel ratios
+    if (1 < devicePixelRatio && devicePixelRatio <= 1.5) {
+      // Currently missing 1.5x icons for size 20, snap to 2x for now
+      devicePixelRatioSuffix = (size === 20) ? '_2x' : '_1.5x';
+    } else if (1.5 < devicePixelRatio && devicePixelRatio <= 2) {
+      devicePixelRatioSuffix = '_2x';
+    } else if (2 < devicePixelRatio && devicePixelRatio <= 3) {
+      devicePixelRatioSuffix = '_3x';
+    } else if (3 < devicePixelRatio) {
+      devicePixelRatioSuffix = '_4x';
     }
   }
 
diff --git a/packages/file-type-icons/src/initializeFileTypeIcons.tsx b/packages/file-type-icons/src/initializeFileTypeIcons.tsx
index 6cac0f4b1f8e0..2854caee2aa3a 100644
--- a/packages/file-type-icons/src/initializeFileTypeIcons.tsx
+++ b/packages/file-type-icons/src/initializeFileTypeIcons.tsx
@@ -6,15 +6,18 @@ const PNG_SUFFIX = '_png';
 const SVG_SUFFIX = '_svg';
 
 const DEFAULT_BASE_URL = 'https://spoprod-a.akamaihd.net/files/fabric/assets/item-types/';
-const ICON_SIZES: number[] = [16, 20, 32, 40, 48, 96];
+const ICON_SIZES: number[] = [16, 20, 32, 40, 48, 64, 96];
+
+// Due to CDN cache, images updated in place may take up to a year to appear for some users
+// (though most users will see them within a week). To force immediate refresh, append a
+// unique string to the end of the URL. The CDN uses the URL as the cache key, so passing a
+// new URL will cause the CDN to create a new cache key.
+const REFRESH_STRING = '?refresh1';
 
 export function initializeFileTypeIcons(baseUrl: string = DEFAULT_BASE_URL, options?: Partial<IIconOptions>): void {
   ICON_SIZES.forEach((size: number) => {
     _initializeIcons(baseUrl, size, options);
   });
-  // Currently we have a more limited set of image files for size 64.
-  // When we have the full set, add 64 to ICON_SIZES and remove _initializeSize64Icons.
-  _initializeSize64Icons(baseUrl, options);
 }
 
 function _initializeIcons(baseUrl: string, size: number, options?: Partial<IIconOptions>): void {
@@ -22,64 +25,36 @@ function _initializeIcons(baseUrl: string, size: number, options?: Partial<IIcon
   const fileTypeIcons: { [key: string]: JSX.Element } = {};
 
   iconTypes.forEach((type: string) => {
-    fileTypeIcons[type + size + PNG_SUFFIX] = <img src={ baseUrl + size + '/' + type + '.png' } />;
-    fileTypeIcons[type + size + SVG_SUFFIX] = <img src={ baseUrl + size + '/' + type + '.svg' } />;
+    fileTypeIcons[type + size + PNG_SUFFIX] = (
+      <img src={ baseUrl + size + '/' + type + '.png' + REFRESH_STRING } />
+    );
+    fileTypeIcons[type + size + SVG_SUFFIX] = (
+      <img src={ baseUrl + size + '/' + type + '.svg' + REFRESH_STRING } />
+    );
 
     // For high resolution screens, register additional versions
     // Apply height=100% and width=100% to force image to fit into containing element
 
     // SVGs scale well, so you can generally use the default image.
     // 1.5x is a special case where both SVGs and PNGs need a different image.
-    // Remove if statements when missing image files for sizes 20 and 40 are provided.
+    // Remove if statements when missing image files for 20_1.5x are provided.
     if (size !== 20) {
       fileTypeIcons[type + size + '_1.5x' + PNG_SUFFIX] = (
-        <img src={ baseUrl + size + '_1.5x/' + type + '.png' } height='100%' width='100%' />
+        <img src={ baseUrl + size + '_1.5x/' + type + '.png' + REFRESH_STRING } height='100%' width='100%' />
+      );
+      fileTypeIcons[type + size + '_1.5x' + SVG_SUFFIX] = (
+        <img src={ baseUrl + size + '_1.5x/' + type + '.svg' + REFRESH_STRING } height='100%' width='100%' />
       );
-      if (size !== 40) {
-        fileTypeIcons[type + size + '_1.5x' + SVG_SUFFIX] = (
-          <img src={ baseUrl + size + '_1.5x/' + type + '.svg' } height='100%' width='100%' />
-        );
-      }
     }
 
     fileTypeIcons[type + size + '_2x' + PNG_SUFFIX] = (
-      <img src={ baseUrl + size + '_2x/' + type + '.png' } height='100%' width='100%' />
+      <img src={ baseUrl + size + '_2x/' + type + '.png' + REFRESH_STRING } height='100%' width='100%' />
     );
     fileTypeIcons[type + size + '_3x' + PNG_SUFFIX] = (
-      <img src={ baseUrl + size + '_3x/' + type + '.png' } height='100%' width='100%' />
+      <img src={ baseUrl + size + '_3x/' + type + '.png' + REFRESH_STRING } height='100%' width='100%' />
     );
     fileTypeIcons[type + size + '_4x' + PNG_SUFFIX] = (
-      <img src={ baseUrl + size + '_4x/' + type + '.png' } height='100%' width='100%' />
-    );
-  });
-
-  registerIcons({
-    fontFace: {},
-    style: {
-      width: size,
-      height: size,
-      overflow: 'hidden'
-    },
-    icons: fileTypeIcons
-  }, options);
-}
-
-function _initializeSize64Icons(baseUrl: string, options?: Partial<IIconOptions>): void {
-  const iconTypes: string[] = Object.keys(FileTypeIconMap);
-  const fileTypeIcons: { [key: string]: JSX.Element } = {};
-  const size = 64;
-
-  iconTypes.forEach((type: string) => {
-    fileTypeIcons[type + size + PNG_SUFFIX] = <img src={ baseUrl + size + '/' + type + '.png' } />;
-    fileTypeIcons[type + size + SVG_SUFFIX] = <img src={ baseUrl + size + '/' + type + '.svg' } />;
-
-    // For high resolution screens, register additional versions.
-    // Size 64 only has PNGs for 1.5x and 2x.
-    fileTypeIcons[type + size + '_1.5x' + PNG_SUFFIX] = (
-      <img src={ baseUrl + size + '_1.5x/' + type + '.png' } height='100%' width='100%' />
-    );
-    fileTypeIcons[type + size + '_2x' + PNG_SUFFIX] = (
-      <img src={ baseUrl + size + '_2x/' + type + '.png' } height='100%' width='100%' />
+      <img src={ baseUrl + size + '_4x/' + type + '.png' + REFRESH_STRING } height='100%' width='100%' />
     );
   });
 
diff --git a/packages/file-type-icons/tslint.json b/packages/file-type-icons/tslint.json
index 621ee6ba04605..672d9eba8927e 100644
--- a/packages/file-type-icons/tslint.json
+++ b/packages/file-type-icons/tslint.json
@@ -2,5 +2,7 @@
   "extends": [
     "office-ui-fabric-react-tslint"
   ],
-  "rules": {}
+  "rules": {
+    "prefer-const": false
+  }
 }
\ No newline at end of file
diff --git a/packages/icons/.npmignore b/packages/icons/.npmignore
new file mode 100644
index 0000000000000..bc156d511e38c
--- /dev/null
+++ b/packages/icons/.npmignore
@@ -0,0 +1,29 @@
+*.config.js
+*.nuspec
+*.yml
+*.test.*
+.editorconfig
+.gitattributes
+.gitignore
+.vscode
+coverage
+temp
+images
+results
+*.build.log
+dist/*.stats.html
+dist/demo*.*
+gulpfile.js
+index.html
+jsconfig.json
+karma.config.js
+node_modules
+src/**/*
+!src/**/*.types.ts
+!src/**/examples/*.tsx
+tsconfig.json
+tsd.json
+tslint.json
+typings
+webpack.config.js
+fabric-test*
\ No newline at end of file
diff --git a/packages/icons/.npmrc b/packages/icons/.npmrc
new file mode 100644
index 0000000000000..825c83e09df4d
--- /dev/null
+++ b/packages/icons/.npmrc
@@ -0,0 +1,2 @@
+registry=https://registry.npmjs.org/
+
diff --git a/packages/icons/CHANGELOG.json b/packages/icons/CHANGELOG.json
index b77224eddf7cf..547fdc0982b67 100644
--- a/packages/icons/CHANGELOG.json
+++ b/packages/icons/CHANGELOG.json
@@ -1,6 +1,53 @@
 {
   "name": "@uifabric/icons",
   "entries": [
+    {
+      "version": "5.6.0",
+      "tag": "@uifabric/icons_v5.6.0",
+      "date": "Tue, 13 Mar 2018 20:00:06 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "f973b9c00982af3a844f34c6e11aa0644fb2d0a6",
+            "comment": "Adjusting npmrc to ensure we have published to the correct registry."
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.5.0",
+      "tag": "@uifabric/icons_v5.5.0",
+      "date": "Fri, 02 Mar 2018 11:25:35 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "47663d07d856cf09d880f67b7221eebeda54461e",
+            "comment": "Updating icons to FabMDL2v2.68 and adding 2 icons to the main partition."
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.4.2",
+      "tag": "@uifabric/icons_v5.4.2",
+      "date": "Thu, 01 Feb 2018 11:23:17 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Srikanth Deshpande <srideshpande@users.noreply.github.com>",
+            "commit": "952ad7979322352ca597d4e6319391529d5d2212",
+            "comment": "updating config files in @uifabric/icons package"
+          },
+          {
+            "author": "Srikanth Deshpande <srideshpande@users.noreply.github.com>",
+            "commit": "66a91aadb99bca3923125d62cadc15984dba0be6",
+            "comment": "Updating fabric icons in office-ui-fabric-react's  @uifabric/icons package"
+          }
+        ]
+      }
+    },
     {
       "version": "5.4.1",
       "tag": "@uifabric/icons_v5.4.1",
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index 41811b8733de0..3143c43a41e9d 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -1,6 +1,28 @@
 # Change Log - @uifabric/icons
 
-This log was last generated on Mon, 29 Jan 2018 11:23:40 GMT and should not be manually modified.
+This log was last generated on Tue, 13 Mar 2018 20:00:06 GMT and should not be manually modified.
+
+## 5.6.0
+Tue, 13 Mar 2018 20:00:06 GMT
+
+### Minor changes
+
+- Adjusting npmrc to ensure we have published to the correct registry.
+
+## 5.5.0
+Fri, 02 Mar 2018 11:25:35 GMT
+
+### Minor changes
+
+- Updating icons to FabMDL2v2.68 and adding 2 icons to the main partition.
+
+## 5.4.2
+Thu, 01 Feb 2018 11:23:17 GMT
+
+### Patches
+
+- updating config files in @uifabric/icons package
+- Updating fabric icons in office-ui-fabric-react's  @uifabric/icons package
 
 ## 5.4.1
 Mon, 29 Jan 2018 11:23:40 GMT
diff --git a/packages/icons/config/fabric-icons-0.json b/packages/icons/config/fabric-icons-0.json
index 2a824e10112ee..51795cb2fd3a9 100644
--- a/packages/icons/config/fabric-icons-0.json
+++ b/packages/icons/config/fabric-icons-0.json
@@ -72,6 +72,10 @@
 			"name": "Link",
 			"unicode": "E71B"
 		},
+		{
+			"name": "AllApps",
+			"unicode": "E71D"
+		},
 		{
 			"name": "Zoom",
 			"unicode": "E71E"
@@ -120,10 +124,6 @@
 			"name": "Lock",
 			"unicode": "E72E"
 		},
-		{
-			"name": "BlockedSite",
-			"unicode": "E72F"
-		},
 		{
 			"name": "ReportHacked",
 			"unicode": "E730"
diff --git a/packages/icons/config/fabric-icons-1.json b/packages/icons/config/fabric-icons-1.json
index 417ff4dac8a4c..ca55a72c01cb5 100644
--- a/packages/icons/config/fabric-icons-1.json
+++ b/packages/icons/config/fabric-icons-1.json
@@ -16,6 +16,10 @@
 			"name": "Highlight",
 			"unicode": "E7E6"
 		},
+		{
+			"name": "PowerButton",
+			"unicode": "E7E8"
+		},
 		{
 			"name": "Tab",
 			"unicode": "E7E9"
@@ -403,10 +407,6 @@
 		{
 			"name": "Group",
 			"unicode": "E902"
-		},
-		{
-			"name": "World",
-			"unicode": "E909"
 		}
 	]
 }
\ No newline at end of file
diff --git a/packages/icons/config/fabric-icons-10.json b/packages/icons/config/fabric-icons-10.json
index c05e8831b8bea..1835ff877c384 100644
--- a/packages/icons/config/fabric-icons-10.json
+++ b/packages/icons/config/fabric-icons-10.json
@@ -8,6 +8,46 @@
 		"maxSubsetSize": 100
 	},
 	"glyphs": [
+		{
+			"name": "FullWidthEdit",
+			"unicode": "F2FF"
+		},
+		{
+			"name": "Plug",
+			"unicode": "F300"
+		},
+		{
+			"name": "PlugSolid",
+			"unicode": "F301"
+		},
+		{
+			"name": "PlugConnected",
+			"unicode": "F302"
+		},
+		{
+			"name": "PlugDisconnected",
+			"unicode": "F303"
+		},
+		{
+			"name": "UnlockSolid",
+			"unicode": "F304"
+		},
+		{
+			"name": "Variable",
+			"unicode": "F305"
+		},
+		{
+			"name": "Parameter",
+			"unicode": "F306"
+		},
+		{
+			"name": "CommentUrgent",
+			"unicode": "F307"
+		},
+		{
+			"name": "Storyboard",
+			"unicode": "F308"
+		},
 		{
 			"name": "DiffInline",
 			"unicode": "F309"
@@ -367,46 +407,6 @@
 		{
 			"name": "ChevronUpEnd6",
 			"unicode": "F370"
-		},
-		{
-			"name": "ChevronLeftEnd6",
-			"unicode": "F371"
-		},
-		{
-			"name": "ChevronRightEnd6",
-			"unicode": "F372"
-		},
-		{
-			"name": "EgnyteLogo",
-			"unicode": "F373"
-		},
-		{
-			"name": "GoogleDriveLogoLeftGreen",
-			"unicode": "F374"
-		},
-		{
-			"name": "GoogleDriveLogoBottomBlue",
-			"unicode": "F375"
-		},
-		{
-			"name": "GoogleDriveLogoRightYellow",
-			"unicode": "F376"
-		},
-		{
-			"name": "ContextMenu",
-			"unicode": "F37C"
-		},
-		{
-			"name": "AzureAPIManagement",
-			"unicode": "F37F"
-		},
-		{
-			"name": "AzureServiceEndpoint",
-			"unicode": "F380"
-		},
-		{
-			"name": "VSTSLogo",
-			"unicode": "F381"
 		}
 	]
 }
\ No newline at end of file
diff --git a/packages/icons/config/fabric-icons-11.json b/packages/icons/config/fabric-icons-11.json
index 9067084096c1f..878361ae7d2d3 100644
--- a/packages/icons/config/fabric-icons-11.json
+++ b/packages/icons/config/fabric-icons-11.json
@@ -8,6 +8,30 @@
 		"maxSubsetSize": 100
 	},
 	"glyphs": [
+		{
+			"name": "ChevronLeftEnd6",
+			"unicode": "F371"
+		},
+		{
+			"name": "ChevronRightEnd6",
+			"unicode": "F372"
+		},
+		{
+			"name": "ContextMenu",
+			"unicode": "F37C"
+		},
+		{
+			"name": "AzureAPIManagement",
+			"unicode": "F37F"
+		},
+		{
+			"name": "AzureServiceEndpoint",
+			"unicode": "F380"
+		},
+		{
+			"name": "VSTSLogo",
+			"unicode": "F381"
+		},
 		{
 			"name": "VSTSAltLogo1",
 			"unicode": "F382"
@@ -383,30 +407,6 @@
 		{
 			"name": "ProjectLogoFill32",
 			"unicode": "F47F"
-		},
-		{
-			"name": "ProjectLogo16",
-			"unicode": "F480"
-		},
-		{
-			"name": "ProjectLogoFill16",
-			"unicode": "F481"
-		},
-		{
-			"name": "SwayLogo32",
-			"unicode": "F482"
-		},
-		{
-			"name": "SwayLogoFill32",
-			"unicode": "F483"
-		},
-		{
-			"name": "SwayLogo16",
-			"unicode": "F484"
-		},
-		{
-			"name": "SwayLogoFill16",
-			"unicode": "F485"
 		}
 	]
 }
\ No newline at end of file
diff --git a/packages/icons/config/fabric-icons-12.json b/packages/icons/config/fabric-icons-12.json
index 221828001e99c..8d0e1a4188a3a 100644
--- a/packages/icons/config/fabric-icons-12.json
+++ b/packages/icons/config/fabric-icons-12.json
@@ -8,6 +8,30 @@
 		"maxSubsetSize": 100
 	},
 	"glyphs": [
+		{
+			"name": "ProjectLogo16",
+			"unicode": "F480"
+		},
+		{
+			"name": "ProjectLogoFill16",
+			"unicode": "F481"
+		},
+		{
+			"name": "SwayLogo32",
+			"unicode": "F482"
+		},
+		{
+			"name": "SwayLogoFill32",
+			"unicode": "F483"
+		},
+		{
+			"name": "SwayLogo16",
+			"unicode": "F484"
+		},
+		{
+			"name": "SwayLogoFill16",
+			"unicode": "F485"
+		},
 		{
 			"name": "ClassNotebookLogo32",
 			"unicode": "F486"
@@ -383,30 +407,6 @@
 		{
 			"name": "Padding",
 			"unicode": "F518"
-		},
-		{
-			"name": "PaddingTop",
-			"unicode": "F519"
-		},
-		{
-			"name": "PaddingBottom",
-			"unicode": "F51A"
-		},
-		{
-			"name": "PaddingLeft",
-			"unicode": "F51B"
-		},
-		{
-			"name": "PaddingRight",
-			"unicode": "F51C"
-		},
-		{
-			"name": "NavigationFlipper",
-			"unicode": "F51D"
-		},
-		{
-			"name": "AlignJustify",
-			"unicode": "F51E"
 		}
 	]
 }
\ No newline at end of file
diff --git a/packages/icons/config/fabric-icons-13.json b/packages/icons/config/fabric-icons-13.json
index 73d02a787039a..701291daf516e 100644
--- a/packages/icons/config/fabric-icons-13.json
+++ b/packages/icons/config/fabric-icons-13.json
@@ -8,6 +8,30 @@
 		"maxSubsetSize": 100
 	},
 	"glyphs": [
+		{
+			"name": "PaddingTop",
+			"unicode": "F519"
+		},
+		{
+			"name": "PaddingBottom",
+			"unicode": "F51A"
+		},
+		{
+			"name": "PaddingLeft",
+			"unicode": "F51B"
+		},
+		{
+			"name": "PaddingRight",
+			"unicode": "F51C"
+		},
+		{
+			"name": "NavigationFlipper",
+			"unicode": "F51D"
+		},
+		{
+			"name": "AlignJustify",
+			"unicode": "F51E"
+		},
 		{
 			"name": "TextOverflow",
 			"unicode": "F51F"
@@ -244,22 +268,6 @@
 			"name": "VisualStudioIDELogo32",
 			"unicode": "F5D0"
 		},
-		{
-			"name": "ApacheIvyLogo32",
-			"unicode": "F5D1"
-		},
-		{
-			"name": "BitbucketLogo32",
-			"unicode": "F5D2"
-		},
-		{
-			"name": "LinuxLogo32",
-			"unicode": "F5D3"
-		},
-		{
-			"name": "GradleLogo32",
-			"unicode": "F5D4"
-		},
 		{
 			"name": "PasteAsText",
 			"unicode": "F5D5"
@@ -332,6 +340,10 @@
 			"name": "DropShapeSolid",
 			"unicode": "F63F"
 		},
+		{
+			"name": "RectangleShapeSolid",
+			"unicode": "F640"
+		},
 		{
 			"name": "InsertColumnsLeft",
 			"unicode": "F64A"
@@ -364,34 +376,6 @@
 			"name": "DeleteTable",
 			"unicode": "F651"
 		},
-		{
-			"name": "GitLogo",
-			"unicode": "F65D"
-		},
-		{
-			"name": "GitHubLogo",
-			"unicode": "F65E"
-		},
-		{
-			"name": "ApacheMavenLogo",
-			"unicode": "F65F"
-		},
-		{
-			"name": "NPMLogo",
-			"unicode": "F660"
-		},
-		{
-			"name": "GitFork",
-			"unicode": "F661"
-		},
-		{
-			"name": "SVNLogo",
-			"unicode": "F662"
-		},
-		{
-			"name": "JenkinsLogo",
-			"unicode": "F663"
-		},
 		{
 			"name": "VersionControlPush",
 			"unicode": "F664"
@@ -400,6 +384,14 @@
 			"name": "ExternalGit",
 			"unicode": "F665"
 		},
+		{
+			"name": "WhiteBoardApp16",
+			"unicode": "F673"
+		},
+		{
+			"name": "WhiteBoardApp32",
+			"unicode": "F674"
+		},
 		{
 			"name": "InsertSignatureLine",
 			"unicode": "F677"
@@ -407,6 +399,14 @@
 		{
 			"name": "ArrangeByFrom",
 			"unicode": "F678"
+		},
+		{
+			"name": "Phishing",
+			"unicode": "F679"
+		},
+		{
+			"name": "CreateMailRule",
+			"unicode": "F67A"
 		}
 	]
 }
\ No newline at end of file
diff --git a/packages/icons/config/fabric-icons-14.json b/packages/icons/config/fabric-icons-14.json
index 3040a07465fc4..357ec5a104070 100644
--- a/packages/icons/config/fabric-icons-14.json
+++ b/packages/icons/config/fabric-icons-14.json
@@ -9,12 +9,24 @@
 	},
 	"glyphs": [
 		{
-			"name": "Phishing",
-			"unicode": "F679"
+			"name": "PublishCourse",
+			"unicode": "F699"
 		},
 		{
-			"name": "CreateMailRule",
-			"unicode": "F67A"
+			"name": "DictionaryRemove",
+			"unicode": "F69A"
+		},
+		{
+			"name": "UserRemove",
+			"unicode": "F69B"
+		},
+		{
+			"name": "UserEvent",
+			"unicode": "F69C"
+		},
+		{
+			"name": "Encryption",
+			"unicode": "F69D"
 		}
 	]
 }
\ No newline at end of file
diff --git a/packages/icons/config/fabric-icons-2.json b/packages/icons/config/fabric-icons-2.json
index 8bd6865dcaadf..1a6e77aadb5d3 100644
--- a/packages/icons/config/fabric-icons-2.json
+++ b/packages/icons/config/fabric-icons-2.json
@@ -8,6 +8,10 @@
 		"maxSubsetSize": 100
 	},
 	"glyphs": [
+		{
+			"name": "World",
+			"unicode": "E909"
+		},
 		{
 			"name": "Comment",
 			"unicode": "E90A"
@@ -403,10 +407,6 @@
 		{
 			"name": "StoreLogoMed20",
 			"unicode": "EA04"
-		},
-		{
-			"name": "TimeSheet",
-			"unicode": "EA05"
 		}
 	]
 }
\ No newline at end of file
diff --git a/packages/icons/config/fabric-icons-3.json b/packages/icons/config/fabric-icons-3.json
index 588abc9f72e8e..89a9d0deffb54 100644
--- a/packages/icons/config/fabric-icons-3.json
+++ b/packages/icons/config/fabric-icons-3.json
@@ -8,6 +8,10 @@
 		"maxSubsetSize": 100
 	},
 	"glyphs": [
+		{
+			"name": "TimeSheet",
+			"unicode": "EA05"
+		},
 		{
 			"name": "TriangleSolid",
 			"unicode": "EA08"
@@ -88,6 +92,10 @@
 			"name": "Record2",
 			"unicode": "EA3F"
 		},
+		{
+			"name": "AllAppsMirrored",
+			"unicode": "EA40"
+		},
 		{
 			"name": "BookmarksMirrored",
 			"unicode": "EA41"
@@ -264,6 +272,10 @@
 			"name": "Weights",
 			"unicode": "EADB"
 		},
+		{
+			"name": "Trackers",
+			"unicode": "EADF"
+		},
 		{
 			"name": "AddNotes",
 			"unicode": "EAE3"
@@ -324,6 +336,10 @@
 			"name": "Lamp",
 			"unicode": "EB19"
 		},
+		{
+			"name": "Source",
+			"unicode": "EB1B"
+		},
 		{
 			"name": "MSNVideos",
 			"unicode": "EB1C"
@@ -391,22 +407,6 @@
 		{
 			"name": "Website",
 			"unicode": "EB41"
-		},
-		{
-			"name": "Drop",
-			"unicode": "EB42"
-		},
-		{
-			"name": "SkiResorts",
-			"unicode": "EB45"
-		},
-		{
-			"name": "Snowflake",
-			"unicode": "EB46"
-		},
-		{
-			"name": "BusSolid",
-			"unicode": "EB47"
 		}
 	]
 }
\ No newline at end of file
diff --git a/packages/icons/config/fabric-icons-4.json b/packages/icons/config/fabric-icons-4.json
index 91b09abaf0e77..b339294c83d10 100644
--- a/packages/icons/config/fabric-icons-4.json
+++ b/packages/icons/config/fabric-icons-4.json
@@ -8,6 +8,22 @@
 		"maxSubsetSize": 100
 	},
 	"glyphs": [
+		{
+			"name": "Drop",
+			"unicode": "EB42"
+		},
+		{
+			"name": "SkiResorts",
+			"unicode": "EB45"
+		},
+		{
+			"name": "Snowflake",
+			"unicode": "EB46"
+		},
+		{
+			"name": "BusSolid",
+			"unicode": "EB47"
+		},
 		{
 			"name": "FerrySolid",
 			"unicode": "EB48"
@@ -336,10 +352,6 @@
 			"name": "POI",
 			"unicode": "ECAF"
 		},
-		{
-			"name": "FacebookLogo",
-			"unicode": "ECB3"
-		},
 		{
 			"name": "AddTo",
 			"unicode": "ECC8"
@@ -376,10 +388,6 @@
 			"name": "FangBody",
 			"unicode": "ECEB"
 		},
-		{
-			"name": "Glimmer",
-			"unicode": "ECF4"
-		},
 		{
 			"name": "ChatInviteFriend",
 			"unicode": "ECFE"
@@ -399,14 +407,6 @@
 		{
 			"name": "SharepointLogoInverse",
 			"unicode": "ED18"
-		},
-		{
-			"name": "YammerLogo",
-			"unicode": "ED19"
-		},
-		{
-			"name": "Hide",
-			"unicode": "ED1A"
 		}
 	]
 }
\ No newline at end of file
diff --git a/packages/icons/config/fabric-icons-5.json b/packages/icons/config/fabric-icons-5.json
index 326804413f435..f4bfcf3d4790e 100644
--- a/packages/icons/config/fabric-icons-5.json
+++ b/packages/icons/config/fabric-icons-5.json
@@ -8,6 +8,14 @@
 		"maxSubsetSize": 100
 	},
 	"glyphs": [
+		{
+			"name": "YammerLogo",
+			"unicode": "ED19"
+		},
+		{
+			"name": "Hide",
+			"unicode": "ED1A"
+		},
 		{
 			"name": "Uneditable",
 			"unicode": "ED1D"
@@ -92,18 +100,10 @@
 			"name": "AdminYLogoInverse32",
 			"unicode": "ED73"
 		},
-		{
-			"name": "BoxLogo",
-			"unicode": "ED75"
-		},
 		{
 			"name": "DelveLogoInverse",
 			"unicode": "ED76"
 		},
-		{
-			"name": "DropboxLogo",
-			"unicode": "ED77"
-		},
 		{
 			"name": "ExchangeLogoInverse",
 			"unicode": "ED78"
@@ -116,10 +116,6 @@
 			"name": "OfficeVideoLogoInverse",
 			"unicode": "ED7A"
 		},
-		{
-			"name": "ParatureLogo",
-			"unicode": "ED7B"
-		},
 		{
 			"name": "SocialListeningLogo",
 			"unicode": "ED7C"
@@ -407,6 +403,10 @@
 		{
 			"name": "CaretDownSolid8",
 			"unicode": "EDDC"
+		},
+		{
+			"name": "ClearFormatting",
+			"unicode": "EDDD"
 		}
 	]
 }
\ No newline at end of file
diff --git a/packages/icons/config/fabric-icons-6.json b/packages/icons/config/fabric-icons-6.json
index 57c1f60d89a27..f39057b3ea81b 100644
--- a/packages/icons/config/fabric-icons-6.json
+++ b/packages/icons/config/fabric-icons-6.json
@@ -8,10 +8,6 @@
 		"maxSubsetSize": 100
 	},
 	"glyphs": [
-		{
-			"name": "ClearFormatting",
-			"unicode": "EDDD"
-		},
 		{
 			"name": "Superscript",
 			"unicode": "EDDE"
@@ -36,6 +32,10 @@
 			"name": "SingleBookmark",
 			"unicode": "EDFF"
 		},
+		{
+			"name": "SingleBookmarkSolid",
+			"unicode": "EE00"
+		},
 		{
 			"name": "DoubleChevronDown",
 			"unicode": "EE04"
@@ -48,10 +48,6 @@
 			"name": "ReplyAll",
 			"unicode": "EE0A"
 		},
-		{
-			"name": "GoogleDriveLogo",
-			"unicode": "EE0B"
-		},
 		{
 			"name": "WorkforceManagement",
 			"unicode": "EE0F"
@@ -120,6 +116,10 @@
 			"name": "WifiEthernet",
 			"unicode": "EE77"
 		},
+		{
+			"name": "TrackersMirrored",
+			"unicode": "EE92"
+		},
 		{
 			"name": "DateTimeMirrored",
 			"unicode": "EE93"
diff --git a/packages/icons/config/fabric-icons-7.json b/packages/icons/config/fabric-icons-7.json
index c702f4c62638a..96ff8fa1a767f 100644
--- a/packages/icons/config/fabric-icons-7.json
+++ b/packages/icons/config/fabric-icons-7.json
@@ -120,14 +120,6 @@
 			"name": "Hide2",
 			"unicode": "EF89"
 		},
-		{
-			"name": "iOSAppStoreLogo",
-			"unicode": "EF8A"
-		},
-		{
-			"name": "AndroidLogo",
-			"unicode": "EF8B"
-		},
 		{
 			"name": "Breadcrumb",
 			"unicode": "EF8C"
@@ -188,6 +180,10 @@
 			"name": "TextDocument",
 			"unicode": "F029"
 		},
+		{
+			"name": "TextDocumentShared",
+			"unicode": "F02B"
+		},
 		{
 			"name": "PageCheckedOut",
 			"unicode": "F02C"
@@ -212,6 +208,10 @@
 			"name": "EventDate",
 			"unicode": "F059"
 		},
+		{
+			"name": "ArrowUpRight",
+			"unicode": "F069"
+		},
 		{
 			"name": "CaretRight",
 			"unicode": "F06B"
@@ -352,6 +352,10 @@
 			"name": "PageCheckedin",
 			"unicode": "F104"
 		},
+		{
+			"name": "ReadOutLoud",
+			"unicode": "F112"
+		},
 		{
 			"name": "CaretBottomLeftSolid8",
 			"unicode": "F121"
@@ -381,32 +385,28 @@
 			"unicode": "F137"
 		},
 		{
-			"name": "Toll",
-			"unicode": "F160"
-		},
-		{
-			"name": "ExploreContentSingle",
-			"unicode": "F164"
+			"name": "StatusCircleRing",
+			"unicode": "F138"
 		},
 		{
-			"name": "CollapseContent",
-			"unicode": "F165"
+			"name": "StatusTriangleOuter",
+			"unicode": "F139"
 		},
 		{
-			"name": "CollapseContentSingle",
-			"unicode": "F166"
+			"name": "StatusTriangleInner",
+			"unicode": "F13A"
 		},
 		{
-			"name": "InfoSolid",
-			"unicode": "F167"
+			"name": "StatusTriangleExclamation",
+			"unicode": "F13B"
 		},
 		{
-			"name": "ProgressRingDots",
-			"unicode": "F16A"
+			"name": "StatusCircleExclamation",
+			"unicode": "F13C"
 		},
 		{
-			"name": "CaloriesAdd",
-			"unicode": "F172"
+			"name": "StatusCircleErrorX",
+			"unicode": "F13D"
 		}
 	]
 }
\ No newline at end of file
diff --git a/packages/icons/config/fabric-icons-8.json b/packages/icons/config/fabric-icons-8.json
index 021dbc41677a1..8b805e0eb11eb 100644
--- a/packages/icons/config/fabric-icons-8.json
+++ b/packages/icons/config/fabric-icons-8.json
@@ -8,6 +8,46 @@
 		"maxSubsetSize": 100
 	},
 	"glyphs": [
+		{
+			"name": "StatusCircleInfo",
+			"unicode": "F13F"
+		},
+		{
+			"name": "StatusCircleBlock2",
+			"unicode": "F141"
+		},
+		{
+			"name": "StatusCircleQuestionMark",
+			"unicode": "F142"
+		},
+		{
+			"name": "Toll",
+			"unicode": "F160"
+		},
+		{
+			"name": "ExploreContentSingle",
+			"unicode": "F164"
+		},
+		{
+			"name": "CollapseContent",
+			"unicode": "F165"
+		},
+		{
+			"name": "CollapseContentSingle",
+			"unicode": "F166"
+		},
+		{
+			"name": "InfoSolid",
+			"unicode": "F167"
+		},
+		{
+			"name": "ProgressRingDots",
+			"unicode": "F16A"
+		},
+		{
+			"name": "CaloriesAdd",
+			"unicode": "F172"
+		},
 		{
 			"name": "BranchFork",
 			"unicode": "F173"
@@ -367,46 +407,6 @@
 		{
 			"name": "BranchCompare",
 			"unicode": "F294"
-		},
-		{
-			"name": "BranchMerge",
-			"unicode": "F295"
-		},
-		{
-			"name": "BranchPullRequest",
-			"unicode": "F296"
-		},
-		{
-			"name": "BranchSearch",
-			"unicode": "F297"
-		},
-		{
-			"name": "BranchShelveset",
-			"unicode": "F298"
-		},
-		{
-			"name": "RawSource",
-			"unicode": "F299"
-		},
-		{
-			"name": "MergeDuplicate",
-			"unicode": "F29A"
-		},
-		{
-			"name": "RowsGroup",
-			"unicode": "F29B"
-		},
-		{
-			"name": "RowsChild",
-			"unicode": "F29C"
-		},
-		{
-			"name": "Deploy",
-			"unicode": "F29D"
-		},
-		{
-			"name": "Redeploy",
-			"unicode": "F29E"
 		}
 	]
 }
\ No newline at end of file
diff --git a/packages/icons/config/fabric-icons-9.json b/packages/icons/config/fabric-icons-9.json
index 4f1f321b4a294..c29bfecb91505 100644
--- a/packages/icons/config/fabric-icons-9.json
+++ b/packages/icons/config/fabric-icons-9.json
@@ -8,6 +8,46 @@
 		"maxSubsetSize": 100
 	},
 	"glyphs": [
+		{
+			"name": "BranchMerge",
+			"unicode": "F295"
+		},
+		{
+			"name": "BranchPullRequest",
+			"unicode": "F296"
+		},
+		{
+			"name": "BranchSearch",
+			"unicode": "F297"
+		},
+		{
+			"name": "BranchShelveset",
+			"unicode": "F298"
+		},
+		{
+			"name": "RawSource",
+			"unicode": "F299"
+		},
+		{
+			"name": "MergeDuplicate",
+			"unicode": "F29A"
+		},
+		{
+			"name": "RowsGroup",
+			"unicode": "F29B"
+		},
+		{
+			"name": "RowsChild",
+			"unicode": "F29C"
+		},
+		{
+			"name": "Deploy",
+			"unicode": "F29D"
+		},
+		{
+			"name": "Redeploy",
+			"unicode": "F29E"
+		},
 		{
 			"name": "ServerEnviroment",
 			"unicode": "F29F"
@@ -367,46 +407,6 @@
 		{
 			"name": "FullWidth",
 			"unicode": "F2FE"
-		},
-		{
-			"name": "FullWidthEdit",
-			"unicode": "F2FF"
-		},
-		{
-			"name": "Plug",
-			"unicode": "F300"
-		},
-		{
-			"name": "PlugSolid",
-			"unicode": "F301"
-		},
-		{
-			"name": "PlugConnected",
-			"unicode": "F302"
-		},
-		{
-			"name": "PlugDisconnected",
-			"unicode": "F303"
-		},
-		{
-			"name": "UnlockSolid",
-			"unicode": "F304"
-		},
-		{
-			"name": "Variable",
-			"unicode": "F305"
-		},
-		{
-			"name": "Parameter",
-			"unicode": "F306"
-		},
-		{
-			"name": "CommentUrgent",
-			"unicode": "F307"
-		},
-		{
-			"name": "Storyboard",
-			"unicode": "F308"
 		}
 	]
 }
\ No newline at end of file
diff --git a/packages/icons/config/fabric-icons.json b/packages/icons/config/fabric-icons.json
index 1919619e0096d..8110a4b139aa1 100644
--- a/packages/icons/config/fabric-icons.json
+++ b/packages/icons/config/fabric-icons.json
@@ -56,6 +56,10 @@
 			"name": "Share",
 			"unicode": "E72D"
 		},
+		{
+			"name": "BlockedSite",
+			"unicode": "E72F"
+		},
 		{
 			"name": "FavoriteStar",
 			"unicode": "E734"
@@ -176,6 +180,10 @@
 			"name": "Embed",
 			"unicode": "ECCE"
 		},
+		{
+			"name": "Glimmer",
+			"unicode": "ECF4"
+		},
 		{
 			"name": "Ascending",
 			"unicode": "EDC0"
diff --git a/packages/icons/fonts/fabric-icons-0-2e092c7d.woff b/packages/icons/fonts/fabric-icons-0-2e092c7d.woff
deleted file mode 100644
index 92734d72845d0..0000000000000
Binary files a/packages/icons/fonts/fabric-icons-0-2e092c7d.woff and /dev/null differ
diff --git a/packages/icons/fonts/fabric-icons-0-6a62cc1b.woff b/packages/icons/fonts/fabric-icons-0-6a62cc1b.woff
new file mode 100644
index 0000000000000..6613450850eaa
Binary files /dev/null and b/packages/icons/fonts/fabric-icons-0-6a62cc1b.woff differ
diff --git a/packages/icons/fonts/fabric-icons-1-8143b877.woff b/packages/icons/fonts/fabric-icons-1-8143b877.woff
new file mode 100644
index 0000000000000..fe7c22bc32097
Binary files /dev/null and b/packages/icons/fonts/fabric-icons-1-8143b877.woff differ
diff --git a/packages/icons/fonts/fabric-icons-1-a86438ef.woff b/packages/icons/fonts/fabric-icons-1-a86438ef.woff
deleted file mode 100644
index 5a7ffad2bd4a2..0000000000000
Binary files a/packages/icons/fonts/fabric-icons-1-a86438ef.woff and /dev/null differ
diff --git a/packages/icons/fonts/fabric-icons-10-380f2273.woff b/packages/icons/fonts/fabric-icons-10-380f2273.woff
new file mode 100644
index 0000000000000..c99c408983709
Binary files /dev/null and b/packages/icons/fonts/fabric-icons-10-380f2273.woff differ
diff --git a/packages/icons/fonts/fabric-icons-10-90d2dc10.woff b/packages/icons/fonts/fabric-icons-10-90d2dc10.woff
deleted file mode 100644
index 00dbeb3167aac..0000000000000
Binary files a/packages/icons/fonts/fabric-icons-10-90d2dc10.woff and /dev/null differ
diff --git a/packages/icons/fonts/fabric-icons-11-18d2ffa4.woff b/packages/icons/fonts/fabric-icons-11-18d2ffa4.woff
deleted file mode 100644
index 25023cd56faab..0000000000000
Binary files a/packages/icons/fonts/fabric-icons-11-18d2ffa4.woff and /dev/null differ
diff --git a/packages/icons/fonts/fabric-icons-11-2c5983e3.woff b/packages/icons/fonts/fabric-icons-11-2c5983e3.woff
new file mode 100644
index 0000000000000..44b19270a3f9f
Binary files /dev/null and b/packages/icons/fonts/fabric-icons-11-2c5983e3.woff differ
diff --git a/packages/icons/fonts/fabric-icons-12-6c96597e.woff b/packages/icons/fonts/fabric-icons-12-6c96597e.woff
deleted file mode 100644
index 7c86dbea9d017..0000000000000
Binary files a/packages/icons/fonts/fabric-icons-12-6c96597e.woff and /dev/null differ
diff --git a/packages/icons/fonts/fabric-icons-12-e5eef780.woff b/packages/icons/fonts/fabric-icons-12-e5eef780.woff
new file mode 100644
index 0000000000000..b6de8cc418d34
Binary files /dev/null and b/packages/icons/fonts/fabric-icons-12-e5eef780.woff differ
diff --git a/packages/icons/fonts/fabric-icons-13-02c4bea1.woff b/packages/icons/fonts/fabric-icons-13-02c4bea1.woff
deleted file mode 100644
index 19f7eb1790589..0000000000000
Binary files a/packages/icons/fonts/fabric-icons-13-02c4bea1.woff and /dev/null differ
diff --git a/packages/icons/fonts/fabric-icons-13-be3ab2c9.woff b/packages/icons/fonts/fabric-icons-13-be3ab2c9.woff
new file mode 100644
index 0000000000000..53b550fb058dd
Binary files /dev/null and b/packages/icons/fonts/fabric-icons-13-be3ab2c9.woff differ
diff --git a/packages/icons/fonts/fabric-icons-14-36569c01.woff b/packages/icons/fonts/fabric-icons-14-36569c01.woff
deleted file mode 100644
index 5c3e6cd98e6c2..0000000000000
Binary files a/packages/icons/fonts/fabric-icons-14-36569c01.woff and /dev/null differ
diff --git a/packages/icons/fonts/fabric-icons-14-cf85ed5b.woff b/packages/icons/fonts/fabric-icons-14-cf85ed5b.woff
new file mode 100644
index 0000000000000..40707ffe6cc23
Binary files /dev/null and b/packages/icons/fonts/fabric-icons-14-cf85ed5b.woff differ
diff --git a/packages/icons/fonts/fabric-icons-2-e2ae1f0c.woff b/packages/icons/fonts/fabric-icons-2-e2ae1f0c.woff
deleted file mode 100644
index b1651930ba8d4..0000000000000
Binary files a/packages/icons/fonts/fabric-icons-2-e2ae1f0c.woff and /dev/null differ
diff --git a/packages/icons/fonts/fabric-icons-2-e49d4cfd.woff b/packages/icons/fonts/fabric-icons-2-e49d4cfd.woff
new file mode 100644
index 0000000000000..a24013220ab33
Binary files /dev/null and b/packages/icons/fonts/fabric-icons-2-e49d4cfd.woff differ
diff --git a/packages/icons/fonts/fabric-icons-3-39ed3795.woff b/packages/icons/fonts/fabric-icons-3-39ed3795.woff
new file mode 100644
index 0000000000000..30dde7c3cf8ed
Binary files /dev/null and b/packages/icons/fonts/fabric-icons-3-39ed3795.woff differ
diff --git a/packages/icons/fonts/fabric-icons-3-a13cb765.woff b/packages/icons/fonts/fabric-icons-3-a13cb765.woff
deleted file mode 100644
index 43e515991234b..0000000000000
Binary files a/packages/icons/fonts/fabric-icons-3-a13cb765.woff and /dev/null differ
diff --git a/packages/icons/fonts/fabric-icons-4-0838b5e4.woff b/packages/icons/fonts/fabric-icons-4-0838b5e4.woff
new file mode 100644
index 0000000000000..0cf7216ac7fff
Binary files /dev/null and b/packages/icons/fonts/fabric-icons-4-0838b5e4.woff differ
diff --git a/packages/icons/fonts/fabric-icons-4-97372384.woff b/packages/icons/fonts/fabric-icons-4-97372384.woff
deleted file mode 100644
index 142ed7e3d4d3f..0000000000000
Binary files a/packages/icons/fonts/fabric-icons-4-97372384.woff and /dev/null differ
diff --git a/packages/icons/fonts/fabric-icons-5-125dbde8.woff b/packages/icons/fonts/fabric-icons-5-125dbde8.woff
deleted file mode 100644
index f1c985ca97aab..0000000000000
Binary files a/packages/icons/fonts/fabric-icons-5-125dbde8.woff and /dev/null differ
diff --git a/packages/icons/fonts/fabric-icons-5-5a61f6fb.woff b/packages/icons/fonts/fabric-icons-5-5a61f6fb.woff
new file mode 100644
index 0000000000000..b207698c67dc1
Binary files /dev/null and b/packages/icons/fonts/fabric-icons-5-5a61f6fb.woff differ
diff --git a/packages/icons/fonts/fabric-icons-6-2e7e2914.woff b/packages/icons/fonts/fabric-icons-6-2e7e2914.woff
deleted file mode 100644
index fa1c0dca1b677..0000000000000
Binary files a/packages/icons/fonts/fabric-icons-6-2e7e2914.woff and /dev/null differ
diff --git a/packages/icons/fonts/fabric-icons-6-baae6235.woff b/packages/icons/fonts/fabric-icons-6-baae6235.woff
new file mode 100644
index 0000000000000..72545c8c4baff
Binary files /dev/null and b/packages/icons/fonts/fabric-icons-6-baae6235.woff differ
diff --git a/packages/icons/fonts/fabric-icons-7-143895dd.woff b/packages/icons/fonts/fabric-icons-7-143895dd.woff
deleted file mode 100644
index dd0b6e1881638..0000000000000
Binary files a/packages/icons/fonts/fabric-icons-7-143895dd.woff and /dev/null differ
diff --git a/packages/icons/fonts/fabric-icons-7-3ac670e6.woff b/packages/icons/fonts/fabric-icons-7-3ac670e6.woff
new file mode 100644
index 0000000000000..5dcd9b6b8bcef
Binary files /dev/null and b/packages/icons/fonts/fabric-icons-7-3ac670e6.woff differ
diff --git a/packages/icons/fonts/fabric-icons-8-bd2a110b.woff b/packages/icons/fonts/fabric-icons-8-bd2a110b.woff
deleted file mode 100644
index 3b6419e9a3ed6..0000000000000
Binary files a/packages/icons/fonts/fabric-icons-8-bd2a110b.woff and /dev/null differ
diff --git a/packages/icons/fonts/fabric-icons-8-d0700068.woff b/packages/icons/fonts/fabric-icons-8-d0700068.woff
new file mode 100644
index 0000000000000..51504ef64bab4
Binary files /dev/null and b/packages/icons/fonts/fabric-icons-8-d0700068.woff differ
diff --git a/packages/icons/fonts/fabric-icons-9-8ab77260.woff b/packages/icons/fonts/fabric-icons-9-8ab77260.woff
deleted file mode 100644
index cf100875b1407..0000000000000
Binary files a/packages/icons/fonts/fabric-icons-9-8ab77260.woff and /dev/null differ
diff --git a/packages/icons/fonts/fabric-icons-9-938d7113.woff b/packages/icons/fonts/fabric-icons-9-938d7113.woff
new file mode 100644
index 0000000000000..8b95b2e4f73ea
Binary files /dev/null and b/packages/icons/fonts/fabric-icons-9-938d7113.woff differ
diff --git a/packages/icons/fonts/fabric-icons-a13498cf.woff b/packages/icons/fonts/fabric-icons-a13498cf.woff
new file mode 100644
index 0000000000000..83ca678700a53
Binary files /dev/null and b/packages/icons/fonts/fabric-icons-a13498cf.woff differ
diff --git a/packages/icons/fonts/fabric-icons-cf6d96bb.woff b/packages/icons/fonts/fabric-icons-cf6d96bb.woff
deleted file mode 100644
index 790840eadb124..0000000000000
Binary files a/packages/icons/fonts/fabric-icons-cf6d96bb.woff and /dev/null differ
diff --git a/packages/icons/package.json b/packages/icons/package.json
index 7b87ae1fe5dcb..c24ff97ae781f 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uifabric/icons",
-  "version": "5.4.1",
+  "version": "5.6.0",
   "description": "Office UI Fabric icon set.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -22,7 +22,7 @@
     "office-ui-fabric-react-tslint": ">=5.0.0 <6.0.0"
   },
   "dependencies": {
-    "@uifabric/styling": ">=5.16.0 <6.0.0",
+    "@uifabric/styling": ">=5.19.1 <6.0.0",
     "tslib": "^1.7.1"
   }
 }
\ No newline at end of file
diff --git a/packages/icons/src/IconNames.ts b/packages/icons/src/IconNames.ts
index d0bdf920b1958..aea5fedaec6e9 100644
--- a/packages/icons/src/IconNames.ts
+++ b/packages/icons/src/IconNames.ts
@@ -25,6 +25,7 @@ export const enum IconNames {
   Stop = 'Stop',
   Link = 'Link',
   Filter = 'Filter',
+  AllApps = 'AllApps',
   Zoom = 'Zoom',
   ZoomOut = 'ZoomOut',
   Microphone = 'Microphone',
@@ -124,6 +125,7 @@ export const enum IconNames {
   TurnRight = 'TurnRight',
   Ferry = 'Ferry',
   Highlight = 'Highlight',
+  PowerButton = 'PowerButton',
   Tab = 'Tab',
   Admin = 'Admin',
   TVMonitor = 'TVMonitor',
@@ -357,6 +359,7 @@ export const enum IconNames {
   CircleRing = 'CircleRing',
   CircleFill = 'CircleFill',
   Record2 = 'Record2',
+  AllAppsMirrored = 'AllAppsMirrored',
   BookmarksMirrored = 'BookmarksMirrored',
   BulletedListMirrored = 'BulletedListMirrored',
   CaretHollowMirrored = 'CaretHollowMirrored',
@@ -401,6 +404,7 @@ export const enum IconNames {
   Medical = 'Medical',
   Running = 'Running',
   Weights = 'Weights',
+  Trackers = 'Trackers',
   AddNotes = 'AddNotes',
   BarChart4 = 'BarChart4',
   CirclePlus = 'CirclePlus',
@@ -416,6 +420,7 @@ export const enum IconNames {
   StockDown = 'StockDown',
   StockUp = 'StockUp',
   Lamp = 'Lamp',
+  Source = 'Source',
   MSNVideos = 'MSNVideos',
   Cricket = 'Cricket',
   Golf = 'Golf',
@@ -646,6 +651,7 @@ export const enum IconNames {
   Export = 'Export',
   ExportMirrored = 'ExportMirrored',
   SingleBookmark = 'SingleBookmark',
+  SingleBookmarkSolid = 'SingleBookmarkSolid',
   DoubleChevronDown = 'DoubleChevronDown',
   FollowUser = 'FollowUser',
   ReplyAll = 'ReplyAll',
@@ -669,6 +675,7 @@ export const enum IconNames {
   GenericScan = 'GenericScan',
   AustralianRules = 'AustralianRules',
   WifiEthernet = 'WifiEthernet',
+  TrackersMirrored = 'TrackersMirrored',
   DateTimeMirrored = 'DateTimeMirrored',
   StopSolid = 'StopSolid',
   DoubleChevronUp12 = 'DoubleChevronUp12',
@@ -790,12 +797,14 @@ export const enum IconNames {
   ZipFolder = 'ZipFolder',
   SurveyQuestions = 'SurveyQuestions',
   TextDocument = 'TextDocument',
+  TextDocumentShared = 'TextDocumentShared',
   PageCheckedOut = 'PageCheckedOut',
   SaveAndClose = 'SaveAndClose',
   Script = 'Script',
   Archive = 'Archive',
   ActivityFeed = 'ActivityFeed',
   EventDate = 'EventDate',
+  ArrowUpRight = 'ArrowUpRight',
   CaretRight = 'CaretRight',
   SetAction = 'SetAction',
   CaretSolidLeft = 'CaretSolidLeft',
@@ -831,6 +840,7 @@ export const enum IconNames {
   CannedChat = 'CannedChat',
   SkypeForBusinessLogo = 'SkypeForBusinessLogo',
   PageCheckedin = 'PageCheckedin',
+  ReadOutLoud = 'ReadOutLoud',
   CaretBottomLeftSolid8 = 'CaretBottomLeftSolid8',
   CaretBottomRightSolid8 = 'CaretBottomRightSolid8',
   FolderHorizontal = 'FolderHorizontal',
@@ -838,7 +848,16 @@ export const enum IconNames {
   GiftboxOpen = 'GiftboxOpen',
   StatusCircleOuter = 'StatusCircleOuter',
   StatusCircleInner = 'StatusCircleInner',
+  StatusCircleRing = 'StatusCircleRing',
+  StatusTriangleOuter = 'StatusTriangleOuter',
+  StatusTriangleInner = 'StatusTriangleInner',
+  StatusTriangleExclamation = 'StatusTriangleExclamation',
+  StatusCircleExclamation = 'StatusCircleExclamation',
+  StatusCircleErrorX = 'StatusCircleErrorX',
   StatusCircleCheckmark = 'StatusCircleCheckmark',
+  StatusCircleInfo = 'StatusCircleInfo',
+  StatusCircleBlock2 = 'StatusCircleBlock2',
+  StatusCircleQuestionMark = 'StatusCircleQuestionMark',
   Toll = 'Toll',
   ExploreContentSingle = 'ExploreContentSingle',
   CollapseContent = 'CollapseContent',
@@ -1420,6 +1439,7 @@ export const enum IconNames {
   SquareShapeSolid = 'SquareShapeSolid',
   TriangleShapeSolid = 'TriangleShapeSolid',
   DropShapeSolid = 'DropShapeSolid',
+  RectangleShapeSolid = 'RectangleShapeSolid',
   InsertColumnsLeft = 'InsertColumnsLeft',
   InsertColumnsRight = 'InsertColumnsRight',
   InsertRowsAbove = 'InsertRowsAbove',
@@ -1428,17 +1448,17 @@ export const enum IconNames {
   DeleteRows = 'DeleteRows',
   DeleteRowsMirrored = 'DeleteRowsMirrored',
   DeleteTable = 'DeleteTable',
-  GitLogo = 'GitLogo',
-  GitHubLogo = 'GitHubLogo',
-  ApacheMavenLogo = 'ApacheMavenLogo',
-  NPMLogo = 'NPMLogo',
-  GitFork = 'GitFork',
-  SVNLogo = 'SVNLogo',
-  JenkinsLogo = 'JenkinsLogo',
   VersionControlPush = 'VersionControlPush',
   ExternalGit = 'ExternalGit',
+  WhiteBoardApp16 = 'WhiteBoardApp16',
+  WhiteBoardApp32 = 'WhiteBoardApp32',
   InsertSignatureLine = 'InsertSignatureLine',
   ArrangeByFrom = 'ArrangeByFrom',
   Phishing = 'Phishing',
-  CreateMailRule = 'CreateMailRule'
+  CreateMailRule = 'CreateMailRule',
+  PublishCourse = 'PublishCourse',
+  DictionaryRemove = 'DictionaryRemove',
+  UserRemove = 'UserRemove',
+  UserEvent = 'UserEvent',
+  Encryption = 'Encryption'
 }
diff --git a/packages/icons/src/fabric-icons-0.ts b/packages/icons/src/fabric-icons-0.ts
index fb8f3cbf228fd..16e2b1528f491 100644
--- a/packages/icons/src/fabric-icons-0.ts
+++ b/packages/icons/src/fabric-icons-0.ts
@@ -22,7 +22,7 @@ export function initializeIcons(
     },
     fontFace: {
       fontFamily: `"FabricMDL2Icons-0"`,
-      src: `url('${baseUrl}fabric-icons-0-2e092c7d.woff') format('woff')`,
+      src: `url('${baseUrl}fabric-icons-0-6a62cc1b.woff') format('woff')`,
     },
     icons: {
       'DecreaseIndentLegacy': '\uE290',
@@ -41,6 +41,7 @@ export function initializeIcons(
       'Shop': '\uE719',
       'Stop': '\uE71A',
       'Link': '\uE71B',
+      'AllApps': '\uE71D',
       'Zoom': '\uE71E',
       'ZoomOut': '\uE71F',
       'Microphone': '\uE720',
@@ -53,7 +54,6 @@ export function initializeIcons(
       'Back': '\uE72B',
       'Refresh': '\uE72C',
       'Lock': '\uE72E',
-      'BlockedSite': '\uE72F',
       'ReportHacked': '\uE730',
       'EMI': '\uE731',
       'MiniLink': '\uE732',
diff --git a/packages/icons/src/fabric-icons-1.ts b/packages/icons/src/fabric-icons-1.ts
index bfdc1140b9692..ff13dddbd1210 100644
--- a/packages/icons/src/fabric-icons-1.ts
+++ b/packages/icons/src/fabric-icons-1.ts
@@ -22,11 +22,12 @@ export function initializeIcons(
     },
     fontFace: {
       fontFamily: `"FabricMDL2Icons-1"`,
-      src: `url('${baseUrl}fabric-icons-1-a86438ef.woff') format('woff')`,
+      src: `url('${baseUrl}fabric-icons-1-8143b877.woff') format('woff')`,
     },
     icons: {
       'Ferry': '\uE7E3',
       'Highlight': '\uE7E6',
+      'PowerButton': '\uE7E8',
       'Tab': '\uE7E9',
       'Admin': '\uE7EF',
       'TVMonitor': '\uE7F4',
@@ -123,8 +124,7 @@ export function initializeIcons(
       'Preview': '\uE8FF',
       'News': '\uE900',
       'Chat': '\uE901',
-      'Group': '\uE902',
-      'World': '\uE909'
+      'Group': '\uE902'
     }
   };
 
diff --git a/packages/icons/src/fabric-icons-10.ts b/packages/icons/src/fabric-icons-10.ts
index d8d8a94390439..e8f1210b0ad44 100644
--- a/packages/icons/src/fabric-icons-10.ts
+++ b/packages/icons/src/fabric-icons-10.ts
@@ -1,4 +1,4 @@
-// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fabric-assets-license
+  // Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fabric-assets-license
 
 // tslint:disable:max-line-length
 
@@ -22,9 +22,19 @@ export function initializeIcons(
     },
     fontFace: {
       fontFamily: `"FabricMDL2Icons-10"`,
-      src: `url('${baseUrl}fabric-icons-10-90d2dc10.woff') format('woff')`,
+      src: `url('${baseUrl}fabric-icons-10-380f2273.woff') format('woff')`,
     },
     icons: {
+      'FullWidthEdit': '\uF2FF',
+      'Plug': '\uF300',
+      'PlugSolid': '\uF301',
+      'PlugConnected': '\uF302',
+      'PlugDisconnected': '\uF303',
+      'UnlockSolid': '\uF304',
+      'Variable': '\uF305',
+      'Parameter': '\uF306',
+      'CommentUrgent': '\uF307',
+      'Storyboard': '\uF308',
       'DiffInline': '\uF309',
       'DiffSideBySide': '\uF30A',
       'ImageDiff': '\uF30B',
@@ -114,13 +124,7 @@ export function initializeIcons(
       'DoubleChevronLeft8': '\uF36D',
       'DoubleChevronRight8': '\uF36E',
       'ChevronDownEnd6': '\uF36F',
-      'ChevronUpEnd6': '\uF370',
-      'ChevronLeftEnd6': '\uF371',
-      'ChevronRightEnd6': '\uF372',
-      'ContextMenu': '\uF37C',
-      'AzureAPIManagement': '\uF37F',
-      'AzureServiceEndpoint': '\uF380',
-      'VSTSLogo': '\uF381'
+      'ChevronUpEnd6': '\uF370'
     }
   };
 
diff --git a/packages/icons/src/fabric-icons-11.ts b/packages/icons/src/fabric-icons-11.ts
index dbb06f2a9f6a4..918e5a3f998bc 100644
--- a/packages/icons/src/fabric-icons-11.ts
+++ b/packages/icons/src/fabric-icons-11.ts
@@ -22,9 +22,15 @@ export function initializeIcons(
     },
     fontFace: {
       fontFamily: `"FabricMDL2Icons-11"`,
-      src: `url('${baseUrl}fabric-icons-11-18d2ffa4.woff') format('woff')`,
+      src: `url('${baseUrl}fabric-icons-11-2c5983e3.woff') format('woff')`,
     },
     icons: {
+      'ChevronLeftEnd6': '\uF371',
+      'ChevronRightEnd6': '\uF372',
+      'ContextMenu': '\uF37C',
+      'AzureAPIManagement': '\uF37F',
+      'AzureServiceEndpoint': '\uF380',
+      'VSTSLogo': '\uF381',
       'VSTSAltLogo1': '\uF382',
       'VSTSAltLogo2': '\uF383',
       'FileTypeSolution': '\uF387',
@@ -118,13 +124,7 @@ export function initializeIcons(
       'NugetLogo': '\uF44C',
       'TFVCLogo': '\uF44D',
       'ProjectLogo32': '\uF47E',
-      'ProjectLogoFill32': '\uF47F',
-      'ProjectLogo16': '\uF480',
-      'ProjectLogoFill16': '\uF481',
-      'SwayLogo32': '\uF482',
-      'SwayLogoFill32': '\uF483',
-      'SwayLogo16': '\uF484',
-      'SwayLogoFill16': '\uF485'
+      'ProjectLogoFill32': '\uF47F'
     }
   };
 
diff --git a/packages/icons/src/fabric-icons-12.ts b/packages/icons/src/fabric-icons-12.ts
index df412bbe53c58..fda8a8353f45c 100644
--- a/packages/icons/src/fabric-icons-12.ts
+++ b/packages/icons/src/fabric-icons-12.ts
@@ -1,4 +1,4 @@
-  // Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fabric-assets-license
+// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fabric-assets-license
 
 // tslint:disable:max-line-length
 
@@ -22,9 +22,15 @@ export function initializeIcons(
     },
     fontFace: {
       fontFamily: `"FabricMDL2Icons-12"`,
-      src: `url('${baseUrl}fabric-icons-12-6c96597e.woff') format('woff')`,
+      src: `url('${baseUrl}fabric-icons-12-e5eef780.woff') format('woff')`,
     },
     icons: {
+      'ProjectLogo16': '\uF480',
+      'ProjectLogoFill16': '\uF481',
+      'SwayLogo32': '\uF482',
+      'SwayLogoFill32': '\uF483',
+      'SwayLogo16': '\uF484',
+      'SwayLogoFill16': '\uF485',
       'ClassNotebookLogo32': '\uF486',
       'ClassNotebookLogoFill32': '\uF487',
       'ClassNotebookLogo16': '\uF488',
@@ -118,13 +124,7 @@ export function initializeIcons(
       'ChartYAngle': '\uF515',
       'Combobox': '\uF516',
       'LineSpacing': '\uF517',
-      'Padding': '\uF518',
-      'PaddingTop': '\uF519',
-      'PaddingBottom': '\uF51A',
-      'PaddingLeft': '\uF51B',
-      'PaddingRight': '\uF51C',
-      'NavigationFlipper': '\uF51D',
-      'AlignJustify': '\uF51E'
+      'Padding': '\uF518'
     }
   };
 
diff --git a/packages/icons/src/fabric-icons-13.ts b/packages/icons/src/fabric-icons-13.ts
index 1fa7cbff67e92..9fdd4774a49d0 100644
--- a/packages/icons/src/fabric-icons-13.ts
+++ b/packages/icons/src/fabric-icons-13.ts
@@ -1,4 +1,4 @@
-// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fabric-assets-license
+  // Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fabric-assets-license
 
 // tslint:disable:max-line-length
 
@@ -22,9 +22,15 @@ export function initializeIcons(
     },
     fontFace: {
       fontFamily: `"FabricMDL2Icons-13"`,
-      src: `url('${baseUrl}fabric-icons-13-02c4bea1.woff') format('woff')`,
+      src: `url('${baseUrl}fabric-icons-13-be3ab2c9.woff') format('woff')`,
     },
     icons: {
+      'PaddingTop': '\uF519',
+      'PaddingBottom': '\uF51A',
+      'PaddingLeft': '\uF51B',
+      'PaddingRight': '\uF51C',
+      'NavigationFlipper': '\uF51D',
+      'AlignJustify': '\uF51E',
       'TextOverflow': '\uF51F',
       'VisualsFolder': '\uF520',
       'VisualsStore': '\uF521',
@@ -102,6 +108,7 @@ export function initializeIcons(
       'SquareShapeSolid': '\uF63D',
       'TriangleShapeSolid': '\uF63E',
       'DropShapeSolid': '\uF63F',
+      'RectangleShapeSolid': '\uF640',
       'InsertColumnsLeft': '\uF64A',
       'InsertColumnsRight': '\uF64B',
       'InsertRowsAbove': '\uF64C',
@@ -110,17 +117,14 @@ export function initializeIcons(
       'DeleteRows': '\uF64F',
       'DeleteRowsMirrored': '\uF650',
       'DeleteTable': '\uF651',
-      'GitLogo': '\uF65D',
-      'GitHubLogo': '\uF65E',
-      'ApacheMavenLogo': '\uF65F',
-      'NPMLogo': '\uF660',
-      'GitFork': '\uF661',
-      'SVNLogo': '\uF662',
-      'JenkinsLogo': '\uF663',
       'VersionControlPush': '\uF664',
       'ExternalGit': '\uF665',
+      'WhiteBoardApp16': '\uF673',
+      'WhiteBoardApp32': '\uF674',
       'InsertSignatureLine': '\uF677',
-      'ArrangeByFrom': '\uF678'
+      'ArrangeByFrom': '\uF678',
+      'Phishing': '\uF679',
+      'CreateMailRule': '\uF67A'
     }
   };
 
diff --git a/packages/icons/src/fabric-icons-14.ts b/packages/icons/src/fabric-icons-14.ts
index 1492454e350b1..640372908ed59 100644
--- a/packages/icons/src/fabric-icons-14.ts
+++ b/packages/icons/src/fabric-icons-14.ts
@@ -22,11 +22,14 @@ export function initializeIcons(
     },
     fontFace: {
       fontFamily: `"FabricMDL2Icons-14"`,
-      src: `url('${baseUrl}fabric-icons-14-36569c01.woff') format('woff')`,
+      src: `url('${baseUrl}fabric-icons-14-cf85ed5b.woff') format('woff')`,
     },
     icons: {
-      'Phishing': '\uF679',
-      'CreateMailRule': '\uF67A'
+      'PublishCourse': '\uF699',
+      'DictionaryRemove': '\uF69A',
+      'UserRemove': '\uF69B',
+      'UserEvent': '\uF69C',
+      'Encryption': '\uF69D'
     }
   };
 
diff --git a/packages/icons/src/fabric-icons-2.ts b/packages/icons/src/fabric-icons-2.ts
index fbb527a9e888c..ebaa4a629a346 100644
--- a/packages/icons/src/fabric-icons-2.ts
+++ b/packages/icons/src/fabric-icons-2.ts
@@ -22,9 +22,10 @@ export function initializeIcons(
     },
     fontFace: {
       fontFamily: `"FabricMDL2Icons-2"`,
-      src: `url('${baseUrl}fabric-icons-2-e2ae1f0c.woff') format('woff')`,
+      src: `url('${baseUrl}fabric-icons-2-e49d4cfd.woff') format('woff')`,
     },
     icons: {
+      'World': '\uE909',
       'Comment': '\uE90A',
       'DockLeft': '\uE90C',
       'DockRight': '\uE90D',
@@ -123,8 +124,7 @@ export function initializeIcons(
       'HailDay': '\uEA00',
       'WorkFlow': '\uEA01',
       'HourGlass': '\uEA03',
-      'StoreLogoMed20': '\uEA04',
-      'TimeSheet': '\uEA05'
+      'StoreLogoMed20': '\uEA04'
     }
   };
 
diff --git a/packages/icons/src/fabric-icons-3.ts b/packages/icons/src/fabric-icons-3.ts
index dd813f825c81a..747cad580019d 100644
--- a/packages/icons/src/fabric-icons-3.ts
+++ b/packages/icons/src/fabric-icons-3.ts
@@ -22,9 +22,10 @@ export function initializeIcons(
     },
     fontFace: {
       fontFamily: `"FabricMDL2Icons-3"`,
-      src: `url('${baseUrl}fabric-icons-3-a13cb765.woff') format('woff')`,
+      src: `url('${baseUrl}fabric-icons-3-39ed3795.woff') format('woff')`,
     },
     icons: {
+      'TimeSheet': '\uEA05',
       'TriangleSolid': '\uEA08',
       'VideoSolid': '\uEA0C',
       'RainShowersNight': '\uEA0F',
@@ -45,6 +46,7 @@ export function initializeIcons(
       'ErrorBadge': '\uEA39',
       'CircleFill': '\uEA3B',
       'Record2': '\uEA3F',
+      'AllAppsMirrored': '\uEA40',
       'BookmarksMirrored': '\uEA41',
       'BulletedListMirrored': '\uEA42',
       'CaretHollowMirrored': '\uEA45',
@@ -89,6 +91,7 @@ export function initializeIcons(
       'Medical': '\uEAD4',
       'Running': '\uEADA',
       'Weights': '\uEADB',
+      'Trackers': '\uEADF',
       'AddNotes': '\uEAE3',
       'BarChart4': '\uEAE7',
       'CirclePlus': '\uEAEE',
@@ -104,6 +107,7 @@ export function initializeIcons(
       'StockDown': '\uEB0F',
       'StockUp': '\uEB11',
       'Lamp': '\uEB19',
+      'Source': '\uEB1B',
       'MSNVideos': '\uEB1C',
       'Cricket': '\uEB1E',
       'Golf': '\uEB1F',
@@ -120,11 +124,7 @@ export function initializeIcons(
       'Tennis': '\uEB33',
       'Arrivals': '\uEB34',
       'Design': '\uEB3C',
-      'Website': '\uEB41',
-      'Drop': '\uEB42',
-      'SkiResorts': '\uEB45',
-      'Snowflake': '\uEB46',
-      'BusSolid': '\uEB47'
+      'Website': '\uEB41'
     }
   };
 
diff --git a/packages/icons/src/fabric-icons-4.ts b/packages/icons/src/fabric-icons-4.ts
index 03c61f57769a5..323adbf9fac38 100644
--- a/packages/icons/src/fabric-icons-4.ts
+++ b/packages/icons/src/fabric-icons-4.ts
@@ -1,4 +1,4 @@
-// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fabric-assets-license
+  // Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fabric-assets-license
 
 // tslint:disable:max-line-length
 
@@ -22,9 +22,13 @@ export function initializeIcons(
     },
     fontFace: {
       fontFamily: `"FabricMDL2Icons-4"`,
-      src: `url('${baseUrl}fabric-icons-4-97372384.woff') format('woff')`,
+      src: `url('${baseUrl}fabric-icons-4-0838b5e4.woff') format('woff')`,
     },
     icons: {
+      'Drop': '\uEB42',
+      'SkiResorts': '\uEB45',
+      'Snowflake': '\uEB46',
+      'BusSolid': '\uEB47',
       'FerrySolid': '\uEB48',
       'AirplaneSolid': '\uEB4C',
       'TrainSolid': '\uEB4D',
@@ -116,14 +120,11 @@ export function initializeIcons(
       'ProgressLoopOuter': '\uECDF',
       'Blocked2': '\uECE4',
       'FangBody': '\uECEB',
-      'Glimmer': '\uECF4',
       'ChatInviteFriend': '\uECFE',
       'Crown': '\uED01',
       'ScaleUp': '\uED09',
       'Feedback': '\uED15',
-      'SharepointLogoInverse': '\uED18',
-      'YammerLogo': '\uED19',
-      'Hide': '\uED1A'
+      'SharepointLogoInverse': '\uED18'
     }
   };
 
diff --git a/packages/icons/src/fabric-icons-5.ts b/packages/icons/src/fabric-icons-5.ts
index 05c1144911ca7..c73575c2dc466 100644
--- a/packages/icons/src/fabric-icons-5.ts
+++ b/packages/icons/src/fabric-icons-5.ts
@@ -1,4 +1,4 @@
-// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fabric-assets-license
+  // Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fabric-assets-license
 
 // tslint:disable:max-line-length
 
@@ -22,9 +22,11 @@ export function initializeIcons(
     },
     fontFace: {
       fontFamily: `"FabricMDL2Icons-5"`,
-      src: `url('${baseUrl}fabric-icons-5-125dbde8.woff') format('woff')`,
+      src: `url('${baseUrl}fabric-icons-5-5a61f6fb.woff') format('woff')`,
     },
     icons: {
+      'YammerLogo': '\uED19',
+      'Hide': '\uED1A',
       'Uneditable': '\uED1D',
       'ReturnToSession': '\uED24',
       'OpenFolderHorizontal': '\uED25',
@@ -50,7 +52,6 @@ export function initializeIcons(
       'ExchangeLogoInverse': '\uED78',
       'LyncLogo': '\uED79',
       'OfficeVideoLogoInverse': '\uED7A',
-      'ParatureLogo': '\uED7B',
       'SocialListeningLogo': '\uED7C',
       'VisioLogoInverse': '\uED7D',
       'Balloons': '\uED7E',
@@ -122,7 +123,8 @@ export function initializeIcons(
       'CaretLeftSolid8': '\uEDD9',
       'CaretRightSolid8': '\uEDDA',
       'CaretUpSolid8': '\uEDDB',
-      'CaretDownSolid8': '\uEDDC'
+      'CaretDownSolid8': '\uEDDC',
+      'ClearFormatting': '\uEDDD'
     }
   };
 
diff --git a/packages/icons/src/fabric-icons-6.ts b/packages/icons/src/fabric-icons-6.ts
index 951a2ac5c22f1..baad66b695bd8 100644
--- a/packages/icons/src/fabric-icons-6.ts
+++ b/packages/icons/src/fabric-icons-6.ts
@@ -1,4 +1,4 @@
-// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fabric-assets-license
+  // Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fabric-assets-license
 
 // tslint:disable:max-line-length
 
@@ -22,16 +22,16 @@ export function initializeIcons(
     },
     fontFace: {
       fontFamily: `"FabricMDL2Icons-6"`,
-      src: `url('${baseUrl}fabric-icons-6-2e7e2914.woff') format('woff')`,
+      src: `url('${baseUrl}fabric-icons-6-baae6235.woff') format('woff')`,
     },
     icons: {
-      'ClearFormatting': '\uEDDD',
       'Superscript': '\uEDDE',
       'Subscript': '\uEDDF',
       'Strikethrough': '\uEDE0',
       'Export': '\uEDE1',
       'ExportMirrored': '\uEDE2',
       'SingleBookmark': '\uEDFF',
+      'SingleBookmarkSolid': '\uEE00',
       'DoubleChevronDown': '\uEE04',
       'FollowUser': '\uEE05',
       'ReplyAll': '\uEE0A',
@@ -52,6 +52,7 @@ export function initializeIcons(
       'GenericScan': '\uEE6F',
       'AustralianRules': '\uEE70',
       'WifiEthernet': '\uEE77',
+      'TrackersMirrored': '\uEE92',
       'DateTimeMirrored': '\uEE93',
       'StopSolid': '\uEE95',
       'DoubleChevronUp12': '\uEE96',
diff --git a/packages/icons/src/fabric-icons-7.ts b/packages/icons/src/fabric-icons-7.ts
index ab89a59e387b0..1e24ac1333440 100644
--- a/packages/icons/src/fabric-icons-7.ts
+++ b/packages/icons/src/fabric-icons-7.ts
@@ -1,4 +1,4 @@
-// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fabric-assets-license
+  // Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fabric-assets-license
 
 // tslint:disable:max-line-length
 
@@ -22,7 +22,7 @@ export function initializeIcons(
     },
     fontFace: {
       fontFamily: `"FabricMDL2Icons-7"`,
-      src: `url('${baseUrl}fabric-icons-7-143895dd.woff') format('woff')`,
+      src: `url('${baseUrl}fabric-icons-7-3ac670e6.woff') format('woff')`,
     },
     icons: {
       'LandscapeOrientation': '\uEF6B',
@@ -68,12 +68,14 @@ export function initializeIcons(
       'ZipFolder': '\uF012',
       'SurveyQuestions': '\uF01B',
       'TextDocument': '\uF029',
+      'TextDocumentShared': '\uF02B',
       'PageCheckedOut': '\uF02C',
       'SaveAndClose': '\uF038',
       'Script': '\uF03A',
       'Archive': '\uF03F',
       'ActivityFeed': '\uF056',
       'EventDate': '\uF059',
+      'ArrowUpRight': '\uF069',
       'CaretRight': '\uF06B',
       'SetAction': '\uF071',
       'CaretSolidLeft': '\uF08D',
@@ -109,6 +111,7 @@ export function initializeIcons(
       'CannedChat': '\uF0F2',
       'SkypeForBusinessLogo': '\uF0FC',
       'PageCheckedin': '\uF104',
+      'ReadOutLoud': '\uF112',
       'CaretBottomLeftSolid8': '\uF121',
       'CaretBottomRightSolid8': '\uF122',
       'FolderHorizontal': '\uF12B',
@@ -116,13 +119,12 @@ export function initializeIcons(
       'GiftboxOpen': '\uF133',
       'StatusCircleOuter': '\uF136',
       'StatusCircleInner': '\uF137',
-      'Toll': '\uF160',
-      'ExploreContentSingle': '\uF164',
-      'CollapseContent': '\uF165',
-      'CollapseContentSingle': '\uF166',
-      'InfoSolid': '\uF167',
-      'ProgressRingDots': '\uF16A',
-      'CaloriesAdd': '\uF172'
+      'StatusCircleRing': '\uF138',
+      'StatusTriangleOuter': '\uF139',
+      'StatusTriangleInner': '\uF13A',
+      'StatusTriangleExclamation': '\uF13B',
+      'StatusCircleExclamation': '\uF13C',
+      'StatusCircleErrorX': '\uF13D'
     }
   };
 
diff --git a/packages/icons/src/fabric-icons-8.ts b/packages/icons/src/fabric-icons-8.ts
index 57325985ef742..6920797bd5fc0 100644
--- a/packages/icons/src/fabric-icons-8.ts
+++ b/packages/icons/src/fabric-icons-8.ts
@@ -22,9 +22,19 @@ export function initializeIcons(
     },
     fontFace: {
       fontFamily: `"FabricMDL2Icons-8"`,
-      src: `url('${baseUrl}fabric-icons-8-bd2a110b.woff') format('woff')`,
+      src: `url('${baseUrl}fabric-icons-8-d0700068.woff') format('woff')`,
     },
     icons: {
+      'StatusCircleInfo': '\uF13F',
+      'StatusCircleBlock2': '\uF141',
+      'StatusCircleQuestionMark': '\uF142',
+      'Toll': '\uF160',
+      'ExploreContentSingle': '\uF164',
+      'CollapseContent': '\uF165',
+      'CollapseContentSingle': '\uF166',
+      'InfoSolid': '\uF167',
+      'ProgressRingDots': '\uF16A',
+      'CaloriesAdd': '\uF172',
       'BranchFork': '\uF173',
       'MobileReport': '\uF18A',
       'HardDriveGroup': '\uF18F',
@@ -114,17 +124,7 @@ export function initializeIcons(
       'BranchFork2': '\uF291',
       'BranchLocked': '\uF292',
       'BranchCommit': '\uF293',
-      'BranchCompare': '\uF294',
-      'BranchMerge': '\uF295',
-      'BranchPullRequest': '\uF296',
-      'BranchSearch': '\uF297',
-      'BranchShelveset': '\uF298',
-      'RawSource': '\uF299',
-      'MergeDuplicate': '\uF29A',
-      'RowsGroup': '\uF29B',
-      'RowsChild': '\uF29C',
-      'Deploy': '\uF29D',
-      'Redeploy': '\uF29E'
+      'BranchCompare': '\uF294'
     }
   };
 
diff --git a/packages/icons/src/fabric-icons-9.ts b/packages/icons/src/fabric-icons-9.ts
index 3dc4b6431a896..87b18f0e47a15 100644
--- a/packages/icons/src/fabric-icons-9.ts
+++ b/packages/icons/src/fabric-icons-9.ts
@@ -22,9 +22,19 @@ export function initializeIcons(
     },
     fontFace: {
       fontFamily: `"FabricMDL2Icons-9"`,
-      src: `url('${baseUrl}fabric-icons-9-8ab77260.woff') format('woff')`,
+      src: `url('${baseUrl}fabric-icons-9-938d7113.woff') format('woff')`,
     },
     icons: {
+      'BranchMerge': '\uF295',
+      'BranchPullRequest': '\uF296',
+      'BranchSearch': '\uF297',
+      'BranchShelveset': '\uF298',
+      'RawSource': '\uF299',
+      'MergeDuplicate': '\uF29A',
+      'RowsGroup': '\uF29B',
+      'RowsChild': '\uF29C',
+      'Deploy': '\uF29D',
+      'Redeploy': '\uF29E',
       'ServerEnviroment': '\uF29F',
       'VisioDiagram': '\uF2A0',
       'HighlightMappedShapes': '\uF2A1',
@@ -114,17 +124,7 @@ export function initializeIcons(
       'PY': '\uF2F9',
       'CoffeeScript': '\uF2FA',
       'MarkDownLanguage': '\uF2FB',
-      'FullWidth': '\uF2FE',
-      'FullWidthEdit': '\uF2FF',
-      'Plug': '\uF300',
-      'PlugSolid': '\uF301',
-      'PlugConnected': '\uF302',
-      'PlugDisconnected': '\uF303',
-      'UnlockSolid': '\uF304',
-      'Variable': '\uF305',
-      'Parameter': '\uF306',
-      'CommentUrgent': '\uF307',
-      'Storyboard': '\uF308'
+      'FullWidth': '\uF2FE'
     }
   };
 
diff --git a/packages/icons/src/fabric-icons.ts b/packages/icons/src/fabric-icons.ts
index 02d7e4ed2f83e..3e5ae1f68fc35 100644
--- a/packages/icons/src/fabric-icons.ts
+++ b/packages/icons/src/fabric-icons.ts
@@ -22,7 +22,7 @@ export function initializeIcons(
     },
     fontFace: {
       fontFamily: `"FabricMDL2Icons"`,
-      src: `url('${baseUrl}fabric-icons-cf6d96bb.woff') format('woff')`,
+      src: `url('${baseUrl}fabric-icons-a13498cf.woff') format('woff')`,
     },
     icons: {
       'GlobalNavButton': '\uE700',
@@ -37,6 +37,7 @@ export function initializeIcons(
       'Filter': '\uE71C',
       'Search': '\uE721',
       'Share': '\uE72D',
+      'BlockedSite': '\uE72F',
       'FavoriteStar': '\uE734',
       'FavoriteStarFill': '\uE735',
       'CheckMark': '\uE73E',
@@ -67,6 +68,7 @@ export function initializeIcons(
       'HeartFill': '\uEB52',
       'Tiles': '\uECA5',
       'Embed': '\uECCE',
+      'Glimmer': '\uECF4',
       'Ascending': '\uEDC0',
       'Descending': '\uEDC1',
       'SortUp': '\uEE68',
diff --git a/packages/jest-serializer-merge-styles/package.json b/packages/jest-serializer-merge-styles/package.json
index 6726de0dcab0e..035167d377f1d 100644
--- a/packages/jest-serializer-merge-styles/package.json
+++ b/packages/jest-serializer-merge-styles/package.json
@@ -24,6 +24,6 @@
     "office-ui-fabric-react-tslint": ">=5.0.0 <6.0.0"
   },
   "dependencies": {
-    "@uifabric/merge-styles": ">=5.11.0 <6.0.0"
+    "@uifabric/merge-styles": ">=5.13.0 <6.0.0"
   }
 }
\ No newline at end of file
diff --git a/packages/jest-serializer-merge-styles/tslint.json b/packages/jest-serializer-merge-styles/tslint.json
index 009d06e3cf447..621ee6ba04605 100644
--- a/packages/jest-serializer-merge-styles/tslint.json
+++ b/packages/jest-serializer-merge-styles/tslint.json
@@ -2,7 +2,5 @@
   "extends": [
     "office-ui-fabric-react-tslint"
   ],
-  "rules": {
-    "prefer-const": true
-  }
+  "rules": {}
 }
\ No newline at end of file
diff --git a/packages/merge-styles/CHANGELOG.json b/packages/merge-styles/CHANGELOG.json
index 43bf929efe821..cceb41e4a2c84 100644
--- a/packages/merge-styles/CHANGELOG.json
+++ b/packages/merge-styles/CHANGELOG.json
@@ -1,6 +1,90 @@
 {
   "name": "@uifabric/merge-styles",
   "entries": [
+    {
+      "version": "5.13.0",
+      "tag": "@uifabric/merge-styles_v5.13.0",
+      "date": "Fri, 02 Mar 2018 11:25:35 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Christian Gonzalez <christianjordangonzalez@gmail.com>",
+            "commit": "77c1e54e140be51f9c7f252748bb5f868f957919",
+            "comment": "Upgrade to TypeScript 2.7.2"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.12.2",
+      "tag": "@uifabric/merge-styles_v5.12.2",
+      "date": "Wed, 21 Feb 2018 11:12:11 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "51d47a80898d9834d40205274268e60730f306a1",
+            "comment": "Adding test coverage for media queries."
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.12.1",
+      "tag": "@uifabric/merge-styles_v5.12.1",
+      "date": "Fri, 16 Feb 2018 11:23:29 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "04bd4051d81e68f7b007009e85b50665d4b9db4e",
+            "comment": "mergeStyles: setting `fill-opacity` as unitless."
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.12.0",
+      "tag": "@uifabric/merge-styles_v5.12.0",
+      "date": "Wed, 14 Feb 2018 22:10:50 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "711ef243d0212f623a55ebde0d98042f148d81db",
+            "comment": "mergeStyles: Adding support to register selectors globally. Use `:global(rule)` as the selector to ensure that the unique className is not prepended in the output. See merge-styles README.md for more details."
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.11.2",
+      "tag": "@uifabric/merge-styles_v5.11.2",
+      "date": "Wed, 07 Feb 2018 11:23:59 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "d121208b61c93811909fb69d2ba8d104c3531769",
+            "comment": "Adjusting rtl flipping logic to be more resilient to invalid styling."
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.11.1",
+      "tag": "@uifabric/merge-styles_v5.11.1",
+      "date": "Tue, 06 Feb 2018 11:14:36 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Lambert Wang <lambert.ww@gmail.com>",
+            "commit": "857b101451a04bb20ee88d08b36511485939005d",
+            "comment": "[provideUnits] Add line-height to ignore"
+          }
+        ]
+      }
+    },
     {
       "version": "5.11.0",
       "tag": "@uifabric/merge-styles_v5.11.0",
diff --git a/packages/merge-styles/CHANGELOG.md b/packages/merge-styles/CHANGELOG.md
index 93b7272d36580..57e1c2f1a72fc 100644
--- a/packages/merge-styles/CHANGELOG.md
+++ b/packages/merge-styles/CHANGELOG.md
@@ -1,6 +1,48 @@
 # Change Log - @uifabric/merge-styles
 
-This log was last generated on Thu, 25 Jan 2018 11:23:06 GMT and should not be manually modified.
+This log was last generated on Fri, 02 Mar 2018 11:25:35 GMT and should not be manually modified.
+
+## 5.13.0
+Fri, 02 Mar 2018 11:25:35 GMT
+
+### Minor changes
+
+- Upgrade to TypeScript 2.7.2
+
+## 5.12.2
+Wed, 21 Feb 2018 11:12:11 GMT
+
+### Patches
+
+- Adding test coverage for media queries.
+
+## 5.12.1
+Fri, 16 Feb 2018 11:23:29 GMT
+
+### Patches
+
+- mergeStyles: setting `fill-opacity` as unitless.
+
+## 5.12.0
+Wed, 14 Feb 2018 22:10:50 GMT
+
+### Minor changes
+
+- mergeStyles: Adding support to register selectors globally. Use `:global(rule)` as the selector to ensure that the unique className is not prepended in the output. See merge-styles README.md for more details.
+
+## 5.11.2
+Wed, 07 Feb 2018 11:23:59 GMT
+
+### Patches
+
+- Adjusting rtl flipping logic to be more resilient to invalid styling.
+
+## 5.11.1
+Tue, 06 Feb 2018 11:14:36 GMT
+
+### Patches
+
+- [provideUnits] Add line-height to ignore
 
 ## 5.11.0
 Thu, 25 Jan 2018 11:23:06 GMT
diff --git a/packages/merge-styles/README.md b/packages/merge-styles/README.md
index 7cceed7041b16..e76ef60d0f5c8 100644
--- a/packages/merge-styles/README.md
+++ b/packages/merge-styles/README.md
@@ -195,6 +195,22 @@ This would register the rules:
 .css-0 .child { background: green; }
 ```
 
+### Global selectors
+
+While we suggest avoiding global selectors, there are some cases which make sense to register things globally. Keep in mind that global selectors can't be guaranteed unique and may suffer from specificity problems and versioning issues in the case that two different versions of your library get rendered on the page.
+
+To register a selector globally, wrap it in a `:global()` wrapper:
+
+```tsx
+{
+  selectors: {
+    ':global(button)': {
+      overflow: 'visible'
+    }
+  }
+}
+```
+
 ### Media queries
 
 Media queries can be applied via selectors. For example, this style will produce a class which has a red background when above 600px, and green when at or below 600px:
diff --git a/packages/merge-styles/package.json b/packages/merge-styles/package.json
index 2990935f87fed..9f043ff386328 100644
--- a/packages/merge-styles/package.json
+++ b/packages/merge-styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uifabric/merge-styles",
-  "version": "5.11.0",
+  "version": "5.13.0",
   "description": "Office UI Fabric style loading utilities.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
diff --git a/packages/merge-styles/src/IRawStyleBase.ts b/packages/merge-styles/src/IRawStyleBase.ts
index a1e8ce30117a2..c0a2414ee3dcd 100644
--- a/packages/merge-styles/src/IRawStyleBase.ts
+++ b/packages/merge-styles/src/IRawStyleBase.ts
@@ -173,6 +173,11 @@ export interface IRawStyleBase extends IRawFontStyle {
    */
   WebkitFontSmoothing?: 'none' | 'antialiased' | 'grayscale' | 'subpixel-antialiased';
 
+  /**
+   * (Webkit specific) momentum scrolling on iOS devices
+   */
+  WebkitOverflowScrolling?: 'auto' | 'touch';
+
   /**
    * Aligns a flex container's lines within the flex container when there is extra space
    * in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
diff --git a/packages/merge-styles/src/Stylesheet.ts b/packages/merge-styles/src/Stylesheet.ts
index 594a4acd03a14..20cda8757e20f 100644
--- a/packages/merge-styles/src/Stylesheet.ts
+++ b/packages/merge-styles/src/Stylesheet.ts
@@ -50,16 +50,16 @@ let _stylesheet: Stylesheet;
  * @public
  */
 export class Stylesheet {
-  private _styleElement: HTMLStyleElement;
-  private _rules: string[];
+  private _styleElement!: HTMLStyleElement;
+  private _rules!: string[];
   private _config: IStyleSheetConfig;
-  private _rulesToInsert: string[];
-  private _timerId: number;
-  private _counter: number;
-  private _keyToClassName: { [key: string]: string };
+  private _rulesToInsert!: string[];
+  private _timerId!: number;
+  private _counter!: number;
+  private _keyToClassName!: { [key: string]: string };
 
   // tslint:disable-next-line:no-any
-  private _classNameToArgs: { [key: string]: { args: any, rules: string[] } };
+  private _classNameToArgs!: { [key: string]: { args: any, rules: string[] } };
 
   /**
    * Gets the singleton instance.
diff --git a/packages/merge-styles/src/concatStyleSets.ts b/packages/merge-styles/src/concatStyleSets.ts
index 6068fa557682e..98b314a88176c 100644
--- a/packages/merge-styles/src/concatStyleSets.ts
+++ b/packages/merge-styles/src/concatStyleSets.ts
@@ -6,7 +6,7 @@ export function concatStyleSets<T extends object>(
   ...args: (T | false | null | undefined)[]
 ): T {
   // tslint:disable-next-line:no-any
-  const mergedSet: T = {} as any;
+  const mergedSet = {} as any;
 
   for (const currentSet of args) {
     if (currentSet) {
@@ -28,5 +28,5 @@ export function concatStyleSets<T extends object>(
     }
   }
 
-  return mergedSet;
+  return mergedSet as T;
 }
\ No newline at end of file
diff --git a/packages/merge-styles/src/mergeStyleSets.test.ts b/packages/merge-styles/src/mergeStyleSets.test.ts
index de2a4368c86f6..43201a9c25e84 100644
--- a/packages/merge-styles/src/mergeStyleSets.test.ts
+++ b/packages/merge-styles/src/mergeStyleSets.test.ts
@@ -18,8 +18,9 @@ describe('mergeStyleSets', () => {
   });
 
   it('can merge style sets', () => {
+    const empty: { c?: string } = {};
     const result: { root: string, a: string, b: string } = mergeStyleSets(
-      {},
+      empty,
       {
         root: { background: 'red' },
         a: { background: 'green' }
diff --git a/packages/merge-styles/src/mergeStyleSets.ts b/packages/merge-styles/src/mergeStyleSets.ts
index ad617684f4442..a5980e8d3dced 100644
--- a/packages/merge-styles/src/mergeStyleSets.ts
+++ b/packages/merge-styles/src/mergeStyleSets.ts
@@ -9,9 +9,9 @@ import { styleToRegistration, applyRegistration } from './styleToClassName';
  *
  * @public
  */
-export function mergeStyleSets<T>(
-  ...cssSets: ({[P in keyof T]?: IStyle } | null | undefined)[]
-): T {
+export function mergeStyleSets<K extends string>(
+  ...cssSets: ({[P in K]?: IStyle } | null | undefined)[]
+): {[P in K]: string} {
   // tslint:disable-next-line:no-any
   const classNameSet: any = {};
   const classMap: { [key: string]: string } = {};
@@ -49,5 +49,5 @@ export function mergeStyleSets<T>(
     }
   }
 
-  return classNameSet as T;
+  return classNameSet;
 }
diff --git a/packages/merge-styles/src/mergeStyles.test.ts b/packages/merge-styles/src/mergeStyles.test.ts
index 7aba032d6df4e..ba07949b4e700 100644
--- a/packages/merge-styles/src/mergeStyles.test.ts
+++ b/packages/merge-styles/src/mergeStyles.test.ts
@@ -80,4 +80,20 @@ describe('mergeStyles', () => {
     );
   });
 
+  it('can register media queries', () => {
+    mergeStyles({
+      background: 'red',
+      selectors: {
+        '@media screen and (max-width: 100px)': {
+          background: 'green'
+        }
+      }
+    });
+
+    expect(_stylesheet.getRules()).toEqual(
+      '.css-0{background:red;}' +
+      '@media screen and (max-width: 100px){.css-0{background:green;}}'
+    );
+  });
+
 });
diff --git a/packages/merge-styles/src/styleToClassName.test.ts b/packages/merge-styles/src/styleToClassName.test.ts
index a46fcaebc337a..022d435384798 100644
--- a/packages/merge-styles/src/styleToClassName.test.ts
+++ b/packages/merge-styles/src/styleToClassName.test.ts
@@ -97,7 +97,7 @@ describe('styleToClassName', () => {
   });
 
   it('does not emit a rule which has an undefined value', () => {
-    expect(styleToClassName({fontFamily: undefined})).toEqual('');
+    expect(styleToClassName({ fontFamily: undefined })).toEqual('');
     expect(_stylesheet.getRules()).toEqual('');
   });
 
@@ -146,6 +146,17 @@ describe('styleToClassName', () => {
     expect(_stylesheet.getRules()).toEqual('.css-0{background:red;}.css-1 > *{background:red;}');
   });
 
+  it('can register global selectors', () => {
+    const className = styleToClassName({
+      selectors: {
+        ':global(button)': { background: 'red' }
+      },
+    });
+
+    expect(className).toEqual('css-0');
+    expect(_stylesheet.getRules()).toEqual('button{background:red;}');
+  });
+
   it('can expand an array of rules', () => {
     styleToClassName([
       { background: 'red' },
diff --git a/packages/merge-styles/src/styleToClassName.ts b/packages/merge-styles/src/styleToClassName.ts
index b1eb495010eea..a9b0e827ce276 100644
--- a/packages/merge-styles/src/styleToClassName.ts
+++ b/packages/merge-styles/src/styleToClassName.ts
@@ -58,7 +58,9 @@ function extractRules(
             if (selectors.hasOwnProperty(newSelector)) {
               const selectorValue = selectors[newSelector];
 
-              if (newSelector.indexOf('@media') === 0) {
+              if (newSelector.indexOf(':global(') === 0) {
+                newSelector = newSelector.replace(/:global\(|\)$/g, '');
+              } else if (newSelector.indexOf('@media') === 0) {
                 newSelector = newSelector + '{' + currentSelector;
               } else if (newSelector.indexOf(':') === 0) {
                 newSelector = currentSelector + newSelector;
diff --git a/packages/merge-styles/src/transforms/provideUnits.ts b/packages/merge-styles/src/transforms/provideUnits.ts
index 2d2fe1e018988..7d85156e01ab7 100644
--- a/packages/merge-styles/src/transforms/provideUnits.ts
+++ b/packages/merge-styles/src/transforms/provideUnits.ts
@@ -5,6 +5,7 @@ const NON_PIXEL_NUMBER_PROPS = [
   'flex',
   'flex-grow',
   'flex-shrink',
+  'fill-opacity',
   'opacity',
   'order',
   'z-index',
diff --git a/packages/merge-styles/src/transforms/rtlifyRules.test.ts b/packages/merge-styles/src/transforms/rtlifyRules.test.ts
index 74d9f87123a9a..cff34694b45aa 100644
--- a/packages/merge-styles/src/transforms/rtlifyRules.test.ts
+++ b/packages/merge-styles/src/transforms/rtlifyRules.test.ts
@@ -51,4 +51,11 @@ describe('rtlifyRules', () => {
     expect(rules).toEqual(['cursor', 'hand']);
   });
 
+  it('does not crash when name or value are not strings', () => {
+    // tslint:disable:no-any
+    rtlifyRules(['left', null] as any, 0);
+    rtlifyRules(['left', {}] as any, 0);
+    rtlifyRules([null, 'abc'] as any, 0);
+    // tslint:enable:no-any
+  });
 });
diff --git a/packages/merge-styles/src/transforms/rtlifyRules.ts b/packages/merge-styles/src/transforms/rtlifyRules.ts
index af57b70ffc528..211cf60772dea 100644
--- a/packages/merge-styles/src/transforms/rtlifyRules.ts
+++ b/packages/merge-styles/src/transforms/rtlifyRules.ts
@@ -1,21 +1,28 @@
-const _nameReplacements: { [key: string]: string } = {
-  'left': 'right',
-  'right': 'left'
+const LEFT = 'left';
+const RIGHT = 'right';
+const NO_FLIP = '@noflip';
+const NAME_REPLACEMENTS: { [key: string]: string } = {
+  [LEFT]: RIGHT,
+  [RIGHT]: LEFT
 };
-
-const _valueReplacements: { [key: string]: string } = {
+const VALUE_REPLACEMENTS: { [key: string]: string } = {
   'w-resize': 'e-resize',
   'sw-resize': 'se-resize',
   'nw-resize': 'ne-resize'
 };
 
-const NO_FLIP = '@noflip';
-
 let _rtl = getRTL();
 
+/**
+ * Sets the current RTL value.
+ */
 export function setRTL(isRTL: boolean): void {
   _rtl = isRTL;
 }
+
+/**
+ * Gets the current RTL value.
+ */
 export function getRTL(): boolean {
   if (_rtl === undefined) {
     _rtl = (
@@ -27,28 +34,37 @@ export function getRTL(): boolean {
   return _rtl;
 }
 
+/**
+ * RTLifies the rulePair in the array at the current index. This mutates the array for performance
+ * reasons.
+ */
 export function rtlifyRules(
   rulePairs: (string | number)[],
   index: number
 ): void {
   if (getRTL()) {
     const name = rulePairs[index] as string;
+
+    if (!name) {
+      return;
+    }
+
     const value = rulePairs[index + 1] as string;
 
-    if (value.indexOf(NO_FLIP) >= 0) {
+    if (typeof value === 'string' && value.indexOf(NO_FLIP) >= 0) {
       rulePairs[index + 1] = value.replace(/\s*(?:\/\*\s*)?\@noflip\b(?:\s*\*\/)?\s*?/g, '');
-    } else if (name.indexOf('left') >= 0) {
-      rulePairs[index] = name.replace('left', 'right');
-    } else if (name.indexOf('right') >= 0) {
-      rulePairs[index] = name.replace('right', 'left');
-    } else if (String(value).indexOf('left') >= 0) {
-      rulePairs[index + 1] = value.replace('left', 'right');
-    } else if (String(value).indexOf('right') >= 0) {
-      rulePairs[index + 1] = value.replace('right', 'left');
-    } else if (_nameReplacements[name]) {
-      rulePairs[index] = _nameReplacements[name];
-    } else if (_valueReplacements[value]) {
-      rulePairs[index + 1] = _valueReplacements[value];
+    } else if (name.indexOf(LEFT) >= 0) {
+      rulePairs[index] = name.replace(LEFT, RIGHT);
+    } else if (name.indexOf(RIGHT) >= 0) {
+      rulePairs[index] = name.replace(RIGHT, LEFT);
+    } else if (String(value).indexOf(LEFT) >= 0) {
+      rulePairs[index + 1] = value.replace(LEFT, RIGHT);
+    } else if (String(value).indexOf(RIGHT) >= 0) {
+      rulePairs[index + 1] = value.replace(RIGHT, LEFT);
+    } else if (NAME_REPLACEMENTS[name]) {
+      rulePairs[index] = NAME_REPLACEMENTS[name];
+    } else if (VALUE_REPLACEMENTS[value]) {
+      rulePairs[index + 1] = VALUE_REPLACEMENTS[value];
     } else {
       switch (name) {
         case 'margin':
@@ -63,6 +79,9 @@ export function rtlifyRules(
   }
 }
 
+/**
+ * Given a string value in a space delimited format (e.g. "1 2 3 4"), negates a particular value.
+ */
 function negateNum(value: string, partIndex: number): string {
   const parts = value.split(' ');
   const numberVal = parseInt(parts[partIndex], 10);
@@ -72,6 +91,9 @@ function negateNum(value: string, partIndex: number): string {
   return parts.join(' ');
 }
 
+/**
+ * Given a string quad, flips the left and right values.
+ */
 function flipQuad(value: string): string {
   if (typeof value === 'string') {
     const parts = value.split(' ');
diff --git a/packages/merge-styles/tslint.json b/packages/merge-styles/tslint.json
index 009d06e3cf447..621ee6ba04605 100644
--- a/packages/merge-styles/tslint.json
+++ b/packages/merge-styles/tslint.json
@@ -2,7 +2,5 @@
   "extends": [
     "office-ui-fabric-react-tslint"
   ],
-  "rules": {
-    "prefer-const": true
-  }
+  "rules": {}
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react-tslint/package.json b/packages/office-ui-fabric-react-tslint/package.json
index 492c95ba21a0a..32c0dbc598ef0 100644
--- a/packages/office-ui-fabric-react-tslint/package.json
+++ b/packages/office-ui-fabric-react-tslint/package.json
@@ -10,4 +10,4 @@
   "devDependencies": {
     "tslint-react": "^3.2.0"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/office-ui-fabric-react-tslint/tslint.json b/packages/office-ui-fabric-react-tslint/tslint.json
index 67a68159eae09..0300b096b8ab9 100644
--- a/packages/office-ui-fabric-react-tslint/tslint.json
+++ b/packages/office-ui-fabric-react-tslint/tslint.json
@@ -50,10 +50,9 @@
       "call-signature",
       "parameter",
       "arrow-parameter",
-      "property-declaration",
-      "member-variable-declaration"
+      "property-declaration"
     ],
-    "prefer-const": false,
+    "prefer-const": true,
     "quotemark": [
       true,
       "single",
diff --git a/packages/office-ui-fabric-react/CHANGELOG.json b/packages/office-ui-fabric-react/CHANGELOG.json
index 6ed5890e8e686..ecb059145ad4f 100644
--- a/packages/office-ui-fabric-react/CHANGELOG.json
+++ b/packages/office-ui-fabric-react/CHANGELOG.json
@@ -1,6 +1,1321 @@
 {
   "name": "office-ui-fabric-react",
   "entries": [
+    {
+      "version": "5.64.3",
+      "tag": "office-ui-fabric-react_v5.64.3",
+      "date": "Thu, 15 Mar 2018 10:37:10 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Lambert Wang <lambert.ww@gmail.com>",
+            "commit": "fe61a19cfe9890247cbb58a90789e932769210c0",
+            "comment": "TextField: Enabled scrolling and resize when disabled"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.64.2",
+      "tag": "office-ui-fabric-react_v5.64.2",
+      "date": "Thu, 15 Mar 2018 02:42:27 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "d1b3d356374e2c5887566df9f6e7645c932529bd",
+            "comment": "Targeted the aria-labelledby on ChoiceGroup's input field to the span tag inside the span tag inside label ( option.labelId ) instead of thelabel itself ( option.id ). "
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.18.1 <6.0.0` to `>=5.18.2 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.64.1",
+      "tag": "office-ui-fabric-react_v5.64.1",
+      "date": "Wed, 14 Mar 2018 10:28:26 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "8b1625290f6a775f6c64b30617a2593576aacb34",
+            "comment": "Theme generator: exposing to the website."
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.64.0",
+      "tag": "office-ui-fabric-react_v5.64.0",
+      "date": "Tue, 13 Mar 2018 10:17:37 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "7a6c2bda4918fb262600609f2169a337c2613328",
+            "comment": "Added an is-open class to the DatePicker root element to indicate when the datepicker is being shown based on the IDatePickerState.isDatePickerShown state property."
+          },
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "a1271228d199722b34c61b903e7ef4c0e4cba744",
+            "comment": "Added documentation for components that allow native props"
+          }
+        ],
+        "patch": [
+          {
+            "author": "Jon Schectman <joschect@microsoft.com>",
+            "commit": "6bce81a5497dcf09595e6e6bb04591595a887cce",
+            "comment": "Pickers: Fix aria bug where activedescendant would be sug--1"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.18.0 <6.0.0` to `>=5.18.1 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.63.0",
+      "tag": "office-ui-fabric-react_v5.63.0",
+      "date": "Mon, 12 Mar 2018 06:29:20 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Alex Henry <adhe223@g.uky.edu>",
+            "commit": "2480bbe4e1f498a7ebd086c0b406eb7706bc3c20",
+            "comment": "Add rel option for Contextual Menu Items"
+          },
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "7251c2dc69071e97fccbeb18971736f4e65cf301",
+            "comment": "ComoboBox and SpinButton: Removing excess margins and padding to make them consistent with TextField."
+          },
+          {
+            "author": "Matt Lind <matthewtlind@hotmail.com>",
+            "commit": "327e1e350ab4bb9909d449e66b7ec9ef8ca879e4",
+            "comment": "Facepile: Added `overflowPersonas` option to better control what personas go into the overflow personas vs show up as a persona coin. Also adjusted Facepile back to showing a Persona control if there is only one persona to be shown with no overflow."
+          },
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "494d1258ce23505c8e5a4d1565ff5a2451048162",
+            "comment": "importing hoistStatics from Utilities for withResponsiveMode decorator"
+          },
+          {
+            "author": "MaxLustig <maxslustig@gmail.com>",
+            "commit": "aa9c51c996715398e2b8a722db66b00806743e45",
+            "comment": "Add ability to get and set scroll position on ScrollablePane"
+          },
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "fa97fa979c83ce8b9c67ca0dbb51ffe49e20b1b4",
+            "comment": "DetailsList: IColumn `onColumnClick` callback args marked non-optional."
+          }
+        ],
+        "patch": [
+          {
+            "author": "Spencer Lynn <sllynn8907@gmail.com>",
+            "commit": "699fa697ae829e756108ce2b6725084d27e93f7e",
+            "comment": "Updating a test to ensure that focus is trapped in a FocusTrapZone when it has a FocusZone as the last element"
+          },
+          {
+            "author": "Hlynur Tryggvason <hlynur.tryggvason@officeatwork.com>",
+            "commit": "76a874fe31f68d88b31b738a4d600df0129924d8",
+            "comment": "[TextField] onChange fix for IE when using multiline with placeholder"
+          },
+          {
+            "author": "manueldosal <manuel_dosal32@hotmail.com>",
+            "commit": "374759cd95dc57a079b7a76120b008bcd791b173",
+            "comment": "Run onCellFocused before unmount and before select color"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/styling\" from `>=5.19.0 <6.0.0` to `>=5.19.1 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.17.1 <6.0.0` to `>=5.18.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.62.1",
+      "tag": "office-ui-fabric-react_v5.62.1",
+      "date": "Fri, 09 Mar 2018 15:07:28 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "jspurlin <jspurlin@microsoft.com>",
+            "commit": "4fc956a30e82d90fe405def0f9434ffdb0d407ab",
+            "comment": "Add unit test to catch focus regression being fixed by this PR"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.17.0 <6.0.0` to `>=5.17.1 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.62.0",
+      "tag": "office-ui-fabric-react_v5.62.0",
+      "date": "Fri, 09 Mar 2018 11:13:58 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Cyrus Balsara <cyrusb@microsoft.com>",
+            "commit": "6d2d87f10bdd69a46a879d2ce6fb09f983d309bd",
+            "comment": "Allow DetailsRow to have a custom renderer"
+          },
+          {
+            "author": "Jordan Janzen <jordancjanzen@gmail.com>",
+            "commit": "b410f6b9a328dd4ad24cbaa739156c23880e44e4",
+            "comment": "Dialog: convert to mergeStyles part 2."
+          }
+        ],
+        "patch": [
+          {
+            "author": "Trevor Gau <trevorsg@gmail.com>",
+            "commit": "a4a17ef0a30d1c37629b9200236dfd82bd80ce54",
+            "comment": "Fixes #3985 by removing HC style override on ms-Link buttons."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.16.0 <6.0.0` to `>=5.17.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.61.0",
+      "tag": "office-ui-fabric-react_v5.61.0",
+      "date": "Thu, 08 Mar 2018 11:27:24 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "manueldosal <manuel_dosal32@hotmail.com>",
+            "commit": "48ad19d4b13e248d91a70fd59960e85a00753d96",
+            "comment": "ComboBox adding onPendingValueChanged callback prop to run when pending value is changed"
+          },
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "dfe67eaf43e3d135075cfd9feea5acd40466c88e",
+            "comment": "Seperated the SCSS for Persona and Persona Coin components due to bloat when imported twice."
+          }
+        ],
+        "minor": [
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "61c7a055825c41f828c416e5370212804f71d05c",
+            "comment": "Added the @customizable decorator to Image and Layer to enable theme functionality"
+          },
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "2cf6fefa3c6aa497e2e6e1e748b4bf57abc1b480",
+            "comment": "MessageBar: Aria label for truncated text overflow button and added aria labels for buttons in examples."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.15.0 <6.0.0` to `>=5.16.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.60.1",
+      "tag": "office-ui-fabric-react_v5.60.1",
+      "date": "Wed, 07 Mar 2018 11:16:50 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Jordan Janzen <jordancjanzen@gmail.com>",
+            "commit": "52a113ea0f91c4591a8c951c9233046320cdeddc",
+            "comment": "Fix ContextualMenu customization sample"
+          },
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "eee7b8801c94dcefe050211f244bba81afffe402",
+            "comment": "TeachingBubble: New animation for bounce with fade in."
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.60.0",
+      "tag": "office-ui-fabric-react_v5.60.0",
+      "date": "Tue, 06 Mar 2018 11:13:36 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Andrew <jabbrass@zoho.com>",
+            "commit": "4368015261d01c1287ded8fb360ac126908a1813",
+            "comment": "Add async debounce option to BasePicker"
+          }
+        ],
+        "patch": [
+          {
+            "author": "FalseLobster <aliciakds88@gmail.com>",
+            "commit": "0ccc7bd7d7323c677a8c7ec4f2d1885ba653cbac",
+            "comment": "Facepile: Conditionally apply `aria-describedby` only when `ariaDescription` is provided"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.14.1 <6.0.0` to `>=5.15.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.59.1",
+      "tag": "office-ui-fabric-react_v5.59.1",
+      "date": "Tue, 06 Mar 2018 02:06:59 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "68b0c8b7ae1c1ef5a9932ea786f37df71ce06e7b",
+            "comment": "Temporarily commented out @customizable decorator in Image component to restore usage of static functions and variables."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.14.0 <6.0.0` to `>=5.14.1 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.59.0",
+      "tag": "office-ui-fabric-react_v5.59.0",
+      "date": "Mon, 05 Mar 2018 11:16:58 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Aditi Mandal <aditima@microsoft.com>",
+            "commit": "6060a321343aab06548b3c5441b9d9fe62507242",
+            "comment": "Fix issue 3608: DetailsList horizontal scroll due to cellSizer"
+          },
+          {
+            "author": "Su Su <s@warmsea.net>",
+            "commit": "172b7c5c54a0f50b305d7eff4d77f62e861daae0",
+            "comment": "Nav: Wire nav link to expand/collapse behavior if it has no URL but has children."
+          },
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "132efd3b7ee5853a2c47d5ac7663853caedf28e1",
+            "comment": "Fixed aria-describedby bug causing it not to render properly"
+          },
+          {
+            "author": "Mark Polak <mark@thedutchies.com>",
+            "commit": "28af7a3ed0e56fdddfb5b2ccb26c83543e6b049f",
+            "comment": "Removes unused variables"
+          },
+          {
+            "author": "Samuel Timbó <samuelmtimbo@gmail.com>",
+            "commit": "eb4764aa3943195315138df089e27e7e261c664b",
+            "comment": "GroupedListSection: Changed the list ref name from `list` to `_list`"
+          }
+        ],
+        "minor": [
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "5e24983e16790428d43d3c8252f361bc32c7f99f",
+            "comment": "Converting Image SCSS to MergeStyles step 2 - style conversion"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.58.0",
+      "tag": "office-ui-fabric-react_v5.58.0",
+      "date": "Fri, 02 Mar 2018 11:25:35 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "natalieethell <yummyraspberries@gmail.com>",
+            "commit": "73809a7f38db63f24b8c44b7464e4578f1de4004",
+            "comment": "DetailsList: only adding `aria-selected` when `selectionMode` is set to `none`."
+          },
+          {
+            "author": "Rohit Jindal <rohit.jindal@flipkart.com>",
+            "commit": "9459022e4b48041b9e236b5f69a0fdf6f1cee505",
+            "comment": "Dropdown: Fixed custom render option in multi select."
+          },
+          {
+            "author": "Jon Schectman <joschect@microsoft.com>",
+            "commit": "2c32338a744d10802e4384424701a922850b7647",
+            "comment": "Callout: move animation inline to greatly improve perf"
+          },
+          {
+            "author": "natalieethell <yummyraspberries@gmail.com>",
+            "commit": "18ca9bf274d7985b27197c0ea64fb695615f6d98",
+            "comment": "make sure disabled links are non-navigable"
+          },
+          {
+            "author": "Jon Schectman <joschect@microsoft.com>",
+            "commit": "76e5ccc8a699c7bcf632a3dc9516621f42c9e157",
+            "comment": "DocumentCard: Change it to use set theme"
+          },
+          {
+            "author": "Daniel A. White <daniel@whitefamily.in>",
+            "commit": "b06da13ee4fc7b10baf57f21001c316aada8532a",
+            "comment": "ProgressIndicator: adjusting css so that the gleam doesn't go outside the indicator boundary."
+          },
+          {
+            "author": "Joshua Rush <jdrush89@gmail.com>",
+            "commit": "55231a8018313d0d46e2fb718fd4487d1d41eb5f",
+            "comment": "Allowing use of Elements as target prop for Callouts and ContextualMenus"
+          },
+          {
+            "author": "Lambert Wang <lambert.ww@gmail.com>",
+            "commit": "d4f91e9dd14f11e9a98561d0090fa1d0853ecd20",
+            "comment": "CommandBar: Fixed case where commandItemWidths would be null"
+          },
+          {
+            "author": "Lambert Wang <lambert.ww@gmail.com>",
+            "commit": "897b00027fadae6dcceb3ecb1b324e70cb1202f6",
+            "comment": "SpinButton: Updated styling to be consistent with Button and TextField"
+          },
+          {
+            "author": "Charles Simard-Lecours <charles.lecours@gmail.com>",
+            "commit": "252980d10c741136a39f526949d9e5247e654c2d",
+            "comment": "SearchBox: Deprecated `labelText` for `placeholder`."
+          },
+          {
+            "author": "MaxLustig <maxslustig@gmail.com>",
+            "commit": "5c53827513582631bfd1660eecafdf45ca92b745",
+            "comment": "Fix infinite recursion in scrollable pane"
+          },
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "eaeab40bb9326368c3c2a69d2430b69a27062962",
+            "comment": "Added is-selected and is-expanded semantic classes to compositelink style sets"
+          },
+          {
+            "author": "Charles Simard-Lecours <charles.lecours@gmail.com>",
+            "commit": "252980d10c741136a39f526949d9e5247e654c2d",
+            "comment": "Searchbox: Removed non-localized default placeholder string."
+          },
+          {
+            "author": "natalieethell <yummyraspberries@gmail.com>",
+            "commit": "8efbccec0c8826aa19b59d683d0bf29bd628dbf2",
+            "comment": "BasePicker: check for null reference before checking value of `this.suggestionElement`."
+          },
+          {
+            "author": "jijizz <liu_zhi8@hotmail.com>",
+            "commit": "fdab0a0fac6e4740b0943a507ad8e31e80f645fd",
+            "comment": "only mount spinner component when necessary"
+          }
+        ],
+        "minor": [
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "41e80543717c00b1f5ed95b289e4185ee0469c04",
+            "comment": "ChoiceGroup: Flex layout for icon and image fields.  Fixed some image field bugs."
+          },
+          {
+            "author": "Christian Gonzalez <christianjordangonzalez@gmail.com>",
+            "commit": "77c1e54e140be51f9c7f252748bb5f868f957919",
+            "comment": "Upgrade to TypeScript 2.7.2"
+          },
+          {
+            "author": "Joshua Rush <jdrush89@gmail.com>",
+            "commit": "175c8e4fed7be760c7866da14c17e27faa769a6e",
+            "comment": "Allowing Nav Links to specify iconProps"
+          },
+          {
+            "author": "natalieethell <yummyraspberries@gmail.com>",
+            "commit": "b345d5304dbafc8fa394f89e3633218226024a8a",
+            "comment": "added More items aria label"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/icons\" from `>=5.4.2 <6.0.0` to `>=5.5.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.12.2 <6.0.0` to `>=5.13.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.13.0 <6.0.0` to `>=5.14.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/example-app-base\" from `>=5.2.2 <6.0.0` to `>=5.3.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.57.0",
+      "tag": "office-ui-fabric-react_v5.57.0",
+      "date": "Thu, 01 Mar 2018 11:12:54 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "1e766db267dcc15e44b671952ade61151e93d331",
+            "comment": "Added index import for base files in Layer, Nav, Image, ScrollablePane, ResizeGroup, and Rating components so unstyled component can be used."
+          },
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "9b0294ad0bc1c2cfcd0b9d680f5a62e3bef6f27e",
+            "comment": "Converting ResizeGroup SCSS to MergeStyles step 2 - style converstion"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.56.1",
+      "tag": "office-ui-fabric-react_v5.56.1",
+      "date": "Thu, 01 Mar 2018 00:05:10 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Alex Bettadapur <alexbettadapur@gmail.com>",
+            "commit": "0ad60de8393214b064e8c98e458336f7c163bf86",
+            "comment": "Fix an issue on IE11 where Autofill would swallow some keystrokes if typing quickly enough"
+          },
+          {
+            "author": "Jon Schectman <joschect@microsoft.com>",
+            "commit": "badbe01c65d5d37fc81c372567d16a9e796ccbec",
+            "comment": "CoachMarkStyles: Use ... instead of assign for IE compatibility"
+          },
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "c3ffd9fb8ef675a0ef341feaef28797c23b9dcdd",
+            "comment": "FocusZone: isDefaultPrevented is now respected."
+          },
+          {
+            "author": "Lambert Wang <lambert.ww@gmail.com>",
+            "commit": "e9df9df2972e5b1fb90cb1c1499c5ceb65cffa7c",
+            "comment": "GroupedList: Chevron css no longer uses ms-icon"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.56.0",
+      "tag": "office-ui-fabric-react_v5.56.0",
+      "date": "Wed, 28 Feb 2018 11:15:45 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "jspurlin <jspurlin@microsoft.com>",
+            "commit": "216f8e4d021b235926cb81dcbdbf7b6b95e5c5ac",
+            "comment": "ContextualMenu: Update Hover/Focus Behavior around expanding/collapsing Submenus"
+          },
+          {
+            "author": "jspurlin <jspurlin@microsoft.com>",
+            "commit": "9c45eeb414025b84b4cb91555e6d42a2a14110f0",
+            "comment": "SplitButton: ENTER/SPACE should execute the primary button when focus is on the whole splitButton"
+          }
+        ],
+        "minor": [
+          {
+            "author": "Jordan Janzen <jordancjanzen@gmail.com>",
+            "commit": "7bca7c0c026347a291702321fe1dba988e8f9806",
+            "comment": "Convert Dialog to mergeStyles, part 1 - file structure"
+          },
+          {
+            "author": "Jordan Janzen <jordancjanzen@gmail.com>",
+            "commit": "7bca7c0c026347a291702321fe1dba988e8f9806",
+            "comment": "Dialog: Converting to mergeStyles part 1.2 - sub component file structure. "
+          },
+          {
+            "author": "Mike Wheaton <miwhea@microsoft.com>",
+            "commit": "d00d49f4b69e2ec7b3313997a4d45adb1f520b34",
+            "comment": "Prepare Persona for conversion to merge-styles"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.55.3",
+      "tag": "office-ui-fabric-react_v5.55.3",
+      "date": "Tue, 27 Feb 2018 22:56:59 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "c468751e4eb75df1fab7e320a559f8a28953bc70",
+            "comment": "ComboBox: Shortened and centered the input field to account for overlap that appears at some resolutions."
+          },
+          {
+            "author": "natalieethell <yummyraspberries@gmail.com>",
+            "commit": "ac43f523749423c2ee3cd9ad1f4ba868612c7241",
+            "comment": "Toggle color fixes"
+          },
+          {
+            "author": "Serkan Inci <serkan.inci@hotmail.com>",
+            "commit": "f16ed136c3dd6a10421a4a80d2b789bbc4c3aacf",
+            "comment": "Fixing direct references to @uifabric which breaks AMD"
+          },
+          {
+            "author": "Serkan Inci <serkan.inci@hotmail.com>",
+            "commit": "f16ed136c3dd6a10421a4a80d2b789bbc4c3aacf",
+            "comment": "Fixing reference of 'utilities/contextualMenu' to point an actual file."
+          },
+          {
+            "author": "Su Su <s@warmsea.net>",
+            "commit": "25ac4a751a664c59c596a8bb31203c9d707828ec",
+            "comment": "Allow ScrollablePane to accept native properties."
+          },
+          {
+            "author": "Su Su <s@warmsea.net>",
+            "commit": "835585d21bb8caa991e9c09ea38b10edcbd3fa75",
+            "comment": "Make ScrollablePane._sortStickies change elements only when needed."
+          },
+          {
+            "author": "Su Su <s@warmsea.net>",
+            "commit": "70704cae89b7495d67cd5779a194f48db00c757c",
+            "comment": "Fix this.root undefined issue in Sticky component."
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.55.2",
+      "tag": "office-ui-fabric-react_v5.55.2",
+      "date": "Tue, 27 Feb 2018 06:33:39 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Drew Brough <drew-brough@users.noreply.github.com>",
+            "commit": "9b2f25a818c7db0e98b4dd9ece25e8506c619d31",
+            "comment": "DatePicker calls onDateSelected then AfterMenuDismissed to follow the same pattern as BaseButton"
+          },
+          {
+            "author": "Lambert Wang <lambert.ww@gmail.com>",
+            "commit": "78519862e799fc260f428bf56c1fb3c4610b2ec5",
+            "comment": "ColorPicker: internal ref issue was fixed, which lets colors be picked a little better."
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.55.1",
+      "tag": "office-ui-fabric-react_v5.55.1",
+      "date": "Sat, 24 Feb 2018 05:10:13 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Alex Henry <adhe223@g.uky.edu>",
+            "commit": "38a629f83d0730e20ccd5743c571a3cc74ea9fcd",
+            "comment": "Fix SplitButton rendering issue in ContextualMenu"
+          },
+          {
+            "author": "Mike Pateras <35780775+paterasMSFT@users.noreply.github.com>",
+            "commit": "f803791c522390bd2f0ebaedf628f5dc1d679332",
+            "comment": "ComboBox: Added property to set ComboBox's button's data-is-focusable attribute."
+          },
+          {
+            "author": "Jon Schectman <joschect@microsoft.com>",
+            "commit": "bd4d47d624f37dceb935c6da3575e1faff30e344",
+            "comment": "ContextualMenu: Import ContextualMenuUtility/index directly instead of folder. "
+          },
+          {
+            "author": "Lambert Wang <lambert.ww@gmail.com>",
+            "commit": "d2c5b2408050c0d4e6e844fda09ec4549e4a81d1",
+            "comment": "[Focus] Enable focus forceIntoFirstElement parameter"
+          },
+          {
+            "author": "Lambert Wang <lambert.ww@gmail.com>",
+            "commit": "0194f8aeb81cfd6b0a301034bf7a409cc6031568",
+            "comment": "[DetailsList] Fixed test by mocking visiblity"
+          },
+          {
+            "author": "Lambert Wang <lambert.ww@gmail.com>",
+            "commit": "c5029640480d565cc1774046f8003095f68a368b",
+            "comment": "[ContextualMenu] Disabled buttons are focusable"
+          },
+          {
+            "author": "Jordan Janzen <jordancjanzen@gmail.com>",
+            "commit": "b2177a5c35ad305cc305d002c59a7f1a9b96f35e",
+            "comment": "Convert Check to mergeStyles"
+          },
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "c5f5b4b4abf089fb415203a27c9ef9f5e8d62394",
+            "comment": "Button: reverting previous tweak to fix ComboBox dropdown selection styling."
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.55.0",
+      "tag": "office-ui-fabric-react_v5.55.0",
+      "date": "Fri, 23 Feb 2018 03:05:53 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Alex Henry <adhe223@g.uky.edu>",
+            "commit": "43c6f7ca495a8d05cdfb1d54ce6df85eaa3b9ac3",
+            "comment": "add optional custom rendering of items for ContextualMenu"
+          },
+          {
+            "author": "chang47 <coralbue@gmail.com>",
+            "commit": "1de56b1d511e6a3d0d27e5bbe933e43c742a0840",
+            "comment": "Focus Zone: Add support for tab to skip selection elements"
+          },
+          {
+            "author": "Mark Polak <mark@thedutchies.com>",
+            "commit": "6d0c968d9bda5581da65e6c63138c243355dddfe",
+            "comment": "SelectionZone: deprecating `layout` as it is no longer in use. Removing `SelectionLayout` as it is not required."
+          }
+        ],
+        "patch": [
+          {
+            "author": "David Wilson (VSNC) <dawilson@microsoft.com>",
+            "commit": "99fc1d42078e4c3a2c6be3e4c32dcf2c19074c87",
+            "comment": "Nav: fix multiple invocations of onClick"
+          },
+          {
+            "author": "Philip Kuo <phkuo@microsoft.com>",
+            "commit": "ebe601051c081838ae9d029e1020f316258d148a",
+            "comment": "minor fixes to theming"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/styling\" from `>=5.18.1 <6.0.0` to `>=5.19.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.54.0",
+      "tag": "office-ui-fabric-react_v5.54.0",
+      "date": "Thu, 22 Feb 2018 11:15:23 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "davsm <36288536+davsm@users.noreply.github.com>",
+            "commit": "a40160db28a702c2bacb1cb7c147b150c59b7a9c",
+            "comment": "Fix Scrollable-Pane getComputedStyle error - changing timeouts to use this._async.setTimeout to ensure this.refs isn't used after componentWillUnmount"
+          },
+          {
+            "author": "jspurlin <jspurlin@microsoft.com>",
+            "commit": "b0550145231d18adea954f56be47967ab04cb19d",
+            "comment": "FocusZone: Add the ability turn off directional wrapping on sections of a FocusZone"
+          },
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "3cf846061686c05dbc2329aa16596c9be206ded1",
+            "comment": "Convert Layer component to mergeStyles"
+          },
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "4b74ee848acc55a619b99a2b1b08be90f5127149",
+            "comment": "Converting SCSS to MergeStyles step 2 - style conversion"
+          },
+          {
+            "author": "staylo8 <33881401+staylo8@users.noreply.github.com>",
+            "commit": "af4a2976ca729f9a7107ed7b05e7f0f5292f674f",
+            "comment": "Add imageErrorAs to IIconProps"
+          }
+        ],
+        "patch": [
+          {
+            "author": "Mark Polak <mark@thedutchies.com>",
+            "commit": "7ff46ee4fe64b303d6a4845b404ee16f909ac847",
+            "comment": "Enable variable-name and jsx-boolean-value tslint rules"
+          },
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "08066258199e0de38a145777aeee1e0a31fd057b",
+            "comment": "Calendar: changing refs to componentRef."
+          },
+          {
+            "author": "kellygorr <kegorr@microsoft.com>",
+            "commit": "fa5626d6b1cfe17646f78927746b34c3efeb06a9",
+            "comment": "DatePicker-onAfterMenuDismiss callback created"
+          },
+          {
+            "author": "kellygorr <kegorr@microsoft.com>",
+            "commit": "b806c8d972e306f71c26874c5262a33ddc862d4a",
+            "comment": "DatePicker - Adding public focus method"
+          },
+          {
+            "author": "Lambert Wang <lambert.ww@gmail.com>",
+            "commit": "6b2f5885f2d76e8539d6108db8cd3ed6dc5deabc",
+            "comment": "[TextField] Set input size to 1"
+          },
+          {
+            "author": "Lambert Wang <lambert.ww@gmail.com>",
+            "commit": "67730082e1053486ae59876f24c7ee639b4ca251",
+            "comment": "[TooltipHost] Inline display for when overflow mode is on\""
+          },
+          {
+            "author": "chang47 <coralbue@gmail.com>",
+            "commit": "8f5fe3b6b8feb89df75ee76d886fdcccddceb875",
+            "comment": "Updated contextual menu to pass the correct number"
+          },
+          {
+            "author": "chang47 <coralbue@gmail.com>",
+            "commit": "6fbbe8922e7b97983e36346f1577f040e8e13acb",
+            "comment": "Contextual Menu - Added aria-posinset and aria-setsize to split buttons"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.12.1 <6.0.0` to `>=5.13.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.53.0",
+      "tag": "office-ui-fabric-react_v5.53.0",
+      "date": "Wed, 21 Feb 2018 11:12:11 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "chang47 <coralbue@gmail.com>",
+            "commit": "0a9153f40d3fc7e7757c352862d78de917e22656",
+            "comment": "added support for aria-posinset and aria-setsize"
+          },
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "eaf26188ea91738b3daacc16bb7b426aa60a1e8d",
+            "comment": "Converting Image SCSS to MergeStyles step 1 - file structure"
+          },
+          {
+            "author": "jspurlin <jspurlin@microsoft.com>",
+            "commit": "2e447758c56e5a06fbe22726397e7fea4fc9f65f",
+            "comment": "SwatchColorPicker: Improve keyboard/mouse behavior"
+          },
+          {
+            "author": "Jordan Janzen <jordancjanzen@gmail.com>",
+            "commit": "0037f82fbf63447b60ca73970fc116ad004f7c0e",
+            "comment": "Convert Dialog to mergeStyles, part 1 - file structure"
+          },
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "d6ed496697cb3ee61d7c52c0a04b271fd576f425",
+            "comment": "Converting Nav SCSS to MergeStyles step 1 - file structure"
+          },
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "c168360f1ae7e1a97df1d278552b1b3498c13c28",
+            "comment": "Converting ResizeGroup SCSS to MergeStyles step 1 - file structure"
+          },
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "f899dabeaf57d1f9c6018eb89b46b87835f8ade6",
+            "comment": "Converting SCSS to MergeStyles step 2 - style conversion"
+          },
+          {
+            "author": "jijizz <liu_zhi8@hotmail.com>",
+            "commit": "0661239920ded0ecfce53788322b4bc5b21860e1",
+            "comment": "make onShouldVirtualize work for grouped list"
+          }
+        ],
+        "patch": [
+          {
+            "author": "Mark Polak <mark@thedutchies.com>",
+            "commit": "6d58ab7f983c1cf8b2a93b444edf5d9c6b1b3f52",
+            "comment": "Enable jsx-key tslint rule"
+          },
+          {
+            "author": "Cody Hoover <hoovercj@users.noreply.github.com>",
+            "commit": "6a35693c2cfb692a8adb381ecb228a2e23f801e4",
+            "comment": "Only apply 'pointer-events: none' to disabled Link components if there is an href "
+          },
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "4bf99461473d1fb282196c67f82410765a712f10",
+            "comment": "Dialog: default modal props now respective (Modal rendered with light background.)"
+          },
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "51d47a80898d9834d40205274268e60730f306a1",
+            "comment": "Buttons: moving className lower in the merge list so that it has more precedence than default rules."
+          },
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "a5f021f9a60e65b6b2824a588f31cd080fd74ecb",
+            "comment": "Rating: Adding `type=button` to Rating buttons."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.12.1 <6.0.0` to `>=5.12.2 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.12.0 <6.0.0` to `>=5.12.1 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/example-app-base\" from `>=5.2.1 <6.0.0` to `>=5.2.2 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.52.0",
+      "tag": "office-ui-fabric-react_v5.52.0",
+      "date": "Sat, 17 Feb 2018 21:29:00 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Alex Bettadapur <alexbettadapur@gmail.com>",
+            "commit": "8b235107117de864c76803eeedbefb9de9e9c17e",
+            "comment": "Add notifyPageChange function to List"
+          },
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "c4aceacd30e2eddfb9ed23b2c2e2a335d268237a",
+            "comment": "Cleaning up a console.log in CommandBar.test.tsx that I noticed while updating snapshots"
+          },
+          {
+            "author": "Joe Martella <martellaj@live.com>",
+            "commit": "6a7d210880de2cf99cfa5ac154ea887140635d01",
+            "comment": "Fixes useTargetWidth prop for ContextualMenu"
+          },
+          {
+            "author": "Jordan Janzen <jordancjanzen@gmail.com>",
+            "commit": "1f1db9da4f7368806e1a819e75d7685ec7b73f04",
+            "comment": "Convert overlay and examples to mergeStyles"
+          },
+          {
+            "author": "Mike Pateras <35780775+paterasMSFT@users.noreply.github.com>",
+            "commit": "108ba47a0f555af5a833d3dbd880ddfb1bf6f5e4",
+            "comment": "DetailsList: Groups are now considered for aria-rowcount."
+          }
+        ],
+        "minor": [
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "f009d10b1c548e15b905a0148a3b79bb5c8d34b6",
+            "comment": "Converting SCSS to MergeStyles step 1 - file structure"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/styling\" from `>=5.18.0 <6.0.0` to `>=5.18.1 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.51.0",
+      "tag": "office-ui-fabric-react_v5.51.0",
+      "date": "Fri, 16 Feb 2018 11:23:29 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Eigo Kawatani <e.k.dev@outlook.com>",
+            "commit": "2bdbb7e44c9300861ea466b707829843781a35db",
+            "comment": "Added enum for triggering menu with arrow keys and bool to allow it or not"
+          },
+          {
+            "author": "John Miller <rubixws@gmail.com>",
+            "commit": "44b167af31b9b6dd079359209f101f1af10762a5",
+            "comment": "Migrating Coachmark to main office-ui-fabrc-react package and adding a beak compoentn as well as updating  the experimental component PositioningContainer to reflect some of the latest bits in  Callout"
+          },
+          {
+            "author": "Cody Hoover <hoovercj@users.noreply.github.com>",
+            "commit": "7b7abfa12cec76632570dad7c2524901e4580ab1",
+            "comment": "FocusZone.Focus now respects forceIntoFirstChild parameter and  IFocusZone.ts has been updated to reflect this"
+          },
+          {
+            "author": "Mike Wheaton <miwhea@microsoft.com>",
+            "commit": "6aecee329e1652eb2e4dff3a313a242632b37e2f",
+            "comment": "Link: Update to use merge-styles"
+          }
+        ],
+        "patch": [
+          {
+            "author": "Manish Garg <manishga@microsoft.com>",
+            "commit": "e1643ddc1862e030bd1f1908c148e778867a23f8",
+            "comment": "Fix bug: '#3942 Fixed controlled TextField with multiline and autoAdjustHeight does not adjust when setting value via state'"
+          },
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "fbbbbeb54e4f0e42ad15ccff1a031fa65f5433c5",
+            "comment": "SearchBox: adding unit test and tweaking how the value is read from ev rather than the element itself."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.12.0 <6.0.0` to `>=5.12.1 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.11.0 <6.0.0` to `>=5.12.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.50.0",
+      "tag": "office-ui-fabric-react_v5.50.0",
+      "date": "Wed, 14 Feb 2018 22:10:50 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "amyngu <31973030+amyngu@users.noreply.github.com>",
+            "commit": "cdd6bafa27a6514e51ffe816ebb89b8a71b63a94",
+            "comment": "Add \"use current input command\" and remove need to explicity call focus when moving between suggestions and commands"
+          },
+          {
+            "author": "Cody Hoover <hoovercj@users.noreply.github.com>",
+            "commit": "45f36ccd4e4954d54d3008a09aef5f0adb24fb16",
+            "comment": "Add clearButtonProps prop to SearchBox.types.ts with the IButtonPropsType. This is passed to the icon button in SearchBox.base.tsx"
+          },
+          {
+            "author": "Micah Godbolt <micahgodbolt@gmail.com>",
+            "commit": "27e230cd7f368d471e0dfceb5e4b11a9ab10354b",
+            "comment": "SearchBox: Fixed getStyles interface to be using ISearchBoxStyleProps instead of ISearchBoxProps"
+          }
+        ],
+        "patch": [
+          {
+            "author": "Ivan Samoylov <IA.Samoylov@outlook.com>",
+            "commit": "ad1dcfca80bf8f14209f4911a24874b5582ac60e",
+            "comment": "Fix bug: '#3940 Validate function works incorrect with attribute validateOnFocusOut'"
+          },
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "746b36e94dfbe2fa97bb5432a6d2e723e5a28551",
+            "comment": "Converted ButtonBasicExample to use mergeStyles instead of SCSS."
+          },
+          {
+            "author": "Kurt Carpenter <github@kurtcarpenter.io>",
+            "commit": "8fa181dab613c604f49ca518eceff53b7206deda",
+            "comment": "Fix ComboBox, ContextualMenu, Teachingbubble overwriting calloutProps.className"
+          },
+          {
+            "author": "Mark Polak <mark@thedutchies.com>",
+            "commit": "0d7e546429c8c6d26404e9514e2abbf746df92ad",
+            "comment": "Fire onKeyDown for Button with menuProps"
+          },
+          {
+            "author": "Micah Godbolt <micahgodbolt@gmail.com>",
+            "commit": "cd1d7afb76421fbc3c744bc61c81ddffceafd0af",
+            "comment": "Fabric: Adds button overflow visible global style so that ie11 renders like edge/chrome/firefox"
+          },
+          {
+            "author": "kellygorr <kegorr@microsoft.com>",
+            "commit": "9e3fa5810fe09e5e7b0b8e6101aab95fc0c04980",
+            "comment": "DatePicker: Fixing pointer when datepicker doesn't have a label"
+          },
+          {
+            "author": "kysedate <35615581+kysedate@users.noreply.github.com>",
+            "commit": "7d67c1dc215c25dd3b734e53dc8e9499dded3c17",
+            "comment": "ComboBox: Add getClassNAmes prop to allow complete customization of the component"
+          },
+          {
+            "author": "Montse Lozano Dieck <malozano@microsoft.com>",
+            "commit": "6dcf97580ec7690ffd73af23f2162a00b3ccf091",
+            "comment": "CalloutContent: Remove calloutWidth from calloutMain "
+          },
+          {
+            "author": "kysedate <35615581+kysedate@users.noreply.github.com>",
+            "commit": "0fdbf1d7223ac21dc2775d68f22888aa7759b65a",
+            "comment": "SpinButton: Add getClassNAmes prop to allow complete customization of the component"
+          },
+          {
+            "author": "Trevor Gau <trevorsg@gmail.com>",
+            "commit": "f57acaa79994e796b1219ed4cbe61904c4948e5b",
+            "comment": "Fix aria-owns in contextual menu items, and add appropriate aria properties to CommandBar items."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.11.2 <6.0.0` to `>=5.12.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/styling\" from `>=5.17.0 <6.0.0` to `>=5.18.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.10.3 <6.0.0` to `>=5.11.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.49.3",
+      "tag": "office-ui-fabric-react_v5.49.3",
+      "date": "Tue, 13 Feb 2018 11:24:05 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "chang47 <coralbue@gmail.com>",
+            "commit": "8dc2a79a815874d6bb26d867a49b9f46809397e1",
+            "comment": "Contextual Menu - adding support for aria-setsize and aria-posinset for rendering menu items that relies on the menu item's own rendering"
+          },
+          {
+            "author": "Joe Martella <martellaj@live.com>",
+            "commit": "23070cad70c1e18548cf6a07dfa4f27d365db770",
+            "comment": "Moves DatePicker label outside of hit target"
+          },
+          {
+            "author": "Jordan Janzen <jordancjanzen@gmail.com>",
+            "commit": "32c4e2529eef487e2c2b69adab8ff85d2fa0d23d",
+            "comment": "Add name attribute to button"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.10.2 <6.0.0` to `>=5.10.3 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.49.2",
+      "tag": "office-ui-fabric-react_v5.49.2",
+      "date": "Mon, 12 Feb 2018 17:33:11 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "VincentBailly <vincentbaill@gmail.com>",
+            "commit": "2514f1588d70c2722baddd0778d4555f18b07dbd",
+            "comment": "presence indicator does not influence layout of Persona"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.49.1",
+      "tag": "office-ui-fabric-react_v5.49.1",
+      "date": "Mon, 12 Feb 2018 11:14:02 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Daryl <DarylCantrell@users.noreply.github.com>",
+            "commit": "669762f89c5c145c215610d043cbf28dbbdcd491",
+            "comment": "Fix issue where CommandBar chevron doesn't change color with rest of control when disabled"
+          },
+          {
+            "author": "Lambert Wang <lambert.ww@gmail.com>",
+            "commit": "f8550b758c75d4e2a3b47d13873d75c1760efc83",
+            "comment": "DetailsList: fix disappearing line when hovering on column header"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.49.0",
+      "tag": "office-ui-fabric-react_v5.49.0",
+      "date": "Fri, 09 Feb 2018 18:11:52 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "c761919891df8df48a02c4cbee2bc18ac8635d55",
+            "comment": "ChoiceGroup: More flexible image field sizing, default image size, large image class."
+          }
+        ],
+        "patch": [
+          {
+            "author": "Kushal Yarlagadda <whykushal93@gmail.com>",
+            "commit": "d716d81c844e366e37d1fdf023c527541a7b6b57",
+            "comment": "Allowing for contextual and menus to be closed on Alt keys"
+          },
+          {
+            "author": "Mike Wheaton <miwhea@microsoft.com>",
+            "commit": "1e22ceeef52c46b7f7bfda9b2d1015664105f6ff",
+            "comment": "Rating: Renamed RatingBase.tsx to Rating.base.tsx to match convention"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.48.2",
+      "tag": "office-ui-fabric-react_v5.48.2",
+      "date": "Thu, 08 Feb 2018 11:13:51 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Kristian Halle <khalle@microsoft.com>",
+            "commit": "77a0be82fb6c440fa7ec6f4e80efed7d67f007c1",
+            "comment": "Return empty initials for phone numbers"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.10.1 <6.0.0` to `>=5.10.2 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.48.1",
+      "tag": "office-ui-fabric-react_v5.48.1",
+      "date": "Thu, 08 Feb 2018 02:29:26 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Jon Schectman <joschect@microsoft.com>",
+            "commit": "7533d0e07dbfda819c8761bce764b4bc4fabfcae",
+            "comment": "Callout/Positioning: Fixed a bug where callout would lose alignment for some hints in rtl"
+          },
+          {
+            "author": "Montse Lozano Dieck <malozano@microsoft.com>",
+            "commit": "62cc53d57ea4bd4d01f452a3767f400d00d4cddf",
+            "comment": "Callout: Move positioning to inline styling"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.48.0",
+      "tag": "office-ui-fabric-react_v5.48.0",
+      "date": "Wed, 07 Feb 2018 11:23:59 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Christian Gonzalez <christianjordangonzalez@gmail.com>",
+            "commit": "33f7c4d1d055f123cbf7237adc44e231b7efca1f",
+            "comment": "Remove duplicate export of command button from the button index"
+          },
+          {
+            "author": "Hlynur Tryggvason <hlynur.tryggvason@officeatwork.com>",
+            "commit": "a47b964dde95fa4b4fd3e436025fada9f1affa12",
+            "comment": "[Spinner] Use rotateZ to stop the spinner from wiggling in IE"
+          },
+          {
+            "author": "Serkan Inci <serkan.inci@hotmail.com>",
+            "commit": "48700c65292e57126b95be80c3092a39c6e171d0",
+            "comment": "Fixing direct reference to @uifabric/utilities/lib from ResizeGroup"
+          },
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "d121208b61c93811909fb69d2ba8d104c3531769",
+            "comment": "SearchBox: minor correction in hover styles."
+          }
+        ],
+        "minor": [
+          {
+            "author": "Micah Godbolt <micahgodbolt@gmail.com>",
+            "commit": "e39a80a4bef31a9dd758933a35b2890a468726a8",
+            "comment": "SearchBox: Export base component as well as styled"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.11.1 <6.0.0` to `>=5.11.2 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.10.0 <6.0.0` to `>=5.10.1 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.47.0",
+      "tag": "office-ui-fabric-react_v5.47.0",
+      "date": "Tue, 06 Feb 2018 11:14:36 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Jon Schectman <joschect@microsoft.com>",
+            "commit": "92c237d5804d8864ed44310ecb5ed93e835554e7",
+            "comment": "BaseAutofill: Move to it's own component"
+          }
+        ],
+        "patch": [
+          {
+            "author": "amyngu <31973030+amyngu@users.noreply.github.com>",
+            "commit": "36c24d4e085515a0d74f2eb1b1cafd847af67667",
+            "comment": "fix deselect all in suggestionsController"
+          },
+          {
+            "author": "akashperfect <akashperfect@gmail.com>",
+            "commit": "d98ba978273b040546a36cc8144b8aa961235235",
+            "comment": "DetailsList: Adding optional callback aria-describedby for each item in DetailsList"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.11.0 <6.0.0` to `>=5.11.1 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.46.0",
+      "tag": "office-ui-fabric-react_v5.46.0",
+      "date": "Mon, 05 Feb 2018 11:24:23 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "5c71bd92894505214a9a6df8c4fb9d8e43472d98",
+            "comment": "ComboBox, Dropdown, TextField: Improved high contrast in focus state. Layout changes for ComboBox to allow for border-box sizing."
+          }
+        ],
+        "minor": [
+          {
+            "author": "Lambert Wang <lambert.ww@gmail.com>",
+            "commit": "fe1c0f061947e66f1a3c63b168cdfecdc282b39b",
+            "comment": "[SpinButton] Implemented precision"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.9.0 <6.0.0` to `>=5.10.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.45.3",
+      "tag": "office-ui-fabric-react_v5.45.3",
+      "date": "Fri, 02 Feb 2018 11:24:16 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "78c61efde3fb8ba11d5124adca4934f823094747",
+            "comment": "Converted ActivityItemExample to use mergeStyles instead of SCSS"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.45.2",
+      "tag": "office-ui-fabric-react_v5.45.2",
+      "date": "Thu, 01 Feb 2018 11:23:17 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Jordan Janzen <jordancjanzen@gmail.com>",
+            "commit": "b17a45fe057f50aa489be21d3e517d783b40b9e1",
+            "comment": "Adds the _isControlled flag to the TextField component that disabled onChange if the value prop is set, which follows developer expectations with React inputs."
+          },
+          {
+            "author": "Philip Kuo <phkuo@microsoft.com>",
+            "commit": "f37ea42b401f55ec9a7e223c90ec653b5aa6d827",
+            "comment": "Theme Generator: fix autogenerated neutral colors"
+          },
+          {
+            "author": "Thomas Michon <thomas@michon.com>",
+            "commit": "c304b01fa7c0a98e54dc1c9af67c6a0d695838e8",
+            "comment": "Fix bug in modal selection handling"
+          },
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "ddc544059e61523a8294b16275ae2e8706241e4f",
+            "comment": "added return default when reaching the html tag in while loop inside _getBackground() inside Sticky component."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/icons\" from `>=5.4.1 <6.0.0` to `>=5.4.2 <6.0.0`"
+          }
+        ]
+      }
+    },
     {
       "version": "5.45.1",
       "tag": "office-ui-fabric-react_v5.45.1",
diff --git a/packages/office-ui-fabric-react/CHANGELOG.md b/packages/office-ui-fabric-react/CHANGELOG.md
index 775681a12afdb..5712a78cd422e 100644
--- a/packages/office-ui-fabric-react/CHANGELOG.md
+++ b/packages/office-ui-fabric-react/CHANGELOG.md
@@ -1,6 +1,440 @@
 # Change Log - office-ui-fabric-react
 
-This log was last generated on Wed, 31 Jan 2018 11:11:59 GMT and should not be manually modified.
+This log was last generated on Thu, 15 Mar 2018 10:37:10 GMT and should not be manually modified.
+
+## 5.64.3
+Thu, 15 Mar 2018 10:37:10 GMT
+
+### Patches
+
+- TextField: Enabled scrolling and resize when disabled
+
+## 5.64.2
+Thu, 15 Mar 2018 02:42:27 GMT
+
+### Patches
+
+- Targeted the aria-labelledby on ChoiceGroup's input field to the span tag inside the span tag inside label ( option.labelId ) instead of thelabel itself ( option.id ). 
+
+## 5.64.1
+Wed, 14 Mar 2018 10:28:26 GMT
+
+### Patches
+
+- Theme generator: exposing to the website.
+
+## 5.64.0
+Tue, 13 Mar 2018 10:17:37 GMT
+
+### Minor changes
+
+- Added an is-open class to the DatePicker root element to indicate when the datepicker is being shown based on the IDatePickerState.isDatePickerShown state property.
+- Added documentation for components that allow native props
+
+### Patches
+
+- Pickers: Fix aria bug where activedescendant would be sug--1
+
+## 5.63.0
+Mon, 12 Mar 2018 06:29:20 GMT
+
+### Minor changes
+
+- Add rel option for Contextual Menu Items
+- ComoboBox and SpinButton: Removing excess margins and padding to make them consistent with TextField.
+- Facepile: Added `overflowPersonas` option to better control what personas go into the overflow personas vs show up as a persona coin. Also adjusted Facepile back to showing a Persona control if there is only one persona to be shown with no overflow.
+- importing hoistStatics from Utilities for withResponsiveMode decorator
+- Add ability to get and set scroll position on ScrollablePane
+- DetailsList: IColumn `onColumnClick` callback args marked non-optional.
+
+### Patches
+
+- Updating a test to ensure that focus is trapped in a FocusTrapZone when it has a FocusZone as the last element
+- [TextField] onChange fix for IE when using multiline with placeholder
+- Run onCellFocused before unmount and before select color
+
+## 5.62.1
+Fri, 09 Mar 2018 15:07:28 GMT
+
+### Patches
+
+- Add unit test to catch focus regression being fixed by this PR
+
+## 5.62.0
+Fri, 09 Mar 2018 11:13:58 GMT
+
+### Minor changes
+
+- Allow DetailsRow to have a custom renderer
+- Dialog: convert to mergeStyles part 2.
+
+### Patches
+
+- Fixes #3985 by removing HC style override on ms-Link buttons.
+
+## 5.61.0
+Thu, 08 Mar 2018 11:27:24 GMT
+
+### Minor changes
+
+- Added the @customizable decorator to Image and Layer to enable theme functionality
+- MessageBar: Aria label for truncated text overflow button and added aria labels for buttons in examples.
+
+### Patches
+
+- ComboBox adding onPendingValueChanged callback prop to run when pending value is changed
+- Seperated the SCSS for Persona and Persona Coin components due to bloat when imported twice.
+
+## 5.60.1
+Wed, 07 Mar 2018 11:16:50 GMT
+
+### Patches
+
+- Fix ContextualMenu customization sample
+- TeachingBubble: New animation for bounce with fade in.
+
+## 5.60.0
+Tue, 06 Mar 2018 11:13:36 GMT
+
+### Minor changes
+
+- Add async debounce option to BasePicker
+
+### Patches
+
+- Facepile: Conditionally apply `aria-describedby` only when `ariaDescription` is provided
+
+## 5.59.1
+Tue, 06 Mar 2018 02:06:59 GMT
+
+### Patches
+
+- Temporarily commented out @customizable decorator in Image component to restore usage of static functions and variables.
+
+## 5.59.0
+Mon, 05 Mar 2018 11:16:58 GMT
+
+### Minor changes
+
+- Converting Image SCSS to MergeStyles step 2 - style conversion
+
+### Patches
+
+- Fix issue 3608: DetailsList horizontal scroll due to cellSizer
+- Nav: Wire nav link to expand/collapse behavior if it has no URL but has children.
+- Fixed aria-describedby bug causing it not to render properly
+- Removes unused variables
+- GroupedListSection: Changed the list ref name from `list` to `_list`
+
+## 5.58.0
+Fri, 02 Mar 2018 11:25:35 GMT
+
+### Minor changes
+
+- ChoiceGroup: Flex layout for icon and image fields.  Fixed some image field bugs.
+- Upgrade to TypeScript 2.7.2
+- Allowing Nav Links to specify iconProps
+- added More items aria label
+
+### Patches
+
+- DetailsList: only adding `aria-selected` when `selectionMode` is set to `none`.
+- Dropdown: Fixed custom render option in multi select.
+- Callout: move animation inline to greatly improve perf
+- make sure disabled links are non-navigable
+- DocumentCard: Change it to use set theme
+- ProgressIndicator: adjusting css so that the gleam doesn't go outside the indicator boundary.
+- Allowing use of Elements as target prop for Callouts and ContextualMenus
+- CommandBar: Fixed case where commandItemWidths would be null
+- SpinButton: Updated styling to be consistent with Button and TextField
+- SearchBox: Deprecated `labelText` for `placeholder`.
+- Fix infinite recursion in scrollable pane
+- Added is-selected and is-expanded semantic classes to compositelink style sets
+- Searchbox: Removed non-localized default placeholder string.
+- BasePicker: check for null reference before checking value of `this.suggestionElement`.
+- only mount spinner component when necessary
+
+## 5.57.0
+Thu, 01 Mar 2018 11:12:54 GMT
+
+### Minor changes
+
+- Added index import for base files in Layer, Nav, Image, ScrollablePane, ResizeGroup, and Rating components so unstyled component can be used.
+- Converting ResizeGroup SCSS to MergeStyles step 2 - style converstion
+
+## 5.56.1
+Thu, 01 Mar 2018 00:05:10 GMT
+
+### Patches
+
+- Fix an issue on IE11 where Autofill would swallow some keystrokes if typing quickly enough
+- CoachMarkStyles: Use ... instead of assign for IE compatibility
+- FocusZone: isDefaultPrevented is now respected.
+- GroupedList: Chevron css no longer uses ms-icon
+
+## 5.56.0
+Wed, 28 Feb 2018 11:15:45 GMT
+
+### Minor changes
+
+- Convert Dialog to mergeStyles, part 1 - file structure
+- Dialog: Converting to mergeStyles part 1.2 - sub component file structure. 
+- Prepare Persona for conversion to merge-styles
+
+### Patches
+
+- ContextualMenu: Update Hover/Focus Behavior around expanding/collapsing Submenus
+- SplitButton: ENTER/SPACE should execute the primary button when focus is on the whole splitButton
+
+## 5.55.3
+Tue, 27 Feb 2018 22:56:59 GMT
+
+### Patches
+
+- ComboBox: Shortened and centered the input field to account for overlap that appears at some resolutions.
+- Toggle color fixes
+- Fixing direct references to @uifabric which breaks AMD
+- Fixing reference of 'utilities/contextualMenu' to point an actual file.
+- Allow ScrollablePane to accept native properties.
+- Make ScrollablePane._sortStickies change elements only when needed.
+- Fix this.root undefined issue in Sticky component.
+
+## 5.55.2
+Tue, 27 Feb 2018 06:33:39 GMT
+
+### Patches
+
+- DatePicker calls onDateSelected then AfterMenuDismissed to follow the same pattern as BaseButton
+- ColorPicker: internal ref issue was fixed, which lets colors be picked a little better.
+
+## 5.55.1
+Sat, 24 Feb 2018 05:10:13 GMT
+
+### Patches
+
+- Fix SplitButton rendering issue in ContextualMenu
+- ComboBox: Added property to set ComboBox's button's data-is-focusable attribute.
+- ContextualMenu: Import ContextualMenuUtility/index directly instead of folder. 
+- [Focus] Enable focus forceIntoFirstElement parameter
+- [DetailsList] Fixed test by mocking visiblity
+- [ContextualMenu] Disabled buttons are focusable
+- Convert Check to mergeStyles
+- Button: reverting previous tweak to fix ComboBox dropdown selection styling.
+
+## 5.55.0
+Fri, 23 Feb 2018 03:05:53 GMT
+
+### Minor changes
+
+- add optional custom rendering of items for ContextualMenu
+- Focus Zone: Add support for tab to skip selection elements
+- SelectionZone: deprecating `layout` as it is no longer in use. Removing `SelectionLayout` as it is not required.
+
+### Patches
+
+- Nav: fix multiple invocations of onClick
+- minor fixes to theming
+
+## 5.54.0
+Thu, 22 Feb 2018 11:15:23 GMT
+
+### Minor changes
+
+- Fix Scrollable-Pane getComputedStyle error - changing timeouts to use this._async.setTimeout to ensure this.refs isn't used after componentWillUnmount
+- FocusZone: Add the ability turn off directional wrapping on sections of a FocusZone
+- Convert Layer component to mergeStyles
+- Converting SCSS to MergeStyles step 2 - style conversion
+- Add imageErrorAs to IIconProps
+
+### Patches
+
+- Enable variable-name and jsx-boolean-value tslint rules
+- Calendar: changing refs to componentRef.
+- DatePicker-onAfterMenuDismiss callback created
+- DatePicker - Adding public focus method
+- [TextField] Set input size to 1
+- [TooltipHost] Inline display for when overflow mode is on"
+- Updated contextual menu to pass the correct number
+- Contextual Menu - Added aria-posinset and aria-setsize to split buttons
+
+## 5.53.0
+Wed, 21 Feb 2018 11:12:11 GMT
+
+### Minor changes
+
+- added support for aria-posinset and aria-setsize
+- Converting Image SCSS to MergeStyles step 1 - file structure
+- SwatchColorPicker: Improve keyboard/mouse behavior
+- Convert Dialog to mergeStyles, part 1 - file structure
+- Converting Nav SCSS to MergeStyles step 1 - file structure
+- Converting ResizeGroup SCSS to MergeStyles step 1 - file structure
+- Converting SCSS to MergeStyles step 2 - style conversion
+- make onShouldVirtualize work for grouped list
+
+### Patches
+
+- Enable jsx-key tslint rule
+- Only apply 'pointer-events: none' to disabled Link components if there is an href 
+- Dialog: default modal props now respective (Modal rendered with light background.)
+- Buttons: moving className lower in the merge list so that it has more precedence than default rules.
+- Rating: Adding `type=button` to Rating buttons.
+
+## 5.52.0
+Sat, 17 Feb 2018 21:29:00 GMT
+
+### Minor changes
+
+- Converting SCSS to MergeStyles step 1 - file structure
+
+### Patches
+
+- Add notifyPageChange function to List
+- Cleaning up a console.log in CommandBar.test.tsx that I noticed while updating snapshots
+- Fixes useTargetWidth prop for ContextualMenu
+- Convert overlay and examples to mergeStyles
+- DetailsList: Groups are now considered for aria-rowcount.
+
+## 5.51.0
+Fri, 16 Feb 2018 11:23:29 GMT
+
+### Minor changes
+
+- Added enum for triggering menu with arrow keys and bool to allow it or not
+- Migrating Coachmark to main office-ui-fabrc-react package and adding a beak compoentn as well as updating  the experimental component PositioningContainer to reflect some of the latest bits in  Callout
+- FocusZone.Focus now respects forceIntoFirstChild parameter and  IFocusZone.ts has been updated to reflect this
+- Link: Update to use merge-styles
+
+### Patches
+
+- Fix bug: '#3942 Fixed controlled TextField with multiline and autoAdjustHeight does not adjust when setting value via state'
+- SearchBox: adding unit test and tweaking how the value is read from ev rather than the element itself.
+
+## 5.50.0
+Wed, 14 Feb 2018 22:10:50 GMT
+
+### Minor changes
+
+- Add "use current input command" and remove need to explicity call focus when moving between suggestions and commands
+- Add clearButtonProps prop to SearchBox.types.ts with the IButtonPropsType. This is passed to the icon button in SearchBox.base.tsx
+- SearchBox: Fixed getStyles interface to be using ISearchBoxStyleProps instead of ISearchBoxProps
+
+### Patches
+
+- Fix bug: '#3940 Validate function works incorrect with attribute validateOnFocusOut'
+- Converted ButtonBasicExample to use mergeStyles instead of SCSS.
+- Fix ComboBox, ContextualMenu, Teachingbubble overwriting calloutProps.className
+- Fire onKeyDown for Button with menuProps
+- Fabric: Adds button overflow visible global style so that ie11 renders like edge/chrome/firefox
+- DatePicker: Fixing pointer when datepicker doesn't have a label
+- ComboBox: Add getClassNAmes prop to allow complete customization of the component
+- CalloutContent: Remove calloutWidth from calloutMain 
+- SpinButton: Add getClassNAmes prop to allow complete customization of the component
+- Fix aria-owns in contextual menu items, and add appropriate aria properties to CommandBar items.
+
+## 5.49.3
+Tue, 13 Feb 2018 11:24:05 GMT
+
+### Patches
+
+- Contextual Menu - adding support for aria-setsize and aria-posinset for rendering menu items that relies on the menu item's own rendering
+- Moves DatePicker label outside of hit target
+- Add name attribute to button
+
+## 5.49.2
+Mon, 12 Feb 2018 17:33:11 GMT
+
+### Patches
+
+- presence indicator does not influence layout of Persona
+
+## 5.49.1
+Mon, 12 Feb 2018 11:14:02 GMT
+
+### Patches
+
+- Fix issue where CommandBar chevron doesn't change color with rest of control when disabled
+- DetailsList: fix disappearing line when hovering on column header
+
+## 5.49.0
+Fri, 09 Feb 2018 18:11:52 GMT
+
+### Minor changes
+
+- ChoiceGroup: More flexible image field sizing, default image size, large image class.
+
+### Patches
+
+- Allowing for contextual and menus to be closed on Alt keys
+- Rating: Renamed RatingBase.tsx to Rating.base.tsx to match convention
+
+## 5.48.2
+Thu, 08 Feb 2018 11:13:51 GMT
+
+### Patches
+
+- Return empty initials for phone numbers
+
+## 5.48.1
+Thu, 08 Feb 2018 02:29:26 GMT
+
+### Patches
+
+- Callout/Positioning: Fixed a bug where callout would lose alignment for some hints in rtl
+- Callout: Move positioning to inline styling
+
+## 5.48.0
+Wed, 07 Feb 2018 11:23:59 GMT
+
+### Minor changes
+
+- SearchBox: Export base component as well as styled
+
+### Patches
+
+- Remove duplicate export of command button from the button index
+- [Spinner] Use rotateZ to stop the spinner from wiggling in IE
+- Fixing direct reference to @uifabric/utilities/lib from ResizeGroup
+- SearchBox: minor correction in hover styles.
+
+## 5.47.0
+Tue, 06 Feb 2018 11:14:36 GMT
+
+### Minor changes
+
+- BaseAutofill: Move to it's own component
+
+### Patches
+
+- fix deselect all in suggestionsController
+- DetailsList: Adding optional callback aria-describedby for each item in DetailsList
+
+## 5.46.0
+Mon, 05 Feb 2018 11:24:23 GMT
+
+### Minor changes
+
+- [SpinButton] Implemented precision
+
+### Patches
+
+- ComboBox, Dropdown, TextField: Improved high contrast in focus state. Layout changes for ComboBox to allow for border-box sizing.
+
+## 5.45.3
+Fri, 02 Feb 2018 11:24:16 GMT
+
+### Patches
+
+- Converted ActivityItemExample to use mergeStyles instead of SCSS
+
+## 5.45.2
+Thu, 01 Feb 2018 11:23:17 GMT
+
+### Patches
+
+- Adds the _isControlled flag to the TextField component that disabled onChange if the value prop is set, which follows developer expectations with React inputs.
+- Theme Generator: fix autogenerated neutral colors
+- Fix bug in modal selection handling
+- added return default when reaching the html tag in while loop inside _getBackground() inside Sticky component.
 
 ## 5.45.1
 Wed, 31 Jan 2018 11:11:59 GMT
diff --git a/packages/office-ui-fabric-react/package.json b/packages/office-ui-fabric-react/package.json
index 7a28ef220fe84..867769315403c 100644
--- a/packages/office-ui-fabric-react/package.json
+++ b/packages/office-ui-fabric-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "office-ui-fabric-react",
-  "version": "5.45.1",
+  "version": "5.64.3",
   "description": "Reusable React components for building experiences for Office 365.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -30,7 +30,7 @@
     "@types/sinon": "2.2.2",
     "@types/webpack-env": "1.13.0",
     "@uifabric/jest-serializer-merge-styles": ">=5.1.0 <6.0.0",
-    "@uifabric/example-app-base": ">=5.2.1 <6.0.0",
+    "@uifabric/example-app-base": ">=5.3.0 <6.0.0",
     "enzyme": "^3.2.0",
     "enzyme-adapter-react-16": "^1.1.0",
     "es6-promise": "^4.1.0",
@@ -48,10 +48,10 @@
   },
   "dependencies": {
     "@microsoft/load-themed-styles": "^1.7.13",
-    "@uifabric/icons": ">=5.4.1 <6.0.0",
-    "@uifabric/merge-styles": ">=5.11.0 <6.0.0",
-    "@uifabric/styling": ">=5.17.0 <6.0.0",
-    "@uifabric/utilities": ">=5.9.0 <6.0.0",
+    "@uifabric/icons": ">=5.6.0 <6.0.0",
+    "@uifabric/merge-styles": ">=5.13.0 <6.0.0",
+    "@uifabric/styling": ">=5.19.1 <6.0.0",
+    "@uifabric/utilities": ">=5.18.2 <6.0.0",
     "prop-types": "^15.5.10",
     "tslib": "^1.7.1"
   },
diff --git a/packages/office-ui-fabric-react/src/Autofill.ts b/packages/office-ui-fabric-react/src/Autofill.ts
new file mode 100644
index 0000000000000..148455296e48f
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/Autofill.ts
@@ -0,0 +1 @@
+export * from './components/Autofill/index';
\ No newline at end of file
diff --git a/packages/experiments/src/Coachmark.ts b/packages/office-ui-fabric-react/src/Coachmark.ts
similarity index 100%
rename from packages/experiments/src/Coachmark.ts
rename to packages/office-ui-fabric-react/src/Coachmark.ts
diff --git a/packages/office-ui-fabric-react/src/common/_semanticSlots.scss b/packages/office-ui-fabric-react/src/common/_semanticSlots.scss
index cd4c3729fdedd..6c28970435c5f 100644
--- a/packages/office-ui-fabric-react/src/common/_semanticSlots.scss
+++ b/packages/office-ui-fabric-react/src/common/_semanticSlots.scss
@@ -20,6 +20,7 @@ $warningHighlightColor: "[theme:warningHighlight, default: #ffb900]";
 $successBackgroundColor: "[theme:successBackground, default: rgba(186,216,10,.2)]";
 
 /* Input controls */
+$inputBackgroundColor: "[theme:inputBackground, default: #ffffff]";
 $inputBorderColor: "[theme:inputBorder, default: #a6a6a6]";
 $inputBorderHoveredColor: "[theme:inputBorderHovered, default: #212121]";
 $inputBackgroundCheckedColor: "[theme:inputBackgroundChecked, default: #0078d7]";
diff --git a/packages/office-ui-fabric-react/src/common/shallowUntilTarget.ts b/packages/office-ui-fabric-react/src/common/shallowUntilTarget.ts
new file mode 100644
index 0000000000000..ab7f089ef06a3
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/common/shallowUntilTarget.ts
@@ -0,0 +1,65 @@
+import { shallow, ShallowWrapper } from 'enzyme';
+
+/**
+ * Duplicated enzyme's ShallowRendererProps
+ *
+ * @internal
+ */
+export interface IShallowRendererProps {
+  lifecycleExperimental?: boolean;
+  disableLifecycleMethods?: boolean;
+}
+
+/**
+ * ShallowUntilTarget Interface
+ *
+ * @internal
+ */
+export interface IShallowUntilTarget {
+  maxTries: number;
+  shallowOptions: IShallowRendererProps;
+}
+
+/**
+ * An extention of enzyme's shallow function which will fail to work
+ * with decorated components and/or components using the styled() function.
+ * This function allows you to pass a 'target' component (e.g. ComponentBase)
+ * and keep running shallow on each child component till a match is found.
+ *
+ * @public
+ */
+export function shallowUntilTarget<P, S>(
+  componentInstance: React.ReactElement<P>,
+  TargetComponent: string,
+  options: IShallowUntilTarget = {
+    maxTries: 10,
+    shallowOptions: {}
+  }
+): ShallowWrapper {
+  const { maxTries, shallowOptions } = options;
+
+  let root = shallow<P, S>(componentInstance, shallowOptions);
+
+  if (typeof root.type() === 'string' || root.type().toString().includes(TargetComponent)) {
+    // Default shallow()
+    // If type() is a string then it's a DOM Node.
+    // If it were wrapped, it would be a React component.
+    return root;
+  }
+
+  for (let tries = 1; tries <= maxTries; tries++) {
+    // Check for target as a string to avoid conflicts
+    // with decoratored components name
+    if (root.type().toString().includes(TargetComponent)) {
+      // Now that we found the target component, render it.
+      return root.first().shallow(shallowOptions);
+    }
+    // Unwrap the next component in the hierarchy.
+    root = root.first().shallow(shallowOptions);
+  }
+
+  throw new Error(
+    `Could not find ${TargetComponent} in React instance: ${componentInstance};
+    gave up after ${maxTries} tries`
+  );
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.classNames.ts b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.classNames.ts
index 1311037925a36..12d62e960a6d0 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.classNames.ts
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.classNames.ts
@@ -1,7 +1,5 @@
 import {
-  mergeStyles,
-  ITheme,
-  getTheme
+  mergeStyles
 } from '../../Styling';
 import {
   memoizeFunction
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts
index c07eed7a0bab1..fd6951300fd3a 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.styles.ts
@@ -18,7 +18,7 @@ export const getStyles = memoizeFunction((
   theme: ITheme = getTheme(),
   customStyles?: IActivityItemStyles
 ): IActivityItemStyles => {
-  let ActivityItemStyles: IActivityItemStyles = {
+  const ActivityItemStyles: IActivityItemStyles = {
 
     root: [
       theme.fonts.small,
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.test.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.test.tsx
index f993d7b6ae030..462414f66dd3d 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.test.tsx
@@ -32,72 +32,72 @@ const defaultPersonaProps = [
 describe('ActivityItem', () => {
 
   it('renders with an icon correctly', () => {
-    let component = renderer.create(
+    const component = renderer.create(
       <ActivityItem
         {...defaultProps}
         activityIcon={ <Icon iconName={ 'Message' } /> }
       />
     );
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders with a single persona correctly', () => {
-    let component = renderer.create(
+    const component = renderer.create(
       <ActivityItem
         {...defaultProps}
         activityPersonas={ [defaultPersonaProps[0]] }
       />
     );
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders with multiple personas correctly', () => {
-    let component = renderer.create(
+    const component = renderer.create(
       <ActivityItem
         {...defaultProps}
         activityPersonas={ defaultPersonaProps }
       />
     );
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders compact with an icon correctly', () => {
-    let component = renderer.create(
+    const component = renderer.create(
       <ActivityItem
         {...defaultProps}
         activityIcon={ <Icon iconName={ 'Message' } /> }
         isCompact={ true }
       />
     );
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders compact with a single persona correctly', () => {
-    let component = renderer.create(
+    const component = renderer.create(
       <ActivityItem
         {...defaultProps}
         activityPersonas={ [defaultPersonaProps[0]] }
         isCompact={ true }
       />
     );
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders compact with multiple personas correctly', () => {
-    let component = renderer.create(
+    const component = renderer.create(
       <ActivityItem
         {...defaultProps}
         activityPersonas={ defaultPersonaProps }
         isCompact={ true }
       />
     );
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
-});
+});
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx
index 610e71dbc1913..887f243b75f54 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItem.tsx
@@ -4,7 +4,6 @@ import * as React from 'react';
 
 import { autobind, BaseComponent } from '../../Utilities';
 import { IActivityItemProps, IActivityItemStyles } from './ActivityItem.types';
-import { mergeStyles } from '../../Styling';
 import { IActivityItemClassNames, getClassNames } from './ActivityItem.classNames';
 import { getStyles } from './ActivityItem.styles';
 import { PersonaSize, PersonaCoin, IPersonaProps } from '../../Persona';
@@ -18,7 +17,7 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
   }
 
   public render() {
-    let {
+    const {
       onRenderIcon = this._onRenderIcon,
       onRenderActivityDescription = this._onRenderActivityDescription,
       onRenderComments = this._onRenderComments,
@@ -97,11 +96,11 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
   @autobind
   private _onRenderPersonaArray(props: IActivityItemProps): JSX.Element | null {
     let personaElement: JSX.Element | null = null;
-    let activityPersonas = props.activityPersonas as Array<IPersonaProps & { key?: string | number }>;
+    const activityPersonas = props.activityPersonas as Array<IPersonaProps & { key?: string | number }>;
     if (activityPersonas[0].imageUrl || activityPersonas[0].imageInitials) {
-      let personaList: Array<JSX.Element> = [];
-      let showSize16Personas = (activityPersonas.length > 1 || props.isCompact);
-      let personaLimit = props.isCompact ? 3 : 4;
+      const personaList: Array<JSX.Element> = [];
+      const showSize16Personas = (activityPersonas.length > 1 || props.isCompact);
+      const personaLimit = props.isCompact ? 3 : 4;
       let style: React.CSSProperties | undefined = undefined;
       if (props.isCompact) {
         style = {
@@ -114,7 +113,7 @@ export class ActivityItem extends BaseComponent<IActivityItemProps, {}> {
       activityPersonas.filter((person, index) => index < personaLimit).forEach((person, index) => {
         personaList.push(
           <PersonaCoin
-            {...person}
+            { ...person }
             // tslint:disable-next-line:no-string-literal
             key={ person['key'] ? person['key'] : index }
             className={ this._classNames.activityPersona }
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx
index 156563f8dbb9b..c84fdf7a6ec9b 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/ActivityItemPage.tsx
@@ -5,7 +5,6 @@ import {
   IComponentDemoPageProps,
   PropertiesTableSet
 } from '@uifabric/example-app-base';
-import './examples/ActivityItem.Example.scss';
 import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
 import { ActivityItemStatus } from './ActivityItem.checklist';
 import { ActivityItemBasicExample } from './examples/ActivityItem.Basic.Example';
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap
index b3acb36fff522..286b79f76ca97 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/__snapshots__/ActivityItem.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`ActivityItem renders compact with a single persona correctly 1`] = `
         box-sizing: border-box;
         color: #666666;
         display: flex;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 12px;
         font-weight: 400;
         justify-content: flex-start;
@@ -82,7 +82,12 @@ exports[`ActivityItem renders compact with a single persona correctly 1`] = `
             </span>
           </div>
           <div
-            className="ms-Image ms-Persona-image"
+            className=
+                ms-Image
+                ms-Persona-image
+                {
+                  overflow: hidden;
+                }
             style={
               Object {
                 "height": undefined,
@@ -92,7 +97,22 @@ exports[`ActivityItem renders compact with a single persona correctly 1`] = `
           >
             <img
               alt=""
-              className="ms-Image-image ms-Image-image--portrait undefined ms-Image-image--cover undefined is-notLoaded is-fadeIn"
+              className=
+                  ms-Image-image
+                  ms-Image-image--cover
+                  ms-Image-image--portrait
+                  is-notLoaded
+                  is-fadeIn
+                  {
+                    display: block;
+                    height: auto;
+                    left: 50%;
+                    opacity: 0;
+                    position: relative;
+                    top: 50%;
+                    transform: translate(-50%,-50%);
+                    width: 100%;
+                  }
               onError={[Function]}
               onLoad={[Function]}
               role={undefined}
@@ -143,7 +163,7 @@ exports[`ActivityItem renders compact with an icon correctly 1`] = `
         box-sizing: border-box;
         color: #666666;
         display: flex;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 12px;
         font-weight: 400;
         justify-content: flex-start;
@@ -173,7 +193,6 @@ exports[`ActivityItem renders compact with an icon correctly 1`] = `
   >
     <i
       aria-hidden={true}
-      aria-label={undefined}
       className=
 
           {
@@ -223,7 +242,7 @@ exports[`ActivityItem renders compact with multiple personas correctly 1`] = `
         box-sizing: border-box;
         color: #666666;
         display: flex;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 12px;
         font-weight: 400;
         justify-content: flex-start;
@@ -294,7 +313,12 @@ exports[`ActivityItem renders compact with multiple personas correctly 1`] = `
             </span>
           </div>
           <div
-            className="ms-Image ms-Persona-image"
+            className=
+                ms-Image
+                ms-Persona-image
+                {
+                  overflow: hidden;
+                }
             style={
               Object {
                 "height": undefined,
@@ -304,7 +328,22 @@ exports[`ActivityItem renders compact with multiple personas correctly 1`] = `
           >
             <img
               alt=""
-              className="ms-Image-image ms-Image-image--portrait undefined ms-Image-image--cover undefined is-notLoaded is-fadeIn"
+              className=
+                  ms-Image-image
+                  ms-Image-image--cover
+                  ms-Image-image--portrait
+                  is-notLoaded
+                  is-fadeIn
+                  {
+                    display: block;
+                    height: auto;
+                    left: 50%;
+                    opacity: 0;
+                    position: relative;
+                    top: 50%;
+                    transform: translate(-50%,-50%);
+                    width: 100%;
+                  }
               onError={[Function]}
               onLoad={[Function]}
               role={undefined}
@@ -330,7 +369,12 @@ exports[`ActivityItem renders compact with multiple personas correctly 1`] = `
           style={undefined}
         >
           <div
-            className="ms-Image ms-Persona-image"
+            className=
+                ms-Image
+                ms-Persona-image
+                {
+                  overflow: hidden;
+                }
             style={
               Object {
                 "height": undefined,
@@ -340,7 +384,22 @@ exports[`ActivityItem renders compact with multiple personas correctly 1`] = `
           >
             <img
               alt=""
-              className="ms-Image-image ms-Image-image--portrait undefined ms-Image-image--cover undefined is-notLoaded is-fadeIn"
+              className=
+                  ms-Image-image
+                  ms-Image-image--cover
+                  ms-Image-image--portrait
+                  is-notLoaded
+                  is-fadeIn
+                  {
+                    display: block;
+                    height: auto;
+                    left: 50%;
+                    opacity: 0;
+                    position: relative;
+                    top: 50%;
+                    transform: translate(-50%,-50%);
+                    width: 100%;
+                  }
               onError={[Function]}
               onLoad={[Function]}
               role={undefined}
@@ -379,7 +438,12 @@ exports[`ActivityItem renders compact with multiple personas correctly 1`] = `
             </span>
           </div>
           <div
-            className="ms-Image ms-Persona-image"
+            className=
+                ms-Image
+                ms-Persona-image
+                {
+                  overflow: hidden;
+                }
             style={
               Object {
                 "height": undefined,
@@ -389,7 +453,22 @@ exports[`ActivityItem renders compact with multiple personas correctly 1`] = `
           >
             <img
               alt=""
-              className="ms-Image-image ms-Image-image--portrait undefined ms-Image-image--cover undefined is-notLoaded is-fadeIn"
+              className=
+                  ms-Image-image
+                  ms-Image-image--cover
+                  ms-Image-image--portrait
+                  is-notLoaded
+                  is-fadeIn
+                  {
+                    display: block;
+                    height: auto;
+                    left: 50%;
+                    opacity: 0;
+                    position: relative;
+                    top: 50%;
+                    transform: translate(-50%,-50%);
+                    width: 100%;
+                  }
               onError={[Function]}
               onLoad={[Function]}
               role={undefined}
@@ -440,7 +519,7 @@ exports[`ActivityItem renders with a single persona correctly 1`] = `
         box-sizing: border-box;
         color: #666666;
         display: flex;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 12px;
         font-weight: 400;
         justify-content: flex-start;
@@ -492,7 +571,12 @@ exports[`ActivityItem renders with a single persona correctly 1`] = `
             </span>
           </div>
           <div
-            className="ms-Image ms-Persona-image"
+            className=
+                ms-Image
+                ms-Persona-image
+                {
+                  overflow: hidden;
+                }
             style={
               Object {
                 "height": 32,
@@ -502,7 +586,22 @@ exports[`ActivityItem renders with a single persona correctly 1`] = `
           >
             <img
               alt=""
-              className="ms-Image-image ms-Image-image--portrait undefined ms-Image-image--cover undefined is-notLoaded is-fadeIn"
+              className=
+                  ms-Image-image
+                  ms-Image-image--cover
+                  ms-Image-image--portrait
+                  is-notLoaded
+                  is-fadeIn
+                  {
+                    display: block;
+                    height: auto;
+                    left: 50%;
+                    opacity: 0;
+                    position: relative;
+                    top: 50%;
+                    transform: translate(-50%,-50%);
+                    width: 100%;
+                  }
               onError={[Function]}
               onLoad={[Function]}
               role={undefined}
@@ -552,7 +651,7 @@ exports[`ActivityItem renders with a single persona correctly 1`] = `
             -moz-osx-font-smoothing: grayscale;
             -webkit-font-smoothing: antialiased;
             color: #666666;
-            font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
             font-size: 10px;
             font-weight: 400;
           }
@@ -574,7 +673,7 @@ exports[`ActivityItem renders with an icon correctly 1`] = `
         box-sizing: border-box;
         color: #666666;
         display: flex;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 12px;
         font-weight: 400;
         justify-content: flex-start;
@@ -594,7 +693,6 @@ exports[`ActivityItem renders with an icon correctly 1`] = `
   >
     <i
       aria-hidden={true}
-      aria-label={undefined}
       className=
 
           {
@@ -643,7 +741,7 @@ exports[`ActivityItem renders with an icon correctly 1`] = `
             -moz-osx-font-smoothing: grayscale;
             -webkit-font-smoothing: antialiased;
             color: #666666;
-            font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
             font-size: 10px;
             font-weight: 400;
           }
@@ -665,7 +763,7 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = `
         box-sizing: border-box;
         color: #666666;
         display: flex;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 12px;
         font-weight: 400;
         justify-content: flex-start;
@@ -717,7 +815,12 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = `
             </span>
           </div>
           <div
-            className="ms-Image ms-Persona-image"
+            className=
+                ms-Image
+                ms-Persona-image
+                {
+                  overflow: hidden;
+                }
             style={
               Object {
                 "height": undefined,
@@ -727,7 +830,22 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = `
           >
             <img
               alt=""
-              className="ms-Image-image ms-Image-image--portrait undefined ms-Image-image--cover undefined is-notLoaded is-fadeIn"
+              className=
+                  ms-Image-image
+                  ms-Image-image--cover
+                  ms-Image-image--portrait
+                  is-notLoaded
+                  is-fadeIn
+                  {
+                    display: block;
+                    height: auto;
+                    left: 50%;
+                    opacity: 0;
+                    position: relative;
+                    top: 50%;
+                    transform: translate(-50%,-50%);
+                    width: 100%;
+                  }
               onError={[Function]}
               onLoad={[Function]}
               role={undefined}
@@ -746,7 +864,12 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = `
           style={undefined}
         >
           <div
-            className="ms-Image ms-Persona-image"
+            className=
+                ms-Image
+                ms-Persona-image
+                {
+                  overflow: hidden;
+                }
             style={
               Object {
                 "height": undefined,
@@ -756,7 +879,22 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = `
           >
             <img
               alt=""
-              className="ms-Image-image ms-Image-image--portrait undefined ms-Image-image--cover undefined is-notLoaded is-fadeIn"
+              className=
+                  ms-Image-image
+                  ms-Image-image--cover
+                  ms-Image-image--portrait
+                  is-notLoaded
+                  is-fadeIn
+                  {
+                    display: block;
+                    height: auto;
+                    left: 50%;
+                    opacity: 0;
+                    position: relative;
+                    top: 50%;
+                    transform: translate(-50%,-50%);
+                    width: 100%;
+                  }
               onError={[Function]}
               onLoad={[Function]}
               role={undefined}
@@ -788,7 +926,12 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = `
             </span>
           </div>
           <div
-            className="ms-Image ms-Persona-image"
+            className=
+                ms-Image
+                ms-Persona-image
+                {
+                  overflow: hidden;
+                }
             style={
               Object {
                 "height": undefined,
@@ -798,7 +941,22 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = `
           >
             <img
               alt=""
-              className="ms-Image-image ms-Image-image--portrait undefined ms-Image-image--cover undefined is-notLoaded is-fadeIn"
+              className=
+                  ms-Image-image
+                  ms-Image-image--cover
+                  ms-Image-image--portrait
+                  is-notLoaded
+                  is-fadeIn
+                  {
+                    display: block;
+                    height: auto;
+                    left: 50%;
+                    opacity: 0;
+                    position: relative;
+                    top: 50%;
+                    transform: translate(-50%,-50%);
+                    width: 100%;
+                  }
               onError={[Function]}
               onLoad={[Function]}
               role={undefined}
@@ -817,7 +975,12 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = `
           style={undefined}
         >
           <div
-            className="ms-Image ms-Persona-image"
+            className=
+                ms-Image
+                ms-Persona-image
+                {
+                  overflow: hidden;
+                }
             style={
               Object {
                 "height": undefined,
@@ -827,7 +990,22 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = `
           >
             <img
               alt=""
-              className="ms-Image-image ms-Image-image--portrait undefined ms-Image-image--cover undefined is-notLoaded is-fadeIn"
+              className=
+                  ms-Image-image
+                  ms-Image-image--cover
+                  ms-Image-image--portrait
+                  is-notLoaded
+                  is-fadeIn
+                  {
+                    display: block;
+                    height: auto;
+                    left: 50%;
+                    opacity: 0;
+                    position: relative;
+                    top: 50%;
+                    transform: translate(-50%,-50%);
+                    width: 100%;
+                  }
               onError={[Function]}
               onLoad={[Function]}
               role={undefined}
@@ -877,7 +1055,7 @@ exports[`ActivityItem renders with multiple personas correctly 1`] = `
             -moz-osx-font-smoothing: grayscale;
             -webkit-font-smoothing: antialiased;
             color: #666666;
-            font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
             font-size: 10px;
             font-weight: 400;
           }
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx
index bd9ddf41104c7..838d6fd39bec7 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx
@@ -1,57 +1,66 @@
 /* tslint:disable:no-unused-variable */
 import * as React from 'react';
 /* tslint:enable:no-unused-variable */
+import { css, classNamesFunction } from '../../../Utilities';
 import { ActivityItem } from '../ActivityItem';
+import {
+  getStyles,
+  IActivityItemExampleStyleProps,
+  IActivityItemExampleStyles
+} from './ActivityItem.Example.styles';
 import { Icon } from '../../../Icon';
 import { Link } from '../../../Link';
 
-// tslint:disable:jsx-no-lambda
-const activityItemExamples = [
-  {
-    key: 1,
-    activityDescription: [
-      <Link key={ 1 } className={ 'ms-activityItem-nameText' } onClick={ () => { alert('A name was clicked.'); } } >Philippe Lampros</Link>,
-      <span key={ 2 }> commented</span>
-    ],
-    activityIcon: <Icon iconName={ 'Message' } />,
-    comments: [
-      <span key={ 1 }>Hello! I am making a comment and mentioning </span>,
-      <Link key={ 2 } className={ 'ms-activityItem-nameText' } onClick={ () => { alert('An @mentioned name was clicked.'); } } >@Anđela Debeljak</Link>,
-      <span key={ 3 }> in the text of the comment.</span>
-    ],
-    timeStamp: 'Just now'
-  },
-  {
-    key: 2,
-    activityDescription: [
-      <Link key={ 1 } className={ 'ms-activityItem-nameText' } onClick={ () => { alert('A name was clicked.'); } } >Lisha Refai</Link>,
-      <span key={ 2 }> deleted </span>,
-      <span key={ 3 } className={ 'ms-activityItem-nameText' }>DocumentTitle.docx</span>
-    ],
-    activityIcon: <Icon iconName={ 'Trash' } />,
-    timeStamp: '2 hours ago'
-  },
-  {
-    key: 3,
-    activityDescription: [
-      <Link key={ 1 } className={ 'ms-activityItem-nameText' } onClick={ () => { alert('A name was clicked.'); } } >Julian Arvidsson</Link>,
-      <span key={ 2 }> moved </span>,
-      <Link key={ 3 } className={ 'ms-activityItem-nameText' } onClick={ () => { alert('A document was clicked.'); } } >PresentationTitle.pptx</Link>,
-      <span key={ 4 }> to </span>,
-      <Link key={ 5 } className={ 'ms-activityItem-nameText' } onClick={ () => { alert('A folder was clicked.'); } } >Destination Folder</Link>
-    ],
-    activityIcon: <Icon iconName={ 'FabricMovetoFolder' } />,
-    timeStamp: 'Yesterday'
-  }
-];
-
 export class ActivityItemBasicExample extends React.Component<React.Props<ActivityItemBasicExample>, {}> {
   public render() {
-    let activityExampleList: Array<JSX.Element> = [];
+    const getClassNames = classNamesFunction<IActivityItemExampleStyleProps, IActivityItemExampleStyles>();
+    const classNames = getClassNames(getStyles);
+
+    // tslint:disable:jsx-no-lambda
+    const activityItemExamples = [
+      {
+        key: 1,
+        activityDescription: [
+          <Link key={ 1 } className={ css(classNames.nameText) } onClick={ () => { alert('A name was clicked.'); } } >Philippe Lampros</Link>,
+          <span key={ 2 }> commented</span>
+        ],
+        activityIcon: <Icon iconName={ 'Message' } />,
+        comments: [
+          <span key={ 1 }>Hello! I am making a comment and mentioning </span>,
+          <Link key={ 2 } className={ css(classNames.nameText) } onClick={ () => { alert('An @mentioned name was clicked.'); } } >@Anđela Debeljak</Link>,
+          <span key={ 3 }> in the text of the comment.</span>
+        ],
+        timeStamp: 'Just now'
+      },
+      {
+        key: 2,
+        activityDescription: [
+          <Link key={ 1 } className={ css(classNames.nameText) } onClick={ () => { alert('A name was clicked.'); } } >Lisha Refai</Link>,
+          <span key={ 2 }> deleted </span>,
+          <span key={ 3 } className={ css(classNames.nameText) }>DocumentTitle.docx</span>
+        ],
+        activityIcon: <Icon iconName={ 'Trash' } />,
+        timeStamp: '2 hours ago'
+      },
+      {
+        key: 3,
+        activityDescription: [
+          <Link key={ 1 } className={ css(classNames.nameText) } onClick={ () => { alert('A name was clicked.'); } } >Julian Arvidsson</Link>,
+          <span key={ 2 }> moved </span>,
+          <Link key={ 3 } className={ css(classNames.nameText) } onClick={ () => { alert('A document was clicked.'); } } >PresentationTitle.pptx</Link>,
+          <span key={ 4 }> to </span>,
+          <Link key={ 5 } className={ css(classNames.nameText) } onClick={ () => { alert('A folder was clicked.'); } } >Destination Folder</Link>
+        ],
+        activityIcon: <Icon iconName={ 'FabricMovetoFolder' } />,
+        timeStamp: 'Yesterday'
+      }
+    ];
+
+    const activityExampleList: Array<JSX.Element> = [];
     activityItemExamples.forEach((item) => {
-      let props = item;
+      const props = item;
       activityExampleList.push(
-        <ActivityItem {...props} key={ item.key } className={ 'ms-activityItem-exampleRoot' } />
+        <ActivityItem {...props} key={ item.key } className={ css(classNames.exampleRoot) } />
       );
     });
 
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx
index 335079872144d..56a68c5f440d6 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx
@@ -1,73 +1,82 @@
 /* tslint:disable:no-unused-variable */
 import * as React from 'react';
 /* tslint:enable:no-unused-variable */
+import { css, classNamesFunction } from '../../../Utilities';
 import { ActivityItem } from '../ActivityItem';
+import {
+  getStyles,
+  IActivityItemExampleStyleProps,
+  IActivityItemExampleStyles
+} from './ActivityItem.Example.styles';
 import { TestImages } from '../../../common/TestImages';
 import { Icon } from '../../../Icon';
 
-const activityItemExamples = [
-  {
-    key: 1,
-    activityDescription: [
-      <span key={ 1 } className={ 'ms-activityItem-nameText' }>Tahlia	Whittle</span>,
-      <span key={ 2 }> edited this file</span>
-    ],
-    activityPersonas: [
+export class ActivityItemCompactExample extends React.Component<React.Props<ActivityItemCompactExample>, {}> {
+  public render() {
+    const getClassNames = classNamesFunction<IActivityItemExampleStyleProps, IActivityItemExampleStyles>();
+    const classNames = getClassNames(getStyles);
+
+    const activityItemExamples = [
       {
-        imageUrl: TestImages.personaFemale
-      }
-    ],
-    isCompact: true
-  },
-  {
-    key: 2,
-    activityDescription: [
-      <span key={ 1 } className={ 'ms-activityItem-nameText' }>Patrick Loton</span>,
-      <span key={ 2 }> and </span>,
-      <span key={ 3 } className={ 'ms-activityItem-nameText' }> 6 others</span>
-    ],
-    activityPersonas: [
+        key: 1,
+        activityDescription: [
+          <span key={ 1 } className={ css(classNames.nameText) }>Tahlia	Whittle</span>,
+          <span key={ 2 }> edited this file</span>
+        ],
+        activityPersonas: [
+          {
+            imageUrl: TestImages.personaFemale
+          }
+        ],
+        isCompact: true
+      },
       {
-        imageInitials: 'PT',
-        primaryText: 'Robert Larsson'
+        key: 2,
+        activityDescription: [
+          <span key={ 1 } className={ css(classNames.nameText) }>Patrick Loton</span>,
+          <span key={ 2 }> and </span>,
+          <span key={ 3 } className={ css(classNames.nameText) }> 6 others</span>
+        ],
+        activityPersonas: [
+          {
+            imageInitials: 'PT',
+            primaryText: 'Robert Larsson'
+          },
+          {
+            imageUrl: TestImages.personaMale
+          },
+          {
+            imageInitials: 'EC',
+            primaryText: 'Eduarda Costa'
+          }
+        ],
+        isCompact: true
       },
       {
-        imageUrl: TestImages.personaMale
+        key: 3,
+        activityDescription: [
+          <span key={ 1 } className={ css(classNames.nameText) }>Sabrina De Luca</span>,
+          <span key={ 2 }> added this file</span>
+        ],
+        activityIcon: React.createElement(Icon, { iconName: 'Add' }),
+        isCompact: true
       },
       {
-        imageInitials: 'EC',
-        primaryText: 'Eduarda Costa'
+        key: 4,
+        activityDescription: [
+          <span key={ 1 } className={ css(classNames.nameText) }>Chuan Rojumanong</span>,
+          <span key={ 2 }> shared this file</span>
+        ],
+        activityIcon: React.createElement(Icon, { iconName: 'Share' }),
+        isCompact: true
       }
-    ],
-    isCompact: true
-  },
-  {
-    key: 3,
-    activityDescription: [
-      <span key={ 1 } className={ 'ms-activityItem-nameText' }>Sabrina De Luca</span>,
-      <span key={ 2 }> added this file</span>
-    ],
-    activityIcon: React.createElement(Icon, { iconName: 'Add' }),
-    isCompact: true
-  },
-  {
-    key: 4,
-    activityDescription: [
-      <span key={ 1 } className={ 'ms-activityItem-nameText' }>Chuan Rojumanong</span>,
-      <span key={ 2 }> shared this file</span>
-    ],
-    activityIcon: React.createElement(Icon, { iconName: 'Share' }),
-    isCompact: true
-  }
-];
+    ];
 
-export class ActivityItemCompactExample extends React.Component<React.Props<ActivityItemCompactExample>, {}> {
-  public render() {
-    let activityExampleList: Array<JSX.Element> = [];
+    const activityExampleList: Array<JSX.Element> = [];
     activityItemExamples.forEach((item) => {
-      let props = item;
+      const props = item;
       activityExampleList.push(
-        <ActivityItem {...props} key={ item.key } className={ 'ms-activityItem-exampleRoot' } />
+        <ActivityItem {...props} key={ item.key } className={ css(classNames.exampleRoot) } />
       );
     });
 
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.scss b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.scss
deleted file mode 100644
index fd944b732c7d8..0000000000000
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-:global {
-  .ms-activityItem-exampleRoot {
-    margin-top: 20px;
-  }
-
-  .ms-activityItem-nameText {
-    font-weight: bold;
-  }
-}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.styles.ts b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.styles.ts
new file mode 100644
index 0000000000000..ac1d9912c43cc
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.styles.ts
@@ -0,0 +1,23 @@
+import { IStyle } from '../../../Styling';
+
+export interface IActivityItemExampleStyleProps {
+  /**
+   * 404 No Style Props Found
+   */
+}
+
+export interface IActivityItemExampleStyles {
+  exampleRoot?: IStyle;
+  nameText?: IStyle;
+}
+
+export const getStyles = (props: IActivityItemExampleStyleProps): IActivityItemExampleStyles => {
+  return ({
+    exampleRoot: {
+      marginTop: '20px'
+    },
+    nameText: {
+      fontWeight: 'bold'
+    }
+  });
+};
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx
index 289fe84e5a7f3..204be27e2a29f 100644
--- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx
@@ -1,110 +1,119 @@
 /* tslint:disable:no-unused-variable */
 import * as React from 'react';
 /* tslint:enable:no-unused-variable */
+import { css, classNamesFunction } from '../../../Utilities';
 import { ActivityItem } from '../ActivityItem';
+import {
+  getStyles,
+  IActivityItemExampleStyleProps,
+  IActivityItemExampleStyles
+} from './ActivityItem.Example.styles';
 import { TestImages } from '../../../common/TestImages';
 import { Link } from '../../../Link';
 
-// tslint:disable:jsx-no-lambda
-const activityItemExamples = [
-  {
-    key: 1,
-    activityDescription: [
-      <Link key={ 1 } className={ 'ms-activityItem-nameText' } onClick={ () => { alert('A name was clicked.'); } } >Jack Howden</Link>,
-      <span key={ 2 }> renamed </span>,
-      <span key={ 3 } className={ 'ms-activityItem-nameText' }>DocumentTitle.docx</span>
-    ],
-    activityPersonas: [
-      {
-        imageUrl: TestImages.personaMale
-      }
-    ],
-    comments: 'Hello, this is the text of my basic comment!',
-    timeStamp: '23m ago'
-  },
-  {
-    key: 2,
-    activityDescription: [
-      <Link key={ 1 } className={ 'ms-activityItem-nameText' } onClick={ () => { alert('A name was clicked.'); } } >Javiera Márquez</Link>,
-      <span key={ 2 }> and </span>,
-      <Link key={ 3 } className={ 'ms-activityItem-nameText' } onClick={ () => { alert('A name was clicked.'); } } >Amelia Povalіy</Link>,
-      <span key={ 4 }> edited </span>,
-      <Link key={ 5 } className={ 'ms-activityItem-nameText' } onClick={ () => { alert('A document was clicked.'); } } >SpreadsheetTitle.xlsx</Link>
-    ],
-    activityPersonas: [
-      {
-        imageInitials: 'JM',
-        primaryText: 'Javiera Márquez'
-      },
-      {
-        imageUrl: TestImages.personaFemale
-      }
-    ],
-    timeStamp: '9:27 am'
-  },
-  {
-    key: 3,
-    activityDescription: [
-      <Link key={ 1 } className={ 'ms-activityItem-nameText' } onClick={ () => { alert('A name was clicked.'); } } >Robert Larsson</Link>,
-      <span key={ 2 }> and </span>,
-      <Link key={ 3 } className={ 'ms-activityItem-nameText' } onClick={ () => { alert('A name was clicked.'); } } >2 others</Link>,
-      <span key={ 4 }> commented </span>
-    ],
-    activityPersonas: [
-      {
-        imageInitials: 'RL',
-        primaryText: 'Robert Larsson'
-      },
-      {
-        imageUrl: TestImages.personaMale
-      },
-      {
-        imageUrl: TestImages.personaFemale
-      }
-    ],
-    timeStamp: '3 days ago'
-  },
-  {
-    key: 4,
-    activityDescription: [
-      <Link key={ 1 } className={ 'ms-activityItem-nameText' } onClick={ () => { alert('A name was clicked.'); } } >Jin Cheng</Link>,
-      <span key={ 2 }> and </span>,
-      <Link key={ 3 } className={ 'ms-activityItem-nameText' } onClick={ () => { alert('A name was clicked.'); } } >5 others</Link>,
-      <span key={ 4 }> edited this file</span>
-    ],
-    activityPersonas: [
-      {
-        imageInitials: 'JC',
-        primaryText: 'Jin Cheng'
-      },
-      {
-        imageUrl: TestImages.personaMale
-      },
+export class ActivityItemPersonaExample extends React.Component<React.Props<ActivityItemPersonaExample>, {}> {
+  public render() {
+    const getClassNames = classNamesFunction<IActivityItemExampleStyleProps, IActivityItemExampleStyles>();
+    const classNames = getClassNames(getStyles);
+
+    // tslint:disable:jsx-no-lambda
+    const activityItemExamples = [
       {
-        imageInitials: 'AL',
-        primaryText: 'Annie Lindqvist'
+        key: 1,
+        activityDescription: [
+          <Link key={ 1 } className={ css(classNames.nameText) } onClick={ () => { alert('A name was clicked.'); } } >Jack Howden</Link>,
+          <span key={ 2 }> renamed </span>,
+          <span key={ 3 } className={ css(classNames.nameText) }>DocumentTitle.docx</span>
+        ],
+        activityPersonas: [
+          {
+            imageUrl: TestImages.personaMale
+          }
+        ],
+        comments: 'Hello, this is the text of my basic comment!',
+        timeStamp: '23m ago'
       },
       {
-        imageUrl: TestImages.personaFemale
+        key: 2,
+        activityDescription: [
+          <Link key={ 1 } className={ css(classNames.nameText) } onClick={ () => { alert('A name was clicked.'); } } >Javiera Márquez</Link>,
+          <span key={ 2 }> and </span>,
+          <Link key={ 3 } className={ css(classNames.nameText) } onClick={ () => { alert('A name was clicked.'); } } >Amelia Povalіy</Link>,
+          <span key={ 4 }> edited </span>,
+          <Link key={ 5 } className={ css(classNames.nameText) } onClick={ () => { alert('A document was clicked.'); } } >SpreadsheetTitle.xlsx</Link>
+        ],
+        activityPersonas: [
+          {
+            imageInitials: 'JM',
+            primaryText: 'Javiera Márquez'
+          },
+          {
+            imageUrl: TestImages.personaFemale
+          }
+        ],
+        timeStamp: '9:27 am'
       },
       {
-        imageUrl: TestImages.personaMale
+        key: 3,
+        activityDescription: [
+          <Link key={ 1 } className={ css(classNames.nameText) } onClick={ () => { alert('A name was clicked.'); } } >Robert Larsson</Link>,
+          <span key={ 2 }> and </span>,
+          <Link key={ 3 } className={ css(classNames.nameText) } onClick={ () => { alert('A name was clicked.'); } } >2 others</Link>,
+          <span key={ 4 }> commented </span>
+        ],
+        activityPersonas: [
+          {
+            imageInitials: 'RL',
+            primaryText: 'Robert Larsson'
+          },
+          {
+            imageUrl: TestImages.personaMale
+          },
+          {
+            imageUrl: TestImages.personaFemale
+          }
+        ],
+        timeStamp: '3 days ago'
       },
       {
-        imageUrl: TestImages.personaMale
+        key: 4,
+        activityDescription: [
+          <Link key={ 1 } className={ css(classNames.nameText) } onClick={ () => { alert('A name was clicked.'); } } >Jin Cheng</Link>,
+          <span key={ 2 }> and </span>,
+          <Link key={ 3 } className={ css(classNames.nameText) } onClick={ () => { alert('A name was clicked.'); } } >5 others</Link>,
+          <span key={ 4 }> edited this file</span>
+        ],
+        activityPersonas: [
+          {
+            imageInitials: 'JC',
+            primaryText: 'Jin Cheng'
+          },
+          {
+            imageUrl: TestImages.personaMale
+          },
+          {
+            imageInitials: 'AL',
+            primaryText: 'Annie Lindqvist'
+          },
+          {
+            imageUrl: TestImages.personaFemale
+          },
+          {
+            imageUrl: TestImages.personaMale
+          },
+          {
+            imageUrl: TestImages.personaMale
+          }
+        ],
+        timeStamp: 'August 3, 2017'
       }
-    ],
-    timeStamp: 'August 3, 2017'
-  }
-];
+    ];
 
-export class ActivityItemPersonaExample extends React.Component<React.Props<ActivityItemPersonaExample>, {}> {
-  public render() {
-    let activityExampleList: Array<JSX.Element> = [];
+    const activityExampleList: Array<JSX.Element> = [];
     activityItemExamples.forEach((item) => {
-      let props = item;
+      const props = item;
       activityExampleList.push(
-        <ActivityItem {...props} key={ item.key } className={ 'ms-activityItem-exampleRoot' } />
+        <ActivityItem {...props} key={ item.key } className={ css(classNames.exampleRoot) } />
       );
     });
 
diff --git a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.test.tsx b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.test.tsx
similarity index 72%
rename from packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.test.tsx
rename to packages/office-ui-fabric-react/src/components/Autofill/Autofill.test.tsx
index a1da2465c6150..3ec42dccafdec 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.test.tsx
@@ -5,18 +5,18 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import * as ReactTestUtils from 'react-dom/test-utils';
 
-import { KeyCodes } from '../../../Utilities';
-import { BaseAutoFill } from './BaseAutoFill';
+import { KeyCodes } from '../../Utilities';
+import { Autofill } from './Autofill';
 
-describe('BaseAutoFill', () => {
-  let autoFill: BaseAutoFill;
+describe('Autofill', () => {
+  let autoFill: Autofill;
   let autoFillInput: HTMLInputElement;
-  let baseNode = document.createElement('div');
+  const baseNode = document.createElement('div');
   document.body.appendChild(baseNode);
   beforeEach(() => {
 
-    let component = ReactDOM.render(
-      <BaseAutoFill
+    const component = ReactDOM.render(
+      <Autofill
         ref={ (c) => autoFill = c! }
         suggestedDisplayValue='hello'
       />,
@@ -33,7 +33,7 @@ describe('BaseAutoFill', () => {
     };
 
     ReactDOM.render(
-      <BaseAutoFill
+      <Autofill
         ref={ (c) => autoFill = c! }
         onInputValueChange={ onInputValueChange }
         suggestedDisplayValue='hello'
@@ -41,14 +41,14 @@ describe('BaseAutoFill', () => {
       baseNode
     );
     autoFillInput.value = 'hel';
-    ReactTestUtils.Simulate.change(autoFillInput);
+    ReactTestUtils.Simulate.input(autoFillInput);
     ReactDOM.render(
-      <BaseAutoFill
+      <Autofill
         ref={ (c) => autoFill = c! }
         onInputValueChange={ onInputValueChange }
         suggestedDisplayValue='hello'
       />, baseNode);
-    expect(autoFill.inputElement.value).toBe('hello');
+    expect(autoFill.inputElement && autoFill.inputElement.value).toBe('hello');
 
   });
 
@@ -56,29 +56,29 @@ describe('BaseAutoFill', () => {
     const onInputValueChange = (text: string | undefined): void => {
       expect(text).toBe('hep');
       expect(autoFill.value).toBe('hep');
-      expect(autoFill.inputElement.value).toBe('hep');
+      expect(autoFill.inputElement && autoFill.inputElement.value).toBe('hep');
       done();
     };
 
     autoFillInput.value = 'hep';
-    ReactTestUtils.Simulate.change(autoFillInput);
+    ReactTestUtils.Simulate.input(autoFillInput);
     ReactDOM.render(
-      <BaseAutoFill
+      <Autofill
         ref={ (c) => autoFill = c! }
         onInputValueChange={ onInputValueChange }
         suggestedDisplayValue='hello'
       />,
       baseNode
     );
-    ReactTestUtils.Simulate.change(autoFillInput);
+    ReactTestUtils.Simulate.input(autoFillInput);
   });
 
   it('does not autofill if left or right arrow has been pressed', () => {
     autoFillInput.value = 'hel';
-    ReactTestUtils.Simulate.change(autoFillInput);
+    ReactTestUtils.Simulate.input(autoFillInput);
 
     ReactDOM.render(
-      <BaseAutoFill
+      <Autofill
         ref={ (c) => autoFill = c! }
         suggestedDisplayValue='hello'
       />,
@@ -91,18 +91,18 @@ describe('BaseAutoFill', () => {
     // If we don't the change event will cause the current input value, 'hello', to be set.
     autoFillInput.value = 'hel';
 
-    ReactTestUtils.Simulate.change(autoFillInput);
+    ReactTestUtils.Simulate.input(autoFillInput);
 
     expect(autoFill.value).toBe('hel');
-    expect(autoFill.inputElement.value).toBe('hel');
+    expect(autoFill.inputElement && autoFill.inputElement.value).toBe('hel');
   });
 
   it('will autofill if keyCode up or down is pressed', () => {
     autoFillInput.value = 'hel';
-    ReactTestUtils.Simulate.change(autoFillInput);
+    ReactTestUtils.Simulate.input(autoFillInput);
 
     ReactDOM.render(
-      <BaseAutoFill
+      <Autofill
         ref={ (c) => autoFill = c! }
         suggestedDisplayValue='hello'
       />,
@@ -110,7 +110,7 @@ describe('BaseAutoFill', () => {
     );
 
     expect(autoFill.value).toBe('hel');
-    expect(autoFill.inputElement.value).toBe('hel');
+    expect(autoFill.inputElement && autoFill.inputElement.value).toBe('hel');
 
     ReactTestUtils.Simulate.keyDown(autoFillInput, { keyCode: KeyCodes.left, which: KeyCodes.left });
 
@@ -118,10 +118,10 @@ describe('BaseAutoFill', () => {
 
     ReactTestUtils.Simulate.keyDown(autoFillInput, { keyCode: KeyCodes.up, which: KeyCodes.up });
     autoFillInput.value = 'hel';
-    ReactTestUtils.Simulate.change(autoFillInput);
+    ReactTestUtils.Simulate.input(autoFillInput);
 
     ReactDOM.render(
-      <BaseAutoFill
+      <Autofill
         ref={ (c) => autoFill = c! }
         suggestedDisplayValue='hello'
       />,
@@ -129,6 +129,6 @@ describe('BaseAutoFill', () => {
     );
 
     expect(autoFill.value).toBe('hel');
-    expect(autoFill.inputElement.value).toBe('hello');
+    expect(autoFill.inputElement && autoFill.inputElement.value).toBe('hello');
   });
 });
diff --git a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx
new file mode 100644
index 0000000000000..4e98a6cf270ee
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.tsx
@@ -0,0 +1,300 @@
+import * as React from 'react';
+import { IAutofillProps, IAutofill } from './Autofill.types';
+import {
+  BaseComponent,
+  KeyCodes,
+  autobind,
+  getNativeProps,
+  inputProperties,
+  createRef
+} from '../../Utilities';
+
+export interface IAutofillState {
+  displayValue?: string;
+}
+
+const SELECTION_FORWARD = 'forward';
+const SELECTION_BACKWARD = 'backward';
+
+export class Autofill extends BaseComponent<IAutofillProps, IAutofillState> implements IAutofill {
+
+  public static defaultProps = {
+    enableAutofillOnKeyPress: [KeyCodes.down, KeyCodes.up]
+  };
+
+  private _inputElement = createRef<HTMLInputElement>();
+  private _autoFillEnabled = true;
+  private _value: string;
+
+  constructor(props: IAutofillProps) {
+    super(props);
+    this._value = '';
+    this.state = {
+      displayValue: props.defaultVisibleValue || ''
+    };
+  }
+
+  public get cursorLocation(): number {
+    if (this._inputElement.value) {
+      const inputElement = this._inputElement.value;
+      if (inputElement.selectionDirection !== SELECTION_FORWARD) {
+        return inputElement.selectionEnd;
+      } else {
+        return inputElement.selectionStart;
+      }
+    } else {
+      return -1;
+    }
+  }
+
+  public get isValueSelected(): boolean {
+    return Boolean(this.inputElement && (this.inputElement.selectionStart !== this.inputElement.selectionEnd));
+  }
+
+  public get value(): string {
+    return this._value;
+  }
+
+  public get selectionStart(): number {
+    return this._inputElement.value ? this._inputElement.value.selectionStart : -1;
+  }
+
+  public get selectionEnd(): number {
+    return this._inputElement.value ? this._inputElement.value.selectionEnd : -1;
+  }
+
+  public get inputElement(): HTMLInputElement | null {
+    return this._inputElement.value;
+  }
+
+  public componentWillReceiveProps(nextProps: IAutofillProps) {
+    let newValue;
+
+    if (this.props.updateValueInWillReceiveProps) {
+      newValue = this.props.updateValueInWillReceiveProps();
+    }
+
+    newValue = this._getDisplayValue(newValue ? newValue : this._value, nextProps.suggestedDisplayValue);
+
+    if (typeof newValue === 'string') {
+      this.setState({ displayValue: newValue });
+    }
+  }
+
+  public componentDidUpdate() {
+    const value = this._value;
+    const {
+      suggestedDisplayValue,
+      shouldSelectFullInputValueInComponentDidUpdate
+    } = this.props;
+    let differenceIndex = 0;
+
+    if (this._autoFillEnabled && value && suggestedDisplayValue && this._doesTextStartWith(suggestedDisplayValue, value)) {
+      let shouldSelectFullRange = false;
+
+      if (shouldSelectFullInputValueInComponentDidUpdate) {
+        shouldSelectFullRange = shouldSelectFullInputValueInComponentDidUpdate();
+      }
+
+      if (shouldSelectFullRange && this._inputElement.value) {
+        this._inputElement.value.setSelectionRange(0, suggestedDisplayValue.length, SELECTION_BACKWARD);
+      } else {
+        while (differenceIndex < value.length && value[differenceIndex].toLocaleLowerCase() === suggestedDisplayValue[differenceIndex].toLocaleLowerCase()) {
+          differenceIndex++;
+        }
+        if (differenceIndex > 0 && this._inputElement.value) {
+          this._inputElement.value.setSelectionRange(differenceIndex, suggestedDisplayValue.length, SELECTION_BACKWARD);
+        }
+      }
+    }
+  }
+
+  public render() {
+    const {
+      displayValue
+    } = this.state;
+
+    const nativeProps = getNativeProps(this.props, inputProperties);
+    return (
+      <input
+        { ...nativeProps }
+        ref={ this._inputElement }
+        value={ displayValue }
+        autoCapitalize={ 'off' }
+        autoComplete={ 'off' }
+        onCompositionStart={ this._onCompositionStart }
+        onCompositionEnd={ this._onCompositionEnd }
+        onChange={ this._onChanged }
+        onInput={ this._onInputChanged }
+        onKeyDown={ this._onKeyDown }
+        onClick={ this.props.onClick ? this.props.onClick : this._onClick }
+        data-lpignore={ true }
+      />
+    );
+  }
+
+  public focus() {
+    this._inputElement.value && this._inputElement.value.focus();
+  }
+
+  public clear() {
+    this._autoFillEnabled = true;
+    this._updateValue('');
+    this._inputElement.value && this._inputElement.value.setSelectionRange(0, 0);
+  }
+
+  // Composition events are used when the character/text requires several keystrokes to be completed.
+  // Some examples of this are mobile text input and langauges like Japanese or Arabic.
+  // Find out more at https://developer.mozilla.org/en-US/docs/Web/Events/compositionstart
+  @autobind
+  private _onCompositionStart(ev: React.CompositionEvent<HTMLInputElement>) {
+    this._autoFillEnabled = false;
+  }
+
+  // Composition events are used when the character/text requires several keystrokes to be completed.
+  // Some examples of this are mobile text input and langauges like Japanese or Arabic.
+  // Find out more at https://developer.mozilla.org/en-US/docs/Web/Events/compositionstart
+  @autobind
+  private _onCompositionEnd(ev: React.CompositionEvent<HTMLInputElement>) {
+    const inputValue = this._getCurrentInputValue();
+    this._tryEnableAutofill(inputValue, this.value, false, true);
+    // Due to timing, this needs to be async, otherwise no text will be selected.
+    this._async.setTimeout(() => this._updateValue(inputValue), 0);
+  }
+
+  @autobind
+  private _onClick() {
+    if (this._value && this._value !== '' && this._autoFillEnabled) {
+      this._autoFillEnabled = false;
+    }
+  }
+
+  @autobind
+  private _onKeyDown(ev: React.KeyboardEvent<HTMLInputElement>) {
+    if (this.props.onKeyDown) {
+      this.props.onKeyDown(ev);
+    }
+
+    // If the event is actively being composed, then don't alert autofill.
+    // Right now typing does not have isComposing, once that has been fixed any should be removed.
+    if (!(ev.nativeEvent as any).isComposing) {
+      switch (ev.which) {
+        case KeyCodes.backspace:
+          this._autoFillEnabled = false;
+          break;
+        case KeyCodes.left:
+        case KeyCodes.right:
+          if (this._autoFillEnabled) {
+            this._value = this.state.displayValue!;
+            this._autoFillEnabled = false;
+          }
+          break;
+        default:
+          if (!this._autoFillEnabled) {
+            if (this.props.enableAutofillOnKeyPress!.indexOf(ev.which) !== -1) {
+              this._autoFillEnabled = true;
+            }
+          }
+          break;
+      }
+    }
+  }
+
+  @autobind
+  private _onInputChanged(ev: React.FormEvent<HTMLElement>) {
+    const value: string = this._getCurrentInputValue(ev);
+
+    // Right now typing does not have isComposing, once that has been fixed any should be removed.
+    this._tryEnableAutofill(value, this._value, (ev.nativeEvent as any).isComposing);
+    this._updateValue(value);
+  }
+
+  @autobind
+  private _onChanged(): void {
+    // Swallow this event, we don't care about it
+    // We must provide it because React PropTypes marks it as required, but onInput serves the correct purpose
+    return;
+  }
+
+  private _getCurrentInputValue(ev?: React.FormEvent<HTMLElement>): string {
+    if (ev && ev.target && (ev.target as any).value) {
+      return (ev.target as any).value;
+    } else if (this.inputElement && this.inputElement.value) {
+      return this.inputElement.value;
+    } else {
+      return '';
+    }
+  }
+
+  /**
+   * Attempts to enable autofill. Whether or not autofill is enabled depends on the input value,
+   * whether or not any text is selected, and only if the new input value is longer than the old input value.
+   * Autofill should never be set to true if the value is composing. Once compositionEnd is called, then
+   * it should be completed.
+   * See https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent for more information on composition.
+   * @param newValue
+   * @param oldValue
+   * @param isComposing if true then the text is actively being composed and it has not completed.
+   * @param isComposed if the text is a composed text value.
+   */
+  private _tryEnableAutofill(newValue: string, oldValue: string, isComposing?: boolean, isComposed?: boolean) {
+    if (!isComposing
+      && newValue
+      && this._inputElement.value
+      && this._inputElement.value.selectionStart === newValue.length
+      && !this._autoFillEnabled
+      && (newValue.length > oldValue.length || isComposed)) {
+      this._autoFillEnabled = true;
+    }
+  }
+
+  private _notifyInputChange(newValue: string) {
+    if (this.props.onInputValueChange) {
+      this.props.onInputValueChange(newValue);
+    }
+  }
+
+  /**
+   * Updates the current input value as well as getting a new display value.
+   * @param newValue The new value from the input
+   */
+  @autobind
+  private _updateValue(newValue: string) {
+    this._value = this.props.onInputChange ? this.props.onInputChange(newValue) : newValue;
+    this.setState({
+      displayValue: this._getDisplayValue(this._value, this.props.suggestedDisplayValue)
+    }, () => this._notifyInputChange(this._value));
+  }
+
+  /**
+   * Returns a string that should be used as the display value.
+   * It evaluates this based on whether or not the suggested value starts with the input value
+   * and whether or not autofill is enabled.
+   * @param inputValue the value that the input currently has.
+   * @param suggestedDisplayValue the possible full value
+   */
+  private _getDisplayValue(inputValue: string, suggestedDisplayValue?: string) {
+    let displayValue = inputValue;
+    if (suggestedDisplayValue
+      && inputValue
+      && this._doesTextStartWith(suggestedDisplayValue, displayValue)
+      && this._autoFillEnabled) {
+      displayValue = suggestedDisplayValue;
+    }
+    return displayValue;
+  }
+
+  private _doesTextStartWith(text: string, startWith: string) {
+    if (!text || !startWith) {
+      return false;
+    }
+    return text.toLocaleLowerCase().indexOf(startWith.toLocaleLowerCase()) === 0;
+  }
+}
+
+/**
+ *  Legacy, @deprecated, do not use.
+ */
+export class BaseAutoFill extends Autofill {
+
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Autofill/Autofill.types.ts b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.types.ts
new file mode 100644
index 0000000000000..e1d976c987d23
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Autofill/Autofill.types.ts
@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { Autofill } from './Autofill';
+import { KeyCodes } from '../../Utilities';
+export interface IAutofill {
+
+  /**
+   * The current index of the cursor in the input area. Returns -1 if the input element
+   * is not ready.
+   */
+  cursorLocation: number;
+  /**
+   * A boolean for whether or not there is a value selected in the input area.
+   */
+  isValueSelected: boolean;
+  /**
+   * The current text value that the user has entered.
+   */
+  value: string;
+  /**
+   * The current index of where the selection starts. Returns -1 if the input element
+   * is not ready.
+   */
+  selectionStart: number;
+  /**
+   * the current index of where the selection ends. Returns -1 if the input element
+   * is not ready.
+   */
+  selectionEnd: number;
+  /**
+   * The current input element.
+   */
+  inputElement: HTMLInputElement | null;
+  /**
+   * Focus the input element.
+   */
+  focus(): void;
+  /**
+   * Clear all text in the input. Sets value to '';
+   */
+  clear(): void;
+}
+
+export interface IAutofillProps extends
+  React.InputHTMLAttributes<HTMLInputElement | Autofill> {
+  /**
+   * Gets the compoonent ref.
+   */
+  componentRef?: (componentRef?: IAutofill) => void;
+
+  /**
+   * The suggested autofill value that will display.
+   */
+  suggestedDisplayValue?: string;
+
+  /**
+   * A callback for when the current input value changes.
+   */
+  onInputValueChange?: (newValue?: string) => void;
+
+  /**
+   * When the user uses left arrow, right arrow, clicks, or deletes text autofill is disabled
+   * Since the user has taken control. It is automatically reenabled when the user enters text and the
+   * cursor is at the end of the text in the input box. This specifies other key presses that will reenabled
+   * autofill.
+   * @default [KeyCodes.down, KeyCodes.up]
+   */
+  enableAutofillOnKeyPress?: KeyCodes[];
+
+  /**
+   * the default value to be visible
+   */
+  defaultVisibleValue?: string;
+
+  /**
+   * Handler for checking and updating the value if needed
+   *  in componentWillReceiveProps
+   *
+   * @param {IAutofillProps} defaultVisibleValue - the defaultVisibleValue that got passed
+   *  in to the auto fill's componentWillReceiveProps
+   * @returns {string} - the updated value to set, if needed
+   */
+  updateValueInWillReceiveProps?: () => string | null;
+
+  /**
+   * Handler for checking if the full value of the input should
+   * be seleced in componentDidUpdate
+   *
+   * @returns {boolean} - should the full value of the input be selected?
+   */
+  shouldSelectFullInputValueInComponentDidUpdate?: () => boolean;
+
+  /**
+   * A callback used to modify the input string.
+   */
+  onInputChange?: (value: string) => string;
+}
+
+/**
+ * @deprecated do not use, will be removed in 6.0
+*/
+export interface IBaseAutoFill extends IAutofill {
+
+}
+
+/**
+ * @deprecated do not use, will be removed in 6.0
+*/
+export interface IBaseAutoFillProps extends IAutofillProps {
+
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Autofill/index.ts b/packages/office-ui-fabric-react/src/components/Autofill/index.ts
new file mode 100644
index 0000000000000..1fc84edb0d62f
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Autofill/index.ts
@@ -0,0 +1,2 @@
+export * from './Autofill';
+export * from './Autofill.types';
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx
index d2ae7c88e4e24..843ca2f525553 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.test.tsx
@@ -49,14 +49,14 @@ describe('Breadcrumb', () => {
       { text: 'TestText', key: 'TestKey', onClick: clickCallback }
     ];
 
-    let component = ReactTestUtils.renderIntoDocument<Breadcrumb>(
+    const component = ReactTestUtils.renderIntoDocument<Breadcrumb>(
       <Breadcrumb
         items={ items }
       />
     );
 
-    let renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
-    let itemLink = renderedDOM.querySelector('.ms-Breadcrumb-itemLink');
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const itemLink = renderedDOM.querySelector('.ms-Breadcrumb-itemLink');
 
     ReactTestUtils.Simulate.click(itemLink!);
     expect(callbackValue).toEqual('TestKey');
@@ -71,15 +71,15 @@ describe('Breadcrumb', () => {
       { text: 'TestText4', key: 'TestKey4' }
     ];
 
-    let component = ReactTestUtils.renderIntoDocument<Breadcrumb>(
+    const component = ReactTestUtils.renderIntoDocument<Breadcrumb>(
       <Breadcrumb
         items={ items }
         maxDisplayedItems={ 2 }
       />
     );
 
-    let renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
-    let itemLink = renderedDOM.querySelectorAll('.ms-Breadcrumb-item');
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const itemLink = renderedDOM.querySelectorAll('.ms-Breadcrumb-item');
 
     expect(itemLink[0].textContent).toEqual('TestText3');
   });
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx
index 1b3b682702215..5e24eca4a8a32 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.tsx
@@ -56,7 +56,7 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
   @autobind
   private _onReduceData(data: IBreadCrumbData): IBreadCrumbData | undefined {
     let { renderedItems, renderedOverflowItems } = data;
-    let movedItem = renderedItems[0];
+    const movedItem = renderedItems[0];
     renderedItems = renderedItems.slice(1);
 
     renderedOverflowItems = [...renderedOverflowItems, movedItem];
@@ -68,10 +68,10 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
 
   @autobind
   private _onRenderBreadcrumb(data: IBreadCrumbData) {
-    let { className, ariaLabel, onRenderItem = this._onRenderItem } = data.props;
-    let { renderedOverflowItems, renderedItems } = data;
+    const { className, ariaLabel, onRenderItem = this._onRenderItem, overflowAriaLabel } = data.props;
+    const { renderedOverflowItems, renderedItems } = data;
 
-    let contextualItems = renderedOverflowItems.map(
+    const contextualItems = renderedOverflowItems.map(
       (item, index) => ({
         name: item.text,
         key: item.key,
@@ -83,34 +83,34 @@ export class Breadcrumb extends BaseComponent<IBreadcrumbProps, any> {
     return (
       <div
         className={ css('ms-Breadcrumb', className, styles.root) }
-        ref='renderingArea'
         role='navigation'
         aria-label={ ariaLabel }
       >
         <FocusZone direction={ FocusZoneDirection.horizontal } >
           <ol className={ css('ms-Breadcrumb-list', styles.list) }>
             { renderedOverflowItems && renderedOverflowItems.length !== 0 && (
-              <li className={ css('ms-Breadcrumb-overflow', styles.overflow) } key={ OVERFLOW_KEY } ref={ OVERFLOW_KEY }>
+              <li className={ css('ms-Breadcrumb-overflow', styles.overflow) } key={ OVERFLOW_KEY }>
                 <IconButton
                   className={ css('ms-Breadcrumb-overflowButton', styles.overflowButton) }
                   iconProps={ { iconName: 'More' } }
                   role='button'
                   aria-haspopup='true'
+                  ariaLabel={ overflowAriaLabel }
                   onRenderMenuIcon={ nullFunction }
                   menuProps={ {
                     items: contextualItems,
                     directionalHint: DirectionalHint.bottomLeftEdge
                   } }
                 />
-                { Icon({
-                  className: css('ms-Breadcrumb-chevron', styles.chevron),
-                  iconName: getRTL() ? 'ChevronLeft' : 'ChevronRight'
-                }) }
+                { <Icon
+                  className={ css('ms-Breadcrumb-chevron', styles.chevron) }
+                  iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
+                /> }
               </li>
             ) }
             { renderedItems.map(
               (item, index) => (
-                <li className={ css('ms-Breadcrumb-listItem', styles.listItem) } key={ item.key || String(index) } ref={ item.key || String(index) }>
+                <li className={ css('ms-Breadcrumb-listItem', styles.listItem) } key={ item.key || String(index) }>
                   { onRenderItem(item, this._onRenderItem) }
                   <Icon
                     className={ css('ms-Breadcrumb-chevron', styles.chevron) }
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.types.ts b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.types.ts
index 1af740dade522..8f86b53001adc 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.types.ts
@@ -44,6 +44,11 @@ export interface IBreadcrumbProps extends React.Props<Breadcrumb> {
    * Aria label to place on the navigation landmark for breadcrumb
    */
   ariaLabel?: string;
+
+  /**
+   * Optional name to use for aria label on overflow button.
+   */
+  overflowAriaLabel?: string;
 }
 
 export interface IBreadcrumbItem {
@@ -72,4 +77,4 @@ export interface IBreadcrumbItem {
    * If this breadcrumb item is the item the user is currently on, if set to true, aria-current="page" will be applied to this breadcrumb link
    */
   isCurrentItem?: boolean;
-}
\ No newline at end of file
+}
diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
index 30ff42150359c..bb6e270d861e7 100644
--- a/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/__snapshots__/Breadcrumb.test.tsx.snap
@@ -2,10 +2,20 @@
 
 exports[`Breadcrumb renders breadcumb correctly 1`] = `
 <div
-  className="ms-ResizeGroup"
+  className=
+      ms-ResizeGroup
+      {
+        display: block;
+        position: relative;
+      }
 >
   <div
-    className=""
+    style={
+      Object {
+        "position": "fixed",
+        "visibility": "hidden",
+      }
+    }
   >
     <div
       aria-label={undefined}
@@ -44,7 +54,6 @@ exports[`Breadcrumb renders breadcumb correctly 1`] = `
             </span>
             <i
               aria-hidden={true}
-              aria-label={undefined}
               className=
                   ms-Breadcrumb-chevron
                   {
@@ -73,7 +82,6 @@ exports[`Breadcrumb renders breadcumb correctly 1`] = `
             </span>
             <i
               aria-hidden={true}
-              aria-label={undefined}
               className=
                   ms-Breadcrumb-chevron
                   {
@@ -102,7 +110,6 @@ exports[`Breadcrumb renders breadcumb correctly 1`] = `
             </span>
             <i
               aria-hidden={true}
-              aria-label={undefined}
               className=
                   ms-Breadcrumb-chevron
                   {
@@ -131,7 +138,6 @@ exports[`Breadcrumb renders breadcumb correctly 1`] = `
             </span>
             <i
               aria-hidden={true}
-              aria-label={undefined}
               className=
                   ms-Breadcrumb-chevron
                   {
@@ -150,10 +156,20 @@ exports[`Breadcrumb renders breadcumb correctly 1`] = `
 
 exports[`Breadcrumb renders breadcumb correctly 2`] = `
 <div
-  className="ms-ResizeGroup"
+  className=
+      ms-ResizeGroup
+      {
+        display: block;
+        position: relative;
+      }
 >
   <div
-    className=""
+    style={
+      Object {
+        "position": "fixed",
+        "visibility": "hidden",
+      }
+    }
   >
     <div
       aria-label={undefined}
@@ -186,8 +202,8 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = `
               aria-pressed={undefined}
               className=
                   ms-Button
-                  ms-Button--icon
                   ms-Breadcrumb-overflowButton
+                  ms-Button--icon
                   {
                     -moz-osx-font-smoothing: grayscale;
                     -webkit-font-smoothing: antialiased;
@@ -197,7 +213,7 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = `
                     box-sizing: border-box;
                     cursor: pointer;
                     display: inline-block;
-                    font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                    font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                     font-size: 14px;
                     font-weight: 400;
                     height: 32px;
@@ -253,7 +269,6 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = `
               >
                 <i
                   aria-hidden={true}
-                  aria-label={undefined}
                   className=
                       ms-Button-icon
                       {
@@ -278,7 +293,6 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = `
             </button>
             <i
               aria-hidden={true}
-              aria-label={undefined}
               className=
                   ms-Breadcrumb-chevron
                   {
@@ -307,7 +321,6 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = `
             </span>
             <i
               aria-hidden={true}
-              aria-label={undefined}
               className=
                   ms-Breadcrumb-chevron
                   {
@@ -336,7 +349,6 @@ exports[`Breadcrumb renders breadcumb correctly 2`] = `
             </span>
             <i
               aria-hidden={true}
-              aria-label={undefined}
               className=
                   ms-Breadcrumb-chevron
                   {
diff --git a/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.styles.ts b/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.styles.ts
index 406b8c933d9c7..3ea21f35580ff 100644
--- a/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.styles.ts
@@ -15,8 +15,8 @@ export const getStyles = memoizeFunction((
   theme: ITheme,
   customStyles?: IButtonStyles
 ): IButtonStyles => {
-  let baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);
-  let actionButtonStyles: IButtonStyles = {
+  const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);
+  const actionButtonStyles: IButtonStyles = {
     root: {
       padding: DEFAULT_PADDING,
       height: DEFAULT_BUTTON_HEIGHT,
diff --git a/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.tsx b/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.tsx
index 491b6ece22e84..c99913121c977 100644
--- a/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/ActionButton/ActionButton.tsx
@@ -13,7 +13,7 @@ export class ActionButton extends BaseComponent<IButtonProps, {}> {
   protected _shouldUpdateComponentRef = false;
 
   public render() {
-    let { styles, theme } = this.props;
+    const { styles, theme } = this.props;
 
     return (
       <BaseButton
diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.classNames.ts b/packages/office-ui-fabric-react/src/components/Button/BaseButton.classNames.ts
index 7d1ad3759b2be..bd2dcc9e56bbe 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.classNames.ts
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.classNames.ts
@@ -1,7 +1,6 @@
 import { memoizeFunction } from '../../Utilities';
 import { mergeStyleSets } from '../../Styling';
 import { IButtonStyles } from './Button.types';
-import { getStyles } from './BaseButton.styles';
 
 export interface IButtonClassNames {
   root?: string;
@@ -30,8 +29,8 @@ export const getBaseButtonClassNames = memoizeFunction((
     root: [
       'ms-Button',
       styles.root,
-      variantClassName,
       className,
+      variantClassName,
       checked && [
         'is-checked',
         styles.rootChecked
diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.styles.ts b/packages/office-ui-fabric-react/src/components/Button/BaseButton.styles.ts
index c2116f22bd57f..0d8c57082c3a3 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.styles.ts
@@ -30,11 +30,11 @@ const iconStyle = {
 export const getStyles = memoizeFunction((
   theme: ITheme
 ): IButtonStyles => {
-  let { semanticColors } = theme;
+  const { semanticColors } = theme;
 
-  let border = semanticColors.buttonBorder;
-  let disabledBackground = semanticColors.disabledBackground;
-  let disabledText = semanticColors.disabledText;
+  const border = semanticColors.buttonBorder;
+  const disabledBackground = semanticColors.disabledBackground;
+  const disabledText = semanticColors.disabledText;
 
   return {
     root: [
diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
index 0c75e3084b169..e1f346217eaf1 100644
--- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -8,9 +8,10 @@ import {
   buttonProperties,
   getId,
   getNativeProps,
-  KeyCodes
+  KeyCodes,
+  createRef
 } from '../../Utilities';
-import { Icon, IIconProps } from '../../Icon';
+import { Icon } from '../../Icon';
 import { DirectionalHint } from '../../common/DirectionalHint';
 import { ContextualMenu, IContextualMenuProps } from '../../ContextualMenu';
 import { IButtonProps, IButton } from './Button.types';
@@ -43,8 +44,8 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     split: false,
   };
 
-  private _buttonElement: HTMLElement;
-  private _splitButtonContainer: HTMLElement;
+  private _buttonElement = createRef<HTMLElement>();
+  private _splitButtonContainer = createRef<HTMLDivElement>();
   private _labelId: string;
   private _descriptionId: string;
   private _ariaDescriptionId: string;
@@ -88,11 +89,11 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       variantClassName,
       theme,
       getClassNames
-         } = this.props;
+    } = this.props;
 
-    let { menuProps } = this.state;
+    const { menuProps } = this.state;
     // Button is disabled if the whole button (in case of splitbutton is disabled) or if the primary action is disabled
-    let isPrimaryButtonDisabled = (disabled || primaryDisabled);
+    const isPrimaryButtonDisabled = (disabled || primaryDisabled);
 
     this._classNames = getClassNames ? getClassNames(
       theme!,
@@ -102,14 +103,14 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       menuIconProps && menuIconProps.className,
       isPrimaryButtonDisabled!,
       checked!,
-      !!this.state.menuProps,
+      !!menuProps,
       this.props.split) : getBaseButtonClassNames(styles!, className!,
         variantClassName!,
         iconProps && iconProps.className,
         menuIconProps && menuIconProps.className,
         isPrimaryButtonDisabled!,
         checked!,
-        !!this.state.menuProps,
+        !!menuProps,
         this.props.split);
 
     const { _ariaDescriptionId, _labelId, _descriptionId } = this;
@@ -124,7 +125,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
         this.props),
       renderAsAnchor ? anchorProperties : buttonProperties,
       [
-        'disabled' // Let disabled buttons be focused and styled as disabled.
+        'disabled' // let disabled buttons be focused and styled as disabled.
       ]);
 
     // Check for ariaDescription, description or aria-describedby in the native props to determine source of aria-describedby
@@ -158,7 +159,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       nativeProps,
       {
         className: this._classNames.root,
-        ref: this._resolveRef('_buttonElement'),
+        ref: this._buttonElement,
         'disabled': isPrimaryButtonDisabled,
         'aria-label': ariaLabel,
         'aria-labelledby': ariaLabelledBy,
@@ -200,8 +201,8 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
   }
 
   public focus(): void {
-    if (this._buttonElement) {
-      this._buttonElement.focus();
+    if (this._buttonElement.value) {
+      this._buttonElement.value.focus();
     }
   }
 
@@ -210,9 +211,9 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
   }
 
   private _onRenderContent(tag: any, buttonProps: IButtonProps): JSX.Element {
-    let props = this.props;
-    let Tag = tag;
-    let {
+    const props = this.props;
+    const Tag = tag;
+    const {
       menuIconProps,
       menuProps,
       onRenderIcon = this._onRenderIcon,
@@ -223,7 +224,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
     } = props;
 
     const Content = (
-      <Tag {...buttonProps }>
+      <Tag { ...buttonProps }>
         <div className={ this._classNames.flexContainer } >
           { onRenderIcon(props, this._onRenderIcon) }
           { this._onRenderTextContents() }
@@ -249,22 +250,24 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
 
   @autobind
   private _onRenderIcon(buttonProps?: IButtonProps, defaultRender?: IRenderFunction<IButtonProps>): JSX.Element | null {
-    let {
+    const {
       iconProps
-       } = this.props;
+    } = this.props;
 
     if (iconProps) {
-      return Icon({
-        ...iconProps,
-        className: this._classNames.icon
-      });
+      return (
+        <Icon
+          { ...iconProps }
+          className={ this._classNames.icon }
+        />
+      );
     }
     return null;
   }
 
   @autobind
   private _onRenderTextContents(): JSX.Element | (JSX.Element | null)[] {
-    let {
+    const {
       text,
       children,
       description,
@@ -291,9 +294,11 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
   @autobind
   private _onRenderText(): JSX.Element | null {
     let {
-      children,
       text
-            } = this.props;
+    } = this.props;
+    const {
+      children
+    } = this.props;
 
     // For backwards compat, we should continue to take in the text content from children.
     if (text === undefined && typeof (children) === 'string') {
@@ -331,8 +336,8 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
   @autobind
   private _onRenderDescription(props: IButtonProps) {
     const {
-    description
-    } = this.props;
+      description
+    } = props;
 
     // ms-Button-description is only shown when the button type is compound.
     // In other cases it will not be displayed.
@@ -366,7 +371,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
 
   @autobind
   private _onRenderMenuIcon(props: IButtonProps): JSX.Element | null {
-    let {
+    const {
       menuIconProps
     } = this.props;
 
@@ -389,9 +394,9 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       <ContextualMenu
         id={ this._labelId + '-menu' }
         directionalHint={ DirectionalHint.bottomLeftEdge }
-        {...menuProps}
+        { ...menuProps }
         className={ 'ms-BaseButton-menuhost ' + menuProps.className }
-        target={ this._isSplitButton ? this._splitButtonContainer : this._buttonElement }
+        target={ this._isSplitButton ? this._splitButtonContainer.value : this._buttonElement.value }
         labelElementId={ this._labelId }
         onDismiss={ onDismiss }
       />
@@ -406,7 +411,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
   @autobind
   private _onToggleMenu(): void {
     const { menuProps } = this.props;
-    let currentMenuProps = this.state.menuProps;
+    const currentMenuProps = this.state.menuProps;
     this.setState({ menuProps: currentMenuProps ? null : menuProps });
   }
 
@@ -415,7 +420,9 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       styles = {},
       disabled,
       checked,
-      getSplitButtonClassNames
+      getSplitButtonClassNames,
+      onClick,
+      primaryDisabled
     } = this.props;
 
     const classNames = getSplitButtonClassNames ? getSplitButtonClassNames(
@@ -427,6 +434,8 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
         !!this.state.menuProps,
         !!checked);
 
+    buttonProps = { ...buttonProps, onClick: undefined };
+
     return (
       <div
         role={ 'button' }
@@ -438,7 +447,9 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
         aria-describedby={ buttonProps.ariaDescription }
         className={ classNames && classNames.splitButtonContainer }
         onKeyDown={ this._onMenuKeyDown }
-        ref={ this._resolveRef('_splitButtonContainer') }
+        ref={ this._splitButtonContainer }
+        data-is-focusable={ true }
+        onClick={ !disabled && !primaryDisabled ? onClick : undefined }
       >
         <span
           style={ { 'display': 'flex' } }
@@ -461,6 +472,9 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
   private _onRenderSplitButtonMenuButton(classNames: ISplitButtonClassNames | undefined): JSX.Element {
     let {
       menuIconProps,
+    } = this.props;
+
+    const {
       splitButtonAriaLabel
     } = this.props;
 
@@ -470,7 +484,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       };
     }
 
-    let splitButtonProps = {
+    const splitButtonProps = {
       'styles': classNames,
       'checked': this.props.checked,
       'disabled': this.props.disabled,
@@ -482,7 +496,7 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       'aria-expanded': this._isExpanded
     };
 
-    return <BaseButton {...splitButtonProps} onMouseDown={ this._onMouseDown } />;
+    return <BaseButton { ...splitButtonProps } onMouseDown={ this._onMouseDown } />;
 
   }
 
@@ -496,11 +510,20 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
   }
 
   @autobind
-  private _onMenuKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
-    if (ev.which === KeyCodes.down) {
-      let { onMenuClick } = this.props;
-      onMenuClick && onMenuClick(ev, this);
-      !ev.defaultPrevented && this._onToggleMenu();
+  private _onMenuKeyDown(ev: React.KeyboardEvent<HTMLDivElement | HTMLAnchorElement | HTMLButtonElement>) {
+    if (this.props.onKeyDown) {
+      this.props.onKeyDown(ev);
+    }
+
+    const { onMenuClick } = this.props;
+    if (onMenuClick) {
+      onMenuClick(ev, this);
+    }
+
+    if (!ev.defaultPrevented &&
+      this.props.menuTriggerKeyCode !== null &&
+      ev.which === (this.props.menuTriggerKeyCode === undefined ? KeyCodes.down : this.props.menuTriggerKeyCode)) {
+      this._onToggleMenu();
       ev.preventDefault();
       ev.stopPropagation();
     }
@@ -508,10 +531,15 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
 
   @autobind
   private _onMenuClick(ev: React.MouseEvent<HTMLAnchorElement>) {
-    let { onMenuClick } = this.props;
-    onMenuClick && onMenuClick(ev, this);
-    !ev.defaultPrevented && this._onToggleMenu();
-    ev.preventDefault();
-    ev.stopPropagation();
+    const { onMenuClick } = this.props;
+    if (onMenuClick) {
+      onMenuClick(ev, this);
+    }
+
+    if (!ev.defaultPrevented) {
+      this._onToggleMenu();
+      ev.preventDefault();
+      ev.stopPropagation();
+    }
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Button/Button.test.tsx b/packages/office-ui-fabric-react/src/components/Button/Button.test.tsx
index f865e1a6c8364..df1c3edab4bbb 100644
--- a/packages/office-ui-fabric-react/src/components/Button/Button.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/Button.test.tsx
@@ -19,13 +19,13 @@ const alertClicked = (): void => { /*noop*/ };
 describe('Button', () => {
   it('renders DefaultButton correctly', () => {
     const component = renderer.create(<DefaultButton text='Button' />);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders ActionButton correctly', () => {
     const component = renderer.create(<ActionButton>Button</ActionButton>);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
@@ -49,7 +49,7 @@ describe('Button', () => {
           ]
         } }
       />);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
@@ -58,7 +58,7 @@ describe('Button', () => {
       <CompoundButton description='You can create a new account here.'>
         Create account
     </CompoundButton>);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
@@ -69,7 +69,7 @@ describe('Button', () => {
         title='Emoji'
         ariaLabel='Emoji'
       />);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
@@ -89,7 +89,7 @@ describe('Button', () => {
     });
 
     it('can render with an onClick.', () => {
-      let onClick: () => null = () => null;
+      const onClick: () => null = () => null;
 
       const button = ReactTestUtils.renderIntoDocument<any>(
         <DefaultButton onClick={ onClick }>Hello</DefaultButton>
@@ -263,6 +263,71 @@ describe('Button', () => {
       expect(renderedDOM.tagName).not.toEqual('DIV');
     });
 
+    it('Providing onKeyDown and menuProps still fires provided onKeyDown', () => {
+      const keyDownSpy = jest.fn();
+
+      const button = ReactTestUtils.renderIntoDocument<any>(
+        <DefaultButton
+          data-automation-id='test'
+          text='Create account'
+          onKeyDown={ keyDownSpy }
+          menuProps={ {
+            items: [
+              {
+                key: 'emailMessage',
+                name: 'Email message',
+                icon: 'Mail'
+              },
+              {
+                key: 'calendarEvent',
+                name: 'Calendar event',
+                icon: 'Calendar'
+              }
+            ]
+          } }
+        />
+      );
+      const menuButtonDOM = ReactDOM.findDOMNode(button as React.ReactInstance);
+
+      ReactTestUtils.Simulate.keyDown(menuButtonDOM, { which: KeyCodes.enter });
+
+      expect(keyDownSpy).toHaveBeenCalled();
+    });
+
+    it('Providing onKeyDown, menuProps and setting splitButton to true fires provided onKeyDown on both buttons', () => {
+      const keyDownSpy = jest.fn();
+
+      const button = ReactTestUtils.renderIntoDocument<any>(
+        <DefaultButton
+          data-automation-id='test'
+          text='Create account'
+          onKeyDown={ keyDownSpy }
+          split={ true }
+          onClick={ alertClicked }
+          menuProps={ {
+            items: [
+              {
+                key: 'emailMessage',
+                name: 'Email message',
+                icon: 'Mail'
+              },
+              {
+                key: 'calendarEvent',
+                name: 'Calendar event',
+                icon: 'Calendar'
+              }
+            ]
+          } }
+        />
+      );
+      const renderedDOM = ReactDOM.findDOMNode(button as React.ReactInstance);
+      const primaryButtonDOM: HTMLDivElement = renderedDOM.getElementsByTagName('div')[0] as HTMLDivElement;
+
+      ReactTestUtils.Simulate.keyDown(primaryButtonDOM, { which: KeyCodes.enter });
+
+      expect(keyDownSpy).toHaveBeenCalled();
+    });
+
     it('Providing onClick, menuProps and setting splitButton to true renders a SplitButton', () => {
       const button = ReactTestUtils.renderIntoDocument<any>(
         <DefaultButton
@@ -319,6 +384,74 @@ describe('Button', () => {
       expect(renderedDOM.getAttribute('aria-expanded')).toEqual('true');
     });
 
+    it('If menu trigger is disabled, pressing down does not trigger menu', () => {
+      const button = ReactTestUtils.renderIntoDocument<any>(
+        <DefaultButton
+          data-automation-id='test'
+          text='Create account'
+          menuTriggerKeyCode={ null }
+          menuProps={ {
+            items: [
+              {
+                key: 'emailMessage',
+                name: 'Email message',
+                icon: 'Mail'
+              },
+              {
+                key: 'calendarEvent',
+                name: 'Calendar event',
+                icon: 'Calendar'
+              }
+            ]
+          } }
+        />
+      );
+      const menuButtonDOM = ReactDOM.findDOMNode(button as React.ReactInstance);
+
+      ReactTestUtils.Simulate.keyDown(menuButtonDOM,
+        {
+          which: KeyCodes.down
+        });
+      expect(menuButtonDOM.getAttribute('aria-expanded')).toEqual('false');
+    });
+
+    it('If menu trigger is specefied, default key is overridden', () => {
+      const button = ReactTestUtils.renderIntoDocument<any>(
+        <DefaultButton
+          data-automation-id='test'
+          text='Create account'
+          menuTriggerKeyCode={ KeyCodes.right }
+          menuProps={ {
+            items: [
+              {
+                key: 'emailMessage',
+                name: 'Email message',
+                icon: 'Mail'
+              },
+              {
+                key: 'calendarEvent',
+                name: 'Calendar event',
+                icon: 'Calendar'
+              }
+            ]
+          } }
+        />
+      );
+      const menuButtonDOM = ReactDOM.findDOMNode(button as React.ReactInstance);
+
+      ReactTestUtils.Simulate.keyDown(menuButtonDOM,
+        {
+          which: KeyCodes.down
+        });
+      expect(menuButtonDOM.getAttribute('aria-expanded')).toEqual('false');
+
+      ReactTestUtils.Simulate.keyDown(menuButtonDOM,
+        {
+          which: KeyCodes.right
+        });
+      expect(menuButtonDOM.getAttribute('aria-expanded')).toEqual('true');
+    });
+
     describe('Response to click event', () => {
       let didClick = false;
       const setTrue = (): void => {
diff --git a/packages/office-ui-fabric-react/src/components/Button/Button.types.ts b/packages/office-ui-fabric-react/src/components/Button/Button.types.ts
index f8fa11f8af393..223f1db8cd110 100644
--- a/packages/office-ui-fabric-react/src/components/Button/Button.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Button/Button.types.ts
@@ -3,7 +3,7 @@ import { BaseButton } from './BaseButton';
 import { Button } from './Button';
 import { IButtonClassNames } from './BaseButton.classNames';
 import { ISplitButtonClassNames } from './SplitButton/SplitButton.classNames';
-import { IRenderFunction } from '../../Utilities';
+import { IRenderFunction, KeyCodes } from '../../Utilities';
 import { IContextualMenuProps } from '../../ContextualMenu';
 import { IIconProps } from '../../Icon';
 import { IStyle, ITheme } from '../../Styling';
@@ -20,7 +20,7 @@ export interface IButton {
   dismissMenu: () => void;
 }
 
-export interface IButtonProps extends React.AllHTMLAttributes<HTMLAnchorElement | HTMLButtonElement | BaseButton | Button> {
+export interface IButtonProps extends React.AllHTMLAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLDivElement | BaseButton | Button> {
   /**
    * Optional callback to access the IButton interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
@@ -223,6 +223,12 @@ export interface IButtonProps extends React.AllHTMLAttributes<HTMLAnchorElement
   getSplitButtonClassNames?: (disabled: boolean,
     expanded: boolean,
     checked: boolean) => ISplitButtonClassNames;
+
+  /**
+  * Provides a custom KeyCode that can be used to open the button menu.
+  * The default KeyCode is the down arrow. A value of null can be provided to disable the key codes for opening the button menu.
+  */
+  menuTriggerKeyCode?: KeyCodes | null;
 }
 
 export enum ElementType {
diff --git a/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx b/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx
index ee0ef8aa003cf..37e2643a4a00c 100644
--- a/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/ButtonPage.tsx
@@ -7,7 +7,6 @@ import {
 } from '@uifabric/example-app-base';
 import { ButtonStatus } from './Button.checklist';
 import { ButtonDefaultExample } from './examples/Button.Default.Example';
-import { ButtonCommandExample } from './examples/Button.Command.Example';
 import { ButtonContextualMenuExample } from './examples/Button.ContextualMenu.Example';
 import { ButtonCompoundExample } from './examples/Button.Compound.Example';
 import { ButtonActionExample } from './examples/Button.Action.Example';
@@ -20,7 +19,6 @@ import { ButtonSplitExample, ButtonSplitCustomExample } from './examples/Button.
 import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
 import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
 import { Link } from '../../Link';
-import './examples/Button.Basic.Example.scss';
 import * as exampleStylesImport from '../../common/_exampleStyles.scss';
 const exampleStyles: any = exampleStylesImport;
 
@@ -127,15 +125,14 @@ export class ButtonPage extends React.Component<IComponentDemoPageProps, IButton
             </ExampleCard>
           </div>
         }
+        allowNativeProps={ true }
+        nativePropsElement={ ['a', 'button'] }
         propertiesTables={
-          <div>
-            <PropertiesTableSet
-              sources={ [
-                require<string>('!raw-loader!office-ui-fabric-react/src/components/Button/Button.types.ts')
-              ] }
-            />
-            <p>Besides the above properties, the <code>Button</code> component accepts all properties that the React <code>button</code> and <code>a</code> components accept.</p>
-          </div>
+          <PropertiesTableSet
+            sources={ [
+              require<string>('!raw-loader!office-ui-fabric-react/src/components/Button/Button.types.ts')
+            ] }
+          />
         }
         overview={
           <div>
@@ -179,7 +176,7 @@ export class ButtonPage extends React.Component<IComponentDemoPageProps, IButton
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...ButtonStatus}
+            { ...ButtonStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/Button/ButtonThemes.ts b/packages/office-ui-fabric-react/src/components/Button/ButtonThemes.ts
index 808bcfd3a1966..aa0fa868ef6a4 100644
--- a/packages/office-ui-fabric-react/src/components/Button/ButtonThemes.ts
+++ b/packages/office-ui-fabric-react/src/components/Button/ButtonThemes.ts
@@ -2,17 +2,16 @@ import { IButtonStyles } from './Button.types';
 import { ITheme, HighContrastSelector } from '../../Styling';
 
 export function standardStyles(theme: ITheme): IButtonStyles {
-  let s = theme.semanticColors;
+  const s = theme.semanticColors;
 
-  let buttonBackground = s.buttonBackground;
-  let buttonBackgroundChecked = s.buttonBackgroundChecked;
-  let buttonBackgroundHovered = s.buttonBackgroundHovered;
-  let buttonBackgroundCheckedHovered = s.buttonBackgroundCheckedHovered;
+  const buttonBackground = s.buttonBackground;
+  const buttonBackgroundChecked = s.buttonBackgroundChecked;
+  const buttonBackgroundHovered = s.buttonBackgroundHovered;
 
-  let buttonText = s.buttonText;
-  let buttonTextHovered = s.buttonTextHovered;
-  let buttonTextChecked = s.buttonTextChecked;
-  let buttonTextCheckedHovered = s.buttonTextCheckedHovered;
+  const buttonText = s.buttonText;
+  const buttonTextHovered = s.buttonTextHovered;
+  const buttonTextChecked = s.buttonTextChecked;
+  const buttonTextCheckedHovered = s.buttonTextCheckedHovered;
 
   return {
     root: {
diff --git a/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts b/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts
index 6a8f5856c1d60..d76227886d637 100644
--- a/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.styles.ts
@@ -17,9 +17,9 @@ export const getStyles = memoizeFunction((
   focusInset?: string,
   focusColor?: string
 ): IButtonStyles => {
-  let baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);
-  let baseSplitButtonStyles: IButtonStyles = getSplitButtonStyles(theme);
-  let commandButtonStyles: IButtonStyles = {
+  const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);
+  const baseSplitButtonStyles: IButtonStyles = getSplitButtonStyles(theme);
+  const commandButtonStyles: IButtonStyles = {
     root: {
       minWidth: '40px',
       backgroundColor: theme.palette.neutralLighter,
diff --git a/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.tsx b/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.tsx
index dbd000543dd3a..c5b55c2678e0d 100644
--- a/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/CommandBarButton/CommandBarButton.tsx
@@ -12,7 +12,7 @@ export class CommandBarButton extends BaseComponent<IButtonProps, {}> {
   protected _shouldUpdateComponentRef = false;
 
   public render() {
-    let { styles, theme } = this.props;
+    const { styles, theme } = this.props;
 
     return (
       <BaseButton
diff --git a/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.styles.ts b/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.styles.ts
index 7db84da2cdd90..2722551167fe5 100644
--- a/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.styles.ts
@@ -22,9 +22,9 @@ export const getStyles = memoizeFunction((
   customStyles?: IButtonStyles,
   primary?: boolean
 ): IButtonStyles => {
-  let baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);
-  let splitButtonStyles: IButtonStyles = getSplitButtonStyles(theme);
-  let compoundButtonStyles: IButtonStyles = {
+  const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);
+  const splitButtonStyles: IButtonStyles = getSplitButtonStyles(theme);
+  const compoundButtonStyles: IButtonStyles = {
     root: {
       maxWidth: '280px',
       minHeight: '72px',
@@ -66,7 +66,7 @@ export const getStyles = memoizeFunction((
 
   };
 
-  let standardCompoundTheme: IButtonStyles = {
+  const standardCompoundTheme: IButtonStyles = {
 
     description: {
       color: theme.palette.neutralSecondary,
@@ -89,7 +89,7 @@ export const getStyles = memoizeFunction((
     }
   };
 
-  let primaryCompoundTheme: IButtonStyles = {
+  const primaryCompoundTheme: IButtonStyles = {
 
     description: {
       color: theme.palette.white,
diff --git a/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx b/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx
index 8b44d9f464dff..96cd9e73660a7 100644
--- a/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/CompoundButton/CompoundButton.tsx
@@ -12,7 +12,7 @@ export class CompoundButton extends BaseComponent<IButtonProps, {}> {
   protected _shouldUpdateComponentRef = false;
 
   public render() {
-    let { primary = false, styles, theme } = this.props;
+    const { primary = false, styles, theme } = this.props;
     return (
       <BaseButton
         { ...this.props }
diff --git a/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.styles.ts b/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.styles.ts
index a7096313aa56d..c8880bba06e0f 100644
--- a/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Button/DefaultButton/DefaultButton.styles.ts
@@ -25,9 +25,9 @@ export const getStyles = memoizeFunction((
   customStyles?: IButtonStyles,
   primary?: boolean
 ): IButtonStyles => {
-  let baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);
-  let splitButtonStyles: IButtonStyles = getSplitButtonStyles(theme);
-  let defaultButtonStyles: IButtonStyles = {
+  const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);
+  const splitButtonStyles: IButtonStyles = getSplitButtonStyles(theme);
+  const defaultButtonStyles: IButtonStyles = {
     root: {
       minWidth: DEFAULT_BUTTON_MINWIDTH,
       height: DEFAULT_BUTTON_HEIGHT,
diff --git a/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.styles.ts b/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.styles.ts
index dae28404cd08c..7792c4b2551b0 100644
--- a/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.styles.ts
@@ -15,9 +15,9 @@ export const getStyles = memoizeFunction((
   theme: ITheme,
   customStyles?: IButtonStyles
 ): IButtonStyles => {
-  let baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);
-  let splitButtonStyles: IButtonStyles = getSplitButtonStyles(theme);
-  let iconButtonStyles: IButtonStyles = {
+  const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);
+  const splitButtonStyles: IButtonStyles = getSplitButtonStyles(theme);
+  const iconButtonStyles: IButtonStyles = {
     root: {
       padding: '0 4px',
       width: '32px',
diff --git a/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx b/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx
index 9d6367a36cfbe..775ecceba5cc6 100644
--- a/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/IconButton/IconButton.tsx
@@ -12,7 +12,7 @@ export class IconButton extends BaseComponent<IButtonProps, {}> {
   protected _shouldUpdateComponentRef = false;
 
   public render() {
-    let { styles, theme } = this.props;
+    const { styles, theme } = this.props;
 
     return (
       <BaseButton
diff --git a/packages/office-ui-fabric-react/src/components/Button/MessageBarButton/MessageBarButton.styles.ts b/packages/office-ui-fabric-react/src/components/Button/MessageBarButton/MessageBarButton.styles.ts
index 7e797034447bb..a13d1956c2db5 100644
--- a/packages/office-ui-fabric-react/src/components/Button/MessageBarButton/MessageBarButton.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Button/MessageBarButton/MessageBarButton.styles.ts
@@ -14,8 +14,8 @@ export const getStyles = memoizeFunction((
   focusInset?: string,
   focusColor?: string
 ): IButtonStyles => {
-  let baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);
-  let messageBarButtonStyles: IButtonStyles = {
+  const baseButtonStyles: IButtonStyles = getBaseButtonStyles(theme);
+  const messageBarButtonStyles: IButtonStyles = {
     root: {
       backgroundColor: theme.palette.neutralQuaternaryAlt,
       color: theme.palette.neutralPrimary
diff --git a/packages/office-ui-fabric-react/src/components/Button/MessageBarButton/MessageBarButton.tsx b/packages/office-ui-fabric-react/src/components/Button/MessageBarButton/MessageBarButton.tsx
index e39a2789c8b6c..c59d000ab98a1 100644
--- a/packages/office-ui-fabric-react/src/components/Button/MessageBarButton/MessageBarButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/MessageBarButton/MessageBarButton.tsx
@@ -8,7 +8,7 @@ import { getStyles } from './MessageBarButton.styles';
 export class MessageBarButton extends BaseComponent<IButtonProps, {}> {
 
   public render() {
-    let { styles, theme } = this.props;
+    const { styles, theme } = this.props;
 
     return (
       <DefaultButton
diff --git a/packages/office-ui-fabric-react/src/components/Button/SplitButton/SplitButton.styles.ts b/packages/office-ui-fabric-react/src/components/Button/SplitButton/SplitButton.styles.ts
index 913c8b0ab1680..7c37163660a57 100644
--- a/packages/office-ui-fabric-react/src/components/Button/SplitButton/SplitButton.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Button/SplitButton/SplitButton.styles.ts
@@ -10,7 +10,7 @@ export const getStyles = memoizeFunction((
   theme: ITheme,
   customStyles?: IButtonStyles
 ): IButtonStyles => {
-  let splitButtonStyles: IButtonStyles = {
+  const splitButtonStyles: IButtonStyles = {
     splitButtonContainer: {
       position: 'relative',
       display: 'inline-block',
diff --git a/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap
index 0fbc1378c8cfc..442ee99480d23 100644
--- a/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`Button renders ActionButton correctly 1`] = `
         color: #333333;
         cursor: pointer;
         display: inline-block;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 14px;
         font-weight: 400;
         height: 40px;
@@ -124,7 +124,7 @@ exports[`Button renders CommandBarButton correctly 1`] = `
         color: #333333;
         cursor: pointer;
         display: inline-block;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 14px;
         font-weight: 400;
         min-width: 40px;
@@ -180,7 +180,6 @@ exports[`Button renders CommandBarButton correctly 1`] = `
   >
     <i
       aria-hidden={true}
-      aria-label={undefined}
       className=
           ms-Button-icon
           {
@@ -227,7 +226,6 @@ exports[`Button renders CommandBarButton correctly 1`] = `
     </div>
     <i
       aria-hidden={true}
-      aria-label={undefined}
       className=
           ms-Button-menuIcon
           {
@@ -272,7 +270,7 @@ exports[`Button renders CompoundButton correctly 1`] = `
         color: #333333;
         cursor: pointer;
         display: inline-block;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 14px;
         font-weight: 400;
         height: auto;
@@ -368,7 +366,7 @@ exports[`Button renders CompoundButton correctly 1`] = `
               -moz-osx-font-smoothing: grayscale;
               -webkit-font-smoothing: antialiased;
               color: #666666;
-              font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
               font-size: 12px;
               font-weight: 400;
               line-height: 100%;
@@ -401,7 +399,7 @@ exports[`Button renders DefaultButton correctly 1`] = `
         color: #333333;
         cursor: pointer;
         display: inline-block;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 14px;
         font-weight: 400;
         height: 32px;
@@ -499,7 +497,7 @@ exports[`Button renders IconButton correctly 1`] = `
         box-sizing: border-box;
         cursor: pointer;
         display: inline-block;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 14px;
         font-weight: 400;
         height: 32px;
@@ -553,7 +551,6 @@ exports[`Button renders IconButton correctly 1`] = `
   >
     <i
       aria-hidden={true}
-      aria-label={undefined}
       className=
           ms-Button-icon
           {
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx
index e6365cb5769c9..dd8603446821a 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx
@@ -1,4 +1,10 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import {
   ActionButton,
   IButtonProps
@@ -10,10 +16,13 @@ export class ButtonActionExample extends React.Component<IButtonProps> {
   }
 
   public render() {
-    let { disabled, checked } = this.props;
+    const { disabled, checked } = this.props;
+
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
 
     return (
-      <div className='ms-BasicButtonsExample'>
+      <div className={ css(classNames.example) }>
         <ActionButton
           data-automation-id='test'
           iconProps={ { iconName: 'AddFriend' } }
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx
index c2e6e11cbd06a..09a462ec6a688 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx
@@ -1,25 +1,31 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import {
   IButtonProps,
   DefaultButton
 } from 'office-ui-fabric-react/lib/Button';
-import {
-  Label
-} from 'office-ui-fabric-react/lib/Label';
 
 export class ButtonAnchorExample extends React.Component<IButtonProps> {
   public render() {
-    let { disabled, checked } = this.props;
+    const { disabled, checked } = this.props;
+
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
 
     return (
-      <div className='ms-BasicButtonsExample'>
+      <div className={ css(classNames.example) }>
         <DefaultButton
           data-automation-id='test'
           disabled={ disabled }
           checked={ checked }
           href='http://bing.com'
           target='_blank'
-          title='Let us bing!'
+          title='let us bing!'
         >
           Bing
         </DefaultButton>
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.scss b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.scss
deleted file mode 100644
index 748891141c6c0..0000000000000
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-:global {
-  .ms-BasicButtonsExample .ms-Button {
-    margin: 10px 0;
-  }
-  .ms-BasicButtonsTwoUp {
-    display: flex;
-    & > * {
-      flex-grow: 1;
-    }
-    .ms-Label {
-      margin-bottom: 10px;
-    }
-  }
-}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts
new file mode 100644
index 0000000000000..dea19c6a76381
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts
@@ -0,0 +1,41 @@
+import { IStyle } from '../../../Styling';
+
+export interface IButtonBasicExampleStyleProps {
+  /**
+   * 404 No Style Props Found
+   */
+}
+
+export interface IButtonBasicExampleStyles {
+  example?: IStyle;
+  twoup?: IStyle;
+}
+
+export function getStyles(props: IButtonBasicExampleStyleProps): IButtonBasicExampleStyles {
+  return ({
+    example: [
+      'ms-BasicButtonsExample',
+      {
+        selectors: {
+          '.ms-Button': {
+            margin: '10px 0'
+          }
+        }
+      }
+    ],
+    twoup: [
+      'ms-BasicButtonsTwoUp',
+      {
+        display: 'flex',
+        selectors: {
+          '& > *': {
+            flexGrow: 1
+          },
+          '.ms-Label': {
+            marginBottom: '10px'
+          }
+        }
+      }
+    ]
+  });
+}
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Command.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Command.Example.tsx
index 6e11b46aafb08..4617d5420cb86 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Command.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Command.Example.tsx
@@ -3,7 +3,7 @@ import { CommandButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 
 export class ButtonCommandExample extends React.Component<IButtonProps, {}> {
   public render() {
-    let { disabled, checked } = this.props;
+    const { disabled, checked } = this.props;
 
     return (
       <div>
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.CommandBar.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.CommandBar.Example.tsx
index 3ef494a34669f..c1ba4cf865759 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.CommandBar.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.CommandBar.Example.tsx
@@ -3,7 +3,7 @@ import { CommandBarButton, IButtonProps } from 'office-ui-fabric-react/lib/Butto
 
 export class ButtonCommandBarExample extends React.Component<IButtonProps, {}> {
   public render() {
-    let { disabled, checked } = this.props;
+    const { disabled, checked } = this.props;
 
     return (
       <div>
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx
index 1c11cbc0a92d4..19a42f41c4c63 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx
@@ -1,4 +1,10 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import {
   CompoundButton,
   IButtonProps
@@ -11,10 +17,13 @@ export class ButtonCompoundExample extends React.Component<IButtonProps> {
   }
 
   public render() {
-    let { disabled, checked } = this.props;
+    const { disabled, checked } = this.props;
+
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
 
     return (
-      <div className='ms-BasicButtonsExample ms-BasicButtonsTwoUp'>
+      <div className={ css(classNames.example, classNames.twoup) }>
         <div>
           <Label>Standard</Label>
           <CompoundButton
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.ContextualMenu.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.ContextualMenu.Example.tsx
index fe610776134a1..31aff85d1f4cd 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.ContextualMenu.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.ContextualMenu.Example.tsx
@@ -3,7 +3,7 @@ import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 
 export class ButtonContextualMenuExample extends React.Component<IButtonProps, {}> {
   public render() {
-    let { disabled, checked } = this.props;
+    const { disabled, checked } = this.props;
 
     return (
       <div className='ms-ContextualMenuButtonsExample'>
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx
index 6d2462494958b..7e145591eefde 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx
@@ -1,20 +1,29 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 
 export class ButtonDefaultExample extends React.Component<IButtonProps, {}> {
   public render() {
-    let { disabled, checked } = this.props;
+    const { disabled, checked } = this.props;
+
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
 
     return (
-      <div className='ms-BasicButtonsTwoUp'>
+      <div className={ css(classNames.twoup) }>
         <div>
           <Label>Standard</Label>
           <DefaultButton
             data-automation-id='test'
             disabled={ disabled }
             checked={ checked }
-            text='Butjon'
+            text='Button'
           />
         </div>
         <div>
@@ -24,7 +33,7 @@ export class ButtonDefaultExample extends React.Component<IButtonProps, {}> {
             data-automation-id='test'
             disabled={ disabled }
             checked={ checked }
-            text='Butjon'
+            text='Button'
             onClick={ this._alertClicked }
           />
         </div>
@@ -35,4 +44,4 @@ export class ButtonDefaultExample extends React.Component<IButtonProps, {}> {
   private _alertClicked(): void {
     alert('Clicked');
   }
-}
\ No newline at end of file
+}
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx
index 22149f6c4fe4e..bcd33745f2ad7 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx
@@ -1,13 +1,21 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import { IconButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
-import { Label } from 'office-ui-fabric-react/lib/Label';
 
 export class ButtonIconExample extends React.Component<IButtonProps> {
   public render() {
-    let { disabled, checked } = this.props;
+    const { disabled, checked } = this.props;
+
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
 
     return (
-      <div className='ms-BasicButtonsExample'>
+      <div className={ css(classNames.example) }>
         <IconButton
           disabled={ disabled }
           checked={ checked }
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx
index 235e55dcf04d6..fcc150fa3fd13 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx
@@ -1,13 +1,21 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import { PrimaryButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
-import { Label } from 'office-ui-fabric-react/lib/Label';
 
 export class ButtonPrimaryExample extends React.Component<IButtonProps> {
   public render() {
-    let { disabled, checked } = this.props;
+    const { disabled, checked } = this.props;
+
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
 
     return (
-      <div className='ms-BasicButtonsExample'>
+      <div className={ css(classNames.example) }>
         <PrimaryButton
           data-automation-id='test'
           disabled={ disabled }
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx
index 03fc8143da301..ceccbf0b51c1d 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx
@@ -1,13 +1,21 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import { PrimaryButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
-import { Label } from 'office-ui-fabric-react/lib/Label';
 
 export class ButtonScreenReaderExample extends React.Component<IButtonProps, {}> {
   public render() {
-    let { disabled, checked } = this.props;
+    const { disabled, checked } = this.props;
+
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
 
     return (
-      <div className='ms-BasicButtonsExample'>
+      <div className={ css(classNames.example) }>
         <PrimaryButton
           data-automation-id='test'
           disabled={ disabled }
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
index 8e72b37c6bbb6..36049fc90a03c 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
@@ -1,4 +1,10 @@
 import * as React from 'react';
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import { DefaultButton, IconButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { Label } from 'office-ui-fabric-react/lib/Label';
 import { getCustomSplitButtonStyles } from './Button.Split.Example.styles';
@@ -10,10 +16,13 @@ const alertClicked = (): void => {
 export class ButtonSplitExample extends React.Component<IButtonProps> {
 
   public render() {
-    let { disabled, checked } = this.props;
+    const { disabled, checked } = this.props;
+
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
 
     return (
-      <div className='ms-BasicButtonsTwoUp'>
+      <div className={ css(classNames.twoup) }>
         <div>
           <Label>Standard</Label>
           <DefaultButton
@@ -104,7 +113,7 @@ export class ButtonSplitExample extends React.Component<IButtonProps> {
 export class ButtonSplitCustomExample extends React.Component<IButtonProps> {
 
   public render() {
-    let { disabled, checked } = this.props;
+    const { disabled, checked } = this.props;
     const customSplitButtonStyles = getCustomSplitButtonStyles();
 
     return (
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx
index 8533e8da7e6ef..8632716a9eb40 100644
--- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx
@@ -1,11 +1,15 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-
+import { css, classNamesFunction } from '../../../Utilities';
+import {
+  getStyles,
+  IButtonBasicExampleStyleProps,
+  IButtonBasicExampleStyles
+} from './Button.Basic.Example.styles';
 import {
   autobind
 } from 'office-ui-fabric-react/lib/Utilities';
 import { DefaultButton, PrimaryButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
-import { Label } from 'office-ui-fabric-react/lib/Label';
 
 export interface IButtonSwapExampleState {
   isPrimary: boolean;
@@ -39,12 +43,12 @@ export class ButtonSwapExample extends React.Component<IButtonProps, IButtonSwap
   }
 
   public render() {
-    let { isPrimary } = this.state;
-    let { disabled, checked } = this.props;
-    let text = 'Swap';
+    const { isPrimary } = this.state;
+    const { disabled, checked } = this.props;
+    const text = 'Swap';
 
     // determine which button to render
-    let button = isPrimary
+    const button = isPrimary
       ? (
         <PrimaryButton
           ref={ this._setButtonRef }
@@ -65,8 +69,11 @@ export class ButtonSwapExample extends React.Component<IButtonProps, IButtonSwap
         </DefaultButton>
       );
 
+    const getClassNames = classNamesFunction<IButtonBasicExampleStyleProps, IButtonBasicExampleStyles>();
+    const classNames = getClassNames(getStyles);
+
     return (
-      <div className='ms-BasicButtonsExample'>
+      <div className={ css(classNames.example) }>
         { button }
       </div>
     );
diff --git a/packages/office-ui-fabric-react/src/components/Button/index.ts b/packages/office-ui-fabric-react/src/components/Button/index.ts
index 1a08c6eb8c842..4bbc372625709 100644
--- a/packages/office-ui-fabric-react/src/components/Button/index.ts
+++ b/packages/office-ui-fabric-react/src/components/Button/index.ts
@@ -6,7 +6,6 @@ export * from './CommandBarButton/CommandBarButton';
 export * from './CommandButton/CommandButton';
 export * from './CompoundButton/CompoundButton';
 export * from './DefaultButton/DefaultButton';
-export * from './CommandButton/CommandButton';
 export * from './MessageBarButton/MessageBarButton';
 export * from './PrimaryButton/PrimaryButton';
 export * from './IconButton/IconButton';
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx
index 770846ffc51e3..6616d450c70a4 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.test.tsx
@@ -12,7 +12,7 @@ import { DateRangeType, DayOfWeek } from './Calendar.types';
 import { addDays, compareDates } from '../../utilities/dateMath/DateMath';
 
 describe('Calendar', () => {
-  let dayPickerStrings = {
+  const dayPickerStrings = {
     months: [
       'January',
       'February',
@@ -68,18 +68,18 @@ describe('Calendar', () => {
 
   it('can handle invalid starting dates', () => {
     // Arrange
-    let defaultDate = new Date('invalid');
+    const defaultDate = new Date('invalid');
 
     // Act
 
-    let renderedComponent = mount(
+    const renderedComponent = mount(
       <Calendar
         strings={ dayPickerStrings }
         isMonthPickerVisible={ true }
         value={ defaultDate }
       />);
 
-    let today = renderedComponent.find('.ms-DatePicker-day--today');
+    const today = renderedComponent.find('.ms-DatePicker-day--today');
     expect(+today.text()).toEqual(new Date().getDate());
   });
 
@@ -104,21 +104,21 @@ describe('Calendar', () => {
         />
       );
 
-      let tree = component.toJSON();
+      const tree = component.toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('Verify day picker header', () => {
-      let today = new Date();
-      let monthName = dayPickerStrings.months[today.getMonth()];
-      let year = today.getFullYear();
-      let dayPickerMonth = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-monthAndYear');
+      const today = new Date();
+      const monthName = dayPickerStrings.months[today.getMonth()];
+      const year = today.getFullYear();
+      const dayPickerMonth = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-monthAndYear');
       expect(dayPickerMonth).toBeDefined();
       expect(dayPickerMonth.textContent).toEqual(monthName + ' ' + year.toString());
     });
 
     it('Verify first day of week', () => {
-      let dayHeaders = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-weekday');
+      const dayHeaders = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-weekday');
       expect(dayHeaders.length).toEqual(7);
       expect(dayHeaders[0].textContent).toEqual(dayPickerStrings.shortDays[0]);
       expect(dayHeaders[1].textContent).toEqual(dayPickerStrings.shortDays[1]);
@@ -133,7 +133,7 @@ describe('Calendar', () => {
       // When not passed in selected & navigated dates default to current date
       // These dates will be ms different, so just compare their day, month, and year
       // This test will likely fail around midnight.
-      let today = new Date();
+      const today = new Date();
       expect(renderedComponent.state.selectedDate).not.toBeNull();
       expect(renderedComponent.state.selectedDate!.getDate()).toEqual(today.getDate());
       expect(renderedComponent.state.selectedDate!.getMonth()).toEqual(today.getMonth());
@@ -145,7 +145,7 @@ describe('Calendar', () => {
     });
 
     it('Verify go to today', () => {
-      let goToToday = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-goToday');
+      const goToToday = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-goToday');
       expect(goToToday).toBeDefined();
       expect(goToToday.textContent).toEqual(dayPickerStrings.goToToday);
     });
@@ -158,7 +158,7 @@ describe('Calendar', () => {
 
     beforeAll(() => {
       defaultDate = new Date(2017, 2, 16);
-      let onSelectDate = (): (date: Date, dateRangeArray: Date[]) => void => {
+      const onSelectDate = (): (date: Date, dateRangeArray: Date[]) => void => {
         return (date: Date, dateRangeArray: Date[]): void => {
           lastSelectedDateRange = dateRangeArray;
         };
@@ -177,14 +177,14 @@ describe('Calendar', () => {
     });
 
     it('Verify day picker header', () => {
-      let monthName = dayPickerStrings.months[defaultDate.getMonth()];
-      let dayPickerMonth = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-monthAndYear');
+      const monthName = dayPickerStrings.months[defaultDate.getMonth()];
+      const dayPickerMonth = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-monthAndYear');
       expect(dayPickerMonth).toBeDefined();
       expect(dayPickerMonth.textContent).toEqual(monthName + ' ' + defaultDate.getFullYear().toString());
     });
 
     it('Verify first day of week', () => {
-      let dayHeaders = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-weekday');
+      const dayHeaders = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-weekday');
       expect(dayHeaders.length).toEqual(7);
       expect(dayHeaders[0].textContent).toEqual(dayPickerStrings.shortDays[2]);
       expect(dayHeaders[1].textContent).toEqual(dayPickerStrings.shortDays[3]);
@@ -201,19 +201,19 @@ describe('Calendar', () => {
     });
 
     it('Verify month picker seen', () => {
-      let monthPicker = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-monthPicker') as HTMLElement;
+      const monthPicker = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-monthPicker') as HTMLElement;
       expect(monthPicker).toBeDefined();
       expect(monthPicker.style.display).not.toEqual('none');
     });
 
     it('Verify month picker header', () => {
-      let currentYear = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-currentYear');
+      const currentYear = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-currentYear');
       expect(currentYear).toBeDefined();
       expect(currentYear.textContent).toEqual(defaultDate.getFullYear().toString());
     });
 
     it('Verify month picker months', () => {
-      let months = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-monthOption');
+      const months = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-monthOption');
       expect(months.length).toEqual(12);
       for (let i = 0; i < 12; i++) {
         expect(months[i].textContent).toEqual(dayPickerStrings.shortMonths[i]);
@@ -221,15 +221,15 @@ describe('Calendar', () => {
     });
 
     it('Verify go to today', () => {
-      let goToToday = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-goToday');
+      const goToToday = ReactTestUtils.findRenderedDOMComponentWithClass(renderedComponent, 'ms-DatePicker-goToday');
       expect(goToToday).toBeDefined();
       expect(goToToday.textContent).toEqual(dayPickerStrings.goToToday);
     });
 
     it('Verify navigate to different week in same month', () => {
       lastSelectedDateRange = null;
-      let days = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-day');
-      let day = days[8]; // 03/08/2017
+      const days = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-day');
+      const day = days[8]; // 03/08/2017
       ReactTestUtils.Simulate.click(day);
       expect(lastSelectedDateRange).not.toBeNull();
       expect(lastSelectedDateRange!.length).toEqual(7);
@@ -238,9 +238,9 @@ describe('Calendar', () => {
 
     it('Verify navigate to day in different month', () => {
       lastSelectedDateRange = null;
-      let days = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-day');
-      let day = days[34]; // 04/03/2017
-      let firstDate = new Date(2017, 2, 28);
+      const days = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-day');
+      const day = days[34]; // 04/03/2017
+      const firstDate = new Date(2017, 2, 28);
       ReactTestUtils.Simulate.click(day);
       expect(lastSelectedDateRange).not.toBeNull();
       expect(lastSelectedDateRange!.length).toEqual(7);
@@ -291,7 +291,7 @@ describe('Calendar', () => {
           onSelectDate={ onSelectDate() }
         />) as Calendar;
 
-      let days = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-day');
+      const days = ReactTestUtils.scryRenderedDOMComponentsWithClass(renderedComponent, 'ms-DatePicker-day');
       ReactTestUtils.Simulate.click(days[18]);
       expect(lastSelectedDateRange!.length).toEqual(19);
       lastSelectedDateRange!.forEach((val, i) => expect(compareDates(val, addDays(minDate, i))).toEqual(true));
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx
index 5f0f764c59289..e60db6597e661 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/Calendar.tsx
@@ -1,25 +1,26 @@
 import * as React from 'react';
 import { ICalendar, ICalendarProps, ICalendarStrings, ICalendarIconStrings, ICalendarFormatDateCallbacks } from './Calendar.types';
 import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '../../utilities/dateValues/DateValues';
-import { CalendarDay } from './CalendarDay';
-import { CalendarMonth } from './CalendarMonth';
+import { CalendarDay, ICalendarDay } from './CalendarDay';
+import { CalendarMonth, ICalendarMonth } from './CalendarMonth';
 import { compareDates, getDateRangeArray } from '../../utilities/dateMath/DateMath';
 import {
   autobind,
   css,
   BaseComponent,
-  KeyCodes
+  KeyCodes,
+  createRef
 } from '../../Utilities';
 import * as stylesImport from './Calendar.scss';
 const styles: any = stylesImport;
 
-const leftArrow: string = 'Up';
-const rightArrow: string = 'Down';
-let iconStrings: ICalendarIconStrings = {
+const leftArrow = 'Up';
+const rightArrow = 'Down';
+const iconStrings: ICalendarIconStrings = {
   leftNavigation: leftArrow,
   rightNavigation: rightArrow
 };
-let defaultWorkWeekDays: DayOfWeek[] = [
+const defaultWorkWeekDays: DayOfWeek[] = [
   DayOfWeek.Monday,
   DayOfWeek.Tuesday,
   DayOfWeek.Wednesday,
@@ -27,7 +28,7 @@ let defaultWorkWeekDays: DayOfWeek[] = [
   DayOfWeek.Friday,
 ];
 
-let dateTimeFormatterCallbacks: ICalendarFormatDateCallbacks = {
+const dateTimeFormatterCallbacks: ICalendarFormatDateCallbacks = {
   formatMonthDayYear: (date: Date, strings: ICalendarStrings) => (strings.months[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear()),
   formatMonthYear: (date: Date, strings: ICalendarStrings) => (strings.months[date.getMonth()] + ' ' + date.getFullYear()),
   formatDay: (date: Date) => date.getDate().toString(),
@@ -71,18 +72,14 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
     workWeekDays: defaultWorkWeekDays
   };
 
-  public refs: {
-    [key: string]: React.ReactInstance;
-    root: HTMLElement;
-    dayPicker: CalendarDay;
-    monthPicker: CalendarMonth;
-  };
+  private _dayPicker = createRef<ICalendarDay>();
+  private _monthPicker = createRef<ICalendarMonth>();
 
   private _focusOnUpdate: boolean;
 
   constructor(props: ICalendarProps) {
     super(props);
-    let currentDate = props.value && !isNaN(props.value.getTime()) ? props.value : (props.today || new Date());
+    const currentDate = props.value && !isNaN(props.value.getTime()) ? props.value : (props.today || new Date());
 
     this.state = {
       selectedDate: currentDate,
@@ -97,11 +94,11 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
   }
 
   public componentWillReceiveProps(nextProps: ICalendarProps) {
-    let { autoNavigateOnSelection, value, today = new Date() } = nextProps;
+    const { autoNavigateOnSelection, value, today = new Date() } = nextProps;
 
     // Make sure auto-navigation is supported for programmatic changes to selected date, i.e.,
     // if selected date is updated via props, we may need to modify the navigated date
-    let overrideNavigatedDate = (autoNavigateOnSelection && !compareDates(value!, this.props.value!));
+    const overrideNavigatedDate = (autoNavigateOnSelection && !compareDates(value!, this.props.value!));
     if (overrideNavigatedDate) {
       this.setState({
         navigatedDate: value
@@ -116,25 +113,25 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
   public componentDidUpdate() {
     if (this._focusOnUpdate) {
       // if the day picker is shown, focus on it
-      if (this.refs.dayPicker) {
-        this.refs.dayPicker.focus();
-      } else if (this.refs.monthPicker) {
-        this.refs.monthPicker.focus();
+      if (this._dayPicker.value) {
+        this._dayPicker.value.focus();
+      } else if (this._monthPicker.value) {
+        this._monthPicker.value.focus();
       }
       this._focusOnUpdate = false;
     }
   }
 
   public render() {
-    let rootClass = 'ms-DatePicker';
-    let { firstDayOfWeek, dateRangeType, strings, showMonthPickerAsOverlay, autoNavigateOnSelection, showGoToToday, highlightCurrentMonth, navigationIcons, minDate, maxDate } = this.props;
-    let { selectedDate, navigatedDate, isMonthPickerVisible, isDayPickerVisible } = this.state;
-    let onHeaderSelect = showMonthPickerAsOverlay ? this._onHeaderSelect : undefined;
-    let monthPickerOnly = !showMonthPickerAsOverlay && !isDayPickerVisible;
-    let overlayedWithButton = showMonthPickerAsOverlay && showGoToToday;
+    const rootClass = 'ms-DatePicker';
+    const { firstDayOfWeek, dateRangeType, strings, showMonthPickerAsOverlay, autoNavigateOnSelection, showGoToToday, highlightCurrentMonth, navigationIcons, minDate, maxDate } = this.props;
+    const { selectedDate, navigatedDate, isMonthPickerVisible, isDayPickerVisible } = this.state;
+    const onHeaderSelect = showMonthPickerAsOverlay ? this._onHeaderSelect : undefined;
+    const monthPickerOnly = !showMonthPickerAsOverlay && !isDayPickerVisible;
+    const overlayedWithButton = showMonthPickerAsOverlay && showGoToToday;
 
     return (
-      <div className={ css(rootClass, styles.root) } ref='root' role='application'>
+      <div className={ css(rootClass, styles.root) } role='application'>
         <div
           className={ css(
             'ms-DatePicker-picker ms-DatePicker-picker--opened ms-DatePicker-picker--focused',
@@ -170,7 +167,7 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
                   minDate={ minDate }
                   maxDate={ maxDate }
                   workWeekDays={ this.props.workWeekDays }
-                  ref='dayPicker'
+                  componentRef={ this._dayPicker }
                 />
                 }
 
@@ -185,7 +182,7 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
                   dateTimeFormatter={ this.props.dateTimeFormatter! }
                   minDate={ minDate }
                   maxDate={ maxDate }
-                  ref='monthPicker'
+                  componentRef={ this._monthPicker }
                 /> }
 
                 { showGoToToday &&
@@ -208,8 +205,8 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
   }
 
   public focus() {
-    if (this.refs.dayPicker) {
-      this.refs.dayPicker.focus();
+    if (this._dayPicker.value) {
+      this._dayPicker.value.focus();
     }
   }
 
@@ -234,7 +231,7 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
 
   @autobind
   private _onSelectDate(date: Date, selectedDateRangeArray?: Date[]) {
-    let { onSelectDate } = this.props;
+    const { onSelectDate } = this.props;
 
     this.setState({
       selectedDate: date
@@ -260,9 +257,9 @@ export class Calendar extends BaseComponent<ICalendarProps, ICalendarState> impl
   @autobind
   private _onGotoToday() {
 
-    let { dateRangeType, firstDayOfWeek, today, workWeekDays } = this.props;
+    const { dateRangeType, firstDayOfWeek, today, workWeekDays } = this.props;
 
-    let dates = getDateRangeArray(today!, dateRangeType!, firstDayOfWeek!, workWeekDays!);
+    const dates = getDateRangeArray(today!, dateRangeType!, firstDayOfWeek!, workWeekDays!);
 
     this._onSelectDate(today!, dates);
 
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
index 719346d4bc378..728cb130cc7d8 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarDay.tsx
@@ -9,7 +9,7 @@ import {
   getRTLSafeKeyCode
 } from '../../Utilities';
 import { ICalendarStrings, ICalendarIconStrings, ICalendarFormatDateCallbacks } from './Calendar.types';
-import { DayOfWeek, MonthOfYear, FirstWeekOfYear, DateRangeType } from '../../utilities/dateValues/DateValues';
+import { DayOfWeek, FirstWeekOfYear, DateRangeType } from '../../utilities/dateValues/DateValues';
 import { FocusZone } from '../../FocusZone';
 import { Icon } from '../../Icon';
 import {
@@ -25,7 +25,6 @@ import {
   getMonthStart,
   getMonthEnd
 } from '../../utilities/dateMath/DateMath';
-import TimeConstants from '../../utilities/dateValues/TimeConstants';
 
 import * as stylesImport from './Calendar.scss';
 const styles: any = stylesImport;
@@ -43,8 +42,12 @@ export interface IDayInfo {
   onSelected: () => void;
 }
 
+export interface ICalendarDay {
+  focus(): void;
+}
+
 export interface ICalendarDayProps extends React.Props<CalendarDay> {
-  componentRef?: () => void;
+  componentRef?: (c: ICalendarDay) => void;
   strings: ICalendarStrings;
   selectedDate: Date;
   navigatedDate: Date;
@@ -100,14 +103,14 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
   }
 
   public render() {
-    let { activeDescendantId, weeks } = this.state;
-    let { firstDayOfWeek, strings, navigatedDate, selectedDate, dateRangeType, navigationIcons, showWeekNumbers, firstWeekOfYear, dateTimeFormatter, minDate, maxDate } = this.props;
-    let dayPickerId = getId('DatePickerDay-dayPicker');
-    let monthAndYearId = getId('DatePickerDay-monthAndYear');
-    let leftNavigationIcon = navigationIcons.leftNavigation;
-    let rightNavigationIcon = navigationIcons.rightNavigation;
-    let weekNumbers = showWeekNumbers ? getWeekNumbersInMonth(weeks!.length, firstDayOfWeek, firstWeekOfYear, navigatedDate) : null;
-    let selectedDateWeekNumber = showWeekNumbers ? getWeekNumber(selectedDate, firstDayOfWeek, firstWeekOfYear) : undefined;
+    const { activeDescendantId, weeks } = this.state;
+    const { firstDayOfWeek, strings, navigatedDate, selectedDate, dateRangeType, navigationIcons, showWeekNumbers, firstWeekOfYear, dateTimeFormatter, minDate, maxDate } = this.props;
+    const dayPickerId = getId('DatePickerDay-dayPicker');
+    const monthAndYearId = getId('DatePickerDay-monthAndYear');
+    const leftNavigationIcon = navigationIcons.leftNavigation;
+    const rightNavigationIcon = navigationIcons.rightNavigation;
+    const weekNumbers = showWeekNumbers ? getWeekNumbersInMonth(weeks!.length, firstDayOfWeek, firstWeekOfYear, navigatedDate) : null;
+    const selectedDateWeekNumber = showWeekNumbers ? getWeekNumber(selectedDate, firstDayOfWeek, firstWeekOfYear) : undefined;
 
     // When the month is highlighted get the corner dates so that styles can be added to them
     let weekCorners: IWeekCorners = {};
@@ -288,11 +291,11 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
 
   private _findCornerIndexes(week: IDayInfo[]) {
 
-    let cornerIndexes = [];
+    const cornerIndexes = [];
 
     for (let i = 0, length = week.length; i < length; i++) {
 
-      let day = week[i];
+      const day = week[i];
       if (day.isInMonth) {
         cornerIndexes.push(i);
       }
@@ -314,7 +317,7 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
     leftCornerStyle: string,
     rightCornerStyle: string) {
 
-    let cornersLength = cornerIndexes.length;
+    const cornersLength = cornerIndexes.length;
     if (cornersLength > 0) {
 
       if (cornersLength === 1) {
@@ -337,7 +340,7 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
       } else {
 
         // Assume we are on the last week. Check if second-to-last week needs corner styles
-        let lastDayIndex = DAYS_IN_WEEK - 1;
+        const lastDayIndex = DAYS_IN_WEEK - 1;
         if (cornerIndexes[cornersLength - 1] !== lastDayIndex) {
           weekCornersStyled[(weekIndex - 1) + '_' + lastDayIndex] = rightCornerStyle;
         }
@@ -347,10 +350,10 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
 
   private _getWeekCornerStyles(weeks: IDayInfo[][]) {
 
-    let weekCornersStyled: any = {};
-    let numberOfWeeks = weeks.length;
-    let indexesFirstWeek = this._findCornerIndexes(weeks[0]);
-    let indexesLastWeek = this._findCornerIndexes(weeks[numberOfWeeks - 1]);
+    const weekCornersStyled: any = {};
+    const numberOfWeeks = weeks.length;
+    const indexesFirstWeek = this._findCornerIndexes(weeks[0]);
+    const indexesLastWeek = this._findCornerIndexes(weeks[numberOfWeeks - 1]);
 
     this._populateCornerStyles(
       weekCornersStyled,
@@ -374,7 +377,7 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
   }
 
   private _getHighlightedCornerStyle(weekCorners: IWeekCorners, dayIndex: number, weekIndex: number) {
-    let cornerStyle = weekCorners[weekIndex + '_' + dayIndex] ? weekCorners[weekIndex + '_' + dayIndex] : '';
+    const cornerStyle = weekCorners[weekIndex + '_' + dayIndex] ? weekCorners[weekIndex + '_' + dayIndex] : '';
 
     return cornerStyle;
   }
@@ -417,7 +420,7 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
 
   @autobind
   private _onSelectDate(selectedDate: Date) {
-    let {
+    const {
       onSelectDate,
       dateRangeType,
       firstDayOfWeek,
@@ -439,7 +442,7 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
 
     // Navigate to next or previous month if needed
     if (autoNavigateOnSelection && selectedDate.getMonth() !== navigatedDate.getMonth()) {
-      let compareResult = compareDatePart(selectedDate, navigatedDate);
+      const compareResult = compareDatePart(selectedDate, navigatedDate);
       if (compareResult < 0) {
         this._onSelectPrevMonth();
       } else if (compareResult > 0) {
@@ -460,7 +463,7 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
 
   @autobind
   private _onHeaderSelect() {
-    let { onHeaderSelect } = this.props;
+    const { onHeaderSelect } = this.props;
     if (onHeaderSelect) {
       onHeaderSelect(true);
     }
@@ -468,7 +471,7 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
 
   @autobind
   private _onHeaderKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
-    let { onHeaderSelect } = this.props;
+    const { onHeaderSelect } = this.props;
     if (onHeaderSelect && (ev.which === KeyCodes.enter || ev.which === KeyCodes.space)) {
       onHeaderSelect(true);
     }
@@ -485,7 +488,7 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
   }
 
   private _getWeeks(propsToUse: ICalendarDayProps): IDayInfo[][] {
-    let {
+    const {
       navigatedDate,
       selectedDate,
       dateRangeType,
@@ -496,9 +499,9 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
       showSixWeeksByDefault,
       workWeekDays
     } = propsToUse;
-    let date = new Date(navigatedDate.getFullYear(), navigatedDate.getMonth(), 1);
-    let todaysDate = today || new Date();
-    let weeks: IDayInfo[][] = [];
+    const date = new Date(navigatedDate.getFullYear(), navigatedDate.getMonth(), 1);
+    const todaysDate = today || new Date();
+    const weeks: IDayInfo[][] = [];
 
     // Cycle the date backwards to get to the first day of the week.
     while (date.getDay() !== firstDayOfWeek) {
@@ -516,13 +519,13 @@ export class CalendarDay extends BaseComponent<ICalendarDayProps, ICalendarDaySt
     let shouldGetWeeks = true;
 
     for (let weekIndex = 0; shouldGetWeeks; weekIndex++) {
-      let week: IDayInfo[] = [];
+      const week: IDayInfo[] = [];
 
       isAllDaysOfWeekOutOfMonth = true;
 
       for (let dayIndex = 0; dayIndex < DAYS_IN_WEEK; dayIndex++) {
-        let originalDate = new Date(date.toString());
-        let dayInfo: IDayInfo = {
+        const originalDate = new Date(date.toString());
+        const dayInfo: IDayInfo = {
           key: date.toString(),
           date: date.getDate().toString(),
           originalDate: originalDate,
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx b/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
index 93d5e361d78be..44e48726bd984 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/CalendarMonth.tsx
@@ -13,8 +13,12 @@ import { Icon } from '../../Icon';
 import * as stylesImport from './Calendar.scss';
 const styles: any = stylesImport;
 
+export interface ICalendarMonth {
+  focus(): void;
+}
+
 export interface ICalendarMonthProps extends React.Props<CalendarMonth> {
-  componentRef?: () => void;
+  componentRef?: (c: ICalendarMonth) => void;
   navigatedDate: Date;
   strings: ICalendarStrings;
   onNavigateDate: (date: Date, focusOnNavigatedDay: boolean) => void;
@@ -33,7 +37,7 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
     navigatedMonth: HTMLElement;
   };
 
-  private _selectMonthCallbacks: (() => void) [];
+  private _selectMonthCallbacks: (() => void)[];
 
   public constructor(props: ICalendarMonthProps) {
     super(props);
@@ -51,9 +55,9 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
 
   public render() {
 
-    let { navigatedDate, strings, today, highlightCurrentMonth, navigationIcons, dateTimeFormatter, minDate, maxDate } = this.props;
-    let leftNavigationIcon = navigationIcons.leftNavigation;
-    let rightNavigationIcon = navigationIcons.rightNavigation;
+    const { navigatedDate, strings, today, highlightCurrentMonth, navigationIcons, dateTimeFormatter, minDate, maxDate } = this.props;
+    const leftNavigationIcon = navigationIcons.leftNavigation;
+    const rightNavigationIcon = navigationIcons.rightNavigation;
 
     // determine if previous/next years are in bounds
     const isPrevYearInBounds = minDate ? compareDatePart(minDate, getYearStart(navigatedDate)) < 0 : true;
@@ -167,7 +171,7 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
 
   @autobind
   private _onSelectNextYear() {
-    let { navigatedDate, onNavigateDate } = this.props;
+    const { navigatedDate, onNavigateDate } = this.props;
     onNavigateDate(addYears(navigatedDate, 1), false);
   }
 
@@ -178,7 +182,7 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
 
   @autobind
   private _onSelectPrevYear() {
-    let { navigatedDate, onNavigateDate } = this.props;
+    const { navigatedDate, onNavigateDate } = this.props;
     onNavigateDate(addYears(navigatedDate, -1), false);
   }
 
@@ -189,7 +193,7 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
 
   @autobind
   private _onSelectMonth(newMonth: number) {
-    let { navigatedDate, onNavigateDate, onHeaderSelect } = this.props;
+    const { navigatedDate, onNavigateDate, onHeaderSelect } = this.props;
 
     // If header is clickable the calendars are overlayed, switch back to day picker when month is clicked
     if (onHeaderSelect) {
@@ -200,7 +204,7 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
 
   @autobind
   private _onHeaderSelect() {
-    let { onHeaderSelect } = this.props;
+    const { onHeaderSelect } = this.props;
     if (onHeaderSelect) {
       onHeaderSelect(true);
     }
@@ -208,7 +212,7 @@ export class CalendarMonth extends BaseComponent<ICalendarMonthProps, {}> {
 
   @autobind
   private _onHeaderKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
-    let { onHeaderSelect } = this.props;
+    const { onHeaderSelect } = this.props;
     if (onHeaderSelect && (ev.which === KeyCodes.enter || ev.which === KeyCodes.space)) {
       onHeaderSelect(true);
     }
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap
index 9bd37fc04426c..507065a96d6f5 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Calendar/__snapshots__/Calendar.test.tsx.snap
@@ -39,7 +39,6 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                 >
                   <i
                     aria-hidden={true}
-                    aria-label={undefined}
                     className=
 
                         {
@@ -60,7 +59,6 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                 >
                   <i
                     aria-hidden={true}
-                    aria-label={undefined}
                     className=
 
                         {
@@ -916,7 +914,6 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                 >
                   <i
                     aria-hidden={true}
-                    aria-label={undefined}
                     className=
 
                         {
@@ -936,7 +933,6 @@ exports[`Calendar Test rendering simplest calendar Renders simple calendar corre
                 >
                   <i
                     aria-hidden={true}
-                    aria-label={undefined}
                     className=
 
                         {
diff --git a/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx b/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx
index 9ea7ba10d71d1..2441e519a53c2 100644
--- a/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Calendar/examples/Calendar.Inline.Example.tsx
@@ -99,18 +99,18 @@ export class CalendarInlineExample extends React.Component<ICalendarInlineExampl
   }
 
   public render() {
-    let divStyle: React.CSSProperties = {
+    const divStyle: React.CSSProperties = {
       height: '340px'
     };
 
-    let buttonStyle: React.CSSProperties = {
+    const buttonStyle: React.CSSProperties = {
       margin: '17px 10px 0 0'
     };
 
     let dateRangeString: string | null = null;
     if (this.state.selectedDateRange) {
-      let rangeStart = this.state.selectedDateRange[0];
-      let rangeEnd = this.state.selectedDateRange[this.state.selectedDateRange.length - 1];
+      const rangeStart = this.state.selectedDateRange[0];
+      const rangeEnd = this.state.selectedDateRange[this.state.selectedDateRange.length - 1];
       dateRangeString = rangeStart.toLocaleDateString() + '-' + rangeEnd.toLocaleDateString();
     }
 
@@ -166,8 +166,8 @@ export class CalendarInlineExample extends React.Component<ICalendarInlineExampl
 
   private _goPrevious() {
     this.setState((prevState: ICalendarInlineExampleState) => {
-      let selectedDate = prevState.selectedDate || new Date();
-      let dateRangeArray = getDateRangeArray(selectedDate, this.props.dateRangeType, DayOfWeek.Sunday);
+      const selectedDate = prevState.selectedDate || new Date();
+      const dateRangeArray = getDateRangeArray(selectedDate, this.props.dateRangeType, DayOfWeek.Sunday);
 
       let subtractFrom = dateRangeArray[0];
       let daysToSubtract = dateRangeArray.length;
@@ -177,16 +177,16 @@ export class CalendarInlineExample extends React.Component<ICalendarInlineExampl
         daysToSubtract = 1;
       }
 
-      let newSelectedDate = addDays(subtractFrom, -daysToSubtract);
+      const newSelectedDate = addDays(subtractFrom, -daysToSubtract);
       return prevState.selectedDate = newSelectedDate;
     });
   }
 
   private _goNext() {
     this.setState((prevState: ICalendarInlineExampleState) => {
-      let selectedDate = prevState.selectedDate || new Date();
-      let dateRangeArray = getDateRangeArray(selectedDate, this.props.dateRangeType, DayOfWeek.Sunday);
-      let newSelectedDate = addDays(dateRangeArray.pop()!, 1);
+      const selectedDate = prevState.selectedDate || new Date();
+      const dateRangeArray = getDateRangeArray(selectedDate, this.props.dateRangeType, DayOfWeek.Sunday);
+      const newSelectedDate = addDays(dateRangeArray.pop()!, 1);
       return prevState.selectedDate = newSelectedDate;
     });
   }
diff --git a/packages/office-ui-fabric-react/src/components/Callout/Callout.test.tsx b/packages/office-ui-fabric-react/src/components/Callout/Callout.test.tsx
index 623f2f333f7e7..1bec31bb20b44 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/Callout.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/Callout.test.tsx
@@ -28,14 +28,13 @@ describe('Callout', () => {
       <CalloutContentWrapper>Content</CalloutContentWrapper>,
       { createNodeMock }
     );
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('target id strings does not throw exception', () => {
 
-    let threwException: boolean = false;
-    let exception;
+    let threwException = false;
     try {
       ReactTestUtils.renderIntoDocument<HTMLDivElement>(
         <div>
@@ -51,7 +50,6 @@ describe('Callout', () => {
         </div>
       );
     } catch (e) {
-      exception = e;
       threwException = true;
     }
 
@@ -59,10 +57,10 @@ describe('Callout', () => {
   });
 
   it('target MouseEvents does not throw exception', () => {
-    let mouseEvent = document.createEvent('MouseEvent');
-    let eventTarget = document.createElement('div');
+    const mouseEvent = document.createEvent('MouseEvent');
+    const eventTarget = document.createElement('div');
     mouseEvent.initMouseEvent('click', false, false, window, 0, 0, 0, 0, 0, false, false, false, false, 1, eventTarget);
-    let threwException: boolean = false;
+    let threwException = false;
     try {
 
       ReactTestUtils.renderIntoDocument<HTMLDivElement>(
@@ -84,10 +82,10 @@ describe('Callout', () => {
     expect(threwException).toEqual(false);
   });
 
-  it('target HTMLElements does not throw exception', () => {
-    let targetElement = document.createElement('div');
+  it('target Elements does not throw exception', () => {
+    const targetElement = document.createElement('div');
     document.body.appendChild(targetElement);
-    let threwException: boolean = false;
+    let threwException = false;
     try {
 
       ReactTestUtils.renderIntoDocument<HTMLDivElement>(
@@ -110,7 +108,7 @@ describe('Callout', () => {
   });
 
   it('without target does not throw exception', () => {
-    let threwException: boolean = false;
+    let threwException = false;
     try {
       ReactTestUtils.renderIntoDocument<HTMLDivElement>(
         <div>
@@ -130,9 +128,9 @@ describe('Callout', () => {
   });
 
   it('passes event to onDismiss prop', (done) => {
-    let threwException: boolean = false;
-    let gotEvent: boolean = false;
-    let onDismiss = (ev?: any) => {
+    let threwException = false;
+    let gotEvent = false;
+    const onDismiss = (ev?: any) => {
       if (ev) {
         gotEvent = true;
       }
@@ -140,7 +138,7 @@ describe('Callout', () => {
 
     // In order to have eventlisteners that have been added to the window to be called the JSX needs
     // to be rendered into the real dom rather than the testutil simulated dom.
-    let root = document.createElement('div');
+    const root = document.createElement('div');
     document.body.appendChild(root);
     try {
       ReactDOM.render<HTMLDivElement>(
@@ -163,7 +161,7 @@ describe('Callout', () => {
     }
     expect(threwException).toEqual(false);
 
-    let focusTarget = document.querySelector('#focustarget') as HTMLButtonElement;
+    const focusTarget = document.querySelector('#focustarget') as HTMLButtonElement;
 
     // Move focus
     setTimeout(() => {
diff --git a/packages/office-ui-fabric-react/src/components/Callout/Callout.tsx b/packages/office-ui-fabric-react/src/components/Callout/Callout.tsx
index b8c8127d2383d..07bf90be3eb67 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/Callout.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/Callout.tsx
@@ -20,7 +20,7 @@ export class Callout extends BaseComponent<ICalloutProps, ICalloutState> {
   }
 
   public render() {
-    let content = (
+    const content = (
       <CalloutContent { ...this.props } />
     );
     return this.props.doNotLayer ? content : (
diff --git a/packages/office-ui-fabric-react/src/components/Callout/Callout.types.ts b/packages/office-ui-fabric-react/src/components/Callout/Callout.types.ts
index 82c5f6f83e73f..b238fa93c4152 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/Callout.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Callout/Callout.types.ts
@@ -1,7 +1,4 @@
-import * as React from 'react';
-import { Callout } from './Callout';
 import { IStyle, ITheme } from '../../Styling';
-import { CalloutContent } from './CalloutContent';
 import { DirectionalHint } from '../../common/DirectionalHint';
 import {
   IPoint,
@@ -23,10 +20,10 @@ export interface ICalloutProps {
 
   /**
    * The target that the Callout should try to position itself based on.
-   * It can be either an HTMLElement a querySelector string of a valid HTMLElement
+   * It can be either an Element a querySelector string of a valid Element
    * or a MouseEvent. If MouseEvent is given then the origin point of the event will be used.
    */
-  target?: HTMLElement | string | MouseEvent | IPoint | null;
+  target?: Element | string | MouseEvent | IPoint | null;
 
   /**
    * How the element should be positioned
diff --git a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx
index de0022878e027..1277b102253bf 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.base.tsx
@@ -13,12 +13,13 @@ import {
   IRectangle,
   assign,
   autobind,
-  css,
   elementContains,
   focusFirstChild,
   getWindow,
   getDocument,
-  customizable
+  customizable,
+  css,
+  createRef
 } from '../../Utilities';
 import {
   positionCallout,
@@ -30,9 +31,24 @@ import {
 } from '../../utilities/positioning';
 import { Popup } from '../../Popup';
 import { classNamesFunction } from '../../Utilities';
+import {
+  AnimationClassNames
+} from '../../Styling';
+
+const ANIMATIONS: { [key: number]: string | undefined; } = {
+  [RectangleEdge.top]: AnimationClassNames.slideUpIn10,
+  [RectangleEdge.bottom]: AnimationClassNames.slideDownIn10,
+  [RectangleEdge.left]: AnimationClassNames.slideLeftIn10,
+  [RectangleEdge.right]: AnimationClassNames.slideRightIn10,
+};
 
 const getClassNames = classNamesFunction<ICalloutContentStyleProps, ICalloutContentStyles>();
-const BORDER_WIDTH: number = 1;
+const BORDER_WIDTH = 1;
+const BEAK_ORIGIN_POSITION = { top: 0, left: 0 };
+// Microsoft Edge will overwrite inline styles if there is an animation pertaining to that style.
+// To help ensure that edge will respect the offscreen style opacity
+// filter needs to be added as an additional way to set opacity.
+const OFF_SCREEN_STYLE = { opacity: 0, filter: 'opacity(0)' };
 
 export interface ICalloutState {
   positions?: ICalloutPositionedInfo;
@@ -55,13 +71,13 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
 
   private _classNames: {[key in keyof ICalloutContentStyles]: string };
   private _didSetInitialFocus: boolean;
-  private _hostElement: HTMLDivElement;
-  private _calloutElement: HTMLDivElement;
+  private _hostElement = createRef<HTMLDivElement>();
+  private _calloutElement = createRef<HTMLDivElement>();
   private _targetWindow: Window;
   private _bounds: IRectangle;
   private _maxHeight: number | undefined;
   private _positionAttempts: number;
-  private _target: HTMLElement | MouseEvent | IPoint | null;
+  private _target: Element | MouseEvent | IPoint | null;
   private _setHeightOffsetTimer: number;
 
   constructor(props: ICalloutProps) {
@@ -91,8 +107,8 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
 
   public componentWillUpdate(newProps: ICalloutProps) {
     // If the target element changed, find the new one. If we are tracking target with class name, always find element because we do not know if fabric has rendered a new element and disposed the old element.
-    let newTarget = this._getTarget(newProps);
-    let oldTarget = this._getTarget();
+    const newTarget = this._getTarget(newProps);
+    const oldTarget = this._getTarget();
     if (newTarget !== oldTarget || typeof (newTarget) === 'string' || newTarget instanceof String) {
       this._maxHeight = undefined;
       this._setTargetWindowAndElement(newTarget!);
@@ -116,13 +132,15 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
       return null;
     }
     let {
+      target
+    } = this.props;
+    const {
       getStyles,
       role,
       ariaLabel,
       ariaDescribedBy,
       ariaLabelledBy,
       className,
-      target,
       isBeakVisible,
       beakStyle,
       children,
@@ -134,13 +152,13 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
       onScroll,
     } = this.props;
     target = this._getTarget();
-    let { positions } = this.state;
+    const { positions } = this.state;
 
-    let getContentMaxHeight: number = this._getMaxHeight() + this.state.heightOffset!;
-    let contentMaxHeight: number = calloutMaxHeight! && (calloutMaxHeight! < getContentMaxHeight) ? calloutMaxHeight! : getContentMaxHeight!;
+    const getContentMaxHeight: number = this._getMaxHeight() + this.state.heightOffset!;
+    const contentMaxHeight: number = calloutMaxHeight! && (calloutMaxHeight! < getContentMaxHeight) ? calloutMaxHeight! : getContentMaxHeight!;
     const overflowYHidden = !!finalHeight;
 
-    let beakVisible = isBeakVisible && (!!target);
+    const beakVisible = isBeakVisible && (!!target);
     this._classNames = getClassNames(
       getStyles!,
       {
@@ -157,21 +175,24 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
     );
 
     const overflowStyle: React.CSSProperties = overflowYHidden ? { overflowY: 'hidden' } : {};
-    let content = (
+    // React.CSSProperties does not understand IRawStyle, so the inline animations will need to be cast as any for now.
+    const content = (
       <div
-        ref={ this._resolveRef('_hostElement') }
+        ref={ this._hostElement }
         className={ this._classNames.container }
       >
         <div
-          className={ this._classNames.root }
+          className={ css(this._classNames.root, positions && positions.targetEdge && ANIMATIONS[positions.targetEdge!]) }
+          style={ positions ? positions.elementPosition : OFF_SCREEN_STYLE }
           tabIndex={ -1 } // Safari and Firefox on Mac OS requires this to back-stop click events so focus remains in the Callout.
           // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
-          ref={ this._resolveRef('_calloutElement') }
+          ref={ this._calloutElement }
         >
 
           { beakVisible && (
             <div
               className={ this._classNames.beak }
+              style={ this._getBeakPosition() }
             />) }
           { beakVisible &&
             (<div className={ this._classNames.beakCurtain } />) }
@@ -197,7 +218,7 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
 
   @autobind
   public dismiss(ev?: Event | React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) {
-    let { onDismiss } = this.props;
+    const { onDismiss } = this.props;
 
     if (onDismiss) {
       onDismiss(ev);
@@ -212,8 +233,8 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
   }
 
   protected _dismissOnLostFocus(ev: Event) {
-    let target = ev.target as HTMLElement;
-    let clickedOutsideCallout = this._hostElement && !elementContains(this._hostElement, target);
+    const target = ev.target as HTMLElement;
+    const clickedOutsideCallout = this._hostElement.value && !elementContains(this._hostElement.value, target);
 
     if (
       (!this._target && clickedOutsideCallout) ||
@@ -227,9 +248,9 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
 
   @autobind
   protected _setInitialFocus() {
-    if (this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions) {
+    if (this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions && this._calloutElement.value) {
       this._didSetInitialFocus = true;
-      focusFirstChild(this._calloutElement);
+      focusFirstChild(this._calloutElement.value);
     }
   }
 
@@ -258,17 +279,31 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
     this._async.requestAnimationFrame(() => this._updatePosition());
   }
 
+  private _getBeakPosition(): React.CSSProperties {
+    const { positions } = this.state;
+    const beakPostionStyle: React.CSSProperties = {
+      ...(positions && positions.beakPosition ? positions.beakPosition.elementPosition : null),
+    };
+
+    if (!beakPostionStyle.top && !beakPostionStyle.bottom && !beakPostionStyle.left && !beakPostionStyle.right) {
+      beakPostionStyle.left = BEAK_ORIGIN_POSITION.left;
+      beakPostionStyle.top = BEAK_ORIGIN_POSITION.top;
+    }
+
+    return beakPostionStyle;
+  }
+
   private _updatePosition() {
-    let { positions } = this.state;
-    let hostElement: HTMLElement = this._hostElement;
-    let calloutElement: HTMLElement = this._calloutElement;
+    const { positions } = this.state;
+    const hostElement: HTMLElement | null = this._hostElement.value;
+    const calloutElement: HTMLElement | null = this._calloutElement.value;
 
     if (hostElement && calloutElement) {
       let currentProps: IPositionProps | undefined;
       currentProps = assign(currentProps, this.props);
       currentProps!.bounds = this._getBounds();
       currentProps!.target = this._target!;
-      let newPositions: ICalloutPositionedInfo = positionCallout(currentProps!, hostElement, calloutElement);
+      const newPositions: ICalloutPositionedInfo = positionCallout(currentProps!, hostElement, calloutElement);
 
       // Set the new position only when the positions are not exists or one of the new callout positions are different.
       // The position should not change if the position is within 2 decimal places.
@@ -312,8 +347,8 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
   private _getMaxHeight(): number {
     if (!this._maxHeight) {
       if (this.props.directionalHintFixed && this._target) {
-        let beakWidth = this.props.isBeakVisible ? this.props.beakWidth : 0;
-        let gapSpace = this.props.gapSpace ? this.props.gapSpace : 0;
+        const beakWidth = this.props.isBeakVisible ? this.props.beakWidth : 0;
+        const gapSpace = this.props.gapSpace ? this.props.gapSpace : 0;
         // Since the callout cannot measure it's border size it must be taken into account here. Otherwise it will
         // overlap with the target.
         const totalGap = gapSpace + beakWidth! + BORDER_WIDTH * 2;
@@ -349,17 +384,17 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
     return true;
   }
 
-  private _setTargetWindowAndElement(target: HTMLElement | string | MouseEvent | IPoint | null): void {
+  private _setTargetWindowAndElement(target: Element | string | MouseEvent | IPoint | null): void {
     if (target) {
       if (typeof target === 'string') {
-        let currentDoc: Document = getDocument()!;
-        this._target = currentDoc ? currentDoc.querySelector(target) as HTMLElement : null;
+        const currentDoc: Document = getDocument()!;
+        this._target = currentDoc ? currentDoc.querySelector(target) as Element : null;
         this._targetWindow = getWindow()!;
       } else if ((target as MouseEvent).stopPropagation) {
         this._targetWindow = getWindow((target as MouseEvent).toElement as HTMLElement)!;
         this._target = target;
-      } else if ((target as HTMLElement).getBoundingClientRect) {
-        let targetElement: HTMLElement = target as HTMLElement;
+      } else if ((target as Element).getBoundingClientRect) {
+        const targetElement: Element = target as Element;
         this._targetWindow = getWindow(targetElement)!;
         this._target = target;
         // HTMLImgElements can have x and y values. The check for it being a point must go last.
@@ -373,9 +408,14 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
   }
 
   private _setHeightOffsetEveryFrame(): void {
-    if (this._calloutElement && this.props.finalHeight) {
+    if (this._calloutElement.value && this.props.finalHeight) {
       this._setHeightOffsetTimer = this._async.requestAnimationFrame(() => {
-        const calloutMainElem = this._calloutElement.lastChild as HTMLElement;
+        const calloutMainElem = this._calloutElement.value && this._calloutElement.value.lastChild as HTMLElement;
+
+        if (!calloutMainElem) {
+          return;
+        }
+
         const cardScrollHeight: number = calloutMainElem.scrollHeight;
         const cardCurrHeight: number = calloutMainElem.offsetHeight;
         const scrollDiff: number = cardScrollHeight - cardCurrHeight;
@@ -393,8 +433,8 @@ export class CalloutContentBase extends BaseComponent<ICalloutProps, ICalloutSta
     }
   }
 
-  private _getTarget(props: ICalloutProps = this.props): HTMLElement | string | MouseEvent | IPoint | null {
-    let { useTargetPoint, targetPoint, target } = props;
+  private _getTarget(props: ICalloutProps = this.props): Element | string | MouseEvent | IPoint | null {
+    const { useTargetPoint, targetPoint, target } = props;
     return useTargetPoint ? targetPoint! : target!;
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.styles.ts b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.styles.ts
index 327cf4dd38f6e..1c6721e6ca3c5 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Callout/CalloutContent.styles.ts
@@ -1,26 +1,11 @@
 import {
   HighContrastSelector,
-  AnimationStyles,
   IRawStyle,
   focusClear
 } from '../../Styling';
-import {
-  ICalloutPositionedInfo,
-  RectangleEdge
-} from '../../utilities/positioning';
 import { ICalloutContentStyleProps, ICalloutContentStyles } from './Callout.types';
 
-const BEAK_ORIGIN_POSITION = { top: 0, left: 0 };
-
-const ANIMATIONS: { [key: number]: IRawStyle; } = {
-  [RectangleEdge.top]: AnimationStyles.slideUpIn20,
-  [RectangleEdge.bottom]: AnimationStyles.slideDownIn20,
-  [RectangleEdge.left]: AnimationStyles.slideLeftIn20,
-  [RectangleEdge.right]: AnimationStyles.slideRightIn20,
-};
-
-function getBeakStylePosition(positions?: ICalloutPositionedInfo,
-  beakWidth?: number,
+function getBeakStyle(beakWidth?: number,
   beakStyle?: string): IRawStyle {
   let beakStyleWidth = beakWidth;
 
@@ -30,17 +15,10 @@ function getBeakStylePosition(positions?: ICalloutPositionedInfo,
     beakStyleWidth = 16;
   }
 
-  let beakReactStyle: IRawStyle = {
-    ...(positions && positions.beakPosition ? positions.beakPosition.elementPosition : null),
+  return {
+    height: beakStyleWidth,
+    width: beakStyleWidth
   };
-  beakReactStyle.height = beakStyleWidth;
-  beakReactStyle.width = beakStyleWidth;
-  if (!beakReactStyle.top && !beakReactStyle.bottom && !beakReactStyle.left && !beakReactStyle.right) {
-    beakReactStyle.left = BEAK_ORIGIN_POSITION.left;
-    beakReactStyle.top = BEAK_ORIGIN_POSITION.top;
-  }
-
-  return beakReactStyle;
 }
 
 export const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyles => {
@@ -50,7 +28,6 @@ export const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyl
     overflowYHidden,
     calloutWidth,
     contentMaxHeight,
-    positions,
     beakWidth,
     backgroundColor,
     beakStyle
@@ -83,16 +60,7 @@ export const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyl
       },
       focusClear(),
       className,
-      positions && positions.targetEdge && ANIMATIONS[positions.targetEdge],
-      // Microsoft Edge will overwrite inline styles if there is an animation pertaining to that style.
-      // To help ensure that edge will respect the offscreen style opacity
-      // filter needs to be added as an additional way to set opacity.
-      !positions && {
-        opacity: 0,
-        filter: 'opacity(0)',
-      },
-      positions && { ...positions.elementPosition },
-      !!calloutWidth && { width: calloutWidth },
+      !!calloutWidth && { width: calloutWidth }
     ],
     beak: [
       'ms-Callout-beak',
@@ -104,7 +72,7 @@ export const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyl
         boxSizing: 'border-box',
         transform: 'rotate(45deg)'
       },
-      getBeakStylePosition(positions, beakWidth, beakStyle),
+      getBeakStyle(beakWidth, beakStyle),
       backgroundColor && {
         backgroundColor: backgroundColor
       }
@@ -129,7 +97,6 @@ export const getStyles = (props: ICalloutContentStyleProps): ICalloutContentStyl
         position: 'relative',
         maxHeight: contentMaxHeight
       },
-      !!calloutWidth && { width: calloutWidth },
       overflowYHidden && {
         overflowY: 'hidden'
       },
diff --git a/packages/office-ui-fabric-react/src/components/Callout/CalloutPage.tsx b/packages/office-ui-fabric-react/src/components/Callout/CalloutPage.tsx
index 876d4ef40a184..1ad35f6e42f52 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/CalloutPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/CalloutPage.tsx
@@ -21,7 +21,7 @@ const CalloutCoverExampleCode = require('!raw-loader!office-ui-fabric-react/src/
 
 export class CalloutPage extends React.Component<IComponentDemoPageProps, any> {
   public render() {
-    let cmdBarParamsTextAndIcons: any = { items: items, farItems: null };
+    const cmdBarParamsTextAndIcons: any = { items: items, farItems: null };
 
     return (
       <ComponentPage
diff --git a/packages/office-ui-fabric-react/src/components/Callout/__snapshots__/Callout.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Callout/__snapshots__/Callout.test.tsx.snap
index e0d53d5ed7639..3f49786bdf6d1 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/__snapshots__/Callout.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Callout/__snapshots__/Callout.test.tsx.snap
@@ -17,8 +17,6 @@ exports[`Callout renders Callout correctly 1`] = `
           border-width: 1px;
           box-shadow: 0 0 5px 0px rgba(0,0,0,0.4);
           box-sizing: border-box;
-          filter: opacity(0);
-          opacity: 0;
           outline: transparent;
           position: absolute;
         }
@@ -30,6 +28,12 @@ exports[`Callout renders Callout correctly 1`] = `
         &::-moz-focus-inner {
           border: 0px;
         }
+    style={
+      Object {
+        "filter": "opacity(0)",
+        "opacity": 0,
+      }
+    }
     tabIndex={-1}
   >
     <div
diff --git a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Basic.Example.tsx
index adc178391dff5..efc88b828b773 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Basic.Example.tsx
@@ -23,7 +23,7 @@ export class CalloutBasicExample extends React.Component<{}, ICalloutBaiscExampl
   }
 
   public render() {
-    let { isCalloutVisible } = this.state;
+    const { isCalloutVisible } = this.state;
 
     return (
       <div className='ms-CalloutExample'>
diff --git a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Cover.Example.tsx b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Cover.Example.tsx
index a8e1dad35fcf8..7ab156a067e62 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Cover.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Cover.Example.tsx
@@ -43,7 +43,7 @@ export class CalloutCoverExample extends React.Component<{}, ICalloutCoverExampl
   }
 
   public render() {
-    let { isCalloutVisible, directionalHint } = this.state;
+    const { isCalloutVisible, directionalHint } = this.state;
     // ms-Callout-smallbeak is used in this directional example to reflect all the positions. Large beak will disable some position to avoid beak over the callout edge.
     return (
       <div className='ms-CalloutExample'>
diff --git a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Directional.Example.tsx b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Directional.Example.tsx
index 37d72e82d1413..925e5fd74701d 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Directional.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Directional.Example.tsx
@@ -49,7 +49,7 @@ export class CalloutDirectionalExample extends React.Component<{}, ICalloutDirec
   }
 
   public render() {
-    let { isCalloutVisible, isBeakVisible, directionalHint, gapSpace, beakWidth } = this.state;
+    const { isCalloutVisible, isBeakVisible, directionalHint, gapSpace, beakWidth } = this.state;
     //  ms-Callout-smallbeak is used in this directional example to reflect all the positions. Large beak will disable some position to avoid beak over the callout edge.
     return (
       <div className='ms-CalloutExample'>
diff --git a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Nested.Example.tsx b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Nested.Example.tsx
index 9ad3df311e054..f314cac7c8e3e 100644
--- a/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Nested.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Callout/examples/Callout.Nested.Example.tsx
@@ -24,7 +24,7 @@ export class CalloutNestedExample extends React.Component<ICalloutNestedExampleP
   }
 
   public render() {
-    let { isCalloutVisible } = this.state;
+    const { isCalloutVisible } = this.state;
 
     return (
       <div className='ms-CalloutExample'>
diff --git a/packages/office-ui-fabric-react/src/components/Check/Check.base.tsx b/packages/office-ui-fabric-react/src/components/Check/Check.base.tsx
new file mode 100644
index 0000000000000..98086779c03fd
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Check/Check.base.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  classNamesFunction,
+  customizable,
+} from '../../Utilities';
+import {
+  ICheckProps,
+  ICheckStyleProps,
+  ICheckStyles
+} from './Check.types';
+import { Icon } from '../../Icon';
+import { getStyles } from './Check.styles';
+
+const getClassNames = classNamesFunction<ICheckStyleProps, ICheckStyles>();
+
+@customizable('Check', ['theme'])
+export class CheckBase extends BaseComponent<ICheckProps, {}> {
+  public static defaultProps: ICheckProps = {
+    checked: false
+  };
+
+  public shouldComponentUpdate(newProps: ICheckProps) {
+    return this.props.checked !== newProps.checked;
+  }
+
+  public render(): JSX.Element {
+    const {
+      checked,
+      className,
+      theme
+    } = this.props;
+
+    const classNames = getClassNames(getStyles!, { theme: theme!, className, checked });
+
+    return (
+      <div className={ classNames.root } >
+        <Icon iconName='CircleRing' className={ classNames.circle } />
+        <Icon iconName='StatusCircleCheckmark' className={ classNames.check } />
+      </div>
+    );
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/Check/Check.styles.ts b/packages/office-ui-fabric-react/src/components/Check/Check.styles.ts
new file mode 100644
index 0000000000000..6cae0b2316206
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Check/Check.styles.ts
@@ -0,0 +1,139 @@
+import { ICheckStyleProps, ICheckStyles } from './Check.types';
+import {
+  HighContrastSelector,
+  IStyle,
+} from '../../Styling';
+
+export const getStyles = (
+  props: ICheckStyleProps
+): ICheckStyles => {
+  const {
+    checkBoxHeight = '18px',
+    checked,
+    className,
+    theme,
+  } = props;
+
+  const { palette, semanticColors } = theme;
+
+  const sharedCircleCheck: IStyle = {
+    fontSize: checkBoxHeight,
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: checkBoxHeight,
+    height: checkBoxHeight,
+    textAlign: 'center',
+    verticalAlign: 'middle'
+  };
+
+  return ({
+    root: [
+      'ms-Check',
+
+      {
+        // lineHeight currently needs to be a string to output without 'px'
+        lineHeight: '1',
+        width: checkBoxHeight,
+        height: checkBoxHeight,
+        verticalAlign: 'top',
+        position: 'relative',
+        userSelect: 'none',
+
+        selectors: {
+          ':before': {
+            content: '""',
+            position: 'absolute',
+            top: '1px',
+            right: '1px',
+            bottom: '1px',
+            left: '1px',
+            borderRadius: '50%',
+            opacity: 1,
+            background: semanticColors.bodyBackground,
+          },
+
+          /**
+           * TODO: Come back to this once .checkHost has been
+           * converted to mergeStyles
+           */
+          '.checkHost:hover &, .checkHost:focus &, &:hover, &:focus': {
+            opacity: 1
+          }
+        }
+      },
+
+      checked && [
+        'is-checked',
+        {
+          selectors: {
+            ':before': {
+              background: palette.themePrimary,
+              opacity: 1,
+              selectors: {
+                [HighContrastSelector]: {
+                  background: 'Window'
+                }
+              }
+            }
+          }
+        },
+      ],
+      className
+    ],
+
+    circle: [
+      'ms-Check-circle',
+      sharedCircleCheck,
+
+      {
+        color: palette.neutralTertiaryAlt,
+
+        selectors: {
+          [HighContrastSelector]: {
+            color: 'WindowText'
+          }
+        }
+      },
+
+      checked && {
+        color: palette.white
+      }
+    ],
+
+    check: [
+      'ms-Check-check',
+      sharedCircleCheck,
+
+      {
+        opacity: 0,
+        color: palette.neutralTertiaryAlt,
+        fontSize: '16px',
+        left: '.5px',
+
+        selectors: {
+          ':hover': {
+            opacity: 1
+          },
+
+          [HighContrastSelector]: {
+            MsHighContrastAdjust: 'none'
+          }
+        }
+      },
+
+      checked && {
+        opacity: 1,
+        color: palette.white,
+        fontWeight: 900,
+
+        selectors: {
+          [HighContrastSelector]: {
+            border: 'none',
+            color: 'WindowText'
+          }
+        }
+      }
+    ]
+  });
+};
diff --git a/packages/office-ui-fabric-react/src/components/Check/Check.tsx b/packages/office-ui-fabric-react/src/components/Check/Check.tsx
index 0141ca290999d..fb9889e23e57d 100644
--- a/packages/office-ui-fabric-react/src/components/Check/Check.tsx
+++ b/packages/office-ui-fabric-react/src/components/Check/Check.tsx
@@ -1,62 +1,13 @@
-import * as React from 'react';
-import { BaseComponent, css } from '../../Utilities';
-import { Icon } from '../../Icon';
-import * as stylesImport from './Check.scss';
-const styles: any = stylesImport;
-
-export interface ICheckProps extends React.Props<Check> {
-  /**
-   * Gets the component ref.
-   */
-  componentRef?: () => void;
-
-  /**
-   * Whether or not this menu item is currently checked.
-   * @defaultvalue false
-   */
-  checked?: boolean;
-  /**
-   * Deprecated at v0.65.1 and will be removed by v 1.0. Use 'checked' instead.
-   * @deprecated
-   */
-  isChecked?: boolean;
-
-  alwaysShowCheck?: boolean;
-}
-
-export class Check extends BaseComponent<ICheckProps, {}> {
-  public static defaultProps = {
-    isChecked: false
-  };
-
-  public shouldComponentUpdate(newProps: ICheckProps) {
-    return this.props.isChecked !== newProps.isChecked || this.props.checked !== newProps.checked;
-  }
-
-  public render() {
-    let { isChecked, checked } = this.props;
-
-    isChecked = isChecked || checked;
-
-    return (
-      <div
-        className={ css(
-          'ms-Check',
-          styles.root,
-          {
-            [`is-checked ${styles.rootIsChecked}`]: isChecked
-          }
-        ) }
-      >
-        { Icon({
-          className: 'ms-Check-circle ' + styles.circle,
-          iconName: 'CircleRing'
-        }) }
-        { Icon({
-          className: 'ms-Check-check ' + styles.check,
-          iconName: 'StatusCircleCheckmark'
-        }) }
-      </div>
-    );
-  }
-}
+import { styled } from '../../Utilities';
+import {
+  ICheckProps,
+  ICheckStyleProps,
+  ICheckStyles
+} from './Check.types';
+import { CheckBase } from './Check.base';
+import { getStyles } from './Check.styles';
+
+export const Check = styled<ICheckProps, ICheckStyleProps, ICheckStyles>(
+  CheckBase,
+  getStyles
+);
diff --git a/packages/office-ui-fabric-react/src/components/Check/Check.types.ts b/packages/office-ui-fabric-react/src/components/Check/Check.types.ts
new file mode 100644
index 0000000000000..eaee9b82f93cc
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Check/Check.types.ts
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { CheckBase } from './Check.base';
+import { IStyle, ITheme } from '@uifabric/styling';
+import { IStyleFunction } from '@uifabric/utilities';
+
+export interface ICheckProps extends React.Props<CheckBase> {
+  /**
+   * Gets the component ref.
+   */
+  componentRef?: (component: ICheckProps) => void;
+
+  /**
+   * Whether or not this menu item is currently checked.
+   * @defaultvalue false
+   */
+  checked?: boolean;
+
+  /**
+  * Call to provide customized styling that will layer on top of the variant rules
+  */
+  getStyles?: IStyleFunction<ICheckStyleProps, ICheckStyles>;
+
+  /**
+   * Flag to always show the check icon. Not currently working.
+   */
+  alwaysShowCheck?: boolean;
+
+  /**
+   * Theme provided by HOC.
+   */
+  theme?: ITheme;
+
+  /**
+   * Additional css class to apply to the Check
+   * @defaultvalue undefined
+   */
+  className?: string;
+}
+
+export interface ICheckStyleProps {
+  /**
+   * Accept theme prop.
+   */
+  theme: ITheme;
+
+  /**
+   * Accept custom classNames
+   */
+  className?: string;
+
+  /**
+   * Accept custom checkBox size in pixels.
+   * @defaultvalue '18px'
+   */
+  checkBoxHeight?: string;
+
+  checked?: boolean;
+}
+
+export interface ICheckStyles {
+  /**
+   * Style for the root element.
+   */
+  root: IStyle;
+
+  /**
+   * The 'check' icon styles.
+   */
+  check: IStyle;
+
+  /**
+   * The 'circle' icon styles.
+   */
+  circle: IStyle;
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Check/index.ts b/packages/office-ui-fabric-react/src/components/Check/index.ts
index 96b6c5ff96424..8be72c0910ca8 100644
--- a/packages/office-ui-fabric-react/src/components/Check/index.ts
+++ b/packages/office-ui-fabric-react/src/components/Check/index.ts
@@ -1 +1,3 @@
-export * from './Check';
\ No newline at end of file
+export * from './Check';
+export * from './Check.base';
+export * from './Check.types';
diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.test.tsx b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.test.tsx
index 6073672f66c56..a4ad3d37d173d 100644
--- a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.test.tsx
@@ -10,7 +10,7 @@ describe('Checkbox', () => {
         label='Standard checkbox'
         ariaDescribedBy={ 'descriptionID' }
       />);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx
index 1062305e0dccb..f466a7a4b0668 100644
--- a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx
+++ b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.tsx
@@ -3,20 +3,14 @@ import {
   BaseComponent,
   autobind,
   getId,
-  memoize
+  createRef,
+  customizable
 } from '../../Utilities';
 import { Icon } from '../../Icon';
 import {
   ICheckbox,
   ICheckboxProps,
-  ICheckboxStyles
 } from './Checkbox.types';
-import {
-  customizable
-} from '../../Utilities';
-import {
-  mergeStyles
-} from '../../Styling';
 import {
   ICheckboxClassNames,
   getClassNames
@@ -34,7 +28,7 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
     boxSide: 'start'
   };
 
-  private _checkBox: HTMLInputElement;
+  private _checkBox = createRef<HTMLInputElement>();
   private _id: string;
   private _classNames: ICheckboxClassNames;
 
@@ -83,6 +77,8 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
       styles: customStyles,
       onRenderLabel = this._onRenderLabel,
       checkmarkIconProps,
+      ariaPositionInSet,
+      ariaSetSize
     } = this.props;
 
     const isChecked = checked === undefined ? this.state.isChecked : checked;
@@ -104,7 +100,7 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
         { ...(checked !== undefined && { checked }) }
         { ...(defaultChecked !== undefined && { defaultChecked }) }
         disabled={ disabled }
-        ref={ this._resolveRef('_checkBox') }
+        ref={ this._checkBox }
         name={ name }
         id={ this._id }
         role='checkbox'
@@ -118,10 +114,12 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
         aria-label={ ariaLabel }
         aria-labelledby={ ariaLabelledBy }
         aria-describedby={ ariaDescribedBy }
+        aria-posinset={ ariaPositionInSet }
+        aria-setsize={ ariaSetSize }
       >
         <label className={ this._classNames.label } htmlFor={ this._id } >
           <div className={ this._classNames.checkbox }>
-            <Icon iconName='CheckMark' {...checkmarkIconProps} className={ this._classNames.checkmark } />
+            <Icon iconName='CheckMark' { ...checkmarkIconProps } className={ this._classNames.checkmark } />
           </div>
           { onRenderLabel(this.props, this._onRenderLabel) }
         </label>
@@ -134,8 +132,8 @@ export class Checkbox extends BaseComponent<ICheckboxProps, ICheckboxState> impl
   }
 
   public focus(): void {
-    if (this._checkBox) {
-      this._checkBox.focus();
+    if (this._checkBox.value) {
+      this._checkBox.value.focus();
     }
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.types.ts b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.types.ts
index 67127151d734e..2a9398d9e36c2 100644
--- a/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Checkbox/Checkbox.types.ts
@@ -91,6 +91,16 @@ export interface ICheckboxProps extends React.ButtonHTMLAttributes<HTMLElement |
    */
   ariaDescribedBy?: string;
 
+  /**
+   * The position in the parent set (if in a set) for aria-posinset.
+   */
+  ariaPositionInSet?: number;
+
+  /**
+  * The total size of the parent set (if in a set) for aria-setsize.
+  */
+  ariaSetSize?: number;
+
   /**
    * Custom styles for this component
    */
diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
index a40e7894da1ed..01505cb4f7b2f 100644
--- a/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap
@@ -7,6 +7,8 @@ exports[`Checkbox renders Checkbox correctly 1`] = `
   aria-disabled={undefined}
   aria-label={undefined}
   aria-labelledby={undefined}
+  aria-posinset={undefined}
+  aria-setsize={undefined}
   className=
       ms-Checkbox
       is-enabled
@@ -104,7 +106,6 @@ exports[`Checkbox renders Checkbox correctly 1`] = `
     >
       <i
         aria-hidden={true}
-        aria-label={undefined}
         className=
 
             {
diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.Basic.Example.tsx
index bcf73414b112c..b92e108a7b1c1 100644
--- a/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.Basic.Example.tsx
@@ -1,9 +1,5 @@
 import * as React from 'react';
-import {
-  Checkbox,
-  ICheckboxStyles,
-  ICheckboxProps
-} from 'office-ui-fabric-react/lib/Checkbox';
+import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
 
 export interface ICheckboxBasicExampleState {
   isChecked: boolean;
@@ -13,16 +9,10 @@ export class CheckboxBasicExample extends React.Component<{}, ICheckboxBasicExam
   constructor(props: {}) {
     super(props);
 
-    this.state = {
-      isChecked: false
-    };
-
     this._onCheckboxChange = this._onCheckboxChange.bind(this);
   }
 
   public render() {
-    let { isChecked } = this.state;
-
     return (
       <div>
         <Checkbox
diff --git a/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.ImplementationExamples.tsx b/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.ImplementationExamples.tsx
index 7b853909a62c2..93e339a65b57c 100644
--- a/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.ImplementationExamples.tsx
+++ b/packages/office-ui-fabric-react/src/components/Checkbox/examples/Checkbox.ImplementationExamples.tsx
@@ -27,9 +27,9 @@ export class CheckboxImplementationExamples extends React.Component<{}, ICheckbo
   }
 
   public render() {
-    let { isChecked } = this.state;
+    const { isChecked } = this.state;
 
-    let styles: ICheckboxStyles = {
+    const styles: ICheckboxStyles = {
       root: {
         marginTop: '10px'
       }
diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss
index 44b91b2d53912..62bc6086d1d6e 100644
--- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.scss
@@ -30,7 +30,6 @@ $radioButton-border-disabled-color: $radioButton-background-unselected-disabled-
 
 $ms-choiceField-field-size: 20px;
 $ms-choiceField-image-size: 32px;
-$ms-choiceField-text-height: 32px;
 $ms-choiceField-iconField-size: 96px;
 $ms-choiceField-transition-duration: 200ms;
 $ms-choiceField-transition-duration-inner: 150ms;
@@ -43,6 +42,12 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
   display: block;
 }
 
+.optionsContainIconOrImage {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
 .choiceField {
   display: flex;
   align-items: center;
@@ -195,26 +200,25 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
   @include ms-margin(0, 4px, 4px, 0);
   @include ms-padding-left(0px);
   @include ms-bgColor-neutralLighter;
+  height: 100%;
 
   $radioButtonSpacing: 3px;
   $radioButtonInnerSize: 5px;
 
-  height: $ms-choiceField-iconField-size;
-  width: $ms-choiceField-iconField-size;
-
   .fieldIsImage, .fieldIsIcon {
 
     display: inline-block;
-    box-sizing: border-box;
-    min-width: $ms-choiceField-iconField-size;
+    box-sizing: content-box;
     cursor: pointer;
     padding-top: 22px;
     margin: 0;
     text-align: center;
     transition: all $ms-choiceField-transition-duration ease;
     border: 2px solid transparent;
-    height: $ms-choiceField-iconField-size;
-    width: $ms-choiceField-iconField-size;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
 
     &.fieldIsDisabled {
       cursor: default;
@@ -229,11 +233,18 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
       }
     }
 
+    &.imageIsLarge {
+      .innerField {
+        padding-left: 24px;
+        padding-right: 24px;
+      }
+    }
+
     .innerField {
       position: relative;
-      padding: 0 28px;
-      height: $ms-choiceField-image-size;
-      width: $ms-choiceField-image-size;
+      display: inline-block;
+      padding-left: 30px;
+      padding-right: 30px;
 
       .imageWrapper {
         padding-bottom: 2px;
@@ -260,8 +271,8 @@ $ms-choiceField-transition-timing: cubic-bezier(.4, 0, .23, 1);
       $lineHeight: 15px;
       display: block;
       position: relative;
-      margin: 4px 0 2px 0;
-      height: $ms-choiceField-text-height;
+      margin: 4px 8px;
+      height: $lineHeight*2;
       line-height: $lineHeight;
       overflow: hidden;
       white-space: pre-wrap;
diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.test.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.test.tsx
index e611afd43b23f..0e635f4f66c38 100644
--- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.test.tsx
@@ -14,7 +14,7 @@ const TEST_OPTIONS: IChoiceGroupOption[] = [
   { key: '2', text: '2' },
   { key: '3', text: '3' }
 ];
-const QUERY_SELECTOR: string = '.ms-ChoiceField-input';
+const QUERY_SELECTOR = '.ms-ChoiceField-input';
 
 describe('ChoiceGroup', () => {
 
@@ -25,7 +25,7 @@ describe('ChoiceGroup', () => {
         required
       />
     );
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
@@ -35,7 +35,6 @@ describe('ChoiceGroup', () => {
       { key: '2', text: '2' },
       { key: '3', text: '3' }
     ];
-    let exception;
     let threwException = false;
     let choiceGroup;
     try {
@@ -47,13 +46,12 @@ describe('ChoiceGroup', () => {
         />
       );
     } catch (e) {
-      exception = e;
       threwException = true;
     }
     expect(threwException).toEqual(false);
 
-    let renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance);
-    let choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR);
+    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance);
+    const choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR);
 
     expect((choiceOptions[0] as HTMLInputElement).checked).toEqual(false);
     expect((choiceOptions[1] as HTMLInputElement).checked).toEqual(false);
@@ -84,7 +82,6 @@ describe('ChoiceGroup', () => {
       { key: '2', text: '2' },
       { key: '3', text: '3' }
     ];
-    let exception;
     let threwException = false;
     let choiceGroup;
     try {
@@ -96,13 +93,12 @@ describe('ChoiceGroup', () => {
         />
       );
     } catch (e) {
-      exception = e;
       threwException = true;
     }
     expect(threwException).toEqual(false);
 
-    let renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance);
-    let choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR);
+    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance);
+    const choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR);
 
     expect((choiceOptions[0] as HTMLInputElement).disabled).toEqual(true);
     expect((choiceOptions[1] as HTMLInputElement).disabled).toEqual(false);
@@ -115,7 +111,6 @@ describe('ChoiceGroup', () => {
       { key: '2', text: '2' },
       { key: '3', text: '3' }
     ];
-    let exception;
     let threwException = false;
     let choiceGroup;
     try {
@@ -128,13 +123,12 @@ describe('ChoiceGroup', () => {
         />
       );
     } catch (e) {
-      exception = e;
       threwException = true;
     }
     expect(threwException).toEqual(false);
 
-    let renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance);
-    let choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR);
+    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance);
+    const choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR);
 
     expect((choiceOptions[0] as HTMLInputElement).disabled).toEqual(true);
     expect((choiceOptions[1] as HTMLInputElement).disabled).toEqual(true);
@@ -142,14 +136,14 @@ describe('ChoiceGroup', () => {
   });
 
   it('can act as an uncontrolled component', () => {
-    let choiceGroup = ReactTestUtils.renderIntoDocument<ChoiceGroup>(
+    const choiceGroup = ReactTestUtils.renderIntoDocument<ChoiceGroup>(
       <ChoiceGroup
         defaultSelectedKey='1'
         options={ TEST_OPTIONS }
       />
     );
-    let renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance);
-    let choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR);
+    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance);
+    const choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR);
 
     expect((choiceOptions[0] as HTMLInputElement).checked).toEqual(true);
 
@@ -164,15 +158,15 @@ describe('ChoiceGroup', () => {
       _selectedItem = item;
     };
 
-    let choiceGroup = ReactTestUtils.renderIntoDocument<ChoiceGroup>(
+    const choiceGroup = ReactTestUtils.renderIntoDocument<ChoiceGroup>(
       <ChoiceGroup
         selectedKey='1'
         options={ TEST_OPTIONS }
         onChange={ onChange }
       />
     );
-    let renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance);
-    let choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR);
+    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance);
+    const choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR);
 
     expect((choiceOptions[0] as HTMLInputElement).checked).toEqual(true);
 
@@ -185,10 +179,7 @@ describe('ChoiceGroup', () => {
   });
 
   it('extra <input> attributes appear in dom if specified', () => {
-    let _selectedItem;
-    const onChange = (ev: React.FormEvent<HTMLElement | HTMLInputElement>, item: IChoiceGroupOption | undefined): void => {
-      _selectedItem = item;
-    };
+    const onChange = (ev: React.FormEvent<HTMLElement | HTMLInputElement>, item: IChoiceGroupOption | undefined): void => undefined;
 
     const choiceGroup = ReactTestUtils.renderIntoDocument<ChoiceGroup>(
       <ChoiceGroup
diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx
index dd6dae41c0db9..ecc83d3b3cf3e 100644
--- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx
@@ -9,7 +9,8 @@ import {
   css,
   getId,
   getNativeProps,
-  inputProperties
+  inputProperties,
+  createRef
 } from '../../Utilities';
 import * as stylesImport from './ChoiceGroup.scss';
 const styles: any = stylesImport;
@@ -28,7 +29,7 @@ export class ChoiceGroup extends BaseComponent<IChoiceGroupProps, IChoiceGroupSt
 
   private _id: string;
   private _labelId: string;
-  private _inputElement: HTMLInputElement | null;
+  private _inputElement = createRef<HTMLInputElement>();
 
   constructor(props: IChoiceGroupProps, ) {
     super(props);
@@ -61,8 +62,8 @@ export class ChoiceGroup extends BaseComponent<IChoiceGroupProps, IChoiceGroupSt
   }
 
   public render() {
-    let { label, options, className, required } = this.props;
-    let { keyChecked, keyFocused } = this.state;
+    const { label, options, className, required } = this.props;
+    const { keyChecked, keyFocused } = this.state;
 
     return (
       // Need to assign role application on containing div because JAWS doesn't call OnKeyDown without this role
@@ -75,64 +76,69 @@ export class ChoiceGroup extends BaseComponent<IChoiceGroupProps, IChoiceGroupSt
           { this.props.label && (
             <Label className={ className } required={ required } id={ this._id + '-label' }>{ label }</Label>
           ) }
+          <div
+            className={ css('ms-ChoiceFieldGroup-flexContainer', options!.some(
+              option => Boolean(option.iconProps || option.imageSrc)
+            ) && styles.optionsContainIconOrImage) }
+          >
+            { options!.map((option: IChoiceGroupOption) => {
+              const {
+                onRenderField = this._onRenderField,
+                onRenderLabel = this._onRenderLabel
+              } = option;
 
-          { options!.map((option: IChoiceGroupOption) => {
-            let {
-              onRenderField = this._onRenderField,
-              onRenderLabel = this._onRenderLabel
-            } = option;
+              // Merge internal props into option
+              assign(option, {
+                checked: option.key === keyChecked,
+                disabled: option.disabled || this.props.disabled,
+                id: `${this._id}-${option.key}`,
+                labelId: `${this._labelId}-${option.key}`,
+                onRenderLabel
+              });
 
-            // Merge internal props into option
-            assign(option, {
-              checked: option.key === keyChecked,
-              disabled: option.disabled || this.props.disabled,
-              id: `${this._id}-${option.key}`,
-              labelId: `${this._labelId}-${option.key}`,
-              onRenderLabel
-            });
-
-            return (
-              <div
-                key={ option.key }
-                className={ css('ms-ChoiceField', styles.choiceField, {
-                  ['ms-ChoiceField--image ' + styles.choiceFieldIsImage]: !!option.imageSrc,
-                  ['ms-ChoiceField--icon ' + styles.choiceFieldIsIcon]: !!option.iconProps,
-                  ['is-inFocus ' + styles.choiceFieldIsInFocus]: option.key === keyFocused
-                })
-                }
-              >
-                <div className={ css('ms-ChoiceField-wrapper', styles.choiceFieldWrapper) }>
-                  <input
-                    ref={ this._resolveRef('_inputElement') }
-                    id={ option.id }
-                    className={ css('ms-ChoiceField-input', styles.input, {
-                      ['ms-ChoiceField--image ' + styles.inputHasImage]: !!option.imageSrc,
-                      ['ms-ChoiceField--icon ' + styles.inputHasIcon]: !!option.iconProps
-                    }) }
-                    type='radio'
-                    name={ this.props.name || this._id }
-                    disabled={ option.disabled || this.props.disabled }
-                    checked={ option.key === keyChecked }
-                    required={ required }
-                    onChange={ this._onChange.bind(this, option) }
-                    onFocus={ this._onFocus.bind(this, option) }
-                    onBlur={ this._onBlur.bind(this, option) }
-                    aria-labelledby={ option.id }
-                    { ...getNativeProps(option, inputProperties) }
-                  />
-                  { onRenderField(option, this._onRenderField) }
+              return (
+                <div
+                  key={ option.key }
+                  className={ css('ms-ChoiceField', styles.choiceField, {
+                    ['ms-ChoiceField--image ' + styles.choiceFieldIsImage]: !!option.imageSrc,
+                    ['ms-ChoiceField--icon ' + styles.choiceFieldIsIcon]: !!option.iconProps,
+                    ['is-inFocus ' + styles.choiceFieldIsInFocus]: option.key === keyFocused
+                  })
+                  }
+                >
+                  <div className={ css('ms-ChoiceField-wrapper', styles.choiceFieldWrapper) }>
+                    <input
+                      ref={ this._inputElement }
+                      id={ option.id }
+                      className={ css('ms-ChoiceField-input', styles.input, {
+                        ['ms-ChoiceField--image ' + styles.inputHasImage]: !!option.imageSrc,
+                        ['ms-ChoiceField--icon ' + styles.inputHasIcon]: !!option.iconProps
+                      }) }
+                      type='radio'
+                      name={ this.props.name || this._id }
+                      disabled={ option.disabled || this.props.disabled }
+                      checked={ option.key === keyChecked }
+                      required={ required }
+                      onChange={ this._onChange.bind(this, option) }
+                      onFocus={ this._onFocus.bind(this, option) }
+                      onBlur={ this._onBlur.bind(this, option) }
+                      aria-labelledby={ option.labelId }
+                      { ...getNativeProps(option, inputProperties) }
+                    />
+                    { onRenderField(option, this._onRenderField) }
+                  </div>
                 </div>
-              </div>
-            );
-          }) }
+              );
+            }) }
+          </div>
         </div>
       </div>
     );
   }
 
   public focus() {
-    if (this._inputElement) {
-      this._inputElement.focus();
+    if (this._inputElement.value) {
+      this._inputElement.value.focus();
     }
   }
 
@@ -152,7 +158,9 @@ export class ChoiceGroup extends BaseComponent<IChoiceGroupProps, IChoiceGroupSt
 
   private _onRenderField(option: IChoiceGroupOption) {
 
-    let { onRenderLabel } = option;
+    const { onRenderLabel } = option;
+    const imageSize = option.imageSize ? option.imageSize : { width: 32, height: 32 };
+    const imageIsLarge: boolean = imageSize.width > 71 || imageSize.height > 71;
 
     return (
       <label
@@ -161,12 +169,16 @@ export class ChoiceGroup extends BaseComponent<IChoiceGroupProps, IChoiceGroupSt
           ['ms-ChoiceField-field--image ' + styles.fieldIsImage]: !!option.imageSrc,
           ['ms-ChoiceField--icon ' + styles.fieldIsIcon]: !!option.iconProps,
           ['is-checked ' + styles.fieldIsChecked]: option.checked,
-          ['is-disabled ' + styles.fieldIsDisabled]: option.disabled
+          ['is-disabled ' + styles.fieldIsDisabled]: option.disabled,
+          ['is-largeImage ' + styles.imageIsLarge]: !!option.imageSrc && imageIsLarge
         }) }
       >
         {
           option.imageSrc && (
-            <div className={ css('ms-ChoiceField-innerField', styles.innerField) }>
+            <div
+              className={ css('ms-ChoiceField-innerField', styles.innerField) }
+              style={ { height: imageSize.height, width: imageSize.width } }
+            >
               <div
                 className={ css(
                   'ms-ChoiceField-imageWrapper',
@@ -178,8 +190,8 @@ export class ChoiceGroup extends BaseComponent<IChoiceGroupProps, IChoiceGroupSt
                 <Image
                   src={ option.imageSrc }
                   alt={ option.imageAlt ? option.imageAlt : '' }
-                  width={ option.imageSize ? option.imageSize.width : undefined }
-                  height={ option.imageSize ? option.imageSize.height : undefined }
+                  width={ imageSize.width }
+                  height={ imageSize.height }
                 />
               </div>
               <div
@@ -193,8 +205,8 @@ export class ChoiceGroup extends BaseComponent<IChoiceGroupProps, IChoiceGroupSt
                 <Image
                   src={ option.selectedImageSrc }
                   alt={ option.imageAlt ? option.imageAlt : '' }
-                  width={ option.imageSize ? option.imageSize.width : undefined }
-                  height={ option.imageSize ? option.imageSize.height : undefined }
+                  width={ imageSize.width }
+                  height={ imageSize.height }
                 />
               </div>
             </div>
@@ -212,7 +224,10 @@ export class ChoiceGroup extends BaseComponent<IChoiceGroupProps, IChoiceGroupSt
         {
           option.imageSrc || option.iconProps
             ? (
-              <div className={ css('ms-ChoiceField-labelWrapper', styles.labelWrapper) }>
+              <div
+                className={ css('ms-ChoiceField-labelWrapper', styles.labelWrapper) }
+                style={ { maxWidth: imageSize.width * 2 } }
+              >
                 { onRenderLabel!(option) }
               </div>
             ) : onRenderLabel!(option)
@@ -228,7 +243,7 @@ export class ChoiceGroup extends BaseComponent<IChoiceGroupProps, IChoiceGroupSt
   }
 
   private _onChange(option: IChoiceGroupOption, evt: React.FormEvent<HTMLInputElement>) {
-    let { onChanged, onChange, selectedKey } = this.props;
+    const { onChanged, onChange, selectedKey } = this.props;
 
     // Only manage state in uncontrolled scenarios.
     if (selectedKey === undefined) {
diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.types.ts b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.types.ts
index 9d1ac742fdcf3..c33df4544c589 100644
--- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.types.ts
@@ -89,6 +89,7 @@ export interface IChoiceGroupOption extends React.HTMLAttributes<HTMLElement | H
 
   /**
    * The width and height of the image in px for choice field.
+   * @default { width: 32, height: 32 }
    */
   imageSize?: { width: number, height: number };
 
diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.tsx
index 808512db08e76..d1c26163ae121 100644
--- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupPage.tsx
@@ -39,6 +39,8 @@ export class ChoiceGroupPage extends React.Component<IComponentDemoPageProps, {}
             </ExampleCard>
           </div>
         }
+        allowNativeProps={ true }
+        nativePropsElement={ 'input' }
         propertiesTables={
           <PropertiesTableSet
             sources={ [
@@ -88,7 +90,7 @@ export class ChoiceGroupPage extends React.Component<IComponentDemoPageProps, {}
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...ChoiceGroupStatus}
+            { ...ChoiceGroupStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/__snapshots__/ChoiceGroup.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ChoiceGroup/__snapshots__/ChoiceGroup.test.tsx.snap
index b972e02a5a0de..9eaa246cf399c 100644
--- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/__snapshots__/ChoiceGroup.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/__snapshots__/ChoiceGroup.test.tsx.snap
@@ -11,100 +11,104 @@ exports[`ChoiceGroup renders ChoiceGroup correctly 1`] = `
     role="radiogroup"
   >
     <div
-      className="ms-ChoiceField"
+      className="ms-ChoiceFieldGroup-flexContainer"
     >
       <div
-        className="ms-ChoiceField-wrapper"
+        className="ms-ChoiceField"
       >
-        <input
-          aria-labelledby="ChoiceGroup0-1"
-          checked={false}
-          className="ms-ChoiceField-input"
-          data-automation-id="auto1"
-          disabled={undefined}
-          id="ChoiceGroup0-1"
-          name="ChoiceGroup0"
-          onBlur={[Function]}
-          onChange={[Function]}
-          onFocus={[Function]}
-          required={true}
-          type="radio"
-        />
-        <label
-          className="ms-ChoiceField-field"
-          htmlFor="ChoiceGroup0-1"
+        <div
+          className="ms-ChoiceField-wrapper"
         >
-          <span
-            className="ms-Label"
-            id="ChoiceGroupLabel1-1"
+          <input
+            aria-labelledby="ChoiceGroupLabel1-1"
+            checked={false}
+            className="ms-ChoiceField-input"
+            data-automation-id="auto1"
+            disabled={undefined}
+            id="ChoiceGroup0-1"
+            name="ChoiceGroup0"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            required={true}
+            type="radio"
+          />
+          <label
+            className="ms-ChoiceField-field"
+            htmlFor="ChoiceGroup0-1"
           >
-            1
-          </span>
-        </label>
+            <span
+              className="ms-Label"
+              id="ChoiceGroupLabel1-1"
+            >
+              1
+            </span>
+          </label>
+        </div>
       </div>
-    </div>
-    <div
-      className="ms-ChoiceField"
-    >
       <div
-        className="ms-ChoiceField-wrapper"
+        className="ms-ChoiceField"
       >
-        <input
-          aria-labelledby="ChoiceGroup0-2"
-          checked={false}
-          className="ms-ChoiceField-input"
-          disabled={undefined}
-          id="ChoiceGroup0-2"
-          name="ChoiceGroup0"
-          onBlur={[Function]}
-          onChange={[Function]}
-          onFocus={[Function]}
-          required={true}
-          type="radio"
-        />
-        <label
-          className="ms-ChoiceField-field"
-          htmlFor="ChoiceGroup0-2"
+        <div
+          className="ms-ChoiceField-wrapper"
         >
-          <span
-            className="ms-Label"
-            id="ChoiceGroupLabel1-2"
+          <input
+            aria-labelledby="ChoiceGroupLabel1-2"
+            checked={false}
+            className="ms-ChoiceField-input"
+            disabled={undefined}
+            id="ChoiceGroup0-2"
+            name="ChoiceGroup0"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            required={true}
+            type="radio"
+          />
+          <label
+            className="ms-ChoiceField-field"
+            htmlFor="ChoiceGroup0-2"
           >
-            2
-          </span>
-        </label>
+            <span
+              className="ms-Label"
+              id="ChoiceGroupLabel1-2"
+            >
+              2
+            </span>
+          </label>
+        </div>
       </div>
-    </div>
-    <div
-      className="ms-ChoiceField"
-    >
       <div
-        className="ms-ChoiceField-wrapper"
+        className="ms-ChoiceField"
       >
-        <input
-          aria-labelledby="ChoiceGroup0-3"
-          checked={false}
-          className="ms-ChoiceField-input"
-          disabled={undefined}
-          id="ChoiceGroup0-3"
-          name="ChoiceGroup0"
-          onBlur={[Function]}
-          onChange={[Function]}
-          onFocus={[Function]}
-          required={true}
-          type="radio"
-        />
-        <label
-          className="ms-ChoiceField-field"
-          htmlFor="ChoiceGroup0-3"
+        <div
+          className="ms-ChoiceField-wrapper"
         >
-          <span
-            className="ms-Label"
-            id="ChoiceGroupLabel1-3"
+          <input
+            aria-labelledby="ChoiceGroupLabel1-3"
+            checked={false}
+            className="ms-ChoiceField-input"
+            disabled={undefined}
+            id="ChoiceGroup0-3"
+            name="ChoiceGroup0"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            required={true}
+            type="radio"
+          />
+          <label
+            className="ms-ChoiceField-field"
+            htmlFor="ChoiceGroup0-3"
           >
-            3
-          </span>
-        </label>
+            <span
+              className="ms-Label"
+              id="ChoiceGroupLabel1-3"
+            >
+              3
+            </span>
+          </label>
+        </div>
       </div>
     </div>
   </div>
diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Image.Example.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Image.Example.tsx
index d04b50bcee94a..d4920a214f5f9 100644
--- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Image.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Image.Example.tsx
@@ -21,7 +21,7 @@ export class ChoiceGroupImageExample extends React.Component<{}, IChoiceGroupIma
   }
 
   public render() {
-    let { selectedKey } = this.state;
+    const { selectedKey } = this.state;
 
     return (
       <div>
diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/Beak/Beak.styles.ts b/packages/office-ui-fabric-react/src/components/Coachmark/Beak/Beak.styles.ts
new file mode 100644
index 0000000000000..84c6dc1626378
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/Beak/Beak.styles.ts
@@ -0,0 +1,35 @@
+import { IStyle, DefaultPalette } from '../../../Styling';
+import { IBeakStylesProps } from './Beak.types';
+
+export interface IBeakStyles {
+  /**
+   * Style for the root element in the default enabled/unchecked state.
+   */
+  root?: IStyle;
+  beak?: IStyle;
+}
+
+export function getStyles(props: IBeakStylesProps): IBeakStyles {
+  return {
+    root: [
+      {
+        position: 'absolute',
+        boxShadow: 'inherit',
+        border: 'none',
+        boxSizing: 'border-box',
+        transform: 'translateY(-50%)',
+        left: '50%',
+        width: props.width,
+        height: props.height
+      },
+      (props.left && props.top) && {
+        left: props.left,
+        top: props.top
+      }
+    ],
+    beak: {
+      fill: DefaultPalette.themePrimary,
+      display: 'block'
+    }
+  };
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/Beak/Beak.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/Beak/Beak.tsx
new file mode 100644
index 0000000000000..066d7ad9c25d7
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/Beak/Beak.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  css,
+  classNamesFunction
+} from '../../../Utilities';
+import { IBeakProps } from './Beak.types';
+import { getStyles, IBeakStyles } from './Beak.styles';
+import { IBeakStylesProps } from './Beak.types';
+
+export interface IBeakState {
+  left: string | null;
+  top: string | null;
+}
+
+export class Beak extends BaseComponent<IBeakProps, IBeakState> {
+  constructor(props: IBeakProps) {
+    super(props);
+  }
+
+  public render(): JSX.Element {
+    const {
+      height = 18,
+      width = 18,
+      left,
+      top
+    } = this.props;
+
+    const getClassNames = classNamesFunction<IBeakStylesProps, IBeakStyles>();
+    const classNames = getClassNames(getStyles, {
+      left,
+      top,
+      height: height + 'px',
+      width: width + 'px'
+    });
+
+    const pointOne = width / 2 + ',' + 0;
+    const pointTwo = width + ',' + height;
+    const pointThree = 0 + ',' + height;
+
+    return (
+      <div
+        className={ css('ms-Beak', classNames.root) }
+      >
+        <svg
+          height={ height }
+          width={ width }
+          className={ classNames.beak }
+        >
+          <polygon points={ pointOne + ' ' + pointTwo + ' ' + pointThree } />
+        </svg>
+      </div>
+    );
+  }
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/Beak/Beak.types.ts b/packages/office-ui-fabric-react/src/components/Coachmark/Beak/Beak.types.ts
new file mode 100644
index 0000000000000..487e5246e2e6e
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/Beak/Beak.types.ts
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { Beak } from './Beak';
+
+export interface IBeak { }
+
+export interface IBeakProps extends React.Props<Beak> {
+  /**
+  * All props for your component are to be defined here.
+  */
+  componentRef?: (component: IBeak) => void;
+
+  /**
+   * Beak width.
+   * @default 18
+   */
+  width?: number;
+
+  /**
+   * Beak height.
+   * @default 18
+   */
+  height?: number;
+
+  /**
+   * Color of the beak
+   */
+  color?: string;
+
+  /**
+   * Left position of the beak
+   */
+  left?: string | null;
+
+  /**
+   * Top position of the beak
+   */
+  top?: string | null;
+}
+
+export interface IBeakStylesProps {
+  left?: string | null;
+  top?: string | null;
+  width?: string;
+  height?: string;
+}
\ No newline at end of file
diff --git a/packages/experiments/src/components/Coachmark/Coachmark.styles.ts b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.styles.ts
similarity index 80%
rename from packages/experiments/src/components/Coachmark/Coachmark.styles.ts
rename to packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.styles.ts
index e0c72a5dbf369..f540190426e01 100644
--- a/packages/experiments/src/components/Coachmark/Coachmark.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.styles.ts
@@ -1,7 +1,5 @@
 import { IStyle, IRawStyle, keyframes } from '../../Styling';
 
-export const themePrimary = '#0078d7';
-
 export interface ICoachmarkStyleProps {
   /**
    * Is the Coachmark collapsed
@@ -28,6 +26,31 @@ export interface ICoachmarkStyleProps {
    * The width measured in pixels
    */
   entityHostWidth?: string;
+
+  /**
+   * Width of the coachmark
+   */
+  width?: string;
+
+  /**
+   * Height of the coachmark
+   */
+  height?: string;
+
+  /**
+   * Color
+   */
+  color?: string;
+
+  /**
+   * Beacon color one
+   */
+  beaconColorOne?: string;
+
+  /**
+   * Beacon color two
+   */
+  beaconColorTwo?: string;
 }
 
 export interface ICoachmarkStyles {
@@ -75,11 +98,7 @@ export interface ICoachmarkStyles {
   collapsed?: IStyle;
 }
 
-export const coachmarkCollapsedSize = '36px';
-export const beaconColorOne = '#00FFEC';
-export const beaconColorTwo = '#005EDD';
-
-function continuousPulseStepOne(): IRawStyle {
+function continuousPulseStepOne(beaconColorOne: string): IRawStyle {
   return {
     borderColor: beaconColorOne,
     borderWidth: '0px',
@@ -101,7 +120,7 @@ function continuousPulseStepThree(): IRawStyle {
   };
 }
 
-function continuousPulseStepFour(): IRawStyle {
+function continuousPulseStepFour(beaconColorTwo: string): IRawStyle {
   return {
     borderWidth: '0',
     width: '150px',
@@ -111,32 +130,15 @@ function continuousPulseStepFour(): IRawStyle {
   };
 }
 
-function continuousPulseStepFive(): IRawStyle {
-  return Object.assign(continuousPulseStepOne(), {
-    opacity: '0'
-  });
+function continuousPulseStepFive(beaconColorOne: string): IRawStyle {
+  return {
+    ...continuousPulseStepOne(beaconColorOne),
+    ...{
+      opacity: '0'
+    }
+  };
 }
 
-export const ContinuousPulse: string = keyframes({
-  '0%': continuousPulseStepOne(),
-  '1.42%': continuousPulseStepTwo(),
-  '3.57%': continuousPulseStepThree(),
-  '7.14%': continuousPulseStepFour(),
-  '8%': continuousPulseStepFive(),
-  '29.99%': continuousPulseStepFive(),
-  '30%': continuousPulseStepOne(),
-  '31.42%': continuousPulseStepTwo(),
-  '33.57%': continuousPulseStepThree(),
-  '37.14%': continuousPulseStepFour(),
-  '38%': continuousPulseStepFive(),
-  '79.42%': continuousPulseStepFive(),
-  '79.43': continuousPulseStepOne(),
-  '81.85': continuousPulseStepTwo(),
-  '83.42': continuousPulseStepThree(),
-  '87%': continuousPulseStepFour(),
-  '100%': {}
-});
-
 export const translateOne: string = keyframes({
   '0%': {
     transform: 'translate(0, 0)', // orig 25
@@ -252,6 +254,26 @@ export const rotateOne: string = keyframes({
 });
 
 export function getStyles(props: ICoachmarkStyleProps): ICoachmarkStyles {
+  const ContinuousPulse: string = keyframes({
+    '0%': continuousPulseStepOne(props.beaconColorOne!),
+    '1.42%': continuousPulseStepTwo(),
+    '3.57%': continuousPulseStepThree(),
+    '7.14%': continuousPulseStepFour(props.beaconColorTwo!),
+    '8%': continuousPulseStepFive(props.beaconColorOne!),
+    '29.99%': continuousPulseStepFive(props.beaconColorOne!),
+    '30%': continuousPulseStepOne(props.beaconColorOne!),
+    '31.42%': continuousPulseStepTwo(),
+    '33.57%': continuousPulseStepThree(),
+    '37.14%': continuousPulseStepFour(props.beaconColorTwo!),
+    '38%': continuousPulseStepFive(props.beaconColorOne!),
+    '79.42%': continuousPulseStepFive(props.beaconColorOne!),
+    '79.43': continuousPulseStepOne(props.beaconColorOne!),
+    '81.85': continuousPulseStepTwo(),
+    '83.42': continuousPulseStepThree(),
+    '87%': continuousPulseStepFour(props.beaconColorTwo!),
+    '100%': {}
+  });
+
   return {
     root: [
       {
@@ -319,7 +341,8 @@ export function getStyles(props: ICoachmarkStyleProps): ICoachmarkStyles {
     rotateAnimationLayer: [
       {
         width: '100%',
-        height: '100%'
+        height: '100%',
+        opacity: '0.8'
       },
       props.collapsed && {
         animationDuration: '14s',
@@ -329,6 +352,9 @@ export function getStyles(props: ICoachmarkStyleProps): ICoachmarkStyles {
         animationDelay: '0s',
         animationFillMode: 'forwards',
         animationName: rotateOne
+      },
+      !props.collapsed && {
+        opacity: '1'
       }
     ],
     // Layer Host, defaults to collapsed
@@ -337,15 +363,14 @@ export function getStyles(props: ICoachmarkStyleProps): ICoachmarkStyles {
         position: 'relative',
         outline: 'none',
         overflow: 'hidden',
-        backgroundColor: themePrimary,
-        borderRadius: coachmarkCollapsedSize,
-        opacity: '0.8',
+        backgroundColor: props.color,
+        borderRadius: props.width,
         transition: 'border-radius 250ms, width 500ms, height 500ms cubic-bezier(0.5, 0, 0, 1)',
         visibility: 'hidden'
       },
-      (!props.isMeasuring) && {
-        width: coachmarkCollapsedSize,
-        height: coachmarkCollapsedSize,
+      !props.isMeasuring && {
+        width: props.width,
+        height: props.height,
         visibility: 'visible'
       },
       !props.collapsed && {
@@ -362,10 +387,12 @@ export function getStyles(props: ICoachmarkStyleProps): ICoachmarkStyles {
         transform: 'scale(0)'
       },
       (!props.collapsed) && {
+        width: props.entityHostWidth,
+        height: props.entityHostHeight,
         transform: 'scale(1)'
       },
       (!props.isMeasuring) && {
-        visibility: 'visible'
+        visibility: 'visible',
       }
     ]
   };
diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx
new file mode 100644
index 0000000000000..651275a1eaefb
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx
@@ -0,0 +1,299 @@
+// Utilities
+import * as React from 'react';
+import { BaseComponent, classNamesFunction, autobind, createRef } from '../../Utilities';
+import { DefaultPalette } from '../../Styling';
+
+// Component Dependencies
+import { PositioningContainer } from './PositioningContainer/PositioningContainer';
+import { Beak } from './Beak/Beak';
+
+// Coachmark
+import { ICoachmarkTypes } from './Coachmark.types';
+import { getStyles, ICoachmarkStyles, ICoachmarkStyleProps } from './Coachmark.styles';
+import { FocusZone } from '../../FocusZone';
+
+const getClassNames = classNamesFunction<ICoachmarkStyleProps, ICoachmarkStyles>();
+
+/**
+ * An interface for the cached dimensions of entity inner host.
+ */
+export interface IEntityRect {
+  width: number;
+  height: number;
+}
+
+export interface ICoachmarkState {
+  /**
+   * Is the Coachmark currently collapsed into
+   * a tear drop shape
+   */
+  collapsed: boolean;
+
+  /**
+   * Enables/Disables the beacon that radiates
+   * from the center of the coachmark.
+   */
+  isBeaconAnimating: boolean;
+
+  /**
+   * Is the teaching bubble currently retreiving the
+   * original dimensions of the hosted entity.
+   */
+  isMeasuring: boolean;
+
+  /**
+   * Cached width and height of _entityInnerHostElement
+   */
+  entityInnerHostRect: IEntityRect;
+
+  /**
+   * Is the mouse in proximity of the default target element
+   */
+  isMouseInProximity: boolean;
+
+  /**
+   * The left position of the beak
+   */
+  beakLeft?: string | null;
+
+  /**
+   * The right position of the beak
+   */
+  beakTop?: string | null;
+}
+
+export class Coachmark extends BaseComponent<ICoachmarkTypes, ICoachmarkState> {
+  public static defaultProps: Partial<ICoachmarkTypes> = {
+    collapsed: true,
+    mouseProximityOffset: 100,
+    beakWidth: 26,
+    beakHeight: 12,
+    delayBeforeMouseOpen: 3600, // The approximate time the coachmark shows up
+    width: 36,
+    height: 36,
+    beaconColorOne: '#00FFEC',
+    beaconColorTwo: '#005EDD',
+    color: DefaultPalette.themePrimary
+  };
+
+  /**
+   * The cached HTMLElement reference to the Entity Inner Host
+   * element.
+   */
+  private _entityInnerHostElement = createRef<HTMLDivElement>();
+  private _translateAnimationContainer = createRef<HTMLDivElement>();
+  private _positioningContainer = createRef<PositioningContainer>();
+
+  constructor(props: ICoachmarkTypes) {
+    super(props);
+
+    // Set defaults for state
+    this.state = {
+      collapsed: props.collapsed!,
+      isBeaconAnimating: true,
+      isMeasuring: true,
+      entityInnerHostRect: {
+        width: 0,
+        height: 0
+      },
+      isMouseInProximity: false
+    };
+  }
+
+  public render(): JSX.Element {
+    const {
+      children,
+      beakWidth,
+      beakHeight,
+      target,
+      width,
+      height,
+      color,
+      beaconColorOne,
+      beaconColorTwo
+    } = this.props;
+
+    const classNames = getClassNames(getStyles, {
+      collapsed: this.state.collapsed,
+      isBeaconAnimating: this.state.isBeaconAnimating,
+      isMeasuring: this.state.isMeasuring,
+      entityHostHeight: this.state.entityInnerHostRect.height + 'px',
+      entityHostWidth: this.state.entityInnerHostRect.width + 'px',
+      width: width + 'px',
+      height: height + 'px',
+      color: color,
+      beaconColorOne: beaconColorOne,
+      beaconColorTwo: beaconColorTwo
+    });
+
+    return (
+      <PositioningContainer
+        target={ target }
+        offsetFromTarget={ beakHeight }
+        componentRef={ this._positioningContainer }
+      >
+        <div className={ classNames.root }>
+          <div className={ classNames.pulsingBeacon } />
+          <div
+            className={ classNames.translateAnimationContainer }
+            ref={ this._translateAnimationContainer }
+          >
+            <div className={ classNames.scaleAnimationLayer }>
+              <div className={ classNames.rotateAnimationLayer }>
+                {
+                  this._positioningContainer.value && <Beak
+                    width={ beakWidth }
+                    height={ beakHeight }
+                    left={ this.state.beakLeft }
+                    top={ this.state.beakTop }
+                  />
+                }
+                <FocusZone>
+                  <div
+                    className={ classNames.entityHost }
+                    data-is-focusable={ true }
+                    onFocus={ this._onFocusHandler }
+                  >
+                    <div
+                      className={ classNames.entityInnerHost }
+                      ref={ this._entityInnerHostElement }
+                    >
+                      { children }
+                    </div>
+                  </div>
+                </FocusZone>
+              </div>
+            </div>
+          </div>
+        </div>
+      </PositioningContainer>
+    );
+  }
+
+  public componentWillReceiveProps(newProps: ICoachmarkTypes): void {
+    if (this.props.collapsed && !newProps.collapsed) {
+      // The coachmark is about to open
+      this._openCoachmark();
+    }
+  }
+
+  public componentDidMount(): void {
+    this._async.requestAnimationFrame(((): void => {
+      if (this._entityInnerHostElement.value && (this.state.entityInnerHostRect.width + this.state.entityInnerHostRect.width) === 0) {
+
+        // @TODO Eventually we need to add the various directions
+        const beakLeft = (this.props.width! / 2) - (this.props.beakWidth! / 2);
+        const beakTop = 0;
+
+        this.setState({
+          isMeasuring: false,
+          entityInnerHostRect: {
+            width: this._entityInnerHostElement.value.offsetWidth,
+            height: this._entityInnerHostElement.value.offsetHeight
+          },
+          beakLeft: beakLeft + 'px',
+          beakTop: beakTop + 'px'
+        });
+
+        this.forceUpdate();
+      }
+
+      // We dont want to the user to immediatley trigger the coachmark when it's opened
+      this._async.setTimeout(() => {
+        this._addProximityHandler(100);
+      }, this.props.delayBeforeMouseOpen!);
+    }));
+  }
+
+  @autobind
+  private _onFocusHandler(): void {
+    this._openCoachmark();
+  }
+
+  @autobind
+  private _openCoachmark(): void {
+    this.setState({
+      collapsed: false
+    });
+
+    this._translateAnimationContainer.value && this._translateAnimationContainer.value.addEventListener('animationstart', (): void => {
+      if (this.props.onAnimationOpenStart) {
+        this.props.onAnimationOpenStart();
+      }
+    });
+
+    this._translateAnimationContainer.value && this._translateAnimationContainer.value.addEventListener('animationend', (): void => {
+      if (this.props.onAnimationOpenEnd) {
+        this.props.onAnimationOpenEnd();
+      }
+    });
+  }
+
+  private _addProximityHandler(mouseProximityOffset: number = 0): void {
+    /**
+     * An array of cached ids returned when setTimeout runs during
+     * the window resize event trigger.
+     */
+    const timeoutIds: number[] = [];
+
+    /**
+     * The target element the mouse would be in
+     * proximity to
+     */
+    let targetElementRect: ClientRect;
+
+    // Take the initial measure out of the initial render to prevent
+    // an unnecessary render.
+    this._async.setTimeout(() => {
+      if (this._entityInnerHostElement.value) {
+        targetElementRect = this._entityInnerHostElement.value.getBoundingClientRect();
+      }
+
+      // When the window resizes we want to async
+      // get the bounding client rectangle.
+      // Every time the event is triggered we want to
+      // setTimeout and then clear any previous instances
+      // of setTimeout.
+      this._events.on(window, 'resize', (): void => {
+        timeoutIds.forEach((value: number): void => {
+          clearInterval(value);
+        });
+
+        timeoutIds.push(this._async.setTimeout((): void => {
+          if (this._entityInnerHostElement.value) {
+            targetElementRect = this._entityInnerHostElement.value.getBoundingClientRect();
+          }
+        }, 100));
+      });
+    }, 10);
+
+    // Every time the document's mouse move is triggered
+    // we want to check if inside of an element and
+    // set the state with the result.
+    this._events.on(document, 'mousemove', (e: MouseEvent) => {
+      const mouseY = e.pageY;
+      const mouseX = e.pageX;
+      const isMouseInProximity = this._isInsideElement(mouseX, mouseY, targetElementRect, mouseProximityOffset);
+
+      if (isMouseInProximity !== this.state.isMouseInProximity) {
+        // We don't want to update the isMouseInProximtiy state because
+        // The coachmark only opens and does not collapse.
+        // Setting isMouseInProximity here will cause the coachmark to open and close
+        this.setState({
+          collapsed: !isMouseInProximity
+        });
+      }
+
+      if (this.props.onMouseMove) {
+        this.props.onMouseMove(e);
+      }
+    });
+  }
+
+  private _isInsideElement(mouseX: number, mouseY: number, elementRect: ClientRect, mouseProximityOffset: number = 0): boolean {
+    return mouseX > (elementRect.left - mouseProximityOffset) &&
+      mouseX < ((elementRect.left + elementRect.width) + mouseProximityOffset) &&
+      mouseY > (elementRect.top - mouseProximityOffset) &&
+      mouseY < ((elementRect.top + elementRect.height) + mouseProximityOffset);
+  }
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.types.ts b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.types.ts
new file mode 100644
index 0000000000000..5b836fa39ea09
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.types.ts
@@ -0,0 +1,93 @@
+import * as React from 'react';
+import { Coachmark } from './Coachmark';
+import { ICoachmarkStyles, ICoachmarkStyleProps } from './Coachmark.styles';
+import { IPositioningContainerTypes } from './PositioningContainer/PositioningContainer.types';
+import { IStyleFunction } from '../../Utilities';
+
+export interface ICoachmark {
+}
+
+export interface ICoachmarkTypes extends React.Props<Coachmark> {
+  componentRef?: (component: ICoachmark) => void;
+
+  /**
+   * Get styles method.
+   */
+  getStyles?: IStyleFunction<ICoachmarkStyleProps, ICoachmarkStyles>;
+
+  /**
+   * The target that the TeachingBubble should try to position itself based on.
+   */
+  target: HTMLElement | null;
+
+  positioningContainerProps?: IPositioningContainerTypes;
+
+  /**
+   * The starting collapsed state for the Coachmark?
+   * @default true
+   */
+  collapsed?: boolean;
+
+  /**
+   * The distance in pixels the mouse is located
+   * before opening up the coachmark.
+   * @default 100
+   */
+  mouseProximityOffset?: number;
+
+  /**
+   * Callback when the opening animation begins.
+   */
+  onAnimationOpenStart?: () => void;
+
+  /**
+   * Callback when the opening animation completes.
+   */
+  onAnimationOpenEnd?: () => void;
+
+  /**
+   * The width of the beak component.
+   */
+  beakWidth?: number;
+
+  /**
+   * The height of the beak component
+   */
+  beakHeight?: number;
+
+  /**
+   * Delay before allowing mouse movements to open
+   * the Coachmark
+   */
+  delayBeforeMouseOpen?: number;
+
+  /**
+   * Runs every time the mouse moves
+   */
+  onMouseMove?: (e: MouseEvent) => void;
+
+  /**
+   * The width of the coachmark
+   */
+  width?: number;
+
+  /**
+   * The height of the coachmark
+   */
+  height?: number;
+
+  /**
+   * Color
+   */
+  color?: string;
+
+  /**
+   * Beacon color one
+   */
+  beaconColorOne?: string;
+
+  /**
+   * Beacon color two
+   */
+  beaconColorTwo?: string;
+}
diff --git a/packages/experiments/src/components/Coachmark/CoachmarkPage.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/CoachmarkPage.tsx
similarity index 90%
rename from packages/experiments/src/components/Coachmark/CoachmarkPage.tsx
rename to packages/office-ui-fabric-react/src/components/Coachmark/CoachmarkPage.tsx
index b82bd9ac3b46b..458642ae39327 100644
--- a/packages/experiments/src/components/Coachmark/CoachmarkPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/CoachmarkPage.tsx
@@ -8,7 +8,7 @@ import {
 
 import { CoachmarkBasicExample } from './examples/Coachmark.Basic.Example';
 const CoachmarkBasicExampleCode =
-  require('!raw-loader!experiments/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx') as string;
+  require('!raw-loader!office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx') as string;
 
 export class CoachmarkPage extends React.Component<IComponentDemoPageProps, {}> {
   public render(): JSX.Element {
@@ -26,7 +26,7 @@ export class CoachmarkPage extends React.Component<IComponentDemoPageProps, {}>
         propertiesTables={
           <PropertiesTableSet
             sources={ [
-              require<string>('!raw-loader!experiments/src/components/coachmark/Coachmark.types.ts')
+              require<string>('!raw-loader!office-ui-fabric-react/src/components/Coachmark/Coachmark.types.ts')
             ] }
           />
         }
diff --git a/packages/experiments/src/components/PositioningContainer/PositioningContainer.styles.ts b/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.styles.ts
similarity index 87%
rename from packages/experiments/src/components/PositioningContainer/PositioningContainer.styles.ts
rename to packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.styles.ts
index 5d0a4e80c5ef6..70ecb5b24b100 100644
--- a/packages/experiments/src/components/PositioningContainer/PositioningContainer.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.styles.ts
@@ -1,6 +1,6 @@
-import { memoizeFunction } from '../../Utilities';
-import { mergeStyleSets } from '../../Styling';
-import { IStyle } from '../../Styling';
+import { memoizeFunction } from '../../../Utilities';
+import { mergeStyleSets } from '../../../Styling';
+import { IStyle } from '../../../Styling';
 
 export interface IPositioningContainerStyles {
   /**
@@ -17,8 +17,8 @@ export interface IPositioningContainerNames {
   container: string;
   main: string;
   overFlowYHidden: string;
-  beak: string;
-  beakCurtain: string;
+  beak?: string;
+  beakCurtain?: string;
 }
 
 // @TODO Remove this tslint disable statement after the styles are converted
diff --git a/packages/experiments/src/components/PositioningContainer/PositioningContainer.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx
similarity index 79%
rename from packages/experiments/src/components/PositioningContainer/PositioningContainer.tsx
rename to packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx
index 97e97898ce4f0..cbdb092e02ba7 100644
--- a/packages/experiments/src/components/PositioningContainer/PositioningContainer.tsx
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.tsx
@@ -17,37 +17,39 @@ import {
   elementContains,
   focusFirstChild,
   getWindow,
-  getDocument
-} from '../../Utilities';
+  getDocument,
+  createRef
+} from '../../../Utilities';
 
 import {
-  getRelativePositions,
   IPositionProps,
   getMaxHeight,
-  ICalloutPositon
+  ICalloutPositon,
+  positionElement,
+  IPositionedData,
+  RectangleEdge
 } from 'office-ui-fabric-react/lib/utilities/positioning';
 
-import { AnimationClassNames, mergeStyles } from '../../Styling';
-
-export interface IPositionInfo {
-  calloutPosition: ICalloutPositon;
-  beakPosition: { position: ICalloutPositon, display: string };
-  directionalClassName: string;
-  submenuDirection: DirectionalHint;
-}
+import { AnimationClassNames, mergeStyles } from '../../../Styling';
 
 const OFF_SCREEN_STYLE = { opacity: 0 };
 
 // In order for some of the max height logic to work
-// properly we need to set the border needs to be set.
+// properly we need to set the border.
 // The value is abitrary.
 const BORDER_WIDTH = 1;
+const SLIDE_ANIMATIONS: { [key: number]: string; } = {
+  [RectangleEdge.top]: 'slideUpIn20',
+  [RectangleEdge.bottom]: 'slideDownIn20',
+  [RectangleEdge.left]: 'slideLeftIn20',
+  [RectangleEdge.right]: 'slideRightIn20'
+};
 
 export interface IPositioningContainerState {
   /**
    * Current set of calcualted positions for the outermost parent container.
    */
-  positions?: IPositionInfo;
+  positions?: IPositionedData;
 
   /**
    * Tracks the current height offset and updates during
@@ -70,10 +72,10 @@ export class PositioningContainer extends BaseComponent<IPositioningContainerTyp
   /**
    * The primary positioned div.
    */
-  private _positionedHost: HTMLDivElement;
+  private _positionedHost = createRef<HTMLDivElement>();
 
   // @TODO rename to reflect the name of this class
-  private _contentHost: HTMLDivElement;
+  private _contentHost = createRef<HTMLDivElement>();
 
   /**
    * Stores an instance of Window, used to check
@@ -123,8 +125,8 @@ export class PositioningContainer extends BaseComponent<IPositioningContainerTyp
     // If the target element changed, find the new one. If we are tracking
     // target with class name, always find element because we do not know if
     // fabric has rendered a new element and disposed the old element.
-    let newTarget = this._getTarget(newProps);
-    let oldTarget = this._getTarget();
+    const newTarget = this._getTarget(newProps);
+    const oldTarget = this._getTarget();
     if (newTarget !== oldTarget || typeof (newTarget) === 'string' || newTarget instanceof String) {
       this._maxHeight = undefined;
       this._setTargetWindowAndElement(newTarget!);
@@ -145,27 +147,25 @@ export class PositioningContainer extends BaseComponent<IPositioningContainerTyp
       return null;
     }
 
-    let {
+    const {
       className,
       positioningContainerWidth,
       positioningContainerMaxHeight,
       children } = this.props;
-    let { positions } = this.state;
+    const { positions } = this.state;
 
     const styles = getClassNames();
-    let directionalClassName = '';
 
-    if (positions && positions.directionalClassName) {
-      // tslint:disable-next-line:no-any
-      directionalClassName = (AnimationClassNames as any)[positions.directionalClassName];
-    }
+    const directionalClassName = (positions && positions.targetEdge)
+      ? (AnimationClassNames as any)[SLIDE_ANIMATIONS[positions.targetEdge]]
+      : '';
 
-    let getContentMaxHeight: number = this._getMaxHeight() + this.state.heightOffset!;
-    let contentMaxHeight: number = positioningContainerMaxHeight!
+    const getContentMaxHeight: number = this._getMaxHeight() + this.state.heightOffset!;
+    const contentMaxHeight: number = positioningContainerMaxHeight!
       && (positioningContainerMaxHeight! > getContentMaxHeight) ? getContentMaxHeight : positioningContainerMaxHeight!;
-    let content = (
+    const content = (
       <div
-        ref={ this._resolveRef('_positionedHost') }
+        ref={ this._positionedHost }
         className={ css('ms-PositioningContainer', styles.container) }
       >
         <div
@@ -178,13 +178,13 @@ export class PositioningContainer extends BaseComponent<IPositioningContainerTyp
               !!positioningContainerWidth && { width: positioningContainerWidth }
             ) }
           // tslint:disable-next-line:jsx-ban-props
-          style={ positions ? positions.calloutPosition : OFF_SCREEN_STYLE }
+          style={ positions ? positions.elementPosition : OFF_SCREEN_STYLE }
           tabIndex={ -1 } // Safari and Firefox on Mac OS requires this to back-stop click events so focus remains in the Callout.
           // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus
-          ref={ this._resolveRef('_contentHost') }
+          ref={ this._contentHost }
         >
           { children }
-          { // @TODO apply  to the content container
+          { // @TODO apply to the content container
             contentMaxHeight
           }
         </div>
@@ -200,7 +200,7 @@ export class PositioningContainer extends BaseComponent<IPositioningContainerTyp
 
   @autobind
   public dismiss(ev?: Event | React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>): void {
-    let { onDismiss } = this.props;
+    const { onDismiss } = this.props;
 
     if (onDismiss) {
       onDismiss(ev);
@@ -215,8 +215,8 @@ export class PositioningContainer extends BaseComponent<IPositioningContainerTyp
   }
 
   protected _dismissOnLostFocus(ev: Event): void {
-    let target = ev.target as HTMLElement;
-    let clickedOutsideCallout = this._positionedHost && !elementContains(this._positionedHost, target);
+    const target = ev.target as HTMLElement;
+    const clickedOutsideCallout = this._positionedHost.value && !elementContains(this._positionedHost.value, target);
 
     if (
       (!this._target && clickedOutsideCallout) ||
@@ -230,9 +230,9 @@ export class PositioningContainer extends BaseComponent<IPositioningContainerTyp
 
   @autobind
   protected _setInitialFocus(): void {
-    if (this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions) {
+    if (this._contentHost.value && this.props.setInitialFocus && !this._didSetInitialFocus && this.state.positions) {
       this._didSetInitialFocus = true;
-      focusFirstChild(this._contentHost);
+      focusFirstChild(this._contentHost.value);
     }
   }
 
@@ -262,16 +262,22 @@ export class PositioningContainer extends BaseComponent<IPositioningContainerTyp
   }
 
   private _updatePosition(): void {
-    let { positions } = this.state;
-    let hostElement: HTMLElement = this._positionedHost;
-    let positioningContainerElement: HTMLElement = this._contentHost;
+    const { positions } = this.state;
+    const {
+      offsetFromTarget,
+      onPositioned
+    } = this.props;
+
+    const hostElement = this._positionedHost.value;
+    const positioningContainerElement = this._contentHost.value;
 
     if (hostElement && positioningContainerElement) {
       let currentProps: IPositionProps | undefined;
       currentProps = assign(currentProps, this.props);
       currentProps!.bounds = this._getBounds();
       currentProps!.target = this._target!;
-      let newPositions: IPositionInfo = getRelativePositions(currentProps!, hostElement, positioningContainerElement);
+      currentProps!.gapSpace = offsetFromTarget;
+      const newPositions: IPositionedData = positionElement(currentProps!, hostElement, positioningContainerElement);
 
       // Set the new position only when the positions are not exists or one of the new positioningContainer positions are different.
       // The position should not change if the position is within 2 decimal places.
@@ -286,8 +292,8 @@ export class PositioningContainer extends BaseComponent<IPositioningContainerTyp
         });
       } else {
         this._positionAttempts = 0;
-        if (this.props.onPositioned) {
-          this.props.onPositioned();
+        if (onPositioned) {
+          onPositioned();
         }
       }
     }
@@ -317,11 +323,16 @@ export class PositioningContainer extends BaseComponent<IPositioningContainerTyp
    * without going out of the specified bounds
    */
   private _getMaxHeight(): number {
-    // If the max height is undefined.
+    const {
+      directionalHintFixed,
+      offsetFromTarget,
+      directionalHint
+    } = this.props;
+
     if (!this._maxHeight) {
-      // if the directional hint is fixed and our target Exists
-      if (this.props.directionalHintFixed && this._target) {
-        this._maxHeight = getMaxHeight(this._target, this.props.directionalHint!, this.props.offsetFromTarget, this._getBounds());
+      if (directionalHintFixed && this._target) {
+        const gapSpace = offsetFromTarget ? offsetFromTarget : 0;
+        this._maxHeight = getMaxHeight(this._target, directionalHint!, gapSpace, this._getBounds());
       } else {
         this._maxHeight = this._getBounds().height! - BORDER_WIDTH * 2;
       }
@@ -329,8 +340,8 @@ export class PositioningContainer extends BaseComponent<IPositioningContainerTyp
     return this._maxHeight!;
   }
 
-  private _arePositionsEqual(positions: IPositionInfo, newPosition: IPositionInfo): boolean {
-    return this._comparePositions(positions.calloutPosition, newPosition.calloutPosition);
+  private _arePositionsEqual(positions: IPositionedData, newPosition: IPositionedData): boolean {
+    return this._comparePositions(positions.elementPosition, newPosition.elementPosition);
   }
 
   private _comparePositions(oldPositions: ICalloutPositon, newPositions: ICalloutPositon): boolean {
@@ -353,7 +364,7 @@ export class PositioningContainer extends BaseComponent<IPositioningContainerTyp
   private _setTargetWindowAndElement(target: HTMLElement | string | MouseEvent | IPoint | null): void {
     if (target) {
       if (typeof target === 'string') {
-        let currentDoc: Document = getDocument()!;
+        const currentDoc: Document = getDocument()!;
         this._target = currentDoc ? currentDoc.querySelector(target) as HTMLElement : null;
         this._targetWindow = getWindow()!;
       } else if ((target as MouseEvent).stopPropagation) {
@@ -363,7 +374,7 @@ export class PositioningContainer extends BaseComponent<IPositioningContainerTyp
         this._targetWindow = getWindow()!;
         this._target = target;
       } else {
-        let targetElement: HTMLElement = target as HTMLElement;
+        const targetElement: HTMLElement = target as HTMLElement;
         this._targetWindow = getWindow(targetElement)!;
         this._target = target;
       }
@@ -378,7 +389,11 @@ export class PositioningContainer extends BaseComponent<IPositioningContainerTyp
   private _setHeightOffsetEveryFrame(): void {
     if (this._contentHost && this.props.finalHeight) {
       this._setHeightOffsetTimer = this._async.requestAnimationFrame(() => {
-        const positioningContainerMainElem = this._contentHost.lastChild as HTMLElement;
+        if (!this._contentHost.value) {
+          return;
+        }
+
+        const positioningContainerMainElem = this._contentHost.value.lastChild as HTMLElement;
         const cardScrollHeight: number = positioningContainerMainElem.scrollHeight;
         const cardCurrHeight: number = positioningContainerMainElem.offsetHeight;
         const scrollDiff: number = cardScrollHeight - cardCurrHeight;
@@ -397,7 +412,7 @@ export class PositioningContainer extends BaseComponent<IPositioningContainerTyp
   }
 
   private _getTarget(props: IPositioningContainerTypes = this.props): HTMLElement | string | MouseEvent | IPoint | null {
-    let { target } = props;
+    const { target } = props;
     return target!;
   }
 }
\ No newline at end of file
diff --git a/packages/experiments/src/components/PositioningContainer/PositioningContainer.types.ts b/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.types.ts
similarity index 93%
rename from packages/experiments/src/components/PositioningContainer/PositioningContainer.types.ts
rename to packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.types.ts
index ff6e4c1a1ce41..cd95dd470a953 100644
--- a/packages/experiments/src/components/PositioningContainer/PositioningContainer.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainer.types.ts
@@ -4,11 +4,19 @@ import { DirectionalHint } from 'office-ui-fabric-react/lib/common/DirectionalHi
 import {
   IPoint,
   IRectangle
-} from '../../Utilities';
+} from '../../../Utilities';
+import { ICalloutPositon } from 'office-ui-fabric-react/lib/utilities/positioning';
 
 export interface IPositioningContainer {
 }
 
+export interface IPositionInfo {
+  calloutPosition: ICalloutPositon;
+  beakPosition: { position: ICalloutPositon, display: string };
+  directionalClassName: string;
+  submenuDirection: DirectionalHint;
+}
+
 export interface IPositioningContainerTypes extends React.Props<PositioningContainer> {
   /**
   * All props for your component are to be defined here.
diff --git a/packages/experiments/src/components/PositioningContainer/PositioningContainerPage.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainerPage.tsx
similarity index 100%
rename from packages/experiments/src/components/PositioningContainer/PositioningContainerPage.tsx
rename to packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/PositioningContainerPage.tsx
diff --git a/packages/experiments/src/components/PositioningContainer/examples/PositioningContainer.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/examples/PositioningContainer.Basic.Example.tsx
similarity index 96%
rename from packages/experiments/src/components/PositioningContainer/examples/PositioningContainer.Basic.Example.tsx
rename to packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/examples/PositioningContainer.Basic.Example.tsx
index 41977ae170de5..39a7b09e429ef 100644
--- a/packages/experiments/src/components/PositioningContainer/examples/PositioningContainer.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/examples/PositioningContainer.Basic.Example.tsx
@@ -20,7 +20,7 @@ export class PositioningContainerBasicExample extends React.Component<{}, IPosit
   }
 
   public render(): JSX.Element {
-    let { isPositioningContainerVisible } = this.state;
+    const { isPositioningContainerVisible } = this.state;
     return (
       <div>
         <div className='ms-PositioningContainerBasicExample-buttonArea'>
diff --git a/packages/experiments/src/components/PositioningContainer/index.ts b/packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/index.ts
similarity index 100%
rename from packages/experiments/src/components/PositioningContainer/index.ts
rename to packages/office-ui-fabric-react/src/components/Coachmark/PositioningContainer/index.ts
diff --git a/packages/experiments/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx
similarity index 56%
rename from packages/experiments/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx
rename to packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx
index cd445deb2cffa..34cf5c556d171 100644
--- a/packages/experiments/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx
@@ -3,13 +3,33 @@ import { Coachmark } from '../Coachmark';
 import { TeachingBubbleContent } from 'office-ui-fabric-react/lib/TeachingBubble';
 import { ICalloutProps } from 'office-ui-fabric-react/lib/Callout';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import { IStyle } from '../../../Styling';
+import {
+  BaseComponent,
+  classNamesFunction,
+  createRef
+} from 'office-ui-fabric-react/lib/Utilities';
 
 export interface ICoachmarkBasicExampleState {
   isVisible?: boolean;
   isCoachmarkCollapsed?: boolean;
+  targetElement?: HTMLElement;
 }
 
-export class CoachmarkBasicExample extends React.Component<{}, ICoachmarkBasicExampleState> {
+export interface ICoachmarkBasicExampleStyles {
+  /**
+   * Style for the root element in the default enabled/unchecked state.
+   */
+  root?: IStyle;
+
+  /**
+   * The example button container
+   */
+  buttonContainer: IStyle;
+}
+
+export class CoachmarkBasicExample extends BaseComponent<{}, ICoachmarkBasicExampleState> {
+  private _targetButton = createRef<HTMLDivElement>();
 
   public constructor(props: {}) {
     super(props);
@@ -24,24 +44,36 @@ export class CoachmarkBasicExample extends React.Component<{}, ICoachmarkBasicEx
   }
 
   public render(): JSX.Element {
-    let { isVisible } = this.state;
+    const { isVisible } = this.state;
 
     const calloutProps: ICalloutProps = {
       doNotLayer: true
     };
 
+    const getClassNames = classNamesFunction<{}, ICoachmarkBasicExampleStyles>();
+    const classNames = getClassNames(() => {
+      return {
+        root: {},
+        buttonContainer: {
+          display: 'inline-block'
+        }
+      };
+    });
+
     return (
-      <div className='ms-CoachmarkBasicExample'>
-        <div className='ms-CoachmarkBasicExample-buttonArea'>
+      <div className={ classNames.root }>
+        <div
+          className={ classNames.buttonContainer }
+          ref={ this._targetButton }
+        >
           <DefaultButton
             onClick={ this._onShowMenuClicked }
-            text={ isVisible ? 'Hide coachmark' : 'Show coachmark' }
-            className={ 'ms-Coachmark-basicExampleButton' }
+            text={ isVisible ? 'Hide Coachmark' : 'Show Coachmark' }
           />
         </div>
         { isVisible && (
           <Coachmark
-            target={ '.ms-Coachmark-basicExampleButton' }
+            target={ this._targetButton.value }
           >
             <TeachingBubbleContent
               headline='Example Title'
diff --git a/packages/experiments/src/components/Coachmark/index.ts b/packages/office-ui-fabric-react/src/components/Coachmark/index.ts
similarity index 100%
rename from packages/experiments/src/components/Coachmark/index.ts
rename to packages/office-ui-fabric-react/src/components/Coachmark/index.ts
diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.test.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.test.tsx
index 16a320b015aa6..87a2578f4f60a 100644
--- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.test.tsx
@@ -12,7 +12,7 @@ describe('ColorPicker', () => {
     const component = renderer.create(
       <ColorPicker color='#FFFFFF' />
     );
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx
index 1eb8f5ca893a9..f0d3a4b871ee5 100644
--- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorPicker.tsx
@@ -56,7 +56,7 @@ export class ColorPicker extends BaseComponent<IColorPickerProps, IColorPickerSt
   }
 
   public render() {
-    let { color } = this.state;
+    const { color } = this.state;
 
     return (
       <div className={ css('ms-ColorPicker', styles.root) }>
@@ -181,7 +181,7 @@ export class ColorPicker extends BaseComponent<IColorPickerProps, IColorPickerSt
       return;
     }
 
-    let { onColorChanged } = this.props;
+    const { onColorChanged } = this.props;
 
     if (newColor.str !== this.state.color.str) {
       this.setState({
diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorRectangle.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorRectangle.tsx
index 45f59d66a5580..89faa3b7c9e17 100644
--- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorRectangle.tsx
+++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorRectangle.tsx
@@ -3,7 +3,8 @@ import {
   BaseComponent,
   assign,
   autobind,
-  css
+  css,
+  createRef
 } from '../../Utilities';
 import {
   IColor,
@@ -35,15 +36,12 @@ export class ColorRectangle extends BaseComponent<IColorRectangleProps, IColorPi
     minSize: 220
   };
 
-  public refs: {
-    [key: string]: React.ReactInstance;
-    root: HTMLElement;
-  };
+  private _root = createRef<HTMLDivElement>();
 
   constructor(props: IColorRectangleProps) {
     super(props);
 
-    let { color } = this.props;
+    const { color } = this.props;
 
     this.state = {
       isAdjusting: false,
@@ -58,7 +56,7 @@ export class ColorRectangle extends BaseComponent<IColorRectangleProps, IColorPi
   }
 
   public componentWillReceiveProps(newProps: IColorRectangleProps) {
-    let { color } = newProps;
+    const { color } = newProps;
 
     this.setState({
       color: color,
@@ -67,11 +65,11 @@ export class ColorRectangle extends BaseComponent<IColorRectangleProps, IColorPi
   }
 
   public render() {
-    let { minSize } = this.props;
-    let { color, fullColorString } = this.state;
+    const { minSize } = this.props;
+    const { color, fullColorString } = this.state;
 
     return (
-      <div ref='root' className={ css('ms-ColorPicker-colorRect', styles.colorRect) } style={ { minWidth: minSize, minHeight: minSize, backgroundColor: fullColorString } } onMouseDown={ this._onMouseDown }>
+      <div ref={ this._root } className={ css('ms-ColorPicker-colorRect', styles.colorRect) } style={ { minWidth: minSize, minHeight: minSize, backgroundColor: fullColorString } } onMouseDown={ this._onMouseDown }>
         <div className={ css('ms-ColorPicker-light', styles.light) } />
         <div className={ css('ms-ColorPicker-dark', styles.dark) } />
         <div className={ css('ms-ColorPicker-thumb', styles.thumb) } style={ { left: color!.s + '%', top: (MAX_COLOR_VALUE - color!.v) + '%', backgroundColor: color!.str } } />
@@ -89,13 +87,18 @@ export class ColorRectangle extends BaseComponent<IColorRectangleProps, IColorPi
 
   @autobind
   private _onMouseMove(ev: React.MouseEvent<HTMLElement>) {
-    let { color, onSVChanged } = this.props;
-    let rectSize = this.refs.root.getBoundingClientRect();
+    const { color, onSVChanged } = this.props;
+
+    if (!this._root.value) {
+      return;
+    }
+
+    const rectSize = this._root.value.getBoundingClientRect();
 
-    let sPercentage = (ev.clientX - rectSize.left) / rectSize.width;
-    let vPercentage = (ev.clientY - rectSize.top) / rectSize.height;
+    const sPercentage = (ev.clientX - rectSize.left) / rectSize.width;
+    const vPercentage = (ev.clientY - rectSize.top) / rectSize.height;
 
-    let newColor = assign({}, color, {
+    const newColor = assign({}, color, {
       s: Math.min(MAX_COLOR_SATURATION, Math.max(0, sPercentage * MAX_COLOR_SATURATION)),
       v: Math.min(MAX_COLOR_VALUE, Math.max(0, MAX_COLOR_VALUE - (vPercentage * MAX_COLOR_VALUE))),
     });
diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx
index 57c4851505053..5c74c41296b04 100644
--- a/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx
+++ b/packages/office-ui-fabric-react/src/components/ColorPicker/ColorSlider.tsx
@@ -2,7 +2,8 @@ import * as React from 'react';
 import {
   BaseComponent,
   autobind,
-  css
+  css,
+  createRef
 } from '../../Utilities';
 import * as stylesImport from './ColorPicker.scss';
 const styles: any = stylesImport;
@@ -34,15 +35,12 @@ export class ColorSlider extends BaseComponent<IColorSliderProps, IColorSliderSt
     value: 0
   };
 
-  public refs: {
-    [key: string]: React.ReactInstance;
-    root: HTMLElement;
-  };
+  private _root = createRef<HTMLDivElement>();
 
   constructor(props: IColorSliderProps) {
     super(props);
 
-    let { value } = this.props;
+    const { value } = this.props;
 
     this.state = {
       isAdjusting: false,
@@ -58,14 +56,14 @@ export class ColorSlider extends BaseComponent<IColorSliderProps, IColorSliderSt
   }
 
   public render() {
-    let { className, minValue, maxValue, overlayStyle } = this.props;
-    let { currentValue, isAdjusting } = this.state;
+    const { className, minValue, maxValue, overlayStyle } = this.props;
+    const { currentValue, isAdjusting } = this.state;
 
-    let currentPercentage = 100 * (currentValue! - minValue!) / (maxValue! - minValue!);
+    const currentPercentage = 100 * (currentValue! - minValue!) / (maxValue! - minValue!);
 
     return (
       <div
-        ref='root'
+        ref={ this._root }
         className={ css(
           'ms-ColorPicker-slider',
           styles.slider,
@@ -90,11 +88,15 @@ export class ColorSlider extends BaseComponent<IColorSliderProps, IColorSliderSt
 
   @autobind
   private _onMouseMove(ev: React.MouseEvent<HTMLElement>) {
-    let { onChanged, minValue, maxValue } = this.props;
-    let rectSize = this.refs.root.getBoundingClientRect();
+    if (!this._root.value) {
+      return;
+    }
+
+    const { onChanged, minValue, maxValue } = this.props;
+    const rectSize = this._root.value.getBoundingClientRect();
 
-    let currentPercentage = (ev.clientX - rectSize.left) / rectSize.width;
-    let newValue = Math.min(maxValue!, Math.max(minValue!, currentPercentage * maxValue!));
+    const currentPercentage = (ev.clientX - rectSize.left) / rectSize.width;
+    const newValue = Math.min(maxValue!, Math.max(minValue!, currentPercentage * maxValue!));
 
     this.setState({
       isAdjusting: true,
diff --git a/packages/office-ui-fabric-react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap
index 98b91e6a9727f..004797c12984c 100644
--- a/packages/office-ui-fabric-react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/ColorPicker/__snapshots__/ColorPicker.test.tsx.snap
@@ -85,7 +85,7 @@ exports[`ColorPicker renders ColorPicker correctly 1`] = `
               {
                 -moz-osx-font-smoothing: grayscale;
                 -webkit-font-smoothing: antialiased;
-                font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                 font-size: 12px;
                 font-weight: 400;
               }
@@ -128,10 +128,9 @@ exports[`ColorPicker renders ColorPicker correctly 1`] = `
                     className="ms-TextField-field"
                     id="TextField0"
                     onBlur={[Function]}
-                    onChange={undefined}
+                    onChange={[Function]}
                     onFocus={[Function]}
-                    onInput={undefined}
-                    readOnly={true}
+                    onInput={[Function]}
                     spellCheck={false}
                     type="text"
                     value="ffffff"
@@ -163,10 +162,9 @@ exports[`ColorPicker renders ColorPicker correctly 1`] = `
                     className="ms-TextField-field"
                     id="TextField2"
                     onBlur={[Function]}
-                    onChange={undefined}
+                    onChange={[Function]}
                     onFocus={[Function]}
-                    onInput={undefined}
-                    readOnly={true}
+                    onInput={[Function]}
                     spellCheck={false}
                     type="text"
                     value="255"
@@ -198,10 +196,9 @@ exports[`ColorPicker renders ColorPicker correctly 1`] = `
                     className="ms-TextField-field"
                     id="TextField4"
                     onBlur={[Function]}
-                    onChange={undefined}
+                    onChange={[Function]}
                     onFocus={[Function]}
-                    onInput={undefined}
-                    readOnly={true}
+                    onInput={[Function]}
                     spellCheck={false}
                     type="text"
                     value="255"
@@ -233,10 +230,9 @@ exports[`ColorPicker renders ColorPicker correctly 1`] = `
                     className="ms-TextField-field"
                     id="TextField6"
                     onBlur={[Function]}
-                    onChange={undefined}
+                    onChange={[Function]}
                     onFocus={[Function]}
-                    onInput={undefined}
-                    readOnly={true}
+                    onInput={[Function]}
                     spellCheck={false}
                     type="text"
                     value="255"
@@ -268,10 +264,9 @@ exports[`ColorPicker renders ColorPicker correctly 1`] = `
                     className="ms-TextField-field"
                     id="TextField8"
                     onBlur={[Function]}
-                    onChange={undefined}
+                    onChange={[Function]}
                     onFocus={[Function]}
-                    onInput={undefined}
-                    readOnly={true}
+                    onInput={[Function]}
                     spellCheck={false}
                     type="text"
                     value="100"
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.styles.ts b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.styles.ts
index 23814ba2fb8f8..1d357dc9ecd08 100644
--- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.styles.ts
@@ -63,7 +63,6 @@ export const getOptionStyles = memoizeFunction((
   const ComboBoxOptionTextColorSelected = palette.black;
   const ComboBoxOptionTextColorDisabled = semanticColors.disabledText;
   const ComboBoxOptionBackgroundDisabled = semanticColors.bodyBackground;
-  const ComboBoxOptionBorderColorFocused = palette.neutralSecondary;
 
   const optionStyles: IComboBoxOptionStyles = {
     root: [
@@ -149,6 +148,9 @@ export const getCaretDownButtonStyles = memoizeFunction((
       color: caretButtonTextColor,
       fontSize: FontSizes.small,
       position: 'absolute',
+      // The negative positioning accounts for the 1px root border now that box-sizing is border-box
+      top: '-1px',
+      right: '-1px',
       height: ComboBoxHeight,
       lineHeight: ComboBoxLineHeight,
       width: ComboxBoxCaretDownWidth,
@@ -204,6 +206,23 @@ export const getStyles = memoizeFunction((
   const ComboBoxCalloutBorderColor = palette.neutralLight;
   const ComboBoxOptionHeaderTextColor = semanticColors.menuHeader;
   const ComboBoxOptionDividerBorderColor = semanticColors.bodyDivider;
+  const ComboBoxRootHighContrastFocused = {
+    color: 'HighlightText',
+    borderColor: 'Highlight',
+    backgroundColor: 'Window',
+    borderWidth: '2px',
+    MsHighContrastAdjust: 'none',
+    paddingLeft: '11px',
+    paddingTop: '0',
+    paddingBottom: '0',
+    selectors: {
+      '.ms-ComboBox-CaretDown-button': {
+        // Negative positioning to account for the 2px border
+        right: '-2px',
+        top: '-2px'
+      }
+    }
+  };
 
   const styles: IComboBoxStyles = {
     container: {},
@@ -213,11 +232,10 @@ export const getStyles = memoizeFunction((
       fonts.medium,
       {
         boxShadow: 'none',
-        marginBottom: '10px',
         marginLeft: '0',
-        paddingTop: '0',
+        paddingTop: '1px', // The 1px padding centers the input field, avoiding overlap in the browser
+        paddingBottom: '1px',
         paddingRight: ComboxBoxCaretDownWidth,
-        paddingBottom: '0',
         paddingLeft: '12px',
         color: ComboBoxRootTextColor,
         position: 'relative',
@@ -230,11 +248,10 @@ export const getStyles = memoizeFunction((
         cursor: 'text',
         display: 'block',
         height: ComboBoxHeight,
-        lineHeight: ComboBoxLineHeight,
         overflow: 'hidden',
         whiteSpace: 'nowrap',
         textOverflow: 'ellipsis',
-        boxSizing: 'content-box',
+        boxSizing: 'border-box', // Border-box matches Dropdown and TextField
         selectors: {
           '.ms-Label': {
             display: 'inline-block',
@@ -248,7 +265,10 @@ export const getStyles = memoizeFunction((
             }
           },
           '&.is-open': {
-            borderColor: ComboBoxRootBorderColorFocused
+            borderColor: ComboBoxRootBorderColorFocused,
+            selectors: {
+              [HighContrastSelector]: ComboBoxRootHighContrastFocused
+            },
           }
         }
       }
@@ -260,23 +280,23 @@ export const getStyles = memoizeFunction((
         [HighContrastSelector]: {
           color: 'HighlightText',
           borderColor: 'Highlight',
+          backgroundColor: 'Window',
           MsHighContrastAdjust: 'none'
         }
       },
     },
 
     rootPressed: {
-      borderColor: ComboBoxRootBorderColorFocused
+      borderColor: ComboBoxRootBorderColorFocused,
+      selectors: {
+        [HighContrastSelector]: ComboBoxRootHighContrastFocused
+      }
     },
 
     rootFocused: {
       borderColor: ComboBoxRootBorderColorFocused,
       selectors: {
-        [HighContrastSelector]: {
-          color: 'HighlightText',
-          borderColor: 'Highlight',
-          MsHighContrastAdjust: 'none'
-        }
+        [HighContrastSelector]: ComboBoxRootHighContrastFocused
       },
     },
 
@@ -292,13 +312,12 @@ export const getStyles = memoizeFunction((
     input: {
       boxSizing: 'border-box',
       width: '100%',
-      height: '30px',
+      height: '28px',
       borderStyle: 'none',
       outline: 'none',
       font: 'inherit',
       textOverflow: 'ellipsis',
       padding: '0',
-      margin: '1px 0px'
     },
 
     inputDisabled: getDisabledStyles(theme),
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.test.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.test.tsx
index 5d7513d8d3c09..c329c255558fe 100644
--- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.test.tsx
@@ -34,7 +34,7 @@ describe('ComboBox', () => {
       <ComboBox options={ DEFAULT_OPTIONS } />,
       { createNodeMock }
     );
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
@@ -45,7 +45,6 @@ describe('ComboBox', () => {
         label='testgroup'
         options={ DEFAULT_OPTIONS }
       />);
-    let comboBoxRoot = wrapper.find('.ms-ComboBox');
 
     expectMissing(wrapper, '.ms-ComboBox.is-disabled');
     expectOne(wrapper, '[data-is-interactable=true]');
@@ -63,7 +62,7 @@ describe('ComboBox', () => {
 
   it('Renders no selected item in default case', () => {
 
-    let wrapper = mount(
+    const wrapper = mount(
       <ComboBox
         label='testgroup'
         options={ DEFAULT_OPTIONS }
@@ -73,27 +72,27 @@ describe('ComboBox', () => {
   });
 
   it('Renders a selected item in uncontrolled case', () => {
-    let wrapper = mount(
+    const wrapper = mount(
       <ComboBox
         label='testgroup'
         defaultSelectedKey='1'
         options={ DEFAULT_OPTIONS }
       />);
-    let comboBoxRoot = wrapper.find('.ms-ComboBox');
-    let inputElement: ReactWrapper<React.InputHTMLAttributes<any>, any> = comboBoxRoot.find('input');
+    const comboBoxRoot = wrapper.find('.ms-ComboBox');
+    const inputElement: ReactWrapper<React.InputHTMLAttributes<any>, any> = comboBoxRoot.find('input');
 
     expect(inputElement.props().value).toEqual('1');
   });
 
   it('Renders a selected item in controlled case', () => {
-    let wrapper = mount(
+    const wrapper = mount(
       <ComboBox
         label='testgroup'
         selectedKey='1'
         options={ DEFAULT_OPTIONS }
       />);
-    let comboBoxRoot = wrapper.find('.ms-ComboBox');
-    let inputElement: ReactWrapper<React.InputHTMLAttributes<any>, any> = comboBoxRoot.find('input');
+    const comboBoxRoot = wrapper.find('.ms-ComboBox');
+    const inputElement: ReactWrapper<React.InputHTMLAttributes<any>, any> = comboBoxRoot.find('input');
 
     expect(inputElement.props().value).toEqual('1');
   });
@@ -109,7 +108,7 @@ describe('ComboBox', () => {
       comboBoxComponent = ref;
     };
 
-    let wrapper = mount(
+    const wrapper = mount(
       <ComboBox
         label='testgroup'
         options={ DEFAULT_OPTIONS }
@@ -119,7 +118,7 @@ describe('ComboBox', () => {
       />);
     comboBoxRoot = wrapper.find('.ms-ComboBox');
     inputElement = comboBoxRoot.find('input');
-    inputElement.simulate('change', { target: { value: 'f' } });
+    inputElement.simulate('input', { target: { value: 'f' } });
     inputElement.simulate('keydown', { which: KeyCodes.enter });
     expect((comboBoxComponent as React.Component<any, any>).state.currentOptions.length).toEqual(DEFAULT_OPTIONS.length);
   });
@@ -132,7 +131,7 @@ describe('ComboBox', () => {
       comboBoxComponent = ref;
     };
 
-    let wrapper = mount(
+    const wrapper = mount(
       <ComboBox
         label='testgroup'
         options={ DEFAULT_OPTIONS }
@@ -141,42 +140,41 @@ describe('ComboBox', () => {
       />);
     comboBoxRoot = wrapper.find('.ms-ComboBox');
     inputElement = comboBoxRoot.find('input');
-    inputElement.simulate('change', { target: { value: 'f' } });
+    inputElement.simulate('input', { target: { value: 'f' } });
     inputElement.simulate('keydown', { which: KeyCodes.enter });
-    let currentOptions = (comboBoxComponent as React.Component<any, any>).state.currentOptions;
+    const currentOptions = (comboBoxComponent as React.Component<any, any>).state.currentOptions;
     expect(currentOptions.length).toEqual(DEFAULT_OPTIONS.length + 1);
     expect(currentOptions[currentOptions.length - 1].text).toEqual('f');
   });
 
   it('Renders a default value with options', () => {
-    let wrapper = mount(
+    const wrapper = mount(
       <ComboBox
         label='testgroup'
         value='1'
         options={ DEFAULT_OPTIONS }
       />);
-    let comboBoxRoot = wrapper.find('.ms-ComboBox');
-    let inputElement: ReactWrapper<React.InputHTMLAttributes<any>, any> = comboBoxRoot.find('input');
+    const comboBoxRoot = wrapper.find('.ms-ComboBox');
+    const inputElement: ReactWrapper<React.InputHTMLAttributes<any>, any> = comboBoxRoot.find('input');
 
     expect(inputElement.props().value).toEqual('1');
   });
 
   it('Renders a default value with no options', () => {
-    let wrapper = mount(
+    const wrapper = mount(
       <ComboBox
         label='testgroup'
         options={ [] }
         value='1'
       />);
-    let comboBoxRoot = wrapper.find('.ms-ComboBox');
-    let inputElement: ReactWrapper<React.InputHTMLAttributes<any>, any> = comboBoxRoot.find('input');
+    const comboBoxRoot = wrapper.find('.ms-ComboBox');
+    const inputElement: ReactWrapper<React.InputHTMLAttributes<any>, any> = comboBoxRoot.find('input');
 
     expect(inputElement.props().value).toEqual('1');
   });
 
   it('Can change items in uncontrolled case', () => {
-    let comboBoxRoot;
-    let wrapper = mount(
+    const wrapper = mount(
       <ComboBox
         label='testgroup'
         defaultSelectedKey='1'
@@ -184,24 +182,24 @@ describe('ComboBox', () => {
       />);
 
     // Manually assign `offsetParent` and `scrollIntoView` since it doesn't exist without DOM
-    let el = document.createElement('div') as Element;
+    const el = document.createElement('div') as Element;
     el.scrollIntoView = () => null;
     Object.defineProperty(HTMLElement.prototype, 'offsetParent', { get: () => el });
 
-    let buttonElement = wrapper.find('button');
+    const buttonElement = wrapper.find('button');
     buttonElement.simulate('click');
-    let secondItemElement: Element = wrapper.getDOMNode().ownerDocument.querySelector('.ms-ComboBox-option[data-index="1"]')!;
+    const secondItemElement: Element = wrapper.getDOMNode().ownerDocument.querySelector('.ms-ComboBox-option[data-index="1"]')!;
 
     ReactTestUtils.Simulate.click(secondItemElement);
 
     wrapper.update();
 
-    let inputElement: ReactWrapper<React.InputHTMLAttributes<any>, any> = wrapper.find('input');
+    const inputElement: ReactWrapper<React.InputHTMLAttributes<any>, any> = wrapper.find('input');
     expect(inputElement.props().value).toEqual('2');
   });
 
   it('Can insert text in uncontrolled case with autoComplete and allowFreeform on', () => {
-    let wrapper = mount(
+    const wrapper = mount(
       <ComboBox
         label='testgroup'
         defaultSelectedKey='1'
@@ -210,13 +208,13 @@ describe('ComboBox', () => {
         allowFreeform={ true }
       />);
 
-    wrapper.find('input').simulate('change', { target: { value: 'f' } });
+    wrapper.find('input').simulate('input', { target: { value: 'f' } });
     wrapper.update();
     expect(wrapper.find('input').props().value).toEqual('Foo');
   });
 
   it('Can insert text in uncontrolled case with autoComplete on and allowFreeform off', () => {
-    let wrapper = mount(
+    const wrapper = mount(
       <ComboBox
         label='testgroup'
         defaultSelectedKey='1'
@@ -225,13 +223,13 @@ describe('ComboBox', () => {
         allowFreeform={ false }
       />);
 
-    wrapper.find('input').simulate('change', { target: { value: 'f' } });
+    wrapper.find('input').simulate('input', { target: { value: 'f' } });
     wrapper.update();
     expect(wrapper.find('input').props().value).toEqual('Foo');
   });
 
   it('Can insert text in uncontrolled case with autoComplete off and allowFreeform on', () => {
-    let wrapper = mount(
+    const wrapper = mount(
       <ComboBox
         label='testgroup'
         defaultSelectedKey='1'
@@ -239,13 +237,13 @@ describe('ComboBox', () => {
         autoComplete='off'
         allowFreeform={ true }
       />);
-    wrapper.find('input').simulate('change', { target: { value: 'f' } });
+    wrapper.find('input').simulate('input', { target: { value: 'f' } });
     wrapper.update();
     expect(wrapper.find('input').props().value).toEqual('f');
   });
 
   it('Can insert text in uncontrolled case with autoComplete and allowFreeform off', () => {
-    let wrapper = mount(
+    const wrapper = mount(
       <ComboBox
         label='testgroup'
         defaultSelectedKey='1'
@@ -259,7 +257,7 @@ describe('ComboBox', () => {
   });
 
   it('Can change selected option with keyboard', () => {
-    let wrapper = mount(
+    const wrapper = mount(
       <ComboBox
         label='testgroup'
         defaultSelectedKey='1'
@@ -271,7 +269,7 @@ describe('ComboBox', () => {
   });
 
   it('Cannot insert text while disabled', () => {
-    let wrapper = mount(
+    const wrapper = mount(
       <ComboBox
         label='testgroup'
         defaultSelectedKey='1'
@@ -284,7 +282,7 @@ describe('ComboBox', () => {
   });
 
   it('Cannot change selected option with keyboard while disabled', () => {
-    let wrapper = mount(
+    const wrapper = mount(
       <ComboBox
         label='testgroup'
         defaultSelectedKey='1'
@@ -297,7 +295,7 @@ describe('ComboBox', () => {
   });
 
   it('Cannot expand the menu when clicking on the input while disabled', () => {
-    let wrapper = mount(
+    const wrapper = mount(
       <ComboBox
         label='testgroup'
         defaultSelectedKey='1'
@@ -311,7 +309,7 @@ describe('ComboBox', () => {
   it('Cannot expand the menu when clicking on the button while disabled', () => {
     let comboBoxRoot;
     let buttonElement;
-    let wrapper = mount(
+    const wrapper = mount(
       <ComboBox
         label='testgroup'
         defaultSelectedKey='1'
@@ -329,7 +327,7 @@ describe('ComboBox', () => {
     let buttonElement;
     const returnUndefined = jest.fn();
 
-    let wrapper = mount(
+    const wrapper = mount(
       <ComboBox
         label='testgroup'
         defaultSelectedKey='1'
@@ -346,11 +344,11 @@ describe('ComboBox', () => {
     let updatedOption;
     let updatedIndex;
     let executionCount = 0;
-    let initialOption = { key: '1', text: 'Text' };
+    const initialOption = { key: '1', text: 'Text' };
 
     let comboBoxRoot;
     let inputElement: ReactWrapper<React.InputHTMLAttributes<any>, any>;
-    let wrapper = mount(
+    const wrapper = mount(
       <ComboBox
         label='testgroup'
         options={ [initialOption] }
@@ -365,10 +363,10 @@ describe('ComboBox', () => {
       />);
     comboBoxRoot = wrapper.find('.ms-ComboBox');
     inputElement = comboBoxRoot.find('input');
-    inputElement.simulate('change', { target: { value: 't' } });
-    inputElement.simulate('change', { target: { value: 'e' } });
-    inputElement.simulate('change', { target: { value: 'x' } });
-    inputElement.simulate('change', { target: { value: 't' } });
+    inputElement.simulate('input', { target: { value: 't' } });
+    inputElement.simulate('input', { target: { value: 'e' } });
+    inputElement.simulate('input', { target: { value: 'x' } });
+    inputElement.simulate('input', { target: { value: 't' } });
     inputElement.simulate('keydown', { which: KeyCodes.enter });
     expect(executionCount).toEqual(1);
     expect(updatedOption).toEqual(initialOption);
@@ -377,4 +375,20 @@ describe('ComboBox', () => {
     wrapper.update();
     expect(wrapper.find('.ms-ComboBox input').props().value).toEqual('Text');
   });
+
+  it('merges callout classNames', () => {
+    ReactTestUtils.renderIntoDocument<ComboBox>(
+      <ComboBox
+        options={ DEFAULT_OPTIONS }
+        calloutProps={ { className: 'foo' } }
+      />
+    );
+
+    setTimeout(() => {
+      const callout = document.querySelector('.ms-Callout') as HTMLElement;
+      expect(callout).toBeDefined();
+      expect(callout.classList.contains('ms-ComboBox-callout')).toBeTruthy();
+      expect(callout.classList.contains('foo')).toBeTruthy();
+    }, 0);
+  });
 });
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx
index 30a8992faae93..eeb67596e1afc 100644
--- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.tsx
@@ -7,7 +7,7 @@ import {
   CommandButton,
   IconButton
 } from '../../Button';
-import { BaseAutoFill } from '../pickers/AutoFill/BaseAutoFill';
+import { Autofill } from '../Autofill/Autofill';
 import {
   autobind,
   BaseComponent,
@@ -16,17 +16,15 @@ import {
   getId,
   getNativeProps,
   KeyCodes,
-  customizable
+  customizable,
+  css
 } from '../../Utilities';
-import { SelectableOptionMenuItemType, ISelectableOption } from '../../utilities/selectableOption/SelectableOption.types';
+import { SelectableOptionMenuItemType } from '../../utilities/selectableOption/SelectableOption.types';
 import {
   getStyles,
   getOptionStyles,
   getCaretDownButtonStyles
 } from './ComboBox.styles';
-import {
-  IComboBoxStyles,
-} from './ComboBox.types';
 import {
   IComboBoxClassNames,
   getClassNames,
@@ -88,13 +86,10 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     buttonIconProps: { iconName: 'ChevronDown' }
   };
 
-  public refs: {
-    [key: string]: React.ReactInstance,
-    root: HTMLElement
-  };
+  private _root: HTMLElement;
 
   // The input aspect of the comboBox
-  private _comboBox: BaseAutoFill;
+  private _comboBox: Autofill;
 
   // The wrapping div of the input and button
   private _comboBoxWrapper: HTMLDivElement;
@@ -127,6 +122,8 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
 
   private _isScrollIdle: boolean;
 
+  private _hasPendingValue: boolean;
+
   private readonly _scrollIdleDelay: number = 250 /* ms */;
 
   private _scrollIdleTimeoutId: number | undefined;
@@ -151,10 +148,10 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
 
     this._id = props.id || getId('ComboBox');
 
-    let selectedKey = props.defaultSelectedKey !== undefined ? props.defaultSelectedKey : props.selectedKey;
+    const selectedKey = props.defaultSelectedKey !== undefined ? props.defaultSelectedKey : props.selectedKey;
     this._isScrollIdle = true;
 
-    let index: number = this._getSelectedIndex(props.options, selectedKey);
+    const index: number = this._getSelectedIndex(props.options, selectedKey);
 
     this.state = {
       isOpen: false,
@@ -180,7 +177,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
       newProps.value !== this.props.value ||
       newProps.options !== this.props.options) {
 
-      let index: number = this._getSelectedIndex(newProps.options, newProps.selectedKey);
+      const index: number = this._getSelectedIndex(newProps.options, newProps.selectedKey);
 
       this.setState({
         selectedIndex: index,
@@ -190,13 +187,13 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   }
 
   public componentDidUpdate(prevProps: IComboBoxProps, prevState: IComboBoxState) {
-    let {
+    const {
       allowFreeform,
       value,
       onMenuOpen,
       onMenuDismissed
     } = this.props;
-    let {
+    const {
       isOpen,
       focused,
       selectedIndex,
@@ -238,6 +235,8 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
       this._select();
     }
 
+    this._notifyPendingValueChanged(prevState);
+
     if (isOpen && !prevState.isOpen && onMenuOpen) {
       onMenuOpen();
     }
@@ -256,8 +255,8 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
 
   // Primary Render
   public render() {
-    let id = this._id;
-    let {
+    const id = this._id;
+    const {
       className,
       label,
       disabled,
@@ -269,33 +268,42 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
       onRenderItem = this._onRenderItem,
       onRenderOption = this._onRenderOption,
       allowFreeform,
-      autoComplete,
       buttonIconProps,
       isButtonAriaHidden = true,
       styles: customStyles,
       theme,
       title
     } = this.props;
-    let { isOpen, selectedIndex, focused, suggestedDisplayValue } = this.state;
+    const { isOpen, focused, suggestedDisplayValue } = this.state;
     this._currentVisibleValue = this._getVisibleValue();
 
-    let divProps = getNativeProps(this.props, divProperties);
-
-    let hasErrorMessage = (errorMessage && errorMessage.length > 0) ? true : false;
-
-    this._classNames = getClassNames(
-      getStyles(theme!, customStyles),
-      className!,
-      !!isOpen,
-      !!disabled,
-      !!required,
-      !!focused,
-      !!allowFreeform,
-      !!hasErrorMessage
-    );
+    const divProps = getNativeProps(this.props, divProperties);
+
+    const hasErrorMessage = (errorMessage && errorMessage.length > 0) ? true : false;
+
+    this._classNames = this.props.getClassNames ?
+      this.props.getClassNames(
+        theme!,
+        !!isOpen,
+        !!disabled,
+        !!required,
+        !!focused,
+        !!allowFreeform,
+        !!hasErrorMessage,
+        className) :
+      getClassNames(
+        getStyles(theme!, customStyles),
+        className!,
+        !!isOpen,
+        !!disabled,
+        !!required,
+        !!focused,
+        !!allowFreeform,
+        !!hasErrorMessage
+      );
 
     return (
-      <div {...divProps } ref='root' className={ this._classNames.container }>
+      <div { ...divProps } ref={ this._resolveRef('_root') } className={ this._classNames.container }>
         { label && (
           <Label id={ id + '-label' } disabled={ disabled } required={ required } htmlFor={ id + '-input' } className={ this._classNames.label }>{ label }</Label>
         ) }
@@ -304,7 +312,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
           id={ id + 'wrapper' }
           className={ this._classNames.root }
         >
-          <BaseAutoFill
+          <Autofill
             data-is-interactable={ !disabled }
             ref={ this._resolveRef('_comboBox') }
             id={ id + '-input' }
@@ -314,7 +322,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
             onBlur={ this._onBlur }
             onKeyDown={ this._onInputKeyDown }
             onKeyUp={ this._onInputKeyUp }
-            onClick={ this._onBaseAutofillClick }
+            onClick={ this._onAutofillClick }
             onInputValueChange={ this._onInputChange }
             aria-expanded={ isOpen }
             aria-autocomplete={ this._getAriaAutoCompleteValue() }
@@ -330,8 +338,8 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
             spellCheck={ false }
             defaultVisibleValue={ this._currentVisibleValue }
             suggestedDisplayValue={ suggestedDisplayValue }
-            updateValueInWillReceiveProps={ this._onUpdateValueInAutoFillWillReceiveProps }
-            shouldSelectFullInputValueInComponentDidUpdate={ this._onShouldSelectFullInputValueInAutoFillComponentDidUpdate }
+            updateValueInWillReceiveProps={ this._onUpdateValueInAutofillWillReceiveProps }
+            shouldSelectFullInputValueInComponentDidUpdate={ this._onShouldSelectFullInputValueInAutofillComponentDidUpdate }
             title={ title }
           />
           <IconButton
@@ -339,6 +347,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
             styles={ this._getCaretButtonStyles() }
             role='presentation'
             aria-hidden={ isButtonAriaHidden }
+            data-is-focusable={ false }
             tabIndex={ -1 }
             onClick={ this._onComboBoxClick }
             iconProps={ buttonIconProps }
@@ -389,19 +398,19 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    */
   @autobind
   public dismissMenu(): void {
-    let { isOpen } = this.state;
+    const { isOpen } = this.state;
     isOpen && this.setState({ isOpen: false });
   }
 
   /**
    * componentWillReceiveProps handler for the auto fill component
    * Checks/updates the iput value to set, if needed
-   * @param {IBaseAutoFillProps} defaultVisibleValue - the defaultVisibleValue that got passed
+   * @param {IAutofillProps} defaultVisibleValue - the defaultVisibleValue that got passed
    *  in to the auto fill's componentWillReceiveProps
    * @returns {string} - the updated value to set, if needed
    */
   @autobind
-  private _onUpdateValueInAutoFillWillReceiveProps(): string | null {
+  private _onUpdateValueInAutofillWillReceiveProps(): string | null {
     if (this._comboBox === null || this._comboBox === undefined) {
       return null;
     }
@@ -422,7 +431,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * True if the defaultVisibleValue equals the suggestedDisplayValue, false otherwise
    */
   @autobind
-  private _onShouldSelectFullInputValueInAutoFillComponentDidUpdate(): boolean {
+  private _onShouldSelectFullInputValueInAutofillComponentDidUpdate(): boolean {
     return this._currentVisibleValue === this.state.suggestedDisplayValue;
   }
 
@@ -433,12 +442,12 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    */
   @autobind
   private _getVisibleValue(): string | undefined {
-    let {
+    const {
       value,
       allowFreeform,
       autoComplete
     } = this.props;
-    let {
+    const {
       selectedIndex,
       currentPendingValueValidIndex,
       currentOptions,
@@ -447,7 +456,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
       isOpen
     } = this.state;
 
-    let currentPendingIndexValid = this._indexWithinBounds(currentOptions, currentPendingValueValidIndex);
+    const currentPendingIndexValid = this._indexWithinBounds(currentOptions, currentPendingValueValidIndex);
 
     // If the user passed is a value prop, use that
     // unless we are open and have a valid current pending index
@@ -527,7 +536,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * @param updatedValue - the input's newly changed value
    */
   private _processInputChangeWithFreeform(updatedValue: string) {
-    let {
+    const {
       currentOptions
     } = this.state;
 
@@ -538,7 +547,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
 
     // Remember the original value and then,
     // make the value lowercase for comparison
-    let originalUpdatedValue: string = updatedValue;
+    const originalUpdatedValue: string = updatedValue;
     updatedValue = updatedValue.toLocaleLowerCase();
 
     let newSuggestedDisplayValue = '';
@@ -548,7 +557,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     if (this.props.autoComplete === 'on') {
 
       // If autoComplete is on, attempt to find a match where the text of an option starts with the updated value
-      let items = currentOptions.map((item, index) => { return { ...item, index }; }).filter((option) => option.itemType !== SelectableOptionMenuItemType.Header && option.itemType !== SelectableOptionMenuItemType.Divider).filter((option) => option.text.toLocaleLowerCase().indexOf(updatedValue) === 0);
+      const items = currentOptions.map((item, index) => { return { ...item, index }; }).filter((option) => option.itemType !== SelectableOptionMenuItemType.Header && option.itemType !== SelectableOptionMenuItemType.Divider).filter((option) => option.text.toLocaleLowerCase().indexOf(updatedValue) === 0);
       if (items.length > 0) {
         // If the user typed out the complete option text, we don't need any suggested display text anymore
         newSuggestedDisplayValue = items[0].text.toLocaleLowerCase() !== updatedValue ? items[0].text : '';
@@ -559,7 +568,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     } else {
 
       // If autoComplete is off, attempt to find a match only when the value is exactly equal to the text of an option
-      let items = currentOptions.map((item, index) => { return { ...item, index }; }).filter((option) => option.itemType !== SelectableOptionMenuItemType.Header && option.itemType !== SelectableOptionMenuItemType.Divider).filter((option) => option.text.toLocaleLowerCase() === updatedValue);
+      const items = currentOptions.map((item, index) => { return { ...item, index }; }).filter((option) => option.itemType !== SelectableOptionMenuItemType.Header && option.itemType !== SelectableOptionMenuItemType.Divider).filter((option) => option.text.toLocaleLowerCase() === updatedValue);
 
       // if we fould a match remember the index
       if (items.length === 1) {
@@ -577,7 +586,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * @param updatedValue - the input's newly changed value
    */
   private _processInputChangeWithoutFreeform(updatedValue: string) {
-    let {
+    const {
       currentPendingValue,
       currentPendingValueValidIndex,
       currentOptions,
@@ -603,11 +612,11 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
           updatedValue = currentPendingValue + updatedValue;
         }
 
-        let originalUpdatedValue: string = updatedValue;
+        const originalUpdatedValue: string = updatedValue;
         updatedValue = updatedValue.toLocaleLowerCase();
 
         // If autoComplete is on, attempt to find a match where the text of an option starts with the updated value
-        let items = currentOptions.map((item, i) => { return { ...item, index: i }; }).filter((option) => option.itemType !== SelectableOptionMenuItemType.Header && option.itemType !== SelectableOptionMenuItemType.Divider).filter((option) => option.text.toLocaleLowerCase().indexOf(updatedValue) === 0);
+        const items = currentOptions.map((item, i) => { return { ...item, index: i }; }).filter((option) => option.itemType !== SelectableOptionMenuItemType.Header && option.itemType !== SelectableOptionMenuItemType.Divider).filter((option) => option.text.toLocaleLowerCase().indexOf(updatedValue) === 0);
 
         // If we found a match, udpdate the state
         if (items.length > 0) {
@@ -627,7 +636,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     // If we get here, either autoComplete is on or we did not find a match with autoComplete on.
     // Remember we are not allowing freeform, so at this point, if we have a pending valid value index
     // use that; otherwise use the selectedIndex
-    let index = currentPendingValueValidIndex >= 0 ? currentPendingValueValidIndex : selectedIndex;
+    const index = currentPendingValueValidIndex >= 0 ? currentPendingValueValidIndex : selectedIndex;
 
     // Since we are not allowing freeform, we need to
     // set both the pending and suggested values/index
@@ -645,7 +654,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * it will snap to the edge of the options array. If delta == 0 and the given index is not selectable
    */
   private _getNextSelectableIndex(index: number, searchDirection: SearchDirection): number {
-    let { currentOptions } = this.state;
+    const { currentOptions } = this.state;
 
     let newIndex = index + searchDirection;
 
@@ -655,7 +664,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
       return -1;
     }
 
-    let option: IComboBoxOption = currentOptions[newIndex];
+    const option: IComboBoxOption = currentOptions[newIndex];
 
     // attempt to skip headers and dividers
     if ((option.itemType === SelectableOptionMenuItemType.Header ||
@@ -683,8 +692,8 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * @param searchDirection - the direction to search along the options from the given index
    */
   private _setSelectedIndex(index: number, searchDirection: SearchDirection = SearchDirection.none) {
-    let { onChanged } = this.props;
-    let { selectedIndex, currentOptions } = this.state;
+    const { onChanged, onPendingValueChanged } = this.props;
+    const { selectedIndex, currentOptions } = this.state;
 
     // Find the next selectable index, if searchDirection is none
     // we will get our starting index back
@@ -697,13 +706,19 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     // Are we at a new index? If so, update the state, otherwise
     // there is nothing to do
     if (index !== selectedIndex) {
-      let option: IComboBoxOption = currentOptions[index];
+      const option: IComboBoxOption = currentOptions[index];
 
       // Set the selected option
       this.setState({
         selectedIndex: index
       });
 
+      // If ComboBox value is changed, revert preview first
+      if (this._hasPendingValue && onPendingValueChanged) {
+        onPendingValueChanged();
+        this._hasPendingValue = false;
+      }
+
       // Did the creator give us an onChanged callback?
       if (onChanged) {
         onChanged(option, index);
@@ -721,7 +736,9 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    */
   @autobind
   private _select() {
-    this._comboBox.inputElement.select();
+    if (this._comboBox.inputElement) {
+      this._comboBox.inputElement.select();
+    }
 
     if (!this.state.focused) {
       this.setState({ focused: true });
@@ -738,7 +755,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     if (this.props.onResolveOptions) {
 
       // get the options
-      let newOptions = this.props.onResolveOptions({ ...this.state.currentOptions });
+      const newOptions = this.props.onResolveOptions({ ...this.state.currentOptions });
 
       // Check to see if the returned value is an array, if it is update the state
       // If the returned value is not an array then check to see if it's a promise or PromiseLike. If it is then resolve it asynchronously.
@@ -750,7 +767,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
 
         // Ensure that the promise will only use the callback if it was the most recent one
         // and update the state when the promise returns
-        let promise: PromiseLike<IComboBoxOption[]> = this._currentPromise = newOptions;
+        const promise: PromiseLike<IComboBoxOption[]> = this._currentPromise = newOptions;
         promise.then((newOptionsFromPromise: IComboBoxOption[]) => {
           if (promise === this._currentPromise) {
             this.setState({
@@ -773,7 +790,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     // inside the comboBox root or the comboBox menu since
     // it we are not really bluring from the whole comboBox
     if (event.relatedTarget &&
-      (this.refs.root && this.refs.root.contains(event.relatedTarget as HTMLElement) ||
+      (this._root && this._root.contains(event.relatedTarget as HTMLElement) ||
         this._comboBoxMenu && this._comboBoxMenu.contains(event.relatedTarget as HTMLElement))) {
       event.preventDefault();
       event.stopPropagation();
@@ -790,12 +807,12 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * Submit a pending value if there is one
    */
   private _submitPendingValue() {
-    let {
+    const {
       onChanged,
       allowFreeform,
       autoComplete
     } = this.props;
-    let {
+    const {
       currentPendingValue,
       currentPendingValueValidIndex,
       currentOptions,
@@ -808,7 +825,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
 
       // Check to see if the user typed an exact match
       if (this._indexWithinBounds(currentOptions, currentPendingValueValidIndex)) {
-        let pendingOptionText: string = currentOptions[currentPendingValueValidIndex].text.toLocaleLowerCase();
+        const pendingOptionText: string = currentOptions[currentPendingValueValidIndex].text.toLocaleLowerCase();
 
         // By exact match, that means: our pending value is the same as the the pending option text OR
         // the pending option starts with the pending value and we have an "autoComplete" selection
@@ -818,7 +835,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
           (autoComplete && pendingOptionText.indexOf(currentPendingValue.toLocaleLowerCase()) === 0 &&
             (this._comboBox.isValueSelected &&
               currentPendingValue.length + (this._comboBox.selectionEnd - this._comboBox.selectionStart) === pendingOptionText.length) ||
-            (this._comboBox.inputElement.value.toLocaleLowerCase() === pendingOptionText)
+            (this._comboBox.inputElement && this._comboBox.inputElement.value.toLocaleLowerCase() === pendingOptionText)
           )) {
           this._setSelectedIndex(currentPendingValueValidIndex);
           this._clearPendingInfo();
@@ -830,8 +847,8 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
         onChanged(undefined, undefined, currentPendingValue);
       } else {
         // If we are not controlled, create a new option
-        let newOption: IComboBoxOption = { key: currentPendingValue, text: currentPendingValue };
-        let newOptions: IComboBoxOption[] = [...currentOptions, newOption];
+        const newOption: IComboBoxOption = { key: currentPendingValue, text: currentPendingValue };
+        const newOptions: IComboBoxOption[] = [...currentOptions, newOption];
 
         this.setState({
           currentOptions: newOptions,
@@ -854,7 +871,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   // Render Callout container and pass in list
   @autobind
   private _onRenderContainer(props: IComboBoxProps): JSX.Element {
-    let {
+    const {
       onRenderList,
       calloutProps,
       dropdownWidth,
@@ -870,7 +887,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
         directionalHint={ DirectionalHint.bottomLeftEdge }
         directionalHintFixed={ true }
         { ...calloutProps }
-        className={ this._classNames.callout }
+        className={ css(this._classNames.callout, calloutProps ? calloutProps.className : undefined) }
         target={ this._comboBoxWrapper }
         onDismiss={ this._onDismiss }
         onScroll={ this._onScroll }
@@ -891,12 +908,12 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   // Render List of items
   @autobind
   private _onRenderList(props: IComboBoxProps): JSX.Element {
-    let {
+    const {
       onRenderItem,
       options
     } = props;
 
-    let id = this._id;
+    const id = this._id;
     return (
       <div
         id={ id + '-list' }
@@ -930,7 +947,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
 
   // Render separator
   private _renderSeparator(item: IComboBoxOption): JSX.Element | null {
-    let { index, key } = item;
+    const { index, key } = item;
 
     if (index && index > 0) {
       return (
@@ -945,7 +962,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   }
 
   private _renderHeader(item: IComboBoxOption): JSX.Element {
-    let { onRenderOption = this._onRenderOption } = this.props;
+    const { onRenderOption = this._onRenderOption } = this.props;
 
     return (
       <div key={ item.key } className={ this._classNames.header } role='heading'>
@@ -956,9 +973,9 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   // Render menu item
   @autobind
   private _renderOption(item: IComboBoxOption): JSX.Element {
-    let { onRenderOption = this._onRenderOption } = this.props;
-    let id = this._id;
-    let isSelected: boolean = this._isOptionSelected(item.index);
+    const { onRenderOption = this._onRenderOption } = this.props;
+    const id = this._id;
+    const isSelected: boolean = this._isOptionSelected(item.index);
     const rootClassNames = getComboBoxOptionClassNames(this._getCurrentOptionStyles(item)).root;
 
     return (
@@ -998,7 +1015,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * otherwise use the selected index
    * */
   private _isOptionSelected(index: number | undefined): boolean {
-    let {
+    const {
       currentPendingValueValidIndexOnHover
     } = this.state;
 
@@ -1017,7 +1034,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * finding the index
    */
   private _getPendingSelectedIndex(includeCurrentPendingValue: boolean): number {
-    let {
+    const {
       currentPendingValueValidIndexOnHover,
       currentPendingValueValidIndex,
       currentPendingValue,
@@ -1053,12 +1070,12 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * Scroll the selected element into view
    */
   private _scrollIntoView() {
-    let {
+    const {
       onScrollToItem,
       scrollSelectedToTop
     } = this.props;
 
-    let {
+    const {
       currentPendingValueValidIndex,
       currentPendingValue,
       selectedIndex
@@ -1075,8 +1092,8 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
         let alignToTop = true;
 
         if (this._comboBoxMenu.offsetParent) {
-          let scrollableParentRect = this._comboBoxMenu.offsetParent.getBoundingClientRect();
-          let selectedElementRect = this._selectedElement.offsetParent.getBoundingClientRect();
+          const scrollableParentRect = this._comboBoxMenu.offsetParent.getBoundingClientRect();
+          const selectedElementRect = this._selectedElement.offsetParent.getBoundingClientRect();
 
           // If we are completely in view then we do not need to scroll
           if (scrollableParentRect.top <= selectedElementRect.top &&
@@ -1155,7 +1172,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * selected state text
    */
   private _resetSelectedIndex() {
-    let {
+    const {
       selectedIndex,
       currentOptions
     } = this.state;
@@ -1201,12 +1218,12 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * @param index - the index to set the pending info from
    */
   private _setPendingInfoFromIndex(index: number) {
-    let {
+    const {
       currentOptions
     } = this.state;
 
     if (index >= 0 && index < currentOptions.length) {
-      let option = currentOptions[index];
+      const option = currentOptions[index];
       this._setPendingInfo(option.text, index, option.text);
     } else {
       this._clearPendingInfo();
@@ -1220,11 +1237,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * @param searchDirection - the direction to search
    */
   private _setPendingInfoFromIndexAndDirection(index: number, searchDirection: SearchDirection) {
-    let {
-      isOpen,
-      selectedIndex,
-      currentOptions
-    } = this.state;
+    const { currentOptions } = this.state;
 
     index = this._getNextSelectableIndex(index, searchDirection);
     if (this._indexWithinBounds(currentOptions, index)) {
@@ -1232,6 +1245,41 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
     }
   }
 
+  private _notifyPendingValueChanged(prevState: IComboBoxState) {
+    const { onPendingValueChanged } = this.props;
+
+    if (!onPendingValueChanged) {
+      return;
+    }
+
+    const {
+      currentPendingValue,
+      currentOptions,
+      currentPendingValueValidIndex,
+      currentPendingValueValidIndexOnHover
+    } = this.state;
+
+    let newPendingIndex: number | undefined = undefined;
+    let newPendingValue: string | undefined = undefined;
+
+    if (currentPendingValueValidIndexOnHover !== prevState.currentPendingValueValidIndexOnHover && this._indexWithinBounds(currentOptions, currentPendingValueValidIndexOnHover)) {
+      // Set new pending index if hover index was changed
+      newPendingIndex = currentPendingValueValidIndexOnHover;
+    } else if (currentPendingValueValidIndex !== prevState.currentPendingValueValidIndex && this._indexWithinBounds(currentOptions, currentPendingValueValidIndex)) {
+      // Set new pending index if currentPendingValueValidIndex was changed
+      newPendingIndex = currentPendingValueValidIndex;
+    } else if (currentPendingValue !== prevState.currentPendingValue && currentPendingValue !== '') {
+      // Set pendingValue in the case it was changed and no index was changed
+      newPendingValue = currentPendingValue;
+    }
+
+    // Notify when there is a new pending index/value. Also, if there is a pending value, it needs to send undefined.
+    if (newPendingIndex !== undefined || newPendingValue || this._hasPendingValue) {
+      onPendingValueChanged(newPendingIndex ? currentOptions[newPendingIndex] : undefined, newPendingIndex, newPendingValue);
+      this._hasPendingValue = newPendingIndex !== undefined || newPendingValue !== undefined;
+    }
+  }
+
   /**
    * Sets the isOpen state and updates focusInputAfterClose
    */
@@ -1247,15 +1295,14 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * @param ev - The keyboard event that was fired
    */
   @autobind
-  private _onInputKeyDown(ev: React.KeyboardEvent<HTMLElement | BaseAutoFill>) {
-    let {
+  private _onInputKeyDown(ev: React.KeyboardEvent<HTMLElement | Autofill>) {
+    const {
       disabled,
       allowFreeform,
       autoComplete
     } = this.props;
-    let {
+    const {
       isOpen,
-      currentPendingValueValidIndex,
       currentOptions,
       currentPendingValueValidIndexOnHover
     } = this.state;
@@ -1410,8 +1457,8 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * @param ev - the keyboard event that was fired
    */
   @autobind
-  private _onInputKeyUp(ev: React.KeyboardEvent<HTMLElement | BaseAutoFill>) {
-    let {
+  private _onInputKeyUp(ev: React.KeyboardEvent<HTMLElement | Autofill>) {
+    const {
       disabled,
       allowFreeform,
       autoComplete
@@ -1428,7 +1475,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
         // make space expand/collapse the comboBox
         // and allow the event to propagate
         if (!allowFreeform && autoComplete === 'off') {
-          let isOpen = this.state.isOpen;
+          const isOpen = this.state.isOpen;
           this._setOpenStateAndFocusOnClose(!isOpen, !!isOpen);
           return;
         }
@@ -1477,7 +1524,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * eating the required key event when disabled
    * @param ev - the keyboard event that was fired
    */
-  private _handleInputWhenDisabled(ev: React.KeyboardEvent<HTMLElement | BaseAutoFill> | null) {
+  private _handleInputWhenDisabled(ev: React.KeyboardEvent<HTMLElement | Autofill> | null) {
     // If we are disabled, close the menu (if needed)
     // and eat all keystokes other than TAB or ESC
     if (this.props.disabled) {
@@ -1504,8 +1551,8 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    */
   @autobind
   private _onComboBoxClick() {
-    let { disabled } = this.props;
-    let { isOpen } = this.state;
+    const { disabled } = this.props;
+    const { isOpen } = this.state;
 
     if (!disabled) {
       this._setOpenStateAndFocusOnClose(!isOpen, false /* focusInputAfterClose */);
@@ -1516,7 +1563,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
    * Click handler for the autofill.
    */
   @autobind
-  private _onBaseAutofillClick() {
+  private _onAutofillClick() {
     if (this.props.allowFreeform) {
       this.focus(this.state.isOpen);
     } else {
@@ -1562,7 +1609,7 @@ export class ComboBox extends BaseComponent<IComboBoxProps, IComboBoxState> {
   * dynamically populate input, and 'none' if auto-complete is not enabled as we can't give user inputs.
   */
   private _getAriaAutoCompleteValue(): string {
-    let autoComplete = !this.props.disabled && this.props.autoComplete === 'on';
+    const autoComplete = !this.props.disabled && this.props.autoComplete === 'on';
     return autoComplete ? (this.props.allowFreeform ? 'inline' : 'both') : 'none';
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts
index f15c3cb116484..4a8d53820f8b4 100644
--- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBox.types.ts
@@ -4,6 +4,7 @@ import { ISelectableDroppableTextProps } from '../../utilities/selectableOption/
 import { IStyle, ITheme } from '../../Styling';
 import { IButtonStyles } from '../../Button';
 import { IRenderFunction } from '../../Utilities';
+import { IComboBoxClassNames } from './ComboBox.classNames';
 
 export interface IComboBox {
   /**
@@ -47,6 +48,11 @@ export interface IComboBoxProps extends ISelectableDroppableTextProps<IComboBox>
    */
   onChanged?: (option?: IComboBoxOption, index?: number, value?: string) => void;
 
+  /**
+   * Callback issued when the user changes the pending value in ComboBox
+   */
+  onPendingValueChanged?: (option?: IComboBoxOption, index?: number, value?: string) => void;
+
   /**
    * Function that gets invoked when the ComboBox menu is launched
    */
@@ -101,6 +107,21 @@ export interface IComboBoxProps extends ISelectableDroppableTextProps<IComboBox>
    */
   styles?: Partial<IComboBoxStyles>;
 
+  /**
+   * Custom function for providing the classNames for the ComboBox. Can be used to provide
+   * all styles for the component instead of applying them on top of the default styles.
+   */
+  getClassNames?: (
+    theme: ITheme,
+    isOpen: boolean,
+    disabled: boolean,
+    required: boolean,
+    focused: boolean,
+    allowFreeForm: boolean,
+    hasErrorMessage: boolean,
+    className?: string
+  ) => IComboBoxClassNames;
+
   /**
    * Styles for the caret down button.
    */
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBoxPage.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBoxPage.tsx
index 6beae488d6529..5ef42f2043090 100644
--- a/packages/office-ui-fabric-react/src/components/ComboBox/ComboBoxPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/ComboBoxPage.tsx
@@ -29,6 +29,7 @@ export class ComboBoxPage extends React.Component<IComponentDemoPageProps, {}> {
             </ExampleCard>
           </div>
         }
+        allowNativeProps={ true }
         propertiesTables={
           <PropertiesTableSet
             sources={ [
@@ -61,7 +62,7 @@ export class ComboBoxPage extends React.Component<IComponentDemoPageProps, {}> {
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...ComboBoxStatus}
+            { ...ComboBoxStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/VirtualizedComboBox.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/VirtualizedComboBox.tsx
index 64929fc3ada78..210f51d51d1db 100644
--- a/packages/office-ui-fabric-react/src/components/ComboBox/VirtualizedComboBox.tsx
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/VirtualizedComboBox.tsx
@@ -1,25 +1,25 @@
 import * as React from 'react';
-import { autobind, BaseComponent, customizable } from '../../Utilities';
+import { autobind, BaseComponent, createRef } from '../../Utilities';
 import { ComboBox } from './ComboBox';
 import { IComboBoxProps, IComboBox } from './ComboBox.types';
 import { List } from '../../List';
-import { SelectableOptionMenuItemType, ISelectableOption } from '../../utilities/selectableOption/SelectableOption.types';
+import { ISelectableOption } from '../../utilities/selectableOption/SelectableOption.types';
 
 export class VirtualizedComboBox extends BaseComponent<IComboBoxProps, {}> implements IComboBox {
   /** The combo box element */
-  private _comboBox: ComboBox;
+  private _comboBox = createRef<IComboBox>();
   /** The virtualized list element */
-  private _list: List;
+  private _list = createRef<List>();
 
   public dismissMenu(): void {
-    if (this._comboBox) {
-      return this._comboBox.dismissMenu();
+    if (this._comboBox.value) {
+      return this._comboBox.value.dismissMenu();
     }
   }
 
   public focus() {
-    if (this._comboBox) {
-      this._comboBox.focus();
+    if (this._comboBox.value) {
+      this._comboBox.value.focus();
       return true;
     }
 
@@ -29,8 +29,8 @@ export class VirtualizedComboBox extends BaseComponent<IComboBoxProps, {}> imple
   public render(): JSX.Element {
     return (
       <ComboBox
-        {...this.props}
-        componentRef={ this._resolveRef('_comboBox') }
+        { ...this.props }
+        componentRef={ this._comboBox }
         onRenderList={ this._onRenderList }
         onScrollToItem={ this._onScrollToItem }
       />
@@ -46,7 +46,7 @@ export class VirtualizedComboBox extends BaseComponent<IComboBoxProps, {}> imple
     // Render virtualized list
     return (
       <List
-        componentRef={ this._resolveRef('_list') }
+        componentRef={ this._list }
         role='listbox'
         items={ props.options }
         onRenderCell={ onRenderItem ? (item: ISelectableOption) => onRenderItem(item) : () => null }
@@ -57,6 +57,6 @@ export class VirtualizedComboBox extends BaseComponent<IComboBoxProps, {}> imple
   @autobind
   protected _onScrollToItem(itemIndex: number): void {
     // We are using the List component, call scrollToIndex
-    this._list.scrollToIndex(itemIndex);
+    this._list.value && this._list.value.scrollToIndex(itemIndex);
   }
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
index 72cfa71b8c91a..4410b1e5c5388 100644
--- a/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/__snapshots__/ComboBox.test.tsx.snap
@@ -16,23 +16,21 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
           border-style: solid;
           border-width: 1px;
           box-shadow: none;
-          box-sizing: content-box;
+          box-sizing: border-box;
           color: #333333;
           cursor: text;
           display: block;
-          font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+          font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
           font-size: 14px;
           font-weight: 400;
           height: 32px;
-          line-height: 30px;
-          margin-bottom: 10px;
           margin-left: 0;
           outline: 0;
           overflow: hidden;
-          padding-bottom: 0;
+          padding-bottom: 1px;
           padding-left: 12px;
           padding-right: 32px;
-          padding-top: 0;
+          padding-top: 1px;
           position: relative;
           text-overflow: ellipsis;
           user-select: none;
@@ -48,24 +46,62 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
         &.is-open {
           border-color: #0078d7;
         }
+        @media screen and (-ms-high-contrast: active){&.is-open {
+          -ms-high-contrast-adjust: none;
+          background-color: Window;
+          border-color: Highlight;
+          border-width: 2px;
+          color: HighlightText;
+          padding-bottom: 0;
+          padding-left: 11px;
+          padding-top: 0;
+        }
+        @media screen and (-ms-high-contrast: active){&.is-open .ms-ComboBox-CaretDown-button {
+          right: -2px;
+          top: -2px;
+        }
         &:hover {
           border-color: #212121;
         }
         @media screen and (-ms-high-contrast: active){&:hover {
           -ms-high-contrast-adjust: none;
+          background-color: Window;
           border-color: Highlight;
           color: HighlightText;
         }
         &:active {
           border-color: #0078d7;
         }
+        @media screen and (-ms-high-contrast: active){&:active {
+          -ms-high-contrast-adjust: none;
+          background-color: Window;
+          border-color: Highlight;
+          border-width: 2px;
+          color: HighlightText;
+          padding-bottom: 0;
+          padding-left: 11px;
+          padding-top: 0;
+        }
+        @media screen and (-ms-high-contrast: active){&:active .ms-ComboBox-CaretDown-button {
+          right: -2px;
+          top: -2px;
+        }
         &:focus {
           border-color: #0078d7;
         }
         @media screen and (-ms-high-contrast: active){&:focus {
           -ms-high-contrast-adjust: none;
+          background-color: Window;
           border-color: Highlight;
+          border-width: 2px;
           color: HighlightText;
+          padding-bottom: 0;
+          padding-left: 11px;
+          padding-top: 0;
+        }
+        @media screen and (-ms-high-contrast: active){&:focus .ms-ComboBox-CaretDown-button {
+          right: -2px;
+          top: -2px;
         }
     id="ComboBox0wrapper"
   >
@@ -87,11 +123,7 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
             border-style: none;
             box-sizing: border-box;
             font: inherit;
-            height: 30px;
-            margin-bottom: 1px;
-            margin-left: 0px;
-            margin-right: 0px;
-            margin-top: 1px;
+            height: 28px;
             outline: none;
             padding-bottom: 0;
             padding-left: 0;
@@ -109,6 +141,7 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
       onCompositionEnd={[Function]}
       onCompositionStart={[Function]}
       onFocus={[Function]}
+      onInput={[Function]}
       onKeyDown={[Function]}
       onKeyUp={[Function]}
       readOnly={true}
@@ -127,8 +160,8 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
       checked={false}
       className=
           ms-Button
-          ms-Button--icon
           ms-ComboBox-CaretDown-button
+          ms-Button--icon
           {
             -moz-osx-font-smoothing: grayscale;
             -webkit-font-smoothing: antialiased;
@@ -139,7 +172,7 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
             color: #666666;
             cursor: default;
             display: inline-block;
-            font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
             font-size: 12px;
             font-weight: 400;
             height: 32px;
@@ -150,8 +183,10 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
             padding-right: 4px;
             padding-top: 0;
             position: absolute;
+            right: -1px;
             text-align: center;
             text-decoration: none;
+            top: -1px;
             user-select: none;
             vertical-align: top;
             width: 32px;
@@ -185,7 +220,7 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
             background-color: #eaeaea;
             color: #212121;
           }
-      data-is-focusable={true}
+      data-is-focusable={false}
       disabled={undefined}
       onClick={[Function]}
       role="presentation"
@@ -205,7 +240,6 @@ exports[`ComboBox Renders ComboBox correctly 1`] = `
       >
         <i
           aria-hidden={true}
-          aria-label={undefined}
           className=
               ms-Button-icon
               {
diff --git a/packages/office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.Basic.Example.tsx
index b60a6d25d7c0c..808f65d3b456a 100644
--- a/packages/office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ComboBox/examples/ComboBox.Basic.Example.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import {
   ComboBox,
-  IComboBoxProps,
   IComboBoxOption,
   VirtualizedComboBox
 } from 'office-ui-fabric-react/lib/ComboBox';
@@ -20,20 +19,20 @@ export class ComboBoxBasicExample extends React.Component<{}, {
   value?: string;
 }> {
   private _testOptions =
-    [{ key: 'Header', text: 'Theme Fonts', itemType: SelectableOptionMenuItemType.Header },
-    { key: 'A', text: 'Arial Black' },
-    { key: 'B', text: 'Times New Roman' },
-    { key: 'C', text: 'Comic Sans MS' },
-    { key: 'divider_2', text: '-', itemType: SelectableOptionMenuItemType.Divider },
-    { key: 'Header1', text: 'Other Options', itemType: SelectableOptionMenuItemType.Header },
-    { key: 'D', text: 'Option d' },
-    { key: 'E', text: 'Option e' },
-    { key: 'F', text: 'Option f' },
-    { key: 'G', text: 'Option g' },
-    { key: 'H', text: 'Option h' },
-    { key: 'I', text: 'Option i' },
-    { key: 'J', text: 'Option j', disabled: true },
-    ];
+  [{ key: 'Header', text: 'Theme Fonts', itemType: SelectableOptionMenuItemType.Header },
+  { key: 'A', text: 'Arial Black' },
+  { key: 'B', text: 'Times New Roman' },
+  { key: 'C', text: 'Comic Sans MS' },
+  { key: 'divider_2', text: '-', itemType: SelectableOptionMenuItemType.Divider },
+  { key: 'Header1', text: 'Other Options', itemType: SelectableOptionMenuItemType.Header },
+  { key: 'D', text: 'Option d' },
+  { key: 'E', text: 'Option e' },
+  { key: 'F', text: 'Option f' },
+  { key: 'G', text: 'Option g' },
+  { key: 'H', text: 'Option h' },
+  { key: 'I', text: 'Option i' },
+  { key: 'J', text: 'Option j', disabled: true },
+  ];
 
   private _fontMapping: { [key: string]: string } = {
     ['Arial Black']: '"Arial Black", "Arial Black_MSFontService", sans-serif',
@@ -62,7 +61,7 @@ export class ComboBoxBasicExample extends React.Component<{}, {
   }
 
   public render() {
-    let { options, selectedOptionKey, value } = this.state;
+    const { options, selectedOptionKey, value } = this.state;
 
     return (
       <div className='ms-ComboBoxBasicExample'>
@@ -81,7 +80,8 @@ export class ComboBoxBasicExample extends React.Component<{}, {
           onFocus={ () => console.log('onFocus called') }
           onBlur={ () => console.log('onBlur called') }
           onMenuOpen={ () => console.log('ComboBox menu opened') }
-          // tslint:enable:jsx-no-lambda
+          onPendingValueChanged={ (option, pendingIndex, pendingValue) => console.log('Preview value was changed. Pending index: ' + pendingIndex + '. Pending value: ' + pendingValue) }
+        // tslint:enable:jsx-no-lambda
         />
 
         <PrimaryButton
@@ -133,6 +133,7 @@ export class ComboBoxBasicExample extends React.Component<{}, {
           onFocus={ () => console.log('onFocus called') }
           onBlur={ () => console.log('onBlur called') }
           onMenuOpen={ () => console.log('ComboBox menu opened') }
+          onPendingValueChanged={ (option, pendingIndex, pendingValue) => console.log('Preview value was changed. Pending index: ' + pendingIndex + '. Pending value: ' + pendingValue) }
         // tslint:enable:jsx-no-lambda
         />
 
@@ -264,7 +265,7 @@ export class ComboBoxBasicExample extends React.Component<{}, {
       return this.state.options;
     }
 
-    let newOptions =
+    const newOptions =
       [
         { key: 'Header', text: 'Theme Fonts', itemType: SelectableOptionMenuItemType.Header },
         { key: 'A', text: 'Arial Black', fontFamily: '"Arial Black", "Arial Black_MSFontService", sans-serif' },
@@ -303,7 +304,7 @@ export class ComboBoxBasicExample extends React.Component<{}, {
         value: undefined
       });
     } else if (value !== undefined) {
-      let newOption: IComboBoxOption = { key: value, text: value };
+      const newOption: IComboBoxOption = { key: value, text: value };
 
       this.setState({
         options: [...this.state.options, newOption],
diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.scss b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.scss
index 64842145f3487..b7866ce88a0c8 100644
--- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.scss
+++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.scss
@@ -114,7 +114,8 @@ $SearchBox-sidePadding: 8px; // padding in input on left and right sides without
     color: $ms-color-neutralTertiaryAlt;
     cursor: default;
     pointer-events: none;
-    .itemIcon {
+    .itemIcon,
+    .itemChevronDown {
       color: $ms-color-neutralTertiaryAlt;
     }
   }
diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.test.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.test.tsx
index ac810998684d0..2783c1710eaed 100644
--- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.test.tsx
@@ -39,10 +39,54 @@ describe('CommandBar', () => {
     const component = renderer.create(
       <CommandBar items={ items } />
     );
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
+  it('adds the correct aria-setsize and -posinset attributes to the command bar items.', () => {
+    const items: IContextualMenuItem[] = [
+      {
+        name: 'TestText 1',
+        key: 'TestKey1',
+        className: 'item1',
+        subMenuProps: {
+          items: [
+            {
+              name: 'SubmenuText 1',
+              key: 'SubmenuKey1',
+              className: 'SubMenuClass'
+            }
+          ]
+        }
+      },
+      {
+        name: 'TestText 2',
+        key: 'TestKey2',
+        className: 'item2',
+      },
+      {
+        name: 'TestText 3',
+        key: 'TestKey3',
+        className: 'item3',
+      },
+    ];
+
+    const renderedContent = ReactTestUtils.renderIntoDocument<CommandBar>(
+      <CommandBar
+        items={ items }
+      />
+    ) as React.Component<CommandBar, {}>;
+    document.body.appendChild(ReactDOM.findDOMNode(renderedContent));
+
+    const [item1, item2, item3] = ['.item1', '.item2', '.item3'].map(i => document.querySelector(i)!.children[0]);
+    expect(item1.getAttribute('aria-setsize')).toBe('3');
+    expect(item2.getAttribute('aria-setsize')).toBe('3');
+    expect(item3.getAttribute('aria-setsize')).toBe('3');
+    expect(item1.getAttribute('aria-posinset')).toBe('1');
+    expect(item2.getAttribute('aria-posinset')).toBe('2');
+    expect(item3.getAttribute('aria-posinset')).toBe('3');
+  });
+
   it('opens a menu with deprecated IContextualMenuItem.items property', () => {
     const items: IContextualMenuItem[] = [
       {
@@ -58,14 +102,14 @@ describe('CommandBar', () => {
       },
     ];
 
-    let renderedContent = ReactTestUtils.renderIntoDocument<CommandBar>(
+    const renderedContent = ReactTestUtils.renderIntoDocument<CommandBar>(
       <CommandBar
         items={ items }
       />
     ) as React.Component<CommandBar, {}>;
     document.body.appendChild(ReactDOM.findDOMNode(renderedContent));
 
-    let menuItem = (ReactDOM.findDOMNode(renderedContent) as HTMLElement).querySelector('button') as HTMLButtonElement;
+    const menuItem = (ReactDOM.findDOMNode(renderedContent) as HTMLElement).querySelector('button') as HTMLButtonElement;
     ReactTestUtils.Simulate.click(menuItem);
 
     expect(document.querySelector('.SubMenuClass')).toBeDefined();
@@ -88,25 +132,25 @@ describe('CommandBar', () => {
       },
     ];
 
-    let renderedContent = ReactTestUtils.renderIntoDocument<CommandBar>(
+    const renderedContent = ReactTestUtils.renderIntoDocument<CommandBar>(
       <CommandBar
         items={ items }
       />
     ) as React.Component<CommandBar, {}>;
     document.body.appendChild(ReactDOM.findDOMNode(renderedContent));
 
-    let menuItem = (ReactDOM.findDOMNode(renderedContent) as HTMLElement).querySelector('button') as HTMLButtonElement;
+    const menuItem = (ReactDOM.findDOMNode(renderedContent) as HTMLElement).querySelector('button') as HTMLButtonElement;
     ReactTestUtils.Simulate.click(menuItem);
 
     expect(document.querySelector('.SubMenuClass')).toBeDefined();
   });
 
   it('keeps menu open after update if item is still present', () => {
-    let renderContainer = document.createElement('div');
+    const renderContainer = document.createElement('div');
     document.body.appendChild(renderContainer);
 
     try {
-      let items: IContextualMenuItem[] = [
+      const items: IContextualMenuItem[] = [
         {
           name: 'TestText 1',
           key: 'TestKey1',
@@ -129,7 +173,7 @@ describe('CommandBar', () => {
         renderContainer
       ) as React.Component<CommandBar, {}>;
 
-      let menuItem = (ReactDOM.findDOMNode(renderedContent) as HTMLElement).querySelector('button') as HTMLButtonElement;
+      const menuItem = (ReactDOM.findDOMNode(renderedContent) as HTMLElement).querySelector('button') as HTMLButtonElement;
       ReactTestUtils.Simulate.click(menuItem);
 
       // Make sure the menu is open before the re-render
@@ -157,7 +201,7 @@ describe('CommandBar', () => {
   });
 
   it('closes menu after update if item is not longer present', () => {
-    let renderContainer = document.createElement('div');
+    const renderContainer = document.createElement('div');
     document.body.appendChild(renderContainer);
 
     try {
@@ -184,7 +228,7 @@ describe('CommandBar', () => {
         renderContainer
       ) as React.Component<CommandBar, {}>;
 
-      let menuItem = (ReactDOM.findDOMNode(renderedContent) as HTMLElement).querySelector('button') as HTMLButtonElement;
+      const menuItem = (ReactDOM.findDOMNode(renderedContent) as HTMLElement).querySelector('button') as HTMLButtonElement;
       ReactTestUtils.Simulate.click(menuItem);
 
       // Make sure the menu is open before the re-render
@@ -212,11 +256,11 @@ describe('CommandBar', () => {
   });
 
   it('updates menu after update if item is still present', () => {
-    let renderContainer = document.createElement('div');
+    const renderContainer = document.createElement('div');
     document.body.appendChild(renderContainer);
 
     try {
-      let items: IContextualMenuItem[] = [
+      const items: IContextualMenuItem[] = [
         {
           name: 'TestText 1',
           key: 'TestKey1',
@@ -239,7 +283,7 @@ describe('CommandBar', () => {
         renderContainer
       ) as React.Component<CommandBar, {}>;
 
-      let menuItem = (ReactDOM.findDOMNode(renderedContent) as HTMLElement).querySelector('button') as HTMLButtonElement;
+      const menuItem = (ReactDOM.findDOMNode(renderedContent) as HTMLElement).querySelector('button') as HTMLButtonElement;
       ReactTestUtils.Simulate.click(menuItem);
 
       // Make sure the menu is open before the re-render
@@ -275,12 +319,12 @@ describe('CommandBar', () => {
       },
     ];
 
-    let renderedContent = ReactTestUtils.renderIntoDocument<CommandBar>(
+    const renderedContent = ReactTestUtils.renderIntoDocument<CommandBar>(
       <CommandBar
         items={ menuWithNoSubmenu }
       />
     ) as React.Component<CommandBar, {}>;
-    let menuItem = (ReactDOM.findDOMNode(renderedContent) as HTMLElement).querySelector('button') as HTMLButtonElement;
+    const menuItem = (ReactDOM.findDOMNode(renderedContent) as HTMLElement).querySelector('button') as HTMLButtonElement;
 
     expect(menuItem.querySelector('.ms-CommandBarItem-chevronDown')).not.toEqual(null);
   });
@@ -303,13 +347,13 @@ describe('CommandBar', () => {
       }
     ];
 
-    let renderedContent = ReactTestUtils.renderIntoDocument<CommandBar>(
+    const renderedContent = ReactTestUtils.renderIntoDocument<CommandBar>(
       <CommandBar
         items={ menuWithEmptySubMenu }
       />
     ) as React.Component<CommandBar, {}>;
 
-    let menuItem = (ReactDOM.findDOMNode(renderedContent) as HTMLElement).querySelector('button') as HTMLButtonElement;
+    const menuItem = (ReactDOM.findDOMNode(renderedContent) as HTMLElement).querySelector('button') as HTMLButtonElement;
 
     ReactTestUtils.Simulate.click(menuItem);
 
diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx
index a40a2bb30501e..c33eb4feb7c31 100644
--- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx
+++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBar.tsx
@@ -11,7 +11,8 @@ import {
 } from '../../Utilities';
 import { ICommandBar, ICommandBarProps, ICommandBarItemProps } from './CommandBar.types';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
-import { ContextualMenu, IContextualMenuProps, IContextualMenuItem, hasSubmenu } from '../../ContextualMenu';
+import { ContextualMenu, IContextualMenuProps, IContextualMenuItem } from '../../ContextualMenu';
+import { hasSubmenu } from '../../utilities/contextualMenu/index';
 import { DirectionalHint } from '../../common/DirectionalHint';
 import {
   Icon,
@@ -20,6 +21,8 @@ import {
 import { FontClassNames } from '../../Styling';
 import { TooltipHost } from '../../Tooltip';
 import * as stylesImport from './CommandBar.scss';
+import { createRef } from '../../Utilities';
+
 const styles: any = stylesImport;
 
 const OVERFLOW_KEY = 'overflow';
@@ -44,13 +47,15 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
 
   public refs: {
     [key: string]: React.ReactInstance;
-    commandSurface: HTMLElement;
-    farCommandSurface: HTMLElement;
-    commandBarRegion: HTMLElement;
-    searchSurface: HTMLElement;
-    focusZone: FocusZone;
   };
 
+  private _searchSurface = createRef<HTMLDivElement>();
+  private _commandSurface = createRef<HTMLDivElement>();
+  private _commandBarRegion = createRef<HTMLDivElement>();
+  private _farCommandSurface = createRef<HTMLDivElement>();
+  private _focusZone = createRef<FocusZone>();
+  private _overflow = createRef<HTMLDivElement>();
+
   private _id: string;
   private _overflowWidth: number;
   private _commandItemWidths: { [key: string]: number } | null;
@@ -88,14 +93,14 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
 
     if (isSearchBoxVisible) {
       searchBox = (
-        <div className={ css('ms-CommandBarSearch', styles.search) } ref='searchSurface'>
+        <div className={ css('ms-CommandBarSearch', styles.search) } ref={ this._searchSurface }>
           <input className={ css('ms-CommandBarSearch-input', styles.searchInput) } type='text' placeholder={ searchPlaceholderText } />
           <div
             className={ css(
               'ms-CommandBarSearch-iconWrapper ms-CommandBarSearch-iconSearchWrapper',
               styles.searchIconWrapper, styles.searchIconSearchWrapper) }
           >
-            { Icon({ iconName: 'Search' }) }
+            { <Icon iconName={ 'Search' } /> }
           </div>
           <div
             className={ css(
@@ -110,16 +115,19 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
         </div>
       );
     }
+    // Total # of menu items is regular items + far items + 1 for the ellipsis, if necessary
+    const setSize = renderedItems!.length + renderedFarItems!.length + (renderedOverflowItems && renderedOverflowItems.length > 0 ? 1 : 0);
+    let posInSet = 1;
 
     return (
-      <div className={ css('ms-CommandBar', styles.root, className) } ref='commandBarRegion'>
+      <div className={ css('ms-CommandBar', styles.root, className) } ref={ this._commandBarRegion }>
         { searchBox }
-        <FocusZone ref='focusZone' className={ styles.container } direction={ FocusZoneDirection.horizontal } role='menubar' >
-          <div className={ css('ms-CommandBar-primaryCommands', styles.primaryCommands) } ref='commandSurface'>
-            { renderedItems!.map((item, index) => (
-              this._renderItemInCommandBar(item, index, expandedMenuItemKey!)
+        <FocusZone ref={ this._focusZone } className={ styles.container } direction={ FocusZoneDirection.horizontal } role='menubar' >
+          <div className={ css('ms-CommandBar-primaryCommands', styles.primaryCommands) } ref={ this._commandSurface }>
+            { renderedItems!.map(item => (
+              this._renderItemInCommandBar(item, posInSet++, setSize, expandedMenuItemKey!)
             )).concat((renderedOverflowItems && renderedOverflowItems.length) ? [
-              <div className={ css('ms-CommandBarItem', styles.item) } key={ OVERFLOW_KEY } ref={ OVERFLOW_KEY }>
+              <div className={ css('ms-CommandBarItem', styles.item) } key={ OVERFLOW_KEY } ref={ this._overflow }>
                 <button
                   type='button'
                   id={ this._id + OVERFLOW_KEY }
@@ -131,6 +139,8 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
                   aria-expanded={ this.state.expandedMenuItemKey === OVERFLOW_KEY }
                   aria-label={ this.props.elipisisAriaLabel || '' }
                   aria-haspopup={ true }
+                  aria-setsize={ setSize }
+                  aria-posinset={ posInSet++ }
                   data-automation-id='commandBarOverflow'
                 >
                   <Icon className={ css('ms-CommandBarItem-overflow', styles.itemOverflow) } iconName='more' />
@@ -138,9 +148,9 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
               </div>
             ] : []) }
           </div>
-          <div className={ css('ms-CommandBar-sideCommands', styles.sideCommands) } ref='farCommandSurface'>
-            { renderedFarItems!.map((item, index) => (
-              this._renderItemInCommandBar(item, index, expandedMenuItemKey!, true)
+          <div className={ css('ms-CommandBar-sideCommands', styles.sideCommands) } ref={ this._farCommandSurface }>
+            { renderedFarItems!.map(item => (
+              this._renderItemInCommandBar(item, posInSet++, setSize, expandedMenuItemKey!, true)
             )) }
           </div>
         </FocusZone>
@@ -160,10 +170,11 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
   }
 
   public focus() {
-    this.refs.focusZone.focus();
+    const { value: focusZone } = this._focusZone;
+    focusZone && focusZone.focus();
   }
 
-  private _renderItemInCommandBar(item: ICommandBarItemProps, index: number, expandedMenuItemKey: string, isFarItem?: boolean) {
+  private _renderItemInCommandBar(item: ICommandBarItemProps, posInSet: number, setSize: number, expandedMenuItemKey: string, isFarItem?: boolean) {
     if (item.onRender) {
       return (
         <div className={ css('ms-CommandBarItem', styles.item, item.className) } key={ item.key } ref={ item.key }>
@@ -172,14 +183,14 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
       );
     }
 
-    const itemKey = item.key || String(index);
+    const itemKey = item.key || String(posInSet);
     const isLink = item.onClick || hasSubmenu(item);
     const className = css(
       isLink ? ('ms-CommandBarItem-link ' + styles.itemLink) : ('ms-CommandBarItem-text ' + styles.itemText),
       !item.name && ('ms-CommandBarItem--noName ' + styles.itemLinkIsNoName),
       (expandedMenuItemKey === item.key) && ('is-expanded ' + styles.itemLinkIsExpanded)
     );
-    let hasIcon = !!item.icon || !!item.iconProps;
+    const hasIcon = !!item.icon || !!item.iconProps;
     const isNameVisible = !!item.name && !item.iconOnly;
     const ariaLabel = item.ariaLabel || (item.iconOnly ? item.name : undefined);
 
@@ -196,6 +207,8 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
           aria-expanded={ hasSubmenu(item) ? expandedMenuItemKey === item.key : undefined }
           role='menuitem'
           aria-label={ ariaLabel }
+          aria-setsize={ setSize }
+          aria-posinset={ posInSet }
         >
           { (hasIcon) ? this._renderIcon(item) : (null) }
           { isNameVisible && (
@@ -222,6 +235,8 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
           aria-haspopup={ hasSubmenu(item) }
           role='menuitem'
           aria-label={ ariaLabel }
+          aria-setsize={ setSize }
+          aria-posinset={ posInSet }
         >
           { (hasIcon) ? this._renderIcon(item) : (null) }
           { isNameVisible && (
@@ -243,6 +258,8 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
           data-command-key={ itemKey }
           aria-haspopup={ hasSubmenu(item) }
           aria-label={ ariaLabel }
+          aria-setsize={ setSize }
+          aria-posinset={ posInSet }
         >
           { (hasIcon) ? this._renderIcon(item) : (null) }
           { (isNameVisible) && (
@@ -275,12 +292,12 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
 
   private _renderIcon(item: IContextualMenuItem) {
     // Only present to allow continued use of item.icon which is deprecated.
-    let iconProps: IIconProps = item.iconProps ? item.iconProps : {
+    const iconProps: IIconProps = item.iconProps ? item.iconProps : {
       iconName: item.icon
     };
     // Use the default icon color for the known icon names
-    let iconColorClassName = iconProps.iconName === 'None' ? '' : ('ms-CommandBarItem-iconColor ' + styles.itemIconColor);
-    let iconClassName = css('ms-CommandBarItem-icon', styles.itemIcon, iconColorClassName, iconProps.className);
+    const iconColorClassName = iconProps.iconName === 'None' ? '' : ('ms-CommandBarItem-iconColor ' + styles.itemIconColor);
+    const iconClassName = css('ms-CommandBarItem-icon', styles.itemIcon, iconColorClassName, iconProps.className);
 
     return <Icon { ...iconProps } className={ iconClassName } />;
   }
@@ -294,7 +311,7 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
 
   private _updateItemMeasurements() {
     // the generated width for overflow is 35 in chrome, 38 in IE, but the actual value is 41.5
-    if (this.refs[OVERFLOW_KEY] || (this.props.overflowItems && this.props.overflowItems.length)) {
+    if (this._overflow.value || (this.props.overflowItems && this.props.overflowItems.length)) {
       this._overflowWidth = OVERFLOW_WIDTH;
     } else {
       this._overflowWidth = 0;
@@ -305,10 +322,10 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
     }
 
     for (let i = 0; i < this.props.items.length; i++) {
-      let item = this.props.items[i];
+      const item = this.props.items[i];
 
       if (!this._commandItemWidths[item.key]) {
-        let el = this.refs[item.key] as HTMLElement;
+        const el = this.refs[item.key] as HTMLElement;
 
         if (el) {
           this._commandItemWidths[item.key] = el.getBoundingClientRect().width;
@@ -318,17 +335,21 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
   }
 
   private _updateRenderedItems() {
-    let { items, overflowItems } = this.props;
-    let commandSurface = this.refs.commandSurface;
-    let farCommandSurface = this.refs.farCommandSurface;
-    let commandBarRegion = this.refs.commandBarRegion;
-    let searchSurface = this.refs.searchSurface;
-    let renderedItems = [...items];
+    const { items, overflowItems } = this.props;
+    const commandSurface = this._commandSurface.value;
+    const farCommandSurface = this._farCommandSurface.value;
+    const commandBarRegion = this._commandBarRegion.value;
+    const searchSurface = this._searchSurface.value;
+    const renderedItems = [...items];
     let renderedOverflowItems = overflowItems;
     let consumedWidth = 0;
-    let isOverflowVisible = overflowItems && overflowItems.length;
+    const isOverflowVisible = overflowItems && overflowItems.length;
 
-    let style = window.getComputedStyle(commandSurface);
+    if (!commandSurface || !commandBarRegion) {
+      return;
+    }
+
+    const style = window.getComputedStyle(commandSurface);
     let availableWidth = commandBarRegion.clientWidth - parseInt(style.marginLeft!, 10) - parseInt(style.marginRight!, 10);
     if (searchSurface) {
       availableWidth -= searchSurface.getBoundingClientRect().width;
@@ -341,9 +362,14 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
       availableWidth -= this._overflowWidth;
     }
 
+    if (!this._commandItemWidths) {
+      this._asyncMeasure();
+      return;
+    }
+
     for (let i = 0; i < renderedItems.length; i++) {
-      let item = renderedItems[i];
-      let itemWidth = this._commandItemWidths![item.key];
+      const item = renderedItems[i];
+      const itemWidth = this._commandItemWidths[item.key];
 
       if ((consumedWidth + itemWidth) >= availableWidth) {
         if (i > 0 && !isOverflowVisible && (availableWidth - consumedWidth) < OVERFLOW_WIDTH) {
@@ -358,7 +384,7 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
 
     }
 
-    let renderedContextualMenuProps = this._getContextualMenuPropsAfterUpdate(
+    const renderedContextualMenuProps = this._getContextualMenuPropsAfterUpdate(
       renderedItems.concat(this.state.renderedFarItems!),
       renderedOverflowItems!);
 
@@ -405,8 +431,10 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
 
   @autobind
   private _onContextMenuDismiss(ev?: any) {
-    if (!ev || !ev.relatedTarget || !this.refs.commandSurface.contains(ev.relatedTarget as HTMLElement)) {
-      let { contextualMenuProps } = this.state;
+    const { value: commandSurface } = this._commandSurface;
+
+    if (!ev || !ev.relatedTarget || commandSurface && !commandSurface.contains(ev.relatedTarget as HTMLElement)) {
+      const { contextualMenuProps } = this.state;
 
       if (contextualMenuProps && contextualMenuProps.onDismiss) {
         this.state.contextualMenuProps!.onDismiss!(ev);
@@ -440,7 +468,7 @@ export class CommandBar extends BaseComponent<ICommandBarProps, ICommandBarState
         return { items: overflowItems };
       } else {
         // Find the currently open key in the new props
-        let matchingItem = renderedItems.filter(item => item.key === this.state.expandedMenuItemKey);
+        const matchingItem = renderedItems.filter(item => item.key === this.state.expandedMenuItemKey);
 
         if (matchingItem.length === 1) {
           return this._getContextualMenuPropsFromItem(matchingItem[0]);
diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBarPage.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBarPage.tsx
index 25ad0b83dbc07..c61b34d578c66 100644
--- a/packages/office-ui-fabric-react/src/components/CommandBar/CommandBarPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/CommandBar/CommandBarPage.tsx
@@ -18,7 +18,7 @@ const CommandBarCustomizationExampleCode = require('!raw-loader!office-ui-fabric
 
 export class CommandBarPage extends React.Component<IComponentDemoPageProps, {}> {
   public render() {
-    let cmdBarParamsTextAndIcons: any = { items, overflowItems, farItems };
+    const cmdBarParamsTextAndIcons: any = { items, overflowItems, farItems };
 
     return (
       <ComponentPage
diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap b/packages/office-ui-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
index 06410c197e976..89282c08b05c9 100644
--- a/packages/office-ui-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/CommandBar/__snapshots__/CommandBar.test.tsx.snap
@@ -24,6 +24,8 @@ exports[`CommandBar renders CommandBar correctly 1`] = `
           aria-expanded={false}
           aria-haspopup={true}
           aria-label={undefined}
+          aria-posinset={1}
+          aria-setsize={1}
           className="ms-CommandBarItem-link undefined"
           data-command-key="TestKey1"
           id="CommandBar0TestKey1"
@@ -38,7 +40,6 @@ exports[`CommandBar renders CommandBar correctly 1`] = `
           </span>
           <i
             aria-hidden={true}
-            aria-label={undefined}
             className=
                 ms-CommandBarItem-chevronDown
                 {
diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Basic.Example.tsx
index dc109995ec9b4..85e85d209c54a 100644
--- a/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Basic.Example.tsx
@@ -16,27 +16,27 @@ export class CommandBarBasicExample extends React.Component<any, any> {
   }
 
   public render() {
-    let { items, overflowItems, farItems } = this.props;
-    let {
+    const { items, overflowItems, farItems } = this.props;
+    const {
       isSearchBoxVisible: searchBoxVisible,
       areIconsVisible: iconsVisible,
       areNamesVisible: namesVisible,
       areItemsEnabled: itemsEnabled
     } = this.state;
 
-    let filteredItems = items.map((item: any) => assign({}, item, {
+    const filteredItems = items.map((item: any) => assign({}, item, {
       iconOnly: !namesVisible,
       icon: iconsVisible ? item.icon : '',
       disabled: !itemsEnabled
     }));
 
-    let filteredOverflowItems = overflowItems.map((item: any) => assign({}, item, {
+    const filteredOverflowItems = overflowItems.map((item: any) => assign({}, item, {
       iconOnly: !namesVisible,
       icon: iconsVisible ? item.icon : '',
       disabled: !itemsEnabled
     }));
 
-    let filteredFarItems = farItems.map((item: any) => assign({}, item, {
+    const filteredFarItems = farItems.map((item: any) => assign({}, item, {
       iconOnly: !namesVisible,
       icon: iconsVisible ? item.icon : '',
       disabled: !itemsEnabled
diff --git a/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Customization.Example.tsx b/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Customization.Example.tsx
index ef28110f38991..e5ef9fbfd6e37 100644
--- a/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Customization.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/CommandBar/examples/CommandBar.Customization.Example.tsx
@@ -55,13 +55,13 @@ export class CommandBarCustomizationExample extends React.Component<{}, ISplitDr
 
   @autobind
   private _renderSplitButtonMenuItem(item: IContextualMenuItem) {
-    let darkerBG = this.state.isContextMenuShown && styles.darkerBG;
+    const darkerBG = this.state.isContextMenuShown && styles.darkerBG;
 
-    let dropDownButtonClass = css(
+    const dropDownButtonClass = css(
       styles.button,
       darkerBG
     );
-    let mainBtnClassName = css(
+    const mainBtnClassName = css(
       !item.name && ('ms-CommandBarItem--noName'),
       styles.button,
       darkerBG
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.classNames.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.classNames.ts
index 9909db6f527bf..d568a25ea8df2 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.classNames.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.classNames.ts
@@ -1,6 +1,5 @@
 import { memoizeFunction } from '../../Utilities';
 import { ITheme, mergeStyleSets } from '../../Styling';
-import { IContextualMenuStyles, IMenuItemStyles } from './ContextualMenu.types';
 import { getStyles as getContextualMenuStyles, getMenuItemStyles } from './ContextualMenu.styles';
 import { IVerticalDividerClassNames } from '../Divider/VerticalDivider.types';
 import { getDividerClassNames } from '../Divider/VerticalDivider.classNames';
@@ -29,8 +28,6 @@ export interface IMenuItemClassNames {
 }
 
 export const getSplitButtonVerticalDividerClassNames = memoizeFunction((theme: ITheme): IVerticalDividerClassNames => {
-  const { semanticColors } = theme;
-  const ContextualMenuDividerColor = semanticColors.bodyDivider;
   return mergeStyleSets(getDividerClassNames(theme), {
     divider: {
       height: 16,
@@ -86,8 +83,6 @@ export const getItemClassNames = memoizeFunction((
   subMenuClassName?: string,
 ): IMenuItemClassNames => {
 
-  const { semanticColors } = theme;
-  const ContextualMenuIconColor = semanticColors.menuIcon;
   const styles = getMenuItemStyles(theme);
 
   return mergeStyleSets({
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx
index 628199910bb4e..e4d912aa78495 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.test.tsx
@@ -10,8 +10,7 @@ import { FocusZoneDirection } from '../../FocusZone';
 
 import { ContextualMenu, canAnyMenuItemsCheck } from './ContextualMenu';
 import { IContextualMenuItem, ContextualMenuItemType } from './ContextualMenu.types';
-import { Layer } from '../Layer/Layer';
-import { mount } from 'enzyme';
+import { LayerBase as Layer } from '../Layer/Layer.base';
 
 describe('ContextualMenu', () => {
 
@@ -38,7 +37,7 @@ describe('ContextualMenu', () => {
       />
     );
 
-    let menuList = document.querySelector('.ms-ContextualMenu-list') as HTMLUListElement;
+    const menuList = document.querySelector('.ms-ContextualMenu-list') as HTMLUListElement;
 
     expect(menuList.scrollHeight).toBeLessThanOrEqual(menuList.offsetHeight);
   });
@@ -52,7 +51,7 @@ describe('ContextualMenu', () => {
     ];
 
     let spyCalled = false;
-    let onDismissSpy = (ev?: any, dismissAll?: boolean) => { spyCalled = true; };
+    const onDismissSpy = (ev?: any, dismissAll?: boolean) => { spyCalled = true; };
 
     ReactTestUtils.renderIntoDocument<ContextualMenu>(
       <ContextualMenu
@@ -62,7 +61,7 @@ describe('ContextualMenu', () => {
       />
     );
 
-    let menuList = document.querySelector('ul.ms-ContextualMenu-list') as HTMLUListElement;
+    const menuList = document.querySelector('ul.ms-ContextualMenu-list') as HTMLUListElement;
     ReactTestUtils.Simulate.keyDown(menuList, { which: KeyCodes.left });
 
     expect(spyCalled).toEqual(true);
@@ -77,18 +76,18 @@ describe('ContextualMenu', () => {
     ];
 
     let spyCalled = false;
-    let onDismissSpy = (ev?: any, dismissAll?: boolean) => { spyCalled = true; };
+    const onDismissSpy = (ev?: any, dismissAll?: boolean) => { spyCalled = true; };
 
     ReactTestUtils.renderIntoDocument<ContextualMenu>(
       <ContextualMenu
         items={ items }
         isSubMenu={ true }
         onDismiss={ onDismissSpy }
-        arrowDirection={ FocusZoneDirection.horizontal }
+        focusZoneProps={ { direction: FocusZoneDirection.horizontal } }
       />
     );
 
-    let menuList = document.querySelector('ul.ms-ContextualMenu-list') as HTMLUListElement;
+    const menuList = document.querySelector('ul.ms-ContextualMenu-list') as HTMLUListElement;
     ReactTestUtils.Simulate.keyDown(menuList, { which: KeyCodes.left });
 
     expect(spyCalled).toEqual(false);
@@ -103,18 +102,18 @@ describe('ContextualMenu', () => {
     ];
 
     let spyCalled = false;
-    let onDismissSpy = (ev?: any, dismissAll?: boolean) => { spyCalled = true; };
+    const onDismissSpy = (ev?: any, dismissAll?: boolean) => { spyCalled = true; };
 
     ReactTestUtils.renderIntoDocument<ContextualMenu>(
       <ContextualMenu
         items={ items }
         isSubMenu={ true }
         onDismiss={ onDismissSpy }
-        arrowDirection={ FocusZoneDirection.horizontal }
+        focusZoneProps={ { direction: FocusZoneDirection.bidirectional } }
       />
     );
 
-    let menuList = document.querySelector('ul.ms-ContextualMenu-list') as HTMLUListElement;
+    const menuList = document.querySelector('ul.ms-ContextualMenu-list') as HTMLUListElement;
     ReactTestUtils.Simulate.keyDown(menuList, { which: KeyCodes.left });
 
     expect(spyCalled).toEqual(false);
@@ -142,7 +141,7 @@ describe('ContextualMenu', () => {
       />
     );
 
-    let menuItem = document.querySelector('button.ms-ContextualMenu-link') as HTMLButtonElement;
+    const menuItem = document.querySelector('button.ms-ContextualMenu-link') as HTMLButtonElement;
 
     ReactTestUtils.Simulate.keyDown(menuItem, { which: KeyCodes.right });
 
@@ -172,13 +171,46 @@ describe('ContextualMenu', () => {
       />
     );
 
-    let menuItem = document.querySelector('button.ms-ContextualMenu-link') as HTMLButtonElement;
+    const menuItem = document.querySelector('button.ms-ContextualMenu-link') as HTMLButtonElement;
 
     ReactTestUtils.Simulate.click(menuItem);
 
     expect(document.querySelector('.SubMenuClass')).toBeDefined();
   });
 
+  it('sets the correct aria-owns attribute for the submenu', () => {
+    const submenuId = 'testSubmenuId';
+    const items: IContextualMenuItem[] = [
+      {
+        name: 'TestText 1',
+        key: 'TestKey1',
+        subMenuProps: {
+          id: submenuId,
+          items: [
+            {
+              name: 'SubmenuText 1',
+              key: 'SubmenuKey1',
+              className: 'SubMenuClass'
+            }
+          ]
+        }
+      },
+    ];
+
+    ReactTestUtils.renderIntoDocument<ContextualMenu>(
+      <ContextualMenu
+        items={ items }
+      />
+    );
+
+    const parentMenuItem = document.querySelector('button.ms-ContextualMenu-link') as HTMLButtonElement;
+    ReactTestUtils.Simulate.click(parentMenuItem);
+    const childMenu = document.getElementById(submenuId);
+
+    expect(childMenu!.id).toBe(submenuId);
+    expect(parentMenuItem.getAttribute('aria-owns')).toBe(submenuId);
+  });
+
   it('still works with deprecated IContextualMenuItem.items property', () => {
     const items: IContextualMenuItem[] = [
       {
@@ -200,19 +232,28 @@ describe('ContextualMenu', () => {
       />
     );
 
-    let menuItem = document.querySelector('button.ms-ContextualMenu-link') as HTMLButtonElement;
+    const menuItem = document.querySelector('button.ms-ContextualMenu-link') as HTMLButtonElement;
     ReactTestUtils.Simulate.keyDown(menuItem, { which: KeyCodes.right });
 
     expect(document.querySelector('.SubMenuClass')).toBeDefined();
   });
 
-  it('applies disabled property when `disabled` is true', () => {
+  it('can focus on disabled items', () => {
     const items: IContextualMenuItem[] = [
       {
         name: 'TestText 1',
         key: 'TestKey1',
+      },
+      {
+        name: 'TestText 2',
+        key: 'TestKey2',
         disabled: true,
       },
+      {
+        name: 'TestText 3',
+        key: 'TestKey3',
+        isDisabled: true,
+      },
     ];
 
     ReactTestUtils.renderIntoDocument<ContextualMenu>(
@@ -221,17 +262,51 @@ describe('ContextualMenu', () => {
       />
     );
 
-    let menuItem = document.querySelector('button.ms-ContextualMenu-link') as HTMLButtonElement;
+    const menuItems = document.querySelectorAll('button.ms-ContextualMenu-link') as NodeListOf<HTMLButtonElement>;
+    expect(menuItems.length).toEqual(3);
+
+    menuItems[0].focus();
+    expect(document.activeElement.textContent).toEqual('TestText 1');
+    expect(document.activeElement.className.split(' ')).not.toContain('is-disabled');
+
+    menuItems[1].focus();
+    expect(document.activeElement.textContent).toEqual('TestText 2');
+    expect(document.activeElement.className.split(' ')).toContain('is-disabled');
 
-    expect(menuItem.disabled).toBeTruthy();
+    menuItems[2].focus();
+    expect(document.activeElement.textContent).toEqual('TestText 3');
+    expect(document.activeElement.className.split(' ')).toContain('is-disabled');
   });
 
-  it('applies disabled property when deprecated property `isDisabled` is true', () => {
+  it('cannot click on disabled items', () => {
+    const itemsClicked = [
+      false,
+      false,
+      false
+    ];
     const items: IContextualMenuItem[] = [
       {
         name: 'TestText 1',
         key: 'TestKey1',
+        onClick: () => itemsClicked[0] = true
+      },
+      {
+        name: 'TestText 2',
+        key: 'TestKey2',
+        disabled: true,
+        onClick: () => {
+          itemsClicked[1] = true;
+          fail('Disabled item should not be clickable');
+        }
+      },
+      {
+        name: 'TestText 3',
+        key: 'TestKey3',
         isDisabled: true,
+        onClick: () => {
+          itemsClicked[2] = true;
+          fail('Disabled item should not be clickable');
+        }
       },
     ];
 
@@ -241,9 +316,17 @@ describe('ContextualMenu', () => {
       />
     );
 
-    let menuItem = document.querySelector('button.ms-ContextualMenu-link') as HTMLButtonElement;
+    const menuItems = document.querySelectorAll('button.ms-ContextualMenu-link') as NodeListOf<HTMLButtonElement>;
+    expect(menuItems.length).toEqual(3);
+
+    menuItems[0].click();
+    expect(itemsClicked[0]).toEqual(true);
 
-    expect(menuItem.disabled).toBeTruthy();
+    menuItems[1].click();
+    expect(itemsClicked[1]).toEqual(false);
+
+    menuItems[2].click();
+    expect(itemsClicked[2]).toEqual(false);
   });
 
   it('renders headers properly', () => {
@@ -270,12 +353,12 @@ describe('ContextualMenu', () => {
       />
     );
 
-    let menuItems = document.querySelectorAll('li');
+    const menuItems = document.querySelectorAll('li');
 
     expect(menuItems.length).toEqual(4);
-    let headerOne = menuItems[0];
-    let dividerOne = menuItems[2];
-    let headerTwo = menuItems[3];
+    const headerOne = menuItems[0];
+    const dividerOne = menuItems[2];
+    const headerTwo = menuItems[3];
 
     expect(headerOne.className).not.toEqual(expect.stringMatching('divider'));
     expect(headerOne.firstElementChild!.className).toEqual(expect.stringMatching('header'));
@@ -324,24 +407,115 @@ describe('ContextualMenu', () => {
       }
     ];
 
-    const foo = ReactTestUtils.renderIntoDocument<ContextualMenu>(
+    ReactTestUtils.renderIntoDocument<ContextualMenu>(
       <ContextualMenu
         items={ items }
       />
     );
 
-    let menuItems = document.querySelectorAll('li');
+    const menuItems = document.querySelectorAll('li');
     expect(menuItems.length).toEqual(8);
 
   });
 
+  describe('with links', () => {
+    const testUrl = 'http://test.com';
+    let items: IContextualMenuItem[];
+    let menuItems: NodeListOf<Element>;
+    let linkNoTarget: Element;
+    let linkBlankTarget: Element;
+    let linkBlankTargetAndRel: Element;
+    let linkSelfTarget: Element;
+    let linkNoTargetAndRel: Element;
+
+    beforeEach(() => {
+      items = [
+        {
+          name: 'TestText 1',
+          key: 'TestKey1',
+          href: testUrl
+        },
+        {
+          name: 'TestText 2',
+          key: 'TestKey2',
+          href: testUrl,
+          target: '_blank'
+        },
+        {
+          name: 'TestText 3',
+          key: 'TestKey3',
+          href: testUrl,
+          target: '_blank',
+          rel: 'test'
+        },
+        {
+          name: 'TestText 4',
+          key: 'TestKey4',
+          href: testUrl,
+          target: '_self',
+        },
+        {
+          name: 'TestText 5',
+          key: 'TestKey5',
+          href: testUrl,
+          rel: 'test'
+        },
+      ];
+
+      ReactTestUtils.renderIntoDocument<ContextualMenu>(
+        <ContextualMenu
+          items={ items }
+        />
+      );
+
+      menuItems = document.querySelectorAll('li a');
+      linkNoTarget = menuItems[0];
+      linkBlankTarget = menuItems[1];
+      linkBlankTargetAndRel = menuItems[2];
+      linkSelfTarget = menuItems[3];
+      linkNoTargetAndRel = menuItems[4];
+    });
+
+    it('should render an anchor with the passed href', () => {
+      expect(linkNoTarget.getAttribute('href')).toEqual(testUrl);
+    });
+
+    describe('with target passed', () => {
+      it('should render with the specified target', () => {
+        expect(linkSelfTarget.getAttribute('target')).toEqual('_self');
+      });
+
+      it('should not default the rel if the target is not _blank', () => {
+        expect(linkSelfTarget.getAttribute('rel')).toBeNull();
+      });
+
+      describe('when the target is _blank and there is no rel specified', () => {
+        it('should default a rel to prevent clickjacking', () => {
+          expect(linkBlankTarget.getAttribute('rel')).toEqual('nofollow noopener noreferrer');
+        });
+      });
+
+      describe('when the target is _blank and there is a rel specified', () => {
+        it('should use the specified rel', () => {
+          expect(linkBlankTargetAndRel.getAttribute('rel')).toEqual('test');
+        });
+      });
+    });
+
+    describe('with rel passed', () => {
+      it('should add the specified rel', () => {
+        expect(linkNoTargetAndRel.getAttribute('rel')).toEqual('test');
+      });
+    });
+  });
+
   it('does not return a value if no items are given', () => {
     ReactTestUtils.renderIntoDocument<ContextualMenu>(
       <ContextualMenu
         items={ [] }
       />
     );
-    let menuList = document.querySelector('.ms-ContextualMenu-list');
+    const menuList = document.querySelector('.ms-ContextualMenu-list');
 
     expect(menuList).toBeNull();
 
@@ -440,8 +614,8 @@ describe('ContextualMenu', () => {
         focusedItem = document.querySelector('.testkey2')!.firstChild;
 
         if (focusedItem) {
-          let focusedItemElement = focusedItem as HTMLElement;
-          let eventObject = document.createEvent('Events');
+          const focusedItemElement = focusedItem as HTMLElement;
+          const eventObject = document.createEvent('Events');
           eventObject.initEvent('mouseenter', true, false);
           focusedItemElement.dispatchEvent(eventObject);
         }
@@ -508,6 +682,23 @@ describe('ContextualMenu', () => {
     expect(menuMountedFirst).toEqual(false);
   });
 
+  it('merges callout classNames', () => {
+    ReactTestUtils.renderIntoDocument<ContextualMenu>(
+      <ContextualMenu
+        items={ [{
+          name: 'TestText 0',
+          key: 'TestKey0'
+        }] }
+        calloutProps={ { className: 'foo' } }
+      />
+    );
+
+    const callout = document.querySelector('.ms-Callout') as HTMLElement;
+    expect(callout).toBeDefined();
+    expect(callout.classList.contains('ms-ContextualMenu-Callout')).toBeTruthy();
+    expect(callout.classList.contains('foo')).toBeTruthy();
+  });
+
   it('Contextual Menu submenu has chrevron icon even if submenu has no items', () => {
     const menuWithEmptySubMenu: IContextualMenuItem[] = [
       {
@@ -525,7 +716,7 @@ describe('ContextualMenu', () => {
       />
     );
 
-    let menuItem = document.querySelector('button.ms-ContextualMenu-link') as HTMLButtonElement;
+    const menuItem = document.querySelector('button.ms-ContextualMenu-link') as HTMLButtonElement;
 
     expect(menuItem.querySelector('.ms-ContextualMenu-submenuIcon')).not.toEqual(null);
   });
@@ -554,13 +745,39 @@ describe('ContextualMenu', () => {
       />
     );
 
-    let menuItem = document.querySelector('button.ms-ContextualMenu-link') as HTMLButtonElement;
+    const menuItem = document.querySelector('button.ms-ContextualMenu-link') as HTMLButtonElement;
 
     ReactTestUtils.Simulate.click(menuItem);
 
     expect(subMenuOpened).toEqual(true);
   });
 
+  it('calls the custom child renderer when the contextualMenuItemAs prop is provided', () => {
+    const items: IContextualMenuItem[] = [
+      {
+        name: 'TestText 1',
+        key: 'TestKey1',
+      },
+      {
+        name: 'TestText 2',
+        key: 'TestKey2',
+      }
+    ];
+    const customRenderer = jest.fn(() => null);
+
+    ReactTestUtils.renderIntoDocument<ContextualMenu>(
+      <ContextualMenu
+        items={ items }
+        contextualMenuItemAs={ customRenderer }
+      />
+    );
+
+    const menuItem = document.querySelector('button.ms-ContextualMenu-link') as HTMLButtonElement;
+    ReactTestUtils.Simulate.click(menuItem);
+
+    expect(customRenderer).toHaveBeenCalledTimes(2);
+  });
+
   describe('canAnyMenuItemsCheck', () => {
     it('returns false when there are no checkable menu items', () => {
       const items: IContextualMenuItem[] = [
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
index 75f503bb0b426..855c6e3f44f97 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IContextualMenuProps, IContextualMenuItem, ContextualMenuItemType } from './ContextualMenu.types';
 import { DirectionalHint } from '../../common/DirectionalHint';
-import { FocusZone, FocusZoneDirection } from '../../FocusZone';
+import { FocusZone, FocusZoneDirection, IFocusZoneProps, FocusZoneTabbableElements } from '../../FocusZone';
 import {
   IMenuItemClassNames,
   IContextualMenuClassNames,
@@ -24,62 +24,35 @@ import {
   getWindow,
   customizable,
   getFirstFocusable,
-  getLastFocusable
+  getLastFocusable,
+  css,
+  shouldWrapFocus
 } from '../../Utilities';
+import { hasSubmenu, getIsChecked } from '../../utilities/contextualMenu/index';
 import { withResponsiveMode, ResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
 import { Callout } from '../../Callout';
-import {
-  Icon,
-  IIconProps
-} from '../../Icon';
+import { IIconProps } from '../../Icon';
 import {
   VerticalDivider
 } from '../../Divider';
+import { ContextualMenuItem } from './ContextualMenuItem';
+
 export interface IContextualMenuState {
   expandedMenuItemKey?: string;
   dismissedMenuItemKey?: string;
   contextualMenuItems?: IContextualMenuItem[];
-  contextualMenuTarget?: HTMLElement;
-  submenuTarget?: HTMLElement;
+  contextualMenuTarget?: Element;
+  submenuTarget?: Element;
   positions?: any;
   slideDirectionalClassName?: string;
   subMenuId?: string;
   submenuDirection?: DirectionalHint;
 }
 
-export function hasSubmenu(item: IContextualMenuItem) {
-  return !!(item.subMenuProps || item.items);
-}
-
 export function getSubmenuItems(item: IContextualMenuItem) {
   return item.subMenuProps ? item.subMenuProps.items : item.items;
 }
 
-/**
- * Determines the effective checked state of a menu item.
- *
- * @param item {IContextualMenuItem} to get the check state of.
- * @returns {true} if the item is checked.
- * @returns {false} if the item is unchecked.
- * @returns {null} if the item is not checkable.
- */
-function getIsChecked(item: IContextualMenuItem): boolean | null {
-  if (item.canCheck) {
-    return !!(item.isChecked || item.checked);
-  }
-
-  if (typeof item.isChecked === 'boolean') {
-    return item.isChecked;
-  }
-
-  if (typeof item.checked === 'boolean') {
-    return item.checked;
-  }
-
-  // Item is not checkable.
-  return null;
-}
-
 /**
  * Returns true if a list of menu items can contain a checkbox
  */
@@ -108,8 +81,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     gapSpace: 0,
     directionalHint: DirectionalHint.bottomAutoEdge,
     beakWidth: 16,
-    arrowDirection: FocusZoneDirection.vertical,
-    getMenuClassNames: getContextualMenuClassNames,
+    getMenuClassNames: getContextualMenuClassNames
   };
 
   private _host: HTMLElement;
@@ -117,12 +89,14 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
   private _isFocusingPreviousElement: boolean;
   private _enterTimerId: number | undefined;
   private _targetWindow: Window;
-  private _target: HTMLElement | MouseEvent | IPoint | null;
+  private _target: Element | MouseEvent | IPoint | null;
   private _classNames: IContextualMenuClassNames;
   private _isScrollIdle: boolean;
-  private readonly _scrollIdleDelay: number = 250 /* ms */;
+  private readonly _navigationIdleDelay: number = 250 /* ms */;
   private _scrollIdleTimeoutId: number | undefined;
 
+  private _adjustedFocusZoneProps: IFocusZoneProps;
+
   constructor(props: IContextualMenuProps) {
     super(props);
 
@@ -134,6 +108,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     this._warnDeprecations({
       'targetPoint': 'target',
       'useTargetPoint': 'target',
+      'arrowDirection': 'focusZoneProps'
     });
 
     this._isFocusingPreviousElement = false;
@@ -142,7 +117,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
 
   @autobind
   public dismiss(ev?: any, dismissAll?: boolean) {
-    let { onDismiss } = this.props;
+    const { onDismiss } = this.props;
 
     if (onDismiss) {
       onDismiss(ev, dismissAll);
@@ -151,14 +126,14 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
 
   public componentWillUpdate(newProps: IContextualMenuProps) {
     if (newProps.target !== this.props.target) {
-      let newTarget = newProps.target;
+      const newTarget = newProps.target;
       this._setTargetWindowAndElement(newTarget!);
     }
   }
 
   // Invoked once, both on the client and server, immediately before the initial rendering occurs.
   public componentWillMount() {
-    let target = this.props.target;
+    const target = this.props.target;
     this._setTargetWindowAndElement(target!);
     this._previousActiveElement = this._targetWindow ? this._targetWindow.document.activeElement as HTMLElement : null;
   }
@@ -175,7 +150,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
   public componentWillUnmount() {
     if (this._isFocusingPreviousElement && this._previousActiveElement) {
 
-      // This slight delay is required so that we can unwind the stack, let react try to mess with focus, and then
+      // This slight delay is required so that we can unwind the stack, const react try to mess with focus, and then
       // apply the correct focus. Without the setTimeout, we end up focusing the correct thing, and then React wants
       // to reset the focus back to the thing it thinks should have been focused.
       setTimeout(() => this._previousActiveElement!.focus(), 0);
@@ -190,9 +165,13 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
   }
 
   public render(): JSX.Element | null {
-    let { className,
+    let {
+      isBeakVisible
+    } = this.props;
+
+    const {
+      className,
       items,
-      isBeakVisible,
       labelElementId,
       id,
       targetPoint,
@@ -204,7 +183,6 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       coverTarget,
       ariaLabel,
       doNotLayer,
-      arrowDirection,
       target,
       bounds,
       useTargetWidth,
@@ -212,16 +190,16 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       directionalHintFixed,
       shouldFocusOnMount,
       title,
-      styles: customStyles,
       theme,
       calloutProps,
-      onRenderSubMenu = this._onRenderSubMenu
+      onRenderSubMenu = this._onRenderSubMenu,
+      focusZoneProps
     } = this.props;
 
-    let menuClassNames = this.props.getMenuClassNames || getContextualMenuClassNames;
+    const menuClassNames = this.props.getMenuClassNames || getContextualMenuClassNames;
     this._classNames = menuClassNames(theme!, className);
 
-    let hasIcons = itemsHaveIcons(items);
+    const hasIcons = itemsHaveIcons(items);
 
     function itemsHaveIcons(contextualMenuItems: IContextualMenuItem[]): boolean {
       for (const item of contextualMenuItems) {
@@ -237,7 +215,9 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       return false;
     }
 
-    let hasCheckmarks = canAnyMenuItemsCheck(items);
+    this._adjustedFocusZoneProps = { ...focusZoneProps, direction: this._getFocusZoneDirection() };
+
+    const hasCheckmarks = canAnyMenuItemsCheck(items);
     const submenuProps = this.state.expandedMenuItemKey ? this._getSubmenuProps() : null;
 
     isBeakVisible = isBeakVisible === undefined ? this.props.responsiveMode! <= ResponsiveMode.medium : isBeakVisible;
@@ -245,9 +225,11 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
      * When useTargetWidth is true, get the width of the target element and apply it for the context menu container
      */
     let contextMenuStyle;
-    let targetAsHtmlElement = this._target as HTMLElement;
+    const targetAsHtmlElement = this._target as HTMLElement;
     if ((useTargetWidth || useTargetAsMinWidth) && targetAsHtmlElement && targetAsHtmlElement.offsetWidth) {
-      let targetWidth = targetAsHtmlElement.offsetWidth;
+      const targetBoundingRect = targetAsHtmlElement.getBoundingClientRect();
+      const targetWidth = targetBoundingRect.width - 2 /* Accounts for 1px border */;
+
       if (useTargetWidth) {
         contextMenuStyle = {
           width: targetWidth
@@ -263,15 +245,16 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     if (items && items.length > 0) {
       let indexCorrection = 0;
       let totalItemCount = 0;
-      for (let item of items) {
+      for (const item of items) {
         if (item.itemType !== ContextualMenuItemType.Divider &&
           item.itemType !== ContextualMenuItemType.Header) {
-          totalItemCount++;
+          const itemCount = item.customOnRenderListLength ? item.customOnRenderListLength : 1;
+          totalItemCount += itemCount;
         }
       }
       return (
         <Callout
-          {...calloutProps}
+          { ...calloutProps }
           target={ useTargetPoint ? targetPoint : target }
           isBeakVisible={ isBeakVisible }
           beakWidth={ beakWidth }
@@ -280,7 +263,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
           gapSpace={ gapSpace }
           coverTarget={ coverTarget }
           doNotLayer={ doNotLayer }
-          className='ms-ContextualMenu-Callout'
+          className={ css('ms-ContextualMenu-Callout', calloutProps ? calloutProps.className : undefined) }
           setInitialFocus={ shouldFocusOnMount }
           onDismiss={ this.props.onDismiss }
           onScroll={ this._onScroll }
@@ -301,10 +284,10 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
             { title && <div className={ this._classNames.title } role='heading' aria-level={ 1 }> { title } </div> }
             { (items && items.length) ? (
               <FocusZone
+                { ...this._adjustedFocusZoneProps }
                 className={ this._classNames.root }
-                direction={ arrowDirection }
                 isCircularNavigation={ true }
-                allowTabKey={ true }
+                handleTabKey={ FocusZoneTabbableElements.all }
               >
                 <ul
                   role='presentation'
@@ -312,11 +295,13 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
                   onKeyDown={ this._onKeyDown }
                 >
                   { items.map((item, index) => {
-                    if (item.itemType === ContextualMenuItemType.Divider ||
-                      item.itemType === ContextualMenuItemType.Header) {
-                      indexCorrection++;
+                    const menuItem = this._renderMenuItem(item, index, indexCorrection, totalItemCount, hasCheckmarks, hasIcons);
+                    if (item.itemType !== ContextualMenuItemType.Divider &&
+                      item.itemType !== ContextualMenuItemType.Header) {
+                      const indexIncrease = item.customOnRenderListLength ? item.customOnRenderListLength : 1;
+                      indexCorrection += indexIncrease;
                     }
-                    return this._renderMenuItem(item, index, index - indexCorrection, totalItemCount, hasCheckmarks, hasIcons);
+                    return menuItem;
                   }) }
                 </ul>
               </FocusZone>
@@ -330,18 +315,31 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     }
   }
 
+  /**
+   * Gets the focusZoneDirection by using the arrowDirection if specified,
+   * the direction specificed in the focusZoneProps, or defaults to FocusZoneDirection.vertical
+   */
+  private _getFocusZoneDirection() {
+    const {
+      arrowDirection,
+      focusZoneProps
+    } = this.props;
+    return arrowDirection !== undefined ? arrowDirection :
+      focusZoneProps && focusZoneProps.direction !== undefined ? focusZoneProps.direction : FocusZoneDirection.vertical;
+  }
+
   private _onRenderSubMenu(subMenuProps: IContextualMenuProps) {
     return <ContextualMenu { ...subMenuProps } />;
   }
 
   private _renderMenuItem(item: IContextualMenuItem, index: number, focusableElementIndex: number, totalItemCount: number, hasCheckmarks: boolean, hasIcons: boolean): React.ReactNode {
-    let renderedItems: React.ReactNode[] = [];
-    let iconProps = this._getIconProps(item);
+    const renderedItems: React.ReactNode[] = [];
+    const iconProps = this._getIconProps(item);
     // We only send a dividerClassName when the item to be rendered is a divider. For all other cases, the default divider style is used.
-    let dividerClassName = item.itemType === ContextualMenuItemType.Divider ? item.className : undefined;
-    let subMenuIconClassName = item.submenuIconProps ? item.submenuIconProps.className : '';
-    let getClassNames = item.getItemClassNames || getItemClassNames;
-    let itemClassNames = getClassNames(
+    const dividerClassName = item.itemType === ContextualMenuItemType.Divider ? item.className : undefined;
+    const subMenuIconClassName = item.submenuIconProps ? item.submenuIconProps.className : '';
+    const getClassNames = item.getItemClassNames || getItemClassNames;
+    const itemClassNames = getClassNames(
       this.props.theme!,
       this._isItemDisabled(item),
       (this.state.expandedMenuItemKey === item.key),
@@ -363,14 +361,14 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         break;
       case ContextualMenuItemType.Header:
         renderedItems.push(this._renderSeparator(index, itemClassNames));
-        let headerItem = this._renderHeaderMenuItem(item, itemClassNames, index, hasCheckmarks, hasIcons);
+        const headerItem = this._renderHeaderMenuItem(item, itemClassNames, index, hasCheckmarks, hasIcons);
         renderedItems.push(this._renderListItem(headerItem, item.key || index, itemClassNames, item.title));
         break;
       case ContextualMenuItemType.Section:
         renderedItems.push(this._renderSectionItem(item, itemClassNames, index, hasCheckmarks, hasIcons));
         break;
       default:
-        let menuItem = this._renderNormalItem(item, itemClassNames, index, focusableElementIndex, totalItemCount, hasCheckmarks, hasIcons);
+        const menuItem = this._renderNormalItem(item, itemClassNames, index, focusableElementIndex, totalItemCount, hasCheckmarks, hasIcons);
         renderedItems.push(this._renderListItem(menuItem, item.key || index, itemClassNames, item.title));
         break;
     }
@@ -443,7 +441,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
 
   private _renderNormalItem(item: IContextualMenuItem, classNames: IMenuItemClassNames, index: number, focusableElementIndex: number, totalItemCount: number, hasCheckmarks: boolean, hasIcons: boolean): React.ReactNode {
     if (item.onRender) {
-      return [item.onRender(item, this.dismiss)];
+      return [item.onRender({ 'aria-posinset': focusableElementIndex + 1, 'aria-setsize': totalItemCount, ...item }, this.dismiss)];
     }
     if (item.href) {
       return this._renderAnchorMenuItem(item, classNames, index, focusableElementIndex, totalItemCount, hasCheckmarks, hasIcons);
@@ -457,28 +455,60 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
   }
 
   private _renderHeaderMenuItem(item: IContextualMenuItem, classNames: IMenuItemClassNames, index: number, hasCheckmarks: boolean, hasIcons: boolean): React.ReactNode {
+    const { contextualMenuItemAs: ChildrenRenderer = ContextualMenuItem } = this.props;
+
     return (
       <div className={ this._classNames.header } style={ item.style } role='heading' aria-level={ this.props.title ? 2 : 1 }>
-        { this._renderMenuItemChildren(item, classNames, index, hasCheckmarks, hasIcons) }
+        <ChildrenRenderer
+          item={ item }
+          classNames={ classNames }
+          index={ index }
+          onCheckmarkClick={ hasCheckmarks ? this._onItemClick : undefined }
+          hasIcons={ hasIcons }
+        />
       </div>);
   }
 
   private _renderAnchorMenuItem(item: IContextualMenuItem, classNames: IMenuItemClassNames, index: number, focusableElementIndex: number, totalItemCount: number, hasCheckmarks: boolean, hasIcons: boolean): React.ReactNode {
+    const { expandedMenuItemKey } = this.state;
+    const { contextualMenuItemAs: ChildrenRenderer = ContextualMenuItem } = this.props;
+
+    let anchorRel = item.rel;
+    if (item.target && item.target.toLowerCase() === '_blank') {
+      anchorRel = anchorRel ? anchorRel : 'nofollow noopener noreferrer';  // Safe default to prevent tabjacking
+    }
+
+    const subMenuId = this._getSubMenuId(item);
+    const itemHasSubmenu = hasSubmenu(item);
+
     return (
       <div>
         <a
           { ...getNativeProps(item, anchorProperties) }
           href={ item.href }
           target={ item.target }
+          rel={ anchorRel }
           className={ classNames.root }
           role='menuitem'
+          aria-owns={ item.key === expandedMenuItemKey ? subMenuId : null }
+          aria-haspopup={ itemHasSubmenu || null }
+          aria-expanded={ itemHasSubmenu ? item.key === expandedMenuItemKey : null }
           aria-posinset={ focusableElementIndex + 1 }
           aria-setsize={ totalItemCount }
           aria-disabled={ this._isItemDisabled(item) }
           style={ item.style }
           onClick={ this._onAnchorClick.bind(this, item) }
+          onMouseEnter={ this._onItemMouseEnter.bind(this, item) }
+          onMouseLeave={ this._onMouseItemLeave.bind(this, item) }
+          onKeyDown={ itemHasSubmenu ? this._onItemKeyDown.bind(this, item) : null }
         >
-          { this._renderMenuItemChildren(item, classNames, index, hasCheckmarks, hasIcons) }
+          <ChildrenRenderer
+            item={ item }
+            classNames={ classNames }
+            index={ index }
+            onCheckmarkClick={ hasCheckmarks ? this._onItemClick : undefined }
+            hasIcons={ hasIcons }
+          />
         </a>
       </div>);
   }
@@ -491,7 +521,10 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     totalItemCount: number,
     hasCheckmarks?: boolean,
     hasIcons?: boolean) {
-    let { expandedMenuItemKey, subMenuId } = this.state;
+    const { expandedMenuItemKey } = this.state;
+    const { contextualMenuItemAs: ChildrenRenderer = ContextualMenuItem } = this.props;
+
+    const subMenuId = this._getSubMenuId(item);
     let ariaLabel = '';
 
     if (item.ariaLabel) {
@@ -503,22 +536,26 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     const isChecked: boolean | null | undefined = getIsChecked(item);
     const canCheck: boolean = isChecked !== null;
     const defaultRole = canCheck ? 'menuitemcheckbox' : 'menuitem';
+    const itemHasSubmenu = hasSubmenu(item);
+
+    const buttonNativeProperties = getNativeProps(item, buttonProperties);
+    // Do not add the disabled attribute to the button so that it is focusable
+    delete (buttonNativeProperties as any).disabled;
 
     const itemButtonProperties = {
       className: classNames.root,
       onClick: this._onItemClick.bind(this, item),
-      onKeyDown: hasSubmenu(item) ? this._onItemKeyDown.bind(this, item) : null,
+      onKeyDown: itemHasSubmenu ? this._onItemKeyDown.bind(this, item) : null,
       onMouseEnter: this._onItemMouseEnter.bind(this, item),
       onMouseLeave: this._onMouseItemLeave.bind(this, item),
       onMouseDown: (ev: any) => this._onItemMouseDown(item, ev),
       onMouseMove: this._onItemMouseMove.bind(this, item),
-      disabled: this._isItemDisabled(item),
       href: item.href,
       title: item.title,
       'aria-label': ariaLabel,
-      'aria-haspopup': hasSubmenu(item) || null,
+      'aria-haspopup': itemHasSubmenu || null,
       'aria-owns': item.key === expandedMenuItemKey ? subMenuId : null,
-      'aria-expanded': hasSubmenu(item) ? item.key === expandedMenuItemKey : null,
+      'aria-expanded': itemHasSubmenu ? item.key === expandedMenuItemKey : null,
       'aria-checked': isChecked,
       'aria-posinset': focusableElementIndex + 1,
       'aria-setsize': totalItemCount,
@@ -529,10 +566,17 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
 
     return (
       <button
-        { ...getNativeProps(item, buttonProperties) }
+        { ...buttonNativeProperties }
         { ...itemButtonProperties }
-        children={ this._renderMenuItemChildren(item, classNames, index, hasCheckmarks!, hasIcons!) }
-      />
+      >
+        <ChildrenRenderer
+          item={ item }
+          classNames={ classNames }
+          index={ index }
+          onCheckmarkClick={ hasCheckmarks ? this._onItemClick : undefined }
+          hasIcons={ hasIcons }
+        />
+      </button>
     );
   }
 
@@ -552,6 +596,8 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         aria-haspopup={ true }
         aria-describedby={ item.ariaDescription }
         aria-checked={ item.isChecked || item.checked }
+        aria-posinset={ focusableElementIndex + 1 }
+        aria-setsize={ totalItemCount }
       >
         <span
           aria-hidden={ true }
@@ -570,6 +616,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     const isChecked: boolean | null | undefined = getIsChecked(item);
     const canCheck: boolean = isChecked !== null;
     const defaultRole = canCheck ? 'menuitemcheckbox' : 'menuitem';
+    const { contextualMenuItemAs: ChildrenRenderer = ContextualMenuItem } = this.props;
 
     const itemProps = {
       key: item.key,
@@ -586,10 +633,12 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     } as IContextualMenuItem;
     return React.createElement('button',
       getNativeProps(itemProps, buttonProperties),
-      this._renderMenuItemChildren(itemProps, classNames, index, hasCheckmarks, hasIcons));
+      <ChildrenRenderer item={ itemProps } classNames={ classNames } index={ index } onCheckmarkClick={ hasCheckmarks ? this._onItemClick : undefined } hasIcons={ hasIcons } />,
+    );
   }
 
   private _renderSplitIconButton(item: IContextualMenuItem, classNames: IMenuItemClassNames, index: number) {
+    const { contextualMenuItemAs: ChildrenRenderer = ContextualMenuItem } = this.props;
     const itemProps = {
       onClick: this._onItemClick.bind(this, item),
       disabled: this._isItemDisabled(item),
@@ -607,63 +656,28 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         onMouseDown: (ev: any) => this._onItemMouseDown(item, ev),
         onMouseMove: this._onItemMouseMove.bind(this, item)
       }),
-      this._renderMenuItemChildren(itemProps, classNames, index, false, false));
+      <ChildrenRenderer item={ itemProps } classNames={ classNames } index={ index } hasIcons={ false } />
+    );
   }
 
   private _renderSplitDivider(item: IContextualMenuItem) {
-    let getDividerClassnames = item.getSplitButtonVerticalDividerClassNames || getSplitButtonVerticalDividerClassNames;
+    const getDividerClassnames = item.getSplitButtonVerticalDividerClassNames || getSplitButtonVerticalDividerClassNames;
     return <VerticalDivider getClassNames={ getDividerClassnames } />;
   }
 
-  private _renderMenuItemChildren(item: IContextualMenuItem, classNames: IMenuItemClassNames, index: number, hasCheckmarks: boolean, hasIcons: boolean) {
-    const isItemChecked: boolean | null | undefined = getIsChecked(item);
-    return (
-      <div className={ item.split ? classNames.linkContentMenu : classNames.linkContent }>
-        { (hasCheckmarks) ? (
-          <Icon
-            iconName={ isItemChecked === true ? 'CheckMark' : '' }
-            className={ classNames.checkmarkIcon }
-            onClick={ this._onItemClick.bind(this, item) }
-          />
-        ) : (null) }
-        { (hasIcons) ? (
-          this._renderIcon(item, classNames)
-        ) : (null) }
-        { item.name ? (
-          <span className={ classNames.label }>{ item.name }</span>
-        ) : null
-        }
-        { hasSubmenu(item) ? (
-          <Icon
-            iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
-            { ...item.submenuIconProps }
-            className={ classNames.subMenuIcon }
-          />
-        ) : (null) }
-      </div>
-    );
-  }
-
   private _getIconProps(item: IContextualMenuItem): IIconProps {
-    let iconProps: IIconProps = item.iconProps ? item.iconProps : {
+    const iconProps: IIconProps = item.iconProps ? item.iconProps : {
       iconName: item.icon
     };
     return iconProps;
   }
 
-  private _renderIcon(item: IContextualMenuItem, classNames: IMenuItemClassNames) {
-    // Only present to allow continued use of item.icon which is deprecated.
-    let iconProps = this._getIconProps(item);
-
-    return <Icon { ...iconProps } className={ classNames.icon } />;
-  }
-
   @autobind
   private _onKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
-    let submenuCloseKey = getRTL() ? KeyCodes.right : KeyCodes.left;
-
-    if (ev.which === KeyCodes.escape
-      || (ev.which === submenuCloseKey && this.props.isSubMenu && this.props.arrowDirection === FocusZoneDirection.vertical)) {
+    if (ev.which === KeyCodes.escape ||
+      ev.altKey ||
+      ev.metaKey ||
+      this._shouldCloseSubMenu(ev)) {
       // When a user presses escape, we will try to refocus the previous focused element.
       this._isFocusingPreviousElement = true;
       ev.preventDefault();
@@ -672,9 +686,24 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     }
   }
 
+  /**
+   * Checks if the submenu should be closed
+   */
+  @autobind
+  private _shouldCloseSubMenu(ev: React.KeyboardEvent<HTMLElement>): boolean {
+    const submenuCloseKey = getRTL() ? KeyCodes.right : KeyCodes.left;
+
+    if (ev.which !== submenuCloseKey || !this.props.isSubMenu) {
+      return false;
+    }
+
+    return this._adjustedFocusZoneProps.direction === FocusZoneDirection.vertical ||
+      (!!this._adjustedFocusZoneProps.checkForNoWrap && !shouldWrapFocus(ev.target as HTMLElement, 'data-no-horizontal-wrap'));
+  }
+
   @autobind
   private _onMenuKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
-    if (ev.which === KeyCodes.escape) {
+    if (ev.which === KeyCodes.escape || ev.altKey || ev.metaKey) {
       this._isFocusingPreviousElement = true;
       ev.preventDefault();
       ev.stopPropagation();
@@ -686,7 +715,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       return;
     }
 
-    let elementToFocus = ev.which === KeyCodes.up ?
+    const elementToFocus = ev.which === KeyCodes.up ?
       getLastFocusable(this._host, (this._host.lastChild as HTMLElement), true) :
       ev.which === KeyCodes.down ?
         getFirstFocusable(this._host, (this._host.firstChild as HTMLElement), true) :
@@ -712,7 +741,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       this._isScrollIdle = false;
     }
 
-    this._scrollIdleTimeoutId = this._async.setTimeout(() => { this._isScrollIdle = true; }, this._scrollIdleDelay);
+    this._scrollIdleTimeoutId = this._async.setTimeout(() => { this._isScrollIdle = true; }, this._navigationIdleDelay);
   }
 
   private _onItemMouseEnter(item: any, ev: React.MouseEvent<HTMLElement>) {
@@ -720,36 +749,18 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       return;
     }
 
-    let targetElement = ev.currentTarget as HTMLElement;
-
-    if (item.key !== this.state.expandedMenuItemKey) {
-      if (hasSubmenu(item)) {
-        this._enterTimerId = this._async.setTimeout(() => this._onItemSubMenuExpand(item, targetElement), 500);
-      } else {
-        this._enterTimerId = this._async.setTimeout(() => this._onSubMenuDismiss(ev), 500);
-      }
-    }
-
-    targetElement.focus();
+    this._updateFocusOnMouseEvent(item, ev);
   }
 
   private _onItemMouseMove(item: any, ev: React.MouseEvent<HTMLElement>) {
 
-    let targetElement = ev.currentTarget as HTMLElement;
+    const targetElement = ev.currentTarget as HTMLElement;
 
     if (!this._isScrollIdle || targetElement === this._targetWindow.document.activeElement as HTMLElement) {
       return;
     }
 
-    if (item.key !== this.state.expandedMenuItemKey) {
-      if (hasSubmenu(item)) {
-        this._enterTimerId = this._async.setTimeout(() => this._onItemSubMenuExpand(item, targetElement), 500);
-      } else {
-        this._enterTimerId = this._async.setTimeout(() => this._onSubMenuDismiss(ev), 500);
-      }
-    }
-
-    targetElement.focus();
+    this._updateFocusOnMouseEvent(item, ev);
   }
 
   @autobind
@@ -763,7 +774,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       this._enterTimerId = undefined;
     }
 
-    if (item.key === this.state.expandedMenuItemKey && hasSubmenu(item)) {
+    if (this.state.expandedMenuItemKey !== undefined) {
       return;
     }
 
@@ -779,6 +790,44 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     }
   }
 
+  /**
+   * Handles updating focus when mouseEnter or mouseMove fire.
+   * As part of updating focus, This function will also update
+   * the expand/collapse state accordingly.
+   */
+  private _updateFocusOnMouseEvent(item: any, ev: React.MouseEvent<HTMLElement>) {
+    const targetElement = ev.currentTarget as HTMLElement;
+    const { subMenuHoverDelay: timeoutDuration = this._navigationIdleDelay } = this.props;
+
+    if (item.key === this.state.expandedMenuItemKey) {
+      return;
+    }
+
+    if (this._enterTimerId !== undefined) {
+      this._async.clearTimeout(this._enterTimerId);
+      this._enterTimerId = undefined;
+    }
+
+    // If the menu is not expanded we can update focus without any delay
+    if (this.state.expandedMenuItemKey === undefined) {
+      targetElement.focus();
+    }
+
+    // Delay updating expanding/dismissing the submenu
+    // and only set focus if we have not already done so
+    if (hasSubmenu(item)) {
+      this._enterTimerId = this._async.setTimeout(() => {
+        targetElement.focus();
+        this._onItemSubMenuExpand(item, targetElement);
+      }, timeoutDuration);
+    } else {
+      this._enterTimerId = this._async.setTimeout(() => {
+        this._onSubMenuDismiss(ev);
+        targetElement.focus();
+      }, timeoutDuration);
+    }
+  }
+
   private _onItemMouseDown(item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement>) {
     if (item.onMouseDown) {
       item.onMouseDown(item, ev);
@@ -786,7 +835,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
   }
 
   private _onItemClick(item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement>) {
-    let items = getSubmenuItems(item);
+    const items = getSubmenuItems(item);
 
     if (!hasSubmenu(item) && (!items || !items.length)) { // This is an item without a menu. Click it.
       this._executeItemClick(item, ev);
@@ -808,17 +857,21 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
   }
 
   private _executeItemClick(item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement>) {
+    if (item.disabled || item.isDisabled) {
+      return;
+    }
+    let dismiss = false;
     if (item.onClick) {
-      item.onClick(ev, item);
+      dismiss = !!item.onClick(ev, item);
     } else if (this.props.onItemClick) {
-      this.props.onItemClick(ev, item);
+      dismiss = !!this.props.onItemClick(ev, item);
     }
 
-    !ev.defaultPrevented && this.dismiss(ev, true);
+    (dismiss || !ev.defaultPrevented) && this.dismiss(ev, true);
   }
 
   private _onItemKeyDown(item: any, ev: KeyboardEvent) {
-    let openKey = getRTL() ? KeyCodes.left : KeyCodes.right;
+    const openKey = getRTL() ? KeyCodes.left : KeyCodes.right;
 
     if (ev.which === openKey) {
       this._onItemSubMenuExpand(item, ev.currentTarget as HTMLElement);
@@ -866,7 +919,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
   }
 
   private _findItemByKey(key: string): IContextualMenuItem | undefined {
-    let { items } = this.props;
+    const { items } = this.props;
     return this._findItemByKeyFromItems(key, items);
   }
 
@@ -901,11 +954,11 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
     }
   }
 
-  private _setTargetWindowAndElement(target: HTMLElement | string | MouseEvent | IPoint): void {
+  private _setTargetWindowAndElement(target: Element | string | MouseEvent | IPoint): void {
     if (target) {
       if (typeof target === 'string') {
-        let currentDoc: Document = getDocument()!;
-        this._target = currentDoc ? currentDoc.querySelector(target) as HTMLElement : null;
+        const currentDoc: Document = getDocument()!;
+        this._target = currentDoc ? currentDoc.querySelector(target) as Element : null;
         this._targetWindow = getWindow()!;
       } else if ((target as MouseEvent).stopPropagation) {
         this._targetWindow = getWindow((target as MouseEvent).toElement as HTMLElement)!;
@@ -914,7 +967,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         this._targetWindow = getWindow()!;
         this._target = target;
       } else {
-        let targetElement: HTMLElement = target as HTMLElement;
+        const targetElement: Element = target as Element;
         this._targetWindow = getWindow(targetElement)!;
         this._target = target;
       }
@@ -926,4 +979,14 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
   private _isItemDisabled(item: IContextualMenuItem): boolean {
     return !!(item.isDisabled || item.disabled);
   }
+
+  private _getSubMenuId(item: IContextualMenuItem): string | undefined {
+    let { subMenuId } = this.state;
+
+    if (item.subMenuProps && item.subMenuProps.id) {
+      subMenuId = item.subMenuProps.id;
+    }
+
+    return subMenuId;
+  }
 }
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts
index 5f1eb27174d5e..116b282f54e00 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.types.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ContextualMenu } from './ContextualMenu';
 import { DirectionalHint } from '../../common/DirectionalHint';
-import { FocusZoneDirection } from '../../FocusZone';
+import { FocusZoneDirection, IFocusZoneProps } from '../../FocusZone';
 import { IIconProps } from '../Icon/Icon.types';
 import { ICalloutProps } from '../../Callout';
 import { ITheme, IStyle } from '../../Styling';
@@ -15,6 +15,7 @@ import { IWithResponsiveModeState } from '../../utilities/decorators/withRespons
 import { IContextualMenuClassNames, IMenuItemClassNames } from './ContextualMenu.classNames';
 export { DirectionalHint } from '../../common/DirectionalHint';
 import { IVerticalDividerClassNames } from '../Divider/VerticalDivider.types';
+import { IContextualMenuItemProps } from './ContextualMenuItem.types';
 
 export enum ContextualMenuItemType {
   Normal = 0,
@@ -36,10 +37,10 @@ export interface IContextualMenuProps extends React.Props<ContextualMenu>, IWith
 
   /**
    * The target that the ContextualMenu should try to position itself based on.
-   * It can be either an HTMLElement a querySelector string of a valid HTMLElement
+   * It can be either an Element a querySelector string of a valid Element
    * or a MouseEvent. If MouseEvent is given then the origin point of the event will be used.
    */
-  target?: HTMLElement | string | MouseEvent | IPoint | null;
+  target?: Element | string | MouseEvent | IPoint | null;
 
   /**
    * How the element should be positioned
@@ -134,9 +135,10 @@ export interface IContextualMenuProps extends React.Props<ContextualMenu>, IWith
 
   /**
    * Click handler which is invoked if onClick is not passed for individual contextual
-   * menu item
+   * menu item.
+   * Returning true will dismiss the menu even if ev.preventDefault() was called.
    */
-  onItemClick?: (ev?: React.MouseEvent<HTMLElement>, item?: IContextualMenuItem) => void;
+  onItemClick?: (ev?: React.MouseEvent<HTMLElement>, item?: IContextualMenuItem) => boolean | void;
 
   /**
    * CSS class to apply to the context menu.
@@ -169,7 +171,7 @@ export interface IContextualMenuProps extends React.Props<ContextualMenu>, IWith
 
   /**
    * Direction for arrow navigation of the ContextualMenu. Should only be specified if using custom-rendered menu items.
-   * @default FocusZoneDirection.vertical
+   * @deprecated Use focusZoneProps instead
    */
   arrowDirection?: FocusZoneDirection;
 
@@ -219,6 +221,27 @@ export interface IContextualMenuProps extends React.Props<ContextualMenu>, IWith
 
   /** Method to call when trying to render a submenu. */
   onRenderSubMenu?: IRenderFunction<IContextualMenuProps>;
+
+  /**
+   * Delay (in milliseconds) to wait before expanding / dismissing a submenu on mouseEnter or mouseLeave
+  */
+  subMenuHoverDelay?: number;
+
+  /**
+   * Method to override the render of the individual menu items
+   * @default ContextualMenuItem
+   */
+  contextualMenuItemAs?:
+  React.ComponentClass<IContextualMenuItemProps> |
+  React.StatelessComponent<IContextualMenuItemProps>;
+
+  /**
+   * Props to pass down to the FocusZone.
+   * NOTE: the default FocusZoneDirection will be used unless a direction
+   * is specified in the focusZoneProps (even if other focusZoneProps are defined)
+   * @default {direction: FocusZoneDirection.vertical}
+   */
+  focusZoneProps?: IFocusZoneProps;
 }
 
 export interface IContextualMenuItem {
@@ -303,9 +326,10 @@ export interface IContextualMenuItem {
   data?: any;
 
   /**
-   * Callback issued when the menu item is invoked. If ev.preventDefault() is called in onClick, click will not close menu
+   * Callback issued when the menu item is invoked. If ev.preventDefault() is called in onClick, click will not close menu.
+   * Returning true will dismiss the menu even if ev.preventDefault() was called.
    */
-  onClick?: (ev?: React.MouseEvent<HTMLElement>, item?: IContextualMenuItem) => void;
+  onClick?: (ev?: React.MouseEvent<HTMLElement>, item?: IContextualMenuItem) => boolean | void;
 
   /**
    * An optional URL to navigate to upon selection
@@ -317,6 +341,11 @@ export interface IContextualMenuItem {
    */
   target?: string;
 
+  /**
+   * An optional rel when using href. If target is _blank rel is defaulted to a value to prevent clickjacking.
+   */
+  rel?: string;
+
   /**
    * Deprecated at v.80.0 and will be removed by v 1.0. Use 'subMenuProps' instead.
    * @deprecated
@@ -406,6 +435,13 @@ export interface IContextualMenuItem {
    */
   role?: string;
 
+  /**
+   * When rendering a custom component that is passed in, the component might also be a list of
+   * elements. We want to keep track of the correct index our menu is using based off of
+   * the length of the custom list. It is up to the user to increment the count for their list.
+   */
+  customOnRenderListLength?: number;
+
   /**
    * Any additional properties to use when custom rendering menu items.
    */
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.test.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.test.tsx
new file mode 100644
index 0000000000000..76545c463f2c1
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.test.tsx
@@ -0,0 +1,142 @@
+jest.mock('../../utilities/contextualMenu');
+
+import * as React from 'react';
+import { shallow, ShallowWrapper } from 'enzyme';
+import { ContextualMenuItem } from './ContextualMenuItem';
+import { IContextualMenuItemProps } from './ContextualMenuItem.types';
+import { IContextualMenuItem } from './ContextualMenu.types';
+import { IMenuItemClassNames } from './ContextualMenu.classNames';
+import { hasSubmenu } from '../../utilities/contextualMenu';
+
+describe('ContextMenuItemChildren', () => {
+  describe('when a checkmark icon', () => {
+    let onCheckmarkClick: jest.Mock;
+    let menuItem: IContextualMenuItem;
+    let menuClassNames: IMenuItemClassNames;
+    let wrapper: ShallowWrapper<IContextualMenuItemProps, {}>;
+
+    beforeEach(() => {
+      menuItem = { key: '123' };
+      menuClassNames = getMenuItemClassNames();
+      onCheckmarkClick = jest.fn();
+
+      wrapper = shallow(
+        <ContextualMenuItem
+          item={ menuItem }
+          classNames={ menuClassNames }
+          index={ 1 }
+          hasIcons={ undefined }
+          onCheckmarkClick={ onCheckmarkClick }
+        />
+      );
+    });
+
+    it('renders the component with the checkmark', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+
+    describe('when the checkmark is clicked', () => {
+      let event: jest.Mock;
+      beforeEach(() => {
+        event = jest.fn();
+        wrapper.find('.checkmarkIcon').simulate('click', event);
+      });
+
+      it('invokes the onCheckmarkClick callback', () => {
+        expect(onCheckmarkClick).toHaveBeenCalledWith(menuItem, event);
+      });
+    });
+  });
+
+  describe('when it has icons', () => {
+    describe('when it has iconProps', () => {
+      let menuItem: IContextualMenuItem;
+      let menuClassNames: IMenuItemClassNames;
+      let wrapper: ShallowWrapper<IContextualMenuItemProps, {}>;
+
+      beforeEach(() => {
+        menuItem = { key: '123', icon: 'itemIcon', name: 'menuItem' };
+        menuClassNames = getMenuItemClassNames();
+
+        wrapper = shallow(
+          <ContextualMenuItem
+            item={ menuItem }
+            classNames={ menuClassNames }
+            index={ 1 }
+            hasIcons={ true }
+          />
+        );
+      });
+
+      it('renders the icon', () => {
+        expect(wrapper).toMatchSnapshot();
+      });
+    });
+
+    describe('when it doesnt have iconProps', () => {
+      let menuItem: IContextualMenuItem;
+      let menuClassNames: IMenuItemClassNames;
+      let wrapper: ShallowWrapper<IContextualMenuItemProps, {}>;
+
+      beforeEach(() => {
+        menuItem = { key: '123', iconProps: {} };
+        menuClassNames = getMenuItemClassNames();
+
+        wrapper = shallow(
+          <ContextualMenuItem
+            item={ menuItem }
+            classNames={ menuClassNames }
+            index={ 1 }
+            hasIcons={ true }
+          />
+        );
+      });
+
+      it('renders the icon with iconName', () => {
+        expect(wrapper).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('when it has a sub menu', () => {
+    let menuItem: IContextualMenuItem;
+    let menuClassNames: IMenuItemClassNames;
+    let wrapper: ShallowWrapper<IContextualMenuItemProps, {}>;
+
+    beforeEach(() => {
+      (hasSubmenu as jest.Mock).mockReturnValue(true);
+      menuItem = { key: '123', iconProps: {}, submenuIconProps: {} };
+      menuClassNames = getMenuItemClassNames();
+
+      wrapper = shallow(
+        <ContextualMenuItem
+          item={ menuItem }
+          classNames={ menuClassNames }
+          index={ 1 }
+          hasIcons={ true }
+        />
+      );
+    });
+
+    it('renders the menu icon', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
+
+function getMenuItemClassNames(): IMenuItemClassNames {
+  return {
+    item: 'item',
+    divider: '---',
+    root: 'root',
+    linkContent: 'linkContent',
+    icon: 'icon',
+    checkmarkIcon: 'checkmarkIcon',
+    subMenuIcon: 'subMenuIcon',
+    label: 'label',
+    splitContainer: 'splitContainer',
+    splitPrimary: 'splitPrimary',
+    splitMenu: 'splitMenu',
+    linkContentMenu: 'linkContentMenu',
+  };
+}
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
new file mode 100644
index 0000000000000..667d14bae1540
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.tsx
@@ -0,0 +1,75 @@
+import * as React from 'react';
+import { hasSubmenu, getIsChecked } from '../../utilities/contextualMenu/index';
+import { IContextualMenuItem } from './ContextualMenu.types';
+import { IMenuItemClassNames } from './ContextualMenu.classNames';
+import { getRTL } from '../../Utilities';
+import { Icon } from '../../Icon';
+import { IContextualMenuItemProps } from './ContextualMenuItem.types';
+
+const renderItemIcon = ({ hasIcons, item, classNames }: IContextualMenuItemProps) => {
+  // Only present to allow continued use of item.icon which is deprecated.
+  const { iconProps, icon } = item;
+
+  if (!hasIcons) {
+    return null;
+  }
+
+  if (iconProps) {
+    return <Icon { ...iconProps } className={ classNames.icon } />;
+  }
+
+  return <Icon iconName={ icon } className={ classNames.icon } />;
+};
+
+const renderCheckMarkIcon = ({ onCheckmarkClick, item, classNames }: IContextualMenuItemProps) => {
+  const isItemChecked = getIsChecked(item);
+  if (onCheckmarkClick) {
+    const onClick = (e: React.MouseEvent<HTMLElement>) => onCheckmarkClick(item, e);
+
+    return (
+      <Icon
+        iconName={ isItemChecked ? 'CheckMark' : '' }
+        className={ classNames.checkmarkIcon }
+        onClick={ onClick }
+      />
+    );
+  }
+  return null;
+};
+
+const renderItemName = ({ item, classNames }: IContextualMenuItemProps) => {
+  if (item.name) {
+    return <span className={ classNames.label }>{ item.name }</span>;
+  }
+  return null;
+};
+
+const renderSubMenuIcon = ({ item, classNames }: IContextualMenuItemProps) => {
+  if (hasSubmenu(item)) {
+    return (
+      <Icon
+        iconName={ getRTL() ? 'ChevronLeft' : 'ChevronRight' }
+        { ...item.submenuIconProps }
+        className={ classNames.subMenuIcon }
+      />
+    );
+  }
+  return null;
+};
+
+export const ContextualMenuItem: React.StatelessComponent<IContextualMenuItemProps> = (props) => {
+  const { item, classNames } = props;
+
+  return (
+    <div
+      className={
+        item.split ? classNames.linkContentMenu : classNames.linkContent
+      }
+    >
+      { renderCheckMarkIcon(props) }
+      { renderItemIcon(props) }
+      { renderItemName(props) }
+      { renderSubMenuIcon(props) }
+    </div>
+  );
+};
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.types.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.types.ts
new file mode 100644
index 0000000000000..189a54047b7d5
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.types.ts
@@ -0,0 +1,31 @@
+import { IContextualMenuItem } from './ContextualMenu.types';
+import { IMenuItemClassNames } from './ContextualMenu.classNames';
+
+export interface IContextualMenuItemProps
+  extends React.HTMLAttributes<IContextualMenuItemProps> {
+
+  /**
+   * The item to display
+   */
+  item: IContextualMenuItem;
+
+  /**
+   * Classnames for different aspects of a menu item
+   */
+  classNames: IMenuItemClassNames;
+
+  /**
+   * Index of the item
+   */
+  index: number;
+
+  /**
+   * If this item has icons
+   */
+  hasIcons: boolean | undefined;
+
+  /**
+   * Click handler for the checkmark
+   */
+  onCheckmarkClick?: ((item: IContextualMenuItem, ev: React.MouseEvent<HTMLElement>) => void);
+}
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuPage.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuPage.tsx
index 1281e932a2d14..eee454bb403db 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuPage.tsx
@@ -9,10 +9,12 @@ import { ContextualMenuBasicExample } from './examples/ContextualMenu.Basic.Exam
 import { ContextualMenuIconExample } from './examples/ContextualMenu.Icon.Example';
 import { ContextualMenuSectionExample } from './examples/ContextualMenu.Section.Example';
 import { ContextualMenuSubmenuExample } from './examples/ContextualMenu.Submenu.Example';
+import { ContextualMenuCustomizationWithNoWrapExample } from './examples/ContextualMenu.CustomizationWithNoWrap.Example';
 import { ContextualMenuCheckmarksExample } from './examples/ContextualMenu.Checkmarks.Example';
 import { ContextualMenuDirectionalExample } from './examples/ContextualMenu.Directional.Example';
 import { ContextualMenuCustomizationExample } from './examples/ContextualMenu.Customization.Example';
 import { ContextualMenuWithScrollBarExample } from './examples/ContextualMenu.ScrollBar.Example';
+import { ContextualMenuWithCustomMenuItemExample } from './examples/ContextualMenu.CustomMenuItem.Example';
 import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
 import { ContextualMenuStatus } from './ContextualMenu.checklist';
 
@@ -25,6 +27,7 @@ const ContextualMenuDirectionalExampleCode = require('!raw-loader!office-ui-fabr
 const ContextualMenuCustomizationExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Customization.Example.tsx') as string;
 const ContextualMenuWithScrollBarExampleCode = require
   ('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.ScrollBar.Example.tsx') as string;
+const ContextualMenuWithCustomMenuItemExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuItem.Example.tsx') as string;
 
 export class ContextualMenuPage extends React.Component<IComponentDemoPageProps, {}> {
   public render() {
@@ -76,12 +79,24 @@ export class ContextualMenuPage extends React.Component<IComponentDemoPageProps,
             >
               <ContextualMenuCustomizationExample />
             </ExampleCard>
+            <ExampleCard
+              title='ContextualMenu with customized submenus and noWrap attributes'
+              code={ ContextualMenuSubmenuExampleCode }
+            >
+              <ContextualMenuCustomizationWithNoWrapExample />
+            </ExampleCard>
             <ExampleCard
               title='ContextualMenu with a scroll bar and fixed direction'
               code={ ContextualMenuWithScrollBarExampleCode }
             >
               <ContextualMenuWithScrollBarExample />
             </ExampleCard>
+            <ExampleCard
+              title='ContextualMenu with custom rendered menu items'
+              code={ ContextualMenuWithCustomMenuItemExampleCode }
+            >
+              <ContextualMenuWithCustomMenuItemExample />
+            </ExampleCard>
 
           </div>
         }
@@ -132,7 +147,7 @@ export class ContextualMenuPage extends React.Component<IComponentDemoPageProps,
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...ContextualMenuStatus}
+            { ...ContextualMenuStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap
new file mode 100644
index 0000000000000..11c4226f3d2f8
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap
@@ -0,0 +1,541 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ContextMenuItemChildren when a checkmark icon renders the component with the checkmark 1`] = `
+ShallowWrapper {
+  "length": 1,
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <Unknown
+    classNames={
+      Object {
+        "checkmarkIcon": "checkmarkIcon",
+        "divider": "---",
+        "icon": "icon",
+        "item": "item",
+        "label": "label",
+        "linkContent": "linkContent",
+        "linkContentMenu": "linkContentMenu",
+        "root": "root",
+        "splitContainer": "splitContainer",
+        "splitMenu": "splitMenu",
+        "splitPrimary": "splitPrimary",
+        "subMenuIcon": "subMenuIcon",
+      }
+    }
+    hasIcons={undefined}
+    index={1}
+    item={
+      Object {
+        "key": "123",
+      }
+    }
+    onCheckmarkClick={[Function]}
+  />,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "host",
+    "props": Object {
+      "children": Array [
+        <Icon
+          className="checkmarkIcon"
+          iconName=""
+          onClick={[Function]}
+        />,
+        null,
+        null,
+        null,
+      ],
+      "className": "linkContent",
+    },
+    "ref": null,
+    "rendered": Array [
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "class",
+        "props": Object {
+          "className": "checkmarkIcon",
+          "iconName": "",
+          "onClick": [Function],
+        },
+        "ref": null,
+        "rendered": null,
+        "type": [Function],
+      },
+      null,
+      null,
+      null,
+    ],
+    "type": "div",
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "children": Array [
+          <Icon
+            className="checkmarkIcon"
+            iconName=""
+            onClick={[Function]}
+          />,
+          null,
+          null,
+          null,
+        ],
+        "className": "linkContent",
+      },
+      "ref": null,
+      "rendered": Array [
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "class",
+          "props": Object {
+            "className": "checkmarkIcon",
+            "iconName": "",
+            "onClick": [Function],
+          },
+          "ref": null,
+          "rendered": null,
+          "type": [Function],
+        },
+        null,
+        null,
+        null,
+      ],
+      "type": "div",
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactSixteenAdapter {
+      "options": Object {
+        "enableComponentDidUpdateOnSetState": true,
+      },
+    },
+  },
+}
+`;
+
+exports[`ContextMenuItemChildren when it has a sub menu renders the menu icon 1`] = `
+ShallowWrapper {
+  "length": 1,
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <Unknown
+    classNames={
+      Object {
+        "checkmarkIcon": "checkmarkIcon",
+        "divider": "---",
+        "icon": "icon",
+        "item": "item",
+        "label": "label",
+        "linkContent": "linkContent",
+        "linkContentMenu": "linkContentMenu",
+        "root": "root",
+        "splitContainer": "splitContainer",
+        "splitMenu": "splitMenu",
+        "splitPrimary": "splitPrimary",
+        "subMenuIcon": "subMenuIcon",
+      }
+    }
+    hasIcons={true}
+    index={1}
+    item={
+      Object {
+        "iconProps": Object {},
+        "key": "123",
+        "submenuIconProps": Object {},
+      }
+    }
+  />,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "host",
+    "props": Object {
+      "children": Array [
+        null,
+        <Icon
+          className="icon"
+        />,
+        null,
+        <Icon
+          className="subMenuIcon"
+          iconName="ChevronRight"
+        />,
+      ],
+      "className": "linkContent",
+    },
+    "ref": null,
+    "rendered": Array [
+      null,
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "class",
+        "props": Object {
+          "className": "icon",
+        },
+        "ref": null,
+        "rendered": null,
+        "type": [Function],
+      },
+      null,
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "class",
+        "props": Object {
+          "className": "subMenuIcon",
+          "iconName": "ChevronRight",
+        },
+        "ref": null,
+        "rendered": null,
+        "type": [Function],
+      },
+    ],
+    "type": "div",
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "children": Array [
+          null,
+          <Icon
+            className="icon"
+          />,
+          null,
+          <Icon
+            className="subMenuIcon"
+            iconName="ChevronRight"
+          />,
+        ],
+        "className": "linkContent",
+      },
+      "ref": null,
+      "rendered": Array [
+        null,
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "class",
+          "props": Object {
+            "className": "icon",
+          },
+          "ref": null,
+          "rendered": null,
+          "type": [Function],
+        },
+        null,
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "class",
+          "props": Object {
+            "className": "subMenuIcon",
+            "iconName": "ChevronRight",
+          },
+          "ref": null,
+          "rendered": null,
+          "type": [Function],
+        },
+      ],
+      "type": "div",
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactSixteenAdapter {
+      "options": Object {
+        "enableComponentDidUpdateOnSetState": true,
+      },
+    },
+  },
+}
+`;
+
+exports[`ContextMenuItemChildren when it has icons when it doesnt have iconProps renders the icon with iconName 1`] = `
+ShallowWrapper {
+  "length": 1,
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <Unknown
+    classNames={
+      Object {
+        "checkmarkIcon": "checkmarkIcon",
+        "divider": "---",
+        "icon": "icon",
+        "item": "item",
+        "label": "label",
+        "linkContent": "linkContent",
+        "linkContentMenu": "linkContentMenu",
+        "root": "root",
+        "splitContainer": "splitContainer",
+        "splitMenu": "splitMenu",
+        "splitPrimary": "splitPrimary",
+        "subMenuIcon": "subMenuIcon",
+      }
+    }
+    hasIcons={true}
+    index={1}
+    item={
+      Object {
+        "iconProps": Object {},
+        "key": "123",
+      }
+    }
+  />,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "host",
+    "props": Object {
+      "children": Array [
+        null,
+        <Icon
+          className="icon"
+        />,
+        null,
+        null,
+      ],
+      "className": "linkContent",
+    },
+    "ref": null,
+    "rendered": Array [
+      null,
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "class",
+        "props": Object {
+          "className": "icon",
+        },
+        "ref": null,
+        "rendered": null,
+        "type": [Function],
+      },
+      null,
+      null,
+    ],
+    "type": "div",
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "children": Array [
+          null,
+          <Icon
+            className="icon"
+          />,
+          null,
+          null,
+        ],
+        "className": "linkContent",
+      },
+      "ref": null,
+      "rendered": Array [
+        null,
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "class",
+          "props": Object {
+            "className": "icon",
+          },
+          "ref": null,
+          "rendered": null,
+          "type": [Function],
+        },
+        null,
+        null,
+      ],
+      "type": "div",
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactSixteenAdapter {
+      "options": Object {
+        "enableComponentDidUpdateOnSetState": true,
+      },
+    },
+  },
+}
+`;
+
+exports[`ContextMenuItemChildren when it has icons when it has iconProps renders the icon 1`] = `
+ShallowWrapper {
+  "length": 1,
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <Unknown
+    classNames={
+      Object {
+        "checkmarkIcon": "checkmarkIcon",
+        "divider": "---",
+        "icon": "icon",
+        "item": "item",
+        "label": "label",
+        "linkContent": "linkContent",
+        "linkContentMenu": "linkContentMenu",
+        "root": "root",
+        "splitContainer": "splitContainer",
+        "splitMenu": "splitMenu",
+        "splitPrimary": "splitPrimary",
+        "subMenuIcon": "subMenuIcon",
+      }
+    }
+    hasIcons={true}
+    index={1}
+    item={
+      Object {
+        "icon": "itemIcon",
+        "key": "123",
+        "name": "menuItem",
+      }
+    }
+  />,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "host",
+    "props": Object {
+      "children": Array [
+        null,
+        <Icon
+          className="icon"
+          iconName="itemIcon"
+        />,
+        <span
+          className="label"
+        >
+          menuItem
+        </span>,
+        null,
+      ],
+      "className": "linkContent",
+    },
+    "ref": null,
+    "rendered": Array [
+      null,
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "class",
+        "props": Object {
+          "className": "icon",
+          "iconName": "itemIcon",
+        },
+        "ref": null,
+        "rendered": null,
+        "type": [Function],
+      },
+      Object {
+        "instance": null,
+        "key": undefined,
+        "nodeType": "host",
+        "props": Object {
+          "children": "menuItem",
+          "className": "label",
+        },
+        "ref": null,
+        "rendered": "menuItem",
+        "type": "span",
+      },
+      null,
+    ],
+    "type": "div",
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "host",
+      "props": Object {
+        "children": Array [
+          null,
+          <Icon
+            className="icon"
+            iconName="itemIcon"
+          />,
+          <span
+            className="label"
+          >
+            menuItem
+          </span>,
+          null,
+        ],
+        "className": "linkContent",
+      },
+      "ref": null,
+      "rendered": Array [
+        null,
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "class",
+          "props": Object {
+            "className": "icon",
+            "iconName": "itemIcon",
+          },
+          "ref": null,
+          "rendered": null,
+          "type": [Function],
+        },
+        Object {
+          "instance": null,
+          "key": undefined,
+          "nodeType": "host",
+          "props": Object {
+            "children": "menuItem",
+            "className": "label",
+          },
+          "ref": null,
+          "rendered": "menuItem",
+          "type": "span",
+        },
+        null,
+      ],
+      "type": "div",
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactSixteenAdapter {
+      "options": Object {
+        "enableComponentDidUpdateOnSetState": true,
+      },
+    },
+  },
+}
+`;
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx
index 4fa1b5f774ef5..11eb5e116fa9e 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Basic.Example.tsx
@@ -23,7 +23,8 @@ export class ContextualMenuBasicExample extends React.Component {
             items: [
               {
                 key: 'newItem',
-                name: 'New'
+                name: 'New',
+                onClick: () => console.log('New clicked')
               },
               {
                 key: 'divider_1',
@@ -31,20 +32,35 @@ export class ContextualMenuBasicExample extends React.Component {
               },
               {
                 key: 'rename',
-                name: 'Rename'
+                name: 'Rename',
+                onClick: () => console.log('Rename clicked')
               },
               {
                 key: 'edit',
-                name: 'Edit'
+                name: 'Edit',
+                onClick: () => console.log('Edit clicked')
               },
               {
                 key: 'properties',
-                name: 'Properties'
+                name: 'Properties',
+                onClick: () => console.log('Properties clicked')
+              },
+              {
+                key: 'linkNoTarget',
+                name: 'Link same window',
+                href: 'http://bing.com'
+              },
+              {
+                key: 'linkWithTarget',
+                name: 'Link new window',
+                href: 'http://bing.com',
+                target: '_blank'
               },
               {
                 key: 'disabled',
                 name: 'Disabled item',
-                disabled: true
+                disabled: true,
+                onClick: () => console.error('Disabled item should not be clickable.')
               }
             ]
           } }
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Checkmarks.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Checkmarks.Example.tsx
index e94043cc69f7f..3e9d34033dc2a 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Checkmarks.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Checkmarks.Example.tsx
@@ -7,7 +7,7 @@ export interface IContextualMenuMultiselectExampleState {
   selection?: { [key: string]: boolean };
 }
 
-let keys: string[] = ['newItem', 'share', 'mobile', 'enablePrint', 'enableMusic', 'newSub', 'emailMessage', 'calendarEvent'];
+const keys: string[] = ['newItem', 'share', 'mobile', 'enablePrint', 'enableMusic', 'newSub', 'emailMessage', 'calendarEvent'];
 
 export class ContextualMenuCheckmarksExample extends React.Component<{}, IContextualMenuMultiselectExampleState> {
 
@@ -22,7 +22,7 @@ export class ContextualMenuCheckmarksExample extends React.Component<{}, IContex
   }
 
   public render() {
-    let { selection } = this.state;
+    const { selection } = this.state;
 
     return (
       <DefaultButton
@@ -110,7 +110,7 @@ export class ContextualMenuCheckmarksExample extends React.Component<{}, IContex
   }
 
   private _onToggleSelect(ev?: React.MouseEvent<HTMLButtonElement>, item?: IContextualMenuItem) {
-    let { selection } = this.state;
+    const { selection } = this.state;
     ev!.preventDefault();
     selection![item!.key] = !selection![item!.key];
 
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuItem.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuItem.Example.tsx
new file mode 100644
index 0000000000000..583e6a1b07f03
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomMenuItem.Example.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { ContextualMenuItemType } from 'office-ui-fabric-react/lib/ContextualMenu';
+import { IContextualMenuItemProps } from 'office-ui-fabric-react/lib/ContextualMenu';
+import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import './ContextualMenuExample.scss';
+
+export class ContextualMenuWithCustomMenuItemExample extends React.Component {
+
+  constructor(props: {}) {
+    super(props);
+    this.state = {
+      showCallout: false
+    };
+  }
+
+  public render() {
+    return (
+      <div>
+        <DefaultButton
+          id='ContextualMenuButton1'
+          text='Click for ContextualMenu'
+          menuProps={ {
+            shouldFocusOnMount: true,
+            items: [
+              {
+                key: 'newItem',
+                name: 'New'
+              },
+              {
+                key: 'divider_1',
+                itemType: ContextualMenuItemType.Divider
+              },
+              {
+                key: 'rename',
+                name: 'Rename'
+              },
+              {
+                key: 'edit',
+                name: 'Edit'
+              },
+              {
+                key: 'properties',
+                name: 'Properties'
+              },
+              {
+                key: 'disabled',
+                name: 'Disabled item',
+                disabled: true
+              }
+            ],
+            contextualMenuItemAs: (props: IContextualMenuItemProps) => <div>Custom rendered { props.item.name }</div>
+          } }
+        />
+      </div>
+    );
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Customization.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Customization.Example.tsx
index 39bcefdc86f68..e3cbc91b48f10 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Customization.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Customization.Example.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { DirectionalHint, ContextualMenuItemType } from 'office-ui-fabric-react/lib/ContextualMenu';
-import { DefaultButton, IconButton, IButton } from 'office-ui-fabric-react/lib/Button';
+import { DefaultButton, IconButton } from 'office-ui-fabric-react/lib/Button';
 import { FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
 import { autobind } from 'office-ui-fabric-react/lib/Utilities';
 import './ContextualMenuExample.scss';
@@ -17,169 +17,169 @@ export class ContextualMenuCustomizationExample extends React.Component<{}, {}>
             directionalHint: DirectionalHint.bottomLeftEdge,
             className: 'ms-ContextualMenu-customizationExample',
             items:
-            [
-              {
-                key: 'newItem',
-                name: 'New'
-              },
-              {
-                key: 'upload',
-                name: 'Upload'
-              },
-              {
-                key: 'divider_1',
-                itemType: ContextualMenuItemType.Divider
-              },
-              {
-                key: 'charm',
-                name: 'Charm',
-                className: 'Charm-List',
-                subMenuProps: {
-                  arrowDirection: FocusZoneDirection.bidirectional,
-                  items: [
-                    {
-                      key: 'none',
-                      name: 'None'
-                    },
-                    {
-                      key: 'bulb',
-                      name: 'Lightbulb',
-                      onRender: this._renderCharmMenuItem,
-                      className: 'ms-ContextualMenu-customizationExample-item'
-                    },
-                    {
-                      key: 'run',
-                      name: 'Running',
-                      onRender: this._renderCharmMenuItem,
-                      className: 'ms-ContextualMenu-customizationExample-item'
-                    },
-                    {
-                      key: 'plane',
-                      name: 'Airplane',
-                      onRender: this._renderCharmMenuItem,
-                      className: 'ms-ContextualMenu-customizationExample-item'
-                    },
-                    {
-                      key: 'page',
-                      name: 'Page',
-                      onRender: this._renderCharmMenuItem,
-                      className: 'ms-ContextualMenu-customizationExample-item'
-                    },
-                    {
-                      key: 'cake',
-                      name: 'Cake',
-                      onRender: this._renderCharmMenuItem,
-                      className: 'ms-ContextualMenu-customizationExample-item'
-                    },
-                    {
-                      key: 'soccer',
-                      name: 'Soccer',
-                      onRender: this._renderCharmMenuItem,
-                      className: 'ms-ContextualMenu-customizationExample-item'
-                    },
-                    {
-                      key: 'home',
-                      name: 'Home',
-                      onRender: this._renderCharmMenuItem,
-                      className: 'ms-ContextualMenu-customizationExample-item'
-                    },
-                    {
-                      key: 'emoji',
-                      name: 'Emoji2',
-                      onRender: this._renderCharmMenuItem,
-                      className: 'ms-ContextualMenu-customizationExample-item'
-                    },
-                    {
-                      key: 'work',
-                      name: 'Work',
-                      onRender: this._renderCharmMenuItem,
-                      className: 'ms-ContextualMenu-customizationExample-item'
-                    },
-                    {
-                      key: 'coffee',
-                      name: 'Coffee',
-                      onRender: this._renderCharmMenuItem,
-                      className: 'ms-ContextualMenu-customizationExample-item'
-                    },
-                    {
-                      key: 'people',
-                      name: 'People',
-                      onRender: this._renderCharmMenuItem,
-                      className: 'ms-ContextualMenu-customizationExample-item'
-                    },
-                    {
-                      key: 'stopwatch',
-                      name: 'Stopwatch',
-                      onRender: this._renderCharmMenuItem,
-                      className: 'ms-ContextualMenu-customizationExample-item'
-                    },
-                    {
-                      key: 'music',
-                      name: 'MusicInCollectionFill',
-                      onRender: this._renderCharmMenuItem,
-                      className: 'ms-ContextualMenu-customizationExample-item'
-                    },
-                    {
-                      key: 'lock',
-                      name: 'Lock',
-                      onRender: this._renderCharmMenuItem,
-                      className: 'ms-ContextualMenu-customizationExample-item'
-                    }
-                  ]
+              [
+                {
+                  key: 'newItem',
+                  name: 'New'
                 },
-              },
-              {
-                key: 'categories',
-                name: 'Categorize',
-                subMenuProps: {
-                  items: [
-                    {
-                      key: 'categories',
-                      name: 'categories',
-                      categoryList: [
-                        {
-                          name: 'Personal',
-                          color: 'yellow'
-                        },
-                        {
-                          name: 'Work',
-                          color: 'green'
-                        },
-                        {
-                          name: 'Birthday',
-                          color: 'blue'
-                        },
-                        {
-                          name: 'Spam',
-                          color: 'grey'
-                        },
-                        {
-                          name: 'Urgent',
-                          color: 'red'
-                        },
-                        {
-                          name: 'Hobbies',
-                          color: 'black'
-                        },
-                      ],
-                      onRender: this._renderCategoriesList
-                    },
-                    {
-                      key: 'divider_1',
-                      itemType: ContextualMenuItemType.Divider
-                    },
-                    {
-                      key: 'clear',
-                      name: 'Clear categories'
-                    },
-                    {
-                      key: 'manage',
-                      name: 'Manage categories'
-                    }
-                  ]
+                {
+                  key: 'upload',
+                  name: 'Upload'
                 },
-              }
-            ]
+                {
+                  key: 'divider_1',
+                  itemType: ContextualMenuItemType.Divider
+                },
+                {
+                  key: 'charm',
+                  name: 'Charm',
+                  className: 'Charm-List',
+                  subMenuProps: {
+                    arrowDirection: FocusZoneDirection.bidirectional,
+                    items: [
+                      {
+                        key: 'none',
+                        name: 'None'
+                      },
+                      {
+                        key: 'bulb',
+                        name: 'Lightbulb',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'run',
+                        name: 'Running',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'plane',
+                        name: 'Airplane',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'page',
+                        name: 'Page',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'cake',
+                        name: 'Cake',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'soccer',
+                        name: 'Soccer',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'home',
+                        name: 'Home',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'emoji',
+                        name: 'Emoji2',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'work',
+                        name: 'Work',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'coffee',
+                        name: 'Coffee',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'people',
+                        name: 'People',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'stopwatch',
+                        name: 'Stopwatch',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'music',
+                        name: 'MusicInCollectionFill',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'lock',
+                        name: 'Lock',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      }
+                    ]
+                  },
+                },
+                {
+                  key: 'categories',
+                  name: 'Categorize',
+                  subMenuProps: {
+                    items: [
+                      {
+                        key: 'categories',
+                        name: 'categories',
+                        categoryList: [
+                          {
+                            name: 'Personal',
+                            color: 'yellow'
+                          },
+                          {
+                            name: 'Work',
+                            color: 'green'
+                          },
+                          {
+                            name: 'Birthday',
+                            color: 'blue'
+                          },
+                          {
+                            name: 'Spam',
+                            color: 'grey'
+                          },
+                          {
+                            name: 'Urgent',
+                            color: 'red'
+                          },
+                          {
+                            name: 'Hobbies',
+                            color: 'black'
+                          },
+                        ],
+                        onRender: this._renderCategoriesList
+                      },
+                      {
+                        key: 'divider_1',
+                        itemType: ContextualMenuItemType.Divider
+                      },
+                      {
+                        key: 'clear',
+                        name: 'Clear categories'
+                      },
+                      {
+                        key: 'manage',
+                        name: 'Manage categories'
+                      }
+                    ]
+                  },
+                }
+              ]
           }
         }
 
@@ -204,7 +204,7 @@ export class ContextualMenuCustomizationExample extends React.Component<{}, {}>
       <ul className='ms-ContextualMenu-customizationExample-categoriesList'>
         <li className='ms-ContextualMenu-item'>
           { item.categoryList.map((category: any) =>
-            <button className='ms-ContextualMenu-link' role='menuitem'>
+            <DefaultButton className='ms-ContextualMenu-link ms-ContextualMenu-customizationExample-button' role='menuitem' key={ category.name }>
               <div>
                 <span
                   className='ms-ContextualMenu-icon ms-ContextualMenu-customizationExample-categorySwatch'
@@ -214,7 +214,7 @@ export class ContextualMenuCustomizationExample extends React.Component<{}, {}>
                   { category.name }
                 </span>
               </div>
-            </button>
+            </DefaultButton>
           ) }
         </li>
       </ul>
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomizationWithNoWrap.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomizationWithNoWrap.Example.tsx
new file mode 100644
index 0000000000000..1b9713903eb46
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.CustomizationWithNoWrap.Example.tsx
@@ -0,0 +1,234 @@
+import * as React from 'react';
+import { DirectionalHint, ContextualMenuItemType } from 'office-ui-fabric-react/lib/ContextualMenu';
+import { DefaultButton, IconButton } from 'office-ui-fabric-react/lib/Button';
+import { FocusZoneDirection } from 'office-ui-fabric-react/lib/FocusZone';
+import { autobind } from 'office-ui-fabric-react/lib/Utilities';
+import './ContextualMenuExample.scss';
+
+export class ContextualMenuCustomizationWithNoWrapExample extends React.Component<{}, {}> {
+  public render() {
+    return (
+      <DefaultButton
+        className='ContextualMenuButton3'
+        text='Click for ContextualMenu'
+        menuProps={
+          {
+            shouldFocusOnMount: true,
+            directionalHint: DirectionalHint.bottomLeftEdge,
+            className: 'ms-ContextualMenu-customizationExample',
+            items:
+              [
+                {
+                  key: 'newItem',
+                  name: 'New'
+                },
+                {
+                  key: 'upload',
+                  name: 'Upload'
+                },
+                {
+                  key: 'divider_1',
+                  itemType: ContextualMenuItemType.Divider
+                },
+                {
+                  key: 'charm',
+                  name: 'Charm',
+                  className: 'Charm-List',
+                  subMenuProps: {
+                    focusZoneProps: {
+                      direction: FocusZoneDirection.bidirectional,
+                      checkForNoWrap: true
+                    },
+                    items: [
+                      {
+                        key: 'bulb',
+                        name: 'Lightbulb',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'run',
+                        name: 'Running',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'plane',
+                        name: 'Airplane',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'page',
+                        name: 'Page',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'cake',
+                        name: 'Cake',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'soccer',
+                        name: 'Soccer',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'home',
+                        name: 'Home',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'emoji',
+                        name: 'Emoji2',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'work',
+                        name: 'Work',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'coffee',
+                        name: 'Coffee',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'people',
+                        name: 'People',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'stopwatch',
+                        name: 'Stopwatch',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'music',
+                        name: 'MusicInCollectionFill',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'lock',
+                        name: 'Lock',
+                        onRender: this._renderCharmMenuItem,
+                        className: 'ms-ContextualMenu-customizationExample-item'
+                      },
+                      {
+                        key: 'item3',
+                        name: 'Item 3',
+                        'data-no-horizontal-wrap': true
+                      },
+                      {
+                        key: 'item4',
+                        name: 'Item 4',
+                        'data-no-horizontal-wrap': true
+                      },
+                    ]
+                  },
+                },
+                {
+                  key: 'categories',
+                  name: 'Categorize',
+                  subMenuProps: {
+                    items: [
+                      {
+                        key: 'categories',
+                        name: 'categories',
+                        categoryList: [
+                          {
+                            name: 'Personal',
+                            color: 'yellow'
+                          },
+                          {
+                            name: 'Work',
+                            color: 'green'
+                          },
+                          {
+                            name: 'Birthday',
+                            color: 'blue'
+                          },
+                          {
+                            name: 'Spam',
+                            color: 'grey'
+                          },
+                          {
+                            name: 'Urgent',
+                            color: 'red'
+                          },
+                          {
+                            name: 'Hobbies',
+                            color: 'black'
+                          },
+                        ],
+                        onRender: this._renderCategoriesList
+                      },
+                      {
+                        key: 'divider_1',
+                        itemType: ContextualMenuItemType.Divider
+                      },
+                      {
+                        key: 'clear',
+                        name: 'Clear categories'
+                      },
+                      {
+                        key: 'manage',
+                        name: 'Manage categories'
+                      }
+                    ]
+                  },
+                }
+              ]
+          }
+        }
+
+      />
+    );
+  }
+
+  @autobind
+  private _renderCharmMenuItem(item: any, dismissMenu: () => void) {
+    return (
+      <IconButton
+        { ...item }
+        iconProps={ { iconName: item.name } }
+        className='ms-ContextualMenu-customizationExample-icon ms-ContextualMenu-link'
+        data-is-focusable={ true }
+        onClick={ dismissMenu }
+        data-no-vertical-wrap={ true }
+      />
+    );
+  }
+
+  private _renderCategoriesList(item: any) {
+    return (
+      <ul className='ms-ContextualMenu-customizationExample-categoriesList'>
+        <li className='ms-ContextualMenu-item'>
+          { item.categoryList.map((category: any) =>
+            <DefaultButton key={ category.name } className='ms-ContextualMenu-link ms-ContextualMenu-customizationExample-button' role='menuitem'>
+              <div>
+                <span
+                  className='ms-ContextualMenu-icon ms-ContextualMenu-customizationExample-categorySwatch'
+                  style={ { backgroundColor: category.color } }
+                />
+                <span className='ms-ContextualMenu-itemText'>
+                  { category.name }
+                </span>
+              </div>
+            </DefaultButton>
+          ) }
+        </li>
+      </ul>
+    );
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Directional.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Directional.Example.tsx
index a591d48fd70b4..f1c7ce29df70f 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Directional.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Directional.Example.tsx
@@ -3,7 +3,6 @@ import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
 import { DirectionalHint, ContextualMenuItemType } from 'office-ui-fabric-react/lib/ContextualMenu';
 import { Dropdown, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
-import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import { autobind, getRTL } from 'office-ui-fabric-react/lib/Utilities';
 import './ContextualMenuExample.scss';
 import * as exampleStylesImport from '../../../common/_exampleStyles.scss';
@@ -36,12 +35,6 @@ const DIRECTION_OPTIONS = [{ key: DirectionalHint.topLeftEdge, text: 'Top Left E
 ];
 
 export class ContextualMenuDirectionalExample extends React.Component<{}, IContextualMenuDirectionalExampleState> {
-  public refs: {
-    [key: string]: React.ReactInstance;
-    menuButton: HTMLElement;
-    gapSize: TextField;
-  };
-
   public constructor(props: {}) {
     super(props);
 
@@ -57,7 +50,7 @@ export class ContextualMenuDirectionalExample extends React.Component<{}, IConte
   }
 
   public render() {
-    let {
+    const {
       beakWidth,
       directionalHint,
       directionalHintForRTL,
@@ -95,7 +88,7 @@ export class ContextualMenuDirectionalExample extends React.Component<{}, IConte
             />
           }
         </div>
-        <div className='ms-ContextualMenuDirectionalExample-buttonArea' ref='menuButton'>
+        <div className='ms-ContextualMenuDirectionalExample-buttonArea'>
           <DefaultButton
             text='Show context menu'
             menuProps={ {
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Icon.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Icon.Example.tsx
index 3096efe21ab88..159d6f6a4922f 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Icon.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Icon.Example.tsx
@@ -14,7 +14,7 @@ export class ContextualMenuIconExample extends React.Component<{}, { showCallout
   }
 
   public render() {
-    let { showCallout } = this.state;
+    const { showCallout } = this.state;
 
     return (
       <div>
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.ScrollBar.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.ScrollBar.Example.tsx
index 177d82852559b..c78318860195d 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.ScrollBar.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.ScrollBar.Example.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DirectionalHint, ContextualMenuItemType } from 'office-ui-fabric-react/lib/ContextualMenu';
+import { DirectionalHint } from 'office-ui-fabric-react/lib/ContextualMenu';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import './ContextualMenuExample.scss';
 
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Submenu.Example.tsx b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Submenu.Example.tsx
index 5fc9baa0101fa..1a3171c052837 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Submenu.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Submenu.Example.tsx
@@ -1,17 +1,32 @@
 import * as React from 'react';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import './ContextualMenuExample.scss';
 
-export class ContextualMenuSubmenuExample extends React.Component<any, any> {
+export interface IContextualMenuSubmenuExampleState {
+  hoverDelay: number;
+}
+
+export class ContextualMenuSubmenuExample extends React.Component<any, IContextualMenuSubmenuExampleState> {
+
+  constructor(props: any) {
+    super(props);
+
+    this.state = {
+      hoverDelay: 250
+    };
+  }
 
   public render() {
     return (
       <div>
+        <TextField value={ String(this.state.hoverDelay) } onChanged={ this._onHoverDelayChanged } />
         <DefaultButton
           id='ContextualMenuButton2'
           text='Click for ContextualMenu'
           menuProps={ {
             shouldFocusOnMount: true,
+            subMenuHoverDelay: this.state.hoverDelay,
             items: [
               {
                 key: 'newItem',
@@ -29,6 +44,7 @@ export class ContextualMenuSubmenuExample extends React.Component<any, any> {
                     }
                   ],
                 },
+                href: 'https://bing.com',
                 name: 'New'
               },
               {
@@ -72,4 +88,10 @@ export class ContextualMenuSubmenuExample extends React.Component<any, any> {
       </div>
     );
   }
+
+  private _onHoverDelayChanged = (newValue: string) => {
+    this.setState({
+      hoverDelay: +newValue
+    });
+  }
 }
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenuExample.scss b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenuExample.scss
index 83e08bc27f6d4..10e6739218cce 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenuExample.scss
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenuExample.scss
@@ -47,7 +47,6 @@
   }
 
   .ms-ContextualMenu-customizationExample-categorySwatch {
-    margin: 6px 8px;
     width: 24px;
     height: 24px;
     vertical-align: top;
@@ -68,4 +67,8 @@
       height: auto;
     }
   }
+
+  .ms-ContextualMenu-customizationExample-button {
+    max-width: 50%;
+  }
 }
diff --git a/packages/office-ui-fabric-react/src/components/ContextualMenu/index.ts b/packages/office-ui-fabric-react/src/components/ContextualMenu/index.ts
index 26cda857d3173..ee97fdce0f03e 100644
--- a/packages/office-ui-fabric-react/src/components/ContextualMenu/index.ts
+++ b/packages/office-ui-fabric-react/src/components/ContextualMenu/index.ts
@@ -1,2 +1,4 @@
 export * from './ContextualMenu';
 export * from './ContextualMenu.types';
+export * from './ContextualMenuItem';
+export * from './ContextualMenuItem.types';
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.scss b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.scss
index bcd809bc56156..2b345f0fc454e 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.scss
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.scss
@@ -45,5 +45,10 @@
 .eventWithoutLabel {
   @include ms-DatePicker-event();
   top: 7px;
+
+  &:not(.msDatePickerDisabled) {
+    pointer-events: initial;
+    cursor: pointer;
+  }
 }
 
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.test.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.test.tsx
index a4c080b5436ae..8476fd2e3eba2 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.test.tsx
@@ -10,19 +10,19 @@ describe('DatePicker', () => {
   it('renders default DatePicker correctly', () => {
     // This will only render the input. Calendar component has its own snapshot.
     const component = renderer.create(<DatePicker />);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('should not open DatePicker when disabled, no label', () => {
-    let wrapper = mount(<DatePicker disabled />);
+    const wrapper = mount(<DatePicker disabled />);
     wrapper.find('i').simulate('click');
 
     expect(wrapper.state('isDatePickerShown')).toBe(false);
   });
 
   it('should not open DatePicker when disabled, with label', () => {
-    let wrapper = mount(<DatePicker disabled label='label' />);
+    const wrapper = mount(<DatePicker disabled label='label' />);
     wrapper.find('i').simulate('click');
     expect(wrapper.state('isDatePickerShown')).toBe(false);
   });
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
index 093cfaa8f0d6a..26c65aa91dd0a 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.tsx
@@ -5,17 +5,20 @@ import {
 } from './DatePicker.types';
 import {
   Calendar,
+  ICalendar,
   DayOfWeek
 } from '../../Calendar';
 import { FirstWeekOfYear } from '../../utilities/dateValues/DateValues';
 import { Callout } from '../../Callout';
 import { DirectionalHint } from '../../common/DirectionalHint';
-import { TextField } from '../../TextField';
+import { TextField, ITextField } from '../../TextField';
+import { Label } from '../../Label';
 import {
   autobind,
   BaseComponent,
   KeyCodes,
-  css
+  css,
+  createRef
 } from '../../Utilities';
 import { compareDates, compareDatePart } from '../../utilities/dateMath/DateMath';
 import * as stylesImport from './DatePicker.scss';
@@ -119,17 +122,15 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     dateTimeFormatter: undefined
   };
 
-  private _root: HTMLElement;
-  private _calendar: Calendar;
-  private _datepicker: HTMLDivElement;
-  private _textField: TextField;
+  private _calendar = createRef<ICalendar>();
+  private _datePickerDiv = createRef<HTMLDivElement>();
+  private _textField = createRef<ITextField>();
   private _preventFocusOpeningPicker: boolean;
-  private _focusOnSelectedDateOnUpdate: boolean;
 
   constructor(props: IDatePickerProps) {
     super(props);
 
-    let { formatDate, value } = props;
+    const { formatDate, value } = props;
 
     this.state = {
       selectedDate: value || undefined,
@@ -142,7 +143,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
   }
 
   public componentWillReceiveProps(nextProps: IDatePickerProps) {
-    let { formatDate, isRequired, strings, value, minDate, maxDate } = nextProps;
+    const { formatDate, isRequired, strings, value, minDate, maxDate } = nextProps;
 
     if (compareDates(this.props.minDate!, nextProps.minDate!) &&
       compareDates(this.props.maxDate!, nextProps.maxDate!) &&
@@ -168,7 +169,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     // passed in or if the formatting function was modified. We only update the selected date if either of these
     // had a legit change. Note tha the bug will still repro when only the formatDate was passed in props and this
     // is the result of the onSelectDate callback, but this should be a rare scenario.
-    let oldValue = this.state.selectedDate;
+    const oldValue = this.state.selectedDate;
     if (!compareDates(oldValue!, value!) || this.props.formatDate !== formatDate) {
       this.setState({
         selectedDate: value || undefined,
@@ -177,6 +178,13 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     }
   }
 
+  public componentDidUpdate(prevProps: IDatePickerProps, prevState: IDatePickerState) {
+    // If DatePicker's menu (Calendar) is closed, run onAfterMenuDismiss
+    if (this.props.onAfterMenuDismiss && prevState.isDatePickerShown && !this.state.isDatePickerShown) {
+      this.props.onAfterMenuDismiss();
+    }
+  }
+
   public render() {
     const {
       firstDayOfWeek,
@@ -198,8 +206,11 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     const { isDatePickerShown, formattedDate, selectedDate, errorMessage } = this.state;
 
     return (
-      <div className={ css('ms-DatePicker', styles.root, className) } ref={ this._resolveRef('_root') }>
-        <div ref={ this._resolveRef('_datepicker') }>
+      <div className={ css('ms-DatePicker', styles.root, isDatePickerShown && 'is-open', className) }>
+        { label && (
+          <Label required={ isRequired }>{ label }</Label>
+        ) }
+        <div ref={ this._datePickerDiv }>
           <TextField
             className={ styles.textField }
             ariaLabel={ ariaLabel }
@@ -213,7 +224,6 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
             onClick={ this._onTextFieldClick }
             onChanged={ this._onTextFieldChanged }
             errorMessage={ errorMessage }
-            label={ label }
             placeholder={ placeholder }
             borderless={ borderless }
             iconProps={ {
@@ -226,8 +236,8 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
               )
             } }
             readOnly={ !allowTextInput }
-            defaultValue={ formattedDate }
-            ref={ this._resolveRef('_textField') }
+            value={ formattedDate }
+            componentRef={ this._textField }
             role={ allowTextInput ? 'combobox' : 'menu' }
           />
         </div>
@@ -239,7 +249,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
             className={ css('ms-DatePicker-callout') }
             gapSpace={ 0 }
             doNotLayer={ false }
-            target={ this._datepicker }
+            target={ this._datePickerDiv.value }
             directionalHint={ DirectionalHint.bottomLeftEdge }
             onDismiss={ this._calendarDismissed }
             onPositioned={ this._onCalloutPositioned }
@@ -261,7 +271,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
               dateTimeFormatter={ this.props.dateTimeFormatter }
               minDate={ minDate }
               maxDate={ maxDate }
-              ref={ this._resolveRef('_calendar') }
+              componentRef={ this._calendar }
             />
           </Callout>
         ) }
@@ -269,24 +279,39 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     );
   }
 
+  public focus(): void {
+    if (this._textField.value) {
+      this._textField.value.focus();
+    }
+  }
+
   @autobind
   private _onSelectDate(date: Date) {
-    let { formatDate, onSelectDate } = this.props;
+    const { formatDate, onSelectDate } = this.props;
+
+    if (this.props.calendarProps && this.props.calendarProps.onSelectDate) {
+      this.props.calendarProps.onSelectDate(date);
+    }
 
     this.setState({
       selectedDate: date,
-      isDatePickerShown: false,
       formattedDate: formatDate && date ? formatDate(date) : '',
-    }, () => {
-      if (onSelectDate) {
-        onSelectDate(date);
-      }
+    });
+
+    if (onSelectDate) {
+      onSelectDate(date);
+    }
+
+    this.setState({
+      isDatePickerShown: false,
     });
   }
 
   @autobind
   private _onCalloutPositioned() {
-    this._calendar.focus();
+    if (this._calendar.value) {
+      this._calendar.value.focus();
+    }
   }
 
   @autobind
@@ -316,7 +341,7 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
         this._dismissDatePickerPopup();
       }
 
-      let { isRequired, value, strings } = this.props;
+      const { isRequired, value, strings } = this.props;
 
       this.setState({
         errorMessage: (isRequired && !value) ? (strings!.isRequiredErrorMessage || '*') : undefined,
@@ -373,7 +398,6 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
   private _showDatePickerPopup() {
     if (!this.state.isDatePickerShown) {
       this._preventFocusOpeningPicker = true;
-      this._focusOnSelectedDateOnUpdate = true;
       this.setState({
         isDatePickerShown: true,
         errorMessage: ''
@@ -400,8 +424,8 @@ export class DatePicker extends BaseComponent<IDatePickerProps, IDatePickerState
     this._preventFocusOpeningPicker = true;
     this._dismissDatePickerPopup();
 
-    if (this._textField) {
-      this._textField.focus();
+    if (this._textField.value) {
+      this._textField.value.focus();
     }
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.types.ts b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.types.ts
index cb46f0a1d351e..590ec481a33a4 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.types.ts
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/DatePicker.types.ts
@@ -5,7 +5,8 @@ import { FirstWeekOfYear } from '../../utilities/dateValues/DateValues';
 import { ICalendarFormatDateCallbacks } from '../Calendar/Calendar.types';
 
 export interface IDatePicker {
-
+  /** Sets focus to the text field */
+  focus(): void;
 }
 
 export interface IDatePickerProps extends React.Props<DatePicker> {
@@ -169,6 +170,11 @@ export interface IDatePickerProps extends React.Props<DatePicker> {
    * The initially highlighted date in the calendar picker
    */
   initialPickerDate?: Date;
+
+  /**
+ * Callback that runs after DatePicker's menu (Calendar) is closed
+ */
+  onAfterMenuDismiss?: () => void;
 }
 
 export interface IDatePickerStrings {
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
index 66caed779204f..9f3ccff2170c4 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
@@ -30,7 +30,7 @@ exports[`DatePicker renders default DatePicker correctly 1`] = `
             onInput={[Function]}
             onKeyDown={[Function]}
             placeholder={undefined}
-            readOnly={false}
+            readOnly={true}
             required={false}
             role="menu"
             type="text"
@@ -38,7 +38,6 @@ exports[`DatePicker renders default DatePicker correctly 1`] = `
           />
           <i
             aria-hidden={true}
-            aria-label={undefined}
             className=
                 ms-DatePicker-event--without-label
                 {
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx
index ddb8f1f0ea460..2376899485f21 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Basic.Example.tsx
@@ -75,11 +75,18 @@ export class DatePickerBasicExample extends React.Component<{}, IDatePickerBasic
   }
 
   public render() {
-    let { firstDayOfWeek } = this.state;
+    const { firstDayOfWeek } = this.state;
 
     return (
       <div>
-        <DatePicker firstDayOfWeek={ firstDayOfWeek } strings={ DayPickerStrings } placeholder='Select a date...' />
+        <DatePicker
+          firstDayOfWeek={ firstDayOfWeek }
+          strings={ DayPickerStrings }
+          placeholder='Select a date...'
+          // tslint:disable:jsx-no-lambda
+          onAfterMenuDismiss={ () => console.log('onAfterMenuDismiss called') }
+        // tslint:enable:jsx-no-lambda
+        />
         <Dropdown
           label='Select the first day of the week'
           options={ [
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Bounded.Example.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Bounded.Example.tsx
index 7b923ec79ef37..33d6890745785 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Bounded.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Bounded.Example.tsx
@@ -90,7 +90,7 @@ export class DatePickerBoundedExample extends React.Component<{}, IDatePickerReq
   }
 
   public render() {
-    let { firstDayOfWeek } = this.state;
+    const { firstDayOfWeek } = this.state;
 
     return (
       <div>
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Format.Example.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Format.Example.tsx
index ee5c5e88e6680..1750d9fe5a87f 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Format.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Format.Example.tsx
@@ -80,7 +80,7 @@ export class DatePickerFormatExample extends React.Component<
   }
 
   public render() {
-    let { firstDayOfWeek, value } = this.state;
+    const { firstDayOfWeek, value } = this.state;
     const desc =
       'This field is required. One of the support input formats is year dash month dash day.';
     return (
@@ -133,13 +133,13 @@ export class DatePickerFormatExample extends React.Component<
 
   @autobind
   private _onParseDateFromString(value: string): Date {
-    let date = this.state.value || new Date();
-    let values = (value || '').trim().split('/');
-    let day =
+    const date = this.state.value || new Date();
+    const values = (value || '').trim().split('/');
+    const day =
       values.length > 0
         ? Math.max(1, Math.min(31, parseInt(values[0], 10)))
         : date.getDate();
-    let month =
+    const month =
       values.length > 1
         ? Math.max(1, Math.min(12, parseInt(values[1], 10))) - 1
         : date.getMonth();
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Input.Example.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Input.Example.tsx
index eb6f25595e0dc..616074044dece 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Input.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Input.Example.tsx
@@ -82,7 +82,7 @@ export class DatePickerInputExample extends React.Component<{}, IDatePickerInput
   }
 
   public render() {
-    let { firstDayOfWeek, value } = this.state;
+    const { firstDayOfWeek, value } = this.state;
     const desc = 'This field is required. One of the support input formats is year dash month dash day.';
     return (
       <div>
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Required.Example.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Required.Example.tsx
index f3ce21c075815..211e0976099ba 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Required.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.Required.Example.tsx
@@ -81,7 +81,7 @@ export class DatePickerRequiredExample extends React.Component<{}, IDatePickerRe
   }
 
   public render() {
-    let { firstDayOfWeek } = this.state;
+    const { firstDayOfWeek } = this.state;
 
     return (
       <div>
diff --git a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx
index 4ffda00841333..7708fb68cc06c 100644
--- a/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DatePicker/examples/DatePicker.WeekNumbers.Example.tsx
@@ -75,7 +75,7 @@ export class DatePickerWeekNumbersExample extends React.Component<{}, IDatePicke
   }
 
   public render() {
-    let { firstDayOfWeek } = this.state;
+    const { firstDayOfWeek } = this.state;
 
     return (
       <div>
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss
index 1b2baea32e403..6ee10c6f42cd2 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.scss
@@ -18,6 +18,7 @@ $isPaddedMargin: 24px;
   height: $rowHeight;
   line-height: $rowHeight;
   white-space: nowrap;
+  box-sizing: content-box;
   padding-bottom: 1px;
   border-bottom: 1px solid $bodyDividerColor;
   cursor: default;
@@ -84,7 +85,6 @@ $isPaddedMargin: 24px;
   cursor: ew-resize;
   bottom: 0;
   top: 0;
-  margin: 0 -8px;
   overflow: hidden;
   height: inherit;
   background: transparent;
@@ -114,6 +114,15 @@ $isPaddedMargin: 24px;
   }
 }
 
+.cellSizerStart {
+  margin: 0 -8px;
+}
+
+.cellSizerEnd {
+  margin: 0;
+  @include margin-left(-16px);
+}
+
 .collapseButton {
   text-align: center;
   transform: rotate(-180deg);
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
index 766244900c53c..c873d087ae8bc 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsHeader.tsx
@@ -7,7 +7,8 @@ import {
   getRTL,
   getId,
   KeyCodes,
-  IRenderFunction
+  IRenderFunction,
+  createRef
 } from '../../Utilities';
 import { IColumn, DetailsListLayoutMode, ColumnActionsMode } from './DetailsList.types';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
@@ -82,10 +83,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
     collapseAllVisibility: CollapseAllVisibility.visible
   };
 
-  public refs: {
-    [key: string]: React.ReactInstance;
-    root: FocusZone;
-  };
+  private _root = createRef<FocusZone>();
 
   private _id: string;
 
@@ -104,11 +102,14 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
   }
 
   public componentDidMount() {
-    let { selection } = this.props;
+    const { selection } = this.props;
+    const rootElement = this._root.value;
 
-    this._events.on(selection, SELECTION_CHANGE, this._onSelectionChanged);
+    if (!rootElement) {
+      return;
+    }
 
-    const rootElement = ReactDOM.findDOMNode(this.refs.root);
+    this._events.on(selection, SELECTION_CHANGE, this._onSelectionChanged);
 
     // We need to use native on this to avoid MarqueeSelection from handling the event before us.
     this._events.on(rootElement, 'mousedown', this._onRootMouseDown);
@@ -117,7 +118,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
   }
 
   public componentWillReceiveProps(newProps: IDetailsHeaderProps) {
-    let { groupNestingDepth } = this.state;
+    const { groupNestingDepth } = this.state;
 
     if (newProps.groupNestingDepth !== groupNestingDepth) {
       this.setState({ groupNestingDepth: newProps.groupNestingDepth });
@@ -125,8 +126,8 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
   }
 
   public render() {
-    let { columns, ariaLabel, ariaLabelForSelectAllCheckbox, selectAllVisibility, ariaLabelForSelectionColumn } = this.props;
-    let { isAllSelected, columnResizeDetails, isSizing, groupNestingDepth, isAllCollapsed } = this.state;
+    const { columns, ariaLabel, ariaLabelForSelectAllCheckbox, selectAllVisibility, ariaLabelForSelectionColumn } = this.props;
+    const { isAllSelected, columnResizeDetails, isSizing, groupNestingDepth, isAllCollapsed } = this.state;
 
     const showCheckbox = selectAllVisibility !== SelectAllVisibility.none;
 
@@ -145,7 +146,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
           (selectAllVisibility === SelectAllVisibility.hidden) && ('is-selectAllHidden ' + styles.rootIsSelectAllHidden),
           (!!columnResizeDetails && isSizing) && 'is-resizingColumn'
         ) }
-        ref='root'
+        ref={ this._root }
         onMouseMove={ this._onRootMouseMove }
         data-automationid='DetailsHeader'
         direction={ FocusZoneDirection.horizontal }
@@ -329,7 +330,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
 
   /** Set focus to the active thing in the focus area. */
   public focus(): boolean {
-    return this.refs.root.focus();
+    return Boolean(this._root.value && this._root.value.focus());
   }
 
   private _renderColumnSizer(columnIndex: number) {
@@ -376,7 +377,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
    * @param {React.MouseEvent} ev (mouse double click event)
    */
   private _onSizerDoubleClick(columnIndex: number, ev: React.MouseEvent<HTMLElement>) {
-    let { onColumnAutoResized, columns } = this.props;
+    const { onColumnAutoResized, columns } = this.props;
     if (onColumnAutoResized) {
       onColumnAutoResized(columns[columnIndex], columnIndex);
     }
@@ -388,16 +389,16 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
 
   @autobind
   private _onSelectAllClicked() {
-    let { selection } = this.props;
+    const { selection } = this.props;
 
     selection.toggleAllSelected();
   }
 
   @autobind
   private _onRootMouseDown(ev: MouseEvent) {
-    let columnIndexAttr = (ev.target as HTMLElement).getAttribute('data-sizer-index');
-    let columnIndex = Number(columnIndexAttr);
-    let { columns } = this.props;
+    const columnIndexAttr = (ev.target as HTMLElement).getAttribute('data-sizer-index');
+    const columnIndex = Number(columnIndexAttr);
+    const { columns } = this.props;
 
     if (columnIndexAttr === null || ev.button !== MOUSEDOWN_PRIMARY_BUTTON) {
       // Ignore anything except the primary button.
@@ -418,7 +419,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
 
   @autobind
   private _onRootMouseMove(ev: React.MouseEvent<HTMLElement>) {
-    let { columnResizeDetails, isSizing } = this.state;
+    const { columnResizeDetails, isSizing } = this.state;
 
     if (columnResizeDetails && !isSizing && ev.clientX !== columnResizeDetails.originX) {
       this.setState({ isSizing: true });
@@ -497,13 +498,13 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
    */
   @autobind
   private _onSizerMouseMove(ev: React.MouseEvent<HTMLElement>) {
-    let {
+    const {
       // use buttons property here since ev.button in some edge case is not upding well during the move.
       // but firefox doesn't support it, so we set the default value when it is not defined.
       buttons
-  } = ev;
-    let { onColumnIsSizingChanged, onColumnResized, columns } = this.props;
-    let { columnResizeDetails } = this.state;
+    } = ev;
+    const { onColumnIsSizingChanged, onColumnResized, columns } = this.props;
+    const { columnResizeDetails } = this.state;
 
     if (buttons !== undefined && buttons !== MOUSEMOVE_PRIMARY_BUTTON) {
       // cancel mouse down event and return early when the primary button is not pressed
@@ -555,8 +556,8 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
    */
   @autobind
   private _onSizerMouseUp(ev: React.MouseEvent<HTMLElement>) {
-    let { columns, onColumnIsSizingChanged } = this.props;
-    let { columnResizeDetails } = this.state;
+    const { columns, onColumnIsSizingChanged } = this.props;
+    const { columnResizeDetails } = this.state;
 
     this.setState({
       columnResizeDetails: undefined,
@@ -569,7 +570,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
   }
 
   private _onSelectionChanged() {
-    let isAllSelected = this.props.selection.isAllSelected();
+    const isAllSelected = this.props.selection.isAllSelected();
 
     if (this.state.isAllSelected !== isAllSelected) {
       this.setState({
@@ -579,7 +580,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
   }
 
   private _onColumnClick(column: IColumn, ev: React.MouseEvent<HTMLElement>) {
-    let { onColumnClick } = this.props;
+    const { onColumnClick } = this.props;
 
     if (column.onColumnClick) {
       column.onColumnClick(ev, column);
@@ -591,7 +592,7 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
   }
 
   private _onColumnContextMenu(column: IColumn, ev: React.MouseEvent<HTMLElement>) {
-    let { onColumnContextMenu } = this.props;
+    const { onColumnContextMenu } = this.props;
 
     if (column.onColumnContextMenu) {
       column.onColumnContextMenu(column, ev);
@@ -607,8 +608,8 @@ export class DetailsHeader extends BaseComponent<IDetailsHeaderProps, IDetailsHe
   }
 
   private _onToggleCollapseAll() {
-    let { onToggleCollapseAll } = this.props;
-    let newCollapsed = !this.state.isAllCollapsed;
+    const { onToggleCollapseAll } = this.props;
+    const newCollapsed = !this.state.isAllCollapsed;
     this.setState({
       isAllCollapsed: newCollapsed
     });
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.test.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.test.tsx
new file mode 100644
index 0000000000000..8293ee25684f1
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.test.tsx
@@ -0,0 +1,121 @@
+import * as React from 'react';
+import * as renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
+
+import {
+  DetailsList
+} from './DetailsList';
+
+import {
+  IDetailsList,
+  IColumn
+} from './DetailsList.types';
+
+// Populate mock items for testing
+function mockItems(count: number): any {
+  const items = [];
+
+  for (let i = 0; i < count; i++) {
+    items.push({
+      key: i,
+      name: 'Item ' + i,
+      value: i
+    });
+  }
+
+  return items;
+}
+
+describe('DetailsList', () => {
+  it('renders List correctly', () => {
+    DetailsList.prototype.componentDidMount = jest.fn();
+
+    const component = renderer.create(
+      <DetailsList
+        items={ mockItems(5) }
+        // tslint:disable-next-line:jsx-no-lambda
+        onRenderRow={ () => null }
+        skipViewportMeasures={ true }
+        // tslint:disable-next-line:jsx-no-lambda
+        onShouldVirtualize={ () => false }
+      />
+    );
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('focuses row by index', () => {
+    jest.useFakeTimers();
+
+    let component: any;
+    mount(
+      <DetailsList
+        items={ mockItems(5) }
+        // tslint:disable-next-line:jsx-no-lambda
+        componentRef={ ref => component = ref }
+        skipViewportMeasures={ true }
+        // tslint:disable-next-line:jsx-no-lambda
+        onShouldVirtualize={ () => false }
+      />);
+
+    expect(component).toBeDefined();
+    (component as IDetailsList).focusIndex(2);
+    setTimeout(() => {
+      expect(document.activeElement.textContent).toEqual('2');
+      expect(document.activeElement.className.split(' ')).toContain('ms-DetailsRow');
+    }, 0);
+    jest.runOnlyPendingTimers();
+  });
+
+  it('focuses into row element', () => {
+    const onRenderColumn = (item: any, index: number, column: IColumn) => {
+      let value = (item && column && column.fieldName) ? item[column.fieldName] : '';
+      if (value === null || value === undefined) {
+        value = '';
+      }
+      return (
+        <div className={ 'test-column' } data-is-focusable={ true } >
+          { value }
+        </div>
+      );
+    };
+
+    jest.useFakeTimers();
+
+    let component: any;
+    mount(
+      <DetailsList
+        items={ mockItems(5) }
+        // tslint:disable-next-line:jsx-no-lambda
+        componentRef={ ref => component = ref }
+        skipViewportMeasures={ true }
+        // tslint:disable-next-line:jsx-no-lambda
+        onShouldVirtualize={ () => false }
+        onRenderItemColumn={ onRenderColumn }
+      />);
+
+    expect(component).toBeDefined();
+    (component as IDetailsList).focusIndex(3);
+    setTimeout(() => {
+      expect(document.activeElement.textContent).toEqual('3');
+      expect(document.activeElement.className.split(' ')).toContain('ms-DetailsRow');
+    }, 0);
+    jest.runOnlyPendingTimers();
+
+    // Set element visibility manually as a test workaround
+    (component as IDetailsList).focusIndex(4);
+    setTimeout(() => {
+      (document.activeElement.children[1] as any).isVisible = true;
+      (document.activeElement.children[1].children[0] as any).isVisible = true;
+      (document.activeElement.children[1].children[0].children[0] as any).isVisible = true;
+    }, 0);
+
+    jest.runOnlyPendingTimers();
+    (component as IDetailsList).focusIndex(4, true);
+    setTimeout(() => {
+      expect(document.activeElement.textContent).toEqual('4');
+      expect(document.activeElement.className.split(' ')).toContain('test-column');
+    }, 0);
+    jest.runOnlyPendingTimers();
+  });
+});
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
index c5751ebc41a24..73103e877da0c 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.tsx
@@ -36,6 +36,7 @@ import { DragDropHelper } from '../../utilities/dragdrop/DragDropHelper';
 import { GroupedList } from '../../GroupedList';
 import { List, IListProps } from '../../List';
 import { withViewport } from '../../utilities/decorators/withViewport';
+import { GetGroupCount } from '../../utilities/groupedList/GroupedListUtility';
 
 const styles: any = stylesImport;
 
@@ -130,6 +131,23 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
     this._groupedList && this._groupedList.scrollToIndex(index, measureItem);
   }
 
+  public focusIndex(
+    index: number,
+    forceIntoFirstElement: boolean = false,
+    measureItem?: (itemIndex: number) => number): void {
+
+    const item = this.props.items[index];
+    if (item) {
+      this.scrollToIndex(index, measureItem);
+
+      const itemKey = this._getItemKey(item, index);
+      const row = this._activeRows[itemKey];
+      if (row) {
+        this._setFocusToRow(row, forceIntoFirstElement);
+      }
+    }
+  }
+
   public componentWillUnmount() {
     if (this._dragDropHelper) {
       this._dragDropHelper.dispose();
@@ -176,7 +194,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
   }
 
   public componentWillReceiveProps(newProps: IDetailsListProps) {
-    let {
+    const {
       checkboxVisibility,
       items,
       setKey,
@@ -184,7 +202,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
       columns,
       viewport
     } = this.props;
-    let shouldResetSelection = (newProps.setKey !== setKey) || newProps.setKey === undefined;
+    const shouldResetSelection = (newProps.setKey !== setKey) || newProps.setKey === undefined;
     let shouldForceUpdates = false;
 
     if (newProps.layoutMode !== this.props.layoutMode) {
@@ -225,7 +243,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
   }
 
   public render() {
-    let {
+    const {
       ariaLabelForListHeader,
       ariaLabelForSelectAllCheckbox,
       ariaLabelForSelectionColumn,
@@ -254,17 +272,17 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
       usePageCache,
       onShouldVirtualize
     } = this.props;
-    let {
+    const {
       adjustedColumns,
       isCollapsed,
       isSizing,
       isSomeGroupExpanded
     } = this.state;
-    let {
+    const {
       _selection: selection,
       _dragDropHelper: dragDropHelper
     } = this;
-    let groupNestingDepth = this._getGroupNestingDepth();
+    const groupNestingDepth = this._getGroupNestingDepth();
     const additionalListProps: IListProps = {
       renderedWindowsAhead: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_AHEAD,
       renderedWindowsBehind: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_BEHIND,
@@ -281,7 +299,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
       if (isCollapsedGroupSelectVisible === undefined) {
         isCollapsedGroupSelectVisible = true;
       }
-      let isSelectAllVisible = isCollapsedGroupSelectVisible || !groups || isSomeGroupExpanded;
+      const isSelectAllVisible = isCollapsedGroupSelectVisible || !groups || isSomeGroupExpanded;
       selectAllVisibility = isSelectAllVisible ? SelectAllVisibility.visible : SelectAllVisibility.hidden;
     }
 
@@ -293,6 +311,8 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
       onRenderDetailsHeader = this._onRenderDetailsHeader
     } = this.props;
 
+    const rowCount = (isHeaderVisible ? 1 : 0) + GetGroupCount(groups) + (items ? items.length : 0);
+
     return (
       // If shouldApplyApplicationRole is true, role application will be applied to make arrow keys work
       // with JAWS.
@@ -314,7 +334,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
         <div
           role='grid'
           aria-label={ ariaLabelForGrid }
-          aria-rowcount={ (isHeaderVisible ? 1 : 0) + (items ? items.length : 0) }
+          aria-rowcount={ rowCount }
           aria-colcount={ (selectAllVisibility !== SelectAllVisibility.none ? 1 : 0) + (adjustedColumns ? adjustedColumns.length : 0) }
           aria-readonly='true'
         >
@@ -419,7 +439,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
   }
 
   private _onRenderCell(nestingDepth: number, item: any, index: number): React.ReactNode {
-    let {
+    const {
       compact,
       dragDropEvents,
       rowElementEventMap: eventsToRegister,
@@ -430,14 +450,15 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
       viewport,
       checkboxVisibility,
       getRowAriaLabel,
+      getRowAriaDescribedBy,
       checkButtonAriaLabel,
       checkboxCellClassName,
       groupProps
     } = this.props;
-    let collapseAllVisibility = groupProps && groupProps.collapseAllVisibility;
-    let selection = this._selection;
-    let dragDropHelper = this._dragDropHelper;
-    let {
+    const collapseAllVisibility = groupProps && groupProps.collapseAllVisibility;
+    const selection = this._selection;
+    const dragDropHelper = this._dragDropHelper;
+    const {
       adjustedColumns: columns
     } = this.state;
 
@@ -467,6 +488,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
       checkboxVisibility: checkboxVisibility,
       collapseAllVisibility: collapseAllVisibility,
       getRowAriaLabel: getRowAriaLabel,
+      getRowAriaDescribedBy: getRowAriaDescribedBy,
       checkButtonAriaLabel: checkButtonAriaLabel,
       checkboxCellClassName: checkboxCellClassName,
     }, this._onRenderRow);
@@ -499,7 +521,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
   }
 
   private _getGroupNestingDepth(): number {
-    let { groups } = this.props;
+    const { groups } = this.props;
     let level = 0;
     let groupsInLevel = groups;
 
@@ -532,17 +554,17 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
     }
   }
 
-  private _setFocusToRow(row: DetailsRow) {
+  private _setFocusToRow(row: DetailsRow, forceIntoFirstElement: boolean = false) {
     if (this._selectionZone) {
       this._selectionZone.ignoreNextFocus();
     }
     this._async.setTimeout(() => {
-      row.focus();
+      row.focus(forceIntoFirstElement);
     }, 0);
   }
 
   private _onRowWillUnmount(row: DetailsRow) {
-    let { onRowWillUnmount } = this.props;
+    const { onRowWillUnmount } = this.props;
 
     const { item, itemIndex } = row.props;
     const itemKey = this._getItemKey(item, itemIndex);
@@ -574,8 +596,8 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
   }
 
   private _adjustColumns(newProps: IDetailsListProps, forceUpdate?: boolean, resizingColumnIndex?: number) {
-    let adjustedColumns = this._getAdjustedColumns(newProps, forceUpdate, resizingColumnIndex);
-    let { width: viewportWidth } = this.props.viewport!;
+    const adjustedColumns = this._getAdjustedColumns(newProps, forceUpdate, resizingColumnIndex);
+    const { width: viewportWidth } = this.props.viewport!;
 
     if (adjustedColumns) {
       this.setState({
@@ -587,12 +609,13 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
 
   /** Returns adjusted columns, given the viewport size and layout mode. */
   private _getAdjustedColumns(newProps: IDetailsListProps, forceUpdate?: boolean, resizingColumnIndex?: number): IColumn[] | undefined {
-    let { columns: newColumns, items: newItems, layoutMode, selectionMode } = newProps;
+    const { items: newItems, layoutMode, selectionMode } = newProps;
+    let { columns: newColumns } = newProps;
     let { width: viewportWidth } = newProps.viewport!;
 
-    let columns = this.props ? this.props.columns : [];
-    let lastWidth = this.state ? this.state.lastWidth : -1;
-    let lastSelectionMode = this.state ? this.state.lastSelectionMode : undefined;
+    const columns = this.props ? this.props.columns : [];
+    const lastWidth = this.state ? this.state.lastWidth : -1;
+    const lastSelectionMode = this.state ? this.state.lastSelectionMode : undefined;
 
     if (viewportWidth !== undefined) {
       if (!forceUpdate &&
@@ -634,7 +657,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
   /** Builds a set of columns based on the given columns mixed with the current overrides. */
   private _getFixedColumns(newColumns: IColumn[]) {
     return newColumns.map(column => {
-      let newColumn = assign({}, column, this._columnOverrides[column.key]);
+      const newColumn = assign({}, column, this._columnOverrides[column.key]);
 
       if (!newColumn.calculatedWidth) {
         newColumn.calculatedWidth = newColumn.maxWidth || newColumn.minWidth || MIN_COLUMN_WIDTH;
@@ -662,18 +685,18 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
 
   /** Builds a set of columns to fix within the viewport width. */
   private _getJustifiedColumns(newColumns: IColumn[], viewportWidth: number, props: IDetailsListProps, firstIndex: number) {
-    let {
+    const {
       selectionMode,
       checkboxVisibility,
       groups
     } = props;
-    let outerPadding = DEFAULT_INNER_PADDING;
-    let rowCheckWidth = (selectionMode !== SelectionMode.none && checkboxVisibility !== CheckboxVisibility.hidden) ? CHECKBOX_WIDTH : 0;
-    let groupExpandWidth = groups ? GROUP_EXPAND_WIDTH : 0;
+    const outerPadding = DEFAULT_INNER_PADDING;
+    const rowCheckWidth = (selectionMode !== SelectionMode.none && checkboxVisibility !== CheckboxVisibility.hidden) ? CHECKBOX_WIDTH : 0;
+    const groupExpandWidth = groups ? GROUP_EXPAND_WIDTH : 0;
     let totalWidth = 0; // offset because we have one less inner padding.
-    let availableWidth = viewportWidth - (outerPadding + rowCheckWidth + groupExpandWidth);
-    let adjustedColumns: IColumn[] = newColumns.map((column, i) => {
-      let newColumn = assign(
+    const availableWidth = viewportWidth - (outerPadding + rowCheckWidth + groupExpandWidth);
+    const adjustedColumns: IColumn[] = newColumns.map((column, i) => {
+      const newColumn = assign(
         {},
         column,
         {
@@ -691,7 +714,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
 
     // Shrink or remove collapsable columns.
     while (lastIndex > 0 && totalWidth > availableWidth) {
-      let column = adjustedColumns[lastIndex];
+      const column = adjustedColumns[lastIndex];
 
       const minWidth = column.minWidth || MIN_COLUMN_WIDTH;
       const overflowWidth = totalWidth - availableWidth;
@@ -708,20 +731,20 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
 
     // Then expand columns starting at the beginning, until we've filled the width.
     for (let i = 0; i < adjustedColumns.length && totalWidth < availableWidth; i++) {
-      let column = adjustedColumns[i];
+      const column = adjustedColumns[i];
       const isLast = i === (adjustedColumns.length - 1);
       const overrides = this._columnOverrides[column.key];
       if (overrides && overrides.calculatedWidth && !isLast) {
         continue;
       }
 
-      let spaceLeft = availableWidth - totalWidth;
+      const spaceLeft = availableWidth - totalWidth;
       let increment: number;
       if (isLast) {
         increment = spaceLeft;
       } else {
-        let maxWidth = column.maxWidth;
-        let minWidth = column.minWidth || maxWidth || MIN_COLUMN_WIDTH;
+        const maxWidth = column.maxWidth;
+        const minWidth = column.minWidth || maxWidth || MIN_COLUMN_WIDTH;
         increment = maxWidth ? Math.min(spaceLeft, maxWidth - minWidth) : spaceLeft;
       }
 
@@ -733,7 +756,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
   }
 
   private _onColumnResized(resizingColumn: IColumn, newWidth: number, resizingColumnIndex: number) {
-    let newCalculatedWidth = Math.max(resizingColumn.minWidth || MIN_COLUMN_WIDTH, newWidth);
+    const newCalculatedWidth = Math.max(resizingColumn.minWidth || MIN_COLUMN_WIDTH, newWidth);
     if (this.props.onColumnResize) {
       this.props.onColumnResize(resizingColumn, newCalculatedWidth, resizingColumnIndex);
     }
@@ -745,7 +768,7 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
   }
 
   private _rememberCalculatedWidth(column: IColumn, newCalculatedWidth: number) {
-    let overrides = this._getColumnOverride(column.key);
+    const overrides = this._getColumnOverride(column.key);
     overrides.calculatedWidth = newCalculatedWidth;
     overrides.currentWidth = newCalculatedWidth;
   }
@@ -767,11 +790,11 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
   private _onColumnAutoResized(column: IColumn, columnIndex: number) {
     let max = 0;
     let count = 0;
-    let totalCount = Object.keys(this._activeRows).length;
+    const totalCount = Object.keys(this._activeRows).length;
 
-    for (let key in this._activeRows) {
+    for (const key in this._activeRows) {
       if (this._activeRows.hasOwnProperty(key)) {
-        let currentRow = this._activeRows[key];
+        const currentRow = this._activeRows[key];
         currentRow.measureCell(columnIndex, (width: number) => {
           max = Math.max(max, width);
           count++;
@@ -792,12 +815,12 @@ export class DetailsList extends BaseComponent<IDetailsListProps, IDetailsListSt
    * @param {ev} focus event from Focus Zone
    */
   private _onActiveRowChanged(el?: HTMLElement, ev?: React.FocusEvent<HTMLElement>) {
-    let { items, onActiveItemChanged } = this.props;
+    const { items, onActiveItemChanged } = this.props;
 
     if (!el) {
       return;
     }
-    let index = Number(el.getAttribute('data-item-index'));
+    const index = Number(el.getAttribute('data-item-index'));
     if (index >= 0) {
       if (onActiveItemChanged) {
         onActiveItemChanged(items[index], index, ev);
@@ -842,13 +865,12 @@ export function buildColumns(
   isSortedDescending?: boolean,
   groupedColumnKey?: string,
   isMultiline?: boolean) {
-  let columns: IColumn[] = [];
+  const columns: IColumn[] = [];
 
   if (items && items.length) {
-    let firstItem = items[0];
-    let isFirstColumn = true;
+    const firstItem = items[0];
 
-    for (let propName in firstItem) {
+    for (const propName in firstItem) {
       if (firstItem.hasOwnProperty(propName)) {
         columns.push({
           key: propName,
@@ -866,8 +888,6 @@ export function buildColumns(
           onColumnClick: onColumnClick,
           isGrouped: groupedColumnKey === propName
         });
-
-        isFirstColumn = false;
       }
     }
   }
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts
index b23be1ac51475..4d5bddf037f5e 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsList.types.ts
@@ -27,6 +27,16 @@ export interface IDetailsList extends IList {
    * call this to force a re-evaluation. Be aware that this can be an expensive operation and should be done sparingly.
    */
   forceUpdate: () => void;
+
+  /**
+   * Scroll to and focus the item at the given index. focusIndex will call scrollToIndex on the specified index.
+   *
+   * @param index Index of item to scroll to
+   * @param forceIntoFirstElement If true, focus will be set to the first focusable child element of the item rather
+   *  than the item itself.
+   * @param measureItem Optional callback to measure the height of an individual item
+   */
+  focusIndex: (index: number, forceIntoFirstElement?: boolean, measureItem?: (itemIndex: number) => number) => void;
 }
 
 export interface IDetailsListProps extends React.Props<DetailsList>, IWithViewportProps {
@@ -162,6 +172,9 @@ export interface IDetailsListProps extends React.Props<DetailsList>, IWithViewpo
   /** Optional callback to get the aria-label string for a given item. */
   getRowAriaLabel?: (item: any) => string;
 
+  /** Optional callback to get the aria-describedby IDs (space separated strings) of the elements that describe the item. */
+  getRowAriaDescribedBy?: (item: any) => string;
+
   /** Optional callback to get the item key, to be used in the selection and on render. */
   getKey?: (item: any, index?: number) => string;
 
@@ -316,7 +329,7 @@ export interface IColumn {
   /**
    * If provided, will be executed when the user clicks on the column header.
    */
-  onColumnClick?: (ev?: React.MouseEvent<HTMLElement>, column?: IColumn) => any;
+  onColumnClick?: (ev: React.MouseEvent<HTMLElement>, column: IColumn) => any;
 
   /**
    * If provided, will be executed when the user accesses the contextmenu on a column header.
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
index 6e53c0ddba93c..67c4b30c56a75 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.tsx
@@ -8,12 +8,13 @@ import {
   css,
   shallowCompare,
   getNativeProps,
-  divProperties
+  divProperties,
+  createRef
 } from '../../Utilities';
 import { IColumn, CheckboxVisibility } from './DetailsList.types';
 import { DetailsRowCheck, IDetailsRowCheckProps } from './DetailsRowCheck';
 import { GroupSpacer } from '../GroupedList/GroupSpacer';
-import { DetailsRowFields } from './DetailsRowFields';
+import { DetailsRowFields, IDetailsRowFieldsProps } from './DetailsRowFields';
 import { FocusZone, FocusZoneDirection, IFocusZone } from '../../FocusZone';
 import { ISelection, SelectionMode, SELECTION_CHANGE } from '../../utilities/selection/interfaces';
 import { CollapseAllVisibility } from '../../GroupedList';
@@ -49,8 +50,10 @@ export interface IDetailsRowProps extends React.Props<DetailsRow> {
   checkboxVisibility?: CheckboxVisibility;
   collapseAllVisibility?: CollapseAllVisibility;
   getRowAriaLabel?: (item: any) => string;
+  getRowAriaDescribedBy?: (item: any) => string;
   checkButtonAriaLabel?: string;
   checkboxCellClassName?: string;
+  rowFieldsAs?: React.StatelessComponent<IDetailsRowFieldsProps> | React.ComponentClass<IDetailsRowFieldsProps>;
   className?: string;
 }
 
@@ -73,14 +76,9 @@ export interface IDetailsRowState {
 const DEFAULT_DROPPING_CSS_CLASS = 'is-dropping';
 
 export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState> {
-  public refs: {
-    [key: string]: React.ReactInstance,
-    cellMeasurer: HTMLElement
-  };
-
   private _root: HTMLElement | undefined;
-  private _focusZone: IFocusZone;
-  private _hasSetFocus: boolean;
+  private _cellMeasurer: HTMLElement;
+  private _focusZone = createRef<IFocusZone>();
   private _droppingClassNames: string;
   private _hasMounted: boolean;
   private _dragDropSubscription: IDisposable;
@@ -95,8 +93,6 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
       groupNestingDepth: props.groupNestingDepth
     };
 
-    this._hasSetFocus = false;
-
     this._droppingClassNames = '';
 
     this._updateDroppingState = this._updateDroppingState.bind(this);
@@ -104,7 +100,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
   }
 
   public componentDidMount() {
-    let { dragDropHelper } = this.props;
+    const { dragDropHelper } = this.props;
 
     if (dragDropHelper) {
       this._dragDropSubscription = dragDropHelper.subscribe(this._root as HTMLElement, this._events, this._getRowDragDropOptions());
@@ -120,9 +116,9 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
   }
 
   public componentDidUpdate(previousProps: IDetailsRowProps) {
-    let state = this.state;
-    let { item, onDidMount } = this.props;
-    let { columnMeasureInfo } = state;
+    const state = this.state;
+    const { item, onDidMount } = this.props;
+    const { columnMeasureInfo } = state;
 
     if (this.props.itemIndex !== previousProps.itemIndex ||
       this.props.item !== previousProps.item ||
@@ -138,7 +134,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
     }
 
     if (columnMeasureInfo && columnMeasureInfo.index >= 0) {
-      let newWidth = this.refs.cellMeasurer.getBoundingClientRect().width;
+      const newWidth = this._cellMeasurer.getBoundingClientRect().width;
 
       columnMeasureInfo.onMeasureDone(newWidth);
 
@@ -154,7 +150,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
   }
 
   public componentWillUnmount() {
-    let { item, onWillUnmount } = this.props;
+    const { item, onWillUnmount } = this.props;
 
     // Only call the onWillUnmount callback if we have an item.
     if (onWillUnmount && item) {
@@ -187,8 +183,11 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
       viewport,
       checkboxVisibility,
       getRowAriaLabel,
+      getRowAriaDescribedBy,
       checkButtonAriaLabel,
       checkboxCellClassName,
+      /** Alias rowFieldsAs as RowFields and default to DetailsRowFields if rowFieldsAs does not exist */
+      rowFieldsAs: RowFields = DetailsRowFields,
       selection,
     } = this.props;
     const { columnMeasureInfo, isDropping, groupNestingDepth } = this.state;
@@ -196,18 +195,21 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
     const isDraggable = Boolean(dragDropEvents && dragDropEvents.canDrag && dragDropEvents.canDrag(item));
     const droppingClassName = isDropping ? (this._droppingClassNames ? this._droppingClassNames : DEFAULT_DROPPING_CSS_CLASS) : '';
     const ariaLabel = getRowAriaLabel ? getRowAriaLabel(item) : null;
+    const ariaDescribedBy = getRowAriaDescribedBy ? getRowAriaDescribedBy(item) : undefined;
     const canSelect = selection.canSelectItem!(item);
     const isContentUnselectable = selectionMode === SelectionMode.multiple;
     const showCheckbox = selectionMode !== SelectionMode.none && checkboxVisibility !== CheckboxVisibility.hidden;
+    const ariaSelected = (selectionMode === SelectionMode.none) ? undefined : isSelected;
 
     return (
       <FocusZone
-        {...getNativeProps(this.props, divProperties) }
+        { ...getNativeProps(this.props, divProperties) }
         direction={ FocusZoneDirection.horizontal }
         ref={ this._onRootRef }
-        componentRef={ this._resolveRef('_focusZone') }
+        componentRef={ this._focusZone }
         role='row'
         aria-label={ ariaLabel }
+        ariaDescribedBy={ ariaDescribedBy }
         className={ css(
           'ms-DetailsRow',
           className,
@@ -229,7 +231,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
         draggable={ isDraggable }
         data-automationid='DetailsRow'
         style={ { minWidth: viewport ? viewport.width : 0 } }
-        aria-selected={ isSelected }
+        aria-selected={ ariaSelected }
         allowFocusRoot={ true }
       >
         { showCheckbox && (
@@ -251,7 +253,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
         { GroupSpacer({ count: groupNestingDepth! - (this.props.collapseAllVisibility === CollapseAllVisibility.hidden ? 1 : 0) }) }
 
         { item && (
-          <DetailsRowFields
+          <RowFields
             columns={ columns }
             item={ item }
             itemIndex={ itemIndex }
@@ -259,14 +261,13 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
             onRenderItemColumn={ onRenderItemColumn }
           />
         ) }
-
         { columnMeasureInfo && (
           <span
             role='presentation'
             className={ css('ms-DetailsRow-cellMeasurer ms-DetailsRow-cell', styles.cellMeasurer, styles.cell) }
-            ref='cellMeasurer'
+            ref={ this._resolveRef('_cellMeasurer') }
           >
-            <DetailsRowFields
+            <RowFields
               columns={ [columnMeasureInfo.column] }
               item={ item }
               itemIndex={ itemIndex }
@@ -293,7 +294,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
    * @param {(width: number) => void} onMeasureDone (the call back function when finish measure)
    */
   public measureCell(index: number, onMeasureDone: (width: number) => void) {
-    let column = assign({}, this.props.columns[index]) as IColumn;
+    const column = assign({}, this.props.columns[index]) as IColumn;
 
     column.minWidth = 0;
     column.maxWidth = 999999;
@@ -309,8 +310,8 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
     });
   }
 
-  public focus(): boolean {
-    return !!this._focusZone && this._focusZone.focus();
+  public focus(forceIntoFirstElement: boolean = false): boolean {
+    return !!this._focusZone.value && this._focusZone.value.focus(forceIntoFirstElement);
   }
 
   protected _onRenderCheck(props: IDetailsRowCheckProps) {
@@ -318,7 +319,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
   }
 
   private _getSelectionState(props: IDetailsRowProps): IDetailsRowSelectionState {
-    let { itemIndex, selection } = props;
+    const { itemIndex, selection } = props;
 
     return {
       isSelected: selection.isIndexSelected(itemIndex),
@@ -327,7 +328,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
   }
 
   private _onSelectionChanged() {
-    let selectionState = this._getSelectionState(this.props);
+    const selectionState = this._getSelectionState(this.props);
 
     if (!shallowCompare(selectionState, this.state.selectionState)) {
       this.setState({
@@ -359,7 +360,7 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
       dragDropEvents,
       eventsToRegister
     } = this.props;
-    let options = {
+    const options = {
       eventMap: eventsToRegister,
       selectionIndex: itemIndex,
       context: { data: item, index: itemIndex },
@@ -387,8 +388,8 @@ export class DetailsRow extends BaseComponent<IDetailsRowProps, IDetailsRowState
    * @param {DragEvent} event (the event trigger dropping state change which can be dragenter, dragleave etc)
    */
   private _updateDroppingState(newValue: boolean, event: DragEvent) {
-    let { selectionState, isDropping } = this.state;
-    let { dragDropEvents, item } = this.props;
+    const { selectionState, isDropping } = this.state;
+    const { dragDropEvents, item } = this.props;
 
     if (!newValue) {
       if (dragDropEvents!.onDragLeave) {
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx
index 4d2610476da2c..49428fe9b3fec 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowCheck.tsx
@@ -33,7 +33,7 @@ export const DetailsRowCheck = (props: IDetailsRowCheckProps) => {
     ...buttonProps
   } = props;
 
-  let isPressed = props.isSelected || props.selected;
+  const isPressed = props.isSelected || props.selected;
 
   return (
     <div
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
index a14d06067951c..70c8adc0cc08a 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRowFields.tsx
@@ -33,8 +33,8 @@ export class DetailsRowFields extends BaseComponent<IDetailsRowFieldsProps, IDet
   }
 
   public render() {
-    let { columns, columnStartIndex } = this.props;
-    let { cellContent } = this.state;
+    const { columns, columnStartIndex } = this.props;
+    const { cellContent } = this.state;
 
     return (
       <div
@@ -65,14 +65,14 @@ export class DetailsRowFields extends BaseComponent<IDetailsRowFieldsProps, IDet
   }
 
   private _getState(props: IDetailsRowFieldsProps) {
-    let { item, itemIndex, onRenderItemColumn } = props;
+    const { item, itemIndex, onRenderItemColumn } = props;
 
     return {
       cellContent: props.columns.map((column) => {
         let cellContent;
 
         try {
-          let render = column.onRender || onRenderItemColumn;
+          const render = column.onRender || onRenderItemColumn;
 
           cellContent = render ? render(item, itemIndex, column) : this._getCellText(item, column);
         } catch (e) { /* no-op */ }
@@ -91,5 +91,4 @@ export class DetailsRowFields extends BaseComponent<IDetailsRowFieldsProps, IDet
 
     return value;
   }
-
 }
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
new file mode 100644
index 0000000000000..d4d66656bceca
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/__snapshots__/DetailsList.test.tsx.snap
@@ -0,0 +1,275 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DetailsList renders List correctly 1`] = `
+<div
+  className="ms-Viewport"
+  style={
+    Object {
+      "minHeight": 1,
+      "minWidth": 1,
+    }
+  }
+>
+  <div
+    aria-label={undefined}
+    className="ms-DetailsList is-horizontalConstrained undefined"
+    data-automationid="DetailsList"
+    data-is-scrollable="false"
+  >
+    <div
+      aria-colcount={2}
+      aria-label={undefined}
+      aria-readonly="true"
+      aria-rowcount={6}
+      role="grid"
+    >
+      <div
+        onKeyDown={[Function]}
+        role="presentation"
+      >
+        <div
+          aria-describedby={undefined}
+          aria-label={undefined}
+          aria-labelledby={undefined}
+          className="ms-FocusZone ms-DetailsHeader"
+          data-automationid="DetailsHeader"
+          data-focuszone-id="FocusZone1"
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseDownCapture={[Function]}
+          onMouseMove={[Function]}
+          role="row"
+        >
+          <div
+            aria-colindex={0}
+            aria-labelledby="header0-check"
+            className="ms-DetailsHeader-cell ms-DetailsHeader-cellIsCheck"
+            onClick={[Function]}
+            role="columnheader"
+          >
+            <span
+              className=""
+            >
+              <div
+                aria-checked={undefined}
+                aria-describedby="header0-checkTooltip"
+                aria-label={undefined}
+                className="ms-DetailsRow-check ms-DetailsRow-check--isHeader undefined"
+                data-automationid="DetailsRowCheck"
+                data-is-focusable={true}
+                data-selection-toggle={true}
+                id="header0-check"
+                role="checkbox"
+              >
+                <div
+                  className=
+                      ms-Check
+                      {
+                        height: 18px;
+                        line-height: 1;
+                        position: relative;
+                        user-select: none;
+                        vertical-align: top;
+                        width: 18px;
+                      }
+                      &:before {
+                        background: #ffffff;
+                        border-radius: 50%;
+                        bottom: 1px;
+                        content: "";
+                        left: 1px;
+                        opacity: 1;
+                        position: absolute;
+                        right: 1px;
+                        top: 1px;
+                      }
+                      .checkHost:hover &, .checkHost:focus &, &:hover, &:focus {
+                        opacity: 1;
+                      }
+                >
+                  <i
+                    aria-hidden={true}
+                    className=
+                        ms-Check-circle
+                        {
+                          display: inline-block;
+                        }
+                        {
+                          color: #c8c8c8;
+                          font-size: 18px;
+                          height: 18px;
+                          left: 0px;
+                          position: absolute;
+                          text-align: center;
+                          top: 0px;
+                          vertical-align: middle;
+                          width: 18px;
+                        }
+                        @media screen and (-ms-high-contrast: active){& {
+                          color: WindowText;
+                        }
+                    data-icon-name="CircleRing"
+                    role="presentation"
+                  />
+                  <i
+                    aria-hidden={true}
+                    className=
+                        ms-Check-check
+                        {
+                          display: inline-block;
+                        }
+                        {
+                          color: #c8c8c8;
+                          font-size: 16px;
+                          height: 18px;
+                          left: .5px;
+                          opacity: 0;
+                          position: absolute;
+                          text-align: center;
+                          top: 0px;
+                          vertical-align: middle;
+                          width: 18px;
+                        }
+                        &:hover {
+                          opacity: 1;
+                        }
+                        @media screen and (-ms-high-contrast: active){& {
+                          -ms-high-contrast-adjust: none;
+                        }
+                    data-icon-name="StatusCircleCheckmark"
+                    role="presentation"
+                  />
+                </div>
+              </div>
+            </span>
+          </div>
+          <div
+            aria-colindex={1}
+            aria-disabled={false}
+            aria-sort="none"
+            className="ms-DetailsHeader-cell is-actionable undefined"
+            data-automationid="ColumnsHeaderColumn"
+            data-item-key="key"
+            role="columnheader"
+            style={
+              Object {
+                "width": 116,
+              }
+            }
+          >
+            <span
+              className=""
+            >
+              <span
+                aria-describedby="header0-key-tooltip"
+                aria-haspopup={false}
+                aria-label={undefined}
+                aria-labelledby="header0-key-name "
+                className="ms-DetailsHeader-cellTitle"
+                data-is-focusable={true}
+                id="header0-key"
+                onClick={[Function]}
+                onContextMenu={[Function]}
+                role="button"
+              >
+                <span
+                  className="ms-DetailsHeader-cellName"
+                  id="header0-key-name"
+                >
+                  key
+                </span>
+              </span>
+            </span>
+          </div>
+          <div
+            aria-hidden={true}
+            className="ms-DetailsHeader-cellSizer"
+            data-is-focusable={false}
+            data-sizer-index={0}
+            onBlur={[Function]}
+            onClick={[Function]}
+            onDoubleClick={[Function]}
+            role="button"
+          />
+        </div>
+      </div>
+      <div
+        onKeyDown={[Function]}
+        role="presentation"
+      >
+        <div
+          aria-describedby={undefined}
+          aria-labelledby={undefined}
+          className="ms-FocusZone"
+          data-focuszone-id="FocusZone2"
+          onBlur={[Function]}
+          onFocus={[Function]}
+          onKeyDown={[Function]}
+          onMouseDownCapture={[Function]}
+          role="presentation"
+        >
+          <div
+            className="ms-SelectionZone"
+            onClick={[Function]}
+            onContextMenu={[Function]}
+            onDoubleClick={[Function]}
+            onFocusCapture={[Function]}
+            onKeyDown={[Function]}
+            onKeyDownCapture={[Function]}
+            onMouseDown={[Function]}
+            onMouseDownCapture={[Function]}
+            role="presentation"
+          >
+            <div
+              className="ms-List"
+              role="presentation"
+            >
+              <div
+                className="ms-List-surface"
+                role="presentation"
+              >
+                <div
+                  className="ms-List-page"
+                  role="presentation"
+                  style={Object {}}
+                >
+                  <div
+                    className="ms-List-cell"
+                    data-automationid="ListCell"
+                    data-list-index={0}
+                    role="presentation"
+                  />
+                  <div
+                    className="ms-List-cell"
+                    data-automationid="ListCell"
+                    data-list-index={1}
+                    role="presentation"
+                  />
+                  <div
+                    className="ms-List-cell"
+                    data-automationid="ListCell"
+                    data-list-index={2}
+                    role="presentation"
+                  />
+                  <div
+                    className="ms-List-cell"
+                    data-automationid="ListCell"
+                    data-list-index={3}
+                    role="presentation"
+                  />
+                  <div
+                    className="ms-List-cell"
+                    data-automationid="ListCell"
+                    data-list-index={4}
+                    role="presentation"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx
index b350a86bfbac6..276b11a3d3611 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Advanced.Example.tsx
@@ -49,11 +49,6 @@ export interface IDetailsListAdvancedExampleState {
 }
 
 export class DetailsListAdvancedExample extends React.Component<{}, IDetailsListAdvancedExampleState> {
-  public refs: {
-    [key: string]: React.ReactInstance;
-    list: DetailsList
-  };
-
   private _isFetchingItems: boolean;
   private _selection: Selection;
 
@@ -86,7 +81,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
   }
 
   public render() {
-    let {
+    const {
       checkboxVisibility,
       columns,
       constrainMode,
@@ -99,8 +94,8 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
       selectionMode
     } = this.state;
 
-    let isGrouped = groups && groups.length > 0;
-    let groupProps = {
+    const isGrouped = groups && groups.length > 0;
+    const groupProps = {
       getGroupItemLimit: (group: IGroup) => {
         if (group) {
           return group.isShowingAll ? group.count : Math.min(group.count, groupItemLimit as number);
@@ -124,7 +119,6 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
         }
 
         <DetailsList
-          ref='list'
           setKey='items'
           items={ items as any[] }
           groups={ groups }
@@ -159,7 +153,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
 
       setTimeout(() => {
         this._isFetchingItems = false;
-        let itemsCopy = ([] as any[]).concat(this.state.items);
+        const itemsCopy = ([] as any[]).concat(this.state.items);
 
         itemsCopy.splice.apply(itemsCopy, [index, PAGING_SIZE].concat(_items.slice(index, index + PAGING_SIZE)));
 
@@ -190,7 +184,8 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
 
   @autobind
   private _onToggleResizing() {
-    let { items, canResizeColumns, sortedColumnKey, isSortedDescending } = this.state;
+    const { items, sortedColumnKey, isSortedDescending } = this.state;
+    let { canResizeColumns } = this.state;
 
     canResizeColumns = !canResizeColumns;
 
@@ -233,7 +228,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
   }
 
   private _getCommandItems(): IContextualMenuItem[] {
-    let {
+    const {
       canResizeColumns,
       checkboxVisibility,
       constrainMode,
@@ -404,7 +399,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
   }
 
   private _getContextualMenuProps(ev: React.MouseEvent<HTMLElement>, column: IColumn): IContextualMenuProps {
-    let items = [
+    const items = [
       {
         key: 'aToZ',
         name: 'A to Z',
@@ -482,7 +477,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
 
   @autobind
   private _onSortColumn(key: string, isSortedDescending: boolean) {
-    let sortedItems = _items.slice(0).sort((a: any, b: any) => (isSortedDescending ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1);
+    const sortedItems = _items.slice(0).sort((a: any, b: any) => (isSortedDescending ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1);
 
     this.setState({
       items: sortedItems,
@@ -502,8 +497,8 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
 
   @autobind
   private _onGroupByColumn(column: IColumn) {
-    let { key, isGrouped } = column;
-    let { sortedColumnKey, isSortedDescending, groups, items, columns } = this.state;
+    const { key, isGrouped } = column;
+    const { sortedColumnKey, isSortedDescending, groups, items, columns } = this.state;
 
     if (isGrouped) { // ungroup
       this._onSortColumn(sortedColumnKey as string, !!isSortedDescending);
@@ -518,7 +513,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
         newGroups = this._getGroups(groupedItems, key);
       }
 
-      let newColumns = columns as IColumn[];
+      const newColumns = columns as IColumn[];
       newColumns.filter(matchColumn => matchColumn.key === key).forEach((groupedColumn: IColumn) => {
         groupedColumn.isGrouped = true;
       });
@@ -535,11 +530,11 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
     if (groups) {
       groups.forEach((group: IGroup) => {
         if (group.children && group.children.length > 0) {
-          let childGroupedItems = this._groupByKey(group.children, items, key);
+          const childGroupedItems = this._groupByKey(group.children, items, key);
           groupedItems = groupedItems.concat(childGroupedItems);
         } else {
-          let itemsInGroup = items.slice(group.startIndex, group.startIndex + group.count);
-          let nextLevelGroupedItems = this._groupItems(itemsInGroup, key);
+          const itemsInGroup = items.slice(group.startIndex, group.startIndex + group.count);
+          const nextLevelGroupedItems = this._groupItems(itemsInGroup, key);
           groupedItems = groupedItems.concat(nextLevelGroupedItems);
           group.children = this._getGroups(nextLevelGroupedItems, key, group);
         }
@@ -553,9 +548,9 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
   }
 
   private _getGroups(groupedItems: any[], key: string, parentGroup?: IGroup): IGroup[] {
-    let separator = '-';
-    let groups = groupedItems.reduce((current, item, index) => {
-      let currentGroup = current[current.length - 1];
+    const separator = '-';
+    const groups = groupedItems.reduce((current, item, index) => {
+      const currentGroup = current[current.length - 1];
 
       if (!currentGroup || (this._getLeafGroupKey(currentGroup.key, separator) !== item[key])) {
         current.push({
@@ -577,7 +572,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
   private _getLeafGroupKey(key: string, separator: string): string {
     let leafKey = key;
     if (key.indexOf(separator) !== -1) {
-      let arrKeys = key.split(separator);
+      const arrKeys = key.split(separator);
       leafKey = arrKeys[arrKeys.length - 1];
     }
     return leafKey;
@@ -605,7 +600,7 @@ export class DetailsListAdvancedExample extends React.Component<{}, IDetailsList
     isSortedDescending?: boolean,
     groupedColumnKey?: string,
     onColumnContextMenu?: (column: IColumn, ev: React.MouseEvent<HTMLElement>) => any) {
-    let columns = buildColumns(items, canResizeColumns, onColumnClick, sortedColumnKey, isSortedDescending, groupedColumnKey);
+    const columns = buildColumns(items, canResizeColumns, onColumnClick, sortedColumnKey, isSortedDescending, groupedColumnKey);
 
     columns.forEach(column => {
       column.onColumnContextMenu = onColumnContextMenu;
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx
index f121a24db1908..593a874f99882 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Basic.Example.tsx
@@ -11,9 +11,9 @@ import {
 import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
 import { autobind } from 'office-ui-fabric-react/lib/Utilities';
 
-let _items: any[] = [];
+const _items: any[] = [];
 
-let _columns: IColumn[] = [
+const _columns: IColumn[] = [
   {
     key: 'column1',
     name: 'Name',
@@ -65,7 +65,7 @@ export class DetailsListBasicExample extends React.Component<{}, {
   }
 
   public render() {
-    let { items, selectionDetails } = this.state;
+    const { items, selectionDetails } = this.state;
 
     return (
       <div>
@@ -92,7 +92,7 @@ export class DetailsListBasicExample extends React.Component<{}, {
   }
 
   private _getSelectionDetails(): string {
-    let selectionCount = this._selection.getSelectedCount();
+    const selectionCount = this._selection.getSelectedCount();
 
     switch (selectionCount) {
       case 0:
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Compact.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Compact.Example.tsx
index 26c9b2f1fe04e..b47e35d658b9a 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Compact.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Compact.Example.tsx
@@ -10,13 +10,13 @@ import {
 import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
 import { autobind } from 'office-ui-fabric-react/lib/Utilities';
 
-let _items: {
+const _items: {
   key: number,
   name: string,
   value: number
 }[] = [];
 
-let _columns = [
+const _columns = [
   {
     key: 'column1',
     name: 'Name',
@@ -66,7 +66,7 @@ export class DetailsListCompactExample extends React.Component<{}, {
   }
 
   public render() {
-    let { items, selectionDetails } = this.state;
+    const { items, selectionDetails } = this.state;
 
     return (
       <div>
@@ -92,7 +92,7 @@ export class DetailsListCompactExample extends React.Component<{}, {
   }
 
   private _getSelectionDetails(): string {
-    let selectionCount = this._selection.getSelectedCount();
+    const selectionCount = this._selection.getSelectedCount();
 
     switch (selectionCount) {
       case 0:
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomColumns.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomColumns.Example.tsx
index a798064e9bdc6..0589376a17908 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomColumns.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.CustomColumns.Example.tsx
@@ -32,7 +32,7 @@ export class DetailsListCustomColumnsExample extends React.Component<{}, IDetail
   }
 
   public render() {
-    let { sortedItems, columns } = this.state;
+    const { sortedItems, columns } = this.state;
 
     return (
       <DetailsList
@@ -49,7 +49,8 @@ export class DetailsListCustomColumnsExample extends React.Component<{}, IDetail
 
   @autobind
   private _onColumnClick(event: React.MouseEvent<HTMLElement>, column: IColumn) {
-    let { sortedItems, columns } = this.state;
+    const { columns } = this.state;
+    let { sortedItems } = this.state;
     let isSortedDescending = column.isSortedDescending;
 
     // If we've sorted this column, flip it.
@@ -59,8 +60,8 @@ export class DetailsListCustomColumnsExample extends React.Component<{}, IDetail
 
     // Sort the items.
     sortedItems = sortedItems!.concat([]).sort((a, b) => {
-      let firstValue = a[column.fieldName];
-      let secondValue = b[column.fieldName];
+      const firstValue = a[column.fieldName];
+      const secondValue = b[column.fieldName];
 
       if (isSortedDescending) {
         return firstValue > secondValue ? -1 : 1;
@@ -94,9 +95,9 @@ export class DetailsListCustomColumnsExample extends React.Component<{}, IDetail
 }
 
 function _buildColumns() {
-  let columns = buildColumns(_items);
+  const columns = buildColumns(_items);
 
-  let thumbnailColumn = columns.filter(column => column.name === 'thumbnail')[0];
+  const thumbnailColumn = columns.filter(column => column.name === 'thumbnail')[0];
 
   // Special case one column's definition.
   thumbnailColumn.name = '';
@@ -106,7 +107,7 @@ function _buildColumns() {
 }
 
 function _renderItemColumn(item: any, index: number, column: IColumn) {
-  let fieldContent = item[column.fieldName];
+  const fieldContent = item[column.fieldName];
 
   switch (column.key) {
     case 'thumbnail':
@@ -116,7 +117,7 @@ function _renderItemColumn(item: any, index: number, column: IColumn) {
       return <Link href='#'>{ fieldContent }</Link>;
 
     case 'color':
-      return <span data-selection-disabled={ true } style={ { color: fieldContent } }>{ fieldContent }</span>;
+      return <span data-selection-disabled={ true } style={ { color: fieldContent, height: '100%', display: 'block' } }>{ fieldContent }</span>;
 
     default:
       return <span>{ fieldContent }</span>;
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Documents.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Documents.Example.tsx
index 051671e1bce06..3be99fc94d1d3 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Documents.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Documents.Example.tsx
@@ -204,7 +204,7 @@ export class DetailsListDocumentsExample extends React.Component<any, IDetailsLi
   }
 
   public render() {
-    let { columns, isCompactMode, items, selectionDetails } = this.state;
+    const { columns, isCompactMode, items, selectionDetails } = this.state;
 
     return (
       <div>
@@ -297,7 +297,7 @@ export class DetailsListDocumentsExample extends React.Component<any, IDetailsLi
   }
 
   private _getSelectionDetails(): string {
-    let selectionCount = this._selection.getSelectedCount();
+    const selectionCount = this._selection.getSelectedCount();
 
     switch (selectionCount) {
       case 0:
@@ -313,8 +313,8 @@ export class DetailsListDocumentsExample extends React.Component<any, IDetailsLi
   private _onColumnClick(ev: React.MouseEvent<HTMLElement>, column: IColumn) {
     const { columns, items } = this.state;
     let newItems: IDocument[] = items.slice();
-    let newColumns: IColumn[] = columns.slice();
-    let currColumn: IColumn = newColumns.filter((currCol: IColumn, idx: number) => {
+    const newColumns: IColumn[] = columns.slice();
+    const currColumn: IColumn = newColumns.filter((currCol: IColumn, idx: number) => {
       return column.key === currCol.key;
     })[0];
     newColumns.forEach((newCol: IColumn) => {
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx
index 71ae50aadd449..7b60397e17cc5 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.DragDrop.Example.tsx
@@ -13,7 +13,7 @@ import { createListItems } from '@uifabric/example-app-base';
 import './DetailsList.DragDrop.Example.scss';
 
 let _draggedItem: any = null;
-let _draggedIndex: number = -1;
+let _draggedIndex = -1;
 
 export class DetailsListDragDropExample extends React.Component<{}, {
   items: {}[];
@@ -34,7 +34,7 @@ export class DetailsListDragDropExample extends React.Component<{}, {
   }
 
   public render() {
-    let { items, selectionDetails } = this.state;
+    const { items, selectionDetails } = this.state;
 
     return (
       <div className='detailsListDragDropExample'>
@@ -89,9 +89,9 @@ export class DetailsListDragDropExample extends React.Component<{}, {
   }
 
   private _insertBeforeItem(item: any) {
-    let draggedItems = this._selection.isIndexSelected(_draggedIndex) ? this._selection.getSelection() : [_draggedItem];
+    const draggedItems = this._selection.isIndexSelected(_draggedIndex) ? this._selection.getSelection() : [_draggedItem];
 
-    let items: any[] = this.state.items.filter((i: number) => draggedItems.indexOf(i) === -1);
+    const items: any[] = this.state.items.filter((i: number) => draggedItems.indexOf(i) === -1);
     let insertIndex = items.indexOf(item);
 
     // if dragging/dropping on itself, index will be 0.
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.scss b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.scss
new file mode 100644
index 0000000000000..45b51547ae802
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.scss
@@ -0,0 +1,18 @@
+@import '../../../common/common';
+
+:global {
+  .DetailsList-grouped-example {
+    .ms-DetailsList {
+      max-height: 500px;
+      overflow-y: scroll;
+
+      .ms-DetailsRow-cell {
+        padding: 0px;
+      }
+
+      .grouped-example-column {
+        padding: 11px 8px;
+      }
+    }
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx
index c68af796cf07e..7ecbe0e9dd3d8 100644
--- a/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DetailsList/examples/DetailsList.Grouped.Example.tsx
@@ -1,11 +1,16 @@
 /* tslint:disable:no-unused-variable */
 import * as React from 'react';
 /* tslint:enable:no-unused-variable */
+import {
+  BaseComponent,
+  autobind
+} from 'office-ui-fabric-react/lib/Utilities';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
-import { DetailsList } from 'office-ui-fabric-react/lib/DetailsList';
+import { DetailsList, IColumn } from 'office-ui-fabric-react/lib/DetailsList';
+import './DetailsList.Grouped.Example.scss';
 
-let _columns = [
+const _columns = [
   {
     key: 'name',
     name: 'Name',
@@ -22,7 +27,7 @@ let _columns = [
     maxWidth: 200
   }
 ];
-let _items = [
+const _items = [
   {
     key: 'a',
     name: 'a',
@@ -50,9 +55,11 @@ let _items = [
   }
 ];
 
-export class DetailsListGroupedExample extends React.Component<{}, {
+export class DetailsListGroupedExample extends BaseComponent<{}, {
   items: {}[];
 }> {
+  private _root: DetailsList;
+
   constructor(props: {}) {
     super(props);
 
@@ -62,15 +69,16 @@ export class DetailsListGroupedExample extends React.Component<{}, {
   }
 
   public render() {
-    let { items } = this.state;
+    const { items } = this.state;
 
     return (
-      <Fabric className='foo'>
+      <Fabric className='DetailsList-grouped-example'>
         <DefaultButton
           onClick={ this._addItem }
           text='Add an item'
         />
         <DetailsList
+          componentRef={ this._resolveRef('_root') }
           items={ items }
           groups={ [
             {
@@ -89,7 +97,7 @@ export class DetailsListGroupedExample extends React.Component<{}, {
               key: 'groupblue2',
               name: 'By "blue"',
               startIndex: 2,
-              count: 3
+              count: items.length - 2
             }
           ] }
           columns={ _columns }
@@ -98,13 +106,15 @@ export class DetailsListGroupedExample extends React.Component<{}, {
           groupProps={ {
             showEmptyGroups: true
           } }
+          onRenderItemColumn={ this._onRenderColumn }
         />
       </Fabric>
     );
   }
 
+  @autobind
   private _addItem() {
-    let items = this.state.items;
+    const items = this.state.items;
 
     this.setState({
       items: items.concat([{
@@ -112,7 +122,25 @@ export class DetailsListGroupedExample extends React.Component<{}, {
         name: 'New item ' + items.length,
         color: 'blue'
       }])
+    }, () => {
+      this._root.focusIndex(items.length, true);
     });
   }
 
+  private _onRenderColumn(item: any, index: number, column: IColumn) {
+    let value = (item && column && column.fieldName) ? item[column.fieldName] : '';
+
+    if (value === null || value === undefined) {
+      value = '';
+    }
+
+    return (
+      <div
+        className={ 'grouped-example-column' }
+        data-is-focusable={ true }
+      >
+        { value }
+      </div>
+    );
+  }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.base.tsx b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.base.tsx
new file mode 100644
index 0000000000000..54e5220ea7ddb
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.base.tsx
@@ -0,0 +1,171 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  classNamesFunction,
+  customizable,
+  getId
+} from '../../Utilities';
+import {
+  IDialogProps,
+  IDialogStyleProps,
+  IDialogStyles,
+} from './Dialog.types';
+import { DialogType, IDialogContentProps } from './DialogContent.types';
+import { Modal, IModalProps } from '../../Modal';
+import { withResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
+
+const getClassNames = classNamesFunction<IDialogStyleProps, IDialogStyles>();
+
+import { DialogContent } from './DialogContent';
+
+const DefaultModalProps: IModalProps = {
+  isDarkOverlay: false,
+  isBlocking: false,
+  className: '',
+  containerClassName: ''
+};
+
+const DefaultDialogContentProps: IDialogContentProps = {
+  type: DialogType.normal,
+  className: '',
+  topButtonsProps: [],
+};
+
+@customizable('Dialog', ['theme'])
+@withResponsiveMode
+export class DialogBase extends BaseComponent<IDialogProps, {}> {
+  public static defaultProps: IDialogProps = {
+    hidden: true,
+  };
+
+  private _id: string;
+  private _defaultTitleTextId: string;
+  private _defaultSubTextId: string;
+
+  constructor(props: IDialogProps) {
+    super(props);
+
+    this._id = getId('Dialog');
+    this._defaultTitleTextId = this._id + '-title';
+    this._defaultSubTextId = this._id + '-subText';
+
+    this._warnDeprecations({
+      'isOpen': 'hidden',
+      'type': 'dialogContentProps.type',
+      'subText': 'dialogContentProps.subText',
+      'contentClassName': 'dialogContentProps.className',
+      'topButtonsProps': 'dialogContentProps.topButtonsProps',
+      'className': 'modalProps.className',
+      'isDarkOverlay': 'modalProps.isDarkOverlay',
+      'isBlocking': 'modalProps.isBlocking',
+      'containerClassName': 'modalProps.containerClassName',
+      'onDismissed': 'modalProps.onDismissed',
+      'onLayerDidMount': 'modalProps.onLayerDidMount',
+      'ariaDescribedById': 'modalProps.subtitleAriaId',
+      'ariaLabelledById': 'modalProps.titleAriaId'
+    });
+  }
+
+  public render() {
+    const {
+      className,
+      containerClassName,
+      contentClassName,
+      elementToFocusOnDismiss,
+      firstFocusableSelector,
+      forceFocusInsideTrap,
+      getStyles,
+      hidden,
+      ignoreExternalFocusing,
+      isBlocking,
+      isClickableOutsideFocusTrap,
+      isDarkOverlay,
+      isOpen,
+      onDismiss,
+      onDismissed,
+      onLayerDidMount,
+      responsiveMode,
+      subText,
+      theme,
+      title,
+      topButtonsProps,
+      type,
+    } = this.props;
+
+    const modalProps = {
+      ...DefaultModalProps,
+      ...this.props.modalProps
+    };
+
+    const dialogContentProps: IDialogContentProps = {
+      ...DefaultDialogContentProps,
+      ...this.props.dialogContentProps,
+    };
+
+    const classNames = getClassNames(getStyles!, {
+      theme: theme!,
+      className: className || modalProps!.className,
+      containerClassName: containerClassName || modalProps!.containerClassName,
+      hidden,
+    });
+
+    return (
+      <Modal
+        elementToFocusOnDismiss={ elementToFocusOnDismiss }
+        firstFocusableSelector={ firstFocusableSelector }
+        forceFocusInsideTrap={ forceFocusInsideTrap }
+        ignoreExternalFocusing={ ignoreExternalFocusing }
+        isClickableOutsideFocusTrap={ isClickableOutsideFocusTrap }
+        onDismissed={ onDismissed }
+        onLayerDidMount={ onLayerDidMount }
+        responsiveMode={ responsiveMode }
+        { ...modalProps }
+        isDarkOverlay={ isDarkOverlay !== undefined ? isDarkOverlay : modalProps!.isDarkOverlay }
+        isBlocking={ isBlocking !== undefined ? isBlocking : modalProps!.isBlocking }
+        isOpen={ isOpen !== undefined ? isOpen : !hidden }
+        className={ classNames.root }
+        containerClassName={ classNames.main }
+        onDismiss={ onDismiss ? onDismiss : modalProps!.onDismiss }
+        subtitleAriaId={ this._getSubTextId() }
+        titleAriaId={ this._getTitleTextId() }
+      >
+        <DialogContent
+          titleId={ this._defaultTitleTextId }
+          subTextId={ this._defaultSubTextId }
+          title={ title }
+          subText={ subText }
+          showCloseButton={ isBlocking !== undefined ? !isBlocking : !modalProps!.isBlocking }
+          topButtonsProps={ topButtonsProps ? topButtonsProps : dialogContentProps!.topButtonsProps }
+          type={ type !== undefined ? type : dialogContentProps!.type }
+          onDismiss={ onDismiss ? onDismiss : dialogContentProps!.onDismiss }
+          className={ contentClassName || dialogContentProps!.className }
+          { ...dialogContentProps }
+        >
+          { this.props.children }
+        </DialogContent>
+      </Modal>
+    );
+  }
+
+  private _getSubTextId = (): string | undefined => {
+    const { ariaDescribedById, modalProps, dialogContentProps, subText } = this.props;
+    let id = ariaDescribedById || (modalProps && modalProps.subtitleAriaId);
+
+    if (!id) {
+      id = (subText || (dialogContentProps && dialogContentProps.subText)) && this._defaultSubTextId;
+    }
+
+    return id;
+  }
+
+  private _getTitleTextId = (): string | undefined => {
+    const { ariaLabelledById, modalProps, dialogContentProps, title } = this.props;
+    let id = ariaLabelledById || (modalProps && modalProps.titleAriaId);
+
+    if (!id) {
+      id = (title || (dialogContentProps && dialogContentProps.title)) && this._defaultTitleTextId;
+    }
+
+    return id;
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.scss b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.scss
deleted file mode 100644
index aaebc582a2d50..0000000000000
--- a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.scss
+++ /dev/null
@@ -1,150 +0,0 @@
-@import '../../common/common';
-
-// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
-
-//
-// Office UI Fabric
-// --------------------------------------------------
-// Dialog styles
-
-$Dialog-lgHeader-backgroundColor: $ms-color-themePrimary;
-$Dialog-default-min-width: 288px;
-$Dialog-default-max-width: 340px;
-
-// State: The dialog is open
-.isOpen {
-  display: flex;
-}
-
-// The actual dialog element
-.main {
-  width: $Dialog-default-min-width;
-}
-
-// Close button, hidden by default
-.button.isClose {
-  :global(.ms-Icon.ms-Icon--Cancel) {
-    color: $ms-color-neutralSecondary;
-    font-size: 16px;
-  }
-}
-
-.inner {
-  padding: 0 28px 20px;
-}
-
-.header {
-  position: relative;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-.title {
-  margin: 0;
-  @include ms-font-xl;
-  color: $ms-color-neutralPrimary;
-  @include ms-padding(20px, 36px, 20px, 28px);
-}
-
-.topButton {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  position: absolute;
-  top: 0;
-  @include ms-right(0);
-  @include ms-padding(12px, 12px, 0, 0);
-  > * {
-    flex: 0 0 auto;
-  }
-}
-
-.content {
-  position: relative;
-  width: 100%;
-
-  // Add margin bottom between compound buttons
-  :global(.ms-Button.ms-Button--compound) {
-    margin-bottom: 20px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-}
-
-.subText {
-  margin: 0 0 20px 0;
-  padding-top: 8px;
-  @include ms-font-s;
-  color: $ms-color-neutralPrimary;
-  font-weight: $ms-font-weight-semilight;
-  line-height: 1.5;
-  word-wrap: break-word;
-}
-
-.actions {
-  position: relative;
-  width: 100%;
-  min-height:  24px;
-  line-height: 24px;
-  margin: 20px 0 0;
-  font-size: 0;
-
-  :global(.ms-Button) {
-    line-height: normal;
-  }
-}
-
-// Negative margin to needed to compensate for symmetric
-// padding between action elements.
-.actionsRight {
-  @include ms-text-align(right);
-  @include ms-margin-right(-4px);
-  font-size: 0;
-
-  // Reset spacing for first button
-  .action {
-    margin: 0px 4px;
-  }
-}
-
-//= Modifier: Multiline button dialog
-//
-.isMultiline {
-  .title {
-    font-size: $ms-font-size-xxl;
-  }
-
-  .inner {
-    padding: 0 20px 20px;
-  }
-}
-
-//= Modifier: Large header dialog
-//
-.isLargeHeader {
-  .header {
-    background-color: $Dialog-lgHeader-backgroundColor;
-  }
-
-  .title {
-    @include ms-font-xxl;
-    color: $ms-color-white;
-    padding: 26px 28px 28px;
-    margin-bottom: 8px;
-  }
-
-  .subText {
-    font-size: $ms-font-size-m;
-  }
-}
-
-@media (min-width: $ms-screen-min-md) {
-  // Allow wider dialog on larger screens
-  .main {
-    width: auto;
-    min-width: $Dialog-default-min-width;
-    max-width: $Dialog-default-max-width;
-  }
-}
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.styles.ts b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.styles.ts
new file mode 100644
index 0000000000000..990aa517aace8
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.styles.ts
@@ -0,0 +1,39 @@
+import { IDialogStyleProps, IDialogStyles } from './Dialog.types';
+import {
+  ScreenWidthMinMedium,
+} from '../../Styling';
+
+export const getStyles = (
+  props: IDialogStyleProps
+): IDialogStyles => {
+  const {
+    className,
+    containerClassName,
+    dialogDefaultMinWidth = '288px',
+    dialogDefaultMaxWidth = '340px',
+    hidden,
+  } = props;
+
+  return ({
+    root: [
+      'ms-Dialog',
+      className,
+    ],
+
+    main: [
+      {
+        width: dialogDefaultMinWidth,
+
+        selectors: {
+          [`@media (min-width: ${ScreenWidthMinMedium}px)`]: {
+            width: 'auto',
+            maxWidth: dialogDefaultMaxWidth,
+            minWidth: dialogDefaultMinWidth,
+          }
+        }
+      },
+      !hidden && { display: 'flex' },
+      containerClassName,
+    ]
+  });
+};
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.test.tsx b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.test.tsx
index 03ba9f6bdd4c0..21b58689ced00 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.test.tsx
@@ -5,7 +5,7 @@ import * as renderer from 'react-test-renderer';
 
 import { mount } from 'enzyme';
 
-import { Dialog } from './Dialog';
+import { DialogBase } from './Dialog.base';
 import { DialogContent } from './DialogContent';
 import { DialogType } from './DialogContent.types';
 
@@ -14,7 +14,7 @@ import { DialogType } from './DialogContent.types';
 describe('Dialog', () => {
   it('renders Dialog correctly', () => {
     const component = renderer.create(<DialogContent />);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
@@ -26,7 +26,7 @@ describe('Dialog', () => {
     };
 
     const wrapper = mount(
-      <Dialog
+      <DialogBase
         hidden={ false }
         modalProps={ { onDismissed: handleDismissed } }
       />
@@ -51,7 +51,7 @@ describe('Dialog', () => {
 
   it('Properly attaches auto-generated aria attributes IDs', () => {
     const wrapper = mount(
-      <Dialog
+      <DialogBase
         hidden={ false }
         modalProps={ { onDismissed: () => {/* no-op */ } } }
         dialogContentProps={ {
@@ -72,7 +72,7 @@ describe('Dialog', () => {
   it('Properly attaches IDs when aria-describedby is passed', () => {
     const subTextAriaId = 'subtextariaid';
     const wrapper = mount(
-      <Dialog
+      <DialogBase
         hidden={ false }
         modalProps={ {
           onDismissed: () => {/* no-op */ },
@@ -96,7 +96,7 @@ describe('Dialog', () => {
   it('Properly attaches IDs when aria-labelledby is passed', () => {
     const titleAriaId = 'titleariaid';
     const wrapper = mount(
-      <Dialog
+      <DialogBase
         hidden={ false }
         modalProps={ {
           onDismissed: () => {/* no-op */ },
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.tsx b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.tsx
index 3e5f14f800c77..ca3b141d644ba 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.tsx
@@ -1,146 +1,13 @@
-import * as React from 'react';
+import { styled } from '../../Utilities';
 import {
-  BaseComponent,
-  css,
-  getId
-} from '../../Utilities';
-import { IDialogProps } from './Dialog.types';
-import { DialogType } from './DialogContent.types';
-import { Modal } from '../../Modal';
-import { withResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
-import * as stylesImport from './Dialog.scss';
-const styles: any = stylesImport;
-
-import { DialogContent } from './DialogContent';
-
-@withResponsiveMode
-export class Dialog extends BaseComponent<IDialogProps, {}> {
-  public static defaultProps: IDialogProps = {
-    modalProps: {
-      isDarkOverlay: true,
-      isBlocking: false,
-      className: '',
-      containerClassName: ''
-    },
-    dialogContentProps: {
-      type: DialogType.normal,
-      className: '',
-      topButtonsProps: [],
-    },
-    hidden: true,
-  };
-
-  private _id: string;
-  private _defaultTitleTextId: string;
-  private _defaultSubTextId: string;
-
-  constructor(props: IDialogProps) {
-    super(props);
-
-    this._id = getId('Dialog');
-    this._defaultTitleTextId = this._id + '-title';
-    this._defaultSubTextId = this._id + '-subText';
-
-    this._warnDeprecations({
-      'isOpen': 'hidden',
-      'type': 'dialogContentProps.type',
-      'subText': 'dialogContentProps.subText',
-      'contentClassName': 'dialogContentProps.className',
-      'topButtonsProps': 'dialogContentProps.topButtonsProps',
-      'className': 'modalProps.className',
-      'isDarkOverlay': 'modalProps.isDarkOverlay',
-      'isBlocking': 'modalProps.isBlocking',
-      'containerClassName': 'modalProps.containerClassName',
-      'onDismissed': 'modalProps.onDismissed',
-      'onLayerDidMount': 'modalProps.onLayerDidMount',
-      'ariaDescribedById': 'modalProps.subtitleAriaId',
-      'ariaLabelledById': 'modalProps.titleAriaId'
-    });
-  }
-
-  public render() {
-    let {
-      elementToFocusOnDismiss,
-      firstFocusableSelector,
-      forceFocusInsideTrap,
-      ignoreExternalFocusing,
-      isBlocking,
-      isClickableOutsideFocusTrap,
-      isDarkOverlay,
-      isOpen,
-      className,
-      onDismiss,
-      onDismissed,
-      onLayerDidMount,
-      responsiveMode,
-      subText,
-      title,
-      type,
-      contentClassName,
-      topButtonsProps,
-      dialogContentProps,
-      modalProps,
-      containerClassName,
-      hidden
-    } = this.props;
-
-    return (
-      <Modal
-        elementToFocusOnDismiss={ elementToFocusOnDismiss }
-        firstFocusableSelector={ firstFocusableSelector }
-        forceFocusInsideTrap={ forceFocusInsideTrap }
-        ignoreExternalFocusing={ ignoreExternalFocusing }
-        isClickableOutsideFocusTrap={ isClickableOutsideFocusTrap }
-        onDismissed={ onDismissed }
-        onLayerDidMount={ onLayerDidMount }
-        responsiveMode={ responsiveMode }
-        { ...modalProps }
-        isDarkOverlay={ isDarkOverlay !== undefined ? isDarkOverlay : modalProps!.isDarkOverlay }
-        isBlocking={ isBlocking !== undefined ? isBlocking : modalProps!.isBlocking }
-        isOpen={ isOpen !== undefined ? isOpen : !hidden }
-        className={ css('ms-Dialog', className ? className : modalProps!.className) }
-        containerClassName={ css(styles.main, containerClassName ? containerClassName : modalProps!.containerClassName) }
-        onDismiss={ onDismiss ? onDismiss : modalProps!.onDismiss }
-        subtitleAriaId={ this._getSubTextId() }
-        titleAriaId={ this._getTitleTextId() }
-      >
-        <DialogContent
-          titleId={ this._defaultTitleTextId }
-          subTextId={ this._defaultSubTextId }
-          title={ title }
-          subText={ subText }
-          showCloseButton={ isBlocking !== undefined ? !isBlocking : !modalProps!.isBlocking }
-          topButtonsProps={ topButtonsProps ? topButtonsProps : dialogContentProps!.topButtonsProps }
-          type={ type !== undefined ? type : dialogContentProps!.type }
-          onDismiss={ onDismiss ? onDismiss : dialogContentProps!.onDismiss }
-          className={ css(contentClassName ? contentClassName : dialogContentProps!.className) }
-          { ...dialogContentProps }
-        >
-          { this.props.children }
-        </DialogContent>
-      </Modal>
-    );
-  }
-
-  private _getSubTextId = (): string | undefined => {
-    let { ariaDescribedById, modalProps, dialogContentProps, subText } = this.props;
-    let id = ariaDescribedById || (modalProps && modalProps.subtitleAriaId);
-
-    if (!id) {
-      id = (subText || (dialogContentProps && dialogContentProps.subText)) && this._defaultSubTextId;
-    }
-
-    return id;
-  }
-
-  private _getTitleTextId = (): string | undefined => {
-    let { ariaLabelledById, modalProps, dialogContentProps, title } = this.props;
-    let id = ariaLabelledById || (modalProps && modalProps.titleAriaId);
-
-    if (!id) {
-      id = (title || (dialogContentProps && dialogContentProps.title)) && this._defaultTitleTextId;
-    }
-
-    return id;
-  }
-}
+  IDialogProps,
+  IDialogStyleProps,
+  IDialogStyles
+} from './Dialog.types';
+import { DialogBase } from './Dialog.base';
+import { getStyles } from './Dialog.styles';
+
+export const Dialog = styled<IDialogProps, IDialogStyleProps, IDialogStyles>(
+  DialogBase,
+  getStyles
+);
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.types.ts b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.types.ts
index 951d35f5537ee..2803f1d35407f 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/Dialog.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Dialog/Dialog.types.ts
@@ -1,16 +1,18 @@
 import * as React from 'react';
 import { IModalProps } from '../../Modal';
-import { Dialog } from './Dialog';
+import { DialogBase } from './Dialog.base';
 import { DialogType, IDialogContentProps } from './DialogContent.types';
 import { IButtonProps } from '../Button/Button.types';
 import { IWithResponsiveModeState } from '../../utilities/decorators/withResponsiveMode';
 import { IAccessiblePopupProps } from '../../common/IAccessiblePopupProps';
+import { IStyle, ITheme } from '../../Styling';
+import { IStyleFunction } from '../../Utilities';
 
 export interface IDialog {
 
 }
 
-export interface IDialogProps extends React.Props<Dialog>, IWithResponsiveModeState, IAccessiblePopupProps {
+export interface IDialogProps extends React.Props<DialogBase>, IWithResponsiveModeState, IAccessiblePopupProps {
 
   /**
    * Optional callback to access the IDialog interface. Use this instead of ref for accessing
@@ -18,6 +20,16 @@ export interface IDialogProps extends React.Props<Dialog>, IWithResponsiveModeSt
    */
   componentRef?: (component: IDialog) => void;
 
+  /**
+   * Call to provide customized styling that will layer on top of the variant rules
+   */
+  getStyles?: IStyleFunction<IDialogStyleProps, IDialogStyles>;
+
+  /**
+   * Theme provided by HOC.
+   */
+  theme?: ITheme;
+
   /**
   * Props to be passed through to Dialog Content
   */
@@ -132,5 +144,54 @@ export interface IDialogProps extends React.Props<Dialog>, IWithResponsiveModeSt
   * @deprecated Pass through via modalProps.subtitleAriaId instead
   */
   ariaDescribedById?: string;
+}
 
+export interface IDialogStyleProps {
+  /**
+   * Accept theme prop.
+   */
+  theme: ITheme;
+
+  /**
+   * Accept custom classNames
+   */
+  className?: string;
+
+  /**
+  * Optional override for container class
+  * @deprecated Pass through via modalProps.className instead
+  */
+  containerClassName?: string;
+
+  /**
+  * Optional override content class
+  * @deprecated Pass through via dialogContentProps instead as className
+  */
+  contentClassName?: string;
+
+  /**
+  * Whether the dialog is hidden.
+  * @default false
+  */
+  hidden?: boolean;
+
+  /**
+   * Default min-width for the dialog box.
+   * @defaultvalue '288px'
+   */
+  dialogDefaultMinWidth?: string;
+
+  /**
+   * Default max-width for the dialog box.
+   * @defaultvalue '340px'
+   */
+  dialogDefaultMaxWidth?: string;
+}
+
+export interface IDialogStyles {
+  /**
+   * Style for the root element.
+   */
+  root: IStyle;
+  main: IStyle;
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.base.tsx b/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.base.tsx
new file mode 100644
index 0000000000000..a956ee6dec949
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.base.tsx
@@ -0,0 +1,111 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  classNamesFunction,
+  customizable,
+} from '../../Utilities';
+import {
+  DialogType,
+  IDialogContentProps,
+  IDialogContentStyleProps,
+  IDialogContentStyles,
+} from './DialogContent.types';
+import { IconButton } from '../../Button';
+import { DialogFooter } from './DialogFooter';
+import { withResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
+
+const getClassNames = classNamesFunction<IDialogContentStyleProps, IDialogContentStyles>();
+
+@customizable('DialogContent', ['theme'])
+@withResponsiveMode
+export class DialogContentBase extends BaseComponent<IDialogContentProps, {}> {
+
+  public static defaultProps: IDialogContentProps = {
+    showCloseButton: false,
+    className: '',
+    topButtonsProps: [],
+    closeButtonAriaLabel: 'Close'
+  };
+
+  constructor(props: IDialogContentProps) {
+    super(props);
+  }
+
+  public render() {
+    const {
+      showCloseButton,
+      className,
+      closeButtonAriaLabel,
+      onDismiss,
+      subTextId,
+      subText,
+      titleId,
+      title,
+      type,
+      getStyles,
+      theme,
+    } = this.props;
+
+    const classNames = getClassNames(getStyles!, {
+      theme: theme!,
+      className,
+      isLargeHeader: type === DialogType.largeHeader,
+      isClose: type === DialogType.close,
+    });
+
+    const groupings = this._groupChildren();
+    let subTextContent;
+    if (subText) {
+      subTextContent = <p className={ classNames.subText } id={ subTextId }>{ subText }</p>;
+    }
+
+    return (
+      <div className={ classNames.content }>
+        <div className={ classNames.header }>
+          <p className={ classNames.title } id={ titleId } role='heading'>{ title }</p>
+          <div className={ classNames.topButton }>
+            { this.props.topButtonsProps!.map((props) => (
+              <IconButton { ...props } />
+            )) }
+            { (type === DialogType.close || (showCloseButton && type !== DialogType.largeHeader)) &&
+              <IconButton
+                className={ classNames.button }
+                iconProps={ { iconName: 'Cancel' } }
+                ariaLabel={ closeButtonAriaLabel }
+                onClick={ onDismiss as any }
+              />
+            }
+          </div>
+        </div>
+        <div className={ classNames.inner }>
+          <div className={ classNames.innerContent }>
+            { subTextContent }
+            { groupings.contents }
+          </div>
+          { groupings.footers }
+        </div>
+      </div>
+    );
+  }
+
+  // @TODO - typing the footers as an array of DialogFooter is difficult because
+  // casing "child as DialogFooter" causes a problem because
+  // "Neither type 'ReactElement<any>' nor type 'DialogFooter' is assignable to the other."
+  private _groupChildren(): { footers: any[]; contents: any[]; } {
+
+    const groupings: { footers: any[]; contents: any[]; } = {
+      footers: [],
+      contents: []
+    };
+
+    React.Children.map(this.props.children, child => {
+      if (typeof child === 'object' && child !== null && child.type === DialogFooter) {
+        groupings.footers.push(child);
+      } else {
+        groupings.contents.push(child);
+      }
+    });
+
+    return groupings;
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.styles.ts b/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.styles.ts
new file mode 100644
index 0000000000000..c010c92d73c57
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.styles.ts
@@ -0,0 +1,137 @@
+import {
+  IDialogContentStyleProps,
+  IDialogContentStyles,
+} from './DialogContent.types';
+import {
+  FontWeights,
+} from '../../Styling';
+
+export const getStyles = (
+  props: IDialogContentStyleProps
+): IDialogContentStyles => {
+  const {
+    className,
+    theme,
+    isLargeHeader,
+    isClose,
+    hidden,
+    isMultiline,
+  } = props;
+
+  const { palette, fonts } = theme;
+
+  return ({
+    content: [
+      isLargeHeader && 'ms-Dialog-lgHeader',
+      isClose && 'ms-Dialog--close',
+      className
+    ],
+
+    subText: [
+      'ms-Dialog-subText',
+      isLargeHeader ? fonts.medium : fonts.small,
+      {
+        margin: '0 0 20px 0',
+        paddingTop: '8px',
+        color: palette.neutralPrimary,
+        lineHeight: '1.5',
+        wordWrap: 'break-word',
+        fontWeight: FontWeights.semilight,
+      },
+    ],
+
+    header: [
+      'ms-Dialog-header',
+      {
+        position: 'relative',
+        width: '100%',
+        boxSizing: 'border-box',
+      },
+      isLargeHeader && [
+        'ms-Dialog--lgHeader',
+        {
+          backgroundColor: palette.themePrimary,
+        }
+      ],
+      isClose && 'ms-Dialog--close',
+    ],
+
+    button: [
+      'ms-Dialog-button',
+      'ms-Dialog-button--close',
+      hidden && {
+        selectors: {
+          '.ms-Icon.ms-Icon--Cancel': {
+            color: palette.neutralSecondary,
+            fontSize: '16px',
+          }
+        }
+      }
+    ],
+
+    inner: [
+      'ms-Dialog-inner',
+      {
+        padding: isMultiline ? '0 20px 20px' : '0 28px 20px',
+      }
+    ],
+
+    innerContent: [
+      'ms-Dialog-content',
+      {
+        position: 'relative',
+        width: '100%',
+
+        selectors: {
+          '.ms-Button.ms-Button--compount': {
+            marginBottom: '20px',
+
+            selectors: {
+              '&:last-child': {
+                marginBottom: '0',
+              }
+            }
+          }
+        }
+      },
+      className
+    ],
+
+    title: [
+      'ms-Dialog-title',
+      {
+        color: palette.neutralPrimary,
+        margin: '0',
+        padding: '20px 36px 20px 28px',
+      },
+      fonts.xLarge,
+      isLargeHeader && [
+        {
+          color: palette.white,
+          marginBottom: '8px',
+          padding: '26px 28px 28px',
+        },
+        fonts.xxLarge
+      ],
+      isMultiline && fonts.xxLarge,
+    ],
+
+    topButton: [
+      {
+        display: 'flex',
+        flexDirection: 'row',
+        flexWrap: 'nowrap',
+        position: 'absolute',
+        top: '0',
+        right: '0',
+        padding: '12px 12px 0 0',
+
+        selectors: {
+          '> *': {
+            flex: '0 0 auto',
+          }
+        }
+      }
+    ],
+  });
+};
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.tsx b/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.tsx
index 321c696b7f7f4..69ce32c19d5cf 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.tsx
@@ -1,102 +1,13 @@
-import * as React from 'react';
+import { styled } from '../../Utilities';
 import {
-  BaseComponent,
-  css,
-} from '../../Utilities';
-import { IDialogContentProps, DialogType } from './DialogContent.types';
-import { IconButton } from '../../Button';
-import { DialogFooter } from './DialogFooter';
-import { withResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
-import * as stylesImport from './Dialog.scss';
-const styles: any = stylesImport;
-
-@withResponsiveMode
-export class DialogContent extends BaseComponent<IDialogContentProps, {}> {
-
-  public static defaultProps: IDialogContentProps = {
-    showCloseButton: false,
-    className: '',
-    topButtonsProps: [],
-    closeButtonAriaLabel: 'Close'
-  };
-
-  constructor(props: IDialogContentProps) {
-    super(props);
-  }
-
-  public render() {
-    let {
-      showCloseButton,
-      closeButtonAriaLabel,
-      onDismiss,
-      subTextId,
-      subText,
-      titleId,
-      title,
-      type
-    } = this.props;
-
-    let groupings = this._groupChildren();
-    let subTextContent;
-    if (subText) {
-      subTextContent = <p className={ css('ms-Dialog-subText', styles.subText) } id={ subTextId }>{ subText }</p>;
-    }
-
-    const contentClassName = css(this.props.className, {
-      ['ms-Dialog--lgHeader ' + styles.isLargeHeader]: type === DialogType.largeHeader,
-      ['ms-Dialog--close ' + styles.isClose]: type === DialogType.close,
-    });
-
-    return (
-      <div className={ css(contentClassName) }>
-        <div className={ css('ms-Dialog-header', styles.header) }>
-          <p className={ css('ms-Dialog-title', styles.title) } id={ titleId } role='heading'>{ title }</p>
-          <div className={ css('ms-Dialog-topButton', styles.topButton) }>
-            { this.props.topButtonsProps!.map((props) => (
-              <IconButton {...props} />
-            )) }
-            { (type === DialogType.close || (showCloseButton && type !== DialogType.largeHeader)) &&
-              <IconButton
-                className={ css(
-                  'ms-Dialog-button ms-Dialog-button--close',
-                  styles.button
-                ) }
-                iconProps={ { iconName: 'Cancel' } }
-                ariaLabel={ closeButtonAriaLabel }
-                onClick={ onDismiss as any }
-              />
-            }
-          </div>
-        </div>
-        <div className={ css('ms-Dialog-inner', styles.inner) }>
-          <div className={ css('ms-Dialog-content', styles.content, this.props.className) }>
-            { subTextContent }
-            { groupings.contents }
-          </div>
-          { groupings.footers }
-        </div>
-      </div>
-    );
-  }
-
-  // @TODO - typing the footers as an array of DialogFooter is difficult because
-  // casing "child as DialogFooter" causes a problem because
-  // "Neither type 'ReactElement<any>' nor type 'DialogFooter' is assignable to the other."
-  private _groupChildren(): { footers: any[]; contents: any[]; } {
-
-    let groupings: { footers: any[]; contents: any[]; } = {
-      footers: [],
-      contents: []
-    };
-
-    React.Children.map(this.props.children, child => {
-      if (typeof child === 'object' && child !== null && child.type === DialogFooter) {
-        groupings.footers.push(child);
-      } else {
-        groupings.contents.push(child);
-      }
-    });
-
-    return groupings;
-  }
-}
+  IDialogContentProps,
+  IDialogContentStyleProps,
+  IDialogContentStyles
+} from './DialogContent.types';
+import { DialogContentBase } from './DialogContent.base';
+import { getStyles } from './DialogContent.styles';
+
+export const DialogContent = styled<IDialogContentProps, IDialogContentStyleProps, IDialogContentStyles>(
+  DialogContentBase,
+  getStyles
+);
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.types.ts b/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.types.ts
index c0e4799f7ede9..9aba2f5ced9a8 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Dialog/DialogContent.types.ts
@@ -1,19 +1,36 @@
 import * as React from 'react';
-import { DialogContent } from './DialogContent';
+import { DialogContentBase } from './DialogContent.base';
 import { IButtonProps } from '../Button/Button.types';
 import { ResponsiveMode } from '../../utilities/decorators/withResponsiveMode';
+import { IStyle, ITheme } from '../../Styling';
+import { IStyleFunction } from '../../Utilities';
 
 export interface IDialogContent {
 
 }
 
-export interface IDialogContentProps extends React.Props<DialogContent> {
+export interface IDialogContentProps extends React.Props<DialogContentBase> {
   /**
   * Optional callback to access the IDialogContent interface. Use this instead of ref for accessing
   * the public methods and properties of the component.
   */
   componentRef?: (component: IDialogContent) => void;
 
+  /**
+   * Call to provide customized styling that will layer on top of the variant rules
+   */
+  getStyles?: IStyleFunction<IDialogContentStyleProps, IDialogContentStyles>;
+
+  /**
+   * Theme provided by HOC.
+   */
+  theme?: ITheme;
+
+  /**
+   * Is inside a multiline wrapper
+   */
+  isMultiline?: boolean;
+
   /**
   * Show an 'x' close button in the upper-right corner
   */
@@ -80,3 +97,38 @@ export enum DialogType {
   /** Dialog with an 'x' close button in the upper-right corner */
   close = 2
 }
+
+export interface IDialogContentStyleProps {
+  /**
+   * Accept theme prop.
+   */
+  theme: ITheme;
+
+  /**
+   * Accept custom classNames
+   */
+  className?: string;
+
+  isLargeHeader?: boolean;
+  isClose?: boolean;
+  hidden?: boolean;
+
+  /**
+   * Is inside a multiline wrapper
+   */
+  isMultiline?: boolean;
+}
+
+export interface IDialogContentStyles {
+  /**
+   * Style for the content element.
+   */
+  content: IStyle;
+  subText: IStyle;
+  header: IStyle;
+  button: IStyle;
+  inner: IStyle;
+  innerContent: IStyle;
+  title: IStyle;
+  topButton: IStyle;
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.base.tsx b/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.base.tsx
new file mode 100644
index 0000000000000..ca9db4ff5bafa
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.base.tsx
@@ -0,0 +1,46 @@
+import * as React from 'react';
+import {
+  IDialogFooterProps,
+  IDialogFooterStyleProps,
+  IDialogFooterStyles,
+} from './DialogFooter.types';
+import {
+  BaseComponent,
+  classNamesFunction,
+  customizable,
+  IClassNames
+} from '../../Utilities';
+
+const getClassNames = classNamesFunction<IDialogFooterStyleProps, IDialogFooterStyles>();
+
+@customizable('DialogFooter', ['theme'])
+export class DialogFooterBase extends BaseComponent<IDialogFooterProps, {}> {
+  private _classNames: IClassNames<IDialogFooterStyles>;
+
+  public render() {
+    const {
+      className,
+      getStyles,
+      theme
+    } = this.props;
+
+    this._classNames = getClassNames(getStyles!, {
+      theme: theme!,
+      className
+    });
+
+    return (
+      <div className={ this._classNames.actions }>
+        <div className={ this._classNames.actionsRight }>
+          { this._renderChildrenAsActions() }
+        </div>
+      </div>
+    );
+  }
+
+  private _renderChildrenAsActions() {
+    return React.Children.map(this.props.children, child =>
+      child && <span className={ this._classNames.action }>{ child }</span>
+    );
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.styles.ts b/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.styles.ts
new file mode 100644
index 0000000000000..f8277cd04c6ba
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.styles.ts
@@ -0,0 +1,49 @@
+import { IDialogFooterStyleProps, IDialogFooterStyles } from './DialogFooter.types';
+
+export const getStyles = (
+  props: IDialogFooterStyleProps
+): IDialogFooterStyles => {
+  const {
+    className,
+  } = props;
+
+  return ({
+    actions: [
+      'ms-Dialog-actions',
+      {
+        position: 'relative',
+        width: '100%',
+        minHeight: '24px',
+        lineHeight: '24px',
+        margin: '20px 0 0',
+        fontSize: '0',
+
+        selectors: {
+          '.ms-Button': {
+            lineHeight: 'normal',
+          }
+        }
+      },
+      className
+    ],
+
+    action: [
+      'ms-Dialog-action',
+    ],
+
+    actionsRight: [
+      'ms-Dialog-actionsRight',
+      {
+        textAlign: 'right',
+        marginRight: '-4px',
+        fontSize: '0',
+
+        selectors: {
+          '$action': {
+            margin: '0 4px',
+          }
+        }
+      }
+    ]
+  });
+};
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.tsx b/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.tsx
index ea5498de8b0a6..04d46577f184c 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.tsx
@@ -1,22 +1,13 @@
-import * as React from 'react';
-import { BaseComponent, css } from '../../Utilities';
-import * as stylesImport from './Dialog.scss';
-const styles: any = stylesImport;
+import { styled } from '../../Utilities';
+import {
+  IDialogFooterProps,
+  IDialogFooterStyleProps,
+  IDialogFooterStyles
+} from './DialogFooter.types';
+import { DialogFooterBase } from './DialogFooter.base';
+import { getStyles } from './DialogFooter.styles';
 
-export class DialogFooter extends BaseComponent<any, any> {
-  public render() {
-    return (
-      <div className={ css('ms-Dialog-actions', styles.actions) }>
-        <div className={ css('ms-Dialog-actionsRight', styles.actionsRight) }>
-          { this._renderChildrenAsActions() }
-        </div>
-      </div>
-    );
-  }
-
-  private _renderChildrenAsActions() {
-    return React.Children.map(this.props.children, child =>
-      child && <span className={ css('ms-Dialog-action', styles.action) }>{ child }</span>
-    );
-  }
-}
+export const DialogFooter = styled<IDialogFooterProps, IDialogFooterStyleProps, IDialogFooterStyles>(
+  DialogFooterBase,
+  getStyles
+);
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.types.ts b/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.types.ts
new file mode 100644
index 0000000000000..47fa490d10f58
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.types.ts
@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { DialogFooterBase } from './DialogFooter.base';
+import { IStyle, ITheme } from '../../Styling';
+import { IStyleFunction } from '../../Utilities';
+
+export interface IDialogFooterProps extends React.Props<DialogFooterBase> {
+  /**
+   * Gets the component ref.
+   */
+  componentRef?: (component: IDialogFooterProps) => void;
+
+  /**
+   * Call to provide customized styling that will layer on top of the variant rules
+   */
+  getStyles?: IStyleFunction<IDialogFooterStyleProps, IDialogFooterStyles>;
+
+  /**
+   * Theme provided by HOC.
+   */
+  theme?: ITheme;
+
+  /**
+  * Optional override class name
+  */
+  className?: string;
+}
+
+export interface IDialogFooterStyleProps {
+  /**
+   * Accept theme prop.
+   */
+  theme: ITheme;
+
+  /**
+  * Optional override class name
+  */
+  className?: string;
+}
+
+export interface IDialogFooterStyles {
+  /**
+   * Style for the actions element.
+   */
+  actions: IStyle;
+
+  actionsRight: IStyle;
+  action: IStyle;
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
index fdd5a77567304..5735242152970 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Dialog/__snapshots__/Dialog.test.tsx.snap
@@ -2,25 +2,84 @@
 
 exports[`Dialog renders Dialog correctly 1`] = `
 <div
-  className=""
+  className=
+
+
 >
   <div
-    className="ms-Dialog-header"
+    className=
+        ms-Dialog-header
+        {
+          box-sizing: border-box;
+          position: relative;
+          width: 100%;
+        }
   >
     <p
-      className="ms-Dialog-title"
+      className=
+          ms-Dialog-title
+          {
+            -moz-osx-font-smoothing: grayscale;
+            -webkit-font-smoothing: antialiased;
+            color: #333333;
+            font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+            font-size: 21px;
+            font-weight: 100;
+            margin-bottom: 0;
+            margin-left: 0;
+            margin-right: 0;
+            margin-top: 0;
+            padding-bottom: 20px;
+            padding-left: 28px;
+            padding-right: 36px;
+            padding-top: 20px;
+          }
       id={undefined}
       role="heading"
     />
     <div
-      className="ms-Dialog-topButton"
+      className=
+
+          {
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            padding-bottom: 0;
+            padding-left: 0;
+            padding-right: 12px;
+            padding-top: 12px;
+            position: absolute;
+            right: 0;
+            top: 0;
+          }
+          & > * {
+            flex: 0 0 auto;
+          }
     />
   </div>
   <div
-    className="ms-Dialog-inner"
+    className=
+        ms-Dialog-inner
+        {
+          padding-bottom: 20px;
+          padding-left: 28px;
+          padding-right: 28px;
+          padding-top: 0;
+        }
   >
     <div
-      className="ms-Dialog-content"
+      className=
+          ms-Dialog-content
+          {
+            position: relative;
+            width: 100%;
+          }
+          & .ms-Button.ms-Button--compount {
+            margin-bottom: 20px;
+          }
+          &:last-child {
+            margin-bottom: 0;
+          }
     />
   </div>
 </div>
diff --git a/packages/office-ui-fabric-react/src/components/Dialog/index.ts b/packages/office-ui-fabric-react/src/components/Dialog/index.ts
index 0a40969d0aea4..ca9daf37d811c 100644
--- a/packages/office-ui-fabric-react/src/components/Dialog/index.ts
+++ b/packages/office-ui-fabric-react/src/components/Dialog/index.ts
@@ -1,5 +1,9 @@
 export * from './Dialog';
+export * from './Dialog.base';
 export * from './DialogContent';
+export * from './DialogContent.base';
 export * from './DialogFooter';
+export * from './DialogFooter.base';
 export * from './Dialog.types';
-export * from './DialogContent.types';
\ No newline at end of file
+export * from './DialogContent.types';
+export * from './DialogFooter.types';
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
index ed04bdd8bdb51..f04b8bc98f117 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.scss
@@ -103,7 +103,7 @@ $ms-DocumentCardActions-verticalPadding: 4px;
 
   :global(.ms-Button:hover) {
     :global(.ms-Button-icon) {
-      color: #1174c3;
+      color: $buttonTextColor;
       cursor: pointer;
     }
   }
@@ -162,7 +162,7 @@ $ms-DocumentCardActivity-personaTextGutter: 8px;
     top: -1px;
     right: -1px;
     bottom: -1px;
-    border: 2px solid #fafafa; // Match the background of the card
+    border: 2px solid $ms-color-white; // Match the background of the card
     border-radius: 50%;
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.test.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.test.tsx
index 391ba31a71bf3..b8955e180c98b 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.test.tsx
@@ -23,7 +23,7 @@ describe('DocumentCard', () => {
           }
         />
       </DocumentCard>);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx
index dd381c1aa22ca..f04eaa7838f4a 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCard.tsx
@@ -23,8 +23,8 @@ export class DocumentCard extends BaseComponent<IDocumentCardProps, any> {
   }
 
   public render() {
-    let { onClick, onClickHref, children, className, type, accentColor } = this.props;
-    let actionable = (onClick || onClickHref) ? true : false;
+    const { onClick, onClickHref, children, className, type, accentColor } = this.props;
+    const actionable = (onClick || onClickHref) ? true : false;
 
     // Override the border color if an accent color was provided (compact card only)
     let style;
@@ -35,8 +35,8 @@ export class DocumentCard extends BaseComponent<IDocumentCardProps, any> {
     }
 
     // if this element is actionable it should have an aria role
-    let role = actionable ? (onClick ? 'button' : 'link') : undefined;
-    let tabIndex = actionable ? 0 : undefined;
+    const role = actionable ? (onClick ? 'button' : 'link') : undefined;
+    const tabIndex = actionable ? 0 : undefined;
 
     return (
       <div
@@ -76,7 +76,7 @@ export class DocumentCard extends BaseComponent<IDocumentCardProps, any> {
 
   @autobind
   private _onAction(ev: React.SyntheticEvent<HTMLElement>): void {
-    let { onClick, onClickHref } = this.props;
+    const { onClick, onClickHref } = this.props;
 
     if (onClick) {
       onClick(ev);
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx
index 16358ba7505bb..73957cd5537eb 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActions.tsx
@@ -8,7 +8,7 @@ const styles: any = stylesImport;
 
 export class DocumentCardActions extends BaseComponent<IDocumentCardActionsProps, any> {
   public render() {
-    let { actions, views } = this.props;
+    const { actions, views } = this.props;
 
     return (
       <div className={ css('ms-DocumentCardActions', styles.actions) }>
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx
index c2ac7856ff5fa..4f08c7dae8db2 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardActivity.tsx
@@ -8,7 +8,7 @@ const styles: any = stylesImport;
 
 export class DocumentCardActivity extends BaseComponent<IDocumentCardActivityProps, any> {
   public render() {
-    let { activity, people } = this.props;
+    const { activity, people } = this.props;
 
     return (
       people && people.length > 0 &&
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx
index edf27091ab815..bc6fff48f1906 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardLocation.tsx
@@ -6,7 +6,7 @@ const styles: any = stylesImport;
 
 export class DocumentCardLocation extends BaseComponent<IDocumentCardLocationProps, any> {
   public render() {
-    let { location, locationHref, ariaLabel, onClick } = this.props;
+    const { location, locationHref, ariaLabel, onClick } = this.props;
 
     return (
       <a
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
index 98d4bda776f02..cf725198238f5 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardPreview.tsx
@@ -14,7 +14,7 @@ const LIST_ITEM_COUNT = 3;
 
 export class DocumentCardPreview extends BaseComponent<IDocumentCardPreviewProps, any> {
   public render() {
-    let { previewImages } = this.props;
+    const { previewImages } = this.props;
     let style, preview;
     let isFileList = false;
 
@@ -45,7 +45,7 @@ export class DocumentCardPreview extends BaseComponent<IDocumentCardPreviewProps
   }
 
   private _renderPreviewImage(previewImage: IDocumentCardPreviewImage): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
-    let { width, height, imageFit, previewIconProps } = previewImage;
+    const { width, height, imageFit, previewIconProps } = previewImage;
 
     if (previewIconProps) {
       return (
@@ -55,7 +55,7 @@ export class DocumentCardPreview extends BaseComponent<IDocumentCardPreviewProps
       );
     }
 
-    let image = (
+    const image = (
       <Image
         width={ width }
         height={ height }
@@ -81,19 +81,19 @@ export class DocumentCardPreview extends BaseComponent<IDocumentCardPreviewProps
 
   @autobind
   private _renderPreviewList(previewImages: IDocumentCardPreviewImage[]): React.ReactElement<React.HTMLAttributes<HTMLDivElement>> {
-    let { getOverflowDocumentCountText } = this.props;
+    const { getOverflowDocumentCountText } = this.props;
 
     // Determine how many documents we won't be showing
-    let overflowDocumentCount = previewImages.length - LIST_ITEM_COUNT;
+    const overflowDocumentCount = previewImages.length - LIST_ITEM_COUNT;
 
     // Determine the overflow text that will be rendered after the preview list.
-    let overflowText = overflowDocumentCount ?
+    const overflowText = overflowDocumentCount ?
       (getOverflowDocumentCountText ?
         getOverflowDocumentCountText(overflowDocumentCount) :
         '+' + overflowDocumentCount) : null;
 
     // Create list items for the documents to be shown
-    let fileListItems = previewImages.slice(0, LIST_ITEM_COUNT).map((file, fileIndex) => (
+    const fileListItems = previewImages.slice(0, LIST_ITEM_COUNT).map((file, fileIndex) => (
       <li key={ fileIndex }>
         <Image
           className={ css('ms-DocumentCardPreview-fileListIcon', styles.fileListIcon) }
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
index a541d4294dd06..0a970d3eed25e 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/DocumentCardTitle.tsx
@@ -38,7 +38,7 @@ export class DocumentCardTitle extends BaseComponent<IDocumentCardTitleProps, ID
   }
 
   public componentDidMount() {
-    let { title, shouldTruncate } = this.props;
+    const { title, shouldTruncate } = this.props;
     if (shouldTruncate && title && title.length > TRUNCATION_MINIMUM_LENGTH) {
       if (this._doesTitleOverflow()) {
         this._startTruncation(this.props);
@@ -65,8 +65,8 @@ export class DocumentCardTitle extends BaseComponent<IDocumentCardTitleProps, ID
   }
 
   public render() {
-    let { title, shouldTruncate } = this.props;
-    let { truncatedTitleFirstPiece, truncatedTitleSecondPiece } = this.state;
+    const { title, shouldTruncate } = this.props;
+    const { truncatedTitleFirstPiece, truncatedTitleSecondPiece } = this.state;
 
     let documentCardTitle;
     if (shouldTruncate && this._isTruncated) {
@@ -84,7 +84,7 @@ export class DocumentCardTitle extends BaseComponent<IDocumentCardTitleProps, ID
 
   @autobind
   private _startTruncation(props: IDocumentCardTitleProps) {
-    let originalTitle = props.title;
+    const originalTitle = props.title;
     this._isTruncated = false;
 
     // If the title is really short, there's no need to truncate it
@@ -114,7 +114,7 @@ export class DocumentCardTitle extends BaseComponent<IDocumentCardTitleProps, ID
 
   private _shrinkTitle() {
     if (this._doesTitleOverflow()) {
-      let { truncatedTitleFirstPiece, truncatedTitleSecondPiece } = this.state;
+      const { truncatedTitleFirstPiece, truncatedTitleSecondPiece } = this.state;
       this._isTruncated = true;
 
       if (!truncatedTitleFirstPiece && !truncatedTitleSecondPiece) {
@@ -129,7 +129,7 @@ export class DocumentCardTitle extends BaseComponent<IDocumentCardTitleProps, ID
   }
 
   private _doesTitleOverflow(): boolean {
-    let titleElement = this._titleElement;
+    const titleElement = this._titleElement;
     return titleElement.scrollHeight > titleElement.clientHeight + TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD || titleElement.scrollWidth > titleElement.clientWidth;
   }
 
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/__snapshots__/DocumentCard.test.tsx.snap b/packages/office-ui-fabric-react/src/components/DocumentCard/__snapshots__/DocumentCard.test.tsx.snap
index a60ae4c7ac5c2..8c8c86ebb0c8c 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/__snapshots__/DocumentCard.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/__snapshots__/DocumentCard.test.tsx.snap
@@ -48,7 +48,6 @@ exports[`DocumentCard renders DocumentCard correctly 1`] = `
             >
               <i
                 aria-hidden={true}
-                aria-label={undefined}
                 className=
 
                     {
@@ -59,7 +58,12 @@ exports[`DocumentCard renders DocumentCard correctly 1`] = `
               />
             </div>
             <div
-              className="ms-Image ms-Persona-image"
+              className=
+                  ms-Image
+                  ms-Persona-image
+                  {
+                    overflow: hidden;
+                  }
               style={
                 Object {
                   "height": 32,
@@ -69,7 +73,22 @@ exports[`DocumentCard renders DocumentCard correctly 1`] = `
             >
               <img
                 alt=""
-                className="ms-Image-image ms-Image-image--portrait undefined ms-Image-image--cover undefined is-notLoaded is-fadeIn"
+                className=
+                    ms-Image-image
+                    ms-Image-image--cover
+                    ms-Image-image--portrait
+                    is-notLoaded
+                    is-fadeIn
+                    {
+                      display: block;
+                      height: auto;
+                      left: 50%;
+                      opacity: 0;
+                      position: relative;
+                      top: 50%;
+                      transform: translate(-50%,-50%);
+                      width: 100%;
+                    }
                 onError={[Function]}
                 onLoad={[Function]}
                 role={undefined}
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Basic.Example.tsx
index d22f0d18d04c6..64216d54d58d2 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Basic.Example.tsx
@@ -12,7 +12,7 @@ import './DocumentCard.Example.scss';
 
 export class DocumentCardBasicExample extends React.Component<any, any> {
   public render() {
-    let previewProps: IDocumentCardPreviewProps = {
+    const previewProps: IDocumentCardPreviewProps = {
       previewImages: [
         {
           name: 'Revenue stream proposal fiscal year 2016 version02.pptx',
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx
index 63669e4b000ac..2645db4b70d70 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Compact.Example.tsx
@@ -11,7 +11,7 @@ import { TestImages } from '../../../common/TestImages';
 
 export class DocumentCardCompactExample extends React.Component<any, any> {
   public render() {
-    let previewProps: IDocumentCardPreviewProps = {
+    const previewProps: IDocumentCardPreviewProps = {
       getOverflowDocumentCountText: (overflowCount: number) => `+${overflowCount} more`,
       previewImages: [
         {
@@ -45,7 +45,7 @@ export class DocumentCardCompactExample extends React.Component<any, any> {
       ],
     };
 
-    let previewPropsUsingIcon: IDocumentCardPreviewProps = {
+    const previewPropsUsingIcon: IDocumentCardPreviewProps = {
       previewImages: [
         {
           previewIconProps: { iconName: 'OpenFile', styles: { root: { fontSize: 42, color: '#ffffff' } } },
diff --git a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
index 9d178ba8166b5..73b2356cb87f6 100644
--- a/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/DocumentCard/examples/DocumentCard.Complete.Example.tsx
@@ -13,7 +13,7 @@ import { TestImages } from '../../../common/TestImages';
 
 export class DocumentCardCompleteExample extends React.Component<any, any> {
   public render() {
-    let previewProps: IDocumentCardPreviewProps = {
+    const previewProps: IDocumentCardPreviewProps = {
       getOverflowDocumentCountText: (overflowCount: number) => `+${overflowCount} more`,
       previewImages: [
         {
@@ -74,7 +74,7 @@ export class DocumentCardCompleteExample extends React.Component<any, any> {
 
     };
 
-    let previewPropsUsingIcon: IDocumentCardPreviewProps = {
+    const previewPropsUsingIcon: IDocumentCardPreviewProps = {
       previewImages: [
         {
           previewIconProps: { iconName: 'OpenFile', styles: { root: { fontSize: 42, color: '#ffffff' } } },
diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss
index e24c22d132821..658672de7ce28 100644
--- a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss
+++ b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.scss
@@ -12,8 +12,8 @@ $Dropdown-selectedItem-hover-bg: $ms-color-neutralLighter;
 $DropDown-height: 32px;
 $DropDown-item-height: 32px;
 
-// Mixin for high contrast mode link states
-@mixin highContrastListItemState {
+// Mixin for high contrast mode states
+@mixin highContrastItemAndTitleState {
   @include high-contrast {
     background-color: Highlight;
     border-color: Highlight;
@@ -23,6 +23,12 @@ $DropDown-item-height: 32px;
   @include highContrastAdjust();
 }
 
+@mixin highContrastBorderState {
+  @include high-contrast {
+    border-color: Highlight;
+  }
+}
+
 .root {
   @include ms-normalize;
   @include ms-font-m;
@@ -38,11 +44,6 @@ $DropDown-item-height: 32px;
     .title,
     .caretDown {
       color: $ms-color-neutralDark;
-
-      @include high-contrast {
-        // Using Highlight for text here specifically to match the border color that indicates focus on dropdown root elements.
-        color: Highlight;
-      }
     }
 
     .titleIsPlaceHolder {
@@ -53,6 +54,7 @@ $DropDown-item-height: 32px;
   &:hover {
     .title {
       border-color: $ms-color-neutralDark;
+      @include highContrastBorderState();
     }
     .titleIsError {
       border-color: $ms-color-error;
@@ -62,6 +64,7 @@ $DropDown-item-height: 32px;
   &:active {
     .title {
       border-color: $ms-color-themeDark;
+      @include highContrastBorderState();
     }
     .titleIsError {
       border-color: $ms-color-error;
@@ -71,6 +74,10 @@ $DropDown-item-height: 32px;
   &:focus {
     .title {
       border-color: $ms-color-themePrimary;
+      @include highContrastItemAndTitleState();
+    }
+    .caretDown {
+      @include highContrastAdjust();
     }
     .titleIsError {
       border-color: $ms-color-error;
@@ -207,7 +214,7 @@ $DropDown-item-height: 32px;
 
   &:focus {
     background-color: $ms-color-neutralLighter;
-    @include highContrastListItemState;
+    @include highContrastItemAndTitleState;
   }
 
   &:active {
@@ -229,7 +236,7 @@ $DropDown-item-height: 32px;
   background-color: $Dropdown-selectedItem-bg;
   color: $ms-color-black;
 
-  @include highContrastListItemState;
+  @include highContrastItemAndTitleState;
 
   &.itemIsDisabled {
     color: $ms-color-neutralTertiary;
diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.test.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.test.tsx
index 57b2001e3b1f8..6c94d7c894e3a 100644
--- a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.test.tsx
@@ -4,7 +4,7 @@ import * as ReactDOM from 'react-dom';
 /* tslint:enable:no-unused-variable */
 import * as ReactTestUtils from 'react-dom/test-utils';
 import * as renderer from 'react-test-renderer';
-import { mount, shallow } from 'enzyme';
+import { shallow } from 'enzyme';
 
 import {
   KeyCodes,
@@ -30,20 +30,20 @@ describe('Dropdown', () => {
 
     it('Renders single-select Dropdown correctly', () => {
       const component = renderer.create(<Dropdown options={ DEFAULT_OPTIONS } />);
-      let tree = component.toJSON();
+      const tree = component.toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('Can flip between enabled and disabled.', () => {
 
-      let container = document.createElement('div');
+      const container = document.createElement('div');
       ReactDOM.render(
         <Dropdown
           label='testgroup'
           options={ DEFAULT_OPTIONS }
         />,
         container);
-      let dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
+      const dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
 
       expect(dropdownRoot.className).not.toEqual(expect.stringMatching('is-disabled'));
       expect(dropdownRoot.getAttribute('data-is-focusable')).toEqual('true');
@@ -61,7 +61,7 @@ describe('Dropdown', () => {
     });
 
     it('Renders no selected item in default case', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
 
       ReactDOM.render(
         <Dropdown
@@ -69,14 +69,14 @@ describe('Dropdown', () => {
           options={ DEFAULT_OPTIONS }
         />,
         container);
-      let dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
-      let titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
+      const dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
+      const titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
 
       expect(titleElement.textContent).toEqual('');
     });
 
     it('Renders a selected item if option specifies selected', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
 
       ReactDOM.render(
         <Dropdown
@@ -84,14 +84,14 @@ describe('Dropdown', () => {
           options={ [{ key: '1', text: '1', selected: true }, { key: '2', text: '2' },] }
         />,
         container);
-      let dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
-      let titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
+      const dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
+      const titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
 
       expect(titleElement.textContent).toEqual('1');
     });
 
     it('Renders a selected item in uncontrolled case', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
 
       ReactDOM.render(
         <Dropdown
@@ -100,14 +100,14 @@ describe('Dropdown', () => {
           options={ DEFAULT_OPTIONS }
         />,
         container);
-      let dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
-      let titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
+      const dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
+      const titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
 
       expect(titleElement.textContent).toEqual('1');
     });
 
     it('does not change the selected item in when defaultKey changes', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
 
       ReactDOM.render(
         <Dropdown
@@ -116,8 +116,8 @@ describe('Dropdown', () => {
           options={ DEFAULT_OPTIONS }
         />,
         container);
-      let dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
-      let titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
+      const dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
+      const titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
 
       expect(titleElement.textContent).toEqual('1');
 
@@ -132,7 +132,7 @@ describe('Dropdown', () => {
     });
 
     it('Renders a selected item in controlled case', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
 
       ReactDOM.render(
         <Dropdown
@@ -141,14 +141,14 @@ describe('Dropdown', () => {
           options={ DEFAULT_OPTIONS }
         />,
         container);
-      let dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
-      let titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
+      const dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
+      const titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
 
       expect(titleElement.textContent).toEqual('1');
     });
 
     it('does change the selected item in when selectedKey changes', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
 
       ReactDOM.render(
         <Dropdown
@@ -157,8 +157,8 @@ describe('Dropdown', () => {
           options={ DEFAULT_OPTIONS }
         />,
         container);
-      let dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
-      let titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
+      const dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
+      const titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
 
       expect(titleElement.textContent).toEqual('1');
 
@@ -173,7 +173,7 @@ describe('Dropdown', () => {
     });
 
     it('Can change items in uncontrolled case', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
       let dropdownRoot: HTMLElement | undefined;
 
       document.body.appendChild(container);
@@ -190,7 +190,7 @@ describe('Dropdown', () => {
 
         ReactTestUtils.Simulate.click(dropdownRoot);
 
-        let secondItemElement = document.querySelector('.ms-Dropdown-item[data-index="2"]') as HTMLElement;
+        const secondItemElement = document.querySelector('.ms-Dropdown-item[data-index="2"]') as HTMLElement;
         ReactTestUtils.Simulate.click(secondItemElement);
       }
       finally {
@@ -199,12 +199,12 @@ describe('Dropdown', () => {
     });
 
     it('issues the onChanged callback when the selected item is different', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
       let dropdownRoot: HTMLElement | undefined;
 
       document.body.appendChild(container);
 
-      let onChangedSpy = jasmine.createSpy('onChanged');
+      const onChangedSpy = jasmine.createSpy('onChanged');
 
       try {
         ReactDOM.render(
@@ -219,7 +219,7 @@ describe('Dropdown', () => {
 
         ReactTestUtils.Simulate.click(dropdownRoot);
 
-        let secondItemElement = document.querySelector('.ms-Dropdown-item[data-index="2"]') as HTMLElement;
+        const secondItemElement = document.querySelector('.ms-Dropdown-item[data-index="2"]') as HTMLElement;
         ReactTestUtils.Simulate.click(secondItemElement);
       }
       finally {
@@ -228,12 +228,12 @@ describe('Dropdown', () => {
     });
 
     it('issues the onDismiss callback when dismissing options callout', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
       let dropdownRoot: HTMLElement | undefined;
 
       document.body.appendChild(container);
 
-      let onDismissSpy = jasmine.createSpy('onDismiss');
+      const onDismissSpy = jasmine.createSpy('onDismiss');
 
       try {
         ReactDOM.render(
@@ -248,7 +248,7 @@ describe('Dropdown', () => {
 
         ReactTestUtils.Simulate.click(dropdownRoot);
 
-        let secondItemElement = document.querySelector('.ms-Dropdown-item[data-index="2"]') as HTMLElement;
+        const secondItemElement = document.querySelector('.ms-Dropdown-item[data-index="2"]') as HTMLElement;
         ReactTestUtils.Simulate.click(secondItemElement);
       }
       finally {
@@ -278,12 +278,12 @@ describe('Dropdown', () => {
     });
 
     it('issues the onChanged callback when the selected item is different', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
       let dropdownRoot: HTMLElement | undefined;
 
       document.body.appendChild(container);
 
-      let onChangedSpy = jasmine.createSpy('onChanged');
+      const onChangedSpy = jasmine.createSpy('onChanged');
 
       try {
         ReactDOM.render(
@@ -298,7 +298,7 @@ describe('Dropdown', () => {
 
         ReactTestUtils.Simulate.click(dropdownRoot);
 
-        let secondItemElement = document.querySelector('.ms-Dropdown-item[data-index="1"]') as HTMLElement;
+        const secondItemElement = document.querySelector('.ms-Dropdown-item[data-index="1"]') as HTMLElement;
         ReactTestUtils.Simulate.click(secondItemElement);
       }
       finally {
@@ -307,7 +307,7 @@ describe('Dropdown', () => {
     });
 
     it('Will select the first valid item on keypress', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
 
       ReactDOM.render(
         <Dropdown
@@ -315,15 +315,15 @@ describe('Dropdown', () => {
           options={ DEFAULT_OPTIONS }
         />,
         container);
-      let dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
+      const dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
       ReactTestUtils.Simulate.keyDown(dropdownRoot, { which: KeyCodes.down });
 
-      let titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
+      const titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
       expect(titleElement.textContent).toEqual('1');
     });
 
     it('Will select the first valid item on Home keypress', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
 
       ReactDOM.render(
         <Dropdown
@@ -331,15 +331,15 @@ describe('Dropdown', () => {
           options={ DEFAULT_OPTIONS }
         />,
         container);
-      let dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
+      const dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
       ReactTestUtils.Simulate.keyDown(dropdownRoot, { which: KeyCodes.home });
 
-      let titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
+      const titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
       expect(titleElement.textContent).toEqual('1');
     });
 
     it('Will select the last valid item on End keypress', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
 
       ReactDOM.render(
         <Dropdown
@@ -347,15 +347,15 @@ describe('Dropdown', () => {
           options={ DEFAULT_OPTIONS }
         />,
         container);
-      let dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
+      const dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
       ReactTestUtils.Simulate.keyDown(dropdownRoot, { which: KeyCodes.end });
 
-      let titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
+      const titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
       expect(titleElement.textContent).toEqual('6');
     });
 
     it('Will skip over headers and separators on keypress', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
       let dropdownRoot;
       let titleElement;
 
@@ -387,12 +387,12 @@ describe('Dropdown', () => {
           options={ DEFAULT_OPTIONS }
           multiSelect
         />);
-      let tree = component.toJSON();
+      const tree = component.toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('Renders no selected item in default case', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
 
       ReactDOM.render(
         <Dropdown
@@ -401,14 +401,14 @@ describe('Dropdown', () => {
           multiSelect
         />,
         container);
-      let dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
-      let titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
+      const dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
+      const titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
 
       expect(titleElement.textContent).toEqual('');
     });
 
     it('Renders a selected item if option specifies selected', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
 
       ReactDOM.render(
         <Dropdown
@@ -417,8 +417,8 @@ describe('Dropdown', () => {
           multiSelect
         />,
         container);
-      let dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
-      let titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
+      const dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
+      const titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
 
       expect(titleElement.textContent).toEqual('1');
     });
@@ -446,7 +446,7 @@ describe('Dropdown', () => {
     });
 
     it('Renders multiple selected items if multiple options specify selected', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
 
       ReactDOM.render(
         <Dropdown
@@ -455,14 +455,14 @@ describe('Dropdown', () => {
           multiSelect
         />,
         container);
-      let dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
-      let titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
+      const dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
+      const titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
 
       expect(titleElement.textContent).toEqual('1, 2');
     });
 
     it('Renders a selected item in uncontrolled case', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
 
       ReactDOM.render(
         <Dropdown
@@ -472,14 +472,14 @@ describe('Dropdown', () => {
           options={ DEFAULT_OPTIONS }
         />,
         container);
-      let dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
-      let titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
+      const dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
+      const titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
 
       expect(titleElement.textContent).toEqual('1, 2');
     });
 
     it('does not change the selected items when defaultSelectedKeys changes', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
 
       ReactDOM.render(
         <Dropdown
@@ -489,8 +489,8 @@ describe('Dropdown', () => {
           options={ DEFAULT_OPTIONS }
         />,
         container);
-      let dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
-      let titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
+      const dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
+      const titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
 
       expect(titleElement.textContent).toEqual('1, 2');
 
@@ -507,7 +507,7 @@ describe('Dropdown', () => {
     });
 
     it('Renders selected items in controlled case', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
 
       ReactDOM.render(
         <Dropdown
@@ -517,14 +517,14 @@ describe('Dropdown', () => {
           options={ DEFAULT_OPTIONS }
         />,
         container);
-      let dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
-      let titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
+      const dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
+      const titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
 
       expect(titleElement.textContent).toEqual('1, 3');
     });
 
     it('changes selected items in controlled case', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
 
       ReactDOM.render(
         <Dropdown
@@ -534,8 +534,8 @@ describe('Dropdown', () => {
           options={ DEFAULT_OPTIONS }
         />,
         container);
-      let dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
-      let titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
+      const dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
+      const titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
 
       expect(titleElement.textContent).toEqual('1, 3');
 
@@ -551,7 +551,7 @@ describe('Dropdown', () => {
     });
 
     it('Can change items in uncontrolled case', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
       let dropdownRoot: HTMLElement | undefined;
 
       document.body.appendChild(container);
@@ -570,7 +570,7 @@ describe('Dropdown', () => {
 
         ReactTestUtils.Simulate.click(dropdownRoot);
 
-        let secondItemElement = document.querySelectorAll('.ms-Dropdown-item[role="checkbox"]')[1] as HTMLElement;
+        const secondItemElement = document.querySelectorAll('.ms-Dropdown-item[role="checkbox"]')[1] as HTMLElement;
         ReactTestUtils.Simulate.click(secondItemElement);
       }
       finally {
@@ -582,12 +582,12 @@ describe('Dropdown', () => {
     // I'm not sure why these two tests fail. I've manually verified the scenario, even manually through programatic clicks, but these
     // tests simply won't pass
     it('issues the onChanged callback when selecting an item', () => {
-      let container = document.createElement('div');
-      let dropdownRoot: HTMLElement | undefined;
+      const container = document.createElement('div');
+      const dropdownRoot: HTMLElement | undefined;
 
       document.body.appendChild(container);
 
-      let onChangedSpy = jasmine.createSpy('onChanged');
+      const onChangedSpy = jasmine.createSpy('onChanged');
 
       try {
         ReactDOM.render(
@@ -603,7 +603,7 @@ describe('Dropdown', () => {
 
         ReactTestUtils.Simulate.click(dropdownRoot);
 
-        let secondItemElement = document.querySelectorAll('.ms-Dropdown-item[role="checkbox"]')[1] as HTMLElement;
+        const secondItemElement = document.querySelectorAll('.ms-Dropdown-item[role="checkbox"]')[1] as HTMLElement;
         ReactTestUtils.Simulate.click(secondItemElement);
       }
       finally {
@@ -612,12 +612,12 @@ describe('Dropdown', () => {
     });
 
     it('issues the onChanged callback when unselecting an item', () => {
-      let container = document.createElement('div');
-      let dropdownRoot: HTMLElement | undefined;
+      const container = document.createElement('div');
+      const dropdownRoot: HTMLElement | undefined;
 
       document.body.appendChild(container);
 
-      let onChangedSpy = jasmine.createSpy('onChanged');
+      const onChangedSpy = jasmine.createSpy('onChanged');
 
       try {
         ReactDOM.render(
@@ -633,7 +633,7 @@ describe('Dropdown', () => {
 
         ReactTestUtils.Simulate.click(dropdownRoot);
 
-        let firstItemElement = document.querySelectorAll('.ms-Dropdown-item[role="checkbox"]')[0] as HTMLElement;
+        const firstItemElement = document.querySelectorAll('.ms-Dropdown-item[role="checkbox"]')[0] as HTMLElement;
         ReactTestUtils.Simulate.click(firstItemElement);
       }
       finally {
@@ -643,7 +643,7 @@ describe('Dropdown', () => {
     */
 
     it('Will not select the first valid item on keypress', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
 
       ReactDOM.render(
         <Dropdown
@@ -652,15 +652,15 @@ describe('Dropdown', () => {
           multiSelect
         />,
         container);
-      let dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
+      const dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
       ReactTestUtils.Simulate.keyDown(dropdownRoot, { which: KeyCodes.down });
 
-      let titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
+      const titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
       expect(titleElement.textContent).toEqual('');
     });
 
     it('Will not select the first valid item on Home keypress', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
 
       ReactDOM.render(
         <Dropdown
@@ -669,15 +669,15 @@ describe('Dropdown', () => {
           multiSelect
         />,
         container);
-      let dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
+      const dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
       ReactTestUtils.Simulate.keyDown(dropdownRoot, { which: KeyCodes.home });
 
-      let titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
+      const titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
       expect(titleElement.textContent).toEqual('');
     });
 
     it('Will not select the last valid item on End keypress', () => {
-      let container = document.createElement('div');
+      const container = document.createElement('div');
 
       ReactDOM.render(
         <Dropdown
@@ -686,10 +686,10 @@ describe('Dropdown', () => {
           multiSelect
         />,
         container);
-      let dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
+      const dropdownRoot = container.querySelector('.ms-Dropdown') as HTMLElement;
       ReactTestUtils.Simulate.keyDown(dropdownRoot, { which: KeyCodes.end });
 
-      let titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
+      const titleElement = dropdownRoot.querySelector('.ms-Dropdown-title') as HTMLElement;
       expect(titleElement.textContent).toEqual('');
     });
 
diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx
index a2d11867564c1..0e09aeebe1c00 100644
--- a/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dropdown/Dropdown.tsx
@@ -45,9 +45,8 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
     options: [] as any[]
   };
 
-  private static Option: string = 'option';
+  private static Option = 'option';
 
-  private _root: HTMLElement;
   private _host: HTMLDivElement;
   private _focusZone: FocusZone;
   private _dropDown: HTMLDivElement;
@@ -86,12 +85,12 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
       isOpen: false
     };
     if (this.props.multiSelect) {
-      let selectedKeys = props.defaultSelectedKeys !== undefined ? props.defaultSelectedKeys : props.selectedKeys;
+      const selectedKeys = props.defaultSelectedKeys !== undefined ? props.defaultSelectedKeys : props.selectedKeys;
       this.state = {
         selectedIndices: this._getSelectedIndexes(props.options, selectedKeys)
       };
     } else {
-      let selectedKey = props.defaultSelectedKey !== undefined ? props.defaultSelectedKey : props.selectedKey;
+      const selectedKey = props.defaultSelectedKey !== undefined ? props.defaultSelectedKey : props.selectedKey;
       this.state = {
         selectedIndices: this._getSelectedIndexes(props.options, selectedKey!)
       };
@@ -102,7 +101,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
   public componentWillReceiveProps(newProps: IDropdownProps) {
     // In controlled component usage where selectedKey is provided, update the selectedIndex
     // state if the key or options change.
-    let selectedKeyProp: keyof IDropdownProps = this.props.multiSelect ? 'selectedKeys' : 'selectedKey';
+    const selectedKeyProp: keyof IDropdownProps = this.props.multiSelect ? 'selectedKeys' : 'selectedKey';
     if (newProps[selectedKeyProp] !== undefined &&
       (newProps[selectedKeyProp] !== this.props[selectedKeyProp] || newProps.options !== this.props.options)) {
       this.setState({
@@ -123,12 +122,14 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
 
   // Primary Render
   public render() {
-    let id = this._id;
+    const id = this._id;
     let {
+      disabled
+    } = this.props;
+    const {
       className,
       label,
       options,
-      disabled,
       isDisabled,
       ariaLabel,
       required,
@@ -138,9 +139,9 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
       onRenderPlaceHolder = this._onRenderPlaceHolder,
       onRenderCaretDown = this._onRenderCaretDown
     } = this.props;
-    let { isOpen, selectedIndices = [] } = this.state;
-    let selectedOptions = this._getAllSelectedOptions(options, selectedIndices);
-    let divProps = getNativeProps(this.props, divProperties);
+    const { isOpen, selectedIndices = [] } = this.state;
+    const selectedOptions = this._getAllSelectedOptions(options, selectedIndices);
+    const divProps = getNativeProps(this.props, divProperties);
 
     // Remove this deprecation workaround at 1.0.0
     if (isDisabled !== undefined) {
@@ -148,7 +149,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
     }
 
     return (
-      <div ref={ this._resolveRef('_root') } className={ css('ms-Dropdown-container') }>
+      <div className={ css('ms-Dropdown-container') }>
         { label && (
           <Label className={ css('ms-Dropdown-label') } id={ id + '-label' } htmlFor={ id } ref={ this._resolveRef('_dropdownLabel') } required={ required }>{ label }</Label>
         ) }
@@ -230,9 +231,9 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
   }
 
   public setSelectedIndex(index: number) {
-    let { onChanged, options, selectedKey, selectedKeys, multiSelect } = this.props;
-    let { selectedIndices = [] } = this.state;
-    let checked: boolean = selectedIndices ? selectedIndices.indexOf(index) > -1 : false;
+    const { onChanged, options, selectedKey, selectedKeys, multiSelect } = this.props;
+    const { selectedIndices = [] } = this.state;
+    const checked: boolean = selectedIndices ? selectedIndices.indexOf(index) > -1 : false;
 
     index = Math.max(0, Math.min(options.length - 1, index));
 
@@ -244,9 +245,9 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
         selectedIndices: [index]
       });
     } else if (multiSelect && selectedKeys === undefined) {
-      let newIndexes = selectedIndices ? this._copyArray(selectedIndices) : [];
+      const newIndexes = selectedIndices ? this._copyArray(selectedIndices) : [];
       if (checked) {
-        let position = newIndexes.indexOf(index);
+        const position = newIndexes.indexOf(index);
         if (position > -1) {
           // unchecked the current one
           newIndexes.splice(position, 1);
@@ -263,14 +264,14 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
     if (onChanged) {
       // for single-select, option passed in will always be selected.
       // for multi-select, flip the checked value
-      let changedOpt = multiSelect ? { ...options[index], selected: !checked } : options[index];
+      const changedOpt = multiSelect ? { ...options[index], selected: !checked } : options[index];
       onChanged(changedOpt, index);
     }
   }
 
   private _copyArray(array: any[]): any[] {
-    let newArray = [];
-    for (let element of array) {
+    const newArray = [];
+    for (const element of array) {
       newArray.push(element);
     }
     return newArray;
@@ -323,9 +324,9 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
   // Render text in dropdown input
   @autobind
   private _onRenderTitle(item: IDropdownOption[]): JSX.Element {
-    let { multiSelectDelimiter = ', ' } = this.props;
+    const { multiSelectDelimiter = ', ' } = this.props;
 
-    let displayTxt = item.map(i => i.text).join(multiSelectDelimiter);
+    const displayTxt = item.map(i => i.text).join(multiSelectDelimiter);
     return <span>{ displayTxt }</span>;
   }
 
@@ -341,14 +342,14 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
   // Render Callout or Panel container and pass in list
   @autobind
   private _onRenderContainer(props: IDropdownProps): JSX.Element {
-    let {
+    const {
       onRenderList = this._onRenderList,
       responsiveMode,
       calloutProps,
       dropdownWidth
     } = this.props;
 
-    let isSmall = responsiveMode! <= ResponsiveMode.medium;
+    const isSmall = responsiveMode! <= ResponsiveMode.medium;
 
     return (
       isSmall ?
@@ -396,12 +397,12 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
   // Render List of items
   @autobind
   private _onRenderList(props: IDropdownProps): JSX.Element {
-    let {
+    const {
       onRenderItem = this._onRenderItem
     } = this.props;
 
-    let id = this._id;
-    let { selectedIndices = [] } = this.state;
+    const id = this._id;
+    const { selectedIndices = [] } = this.state;
 
     return (
       <div
@@ -440,7 +441,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
 
   // Render separator
   private _renderSeparator(item: IDropdownOption): JSX.Element | null {
-    let { index, key } = item;
+    const { index, key } = item;
     if (index! > 0) {
       return (
         <div
@@ -468,11 +469,11 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
   // Render menu item
   @autobind
   private _renderOption(item: IDropdownOption): JSX.Element {
-    let { onRenderOption = this._onRenderOption } = this.props;
-    let { selectedIndices = [] } = this.state;
-    let id = this._id;
-    let isItemSelected = item.index !== undefined && selectedIndices ? selectedIndices.indexOf(item.index) > -1 : false;
-    let checkboxStyles = getCheckboxStyles(getTheme());
+    const { onRenderOption = this._onRenderOption } = this.props;
+    const { selectedIndices = [] } = this.state;
+    const id = this._id;
+    const isItemSelected = item.index !== undefined && selectedIndices ? selectedIndices.indexOf(item.index) > -1 : false;
+    const checkboxStyles = getCheckboxStyles(getTheme());
 
     return (
       !this.props.multiSelect ?
@@ -516,6 +517,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
               onMouseMove: this._onItemMouseMove.bind(this, item)
             } }
             label={ item.text }
+            onRenderLabel={ this._onRenderLabel.bind(this, item) }
             className={ css(
               'ms-ColumnManagementPanel-checkbox',
               styles.dropdownCheckbox,
@@ -534,8 +536,7 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
               checkboxCheckedHovered: checkboxStyles.checkboxChecked,
               textHovered: checkboxStyles.text
             } }
-          >{ onRenderOption(item, this._onRenderOption) }
-          </Checkbox>
+          />
         )
     );
   }
@@ -546,6 +547,13 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
     return <span className={ css('ms-Dropdown-optionText', styles.optionText) }>{ item.text }</span>;
   }
 
+  // Render custom label for drop down item
+  @autobind
+  private _onRenderLabel(item: IDropdownOption) {
+    const { onRenderOption = this._onRenderOption } = this.props;
+    return onRenderOption(item, this._onRenderOption);
+  }
+
   @autobind
   private _onPositioned() {
     this._focusZone.focus();
@@ -587,12 +595,12 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
       return;
     }
 
-    let targetElement = ev.currentTarget as HTMLElement;
+    const targetElement = ev.currentTarget as HTMLElement;
     targetElement.focus();
   }
 
   private _onItemMouseMove(item: any, ev: React.MouseEvent<HTMLElement>) {
-    let targetElement = ev.currentTarget as HTMLElement;
+    const targetElement = ev.currentTarget as HTMLElement;
 
     if (!this._isScrollIdle || document.activeElement === targetElement) {
       return;
@@ -631,14 +639,14 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
       if (this.props.multiSelect) {
         return this._getAllSelectedIndices(options);
       }
-      let selectedIndex = this._getSelectedIndex(options, null);
+      const selectedIndex = this._getSelectedIndex(options, null);
       return selectedIndex !== -1 ? [selectedIndex] : [];
     } else if (!Array.isArray(selectedKey)) {
       return [this._getSelectedIndex(options, selectedKey)];
     }
 
-    let selectedIndices: number[] = [];
-    for (let key of selectedKey) {
+    const selectedIndices: number[] = [];
+    for (const key of selectedKey) {
       selectedIndices.push(this._getSelectedIndex(options, key));
     }
     return selectedIndices;
@@ -646,8 +654,8 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
 
   // Get all selected options for multi-select mode
   private _getAllSelectedOptions(options: IDropdownOption[], selectedIndices: number[]) {
-    let selectedOptions: IDropdownOption[] = [];
-    for (let index of selectedIndices) {
+    const selectedOptions: IDropdownOption[] = [];
+    for (const index of selectedIndices) {
       const option = options[index];
 
       if (option) {
@@ -748,6 +756,13 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
         break;
 
       default:
+        if (ev.altKey || ev.metaKey) {
+          this.setState({
+            isOpen: false
+          });
+          ev.stopPropagation();
+          ev.preventDefault();
+        }
         return;
     }
 
@@ -815,6 +830,12 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
         return;
 
       default:
+        if (ev.altKey || ev.metaKey) {
+          this.setState({
+            isOpen: false
+          });
+          break;
+        }
         return;
     }
 
@@ -834,8 +855,9 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
         return;
       }
     }
-    let { disabled, isDisabled } = this.props;
-    let { isOpen } = this.state;
+    let { disabled } = this.props;
+    const { isDisabled } = this.props;
+    const { isOpen } = this.state;
 
     // Remove this deprecation workaround at 1.0.0
     if (isDisabled !== undefined) {
@@ -848,5 +870,4 @@ export class Dropdown extends BaseComponent<IDropdownInternalProps, IDropdownSta
       });
     }
   }
-
 }
diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/DropdownPage.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/DropdownPage.tsx
index 0dccfe5466652..f7ffc94d031b4 100644
--- a/packages/office-ui-fabric-react/src/components/Dropdown/DropdownPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dropdown/DropdownPage.tsx
@@ -45,6 +45,7 @@ export class DropdownPage extends React.Component<IComponentDemoPageProps, {}> {
           </div>
 
         }
+        allowNativeProps={ true }
         propertiesTables={
           <PropertiesTableSet
             sources={ [
@@ -78,7 +79,7 @@ export class DropdownPage extends React.Component<IComponentDemoPageProps, {}> {
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...DropdownStatus}
+            { ...DropdownStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
index 89eb9f638d7c5..219f16707a7dd 100644
--- a/packages/office-ui-fabric-react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Dropdown/__snapshots__/Dropdown.test.tsx.snap
@@ -35,7 +35,6 @@ exports[`Dropdown multi-select Renders multiselect Dropdown correctly 1`] = `
     >
       <i
         aria-hidden={true}
-        aria-label={undefined}
         className=
             ms-Dropdown-caretDown
             {
@@ -84,7 +83,6 @@ exports[`Dropdown single-select Renders single-select Dropdown correctly 1`] = `
     >
       <i
         aria-hidden={true}
-        aria-label={undefined}
         className=
             ms-Dropdown-caretDown
             {
diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Basic.Example.tsx
index 598cb19a6901e..79d6f1d99a8a5 100644
--- a/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Basic.Example.tsx
@@ -19,7 +19,7 @@ export class DropdownBasicExample extends BaseComponent<{}, {
   }
 
   public render() {
-    let { selectedItem, selectedItems } = this.state;
+    const { selectedItem, selectedItems } = this.state;
 
     return (
       <div className='docs-DropdownExample'>
@@ -171,13 +171,13 @@ export class DropdownBasicExample extends BaseComponent<{}, {
 
   @autobind
   public onChangeMultiSelect(item: IDropdownOption) {
-    let updatedSelectedItem = this.state.selectedItems ? this.copyArray(this.state.selectedItems) : [];
+    const updatedSelectedItem = this.state.selectedItems ? this.copyArray(this.state.selectedItems) : [];
     if (item.selected) {
       // add the option if it's checked
       updatedSelectedItem.push(item.key);
     } else {
       // remove the option if it's unchecked
-      let currIndex = updatedSelectedItem.indexOf(item.key);
+      const currIndex = updatedSelectedItem.indexOf(item.key);
       if (currIndex > -1) {
         updatedSelectedItem.splice(currIndex, 1);
       }
@@ -188,7 +188,7 @@ export class DropdownBasicExample extends BaseComponent<{}, {
   }
 
   public copyArray(array: any[]): any[] {
-    let newArray: any[] = [];
+    const newArray: any[] = [];
     for (let i = 0; i < array.length; i++) {
       newArray[i] = array[i];
     }
diff --git a/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Error.Example.tsx b/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Error.Example.tsx
index dcaca7dab6dcf..1801d9b39959c 100644
--- a/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Error.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Dropdown/examples/Dropdown.Error.Example.tsx
@@ -1,12 +1,9 @@
 import * as React from 'react';
-import { PrimaryButton } from 'office-ui-fabric-react/lib/Button';
-import { Dropdown, IDropdown, DropdownMenuItemType, IDropdownOption } from 'office-ui-fabric-react/lib/Dropdown';
-import { autobind, BaseComponent } from '../../../Utilities';
+import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
+import { BaseComponent } from '../../../Utilities';
 import './Dropdown.Basic.Example.scss';
 
 export class DropdownErrorExample extends BaseComponent<{}, {}> {
-  private _basicDropdown: IDropdown;
-
   constructor(props: {}) {
     super(props);
   }
@@ -28,7 +25,6 @@ export class DropdownErrorExample extends BaseComponent<{}, {}> {
               { key: 'E', text: 'Option e' },
             ]
           }
-          componentRef={ this._resolveRef('_basicDropdown') }
           errorMessage='Error message'
         />
       </div>
diff --git a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.classNames.ts b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.classNames.ts
index 6b369e3d14bd4..a3990ad9d7db3 100644
--- a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.classNames.ts
+++ b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.classNames.ts
@@ -4,7 +4,6 @@ import {
 } from '../../Utilities';
 import {
   ITheme,
-  IStyle,
   mergeStyles
 } from '../../Styling';
 
@@ -30,7 +29,10 @@ export const getClassNames = memoizeFunction((
         selectors: {
           '& button': inheritFont,
           '& input': inheritFont,
-          '& textarea': inheritFont
+          '& textarea': inheritFont,
+          ':global(button)': {
+            overflow: 'visible'
+          }
         }
       }
     ])
diff --git a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.tsx b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.tsx
index e41b57371f6ac..844e38048dfa9 100644
--- a/packages/office-ui-fabric-react/src/components/Fabric/Fabric.tsx
+++ b/packages/office-ui-fabric-react/src/components/Fabric/Fabric.tsx
@@ -33,7 +33,7 @@ export interface IFabricState {
 
 // We will track the last focus visibility state so that if we tear down and recreate
 // the Fabric component, we will use the last known value as the default.
-let _lastIsFocusVisible: boolean = false;
+let _lastIsFocusVisible = false;
 
 // Ensure that the HTML element has a dir specified. This helps to ensure RTL/LTR macros in css for all components will work.
 if (typeof (document) === 'object' && document.documentElement && !document.documentElement.getAttribute('dir')) {
@@ -68,7 +68,7 @@ export class Fabric extends BaseComponent<IFabricProps, IFabricState> {
       isFocusVisible!
     );
 
-    let divProps = getNativeProps(this.props, divProperties);
+    const divProps = getNativeProps(this.props, divProperties);
     return (
       <div
         { ...divProps }
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.scss b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.scss
index a0e41b21c675a..e02c5a99ab5dd 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.scss
+++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.scss
@@ -17,8 +17,6 @@ $spacingAroundItemButton: 2px;
 
 .members {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
   overflow: hidden;
   margin: -1 * $spacingAroundItemButton;
 
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx
index ebf447e68a97c..8127da0ffca43 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.test.tsx
@@ -3,11 +3,12 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 /* tslint:enable:no-unused-variable */
 import * as renderer from 'react-test-renderer';
-import { mount, shallow, ReactWrapper } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import { setRTL } from '../../Utilities';
 import { Facepile } from './Facepile';
 import { IFacepilePersona, OverflowButtonType } from './Facepile.types';
 import { PersonaSize } from '../../Persona';
+import { Persona } from '../../Persona';
 import { PersonaCoin } from '../../PersonaCoin';
 import { TestImages } from '../../common/TestImages';
 import { findNodes, expectOne, expectMissing } from '../../common/testUtilities';
@@ -39,7 +40,7 @@ describe('Facepile', () => {
 
   it('renders Facepile correctly', () => {
     const component = renderer.create(<Facepile personas={ facepilePersonas } />);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
@@ -191,4 +192,41 @@ describe('Facepile', () => {
     });
   });
 
-});
\ No newline at end of file
+  it('renders Persona control if exactly one persona is sent in props', () => {
+    let wrapper = shallow(
+      <Facepile
+        personas={ facepilePersonas.slice(0, 1) }
+        overflowPersonas={ [] }
+      />);
+
+    expect(wrapper.find(PersonaCoin).length).toEqual(0);
+    expect(wrapper.find(Persona).length).toEqual(1);
+
+    wrapper = shallow(
+      <Facepile
+        personas={ facepilePersonas.slice(0, 1) }
+      />);
+
+    expect(wrapper.find(PersonaCoin).length).toEqual(0);
+    expect(wrapper.find(Persona).length).toEqual(1);
+  });
+
+  it('renders Persona control if exactly one persona is sent in props', () => {
+    let wrapper = shallow(
+      <Facepile
+        personas={ facepilePersonas.slice(0, 1) }
+        overflowPersonas={ [] }
+      />);
+
+    expect(wrapper.find(PersonaCoin).length).toEqual(0);
+    expect(wrapper.find(Persona).length).toEqual(1);
+
+    wrapper = shallow(
+      <Facepile
+        personas={ facepilePersonas.slice(0, 1) }
+      />);
+
+    expect(wrapper.find(PersonaCoin).length).toEqual(0);
+    expect(wrapper.find(Persona).length).toEqual(1);
+  });
+});
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 e655465c1e8c2..2f230e6a77e02 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx
+++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.tsx
@@ -22,6 +22,9 @@ import {
 import {
   Icon
 } from '../../Icon';
+import {
+  Persona
+} from '../../Persona';
 import {
   PersonaCoin,
   PersonaSize,
@@ -34,58 +37,57 @@ export class Facepile extends BaseComponent<IFacepileProps, {}> {
   public static defaultProps: IFacepileProps = {
     maxDisplayablePersonas: 5,
     personas: [],
+    overflowPersonas: [],
     personaSize: PersonaSize.size32
   };
 
   private _ariaDescriptionId: string;
+  private _id: string;
 
   constructor(props: IFacepileProps) {
     super(props);
 
+    this._id = getId('Facepile');
     this._ariaDescriptionId = getId();
-
   }
+
   public render(): JSX.Element {
-    let {
+    let { overflowButtonProps } = this.props;
+    const {
+      ariaDescription,
       chevronButtonProps,
       maxDisplayablePersonas,
-      overflowButtonProps,
-      overflowButtonType,
       className,
       personas,
+      overflowPersonas,
       showAddButton
     } = this.props;
-    let numPersonasToShow: number = Math.min(personas.length, maxDisplayablePersonas as number);
+
+    const numPersonasToShow: number = Math.min(personas.length, maxDisplayablePersonas || personas.length);
 
     // Added for deprecating chevronButtonProps.  Can remove after v1.0
     if (chevronButtonProps && !overflowButtonProps) {
       overflowButtonProps = chevronButtonProps;
-      overflowButtonType = OverflowButtonType.downArrow;
     }
 
+    const hasOverflowPersonas = overflowPersonas && overflowPersonas.length > 0;
+    const personasPrimary: IFacepilePersona[] = hasOverflowPersonas ? personas : personas.slice(0, numPersonasToShow);
+    const personasOverflow: IFacepilePersona[] = (hasOverflowPersonas ? overflowPersonas : personas.slice(numPersonasToShow)) || [];
+
     return (
-      <div className={ css('ms-Facepile', styles.root, className) }>
-        <div
-          className={ css('ms-Facepile-itemContainer', styles.itemContainer) }
-        >
+      <div className={ css('ms-Facepile', styles.root, className) } >
+        { this.onRenderAriaDescription() }
+        <div className={ css('ms-Facepile-itemContainer', styles.itemContainer) } >
           { showAddButton ? this._getAddNewElement() : null }
-          { this.onRenderAriaDescription() }
           <FocusZone
-            ariaDescribedBy={ this._ariaDescriptionId }
+            ariaDescribedBy={ ariaDescription && this._ariaDescriptionId }
             role='listbox'
             className={ css('ms-Facepile-members', styles.members) }
             direction={ FocusZoneDirection.horizontal }
           >
-            {
-              personas.slice(0, numPersonasToShow).map((persona: IFacepilePersona, index: number) => {
-                const personaControl: JSX.Element = this._getPersonaControl(persona);
-                return persona.onClick ?
-                  this._getElementWithOnClickEvent(personaControl, persona, index) :
-                  this._getElementWithoutOnClickEvent(personaControl, persona, index);
-              })
-            }
+            { this._onRenderVisiblePersonas(personasPrimary, personasOverflow.length === 0 && personas.length === 1) }
           </FocusZone>
-          { overflowButtonProps ? this._getOverflowElement(numPersonasToShow) : null }
+          { overflowButtonProps ? this._getOverflowElement(personasOverflow) : null }
         </div>
       </div>
     );
@@ -101,10 +103,19 @@ export class Facepile extends BaseComponent<IFacepileProps, {}> {
     );
   }
 
+  private _onRenderVisiblePersonas(personas: IFacepilePersona[], singlePersona: boolean) {
+    return personas.map((persona: IFacepilePersona, index: number) => {
+      const personaControl: JSX.Element = singlePersona ? this._getPersonaControl(persona) : this._getPersonaCoinControl(persona);
+      return persona.onClick ?
+        this._getElementWithOnClickEvent(personaControl, persona, index) :
+        this._getElementWithoutOnClickEvent(personaControl, persona, index);
+    });
+  }
+
   private _getPersonaControl(persona: IFacepilePersona): JSX.Element {
-    let { getPersonaProps, personaSize } = this.props;
+    const { getPersonaProps, personaSize } = this.props;
     return (
-      <PersonaCoin
+      <Persona
         imageInitials={ persona.imageInitials }
         imageUrl={ persona.imageUrl }
         initialsColor={ persona.initialsColor }
@@ -115,18 +126,26 @@ export class Facepile extends BaseComponent<IFacepileProps, {}> {
     );
   }
 
+  private _getPersonaCoinControl(persona: IFacepilePersona): JSX.Element {
+    const { getPersonaProps, personaSize } = this.props;
+    return (
+      <PersonaCoin
+        imageInitials={ persona.imageInitials }
+        imageUrl={ persona.imageUrl }
+        initialsColor={ persona.initialsColor }
+        primaryText={ persona.personaName }
+        size={ personaSize }
+        { ...(getPersonaProps ? getPersonaProps(persona) : null) }
+      />
+    );
+  }
+
   private _getElementWithOnClickEvent(personaControl: JSX.Element, persona: IFacepilePersona, index: number): JSX.Element {
     return (
       <FacepileButton
         { ...getNativeProps(persona, buttonProperties) }
-        key={ (!!persona.imageUrl ? 'i' : '') + index }
-        data-is-focusable={ true }
-        role='option'
-        className={ css('ms-Facepile-itemButton ms-Facepile-person', styles.itemButton) }
-        title={ persona.personaName }
+        {...this._getElementProps(persona, index) }
         onClick={ this._onPersonaClick.bind(this, persona) }
-        onMouseMove={ this._onPersonaMouseMove.bind(this, persona) }
-        onMouseOut={ this._onPersonaMouseOut.bind(this, persona) }
       >
         { personaControl }
       </FacepileButton>
@@ -136,24 +155,30 @@ export class Facepile extends BaseComponent<IFacepileProps, {}> {
   private _getElementWithoutOnClickEvent(personaControl: JSX.Element, persona: IFacepilePersona, index: number): JSX.Element {
     return (
       <div
-        { ...getNativeProps(persona, divProperties) }
-        key={ (!!persona.imageUrl ? 'i' : '') + index }
-        data-is-focusable={ true }
-        role='option'
-        className={ css('ms-Facepile-itemButton ms-Facepile-person', styles.itemButton) }
-        title={ persona.personaName }
-        onMouseMove={ this._onPersonaMouseMove.bind(this, persona) }
-        onMouseOut={ this._onPersonaMouseOut.bind(this, persona) }
+        { ...getNativeProps(persona, buttonProperties) }
+        {...this._getElementProps(persona, index) }
       >
         { personaControl }
       </div>
     );
   }
 
-  private _getOverflowElement(numPersonasToShow: number): JSX.Element | null {
+  private _getElementProps(persona: IFacepilePersona, index: number) {
+    return {
+      key: (!!persona.imageUrl ? 'i' : '') + index,
+      'data-is-focusable': true,
+      role: 'option',
+      className: css('ms-Facepile-itemButton ms-Facepile-person', styles.itemButton),
+      title: persona.personaName,
+      onMouseMove: this._onPersonaMouseMove.bind(this, persona),
+      onMouseOut: this._onPersonaMouseOut.bind(this, persona)
+    };
+  }
+
+  private _getOverflowElement(personasOverflow: IFacepilePersona[]): JSX.Element | null {
     switch (this.props.overflowButtonType) {
       case OverflowButtonType.descriptive:
-        return this._getDescriptiveOverflowElement(numPersonasToShow);
+        return this._getDescriptiveOverflowElement(personasOverflow);
       case OverflowButtonType.downArrow:
         return this._getIconElement('ChevronDown');
       case OverflowButtonType.more:
@@ -163,17 +188,17 @@ export class Facepile extends BaseComponent<IFacepileProps, {}> {
     }
   }
 
-  private _getDescriptiveOverflowElement(numPersonasToShow: number): JSX.Element | null {
-    let { overflowButtonProps, personas, personaSize } = this.props;
-    let numPersonasNotPictured: number = personas.length - numPersonasToShow;
+  private _getDescriptiveOverflowElement(personasOverflow: IFacepilePersona[]): JSX.Element | null {
+    const { overflowButtonProps, personas, personaSize } = this.props;
 
-    if (!overflowButtonProps || numPersonasNotPictured < 1) { return null; }
+    if (!personasOverflow || personasOverflow.length < 1) { return null; }
 
-    let personaNames: string = personas.slice(numPersonasToShow).map((p: IFacepilePersona) => p.personaName).join(', ');
+    const personaNames: string = personasOverflow.map((p: IFacepilePersona) => p.personaName).join(', ');
+    const numPersonasNotPictured: number = Math.max(personasOverflow.length, 0);
 
     return (
       <FacepileButton
-        { ...overflowButtonProps}
+        { ...overflowButtonProps }
         ariaDescription={ personaNames }
         className={ css('ms-Facepile-descriptiveOverflowButton', 'ms-Facepile-itemButton', styles.descriptiveOverflowButton, styles.itemButton) }
       >
@@ -188,12 +213,12 @@ export class Facepile extends BaseComponent<IFacepileProps, {}> {
   }
 
   private _getIconElement(icon: string): JSX.Element {
-    let { overflowButtonProps, personaSize } = this.props;
-    let overflowInitialsIcon = true;
+    const { overflowButtonProps, personaSize } = this.props;
+    const overflowInitialsIcon = true;
 
     return (
       <FacepileButton
-        {...overflowButtonProps}
+        { ...overflowButtonProps }
         className={ css('ms-Facepile-overflowButton', 'ms-Facepile-itemButton', styles.overflowButton, styles.itemButton) }
       >
         <PersonaCoin
@@ -206,11 +231,11 @@ export class Facepile extends BaseComponent<IFacepileProps, {}> {
   }
 
   private _getAddNewElement(): JSX.Element {
-    let { addButtonProps, personaSize } = this.props;
+    const { addButtonProps, personaSize } = this.props;
 
     return (
       <FacepileButton
-        {...addButtonProps}
+        { ...addButtonProps }
         className={ css('ms-Facepile-addButton', 'ms-Facepile-itemButton', styles.itemButton, styles.addButton) }
       >
         <PersonaCoin
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.types.ts b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.types.ts
index 13e68697179ff..2b1ee1f35d51f 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/Facepile.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Facepile/Facepile.types.ts
@@ -19,11 +19,15 @@ export interface IFacepileProps extends React.Props<Facepile> {
   componentRef?: (component: IFacepile) => void;
 
   /**
-   * Array of IPersonaProps that define each Persona. Note that the size
-   * is fixed at PersonaSize.size32 regardless of what is specified.
+   * Array of IPersonaProps that define each Persona.
    */
   personas: IFacepilePersona[];
 
+  /**
+   * Personas to place in the overflow
+   */
+  overflowPersonas?: IFacepilePersona[];
+
   /** Maximum number of personas to show */
   maxDisplayablePersonas?: number;
 
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap
index 8169b99dca04c..fcbd96a681aec 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Facepile/__snapshots__/Facepile.test.tsx.snap
@@ -8,10 +8,10 @@ exports[`Facepile renders Facepile correctly 1`] = `
     className="ms-Facepile-itemContainer"
   >
     <div
-      aria-describedby="id__0"
+      aria-describedby={undefined}
       aria-labelledby={undefined}
       className="ms-FocusZone ms-Facepile-members"
-      data-focuszone-id="FocusZone1"
+      data-focuszone-id="FocusZone2"
       onFocus={[Function]}
       onKeyDown={[Function]}
       onMouseDownCapture={[Function]}
@@ -35,7 +35,12 @@ exports[`Facepile renders Facepile correctly 1`] = `
             style={undefined}
           >
             <div
-              className="ms-Image ms-Persona-image"
+              className=
+                  ms-Image
+                  ms-Persona-image
+                  {
+                    overflow: hidden;
+                  }
               style={
                 Object {
                   "height": 32,
@@ -45,7 +50,22 @@ exports[`Facepile renders Facepile correctly 1`] = `
             >
               <img
                 alt=""
-                className="ms-Image-image ms-Image-image--portrait undefined ms-Image-image--cover undefined is-notLoaded is-fadeIn"
+                className=
+                    ms-Image-image
+                    ms-Image-image--cover
+                    ms-Image-image--portrait
+                    is-notLoaded
+                    is-fadeIn
+                    {
+                      display: block;
+                      height: auto;
+                      left: 50%;
+                      opacity: 0;
+                      position: relative;
+                      top: 50%;
+                      transform: translate(-50%,-50%);
+                      width: 100%;
+                    }
                 onError={[Function]}
                 onLoad={[Function]}
                 role={undefined}
@@ -73,7 +93,12 @@ exports[`Facepile renders Facepile correctly 1`] = `
             style={undefined}
           >
             <div
-              className="ms-Image ms-Persona-image"
+              className=
+                  ms-Image
+                  ms-Persona-image
+                  {
+                    overflow: hidden;
+                  }
               style={
                 Object {
                   "height": 32,
@@ -83,7 +108,22 @@ exports[`Facepile renders Facepile correctly 1`] = `
             >
               <img
                 alt=""
-                className="ms-Image-image ms-Image-image--portrait undefined ms-Image-image--cover undefined is-notLoaded is-fadeIn"
+                className=
+                    ms-Image-image
+                    ms-Image-image--cover
+                    ms-Image-image--portrait
+                    is-notLoaded
+                    is-fadeIn
+                    {
+                      display: block;
+                      height: auto;
+                      left: 50%;
+                      opacity: 0;
+                      position: relative;
+                      top: 50%;
+                      transform: translate(-50%,-50%);
+                      width: 100%;
+                    }
                 onError={[Function]}
                 onLoad={[Function]}
                 role={undefined}
@@ -110,7 +150,7 @@ exports[`Facepile renders Facepile correctly 1`] = `
               box-sizing: border-box;
               cursor: pointer;
               display: inline-block;
-              font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
               font-size: 14px;
               font-weight: 400;
               outline: transparent;
@@ -181,7 +221,12 @@ exports[`Facepile renders Facepile correctly 1`] = `
                 </span>
               </div>
               <div
-                className="ms-Image ms-Persona-image"
+                className=
+                    ms-Image
+                    ms-Persona-image
+                    {
+                      overflow: hidden;
+                    }
                 style={
                   Object {
                     "height": 32,
@@ -191,7 +236,22 @@ exports[`Facepile renders Facepile correctly 1`] = `
               >
                 <img
                   alt=""
-                  className="ms-Image-image ms-Image-image--portrait undefined ms-Image-image--cover undefined is-notLoaded is-fadeIn"
+                  className=
+                      ms-Image-image
+                      ms-Image-image--cover
+                      ms-Image-image--portrait
+                      is-notLoaded
+                      is-fadeIn
+                      {
+                        display: block;
+                        height: auto;
+                        left: 50%;
+                        opacity: 0;
+                        position: relative;
+                        top: 50%;
+                        transform: translate(-50%,-50%);
+                        width: 100%;
+                      }
                   onError={[Function]}
                   onLoad={[Function]}
                   role={undefined}
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/examples/Facepile.AddFace.Example.tsx b/packages/office-ui-fabric-react/src/components/Facepile/examples/Facepile.AddFace.Example.tsx
index 9f30f3daa948b..c153c8538b402 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/examples/Facepile.AddFace.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Facepile/examples/Facepile.AddFace.Example.tsx
@@ -21,8 +21,8 @@ export class FacepileAddFaceExample extends React.Component<{}, IFacepileAddFace
   }
 
   public render() {
-    let { numberOfFaces } = this.state;
-    let facepileProps: IFacepileProps = {
+    const { numberOfFaces } = this.state;
+    const facepileProps: IFacepileProps = {
       personas: facepilePersonas.slice(0, numberOfFaces),
       maxDisplayablePersonas: 5,
       overflowButtonProps: {
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/examples/Facepile.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Facepile/examples/Facepile.Basic.Example.tsx
index af3a6ab896090..553cdb6180bf4 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/examples/Facepile.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Facepile/examples/Facepile.Basic.Example.tsx
@@ -29,10 +29,11 @@ export class FacepileBasicExample extends React.Component<{}, IFacepileBasicExam
   }
 
   public render() {
-    let { numberOfFaces, personaSize } = this.state;
-    let facepileProps: IFacepileProps = {
+    const { numberOfFaces, personaSize } = this.state;
+    const facepileProps: IFacepileProps = {
       personaSize: personaSize,
       personas: facepilePersonas.slice(0, numberOfFaces),
+      overflowPersonas: facepilePersonas.slice(numberOfFaces),
       getPersonaProps: (persona: IFacepilePersona) => {
         return {
           imageShouldFadeIn: this.state.imagesFadeIn
@@ -43,7 +44,7 @@ export class FacepileBasicExample extends React.Component<{}, IFacepileBasicExam
 
     return (
       <div className={ 'ms-FacepileExample' }>
-        <Facepile {...facepileProps} />
+        <Facepile { ...facepileProps } />
         <div className={ 'control' }>
           <Slider
             label='Number of Personas:'
diff --git a/packages/office-ui-fabric-react/src/components/Facepile/examples/Facepile.Overflow.Example.tsx b/packages/office-ui-fabric-react/src/components/Facepile/examples/Facepile.Overflow.Example.tsx
index 2ae467beec801..7275e2cc966bf 100644
--- a/packages/office-ui-fabric-react/src/components/Facepile/examples/Facepile.Overflow.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Facepile/examples/Facepile.Overflow.Example.tsx
@@ -39,7 +39,7 @@ export class FacepileOverflowExample extends React.Component<{}, IFacepileOverfl
   }
 
   public render() {
-    let { displayedPersonas, overflowButtonType } = this.state;
+    const { displayedPersonas, overflowButtonType } = this.state;
     facepileProps.maxDisplayablePersonas = displayedPersonas;
     facepileProps.overflowButtonType = overflowButtonType;
 
@@ -49,8 +49,8 @@ export class FacepileOverflowExample extends React.Component<{}, IFacepileOverfl
         <div className={ 'control' }>
           <Slider
             label='Number of Personas:'
-            min={ 0 }
-            max={ 6 }
+            min={ 1 }
+            max={ 5 }
             step={ 1 }
             showValue={ true }
             value={ this.state.displayedPersonas }
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.test.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.test.tsx
new file mode 100644
index 0000000000000..d23d8fc60e7e1
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.test.tsx
@@ -0,0 +1,242 @@
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+
+import * as ReactDOM from 'react-dom';
+import * as ReactTestUtils from 'react-dom/test-utils';
+import { KeyCodes } from '../../Utilities';
+
+import { FocusZone, FocusZoneDirection } from '../FocusZone';
+import { FocusTrapZone } from './FocusTrapZone';
+
+describe('FocusTrapZone', () => {
+  let lastFocusedElement: HTMLElement | undefined;
+  function _onFocus(ev: any) {
+    lastFocusedElement = ev.target;
+  }
+
+  function setupElement(element: HTMLElement, {
+    clientRect,
+    isVisible = true
+  }: {
+      clientRect: {
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+      };
+      isVisible?: boolean;
+    }): void {
+    element.getBoundingClientRect = () => ({
+      top: clientRect.top,
+      left: clientRect.left,
+      bottom: clientRect.bottom,
+      right: clientRect.right,
+      width: clientRect.right - clientRect.left,
+      height: clientRect.bottom - clientRect.top
+    });
+
+    element.setAttribute('data-is-visible', String(isVisible));
+
+    element.focus = () => ReactTestUtils.Simulate.focus(element);
+  }
+
+  beforeEach(() => {
+    lastFocusedElement = undefined;
+  });
+
+  it('can tab across FocusZones with different button structures', () => {
+    const component = ReactTestUtils.renderIntoDocument(
+      <div { ...{ onFocusCapture: _onFocus } }>
+        <FocusTrapZone forceFocusInsideTrap={ false }>
+          <FocusZone direction={ FocusZoneDirection.horizontal } data-is-visible={ true }>
+            <div data-is-visible={ true }>
+              <button className='a'>a</button>
+            </div>
+            <div data-is-visible={ true }>
+              <button className='b'>b</button>
+            </div>
+            <div data-is-visible={ true }>
+              <button className='c'>c</button>
+            </div>
+          </FocusZone>
+          <FocusZone direction={ FocusZoneDirection.horizontal } data-is-visible={ true }>
+            <div data-is-visible={ true }>
+              <div data-is-visible={ true }>
+                <button className='d'>d</button>
+                <button className='e'>e</button>
+                <button className='f'>f</button>
+              </div>
+            </div>
+          </FocusZone>
+        </FocusTrapZone>
+      </div>
+    );
+
+    const focusTrapZone = ReactDOM.findDOMNode(component as React.ReactInstance) as Element;
+
+    const buttonA = focusTrapZone.querySelector('.a') as HTMLElement;
+    const buttonB = focusTrapZone.querySelector('.b') as HTMLElement;
+    const buttonC = focusTrapZone.querySelector('.c') as HTMLElement;
+    const buttonD = focusTrapZone.querySelector('.d') as HTMLElement;
+    const buttonE = focusTrapZone.querySelector('.e') as HTMLElement;
+    const buttonF = focusTrapZone.querySelector('.f') as HTMLElement;
+
+    // Assign bounding locations to buttons.
+    setupElement(buttonA, {
+      clientRect: {
+        top: 0,
+        bottom: 30,
+        left: 0,
+        right: 30
+      }
+    });
+
+    setupElement(buttonB, {
+      clientRect: {
+        top: 0,
+        bottom: 30,
+        left: 30,
+        right: 60
+      }
+    });
+
+    setupElement(buttonC, {
+      clientRect: {
+        top: 0,
+        bottom: 30,
+        left: 60,
+        right: 90
+      }
+    });
+
+    setupElement(buttonD, {
+      clientRect: {
+        top: 30,
+        bottom: 60,
+        left: 0,
+        right: 30
+      }
+    });
+
+    setupElement(buttonE, {
+      clientRect: {
+        top: 30,
+        bottom: 60,
+        left: 30,
+        right: 60
+      }
+    });
+
+    setupElement(buttonF, {
+      clientRect: {
+        top: 30,
+        bottom: 60,
+        left: 60,
+        right: 90
+      }
+    });
+
+    // Focus the first button.
+    ReactTestUtils.Simulate.focus(buttonA);
+    expect(lastFocusedElement).toBe(buttonA);
+
+    // Pressing shift + tab should go to d.
+    ReactTestUtils.Simulate.keyDown(buttonA, { which: KeyCodes.tab, shiftKey: true });
+    expect(lastFocusedElement).toBe(buttonD);
+
+    // Pressing tab should go to a.
+    ReactTestUtils.Simulate.keyDown(buttonD, { which: KeyCodes.tab });
+    expect(lastFocusedElement).toBe(buttonA);
+  });
+
+  it('can tab across a FocusZone with different button structures', () => {
+    const component = ReactTestUtils.renderIntoDocument(
+      <div { ...{ onFocusCapture: _onFocus } }>
+        <FocusTrapZone forceFocusInsideTrap={ false }>
+          <div data-is-visible={ true }>
+            <button className='x'>x</button>
+          </div>
+          <FocusZone direction={ FocusZoneDirection.horizontal } data-is-visible={ true }>
+            <div data-is-visible={ true }>
+              <button className='a'>a</button>
+            </div>
+            <div data-is-visible={ true }>
+              <div data-is-visible={ true }>
+                <button className='b'>b</button>
+                <button className='c'>c</button>
+                <button className='d'>d</button>
+              </div>
+            </div>
+          </FocusZone>
+        </FocusTrapZone>
+      </div>
+    );
+
+    const focusTrapZone = ReactDOM.findDOMNode(component as React.ReactInstance) as Element;
+
+    const buttonX = focusTrapZone.querySelector('.x') as HTMLElement;
+    const buttonA = focusTrapZone.querySelector('.a') as HTMLElement;
+    const buttonB = focusTrapZone.querySelector('.b') as HTMLElement;
+    const buttonC = focusTrapZone.querySelector('.c') as HTMLElement;
+    const buttonD = focusTrapZone.querySelector('.d') as HTMLElement;
+
+    // Assign bounding locations to buttons.
+    setupElement(buttonX, {
+      clientRect: {
+        top: 0,
+        bottom: 30,
+        left: 0,
+        right: 30
+      }
+    });
+
+    setupElement(buttonA, {
+      clientRect: {
+        top: 0,
+        bottom: 30,
+        left: 0,
+        right: 30
+      }
+    });
+
+    setupElement(buttonB, {
+      clientRect: {
+        top: 0,
+        bottom: 30,
+        left: 30,
+        right: 60
+      }
+    });
+
+    setupElement(buttonC, {
+      clientRect: {
+        top: 0,
+        bottom: 30,
+        left: 60,
+        right: 90
+      }
+    });
+
+    setupElement(buttonD, {
+      clientRect: {
+        top: 30,
+        bottom: 60,
+        left: 0,
+        right: 30
+      }
+    });
+
+    // Focus the first button.
+    ReactTestUtils.Simulate.focus(buttonX);
+    expect(lastFocusedElement).toBe(buttonX);
+
+    // Pressing shift + tab should go to a.
+    ReactTestUtils.Simulate.keyDown(buttonX, { which: KeyCodes.tab, shiftKey: true });
+    expect(lastFocusedElement).toBe(buttonA);
+
+    // Pressing tab should go to x.
+    ReactTestUtils.Simulate.keyDown(buttonA, { which: KeyCodes.tab });
+    expect(lastFocusedElement).toBe(buttonX);
+  });
+});
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx
index 7e8bdecd69ecc..9bae4145c9360 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZone.tsx
@@ -17,17 +17,13 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
   private static _focusStack: FocusTrapZone[] = [];
   private static _clickStack: FocusTrapZone[] = [];
 
-  public refs: {
-    [key: string]: React.ReactInstance,
-    root: HTMLElement
-  };
-
+  private _root: HTMLElement;
   private _previouslyFocusedElement: HTMLElement;
-  private _isInFocusStack: boolean = false;
-  private _isInClickStack: boolean = false;
+  private _isInFocusStack = false;
+  private _isInClickStack = false;
 
   public componentWillMount() {
-    let { isClickableOutsideFocusTrap = false, forceFocusInsideTrap = true } = this.props;
+    const { isClickableOutsideFocusTrap = false, forceFocusInsideTrap = true } = this.props;
     if (forceFocusInsideTrap) {
       this._isInFocusStack = true;
       FocusTrapZone._focusStack.push(this);
@@ -39,10 +35,10 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
   }
 
   public componentDidMount() {
-    let { isClickableOutsideFocusTrap = false, forceFocusInsideTrap = true, elementToFocusOnDismiss, disableFirstFocus = false } = this.props;
+    const { isClickableOutsideFocusTrap = false, forceFocusInsideTrap = true, elementToFocusOnDismiss, disableFirstFocus = false } = this.props;
 
     this._previouslyFocusedElement = elementToFocusOnDismiss ? elementToFocusOnDismiss : document.activeElement as HTMLElement;
-    if (!elementContains(this.refs.root, this._previouslyFocusedElement) && !disableFirstFocus) {
+    if (!elementContains(this._root, this._previouslyFocusedElement) && !disableFirstFocus) {
       this.focus();
     }
 
@@ -56,18 +52,18 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
   }
 
   public componentWillReceiveProps(nextProps: IFocusTrapZoneProps) {
-    let { elementToFocusOnDismiss } = nextProps;
+    const { elementToFocusOnDismiss } = nextProps;
     if (elementToFocusOnDismiss && this._previouslyFocusedElement !== elementToFocusOnDismiss) {
       this._previouslyFocusedElement = elementToFocusOnDismiss;
     }
   }
 
   public componentWillUnmount() {
-    let { ignoreExternalFocusing } = this.props;
+    const { ignoreExternalFocusing } = this.props;
 
     this._events.dispose();
     if (this._isInFocusStack || this._isInClickStack) {
-      let filter = (value: FocusTrapZone) => {
+      const filter = (value: FocusTrapZone) => {
         return this !== value;
       };
       if (this._isInFocusStack) {
@@ -84,14 +80,14 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
   }
 
   public render() {
-    let { className, ariaLabelledBy } = this.props;
-    let divProps = getNativeProps(this.props, divProperties);
+    const { className, ariaLabelledBy } = this.props;
+    const divProps = getNativeProps(this.props, divProperties);
 
     return (
       <div
         { ...divProps }
         className={ className }
-        ref='root'
+        ref={ this._resolveRef('_root') }
         aria-labelledby={ ariaLabelledBy }
         onKeyDown={ this._onKeyboardHandler }
       >
@@ -110,12 +106,11 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
       : firstFocusableSelector && firstFocusableSelector();
 
     let _firstFocusableChild;
-    let root = this.refs.root;
 
     if (focusSelector) {
-      _firstFocusableChild = root.querySelector('.' + focusSelector);
+      _firstFocusableChild = this._root.querySelector('.' + focusSelector);
     } else {
-      _firstFocusableChild = getNextElement(root, root.firstChild as HTMLElement, true, false, false, true);
+      _firstFocusableChild = getNextElement(this._root, this._root.firstChild as HTMLElement, true, false, false, true);
     }
     if (_firstFocusableChild) {
       (_firstFocusableChild as any).focus();
@@ -128,10 +123,8 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
       return;
     }
 
-    let { root } = this.refs;
-
-    const _firstFocusableChild = getFirstFocusable(root, root.firstChild as HTMLElement, true);
-    const _lastFocusableChild = getLastTabbable(root, root.lastChild as HTMLElement, true);
+    const _firstFocusableChild = getFirstFocusable(this._root, this._root.firstChild as HTMLElement, true);
+    const _lastFocusableChild = getLastTabbable(this._root, this._root.lastChild as HTMLElement, true);
 
     if (ev.shiftKey && _firstFocusableChild === ev.target) {
       _lastFocusableChild!.focus();
@@ -148,7 +141,7 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
     if (FocusTrapZone._focusStack.length && this === FocusTrapZone._focusStack[FocusTrapZone._focusStack.length - 1]) {
       const focusedElement = document.activeElement as HTMLElement;
 
-      if (!elementContains(this.refs.root, focusedElement)) {
+      if (!elementContains(this._root, focusedElement)) {
         this.focus();
         ev.preventDefault();
         ev.stopPropagation();
@@ -160,7 +153,7 @@ export class FocusTrapZone extends BaseComponent<IFocusTrapZoneProps, {}> implem
     if (FocusTrapZone._clickStack.length && this === FocusTrapZone._clickStack[FocusTrapZone._clickStack.length - 1]) {
       const clickedElement = ev.target as HTMLElement;
 
-      if (clickedElement && !elementContains(this.refs.root, clickedElement)) {
+      if (clickedElement && !elementContains(this._root, clickedElement)) {
         this.focus();
         ev.preventDefault();
         ev.stopPropagation();
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx
index 18150eaecd7d4..3eaa6ec90c340 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/FocusTrapZonePage.tsx
@@ -9,16 +9,16 @@ import {
   PropertiesTableSet
 } from '@uifabric/example-app-base';
 import FocusTrapZoneBoxExample from './examples/FocusTrapZone.Box.Example';
-let FocusTrapZoneBoxExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx') as string;
+const FocusTrapZoneBoxExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx') as string;
 
 import FocusTrapZoneBoxExampleWithFocusableItem from './examples/FocusTrapZone.Box.FocusOnCustomElement.Example';
-let FocusTrapZoneBoxExampleWithFocusableItemCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx') as string;
+const FocusTrapZoneBoxExampleWithFocusableItemCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx') as string;
 
 import FocusTrapZoneBoxClickExample from './examples/FocusTrapZone.Box.Click.Example';
-let FocusTrapZoneBoxClickExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx') as string;
+const FocusTrapZoneBoxClickExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx') as string;
 
 import FocusTrapZoneNestedExample from './examples/FocusTrapZone.Nested.Example';
-let FocusTrapZoneNestedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx') as string;
+const FocusTrapZoneNestedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx') as string;
 
 export class FocusTrapZonePage extends React.Component<IComponentDemoPageProps, {}> {
   public render() {
@@ -42,6 +42,7 @@ export class FocusTrapZonePage extends React.Component<IComponentDemoPageProps,
             </ExampleCard>
           </div>
         }
+        allowNativeProps={ true }
         propertiesTables={
           <PropertiesTableSet
             sources={ [
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx
index 603cc4800d9ed..b4407acb7c392 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Click.Example.tsx
@@ -26,7 +26,7 @@ export default class BoxNoClickExample extends React.Component<React.HTMLAttribu
   }
 
   public render() {
-    let { isToggled } = this.state;
+    const { isToggled } = this.state;
 
     return (
       <div>
@@ -56,7 +56,7 @@ export default class BoxNoClickExample extends React.Component<React.HTMLAttribu
   }
 
   private _internalContents() {
-    let { isToggled } = this.state;
+    const { isToggled } = this.state;
 
     return (
       <div className='ms-FocusTrapZoneBoxExample'>
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx
index dcd1a73565524..0b6f3a9430ea9 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.Example.tsx
@@ -26,7 +26,7 @@ export default class BoxExample extends React.Component<React.HTMLAttributes<HTM
   }
 
   public render() {
-    let { isChecked } = this.state;
+    const { isChecked } = this.state;
 
     return (
       <div>
@@ -56,7 +56,7 @@ export default class BoxExample extends React.Component<React.HTMLAttributes<HTM
   }
 
   private _internalContents() {
-    let { isChecked } = this.state;
+    const { isChecked } = this.state;
 
     return (
       <div className='ms-FocusTrapZoneBoxExample'>
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx
index 7210625cc0c3f..b627b9fac3908 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Box.FocusOnCustomElement.Example.tsx
@@ -25,8 +25,8 @@ export default class BoxExample extends React.Component<React.HTMLAttributes<HTM
   }
 
   public render() {
-    let { isChecked } = this.state;
-    const className: string = 'shouldFocus input';
+    const { isChecked } = this.state;
+    const className = 'shouldFocus input';
 
     return (
       <div>
@@ -54,7 +54,7 @@ export default class BoxExample extends React.Component<React.HTMLAttributes<HTM
   }
 
   private _internalContents() {
-    let { isChecked } = this.state;
+    const { isChecked } = this.state;
 
     return (
       <div className='ms-FocusTrapZoneBoxExample'>
diff --git a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx
index ec592c6ed1072..efa8515f81155 100644
--- a/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusTrapZone/examples/FocusTrapZone.Nested.Example.tsx
@@ -22,7 +22,7 @@ interface IFocusTrapComponentState {
 class FocusTrapComponent extends React.Component<IFocusTrapComponentProps, IFocusTrapComponentState> {
 
   public render() {
-    let contents = (
+    const contents = (
       <div className='ms-FocusTrapComponent'>
         <DefaultButton
           onClick={ this._onStringButtonClicked }
@@ -84,7 +84,7 @@ export default class FocusTrapZoneNestedExample extends React.Component<{}, IFoc
   }
 
   public render() {
-    let { stateMap } = this.state;
+    const { stateMap } = this.state;
 
     return (
       <div>
diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx
index ce4ef11a8c89e..9ba0a6cc8551e 100644
--- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.test.tsx
@@ -7,11 +7,10 @@ import * as ReactTestUtils from 'react-dom/test-utils';
 import { KeyCodes } from '../../Utilities';
 
 import { FocusZone } from './FocusZone';
-import { FocusZoneDirection } from './FocusZone.types';
+import { FocusZoneDirection, FocusZoneTabbableElements } from './FocusZone.types';
 
 describe('FocusZone', () => {
   let lastFocusedElement: HTMLElement | undefined;
-  let tabKeyHit: number;
   function _onFocus(ev: any) {
     lastFocusedElement = ev.target;
   }
@@ -44,7 +43,6 @@ describe('FocusZone', () => {
 
   beforeEach(() => {
     lastFocusedElement = undefined;
-    tabKeyHit = 0;
   });
 
   it('can use arrows vertically', () => {
@@ -144,6 +142,49 @@ describe('FocusZone', () => {
     expect(lastFocusedElement).toBe(buttonC);
   });
 
+  it('can ignore arrowing if default is prevented', () => {
+    const component = ReactTestUtils.renderIntoDocument(
+      <div { ...{ onFocusCapture: _onFocus } }>
+        <FocusZone direction={ FocusZoneDirection.vertical }>
+          <button className='a'>a</button>
+          <button className='b'>b</button>
+        </FocusZone>
+      </div>
+    );
+
+    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance).firstChild as Element;
+
+    const buttonA = focusZone.querySelector('.a') as HTMLElement;
+    const buttonB = focusZone.querySelector('.b') as HTMLElement;
+
+    // Assign bounding locations to buttons.
+    setupElement(buttonA, {
+      clientRect: {
+        top: 0,
+        bottom: 30,
+        left: 0,
+        right: 100
+      }
+    });
+
+    setupElement(buttonB, {
+      clientRect: {
+        top: 30,
+        bottom: 60,
+        left: 0,
+        right: 100
+      }
+    });
+
+    // Focus the first button.
+    ReactTestUtils.Simulate.focus(buttonA);
+    expect(lastFocusedElement).toBe(buttonA);
+
+    // Pressing down should go to b.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.down, isDefaultPrevented: () => true } as any);
+    expect(lastFocusedElement).toBe(buttonA);
+  });
+
   it('can use arrows horizontally', () => {
     const component = ReactTestUtils.renderIntoDocument(
       <div { ...{ onFocusCapture: _onFocus } }>
@@ -354,6 +395,340 @@ describe('FocusZone', () => {
     expect(lastFocusedElement).toBe(buttonA);
   });
 
+  it('can use arrows bidirectionally with data-no-vertical-wrap', () => {
+    const component = ReactTestUtils.renderIntoDocument(
+      <div { ...{ onFocusCapture: _onFocus } }>
+        <FocusZone checkForNoWrap={ true } data-no-vertical-wrap={ true }>
+          <button className='a'>a</button>
+          <button className='b'>b</button>
+          <button className='c'>c</button>
+          <button className='d'>d</button>
+        </FocusZone>
+      </div>
+    );
+
+    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance).firstChild as Element;
+    const buttonA = focusZone.querySelector('.a') as HTMLElement;
+    const buttonB = focusZone.querySelector('.b') as HTMLElement;
+    const buttonC = focusZone.querySelector('.c') as HTMLElement;
+    const buttonD = focusZone.querySelector('.d') as HTMLElement;
+
+    // Set up a grid like so:
+    // A B
+    // C D
+    setupElement(buttonA, {
+      clientRect: {
+        top: 0,
+        bottom: 20,
+        left: 0,
+        right: 20
+      }
+    });
+
+    setupElement(buttonB, {
+      clientRect: {
+        top: 0,
+        bottom: 20,
+        left: 20,
+        right: 40
+      }
+    });
+
+    setupElement(buttonC, {
+      clientRect: {
+        top: 20,
+        bottom: 40,
+        left: 0,
+        right: 20
+      }
+    });
+
+    setupElement(buttonD, {
+      clientRect: {
+        top: 20,
+        bottom: 40,
+        left: 20,
+        right: 40
+      }
+    });
+
+    // Focus the first button.
+    ReactTestUtils.Simulate.focus(buttonA);
+    expect(lastFocusedElement).toBe(buttonA);
+
+    // Pressing up should stay on a.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.up });
+    expect(lastFocusedElement).toBe(buttonA);
+
+    // Pressing left should stay on a.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.left });
+    expect(lastFocusedElement).toBe(buttonA);
+
+    // Pressing right should go to b.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right });
+    expect(lastFocusedElement).toBe(buttonB);
+
+    // Pressing down should go to d.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.down });
+    expect(lastFocusedElement).toBe(buttonD);
+
+    // Pressing down stay on d.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.down });
+    expect(lastFocusedElement).toBe(buttonD);
+
+    // Pressing right stay on d.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right });
+    expect(lastFocusedElement).toBe(buttonD);
+
+    // Pressing left should go to c.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.left });
+    expect(lastFocusedElement).toBe(buttonC);
+
+    // Pressing down should stay on c.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.down });
+    expect(lastFocusedElement).toBe(buttonC);
+
+    // Pressing left should go to b.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.left });
+    expect(lastFocusedElement).toBe(buttonB);
+
+    // Pressing up should stay on b.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.up });
+    expect(lastFocusedElement).toBe(buttonB);
+
+    // Pressing right should go to c.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right });
+    expect(lastFocusedElement).toBe(buttonC);
+  });
+
+  it('can use arrows bidirectionally with data-no-horizontal-wrap', () => {
+    const component = ReactTestUtils.renderIntoDocument(
+      <div { ...{ onFocusCapture: _onFocus } }>
+        <FocusZone checkForNoWrap={ true } data-no-horizontal-wrap={ true }>
+          <button className='a'>a</button>
+          <button className='b'>b</button>
+          <button className='c'>c</button>
+          <button className='d'>d</button>
+        </FocusZone>
+      </div>
+    );
+
+    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance).firstChild as Element;
+    const buttonA = focusZone.querySelector('.a') as HTMLElement;
+    const buttonB = focusZone.querySelector('.b') as HTMLElement;
+    const buttonC = focusZone.querySelector('.c') as HTMLElement;
+    const buttonD = focusZone.querySelector('.d') as HTMLElement;
+
+    // Set up a grid like so:
+    // A B
+    // C D
+    setupElement(buttonA, {
+      clientRect: {
+        top: 0,
+        bottom: 20,
+        left: 0,
+        right: 20
+      }
+    });
+
+    setupElement(buttonB, {
+      clientRect: {
+        top: 0,
+        bottom: 20,
+        left: 20,
+        right: 40
+      }
+    });
+
+    setupElement(buttonC, {
+      clientRect: {
+        top: 20,
+        bottom: 40,
+        left: 0,
+        right: 20
+      }
+    });
+
+    setupElement(buttonD, {
+      clientRect: {
+        top: 20,
+        bottom: 40,
+        left: 20,
+        right: 40
+      }
+    });
+
+    // Focus the first button.
+    ReactTestUtils.Simulate.focus(buttonA);
+    expect(lastFocusedElement).toBe(buttonA);
+
+    // Pressing up should stay on a.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.up });
+    expect(lastFocusedElement).toBe(buttonA);
+
+    // Pressing left should stay on a.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.left });
+    expect(lastFocusedElement).toBe(buttonA);
+
+    // Pressing right should go to b.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right });
+    expect(lastFocusedElement).toBe(buttonB);
+
+    // Pressing right should stay on b.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right });
+    expect(lastFocusedElement).toBe(buttonB);
+
+    // Pressing down should go to d.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.down });
+    expect(lastFocusedElement).toBe(buttonD);
+
+    // Pressing down stay on d.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.down });
+    expect(lastFocusedElement).toBe(buttonD);
+
+    // Pressing right stay on d.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right });
+    expect(lastFocusedElement).toBe(buttonD);
+
+    // Pressing left should go to c.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.left });
+    expect(lastFocusedElement).toBe(buttonC);
+
+    // Pressing left should stay on c.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.left });
+    expect(lastFocusedElement).toBe(buttonC);
+
+    // Pressing down should go to d.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.down });
+    expect(lastFocusedElement).toBe(buttonD);
+
+    // Pressing left should go to c.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.left });
+    expect(lastFocusedElement).toBe(buttonC);
+
+    // Pressing left should go to a.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.up });
+    expect(lastFocusedElement).toBe(buttonA);
+
+    // Pressing left should go to b.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right });
+    expect(lastFocusedElement).toBe(buttonB);
+
+    // Pressing up should go to a.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.up });
+    expect(lastFocusedElement).toBe(buttonA);
+  });
+
+  it('can use arrows bidirectionally with data-no-horizontal-wrap and data-no-vertical-wrap', () => {
+    const component = ReactTestUtils.renderIntoDocument(
+      <div { ...{ onFocusCapture: _onFocus } }>
+        <FocusZone checkForNoWrap={ true } data-no-horizontal-wrap={ true } data-no-vertical-wrap={ true }>
+          <button className='a'>a</button>
+          <button className='b'>b</button>
+          <button className='c'>c</button>
+          <button className='d'>d</button>
+        </FocusZone>
+      </div>
+    );
+
+    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance).firstChild as Element;
+    const buttonA = focusZone.querySelector('.a') as HTMLElement;
+    const buttonB = focusZone.querySelector('.b') as HTMLElement;
+    const buttonC = focusZone.querySelector('.c') as HTMLElement;
+    const buttonD = focusZone.querySelector('.d') as HTMLElement;
+
+    // Set up a grid like so:
+    // A B
+    // C D
+    setupElement(buttonA, {
+      clientRect: {
+        top: 0,
+        bottom: 20,
+        left: 0,
+        right: 20
+      }
+    });
+
+    setupElement(buttonB, {
+      clientRect: {
+        top: 0,
+        bottom: 20,
+        left: 20,
+        right: 40
+      }
+    });
+
+    setupElement(buttonC, {
+      clientRect: {
+        top: 20,
+        bottom: 40,
+        left: 0,
+        right: 20
+      }
+    });
+
+    setupElement(buttonD, {
+      clientRect: {
+        top: 20,
+        bottom: 40,
+        left: 20,
+        right: 40
+      }
+    });
+
+    // Focus the first button.
+    ReactTestUtils.Simulate.focus(buttonA);
+    expect(lastFocusedElement).toBe(buttonA);
+
+    // Pressing up should stay on a.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.up });
+    expect(lastFocusedElement).toBe(buttonA);
+
+    // Pressing left should stay on a.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.left });
+    expect(lastFocusedElement).toBe(buttonA);
+
+    // Pressing right should go to b.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right });
+    expect(lastFocusedElement).toBe(buttonB);
+
+    // Pressing right should stay on b.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right });
+    expect(lastFocusedElement).toBe(buttonB);
+
+    // Pressing up should stay on b.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.up });
+    expect(lastFocusedElement).toBe(buttonB);
+
+    // Pressing down should go to d.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.down });
+    expect(lastFocusedElement).toBe(buttonD);
+
+    // Pressing down stay on d.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.down });
+    expect(lastFocusedElement).toBe(buttonD);
+
+    // Pressing right stay on d.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right });
+    expect(lastFocusedElement).toBe(buttonD);
+
+    // Pressing left should go to c.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.left });
+    expect(lastFocusedElement).toBe(buttonC);
+
+    // Pressing left should stay on c.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.left });
+    expect(lastFocusedElement).toBe(buttonC);
+
+    // Pressing down should stay on c.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.down });
+    expect(lastFocusedElement).toBe(buttonC);
+
+    // Pressing left should go to b.
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.up });
+    expect(lastFocusedElement).toBe(buttonA);
+  });
+
   it('correctly skips data-not-focusable elements', () => {
     const component = ReactTestUtils.renderIntoDocument(
       <div { ...{ onFocusCapture: _onFocus } }>
@@ -714,7 +1089,7 @@ describe('FocusZone', () => {
     const tabDownListener = jest.fn();
     const component = ReactTestUtils.renderIntoDocument(
       <div { ...{ onFocusCapture: _onFocus, onKeyDown: tabDownListener } }>
-        <FocusZone {...{ allowTabKey: true, isCircularNavigation: true }}>
+        <FocusZone { ...{ handleTabKey: FocusZoneTabbableElements.all, isCircularNavigation: true } }>
           <button className='a'>a</button>
           <button className='b'>b</button>
           <button className='c'>c</button>
@@ -826,4 +1201,62 @@ describe('FocusZone', () => {
     const onKeyDownEvent = tabDownListener.mock.calls[0][0];
     expect(onKeyDownEvent.which).toBe(KeyCodes.tab);
   });
+
+  it('should stay in input box with arrow keys and exit with tab', () => {
+    const tabDownListener = jest.fn();
+    const component = ReactTestUtils.renderIntoDocument(
+      <div { ...{ onFocusCapture: _onFocus, onKeyDown: tabDownListener } }>
+        <FocusZone { ...{ handleTabKey: FocusZoneTabbableElements.inputOnly, isCircularNavigation: false } }>
+          <input type='text' className='a' />
+          <button className='b'>b</button>
+        </FocusZone>
+      </div >
+    );
+
+    const focusZone = ReactDOM.findDOMNode(component as React.ReactInstance).firstChild as Element;
+
+    const inputA = focusZone.querySelector('.a') as HTMLElement;
+    const buttonB = focusZone.querySelector('.b') as HTMLElement;
+
+    setupElement(inputA, {
+      clientRect: {
+        top: 0,
+        bottom: 20,
+        left: 20,
+        right: 40
+      }
+    });
+
+    setupElement(buttonB, {
+      clientRect: {
+        top: 0,
+        bottom: 20,
+        left: 20,
+        right: 40
+      }
+    });
+
+    // InputA should be focused.
+    inputA.focus();
+    expect(lastFocusedElement).toBe(inputA);
+
+    // When we hit right/left on the arrow key, we don't want to be able to leave focus on an input
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right });
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right });
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right });
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right });
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right });
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right });
+    ReactTestUtils.Simulate.keyDown(focusZone, { which: KeyCodes.right });
+    expect(lastFocusedElement).toBe(inputA);
+
+    expect(inputA.tabIndex).toBe(0);
+    expect(buttonB.tabIndex).toBe(-1);
+
+    // Pressing tab will be the only way for us to exit the focus zone
+    ReactTestUtils.Simulate.keyDown(inputA, { which: KeyCodes.tab });
+    expect(lastFocusedElement).toBe(buttonB);
+    expect(inputA.tabIndex).toBe(-1);
+    expect(buttonB.tabIndex).toBe(0);
+  });
 });
diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx
index 5686b4edb7f3f..8047034318a58 100644
--- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import {
   FocusZoneDirection,
+  FocusZoneTabbableElements,
   IFocusZone,
   IFocusZoneProps
 } from './FocusZone.types';
@@ -19,18 +20,22 @@ import {
   getParent,
   getPreviousElement,
   getRTL,
-  getWindow,
   isElementFocusZone,
   isElementFocusSubZone,
-  isElementTabbable
+  isElementTabbable,
+  shouldWrapFocus
 } from '../../Utilities';
 
 const IS_FOCUSABLE_ATTRIBUTE = 'data-is-focusable';
 const IS_ENTER_DISABLED_ATTRIBUTE = 'data-disable-click-on-enter';
 const FOCUSZONE_ID_ATTRIBUTE = 'data-focuszone-id';
 const TABINDEX = 'tabindex';
+const NO_VERTICAL_WRAP = 'data-no-vertical-wrap';
+const NO_HORIZONTAL_WRAP = 'data-no-horizontal-wrap';
+const LARGE_DISTANCE_FROM_CENTER = 999999999;
+const LARGE_NEGATIVE_DISTANCE_FROM_CENTER = -999999999;
 
-let _allInstances: {
+const _allInstances: {
   [key: string]: FocusZone
 } = {};
 
@@ -58,10 +63,16 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
   private _focusAlignment: IPoint;
   private _isInnerZone: boolean;
 
+  /** Used to allow us to move to next focusable element even when we're focusing on a input element when pressing tab */
+  private _processingTabKey: boolean;
+
   constructor(props: IFocusZoneProps) {
     super(props);
 
-    this._warnDeprecations({ rootProps: undefined });
+    this._warnDeprecations({
+      rootProps: undefined,
+      'allowTabKey': 'handleTabKey'
+    });
 
     this._id = getId('FocusZone');
 
@@ -69,6 +80,8 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
       left: 0,
       top: 0
     };
+
+    this._processingTabKey = false;
   }
 
   public componentDidMount() {
@@ -109,8 +122,8 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
   }
 
   public render() {
-    let { rootProps, ariaDescribedBy, ariaLabelledBy, className } = this.props;
-    let divProps = getNativeProps(this.props, divProperties);
+    const { rootProps, ariaDescribedBy, ariaLabelledBy, className } = this.props;
+    const divProps = getNativeProps(this.props, divProperties);
 
     const Tag = this.props.elementType || 'div';
 
@@ -139,6 +152,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
 
   /**
    * Sets focus to the first tabbable item in the zone.
+   * @param {boolean} forceIntoFirstElement If true, focus will be forced into the first element, even if focus is already in the focus zone.
    * @returns True if focus could be set to an active element, false if no operation was taken.
    */
   public focus(forceIntoFirstElement: boolean = false): boolean {
@@ -153,7 +167,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
         }
 
         return false;
-      } else if (this._activeElement && elementContains(this._root, this._activeElement)
+      } else if (!forceIntoFirstElement && this._activeElement && elementContains(this._root, this._activeElement)
         && isElementTabbable(this._activeElement)) {
         this._activeElement.focus();
         return true;
@@ -174,7 +188,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
    * @returns True if focus could be set to an active element, false if no operation was taken.
    */
   public focusElement(element: HTMLElement): boolean {
-    let { onBeforeFocus } = this.props;
+    const { onBeforeFocus } = this.props;
 
     if (onBeforeFocus && !onBeforeFocus(element)) {
       return false;
@@ -194,7 +208,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
 
   @autobind
   private _onFocus(ev: React.FocusEvent<HTMLElement>) {
-    let { onActiveElementChanged } = this.props;
+    const { onActiveElementChanged } = this.props;
 
     if (this._isImmediateDescendantOfZone(ev.target as HTMLElement)) {
       this._activeElement = ev.target as HTMLElement;
@@ -295,10 +309,11 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
 
     if (this.props.onKeyDown) {
       this.props.onKeyDown(ev);
+    }
 
-      if (ev.isDefaultPrevented()) {
-        return;
-      }
+    // If the default has been prevented, do not process keyboard events.
+    if (ev.isDefaultPrevented()) {
+      return;
     }
 
     if (
@@ -307,7 +322,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
       this._isImmediateDescendantOfZone(ev.target as HTMLElement)) {
 
       // Try to focus
-      let innerZone = this._getFirstInnerZone();
+      const innerZone = this._getFirstInnerZone();
 
       if (innerZone) {
         if (!innerZone.focus(true)) {
@@ -355,20 +370,20 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
           return;
 
         case KeyCodes.tab:
-          if (this.props.allowTabKey) {
-            if (direction === FocusZoneDirection.vertical) {
-              if (ev.shiftKey) {
-                this._moveFocusUp();
-              } else {
-                this._moveFocusDown();
-              }
-              break;
+          if (this.props.allowTabKey ||
+            this.props.handleTabKey === FocusZoneTabbableElements.all ||
+            (this.props.handleTabKey === FocusZoneTabbableElements.inputOnly &&
+              this._isElementInput(ev.target as HTMLElement))) {
+            let focusChanged = false;
+            this._processingTabKey = true;
+            if (direction === FocusZoneDirection.vertical ||
+              !this._shouldWrapFocus(this._activeElement as HTMLElement, NO_HORIZONTAL_WRAP)) {
+              focusChanged = ev.shiftKey ? this._moveFocusUp() : this._moveFocusDown();
             } else if (direction === FocusZoneDirection.horizontal || direction === FocusZoneDirection.bidirectional) {
-              if (ev.shiftKey) {
-                this._moveFocusLeft();
-              } else {
-                this._moveFocusRight();
-              }
+              focusChanged = ev.shiftKey ? this._moveFocusLeft() : this._moveFocusRight();
+            }
+            this._processingTabKey = false;
+            if (focusChanged) {
               break;
             }
           }
@@ -458,7 +473,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
       if (isElementFocusZone(child)) {
         return _allInstances[child.getAttribute(FOCUSZONE_ID_ATTRIBUTE) as string];
       }
-      let match = this._getFirstInnerZone(child);
+      const match = this._getFirstInnerZone(child);
 
       if (match) {
         return match;
@@ -473,13 +488,14 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
   private _moveFocus(
     isForward: boolean,
     getDistanceFromCenter: (activeRect: ClientRect, targetRect: ClientRect) => number,
-    ev?: Event): boolean {
+    ev?: Event,
+    useDefaultWrap: boolean = true): boolean {
 
     let element = this._activeElement;
     let candidateDistance = -1;
     let candidateElement: HTMLElement | undefined = undefined;
     let changedFocus = false;
-    let isBidirectional = this.props.direction === FocusZoneDirection.bidirectional;
+    const isBidirectional = this.props.direction === FocusZoneDirection.bidirectional;
 
     if (!element) {
       return false;
@@ -494,9 +510,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
     const activeRect = isBidirectional ? element.getBoundingClientRect() : null;
 
     do {
-      element = (isForward ?
-        getNextElement(this._root, element) :
-        getPreviousElement(this._root, element)) as HTMLElement;
+      element = (isForward ? getNextElement(this._root, element) : getPreviousElement(this._root, element)) as HTMLElement;
 
       if (isBidirectional) {
         if (element) {
@@ -528,7 +542,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
     if (candidateElement && candidateElement !== this._activeElement) {
       changedFocus = true;
       this.focusElement(candidateElement);
-    } else if (this.props.isCircularNavigation) {
+    } else if (this.props.isCircularNavigation && useDefaultWrap) {
       if (isForward) {
         return this.focusElement(getNextElement(this._root, this._root.firstElementChild as HTMLElement, true) as HTMLElement);
       } else {
@@ -549,11 +563,15 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
       // If the difference between top and bottom are within a pixel then we should treat
       // them as equivalent by using Math.floor. For instance 5.2222 and 5.222221 should be equivalent,
       // but without Math.Floor they will be handled incorrectly.
-      let targetRectTop = Math.floor(targetRect.top);
-      let activeRectBottom = Math.floor(activeRect.bottom);
+      const targetRectTop = Math.floor(targetRect.top);
+      const activeRectBottom = Math.floor(activeRect.bottom);
 
       if (targetRectTop < activeRectBottom) {
-        return 999999999;
+        if (!this._shouldWrapFocus(this._activeElement as HTMLElement, NO_VERTICAL_WRAP)) {
+          return LARGE_NEGATIVE_DISTANCE_FROM_CENTER;
+        }
+
+        return LARGE_DISTANCE_FROM_CENTER;
       }
 
       if ((targetTop === -1 && targetRectTop >= activeRectBottom) ||
@@ -585,12 +603,15 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
       // If the difference between top and bottom are within a pixel then we should treat
       // them as equivalent by using Math.floor. For instance 5.2222 and 5.222221 should be equivalent,
       // but without Math.Floor they will be handled incorrectly.
-      let targetRectBottom = Math.floor(targetRect.bottom);
-      let targetRectTop = Math.floor(targetRect.top);
-      let activeRectTop = Math.floor(activeRect.top);
+      const targetRectBottom = Math.floor(targetRect.bottom);
+      const targetRectTop = Math.floor(targetRect.top);
+      const activeRectTop = Math.floor(activeRect.top);
 
       if (targetRectBottom > activeRectTop) {
-        return 999999999;
+        if (!this._shouldWrapFocus(this._activeElement as HTMLElement, NO_VERTICAL_WRAP)) {
+          return LARGE_NEGATIVE_DISTANCE_FROM_CENTER;
+        }
+        return LARGE_DISTANCE_FROM_CENTER;
       }
 
       if ((targetTop === -1 && targetRectBottom <= activeRectTop) ||
@@ -613,6 +634,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
   }
 
   private _moveFocusLeft(): boolean {
+    const shouldWrap = this._shouldWrapFocus(this._activeElement as HTMLElement, NO_HORIZONTAL_WRAP);
     if (this._moveFocus(getRTL(), (activeRect: ClientRect, targetRect: ClientRect) => {
       let distance = -1;
 
@@ -623,10 +645,17 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
       ) {
 
         distance = activeRect.right - targetRect.right;
+      } else {
+        if (!shouldWrap) {
+          distance = LARGE_NEGATIVE_DISTANCE_FROM_CENTER;
+        }
       }
 
       return distance;
-    })) {
+    },
+      undefined /*ev*/,
+      shouldWrap
+    )) {
       this._setFocusAlignment(this._activeElement as HTMLElement, true, false);
       return true;
     }
@@ -635,6 +664,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
   }
 
   private _moveFocusRight(): boolean {
+    const shouldWrap = this._shouldWrapFocus(this._activeElement as HTMLElement, NO_HORIZONTAL_WRAP);
     if (this._moveFocus(!getRTL(), (activeRect: ClientRect, targetRect: ClientRect) => {
       let distance = -1;
 
@@ -645,10 +675,15 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
       ) {
 
         distance = targetRect.left - activeRect.left;
+      } else if (!shouldWrap) {
+        distance = LARGE_NEGATIVE_DISTANCE_FROM_CENTER;
       }
 
       return distance;
-    })) {
+    },
+      undefined /*ev*/,
+      shouldWrap
+    )) {
       this._setFocusAlignment(this._activeElement as HTMLElement, true, false);
       return true;
     }
@@ -760,21 +795,25 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
   }
 
   private _shouldInputLoseFocus(element: HTMLInputElement, isForward?: boolean) {
-    if (element &&
+    // If a tab was used, we want to focus on the next element.
+    if (!this._processingTabKey &&
+      element &&
       element.type &&
       ALLOWED_INPUT_TYPES.indexOf(element.type.toLowerCase()) > -1) {
-      let selectionStart = element.selectionStart;
-      let selectionEnd = element.selectionEnd;
-      let isRangeSelected = selectionStart !== selectionEnd;
-      let inputValue = element.value;
+      const selectionStart = element.selectionStart;
+      const selectionEnd = element.selectionEnd;
+      const isRangeSelected = selectionStart !== selectionEnd;
+      const inputValue = element.value;
 
       // We shouldn't lose focus in the following cases:
       // 1. There is range selected.
       // 2. When selection start is larger than 0 and it is backward.
       // 3. when selection start is not the end of lenght and it is forward.
+      // 4. We press any of the arrow keys when our handleTabKey isn't none or undefined (only losing focus if we hit tab)
       if (isRangeSelected ||
         (selectionStart > 0 && !isForward) ||
-        (selectionStart !== inputValue.length && isForward)) {
+        (selectionStart !== inputValue.length && isForward) ||
+        !!this.props.handleTabKey) {
         return false;
       }
     }
@@ -782,4 +821,7 @@ export class FocusZone extends BaseComponent<IFocusZoneProps, {}> implements IFo
     return true;
   }
 
+  private _shouldWrapFocus(element: HTMLElement, noWrapDataAttribute: 'data-no-vertical-wrap' | 'data-no-horizontal-wrap'): boolean {
+    return !!this.props.checkForNoWrap ? shouldWrapFocus(element, noWrapDataAttribute) : true;
+  }
 }
diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts
index d8417e1699c65..ffd003fc2a46c 100644
--- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts
+++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZone.types.ts
@@ -7,9 +7,10 @@ import { FocusZone } from './FocusZone';
 export interface IFocusZone {
   /**
    * Sets focus to the first tabbable item in the zone.
+   * @param {boolean} forceIntoFirstElement If true, focus will be forced into the first element, even if focus is already in the focus zone.
    * @returns True if focus could be set to an active element, false if no operation was taken.
    */
-  focus(): boolean;
+  focus(forceIntoFirstElement?: boolean): boolean;
 
   /**
    * Sets focus to a specific child element within the zone. This can be used in conjunction with
@@ -107,8 +108,36 @@ export interface IFocusZoneProps extends React.HTMLAttributes<HTMLElement | Focu
    * Allows tab key to be handled to tab through a list of items in the focus zone,
    * an unfortunate side effect is that users will not be able to tab out of the focus zone
    * and have to hit escape or some other key.
+   * @deprecated Use 'handleTabKey' instead.
+   *
    */
   allowTabKey?: boolean;
+
+  /**
+   * Allows tab key to be handled to tab through a list of items in the focus zone,
+   * an unfortunate side effect is that users will not be able to tab out of the focus zone
+   * and have to hit escape or some other key.
+   */
+  handleTabKey?: FocusZoneTabbableElements;
+
+  /**
+   * Whether the to check for data-no-horizontal-wrap or data-no-vertical-wrap attributes
+   * when determining how to move focus
+   * @default false
+   */
+  checkForNoWrap?: boolean;
+}
+
+export const enum FocusZoneTabbableElements {
+
+  /** Tabbing is not allowed */
+  none = 0,
+
+  /** All tabbing action is allowed */
+  all = 1,
+
+  /** Tabbing is allowed only on input elements */
+  inputOnly = 2
 }
 
 export enum FocusZoneDirection {
diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx
index 2c7608aab2f50..7443be6a2b82c 100644
--- a/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx
+++ b/packages/office-ui-fabric-react/src/components/FocusZone/FocusZonePage.tsx
@@ -8,10 +8,12 @@ import {
 import { FocusZonePhotosExample } from './examples/FocusZone.Photos.Example';
 import { FocusZoneListExample } from './examples/FocusZone.List.Example';
 import { FocusZoneDisabledExample } from './examples/FocusZone.Disabled.Example';
+import { FocusZoneTabbableExample } from './examples/FocusZone.Tabbable.Example';
 
 const FocusZonePhotosExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Photos.Example.tsx') as string;
 const FocusZoneListExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.List.Example.tsx') as string;
 const FocusZoneDisabledExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Disabled.Example.tsx') as string;
+const FocusZoneTabbableCode = require('!raw-loader!office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx') as string;
 
 export class FocusZonePage extends React.Component<IComponentDemoPageProps, {}> {
   public render() {
@@ -30,8 +32,12 @@ export class FocusZonePage extends React.Component<IComponentDemoPageProps, {}>
             <ExampleCard title='Disabled FocusZone' code={ FocusZoneDisabledExampleCode }>
               <FocusZoneDisabledExample />
             </ExampleCard>
+            <ExampleCard title='Tabbable FocusZone' code={ FocusZoneTabbableCode }>
+              <FocusZoneTabbableExample />
+            </ExampleCard>
           </div>
         }
+        allowNativeProps={ true }
         propertiesTables={
           <PropertiesTableSet
             sources={ [
diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.scss b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.scss
new file mode 100644
index 0000000000000..5dd6ad148d8a0
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.scss
@@ -0,0 +1,11 @@
+:global {
+  .ms-FocusZoneTabbableExample .ms-Row {
+    display: block;
+    margin: 5px;
+  }
+
+  .ms-FocusZoneTabbableExample-textField {
+    display: inline-block;
+    width: 300px;
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx
new file mode 100644
index 0000000000000..14d6d2308c0ce
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/FocusZone/examples/FocusZone.Tabbable.Example.tsx
@@ -0,0 +1,31 @@
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+
+import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from 'office-ui-fabric-react/lib/FocusZone';
+import { TextField } from 'office-ui-fabric-react/lib/TextField';
+import './FocusZone.Tabbable.Example.scss';
+
+export const FocusZoneTabbableExample = () => (
+  <div className='ms-FocusZoneTabbableExample'>
+    <div className='ms-Row'>
+      <FocusZone direction={ FocusZoneDirection.horizontal } handleTabKey={ FocusZoneTabbableElements.all } isCircularNavigation={ true }>
+        <span>Circular Tabbable FocusZone: </span>
+        <DefaultButton>Button 1</DefaultButton>
+        <DefaultButton>Button 2</DefaultButton>
+        <TextField value='FocusZone TextField' className='ms-FocusZoneTabbableExample-textField' />
+        <DefaultButton>Button 3</DefaultButton>
+      </FocusZone>
+    </div>
+    <div className='ms-Row'>
+      <FocusZone direction={ FocusZoneDirection.horizontal } handleTabKey={ FocusZoneTabbableElements.inputOnly } isCircularNavigation={ false }>
+        <span>Input Only FocusZone: </span>
+        <DefaultButton>Button 1</DefaultButton>
+        <DefaultButton>Button 2</DefaultButton>
+        <TextField value='FocusZone TextField' className='ms-FocusZoneTabbableExample-textField' />
+        <DefaultButton>Button 3</DefaultButton>
+      </FocusZone>
+    </div>
+  </div>
+);
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.tsx
index dac0cb2d86161..15926ce7262dc 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupFooter.tsx
@@ -10,7 +10,7 @@ const styles: any = stylesImport;
 
 export class GroupFooter extends BaseComponent<IGroupDividerProps, {}> {
   public render(): JSX.Element | null {
-    let { group, groupLevel, footerText } = this.props;
+    const { group, groupLevel, footerText } = this.props;
 
     if (group && footerText) {
       return (
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.scss b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.scss
index 95d538e49e2fc..8cd93d87f595c 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.scss
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.scss
@@ -73,7 +73,7 @@ $groupHeader-ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
   color: $ms-color-neutralSecondary;
   padding-top: 4px;
 
-  :global(.ms-Icon) {
+  :global(i) {
     transform: rotate(-180deg);
     transform-origin: 50% 50%;
     transition: transform .1s linear;
@@ -84,17 +84,6 @@ $groupHeader-ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
   }
 }
 
-.loading {
-  visibility: hidden;
-  opacity: 0;
-  transition: visibility $ms-animation-duration-3, opacity $ms-animation-duration-3;
-
-  &.loadingIsVisible {
-    visibility: visible;
-    opacity: 1;
-  }
-}
-
 .dropIcon {
   position: absolute;
   @include ms-left(-26px);
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx
index 553a964dee25b..a705cab90dc2d 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupHeader.tsx
@@ -31,9 +31,9 @@ export class GroupHeader extends BaseComponent<IGroupDividerProps, IGroupHeaderS
 
   public componentWillReceiveProps(newProps: any) {
     if (newProps.group) {
-      let newCollapsed = newProps.group.isCollapsed;
-      let isGroupLoading = newProps.headerProps && newProps.headerProps.isGroupLoading;
-      let newLoadingVisible = !newCollapsed && isGroupLoading && isGroupLoading(newProps.group);
+      const newCollapsed = newProps.group.isCollapsed;
+      const isGroupLoading = newProps.headerProps && newProps.headerProps.isGroupLoading;
+      const newLoadingVisible = !newCollapsed && isGroupLoading && isGroupLoading(newProps.group);
 
       this.setState({
         isCollapsed: newCollapsed,
@@ -44,23 +44,25 @@ export class GroupHeader extends BaseComponent<IGroupDividerProps, IGroupHeaderS
 
   public render(): JSX.Element | null {
     let {
+      isCollapsedGroupSelectVisible
+    } = this.props;
+    const {
       group,
       groupLevel,
       viewport,
       selectionMode,
       loadingText,
       isSelected,
-      selected,
-      isCollapsedGroupSelectVisible
+      selected
     } = this.props;
-    let { isCollapsed, isLoadingVisible } = this.state;
+    const { isCollapsed, isLoadingVisible } = this.state;
 
     if (isCollapsedGroupSelectVisible === undefined) {
       isCollapsedGroupSelectVisible = true;
     }
-    let canSelectGroup = selectionMode === SelectionMode.multiple;
-    let isSelectionCheckVisible = canSelectGroup && (isCollapsedGroupSelectVisible || !(group && group.isCollapsed));
-    let currentlySelected = isSelected || selected;
+    const canSelectGroup = selectionMode === SelectionMode.multiple;
+    const isSelectionCheckVisible = canSelectGroup && (isCollapsedGroupSelectVisible || !(group && group.isCollapsed));
+    const currentlySelected = isSelected || selected;
 
     if (!group) {
       return null;
@@ -119,15 +121,9 @@ export class GroupHeader extends BaseComponent<IGroupDividerProps, IGroupHeaderS
             <span className={ styles.headerCount }>({ group.count }{ group.hasMoreData && '+' })</span>
           </div>
 
-          <div
-            className={ css(
-              'ms-GroupHeader-loading',
-              styles.loading,
-              isLoadingVisible && ('is-loading ' + styles.loadingIsVisible)
-            ) }
-          >
+          { isLoadingVisible && (
             <Spinner label={ loadingText } />
-          </div>
+          ) }
 
         </FocusZone>
       </div>
@@ -136,11 +132,11 @@ export class GroupHeader extends BaseComponent<IGroupDividerProps, IGroupHeaderS
 
   @autobind
   private _onToggleCollapse(ev: React.MouseEvent<HTMLElement>) {
-    let { group, onToggleCollapse, isGroupLoading } = this.props;
-    let { isCollapsed } = this.state;
+    const { group, onToggleCollapse, isGroupLoading } = this.props;
+    const { isCollapsed } = this.state;
 
-    let newCollapsed = !isCollapsed;
-    let newLoadingVisible = !newCollapsed && isGroupLoading && isGroupLoading(group!);
+    const newCollapsed = !isCollapsed;
+    const newLoadingVisible = !newCollapsed && isGroupLoading && isGroupLoading(group!);
 
     this.setState({
       isCollapsed: newCollapsed,
@@ -156,7 +152,7 @@ export class GroupHeader extends BaseComponent<IGroupDividerProps, IGroupHeaderS
 
   @autobind
   private _onToggleSelectGroupClick(ev: React.MouseEvent<HTMLElement>) {
-    let { onToggleSelectGroup, group } = this.props;
+    const { onToggleSelectGroup, group } = this.props;
 
     if (onToggleSelectGroup) {
       onToggleSelectGroup(group!);
@@ -168,7 +164,7 @@ export class GroupHeader extends BaseComponent<IGroupDividerProps, IGroupHeaderS
 
   @autobind
   private _onHeaderClick() {
-    let { group, onGroupHeaderClick, onToggleSelectGroup } = this.props;
+    const { group, onGroupHeaderClick, onToggleSelectGroup } = this.props;
 
     if (onGroupHeaderClick) {
       onGroupHeaderClick(group!);
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupShowAll.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupShowAll.tsx
index cf6a36be0f960..3480dd5a106e2 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupShowAll.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupShowAll.tsx
@@ -24,7 +24,7 @@ export class GroupShowAll extends BaseComponent<IGroupDividerProps, {}> {
   };
 
   public render(): JSX.Element | null {
-    let { group, groupLevel, showAllLinkText } = this.props;
+    const { group, groupLevel, showAllLinkText } = this.props;
 
     if (group) {
       return (
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx
index 5d3718724f1ea..26f914eb1d8b4 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedList.tsx
@@ -38,10 +38,10 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
 
   public refs: {
     [key: string]: React.ReactInstance,
-    root: HTMLElement,
-    list: List
   };
 
+  private _list: List;
+
   private _isSomeGroupExpanded: boolean;
 
   constructor(props: IGroupedListProps) {
@@ -56,11 +56,11 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
   }
 
   public scrollToIndex(index: number, measureItem?: (itemIndex: number) => number): void {
-    this.refs.list && this.refs.list.scrollToIndex(index, measureItem);
+    this._list && this._list.scrollToIndex(index, measureItem);
   }
 
   public componentWillReceiveProps(newProps: IGroupedListProps) {
-    let {
+    const {
       groups,
       selectionMode
     } = this.props;
@@ -81,18 +81,17 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
   }
 
   public render() {
-    let {
+    const {
       className,
       usePageCache,
       onShouldVirtualize
     } = this.props;
-    let {
+    const {
       groups
     } = this.state;
 
     return (
       <div
-        ref='root'
         className={ css('ms-GroupedList', styles.root, className) }
         data-automationid='GroupedList'
         data-is-scrollable='false'
@@ -101,11 +100,11 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
         { !groups ?
           this._renderGroup(null, 0) : (
             <List
-              ref='list'
+              ref={ this._resolveRef('_list') }
               items={ groups }
               onRenderCell={ this._renderGroup }
               getItemCountForPage={ this._returnOne }
-              getPageSpecification= { this._getPageSpecification }
+              getPageSpecification={ this._getPageSpecification }
               usePageCache={ usePageCache }
               onShouldVirtualize={ onShouldVirtualize }
             />
@@ -121,9 +120,9 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
   }
 
   public toggleCollapseAll(allCollapsed: boolean) {
-    let { groups } = this.state;
-    let { groupProps } = this.props;
-    let onToggleCollapseAll = groupProps && groupProps.onToggleCollapseAll;
+    const { groups } = this.state;
+    const { groupProps } = this.props;
+    const onToggleCollapseAll = groupProps && groupProps.onToggleCollapseAll;
 
     if (groups) {
       if (onToggleCollapseAll) {
@@ -142,7 +141,7 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
 
   @autobind
   private _renderGroup(group: any, groupIndex: number) {
-    let {
+    const {
       dragDropEvents,
       dragDropHelper,
       eventsToRegister,
@@ -152,20 +151,21 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
       onRenderCell,
       selectionMode,
       selection,
-      viewport
+      viewport,
+      onShouldVirtualize
     } = this.props;
 
     // override group header/footer props as needed
-    let dividerProps = {
+    const dividerProps = {
       onToggleSelectGroup: this._onToggleSelectGroup,
       onToggleCollapse: this._onToggleCollapse,
       onToggleSummarize: this._onToggleSummarize
     };
 
-    let headerProps = assign({}, groupProps!.headerProps, dividerProps);
-    let showAllProps = assign({}, groupProps!.showAllProps, dividerProps);
-    let footerProps = assign({}, groupProps!.footerProps, dividerProps);
-    let groupNestingDepth = this._getGroupNestingDepth();
+    const headerProps = assign({}, groupProps!.headerProps, dividerProps);
+    const showAllProps = assign({}, groupProps!.showAllProps, dividerProps);
+    const footerProps = assign({}, groupProps!.footerProps, dividerProps);
+    const groupNestingDepth = this._getGroupNestingDepth();
 
     if (!groupProps!.showEmptyGroups && group && group.count === 0) {
       return null;
@@ -194,6 +194,7 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
         selection={ selection }
         showAllProps={ showAllProps }
         viewport={ viewport }
+        onShouldVirtualize={ onShouldVirtualize }
       />
     );
   }
@@ -207,7 +208,7 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
   }
 
   private _getGroupNestingDepth(): number {
-    let { groups } = this.state;
+    const { groups } = this.state;
     let level = 0;
     let groupsInLevel = groups;
 
@@ -221,8 +222,8 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
 
   @autobind
   private _onToggleCollapse(group: IGroup) {
-    let { groupProps } = this.props;
-    let onToggleCollapse = groupProps && groupProps.headerProps && groupProps.headerProps.onToggleCollapse;
+    const { groupProps } = this.props;
+    const onToggleCollapse = groupProps && groupProps.headerProps && groupProps.headerProps.onToggleCollapse;
 
     if (group) {
       if (onToggleCollapse) {
@@ -245,19 +246,19 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
   private _forceListUpdates(groups?: IGroup[]) {
     groups = groups || this.state.groups;
 
-    let groupCount = groups ? groups.length : 1;
+    const groupCount = groups ? groups.length : 1;
 
-    if (this.refs.list) {
-      this.refs.list.forceUpdate();
+    if (this._list) {
+      this._list.forceUpdate();
 
       for (let i = 0; i < groupCount; i++) {
-        let group = this.refs.list.refs['group_' + String(i)] as GroupedListSection;
+        const group = this._list.refs['group_' + String(i)] as GroupedListSection;
         if (group) {
           group.forceListUpdate();
         }
       }
     } else {
-      let group = this.refs['group_' + String(0)] as GroupedListSection;
+      const group = this.refs['group_' + String(0)] as GroupedListSection;
       if (group) {
         group.forceListUpdate();
       }
@@ -266,8 +267,8 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
 
   @autobind
   private _onToggleSummarize(group: IGroup) {
-    let { groupProps } = this.props;
-    let onToggleSummarize = groupProps && groupProps.showAllProps && groupProps.showAllProps.onToggleSummarize;
+    const { groupProps } = this.props;
+    const onToggleSummarize = groupProps && groupProps.showAllProps && groupProps.showAllProps.onToggleSummarize;
 
     if (onToggleSummarize) {
       onToggleSummarize(group);
@@ -282,12 +283,12 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
 
   @autobind
   private _getPageSpecification(itemIndex: number, visibleRect: IRectangle): {
-      key?: string;
+    key?: string;
   } {
     const groups = this.state.groups;
     const pageGroup = groups && groups[itemIndex];
     return {
-        key: pageGroup && pageGroup.name
+      key: pageGroup && pageGroup.name
     };
   }
 
@@ -296,10 +297,10 @@ export class GroupedList extends BaseComponent<IGroupedListProps, IGroupedListSt
   }
 
   private _updateIsSomeGroupExpanded() {
-    let { groups } = this.state;
-    let { onGroupExpandStateChanged } = this.props;
+    const { groups } = this.state;
+    const { onGroupExpandStateChanged } = this.props;
 
-    let newIsSomeGroupExpanded = this._computeIsSomeGroupExpanded(groups);
+    const newIsSomeGroupExpanded = this._computeIsSomeGroupExpanded(groups);
     if (this._isSomeGroupExpanded !== newIsSomeGroupExpanded) {
       if (onGroupExpandStateChanged) {
         onGroupExpandStateChanged(newIsSomeGroupExpanded);
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx
index dbe28257e814e..e50e4fa1810ce 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/GroupedListSection.tsx
@@ -36,6 +36,8 @@ import {
 import { assign, css } from '../../Utilities';
 import { IViewport } from '../../utilities/decorators/withViewport';
 import * as stylesImport from './GroupedList.scss';
+import { IListProps } from '../List/index';
+
 const styles: any = stylesImport;
 
 export interface IGroupedListSectionProps extends React.Props<GroupedListSection> {
@@ -104,6 +106,14 @@ export interface IGroupedListSectionProps extends React.Props<GroupedListSection
 
   /** Override for rendering the group footer. */
   onRenderGroupFooter?: IRenderFunction<IGroupDividerProps>;
+
+  /**
+   * Optional callback to determine whether the list should be rendered in full, or virtualized.
+   * Virtualization will add and remove pages of items as the user scrolls them into the visible range.
+   * This benefits larger list scenarios by reducing the DOM on the screen, but can negatively affect performance for smaller lists.
+   * The default implementation will virtualize when this callback is not provided.
+   */
+  onShouldVirtualize?: (props: IListProps) => boolean;
 }
 
 export interface IGroupedListSectionState {
@@ -114,23 +124,16 @@ export interface IGroupedListSectionState {
 const DEFAULT_DROPPING_CSS_CLASS = 'is-dropping';
 
 export class GroupedListSection extends BaseComponent<IGroupedListSectionProps, IGroupedListSectionState> {
-  public refs: {
-    [key: string]: React.ReactInstance,
-    root: HTMLElement,
-    list: List
-  };
-
-  private _subGroups: {
-    [key: string]: GroupedListSection;
-  };
+  private _root: HTMLElement;
+  private _list: List;
+
   private _dragDropSubscription: IDisposable;
 
   constructor(props: IGroupedListSectionProps) {
     super(props);
 
-    let { selection, group } = props;
+    const { selection, group } = props;
 
-    this._subGroups = {};
     this.state = {
       isDropping: false,
       isSelected: (selection && group) ? selection.isRangeSelected(group.startIndex, group.count) : false
@@ -138,10 +141,10 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
   }
 
   public componentDidMount() {
-    let { dragDropHelper, selection } = this.props;
+    const { dragDropHelper, selection } = this.props;
 
     if (dragDropHelper) {
-      this._dragDropSubscription = dragDropHelper.subscribe(this.refs.root, this._events, this._getGroupDragDropOptions());
+      this._dragDropSubscription = dragDropHelper.subscribe(this._root, this._events, this._getGroupDragDropOptions());
     }
 
     if (selection) {
@@ -165,13 +168,13 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
       }
 
       if (this.props.dragDropHelper) {
-        this._dragDropSubscription = this.props.dragDropHelper.subscribe(this.refs.root, this._events, this._getGroupDragDropOptions());
+        this._dragDropSubscription = this.props.dragDropHelper.subscribe(this._root, this._events, this._getGroupDragDropOptions());
       }
     }
   }
 
   public render(): JSX.Element {
-    let {
+    const {
       getGroupItemLimit,
       group,
       groupIndex,
@@ -182,15 +185,16 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
       selectionMode,
       onRenderGroupHeader = this._onRenderGroupHeader,
       onRenderGroupShowAll = this._onRenderGroupShowAll,
-      onRenderGroupFooter = this._onRenderGroupFooter
+      onRenderGroupFooter = this._onRenderGroupFooter,
+      onShouldVirtualize
     } = this.props;
-    let { isSelected } = this.state;
-    let renderCount = group && getGroupItemLimit ? getGroupItemLimit(group) : Infinity;
-    let isShowAllVisible = group && !group.children && !group.isCollapsed && !group.isShowingAll &&
+    const { isSelected } = this.state;
+    const renderCount = group && getGroupItemLimit ? getGroupItemLimit(group) : Infinity;
+    const isShowAllVisible = group && !group.children && !group.isCollapsed && !group.isShowingAll &&
       (group.count > renderCount || group.hasMoreData);
-    let hasNestedGroups = group && group.children && group.children.length > 0;
+    const hasNestedGroups = group && group.children && group.children.length > 0;
 
-    let dividerProps: IGroupDividerProps = {
+    const dividerProps: IGroupDividerProps = {
       group: group,
       groupIndex: groupIndex,
       groupLevel: group ? group.level : 0,
@@ -198,13 +202,13 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
       viewport: viewport,
       selectionMode: selectionMode
     };
-    let groupHeaderProps: IGroupDividerProps = assign({}, headerProps, dividerProps);
-    let groupShowAllProps: IGroupDividerProps = assign({}, showAllProps, dividerProps);
-    let groupFooterProps: IGroupDividerProps = assign({}, footerProps, dividerProps);
+    const groupHeaderProps: IGroupDividerProps = assign({}, headerProps, dividerProps);
+    const groupShowAllProps: IGroupDividerProps = assign({}, showAllProps, dividerProps);
+    const groupFooterProps: IGroupDividerProps = assign({}, footerProps, dividerProps);
 
     return (
       <div
-        ref='root'
+        ref={ this._resolveRef('_root') }
         className={ css('ms-GroupedList-group', styles.group, this._getDroppingClassName()) }
         role='presentation'
       >
@@ -216,10 +220,11 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
               hasNestedGroups ?
                 (
                   <List
-                    ref='list'
+                    ref={ this._resolveRef('_list') }
                     items={ group!.children }
                     onRenderCell={ this._renderSubGroup }
                     getItemCountForPage={ this._returnOne }
+                    onShouldVirtualize={ onShouldVirtualize }
                   />
                 ) :
                 this._onRenderGroup(renderCount)
@@ -241,16 +246,16 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
   }
 
   public forceListUpdate() {
-    let { group } = this.props;
+    const { group } = this.props;
 
-    if (this.refs.list) {
-      this.refs.list.forceUpdate();
+    if (this._list) {
+      this._list.forceUpdate();
 
       if (group && group.children && group.children.length > 0) {
-        let subGroupCount = group.children.length;
+        const subGroupCount = group.children.length;
 
         for (let i = 0; i < subGroupCount; i++) {
-          let subGroup = this.refs.list.refs['subGroup_' + String(i)] as GroupedListSection;
+          const subGroup = this._list.refs['subGroup_' + String(i)] as GroupedListSection;
 
           if (subGroup) {
             subGroup.forceListUpdate();
@@ -258,7 +263,7 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
         }
       }
     } else {
-      let subGroup = this.refs['subGroup_' + String(0)] as GroupedListSection;
+      const subGroup = this.refs['subGroup_' + String(0)] as GroupedListSection;
 
       if (subGroup) {
         subGroup.forceListUpdate();
@@ -282,8 +287,8 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
   }
 
   private _onSelectionChange() {
-    let { group, selection } = this.props;
-    let isSelected = selection!.isRangeSelected(group!.startIndex, group!.count);
+    const { group, selection } = this.props;
+    const isSelected = selection!.isRangeSelected(group!.startIndex, group!.count);
 
     if (isSelected !== this.state.isSelected) {
       this.setState({ isSelected });
@@ -298,23 +303,25 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
   }
 
   private _onRenderGroup(renderCount: number) {
-    let {
+    const {
       group,
       items,
       onRenderCell,
       listProps,
-      groupNestingDepth
+      groupNestingDepth,
+      onShouldVirtualize
     } = this.props;
-    let count = group ? group.count : items.length;
-    let startIndex = group ? group.startIndex : 0;
+    const count = group ? group.count : items.length;
+    const startIndex = group ? group.startIndex : 0;
 
     return (
       <List
         items={ items }
         onRenderCell={ this._onRenderGroupCell(onRenderCell, groupNestingDepth) }
-        ref={ 'list' }
+        ref={ this._resolveRef('_list') }
         renderCount={ Math.min(count, renderCount) }
         startIndex={ startIndex }
+        onShouldVirtualize={ onShouldVirtualize }
         { ...listProps }
       />
     );
@@ -322,7 +329,7 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
 
   @autobind
   private _renderSubGroup(subGroup: any, subGroupIndex: number) {
-    let {
+    const {
       dragDropEvents,
       dragDropHelper,
       eventsToRegister,
@@ -339,7 +346,8 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
       viewport,
       onRenderGroupHeader,
       onRenderGroupShowAll,
-      onRenderGroupFooter
+      onRenderGroupFooter,
+      onShouldVirtualize
     } = this.props;
 
     return (!subGroup || subGroup.count > 0) ? (
@@ -365,6 +373,7 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
         onRenderGroupHeader={ onRenderGroupHeader }
         onRenderGroupShowAll={ onRenderGroupShowAll }
         onRenderGroupFooter={ onRenderGroupFooter }
+        onShouldVirtualize={ onShouldVirtualize }
       />
     ) : null;
   }
@@ -382,8 +391,8 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
    */
   @autobind
   private _getGroupDragDropOptions(): IDragDropOptions {
-    let { group, groupIndex, dragDropEvents, eventsToRegister } = this.props;
-    let options = {
+    const { group, groupIndex, dragDropEvents, eventsToRegister } = this.props;
+    const options = {
       eventMap: eventsToRegister,
       selectionIndex: -1,
       context: { data: group, index: groupIndex, isGroup: true },
@@ -403,8 +412,8 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
    */
   @autobind
   private _updateDroppingState(newIsDropping: boolean, event: DragEvent) {
-    let { isDropping } = this.state;
-    let { dragDropEvents } = this.props;
+    const { isDropping } = this.state;
+    const { dragDropEvents } = this.props;
 
     if (!isDropping) {
       if (dragDropEvents && dragDropEvents.onDragLeave) {
@@ -430,7 +439,7 @@ export class GroupedListSection extends BaseComponent<IGroupedListSectionProps,
    */
   private _getDroppingClassName(): string {
     let { isDropping } = this.state;
-    let { group } = this.props;
+    const { group } = this.props;
 
     isDropping = !!(group && isDropping);
 
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/examples/GroupedList.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/examples/GroupedList.Basic.Example.tsx
index 0eeb1a7205873..4f4073aa84842 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/examples/GroupedList.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/examples/GroupedList.Basic.Example.tsx
@@ -59,7 +59,7 @@ export class GroupedListBasicExample extends React.Component {
   }
 
   private _onRenderCell(nestingDepth: number, item: any, itemIndex: number) {
-    let {
+    const {
       _selection: selection
     } = this;
     return (
diff --git a/packages/office-ui-fabric-react/src/components/GroupedList/examples/GroupedList.Custom.Example.tsx b/packages/office-ui-fabric-react/src/components/GroupedList/examples/GroupedList.Custom.Example.tsx
index 2b24ac48f8968..ab54727668f33 100644
--- a/packages/office-ui-fabric-react/src/components/GroupedList/examples/GroupedList.Custom.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/GroupedList/examples/GroupedList.Custom.Example.tsx
@@ -14,7 +14,6 @@ let _items: any[];
 let _groups: IGroup[];
 
 export class GroupedListCustomExample extends React.Component {
-
   constructor(props: {}) {
     super(props);
 
@@ -25,7 +24,6 @@ export class GroupedListCustomExample extends React.Component {
   public render() {
     return (
       <GroupedList
-        ref='groupedList'
         items={ _items }
         onRenderCell={ this._onRenderCell }
         groupProps={
diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx
index fe3be1880b014..49cda04fc7e26 100644
--- a/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx
+++ b/packages/office-ui-fabric-react/src/components/HoverCard/ExpandingCard.tsx
@@ -110,11 +110,6 @@ export class ExpandingCard extends BaseComponent<IExpandingCardProps, IExpanding
     }
   }
 
-  @autobind
-  private _onDismiss(ev: MouseEvent): void {
-    this.props.onLeave && this.props.onLeave(ev);
-  }
-
   @autobind
   private _onRenderCompactCard(): JSX.Element {
     return (
diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.tsx
index 463ddd1806dcc..7eaafff26e288 100644
--- a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.tsx
+++ b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.tsx
@@ -18,7 +18,6 @@ import { IHoverCardProps, IHoverCardStyles } from './HoverCard.types';
 import { ExpandingCard } from './ExpandingCard';
 import { ExpandingCardMode, OpenCardMode } from './ExpandingCard.types';
 import { getStyles } from './HoverCard.styles';
-import { FocusTrapZone } from 'office-ui-fabric-react/lib/FocusTrapZone';
 
 export interface IHoverCardState {
   isHoverCardVisible: boolean;
diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCardPage.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCardPage.tsx
index 16bc5b48902a5..20eff65a39632 100644
--- a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCardPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCardPage.tsx
@@ -32,6 +32,7 @@ export class HoverCardPage extends React.Component<IComponentDemoPageProps, any>
             </ExampleCard>
           </LayerHost>
         }
+        allowNativeProps={ true }
         propertiesTables={
           <PropertiesTableSet
             sources={ [
@@ -47,7 +48,7 @@ export class HoverCardPage extends React.Component<IComponentDemoPageProps, any>
         }
         componentStatus={
           <ComponentStatus
-            {...HoverCardStatus}
+            { ...HoverCardStatus }
           />
         }
         isHeaderVisible={ this.props.isHeaderVisible }
diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Basic.Example.tsx
index ea4df20c6d85d..3e539dc9a96e7 100644
--- a/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Basic.Example.tsx
@@ -32,7 +32,7 @@ export class HoverCardBasicExample extends BaseComponent<{}, IHoverCardExampleSt
   }
 
   public render() {
-    let { items, columns } = this.state;
+    const { items, columns } = this.state;
 
     return (
       <div>
@@ -81,7 +81,7 @@ export class HoverCardBasicExample extends BaseComponent<{}, IHoverCardExampleSt
 
   @autobind
   private _onRenderExpandedCard(item: any): JSX.Element {
-    let { items, columns } = this.state;
+    const { items, columns } = this.state;
     return (
       <div className='hoverCardExample-expandedCard'>
         { item.description }
diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Target.Example.tsx b/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Target.Example.tsx
index da97820a6a7cc..920820c64e102 100644
--- a/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Target.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/HoverCard/examples/HoverCard.Target.Example.tsx
@@ -79,7 +79,7 @@ export class HoverCardTargetExample extends BaseComponent<{}, IHoverCardExampleS
   }
 
   public render() {
-    let { items, columns } = this.state;
+    const { items, columns } = this.state;
 
     return (
       <div>
@@ -132,7 +132,7 @@ export class HoverCardTargetExample extends BaseComponent<{}, IHoverCardExampleS
 
   @autobind
   private _onRenderExpandedCard(item: any): JSX.Element {
-    let { items, columns } = this.state;
+    const { items, columns } = this.state;
     return (
       <div className='hoverCardExample-expandedCard'>
         { item.description }
diff --git a/packages/office-ui-fabric-react/src/components/Icon/Icon.test.tsx b/packages/office-ui-fabric-react/src/components/Icon/Icon.test.tsx
index 56d0c7a9b99fc..9340cc5b039b4 100644
--- a/packages/office-ui-fabric-react/src/components/Icon/Icon.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Icon/Icon.test.tsx
@@ -6,7 +6,7 @@ import { Icon } from './Icon';
 describe('Icon', () => {
   it('renders Icon correctly', () => {
     const component = renderer.create(<Icon iconName='CompassNW' />);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx b/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx
index d38fecb3baeae..278e099688bf6 100644
--- a/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx
+++ b/packages/office-ui-fabric-react/src/components/Icon/Icon.tsx
@@ -3,87 +3,112 @@ import * as React from 'react';
 /* tslint:enable */
 import { IIconProps, IconType } from './Icon.types';
 import { Image } from '../Image/Image';
+import { ImageLoadState } from '../Image/Image.types';
 import {
   css,
   getNativeProps,
-  htmlElementProperties
+  htmlElementProperties,
+  BaseComponent
 } from '../../Utilities';
-import { getIcon, IIconRecord } from '../../Styling';
+import { getIcon } from '../../Styling';
 import { getClassNames } from './Icon.classNames';
 
-export const Icon = (props: IIconProps): JSX.Element => {
-  let {
-    ariaLabel,
-    className,
-    styles,
-    iconName
-   } = props;
-  let classNames = getClassNames(
-    styles
-  );
+export interface IIconState {
+  imageLoadError: boolean;
+}
 
-  if (props.iconType === IconType.image || props.iconType === IconType.Image) {
-    let containerClassName = css(
-      'ms-Icon-imageContainer',
-      classNames.root,
-      classNames.imageContainer,
-      className
-    );
+export class Icon extends BaseComponent<IIconProps, IIconState> {
+  constructor(props: IIconProps) {
+    super(props);
+    this.state = {
+      imageLoadError: false,
+    };
+  }
 
-    return (
-      <div
-        className={
-          css(
-            containerClassName,
-            classNames.root
-          ) }
-      >
-        <Image { ...props.imageProps as any } />
-      </div>
+  public render() {
+    const {
+      ariaLabel,
+      className,
+      styles,
+      iconName,
+      imageErrorAs,
+    } = this.props;
+    const classNames = getClassNames(
+      styles
     );
-  } else if (typeof iconName === 'string' && iconName.length === 0) {
-    return (
-      <i
-        aria-label={ ariaLabel }
-        { ...(ariaLabel ? {} : {
-          role: 'presentation',
-          'aria-hidden': true
-        }) }
-        { ...getNativeProps(props, htmlElementProperties) }
-        className={
-          css(
-            'ms-Icon-placeHolder',
-            classNames.rootHasPlaceHolder,
-            props.className
-          ) }
-      />
-    );
-  } else {
-    let iconDefinition = getIcon(iconName) || {
-      subset: {
-        className: undefined
-      },
-      code: undefined
+
+    const containerProps = ariaLabel ? { 'aria-label': ariaLabel, 'data-icon-name': iconName, } : {
+      role: 'presentation',
+      'aria-hidden': true,
+      'data-icon-name': iconName,
     };
 
-    return (
-      <i
-        aria-label={ ariaLabel }
-        { ...(ariaLabel ? {} : {
-          role: 'presentation',
-          'aria-hidden': true,
-          'data-icon-name': iconName,
-        }) }
-        { ...getNativeProps(props, htmlElementProperties) }
-        className={
-          css(
-            iconDefinition.subset.className,
-            classNames.root,
-            props.className
-          ) }
-      >
-        { iconDefinition.code }
-      </i>
-    );
+    if (this.props.iconType === IconType.image || this.props.iconType === IconType.Image) {
+      const containerClassName = css(
+        'ms-Icon-imageContainer',
+        classNames.root,
+        classNames.imageContainer,
+        className
+      );
+      const { imageLoadError } = this.state;
+      const imageProps = { ...this.props.imageProps, onLoadingStateChange: this.onImageLoadingStateChange };
+      const ImageType = imageLoadError && imageErrorAs || Image;
+      return (
+        <div
+          { ...containerProps }
+          className={
+            css(
+              containerClassName,
+              classNames.root
+            ) }
+        >
+          <ImageType { ...imageProps } />
+        </div>
+      );
+    } else if (typeof iconName === 'string' && iconName.length === 0) {
+      return (
+        <i
+          { ...containerProps }
+          { ...getNativeProps(this.props, htmlElementProperties) }
+          className={
+            css(
+              'ms-Icon-placeHolder',
+              classNames.rootHasPlaceHolder,
+              this.props.className
+            ) }
+        />
+      );
+    } else {
+      const iconDefinition = getIcon(iconName) || {
+        subset: {
+          className: undefined
+        },
+        code: undefined
+      };
+
+      return (
+        <i
+          { ...containerProps }
+          { ...getNativeProps(this.props, htmlElementProperties) }
+          className={
+            css(
+              iconDefinition.subset.className,
+              classNames.root,
+              this.props.className
+            ) }
+        >
+          { iconDefinition.code }
+        </i>
+      );
+    }
+  }
+
+  private onImageLoadingStateChange = (state: ImageLoadState): void => {
+    if (this.props.imageProps && this.props.imageProps.onLoadingStateChange) {
+      this.props.imageProps.onLoadingStateChange(state);
+    }
+    if (state === ImageLoadState.error) {
+      this.setState({ imageLoadError: true });
+    }
   }
-};
+}
diff --git a/packages/office-ui-fabric-react/src/components/Icon/Icon.types.ts b/packages/office-ui-fabric-react/src/components/Icon/Icon.types.ts
index c776f1cfcee22..b91d92aa3fb18 100644
--- a/packages/office-ui-fabric-react/src/components/Icon/Icon.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Icon/Icon.types.ts
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { IImageProps } from '../Image/Image.types';
 import { IStyle } from '../../Styling';
+import { IBaseProps } from '../../Utilities';
 
 // Please keep alphabetized
 export enum IconType {
@@ -34,7 +35,7 @@ export interface IIconStyles {
   imageContainer?: IStyle;
 }
 
-export interface IIconProps extends React.HTMLAttributes<HTMLElement> {
+export interface IIconProps extends IBaseProps, React.HTMLAttributes<HTMLElement> {
   /**
    * The name of the icon to use from the icon font. If string is empty, a placeholder icon will be rendered the same width as an icon
    */
@@ -65,4 +66,9 @@ export interface IIconProps extends React.HTMLAttributes<HTMLElement> {
    * @memberOf IIconProps
    */
   imageProps?: IImageProps;
+
+  /**
+   * If rendering an image icon, this function callback will be invoked in the event loading the image errors.
+   */
+  imageErrorAs?: React.StatelessComponent<IImageProps> | React.ComponentClass<IImageProps>;
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Icon/IconPage.tsx b/packages/office-ui-fabric-react/src/components/Icon/IconPage.tsx
index 0dda3185b9725..c107523257b8e 100644
--- a/packages/office-ui-fabric-react/src/components/Icon/IconPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Icon/IconPage.tsx
@@ -39,6 +39,7 @@ export class IconPage extends React.Component<IComponentDemoPageProps, {}> {
             </ExampleCard>
           </div>
         }
+        allowNativeProps={ true }
         propertiesTables={
           <PropertiesTableSet
             sources={ [
@@ -75,7 +76,7 @@ export class IconPage extends React.Component<IComponentDemoPageProps, {}> {
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...IconStatus}
+            { ...IconStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/Icon/__snapshots__/Icon.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Icon/__snapshots__/Icon.test.tsx.snap
index 3b1bc246f9721..ab530ac055dbe 100644
--- a/packages/office-ui-fabric-react/src/components/Icon/__snapshots__/Icon.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Icon/__snapshots__/Icon.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`Icon renders Icon correctly 1`] = `
 <i
   aria-hidden={true}
-  aria-label={undefined}
   className=
 
       {
diff --git a/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx b/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx
new file mode 100644
index 0000000000000..ce2ebe0699bc5
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Image/Image.base.tsx
@@ -0,0 +1,204 @@
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+import {
+  autobind,
+  BaseComponent,
+  classNamesFunction,
+  customizable,
+  getNativeProps,
+  imageProperties
+} from '../../Utilities';
+import {
+  IImageProps,
+  IImageStyles,
+  IImageStyleProps,
+  ImageCoverStyle,
+  ImageFit,
+  ImageLoadState
+} from './Image.types';
+
+const getClassNames = classNamesFunction<IImageStyleProps, IImageStyles>();
+
+export interface IImageState {
+  loadState?: ImageLoadState;
+}
+
+const KEY_PREFIX = 'fabricImage';
+
+@customizable('Image', ['theme'])
+export class ImageBase extends BaseComponent<IImageProps, IImageState> {
+  public static defaultProps = {
+    shouldFadeIn: true
+  };
+
+  private static _svgRegex = /\.svg$/i;
+
+  // Make an initial assumption about the image layout until we can
+  // check the rendered element. The value here only takes effect when
+  // shouldStartVisible is true.
+  private _coverStyle: ImageCoverStyle = ImageCoverStyle.portrait;
+  private _imageElement: HTMLImageElement;
+  private _frameElement: HTMLDivElement;
+
+  constructor(props: IImageProps) {
+    super(props);
+
+    this.state = {
+      loadState: ImageLoadState.notLoaded
+    };
+  }
+
+  public componentWillReceiveProps(nextProps: IImageProps) {
+    if (nextProps.src !== this.props.src) {
+      this.setState({
+        loadState: ImageLoadState.notLoaded
+      });
+    } else if (this.state.loadState === ImageLoadState.loaded) {
+      this._computeCoverStyle(nextProps);
+    }
+  }
+
+  public componentDidUpdate(prevProps: IImageProps, prevState: IImageState) {
+    this._checkImageLoaded();
+    if (this.props.onLoadingStateChange
+      && prevState.loadState !== this.state.loadState) {
+      this.props.onLoadingStateChange(this.state.loadState!);
+    }
+  }
+
+  public render() {
+    const imageProps = getNativeProps(this.props, imageProperties, ['width', 'height']);
+    const {
+      src,
+      alt,
+      width,
+      height,
+      shouldFadeIn,
+      shouldStartVisible,
+      className,
+      imageFit,
+      role,
+      maximizeFrame,
+      getStyles,
+      theme
+    } = this.props;
+    const { loadState } = this.state;
+    const coverStyle = this.props.coverStyle !== undefined ? this.props.coverStyle : this._coverStyle;
+    const classNames = getClassNames(getStyles!,
+      {
+        theme: theme!,
+        className,
+        width,
+        height,
+        maximizeFrame,
+        shouldFadeIn,
+        shouldStartVisible,
+        isLoaded: loadState === ImageLoadState.loaded || (loadState === ImageLoadState.notLoaded && this.props.shouldStartVisible),
+        isLandscape: coverStyle === ImageCoverStyle.landscape,
+        isCenter: imageFit === ImageFit.center,
+        isContain: imageFit === ImageFit.contain,
+        isCover: imageFit === ImageFit.cover,
+        isNone: imageFit === ImageFit.none,
+        isError: loadState === ImageLoadState.error,
+        isNotImageFit: imageFit === undefined
+      }
+    );
+
+    // If image dimensions aren't specified, the natural size of the image is used.
+    return (
+      <div
+        className={ classNames.root }
+        style={ { width: width, height: height } }
+        ref={ this._resolveRef('_frameElement') }
+      >
+        <img
+          { ...imageProps }
+          onLoad={ this._onImageLoaded }
+          onError={ this._onImageError }
+          key={ KEY_PREFIX + this.props.src || '' }
+          className={ classNames.image }
+          ref={ this._resolveRef('_imageElement') }
+          src={ src }
+          alt={ alt }
+          role={ role }
+        />
+      </div>
+    );
+  }
+
+  @autobind
+  private _onImageLoaded(ev: React.SyntheticEvent<HTMLImageElement>): void {
+    const { src, onLoad } = this.props;
+    if (onLoad) {
+      onLoad(ev);
+    }
+
+    this._computeCoverStyle(this.props);
+
+    if (src) {
+      this.setState({
+        loadState: ImageLoadState.loaded
+      });
+    }
+  }
+
+  private _checkImageLoaded(): void {
+    const { src } = this.props;
+    const { loadState } = this.state;
+
+    if (loadState === ImageLoadState.notLoaded) {
+      // testing if naturalWidth and naturalHeight are greater than zero is better than checking
+      // .complete, because .complete will also be set to true if the image breaks. However,
+      // for some browsers, SVG images do not have a naturalWidth or naturalHeight, so fall back
+      // to checking .complete for these images.
+      const isLoaded: boolean = src && this._imageElement && (this._imageElement.naturalWidth > 0 && this._imageElement.naturalHeight > 0) ||
+        (this._imageElement.complete && ImageBase._svgRegex.test(src!));
+
+      if (isLoaded) {
+        this._computeCoverStyle(this.props);
+        this.setState({
+          loadState: ImageLoadState.loaded
+        });
+      }
+    }
+  }
+
+  private _computeCoverStyle(props: IImageProps) {
+    const { imageFit, width, height } = props;
+
+    // Do not compute cover style if it was already specified in props
+    if ((imageFit === ImageFit.cover || imageFit === ImageFit.contain) &&
+      this.props.coverStyle === undefined &&
+      this._imageElement) {
+      // Determine the desired ratio using the width and height props.
+      // If those props aren't available, measure measure the frame.
+      let desiredRatio;
+      if (!!width && !!height) {
+        desiredRatio = (width as number) / (height as number);
+      } else {
+        desiredRatio = this._frameElement.clientWidth / this._frameElement.clientHeight;
+      }
+
+      // Examine the source image to determine its original ratio.
+      const naturalRatio = this._imageElement.naturalWidth / this._imageElement.naturalHeight;
+
+      // Should we crop from the top or the sides?
+      if (naturalRatio > desiredRatio) {
+        this._coverStyle = ImageCoverStyle.landscape;
+      } else {
+        this._coverStyle = ImageCoverStyle.portrait;
+      }
+    }
+  }
+
+  @autobind
+  private _onImageError(ev: React.SyntheticEvent<HTMLImageElement>) {
+    if (this.props.onError) {
+      this.props.onError(ev);
+    }
+    this.setState({
+      loadState: ImageLoadState.error
+    });
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/Image/Image.scss b/packages/office-ui-fabric-react/src/components/Image/Image.scss
deleted file mode 100644
index 12d4f2fd0e159..0000000000000
--- a/packages/office-ui-fabric-react/src/components/Image/Image.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-@import '../../common/common';
-
-.root {
-  overflow: hidden;
-}
-
-// Modifier: The image frame should fill its parent element.
-.rootIsMaximizeFrame {
-  height: 100%;
-  width: 100%;
-}
-
-.image {
-  display: block;
-  opacity: 0;
-
-  &.imageIsLoaded {
-    opacity: 1;
-  }
-}
-
-.imageIsCenter,
-.imageIsContain,
-.imageIsCover {
-  position: relative;
-  @include ms-left(50%);
-  top: 50%;
-  // transform-translateX mixin is not used here because a transateY is also required.
-  @include LTR {
-    transform: translate(-50%,-50%);
-  }
-  @include RTL {
-    transform: translate(50%,-50%);
-  }
-}
-
-.imageIsContain {
-  &.imageIsLandscape {
-    width: 100%;
-    height: auto;
-  }
-
-  &.imageIsPortrait {
-    height: 100%;
-    width: auto;
-  }
-}
-
-.imageIsCover {
-  &.imageIsLandscape {
-    height: 100%;
-    width: auto;
-  }
-
-  &.imageIsPortrait {
-    width: 100%;
-    height: auto;
-  }
-}
-
-.imageIsNone {
-  height: auto;
-  width: auto;
-}
-
-/** This is identical to the default behavior. */
-.imageIsScaleWidthHeight {
-  height: 100%;
-  width: 100%;
-}
-
-.imageIsScaleWidth {
-  height: auto;
-  width: 100%;
-}
-
-.imageIsScaleHeight {
-  height: 100%;
-  width: auto;
-}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Image/Image.styles.ts b/packages/office-ui-fabric-react/src/components/Image/Image.styles.ts
new file mode 100644
index 0000000000000..6c7b4bb62b0a2
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Image/Image.styles.ts
@@ -0,0 +1,118 @@
+import { IImageStyleProps, IImageStyles } from './Image.types';
+import {
+  AnimationClassNames,
+  IStyle,
+} from '../../Styling';
+
+export const getStyles = (
+  props: IImageStyleProps
+): IImageStyles => {
+  const {
+    className,
+    width,
+    height,
+    maximizeFrame,
+    isLoaded,
+    shouldFadeIn,
+    shouldStartVisible,
+    isLandscape,
+    isCenter,
+    isContain,
+    isCover,
+    isNone,
+    isError,
+    isNotImageFit
+  } = props;
+
+  const ImageFitStyles: IStyle = {
+    position: 'relative',
+    left: '50%',
+    top: '50%',
+    transform: 'translate(-50%,-50%)' // @todo test RTL renders transform: translate(50%,-50%);
+  };
+
+  return ({
+    root: [
+      'ms-Image',
+      {
+        overflow: 'hidden'
+      },
+      maximizeFrame && [
+        'ms-Image--maximizeFrame',
+        {
+          height: '100%',
+          width: '100%'
+        }
+      ],
+      className
+    ],
+    image: [
+      'ms-Image-image',
+      {
+        display: 'block',
+        opacity: 0
+      },
+      isLoaded && [
+        'is-loaded',
+        {
+          opacity: 1
+        }
+      ],
+      isCenter && [
+        'ms-Image-image--center',
+        ImageFitStyles
+      ],
+      isContain && [
+        'ms-Image-image--contain',
+        isLandscape && {
+          width: '100%',
+          height: 'auto'
+        },
+        !isLandscape && {
+          width: 'auto',
+          height: '100%'
+        },
+        ImageFitStyles
+      ],
+      isCover && [
+        'ms-Image-image--cover',
+        isLandscape && {
+          width: 'auto',
+          height: '100%'
+        },
+        !isLandscape && {
+          width: '100%',
+          height: 'auto'
+        },
+        ImageFitStyles
+      ],
+      isNone && [
+        'ms-Image-image--none',
+        {
+          width: 'auto',
+          height: 'auto'
+        }
+      ],
+      isNotImageFit && [
+        !!width && !height && {
+          height: 'auto',
+          width: '100%'
+        },
+        !width && !!height && {
+          height: '100%',
+          width: 'auto'
+        },
+        !!width && !!height && {
+          height: '100%',
+          width: '100%'
+        }
+      ],
+      isLoaded && shouldFadeIn && !shouldStartVisible && AnimationClassNames.fadeIn400,
+      isLandscape && 'ms-Image-image--landscape',
+      !isLandscape && 'ms-Image-image--portrait',
+      !isLoaded && 'is-notLoaded',
+      shouldFadeIn && 'is-fadeIn',
+      isError && 'is-error'
+    ]
+  });
+};
diff --git a/packages/office-ui-fabric-react/src/components/Image/Image.test.tsx b/packages/office-ui-fabric-react/src/components/Image/Image.test.tsx
index c587e9b95fb88..5c68075f7286a 100644
--- a/packages/office-ui-fabric-react/src/components/Image/Image.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Image/Image.test.tsx
@@ -1,14 +1,13 @@
 /* tslint:disable:no-unused-variable */
 import * as React from 'react';
 /* tslint:enable:no-unused-variable */
-
-import * as ReactDOM from 'react-dom';
 import * as ReactTestUtils from 'react-dom/test-utils';
 import * as renderer from 'react-test-renderer';
-import { shallow, mount, ReactWrapper } from 'enzyme';
+import { mount } from 'enzyme';
 
 import { Image } from './Image';
-import { ImageFit, ImageLoadState } from './Image.types';
+import { ImageBase } from './Image.base';
+import { ImageFit } from './Image.types';
 
 /* tslint:disable:no-unused-variable */
 const testImage1x1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQImWP4DwQACfsD/eNV8pwAAAAASUVORK5CYII=';
@@ -25,26 +24,26 @@ describe('Image', () => {
 
   it('renders Image correctly', () => {
     const component = renderer.create(<Image src={ testImage1x1 } />);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders an image', (done) => {
-    let component = ReactTestUtils.renderIntoDocument(
-      <Image
+    const component = ReactTestUtils.renderIntoDocument(
+      <ImageBase
         src={ testImage1x1 }
         // tslint:disable-next-line:jsx-no-lambda
         onLoad={ () => done() }
       />
     );
 
-    let image = ReactTestUtils.findRenderedDOMComponentWithTag(component as any, 'img');
+    const image = ReactTestUtils.findRenderedDOMComponentWithTag(component as any, 'img');
     ReactTestUtils.Simulate.load(image);
 
   });
 
   it('can cover a portrait (tall) frame with a square image', () => {
-    let component = mount(
+    const component = mount(
       <div>
         <Image
           src={ testImage1x1 }
@@ -61,7 +60,7 @@ describe('Image', () => {
   });
 
   it('can cover a landscape (wide) frame with a square image', () => {
-    let component = mount(
+    const component = mount(
       <div>
         <Image
           src={ testImage1x1 }
@@ -78,7 +77,7 @@ describe('Image', () => {
   });
 
   it('can cover a landscape (wide) parent element with a square image', () => {
-    let component = mount(
+    const component = mount(
       <div style={ { width: '10px', height: '20px' } }>
         <Image
           className='is-frameMaximizedPortrait'
@@ -97,7 +96,7 @@ describe('Image', () => {
   });
 
   it('can cover a portrait (tall) parent element with a square image', () => {
-    let component = mount(
+    const component = mount(
       <div style={ { width: '10px', height: '20px' } }>
         <Image
           src={ testImage1x1 }
@@ -117,15 +116,15 @@ describe('Image', () => {
   });
 
   it('allows onError events to be attached', (done) => {
-    let component = ReactTestUtils.renderIntoDocument(
-      <Image
+    const component = ReactTestUtils.renderIntoDocument(
+      <ImageBase
         src={ brokenImage }
         // tslint:disable-next-line:jsx-no-lambda
         onError={ () => done() }
       />
     );
 
-    let img = ReactTestUtils.findRenderedDOMComponentWithTag(component as any, 'img');
+    const img = ReactTestUtils.findRenderedDOMComponentWithTag(component as any, 'img');
     ReactTestUtils.Simulate.error(img);
   });
 });
diff --git a/packages/office-ui-fabric-react/src/components/Image/Image.tsx b/packages/office-ui-fabric-react/src/components/Image/Image.tsx
index 97e636db701dd..9da96481945e3 100644
--- a/packages/office-ui-fabric-react/src/components/Image/Image.tsx
+++ b/packages/office-ui-fabric-react/src/components/Image/Image.tsx
@@ -1,199 +1,13 @@
-/* tslint:disable:no-unused-variable */
-import * as React from 'react';
-/* tslint:enable:no-unused-variable */
+import { styled } from '../../Utilities';
 import {
-  autobind,
-  BaseComponent,
-  css,
-  getNativeProps,
-  imageProperties
-} from '../../Utilities';
-import { IImageProps, ImageFit, ImageLoadState, ImageCoverStyle } from './Image.types';
-import { AnimationClassNames } from '../../Styling';
-import * as stylesImport from './Image.scss';
-const styles: any = stylesImport;
-
-export interface IImageState {
-  loadState?: ImageLoadState;
-}
-
-export const CoverStyleMap: { [key: number]: string } = {
-  [ImageCoverStyle.landscape]: 'ms-Image-image--landscape ' + styles.imageIsLandscape,
-  [ImageCoverStyle.portrait]: 'ms-Image-image--portrait ' + styles.imageIsPortrait
-};
-
-export const ImageFitMap: { [key: number]: string } = {
-  [ImageFit.center]: 'ms-Image-image--center ' + styles.imageIsCenter,
-  [ImageFit.contain]: 'ms-Image-image--contain ' + styles.imageIsContain,
-  [ImageFit.cover]: 'ms-Image-image--cover ' + styles.imageIsCover,
-  [ImageFit.none]: 'ms-Image-image--none ' + styles.imageIsNone
-};
-
-const KEY_PREFIX: string = 'fabricImage';
-
-export class Image extends BaseComponent<IImageProps, IImageState> {
-  public static defaultProps = {
-    shouldFadeIn: true
-  };
-
-  private static _svgRegex = /\.svg$/i;
-
-  // Make an initial assumption about the image layout until we can
-  // check the rendered element. The value here only takes effect when
-  // shouldStartVisible is true.
-  private _coverStyle: ImageCoverStyle = ImageCoverStyle.portrait;
-  private _imageElement: HTMLImageElement;
-  private _frameElement: HTMLDivElement;
-
-  constructor(props: IImageProps) {
-    super(props);
-
-    this.state = {
-      loadState: ImageLoadState.notLoaded
-    };
-  }
-
-  public componentWillReceiveProps(nextProps: IImageProps) {
-    if (nextProps.src !== this.props.src) {
-      this.setState({
-        loadState: ImageLoadState.notLoaded
-      });
-    } else if (this.state.loadState === ImageLoadState.loaded) {
-      this._computeCoverStyle(nextProps);
-    }
-  }
-
-  public componentDidUpdate(prevProps: IImageProps, prevState: IImageState) {
-    this._checkImageLoaded();
-    if (this.props.onLoadingStateChange
-      && prevState.loadState !== this.state.loadState) {
-      this.props.onLoadingStateChange(this.state.loadState!);
-    }
-  }
-
-  public render() {
-    let imageProps = getNativeProps(this.props, imageProperties, ['width', 'height']);
-    let { src, alt, width, height, shouldFadeIn, shouldStartVisible, className, imageFit, role, maximizeFrame } = this.props;
-    let { loadState } = this.state;
-    let coverStyle = this.props.coverStyle !== undefined ? this.props.coverStyle : this._coverStyle;
-    let loaded = loadState === ImageLoadState.loaded || (loadState === ImageLoadState.notLoaded && this.props.shouldStartVisible);
-
-    // If image dimensions aren't specified, the natural size of the image is used.
-    return (
-      <div
-        className={ css(
-          'ms-Image',
-          styles.root,
-          className,
-          {
-            ['ms-Image--maximizeFrame ' + styles.rootIsMaximizeFrame]: maximizeFrame
-          })
-        }
-        style={ { width: width, height: height } }
-        ref={ this._resolveRef('_frameElement') }
-      >
-        <img
-          { ...imageProps }
-          onLoad={ this._onImageLoaded }
-          onError={ this._onImageError }
-          key={ KEY_PREFIX + this.props.src || '' }
-          className={
-            css(
-              'ms-Image-image',
-              styles.image,
-              CoverStyleMap[coverStyle],
-              (imageFit !== undefined) && ImageFitMap[imageFit],
-              !loaded && 'is-notLoaded',
-              loaded && 'is-loaded ' + styles.imageIsLoaded,
-              shouldFadeIn && 'is-fadeIn',
-              loadState === ImageLoadState.error && 'is-error',
-              loaded && shouldFadeIn && !shouldStartVisible && AnimationClassNames.fadeIn400,
-              {
-                ['ms-Image-image--scaleWidth ' + styles.imageIsScaleWidth]: (imageFit === undefined && !!width && !height),
-                ['ms-Image-image--scaleHeight ' + styles.imageIsScaleHeight]: (imageFit === undefined && !width && !!height),
-                ['ms-Image-image--scaleWidthHeight ' + styles.imageIsScaleWidthHeight]: (imageFit === undefined && !!width && !!height)
-              }) }
-          ref={ this._resolveRef('_imageElement') }
-          src={ src }
-          alt={ alt }
-          role={ role }
-        />
-      </div>
-    );
-  }
-
-  @autobind
-  private _onImageLoaded(ev: React.SyntheticEvent<HTMLImageElement>): void {
-    let { src, onLoad } = this.props;
-    if (onLoad) {
-      onLoad(ev);
-    }
-
-    this._computeCoverStyle(this.props);
-
-    if (src) {
-      this.setState({
-        loadState: ImageLoadState.loaded
-      });
-    }
-  }
-
-  private _checkImageLoaded(): void {
-    let { src } = this.props;
-    let { loadState } = this.state;
-
-    if (loadState === ImageLoadState.notLoaded) {
-      // testing if naturalWidth and naturalHeight are greater than zero is better than checking
-      // .complete, because .complete will also be set to true if the image breaks. However,
-      // for some browsers, SVG images do not have a naturalWidth or naturalHeight, so fall back
-      // to checking .complete for these images.
-      let isLoaded: boolean = src && this._imageElement && (this._imageElement.naturalWidth > 0 && this._imageElement.naturalHeight > 0) ||
-        (this._imageElement.complete && Image._svgRegex.test(src!));
-
-      if (isLoaded) {
-        this._computeCoverStyle(this.props);
-        this.setState({
-          loadState: ImageLoadState.loaded
-        });
-      }
-    }
-  }
-
-  private _computeCoverStyle(props: IImageProps) {
-    let { imageFit, width, height } = props;
-
-    // Do not compute cover style if it was already specified in props
-    if ((imageFit === ImageFit.cover || imageFit === ImageFit.contain) &&
-      this.props.coverStyle === undefined &&
-      this._imageElement) {
-      // Determine the desired ratio using the width and height props.
-      // If those props aren't available, measure measure the frame.
-      let desiredRatio;
-      if (!!width && !!height) {
-        desiredRatio = (width as number) / (height as number);
-      } else {
-        desiredRatio = this._frameElement.clientWidth / this._frameElement.clientHeight;
-      }
-
-      // Examine the source image to determine its original ratio.
-      let naturalRatio = this._imageElement.naturalWidth / this._imageElement.naturalHeight;
-
-      // Should we crop from the top or the sides?
-      if (naturalRatio > desiredRatio) {
-        this._coverStyle = ImageCoverStyle.landscape;
-      } else {
-        this._coverStyle = ImageCoverStyle.portrait;
-      }
-    }
-  }
-
-  @autobind
-  private _onImageError(ev: React.SyntheticEvent<HTMLImageElement>) {
-    if (this.props.onError) {
-      this.props.onError(ev);
-    }
-    this.setState({
-      loadState: ImageLoadState.error
-    });
-  }
-}
+  IImageProps,
+  IImageStyleProps,
+  IImageStyles
+} from './Image.types';
+import { ImageBase } from './Image.base';
+import { getStyles } from './Image.styles';
+
+export const Image = styled<IImageProps, IImageStyleProps, IImageStyles>(
+  ImageBase,
+  getStyles
+);
diff --git a/packages/office-ui-fabric-react/src/components/Image/Image.types.ts b/packages/office-ui-fabric-react/src/components/Image/Image.types.ts
index e1374ad052553..0485e37793803 100644
--- a/packages/office-ui-fabric-react/src/components/Image/Image.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Image/Image.types.ts
@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { IStyle, ITheme } from '../../Styling';
+import { IStyleFunction } from '../../Utilities';
 
 export interface IImage {
 
@@ -11,6 +13,22 @@ export interface IImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
    */
   componentRef?: (component: IImage) => void;
 
+  /**
+   * Call to provide customized styling that will layer on top of the variant rules
+   */
+  getStyles?: IStyleFunction<IImageStyleProps, IImageStyles>;
+
+  /**
+   * Theme provided by HOC.
+   */
+  theme?: ITheme;
+
+  /**
+   * Additional css class to apply to the Component
+   * @defaultvalue undefined
+   */
+  className?: string;
+
   /**
    * If true, fades the image in when loaded.
    * @defaultvalue true
@@ -24,11 +42,6 @@ export interface IImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
    */
   shouldStartVisible?: boolean;
 
-  /**
-   * If provided, adds the indicated css class to the image.
-   */
-  className?: string;
-
   /**
    * Used to determine how the image is scaled and cropped to fit the frame.
    *
@@ -130,3 +143,82 @@ export enum ImageLoadState {
    */
   errorLoaded = 3
 }
+
+export interface IImageStyleProps {
+  /**
+   * Accept theme prop.
+   */
+  theme: ITheme;
+
+  /**
+   * Accept custom classNames
+   */
+  className?: string;
+
+  /**
+   * If true, the image frame will expand to fill its parent container.
+   */
+  maximizeFrame?: boolean;
+
+  /**
+   * If true, the image is loaded
+   */
+  isLoaded?: boolean;
+
+  /**
+   * If true, fades the image in when loaded.
+   * @defaultvalue true
+   */
+  shouldFadeIn?: boolean;
+
+  /**
+   * If true, the image starts as visible and is hidden on error. Otherwise, the image is hidden until
+   * it is successfully loaded. This disables shouldFadeIn.
+   * @defaultvalue false;
+   */
+  shouldStartVisible?: boolean;
+
+  /**
+   * If true the image is coverStyle landscape instead of portrait
+   */
+  isLandscape?: boolean;
+
+  /**
+   * ImageFit booleans for center, cover, contain, none
+   */
+  isCenter?: boolean;
+  isContain?: boolean;
+  isCover?: boolean;
+  isNone?: boolean;
+
+  /**
+   * if true image load is in error
+   */
+  isError?: boolean;
+
+  /**
+   * if true, imageFit is undefined
+   */
+  isNotImageFit?: boolean;
+
+  /**
+   * Image width valye
+   */
+  width?: number | string;
+
+  /**
+   * Image height valye
+   */
+  height?: number | string;
+}
+
+export interface IImageStyles {
+  /**
+   * Style set for the root div element.
+   */
+  root: IStyle;
+  /**
+   * Style set for the img element.
+   */
+  image: IStyle;
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Image/ImagePage.tsx b/packages/office-ui-fabric-react/src/components/Image/ImagePage.tsx
index ce9968bd82a4d..d09b82965ceb2 100644
--- a/packages/office-ui-fabric-react/src/components/Image/ImagePage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Image/ImagePage.tsx
@@ -50,6 +50,8 @@ export class ImagePage extends React.Component<IComponentDemoPageProps, {}> {
             </ExampleCard>
           </div>
         }
+        allowNativeProps={ true }
+        nativePropsElement={ 'img' }
         propertiesTables={
           <PropertiesTableSet
             sources={ [
@@ -89,7 +91,7 @@ export class ImagePage extends React.Component<IComponentDemoPageProps, {}> {
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...ImageStatus}
+            { ...ImageStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/Image/__snapshots__/Image.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Image/__snapshots__/Image.test.tsx.snap
index ed49ec98faf18..61c24e9ba032f 100644
--- a/packages/office-ui-fabric-react/src/components/Image/__snapshots__/Image.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Image/__snapshots__/Image.test.tsx.snap
@@ -2,7 +2,11 @@
 
 exports[`Image renders Image correctly 1`] = `
 <div
-  className="ms-Image"
+  className=
+      ms-Image
+      {
+        overflow: hidden;
+      }
   style={
     Object {
       "height": undefined,
@@ -12,7 +16,15 @@ exports[`Image renders Image correctly 1`] = `
 >
   <img
     alt={undefined}
-    className="ms-Image-image ms-Image-image--portrait undefined is-notLoaded is-fadeIn"
+    className=
+        ms-Image-image
+        ms-Image-image--portrait
+        is-notLoaded
+        is-fadeIn
+        {
+          display: block;
+          opacity: 0;
+        }
     onError={[Function]}
     onLoad={[Function]}
     role={undefined}
diff --git a/packages/office-ui-fabric-react/src/components/Image/examples/Image.Center.Example.tsx b/packages/office-ui-fabric-react/src/components/Image/examples/Image.Center.Example.tsx
index c344aba4c759f..cd578c92bf63d 100644
--- a/packages/office-ui-fabric-react/src/components/Image/examples/Image.Center.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Image/examples/Image.Center.Example.tsx
@@ -8,7 +8,7 @@ import { Label } from 'office-ui-fabric-react/lib/Label';
 
 export class ImageCenterExample extends React.Component<any, any> {
   public render() {
-    let imageProps: IImageProps = {
+    const imageProps: IImageProps = {
       src: 'http://placehold.it/800x300',
       imageFit: ImageFit.center,
       width: 350,
diff --git a/packages/office-ui-fabric-react/src/components/Image/examples/Image.Contain.Example.tsx b/packages/office-ui-fabric-react/src/components/Image/examples/Image.Contain.Example.tsx
index b331d2a82e523..4205b03e12b5e 100644
--- a/packages/office-ui-fabric-react/src/components/Image/examples/Image.Contain.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Image/examples/Image.Contain.Example.tsx
@@ -8,7 +8,7 @@ import { Label } from 'office-ui-fabric-react/lib/Label';
 
 export class ImageContainExample extends React.Component<any, any> {
   public render() {
-    let imageProps: IImageProps = {
+    const imageProps: IImageProps = {
       src: 'http://placehold.it/700x300',
       imageFit: ImageFit.contain
     };
diff --git a/packages/office-ui-fabric-react/src/components/Image/examples/Image.Cover.Example.tsx b/packages/office-ui-fabric-react/src/components/Image/examples/Image.Cover.Example.tsx
index 8d38ff7bbe9a6..cc7413420b627 100644
--- a/packages/office-ui-fabric-react/src/components/Image/examples/Image.Cover.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Image/examples/Image.Cover.Example.tsx
@@ -8,7 +8,7 @@ import { Label } from 'office-ui-fabric-react/lib/Label';
 
 export class ImageCoverExample extends React.Component<any, any> {
   public render() {
-    let imageProps: IImageProps = {
+    const imageProps: IImageProps = {
       src: 'http://placehold.it/500x500',
       imageFit: ImageFit.cover
     };
diff --git a/packages/office-ui-fabric-react/src/components/Image/examples/Image.MaximizeFrame.Example.tsx b/packages/office-ui-fabric-react/src/components/Image/examples/Image.MaximizeFrame.Example.tsx
index 2a587775324df..d16f5779de52f 100644
--- a/packages/office-ui-fabric-react/src/components/Image/examples/Image.MaximizeFrame.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Image/examples/Image.MaximizeFrame.Example.tsx
@@ -8,7 +8,7 @@ import { Label } from 'office-ui-fabric-react/lib/Label';
 
 export class ImageMaximizeFrameExample extends React.Component<any, any> {
   public render() {
-    let imageProps: IImageProps = {
+    const imageProps: IImageProps = {
       src: 'http://placehold.it/500x500',
       imageFit: ImageFit.cover,
       maximizeFrame: true
diff --git a/packages/office-ui-fabric-react/src/components/Image/examples/Image.None.Example.tsx b/packages/office-ui-fabric-react/src/components/Image/examples/Image.None.Example.tsx
index 68b4ffe8ff116..288bdfaadbda0 100644
--- a/packages/office-ui-fabric-react/src/components/Image/examples/Image.None.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Image/examples/Image.None.Example.tsx
@@ -8,7 +8,7 @@ import { Label } from 'office-ui-fabric-react/lib/Label';
 
 export class ImageNoneExample extends React.Component<any, any> {
   public render() {
-    let imageProps: IImageProps = {
+    const imageProps: IImageProps = {
       src: 'http://placehold.it/500x250',
       imageFit: ImageFit.none,
       width: 350,
diff --git a/packages/office-ui-fabric-react/src/components/Image/index.ts b/packages/office-ui-fabric-react/src/components/Image/index.ts
index 7ce5fb2695f75..bffd3cbd24a1a 100644
--- a/packages/office-ui-fabric-react/src/components/Image/index.ts
+++ b/packages/office-ui-fabric-react/src/components/Image/index.ts
@@ -1,2 +1,3 @@
 export * from './Image';
+export * from './Image.base';
 export * from './Image.types';
diff --git a/packages/office-ui-fabric-react/src/components/Label/Label.classNames.ts b/packages/office-ui-fabric-react/src/components/Label/Label.classNames.ts
index f7d06737a6d7e..94cda8ca16d24 100644
--- a/packages/office-ui-fabric-react/src/components/Label/Label.classNames.ts
+++ b/packages/office-ui-fabric-react/src/components/Label/Label.classNames.ts
@@ -1,5 +1,5 @@
 import { memoizeFunction } from '../../Utilities';
-import { ITheme, FontSizes, mergeStyleSets, HighContrastSelector } from '../../Styling';
+import { ITheme, mergeStyleSets, HighContrastSelector } from '../../Styling';
 
 export interface ILabelClassNames {
   root: string;
@@ -8,34 +8,34 @@ export interface ILabelClassNames {
 export const getLabelClassNames = memoizeFunction((theme: ITheme, className: string | undefined, disabled: boolean, required: boolean): ILabelClassNames => {
   return mergeStyleSets({
     root:
-    ['ms-Label',
-      {
-        color: theme.semanticColors.bodyText,
-        boxSizing: 'border-box',
-        boxShadow: 'none',
-        margin: 0,
-        display: 'block',
-        padding: '5px 0',
-        wordWrap: 'break-word',
-        overflowWrap: 'break-word',
-      },
-      disabled && {
-        color: theme.semanticColors.disabledBodyText,
-        selectors: {
-          [HighContrastSelector]: {
-            color: 'GrayText'
+      ['ms-Label',
+        {
+          color: theme.semanticColors.bodyText,
+          boxSizing: 'border-box',
+          boxShadow: 'none',
+          margin: 0,
+          display: 'block',
+          padding: '5px 0',
+          wordWrap: 'break-word',
+          overflowWrap: 'break-word',
+        },
+        disabled && {
+          color: theme.semanticColors.disabledBodyText,
+          selectors: {
+            [HighContrastSelector]: {
+              color: 'GrayText'
+            }
           }
-        }
-      },
-      required && {
-        selectors: {
-          '::after': {
-            content: `' *'`,
-            color: theme.semanticColors.errorText,
-            paddingRight: 12
+        },
+        required && {
+          selectors: {
+            '::after': {
+              content: `' *'`,
+              color: theme.semanticColors.errorText,
+              paddingRight: 12
+            }
           }
-        }
-      },
-      className]
+        },
+        className]
   });
 });
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Label/Label.test.tsx b/packages/office-ui-fabric-react/src/components/Label/Label.test.tsx
index a19745b54f801..a36c5ebda6dc0 100644
--- a/packages/office-ui-fabric-react/src/components/Label/Label.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Label/Label.test.tsx
@@ -11,10 +11,10 @@ import { Label } from './Label';
 describe('Label', () => {
 
   it('renders a label', () => {
-    let component = ReactTestUtils.renderIntoDocument(
+    const component = ReactTestUtils.renderIntoDocument(
       <Label>test</Label>
     );
-    let renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
 
     expect(renderedDOM.textContent).toEqual('test');
   });
@@ -23,7 +23,7 @@ describe('Label', () => {
     const component = renderer.create(
       <Label>test</Label>
     );
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
diff --git a/packages/office-ui-fabric-react/src/components/Label/Label.tsx b/packages/office-ui-fabric-react/src/components/Label/Label.tsx
index 8a0b64343f9fd..ffad9139703d7 100644
--- a/packages/office-ui-fabric-react/src/components/Label/Label.tsx
+++ b/packages/office-ui-fabric-react/src/components/Label/Label.tsx
@@ -6,7 +6,7 @@ import { getLabelClassNames } from './Label.classNames';
 @customizable('Label', ['theme'])
 export class Label extends BaseComponent<ILabelProps, {}> {
   public render() {
-    let { disabled, required, children, className, theme } = this.props;
+    const { disabled, required, children, className, theme } = this.props;
     return (
       <label
         { ...getNativeProps(this.props, divProperties) }
diff --git a/packages/office-ui-fabric-react/src/components/Label/LabelPage.tsx b/packages/office-ui-fabric-react/src/components/Label/LabelPage.tsx
index 69a28a5b819d3..0a4a56da9b28e 100644
--- a/packages/office-ui-fabric-react/src/components/Label/LabelPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Label/LabelPage.tsx
@@ -22,6 +22,7 @@ export class LabelPage extends React.Component<IComponentDemoPageProps, any> {
             <LabelBasicExample />
           </ExampleCard>
         }
+        allowNativeProps={ true }
         propertiesTables={
           <PropertiesTableSet
             sources={ [
@@ -59,7 +60,7 @@ export class LabelPage extends React.Component<IComponentDemoPageProps, any> {
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...LabelStatus}
+            { ...LabelStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx b/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx
new file mode 100644
index 0000000000000..f241acbd41139
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.base.tsx
@@ -0,0 +1,177 @@
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+/* tslint:enable:no-unused-variable */
+
+import { Fabric } from '../../Fabric';
+import {
+  ILayerProps,
+  ILayerStyleProps,
+  ILayerStyles,
+} from './Layer.types';
+import {
+  BaseComponent,
+  classNamesFunction,
+  customizable,
+  getDocument,
+  setVirtualParent
+} from '../../Utilities';
+
+const _layersByHostId: { [hostId: string]: LayerBase[] } = {};
+let _defaultHostSelector: string | undefined;
+
+const getClassNames = classNamesFunction<ILayerStyleProps, ILayerStyles>();
+
+@customizable('Layer', ['theme'])
+export class LayerBase extends BaseComponent<ILayerProps, {}> {
+
+  public static defaultProps: ILayerProps = {
+    onLayerDidMount: () => undefined,
+    onLayerWillUnmount: () => undefined
+  };
+
+  private _rootElement: HTMLElement;
+  private _host: Node;
+  private _layerElement: HTMLElement | undefined;
+  private _hasMounted: boolean;
+  /**
+   * Used for notifying applicable Layers that a host is available/unavailable and to re-evaluate Layers that
+   * care about the specific host.
+   */
+  public static notifyHostChanged(id: string) {
+    if (_layersByHostId[id]) {
+      _layersByHostId[id].forEach(layer => layer.forceUpdate());
+    }
+  }
+
+  /**
+   * Sets the default target selector to use when determining the host in which
+   * Layered content will be injected into. If not provided, an element will be
+   * created at the end of the document body.
+   *
+   * Passing in a falsey value will clear the default target and reset back to
+   * using a created element at the end of document body.
+   */
+  public static setDefaultTarget(selector?: string) {
+    _defaultHostSelector = selector;
+  }
+
+  constructor(props: ILayerProps) {
+    super(props);
+
+    this._warnDeprecations({
+      onLayerMounted: 'onLayerDidMount'
+    });
+
+    if (this.props.hostId) {
+      if (!_layersByHostId[this.props.hostId]) {
+        _layersByHostId[this.props.hostId] = [];
+      }
+
+      _layersByHostId[this.props.hostId].push(this);
+    }
+  }
+
+  public componentDidMount() {
+    this.componentDidUpdate();
+  }
+
+  public componentWillUnmount() {
+    this._removeLayerElement();
+
+    if (this.props.hostId) {
+      _layersByHostId[this.props.hostId] = _layersByHostId[this.props.hostId].filter(layer => layer !== this);
+      if (!_layersByHostId[this.props.hostId].length) {
+        delete _layersByHostId[this.props.hostId];
+      }
+    }
+  }
+
+  public componentDidUpdate() {
+    const host = this._getHost();
+
+    const { className, getStyles, theme } = this.props;
+    const classNames = getClassNames(getStyles!,
+      {
+        theme: theme!,
+        className,
+        isNotHost: !this.props.hostId
+      }
+    );
+
+    if (host !== this._host) {
+      this._removeLayerElement();
+    }
+
+    if (host) {
+      this._host = host;
+
+      if (!this._layerElement) {
+        const doc = getDocument(this._rootElement) as Document;
+
+        this._layerElement = doc.createElement('div');
+        this._layerElement.className = classNames.root;
+
+        host.appendChild(this._layerElement);
+        setVirtualParent(this._layerElement, this._rootElement);
+      }
+
+      // Using this 'unstable' method allows us to retain the React context across the layer projection.
+      ReactDOM.unstable_renderSubtreeIntoContainer(
+        this,
+        (
+          <Fabric className={ classNames.content }>
+            { this.props.children }
+          </Fabric>
+        ),
+        this._layerElement,
+        () => {
+          if (!this._hasMounted) {
+            this._hasMounted = true;
+
+            // TODO: @deprecated cleanup required.
+            if (this.props.onLayerMounted) {
+              this.props.onLayerMounted();
+            }
+
+            this.props.onLayerDidMount!();
+          }
+        });
+    }
+  }
+
+  public render() {
+    return (
+      <span
+        className='ms-Layer'
+        ref={ this._resolveRef('_rootElement') }
+      />
+    );
+  }
+
+  private _removeLayerElement() {
+    if (this._layerElement) {
+      this.props.onLayerWillUnmount!();
+
+      ReactDOM.unmountComponentAtNode(this._layerElement);
+      const parentNode = this._layerElement.parentNode;
+      if (parentNode) {
+        parentNode.removeChild(this._layerElement);
+      }
+      this._layerElement = undefined;
+      this._hasMounted = false;
+    }
+  }
+
+  private _getHost(): Node {
+    const { hostId } = this.props;
+    const doc = getDocument(this._rootElement) as Document;
+
+    if (hostId) {
+      return doc.getElementById(hostId) as Node;
+    } else {
+      return _defaultHostSelector ? doc.querySelector(_defaultHostSelector) as Node : doc.body;
+    }
+  }
+
+}
diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.scss b/packages/office-ui-fabric-react/src/components/Layer/Layer.scss
deleted file mode 100644
index f09d8c521d96e..0000000000000
--- a/packages/office-ui-fabric-react/src/components/Layer/Layer.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-.rootIsFixed {
-  position: fixed;
-  z-index: 1000000;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  visibility: hidden;
-}
-
-.content {
-  visibility: visible;
-}
diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts b/packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts
new file mode 100644
index 0000000000000..e8b53479bb77f
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.styles.ts
@@ -0,0 +1,35 @@
+import { ILayerStyleProps, ILayerStyles } from './Layer.types';
+
+export const getStyles = (
+  props: ILayerStyleProps
+): ILayerStyles => {
+  const {
+    className,
+    isNotHost
+  } = props;
+
+  return ({
+    root: [
+      'ms-Layer',
+      isNotHost && [
+        'ms-Layer--fixed',
+        {
+          position: 'fixed',
+          zIndex: 1000000,
+          top: 0,
+          left: 0,
+          width: '100vw',
+          height: '100vh',
+          visibility: 'hidden'
+        }
+      ],
+      className
+    ],
+    content: [
+      'ms-Layer-content',
+      {
+        visibility: 'visible'
+      }
+    ]
+  });
+};
diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.test.tsx b/packages/office-ui-fabric-react/src/components/Layer/Layer.test.tsx
index dcd760279bfa1..c749b94e1ed7c 100644
--- a/packages/office-ui-fabric-react/src/components/Layer/Layer.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.test.tsx
@@ -11,7 +11,7 @@ import { LayerHost } from './LayerHost';
 describe('Layer', () => {
   it('renders Layer correctly', () => {
     const component = renderer.create(<Layer>Content</Layer>);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
@@ -65,18 +65,18 @@ describe('Layer', () => {
       }
     }
 
-    let appElement = document.createElement('div');
+    const appElement = document.createElement('div');
 
     try {
       document.body.appendChild(appElement);
       ReactDOM.render(<App />, appElement);
 
-      let parentElement = appElement.querySelector('#parent');
+      const parentElement = appElement.querySelector('#parent');
 
       expect(parentElement).toBeDefined();
       expect(parentElement!.ownerDocument).toBeDefined();
 
-      let childElement = appElement.querySelector('#child') as Element;
+      const childElement = appElement.querySelector('#child') as Element;
 
       expect(childElement.textContent).toEqual('foo');
     } finally {
diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.tsx b/packages/office-ui-fabric-react/src/components/Layer/Layer.tsx
index ad7b7b0845d11..0cdd7535ca9dc 100644
--- a/packages/office-ui-fabric-react/src/components/Layer/Layer.tsx
+++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.tsx
@@ -1,159 +1,13 @@
-/* tslint:disable:no-unused-variable */
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-/* tslint:enable:no-unused-variable */
-
-import { Fabric } from '../../Fabric';
-import { ILayerProps } from './Layer.types';
-import { css, BaseComponent, getDocument, setVirtualParent } from '../../Utilities';
-import * as stylesImport from './Layer.scss';
-const styles: any = stylesImport;
-
-let _layersByHostId: { [hostId: string]: Layer[] } = {};
-let _defaultHostSelector: string | undefined;
-
-export class Layer extends BaseComponent<ILayerProps, {}> {
-
-  public static defaultProps: ILayerProps = {
-    onLayerDidMount: () => undefined,
-    onLayerWillUnmount: () => undefined
-  };
-
-  private _rootElement: HTMLElement;
-  private _host: Node;
-  private _layerElement: HTMLElement | undefined;
-  private _hasMounted: boolean;
-  /**
-   * Used for notifying applicable Layers that a host is available/unavailable and to re-evaluate Layers that
-   * care about the specific host.
-   */
-  public static notifyHostChanged(id: string) {
-    if (_layersByHostId[id]) {
-      _layersByHostId[id].forEach(layer => layer.forceUpdate());
-    }
-  }
-
-  /**
-   * Sets the default target selector to use when determining the host in which
-   * Layered content will be injected into. If not provided, an element will be
-   * created at the end of the document body.
-   *
-   * Passing in a falsey value will clear the default target and reset back to
-   * using a created element at the end of document body.
-   */
-  public static setDefaultTarget(selector?: string) {
-    _defaultHostSelector = selector;
-  }
-
-  constructor(props: ILayerProps) {
-    super(props);
-
-    this._warnDeprecations({
-      onLayerMounted: 'onLayerDidMount'
-    });
-
-    if (this.props.hostId) {
-      if (!_layersByHostId[this.props.hostId]) {
-        _layersByHostId[this.props.hostId] = [];
-      }
-
-      _layersByHostId[this.props.hostId].push(this);
-    }
-  }
-
-  public componentDidMount() {
-    this.componentDidUpdate();
-  }
-
-  public componentWillUnmount() {
-    this._removeLayerElement();
-
-    if (this.props.hostId) {
-      _layersByHostId[this.props.hostId] = _layersByHostId[this.props.hostId].filter(layer => layer !== this);
-      if (!_layersByHostId[this.props.hostId].length) {
-        delete _layersByHostId[this.props.hostId];
-      }
-    }
-  }
-
-  public componentDidUpdate() {
-    let host = this._getHost();
-
-    if (host !== this._host) {
-      this._removeLayerElement();
-    }
-
-    if (host) {
-      this._host = host;
-
-      if (!this._layerElement) {
-        let doc = getDocument(this._rootElement) as Document;
-
-        this._layerElement = doc.createElement('div');
-        this._layerElement.className = css('ms-Layer', {
-          ['ms-Layer--fixed ' + styles.rootIsFixed]: !this.props.hostId
-        });
-
-        host.appendChild(this._layerElement);
-        setVirtualParent(this._layerElement, this._rootElement);
-      }
-
-      // Using this 'unstable' method allows us to retain the React context across the layer projection.
-      ReactDOM.unstable_renderSubtreeIntoContainer(
-        this,
-        (
-          <Fabric className={ css('ms-Layer-content', styles.content) }>
-            { this.props.children }
-          </Fabric>
-        ),
-        this._layerElement,
-        () => {
-          if (!this._hasMounted) {
-            this._hasMounted = true;
-
-            // TODO: @deprecated cleanup required.
-            if (this.props.onLayerMounted) {
-              this.props.onLayerMounted();
-            }
-
-            this.props.onLayerDidMount!();
-          }
-        });
-    }
-  }
-
-  public render() {
-    return (
-      <span
-        className='ms-Layer'
-        ref={ this._resolveRef('_rootElement') }
-      />
-    );
-  }
-
-  private _removeLayerElement() {
-    if (this._layerElement) {
-      this.props.onLayerWillUnmount!();
-
-      ReactDOM.unmountComponentAtNode(this._layerElement);
-      let parentNode = this._layerElement.parentNode;
-      if (parentNode) {
-        parentNode.removeChild(this._layerElement);
-      }
-      this._layerElement = undefined;
-      this._hasMounted = false;
-    }
-  }
-
-  private _getHost(): Node {
-    let { hostId } = this.props;
-    let doc = getDocument(this._rootElement) as Document;
-
-    if (hostId) {
-      return doc.getElementById(hostId) as Node;
-    } else {
-      return _defaultHostSelector ? doc.querySelector(_defaultHostSelector) as Node : doc.body;
-    }
-  }
-
-}
+import { styled } from '../../Utilities';
+import {
+  ILayerProps,
+  ILayerStyleProps,
+  ILayerStyles
+} from './Layer.types';
+import { LayerBase } from './Layer.base';
+import { getStyles } from './Layer.styles';
+
+export const Layer = styled<ILayerProps, ILayerStyleProps, ILayerStyles>(
+  LayerBase,
+  getStyles
+);
diff --git a/packages/office-ui-fabric-react/src/components/Layer/Layer.types.ts b/packages/office-ui-fabric-react/src/components/Layer/Layer.types.ts
index fb6f36842cef0..7b4151727ecdf 100644
--- a/packages/office-ui-fabric-react/src/components/Layer/Layer.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Layer/Layer.types.ts
@@ -1,17 +1,35 @@
 import * as React from 'react';
-import { Layer } from './Layer';
+import { LayerBase } from './Layer.base';
+import { IStyle, ITheme } from '../../Styling';
+import { IStyleFunction } from '../../Utilities';
 
 export interface ILayer {
 
 }
 
-export interface ILayerProps extends React.HTMLAttributes<HTMLDivElement | Layer> {
+export interface ILayerProps extends React.HTMLAttributes<HTMLDivElement | LayerBase> {
   /**
    * Optional callback to access the ILayer interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
    */
   componentRef?: (component: ILayer) => void;
 
+  /**
+   * Call to provide customized styling that will layer on top of the variant rules
+   */
+  getStyles?: IStyleFunction<ILayerStyleProps, ILayerStyles>;
+
+  /**
+   * Theme provided by HOC.
+   */
+  theme?: ITheme;
+
+  /**
+   * Additional css class to apply to the Layer
+   * @defaultvalue undefined
+   */
+  className?: string;
+
   /** Callback for when the layer is mounted. */
   onLayerMounted?: () => void;
 
@@ -33,3 +51,31 @@ export interface ILayerProps extends React.HTMLAttributes<HTMLDivElement | Layer
    */
   hostId?: string;
 }
+
+export interface ILayerStyleProps {
+  /**
+   * Accept theme prop.
+   */
+  theme: ITheme;
+
+  /**
+   * Accept custom classNames
+   */
+  className?: string;
+
+  /**
+   * Check if Host
+  */
+  isNotHost?: boolean;
+}
+
+export interface ILayerStyles {
+  /**
+   * Style for the root element when fixed.
+   */
+  root?: IStyle;
+  /**
+   * Style for the Fabric component.
+   */
+  content?: IStyle;
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Layer/LayerHost.tsx b/packages/office-ui-fabric-react/src/components/Layer/LayerHost.tsx
index 39e65356ab1c2..054c08096c93d 100644
--- a/packages/office-ui-fabric-react/src/components/Layer/LayerHost.tsx
+++ b/packages/office-ui-fabric-react/src/components/Layer/LayerHost.tsx
@@ -3,9 +3,7 @@ import {
   BaseComponent,
   css
 } from '../../Utilities';
-import {
-  Layer
-} from './Layer';
+import { LayerBase } from './Layer.base';
 import { ILayerHostProps } from './LayerHost.types';
 
 export class LayerHost extends BaseComponent<ILayerHostProps, {}> {
@@ -15,11 +13,11 @@ export class LayerHost extends BaseComponent<ILayerHostProps, {}> {
   }
 
   public componentDidMount() {
-    Layer.notifyHostChanged(this.props.id!);
+    LayerBase.notifyHostChanged(this.props.id!);
   }
 
   public componentWillUnmount() {
-    Layer.notifyHostChanged(this.props.id!);
+    LayerBase.notifyHostChanged(this.props.id!);
   }
 
   public render() {
diff --git a/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Basic.Example.tsx
index 369e6829b2bc4..3a0c18741663c 100644
--- a/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Basic.Example.tsx
@@ -2,10 +2,9 @@ import * as React from 'react'; // tslint:disable-line:no-unused-variable
 import * as PropTypes from 'prop-types';
 import './Layer.Example.scss';
 import '../../../common/_exampleStyles.scss';
-import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
-import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
-import { Layer } from 'office-ui-fabric-react/lib/Layer';
-import { autobind } from 'office-ui-fabric-react/lib/Utilities';
+import { autobind, BaseComponent } from '../../../Utilities';
+import { Checkbox } from '../../../Checkbox';
+import { Layer } from '../Layer';
 import { AnimationClassNames } from '../../../Styling';
 import * as exampleStylesImport from '../../../common/_exampleStyles.scss';
 const exampleStyles: any = exampleStylesImport;
@@ -64,7 +63,7 @@ export class LayerBasicExample extends BaseComponent<{}, {
   }
 
   public render() {
-    let { showLayer } = this.state;
+    const { showLayer } = this.state;
 
     return (
       <div>
diff --git a/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx
index 0dc249b832cfe..e166d97068141 100644
--- a/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Layer/examples/Layer.Hosted.Example.tsx
@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { autobind } from 'office-ui-fabric-react/lib/Utilities';
-import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
-import { Layer, LayerHost } from 'office-ui-fabric-react/lib/Layer';
-import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
+import { autobind } from '../../../Utilities';
+import { Checkbox } from '../../../Checkbox';
+import { Layer } from '../Layer';
+import { LayerHost } from '../LayerHost';
+import { Toggle } from '../../../Toggle';
 import { AnimationClassNames } from '../../../Styling';
 import './Layer.Example.scss';
 import * as exampleStylesImport from '../../../common/_exampleStyles.scss';
@@ -10,6 +11,7 @@ const exampleStyles: any = exampleStylesImport;
 
 export class LayerHostedExample extends React.Component<{}, {
   showLayer: boolean;
+  showLayerNoId: boolean;
   showHost: boolean;
 }> {
 
@@ -17,13 +19,14 @@ export class LayerHostedExample extends React.Component<{}, {
     super(props);
     this.state = {
       showLayer: false,
+      showLayerNoId: false,
       showHost: true
     };
   }
 
   public render() {
-    let { showLayer, showHost } = this.state;
-    let content = (
+    const { showLayer, showLayerNoId, showHost } = this.state;
+    const content = (
       <div className={ 'LayerExample-content ' + AnimationClassNames.scaleUpIn100 } >
         This is example layer content.
       </div>
@@ -57,6 +60,7 @@ export class LayerHostedExample extends React.Component<{}, {
             hostId='layerhost1'
             onLayerDidMount={ this._log('didmount') }
             onLayerWillUnmount={ this._log('willunmount') }
+            className={ 'exampleLayerClassName' }
           >
             { content }
           </Layer>
@@ -64,6 +68,26 @@ export class LayerHostedExample extends React.Component<{}, {
 
         <div className='LayerExample-nonLayered'>I am normally below the content.</div>
 
+        <p>
+          If you do not specify a hostId then the hosted layer will default to being fixed to the page by default.
+        </p>
+
+        <Checkbox
+          className={ exampleStyles.exampleCheckbox }
+          label='Render the box below in a Layer without specifying a host, fixing it to the top of the page'
+          checked={ showLayerNoId }
+          onChange={ this._onChangeCheckboxNoId }
+        />
+
+        { showLayerNoId ? (
+          <Layer
+            onLayerDidMount={ this._log('didmount') }
+            onLayerWillUnmount={ this._log('willunmount') }
+          >
+            { content }
+          </Layer>
+        ) : content }
+
       </div>
     );
   }
@@ -79,6 +103,11 @@ export class LayerHostedExample extends React.Component<{}, {
     this.setState({ showLayer: checked });
   }
 
+  @autobind
+  private _onChangeCheckboxNoId(ev: React.FormEvent<HTMLElement | HTMLInputElement>, checked: boolean): void {
+    this.setState({ showLayerNoId: checked });
+  }
+
   @autobind
   private _onChangeToggle(checked: boolean): void {
     this.setState({ showHost: checked });
diff --git a/packages/office-ui-fabric-react/src/components/Layer/index.ts b/packages/office-ui-fabric-react/src/components/Layer/index.ts
index f30c19d62bfd1..127b16899475f 100644
--- a/packages/office-ui-fabric-react/src/components/Layer/index.ts
+++ b/packages/office-ui-fabric-react/src/components/Layer/index.ts
@@ -1,3 +1,4 @@
 export * from './Layer';
+export * from './Layer.base';
 export * from './Layer.types';
 export * from './LayerHost';
diff --git a/packages/office-ui-fabric-react/src/components/Link/Link.base.tsx b/packages/office-ui-fabric-react/src/components/Link/Link.base.tsx
new file mode 100644
index 0000000000000..0da0938e619a8
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Link/Link.base.tsx
@@ -0,0 +1,78 @@
+import * as React from 'react';
+import {
+  anchorProperties,
+  autobind,
+  BaseComponent,
+  buttonProperties,
+  classNamesFunction,
+  customizable,
+  getNativeProps
+} from '../../Utilities';
+import {
+  ILink,
+  ILinkProps,
+  ILinkStyleProps,
+  ILinkStyles
+} from './Link.types';
+
+const getClassNames = classNamesFunction<ILinkStyleProps, ILinkStyles>();
+
+@customizable('Link', ['theme', 'getStyles'])
+export class LinkBase extends BaseComponent<ILinkProps, any> implements ILink {
+  private _link: HTMLElement;
+
+  public render() {
+    const { disabled, children, className, href, theme, getStyles } = this.props;
+
+    const classNames = getClassNames(getStyles!, {
+      className,
+      isButton: !href,
+      isDisabled: disabled,
+      theme: theme!
+    });
+
+    const anchorElement: JSX.Element = (
+      <a
+        { ...getNativeProps(this.props, anchorProperties) }
+        className={ classNames.root }
+        onClick={ this._onClick }
+        ref={ this._resolveRef('_link') }
+        target={ this.props.target }
+        aria-disabled={ disabled }
+      >
+        { children }
+      </a>
+    );
+
+    const buttonElement: JSX.Element = (
+      <button
+        { ...getNativeProps(this.props, buttonProperties) }
+        className={ classNames.root }
+        onClick={ this._onClick }
+        ref={ this._resolveRef('_link') }
+        aria-disabled={ disabled }
+      >
+        { children }
+      </button>
+    );
+
+    return href ? anchorElement : buttonElement;
+  }
+
+  public focus() {
+    if (this._link) {
+      this._link.focus();
+    }
+  }
+
+  @autobind
+  private _onClick(ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) {
+    const { onClick, disabled } = this.props;
+
+    if (disabled) {
+      ev.preventDefault();
+    } else if (onClick) {
+      onClick(ev);
+    }
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/Link/Link.scss b/packages/office-ui-fabric-react/src/components/Link/Link.scss
deleted file mode 100644
index 7f66f199ff4ac..0000000000000
--- a/packages/office-ui-fabric-react/src/components/Link/Link.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@import '../../common/common';
-
-// Mixins: to be shared with Link.Example.scss
-@mixin root {
-  color: $ms-color-themePrimary;
-  margin: 0;
-  overflow: inherit;
-  padding: 0;
-  text-overflow: inherit;
-}
-
-@mixin isEnabled {
-  &:active,
-  &:hover,
-  &:active:hover {
-    color: $ms-color-themeDarker;
-  }
-
-  &:focus {
-    color: $ms-color-themePrimary;
-  }
-}
-
-@mixin isDisabled {
-  color: $ms-color-neutralTertiary;
-  pointer-events: none;
-  cursor: default;
-}
-
-// Element: ms-Link root component
-.root {
-  @include root;
-}
-
-// State: The button is not disabled.
-.isEnabled {
-  @include isEnabled;
-}
-
-// State: The button is disabled.
-.isDisabled {
-  @include isDisabled;
-}
-
-// Link implemented as a button.
-button.root {
-  @include focus-border;
-  @include text-align(left);
-  background: none;
-  border: none;
-  cursor: pointer;
-  display: inline;
-  font-size: inherit; // Ensure that we inherit font size, rather than the browser's default.
-
-  @include high-contrast {
-    // Using Highlight here so we still have a themeable system color that is different from both window text and link text.
-    color: Highlight;
-  }
-}
-
-// Link implemented as an anchor.
-a.root {
-  @include focus-outline;
-  text-decoration: none;
-}
diff --git a/packages/office-ui-fabric-react/src/components/Link/Link.styles.ts b/packages/office-ui-fabric-react/src/components/Link/Link.styles.ts
new file mode 100644
index 0000000000000..92f84c115f270
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Link/Link.styles.ts
@@ -0,0 +1,63 @@
+import {
+  getFocusStyle,
+  HighContrastSelector
+} from '../../Styling';
+import {
+  ILinkStyleProps,
+  ILinkStyles
+} from './Link.types';
+
+export const getStyles = (props: ILinkStyleProps): ILinkStyles => {
+  const { className, isButton, isDisabled, theme } = props;
+  const { semanticColors } = theme;
+
+  return {
+    root: [
+      'ms-Link',
+      className,
+      getFocusStyle(theme),
+      {
+        color: semanticColors.link,
+      },
+      isButton && {
+        background: 'none',
+        border: 'none',
+        cursor: 'pointer',
+        display: 'inline',
+        fontSize: 'inherit',
+        margin: 0,
+        overflow: 'inherit',
+        padding: 0,
+        textAlign: 'left',
+        textOverflow: 'inherit'
+      },
+      !isButton && {
+        textDecoration: 'none'
+      },
+      isDisabled && [
+        'is-disabled',
+        {
+          color: semanticColors.disabledText,
+          cursor: 'default'
+        },
+        {
+          selectors: {
+            '&:link, &:visited': {
+              pointerEvents: 'none'
+            }
+          }
+        }
+      ],
+      !isDisabled && {
+        selectors: {
+          '&:active, &:hover, &:active:hover': {
+            color: semanticColors.linkHovered
+          },
+          '&:focus': {
+            color: semanticColors.link
+          }
+        }
+      }
+    ]
+  };
+};
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Link/Link.test.tsx b/packages/office-ui-fabric-react/src/components/Link/Link.test.tsx
index 21c38f5ff3e17..22a65951497af 100644
--- a/packages/office-ui-fabric-react/src/components/Link/Link.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Link/Link.test.tsx
@@ -6,22 +6,27 @@ import { Link } from './Link';
 describe('Link', () => {
   it('renders Link correctly', () => {
     const component = renderer.create(<Link href='#'>I'm a link</Link>);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('renders disabled Link correctly', () => {
     const component = renderer.create(<Link href='#' disabled={ true }>I'm a disabled link</Link>);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('renders Link with no href as a button', () => {
     const component = renderer.create(<Link>I'm a link as a button</Link>);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
   it('renders disabled Link with no href as a button correctly', () => {
     const component = renderer.create(<Link disabled={ true }>I'm a link as a button</Link>);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+  it('renders Link with a custom class name', () => {
+    const component = renderer.create(<Link href='#' className='customClassName'>I'm a link</Link>);
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Link/Link.tsx b/packages/office-ui-fabric-react/src/components/Link/Link.tsx
index 7e1a2b3028173..ee04fd30ea60f 100644
--- a/packages/office-ui-fabric-react/src/components/Link/Link.tsx
+++ b/packages/office-ui-fabric-react/src/components/Link/Link.tsx
@@ -1,71 +1,9 @@
-import * as React from 'react';
-import {
-  BaseComponent,
-  anchorProperties,
-  autobind,
-  buttonProperties,
-  css,
-  getNativeProps
-} from '../../Utilities';
-import { ILink, ILinkProps } from './Link.types';
-import * as stylesImport from './Link.scss';
-const styles: any = stylesImport;
-
-export class Link extends BaseComponent<ILinkProps, any> implements ILink {
-  private _link: HTMLElement;
-
-  public render() {
-    let { disabled, children, className, href } = this.props;
-
-    return (
-      href ? (
-        <a
-          { ...getNativeProps(this.props, anchorProperties) }
-          className={ css(
-            'ms-Link',
-            styles.root,
-            className,
-            disabled && ('is-disabled ' + styles.isDisabled),
-            !disabled && styles.isEnabled
-          ) }
-          onClick={ this._onClick }
-          ref={ this._resolveRef('_link') }
-          target={ this.props.target }
-          aria-disabled={ disabled }
-        >
-          { children }
-        </a>
-      ) : (
-          <button
-            { ...getNativeProps(this.props, buttonProperties) }
-            className={ css(
-              'ms-Link',
-              styles.root,
-              className,
-              disabled && ('is-disabled ' + styles.isDisabled),
-              !disabled && styles.isEnabled
-            ) }
-            onClick={ this._onClick }
-            ref={ this._resolveRef('_link') }
-            aria-disabled={ disabled }
-          >
-            { children }
-          </button>
-        ));
-  }
-
-  public focus() {
-    if (this._link) {
-      this._link.focus();
-    }
-  }
-
-  @autobind
-  private _onClick(ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) {
-    let { onClick } = this.props;
-
-    if (onClick) {
-      onClick(ev);
-    }
-  }
-}
+import { styled } from '../../Utilities';
+import { LinkBase } from './Link.base';
+import { ILinkProps, ILinkStyleProps, ILinkStyles } from './Link.types';
+import { getStyles } from './Link.styles';
+
+export const Link = styled<ILinkProps, ILinkStyleProps, ILinkStyles>(
+  LinkBase,
+  getStyles
+);
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Link/Link.types.ts b/packages/office-ui-fabric-react/src/components/Link/Link.types.ts
index d72ae7b73816b..9ada1d9d5aedf 100644
--- a/packages/office-ui-fabric-react/src/components/Link/Link.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Link/Link.types.ts
@@ -1,14 +1,20 @@
 /* tslint:disable:no-unused-variable */
 import * as React from 'react';
 /* tslint:enable:no-unused-variable */
-import { Link } from './Link';
+import { LinkBase } from './Link.base';
+
+import {
+  IStyle,
+  ITheme
+} from '../../Styling';
+import { IStyleFunction } from '../../Utilities';
 
 export interface ILink {
   /** Sets focus to the link. */
   focus(): void;
 }
 
-export interface ILinkProps extends React.AllHTMLAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLElement | Link> {
+export interface ILinkProps extends React.AllHTMLAttributes<HTMLAnchorElement | HTMLButtonElement | HTMLElement | LinkBase> {
   /**
    * Optional callback to access the ILink interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
@@ -20,4 +26,24 @@ export interface ILinkProps extends React.AllHTMLAttributes<HTMLAnchorElement |
    */
   disabled?: boolean;
 
+  /**
+   * Call to provide customized styling that will layer on top of the variant rules.
+   */
+  getStyles?: IStyleFunction<ILinkProps, ILinkStyles>;
+
+  /**
+   * Theme (provided through customization.)
+   */
+  theme?: ITheme;
+}
+
+export interface ILinkStyleProps {
+  className?: string;
+  isButton?: boolean;
+  isDisabled?: boolean;
+  theme: ITheme;
 }
+
+export interface ILinkStyles {
+  root: IStyle;
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Link/LinkPage.tsx b/packages/office-ui-fabric-react/src/components/Link/LinkPage.tsx
index ccd434fea1b2f..86e45618b070b 100644
--- a/packages/office-ui-fabric-react/src/components/Link/LinkPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Link/LinkPage.tsx
@@ -9,7 +9,7 @@ import { LinkBasicExample } from './examples/Link.Basic.Example';
 import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
 import { LinkStatus } from './Link.checklist';
 
-let LinkBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Link/examples/Link.Basic.Example.tsx') as string;
+const LinkBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/Link/examples/Link.Basic.Example.tsx') as string;
 
 export class LinkPage extends React.Component<IComponentDemoPageProps, {}> {
   public render() {
@@ -22,6 +22,8 @@ export class LinkPage extends React.Component<IComponentDemoPageProps, {}> {
             <LinkBasicExample />
           </ExampleCard>
         }
+        allowNativeProps={ true }
+        nativePropsElement={ ['a', 'button'] }
         propertiesTables={
           <PropertiesTableSet
             sources={ [
@@ -65,7 +67,7 @@ export class LinkPage extends React.Component<IComponentDemoPageProps, {}> {
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...LinkStatus}
+            { ...LinkStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap
index 5b5ab34cac8de..12fddf196c581 100644
--- a/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Link/__snapshots__/Link.test.tsx.snap
@@ -3,7 +3,74 @@
 exports[`Link renders Link correctly 1`] = `
 <a
   aria-disabled={undefined}
-  className="ms-Link"
+  className=
+      ms-Link
+      {
+        color: #0078d7;
+        outline: transparent;
+        position: relative;
+        text-decoration: none;
+      }
+      &::-moz-focus-inner {
+        border: 0;
+      }
+      .ms-Fabric.is-focusVisible &:focus:after {
+        border: 1px solid #ffffff;
+        bottom: 1px;
+        content: "";
+        left: 1px;
+        outline: 1px solid #666666;
+        position: absolute;
+        right: 1px;
+        top: 1px;
+        z-index: 1;
+      }
+      &:active, &:hover, &:active:hover {
+        color: #004578;
+      }
+      &:focus {
+        color: #0078d7;
+      }
+  href="#"
+  onClick={[Function]}
+  target={undefined}
+>
+  I'm a link
+</a>
+`;
+
+exports[`Link renders Link with a custom class name 1`] = `
+<a
+  aria-disabled={undefined}
+  className=
+      ms-Link
+      customClassName
+      {
+        color: #0078d7;
+        outline: transparent;
+        position: relative;
+        text-decoration: none;
+      }
+      &::-moz-focus-inner {
+        border: 0;
+      }
+      .ms-Fabric.is-focusVisible &:focus:after {
+        border: 1px solid #ffffff;
+        bottom: 1px;
+        content: "";
+        left: 1px;
+        outline: 1px solid #666666;
+        position: absolute;
+        right: 1px;
+        top: 1px;
+        z-index: 1;
+      }
+      &:active, &:hover, &:active:hover {
+        color: #004578;
+      }
+      &:focus {
+        color: #0078d7;
+      }
   href="#"
   onClick={[Function]}
   target={undefined}
@@ -15,7 +82,49 @@ exports[`Link renders Link correctly 1`] = `
 exports[`Link renders Link with no href as a button 1`] = `
 <button
   aria-disabled={undefined}
-  className="ms-Link"
+  className=
+      ms-Link
+      {
+        background: none;
+        border: none;
+        color: #0078d7;
+        cursor: pointer;
+        display: inline;
+        font-size: inherit;
+        margin-bottom: 0px;
+        margin-left: 0px;
+        margin-right: 0px;
+        margin-top: 0px;
+        outline: transparent;
+        overflow: inherit;
+        padding-bottom: 0px;
+        padding-left: 0px;
+        padding-right: 0px;
+        padding-top: 0px;
+        position: relative;
+        text-align: left;
+        text-overflow: inherit;
+      }
+      &::-moz-focus-inner {
+        border: 0;
+      }
+      .ms-Fabric.is-focusVisible &:focus:after {
+        border: 1px solid #ffffff;
+        bottom: 1px;
+        content: "";
+        left: 1px;
+        outline: 1px solid #666666;
+        position: absolute;
+        right: 1px;
+        top: 1px;
+        z-index: 1;
+      }
+      &:active, &:hover, &:active:hover {
+        color: #004578;
+      }
+      &:focus {
+        color: #0078d7;
+      }
   onClick={[Function]}
 >
   I'm a link as a button
@@ -25,7 +134,33 @@ exports[`Link renders Link with no href as a button 1`] = `
 exports[`Link renders disabled Link correctly 1`] = `
 <a
   aria-disabled={true}
-  className="ms-Link is-disabled undefined"
+  className=
+      ms-Link
+      is-disabled
+      {
+        color: #a6a6a6;
+        cursor: default;
+        outline: transparent;
+        position: relative;
+        text-decoration: none;
+      }
+      &::-moz-focus-inner {
+        border: 0;
+      }
+      .ms-Fabric.is-focusVisible &:focus:after {
+        border: 1px solid #ffffff;
+        bottom: 1px;
+        content: "";
+        left: 1px;
+        outline: 1px solid #666666;
+        position: absolute;
+        right: 1px;
+        top: 1px;
+        z-index: 1;
+      }
+      &:link, &:visited {
+        pointer-events: none;
+      }
   href="#"
   onClick={[Function]}
   target={undefined}
@@ -37,7 +172,47 @@ exports[`Link renders disabled Link correctly 1`] = `
 exports[`Link renders disabled Link with no href as a button correctly 1`] = `
 <button
   aria-disabled={true}
-  className="ms-Link is-disabled undefined"
+  className=
+      ms-Link
+      is-disabled
+      {
+        background: none;
+        border: none;
+        color: #a6a6a6;
+        cursor: default;
+        display: inline;
+        font-size: inherit;
+        margin-bottom: 0px;
+        margin-left: 0px;
+        margin-right: 0px;
+        margin-top: 0px;
+        outline: transparent;
+        overflow: inherit;
+        padding-bottom: 0px;
+        padding-left: 0px;
+        padding-right: 0px;
+        padding-top: 0px;
+        position: relative;
+        text-align: left;
+        text-overflow: inherit;
+      }
+      &::-moz-focus-inner {
+        border: 0;
+      }
+      .ms-Fabric.is-focusVisible &:focus:after {
+        border: 1px solid #ffffff;
+        bottom: 1px;
+        content: "";
+        left: 1px;
+        outline: 1px solid #666666;
+        position: absolute;
+        right: 1px;
+        top: 1px;
+        z-index: 1;
+      }
+      &:link, &:visited {
+        pointer-events: none;
+      }
   disabled={true}
   onClick={[Function]}
 >
diff --git a/packages/office-ui-fabric-react/src/components/Link/examples/Link.Example.scss b/packages/office-ui-fabric-react/src/components/Link/examples/Link.Example.scss
index 52caecbff6f5a..6d8ae071e718d 100644
--- a/packages/office-ui-fabric-react/src/components/Link/examples/Link.Example.scss
+++ b/packages/office-ui-fabric-react/src/components/Link/examples/Link.Example.scss
@@ -1,4 +1,4 @@
-@import '../Link.scss';
+@import '../../../common/common';
 
 // UHF overrides link color and state so we need to re-assign them for the website documentation
 :global {
@@ -6,17 +6,31 @@
     .ms-Link {
       // Element: ms-Link root component
       .root {
-        @include root;
+        color: $ms-color-themePrimary;
+        margin: 0;
+        overflow: inherit;
+        padding: 0;
+        text-overflow: inherit;
       }
 
       // State: The button is not disabled.
       .isEnabled {
-        @include isEnabled;
+        &:active,
+        &:hover,
+        &:active:hover {
+          color: $ms-color-themeDarker;
+        }
+
+        &:focus {
+          color: $ms-color-themePrimary;
+        }
       }
 
       // State: The button is disabled.
       .isDisabled {
-        @include isDisabled;
+        color: $ms-color-neutralTertiary;
+        pointer-events: none;
+        cursor: default;
       }
     }
   }
diff --git a/packages/office-ui-fabric-react/src/components/List/List.test.tsx b/packages/office-ui-fabric-react/src/components/List/List.test.tsx
index 4c05d1aa75175..47a2e723e2039 100644
--- a/packages/office-ui-fabric-react/src/components/List/List.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/List/List.test.tsx
@@ -10,7 +10,7 @@ describe('List', () => {
     const component = renderer.create(
       // tslint:disable-next-line:jsx-no-lambda
       <List items={ [] } onRenderCell={ () => null } />);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/List/List.tsx b/packages/office-ui-fabric-react/src/components/List/List.tsx
index d695db1c71eea..607d2d006d82c 100644
--- a/packages/office-ui-fabric-react/src/components/List/List.tsx
+++ b/packages/office-ui-fabric-react/src/components/List/List.tsx
@@ -88,10 +88,11 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
 
   public refs: {
     [key: string]: React.ReactInstance,
-    root: HTMLElement,
-    surface: HTMLElement
   };
 
+  private _root: HTMLElement;
+  private _surface: HTMLElement;
+
   private _estimatedPageHeight: number;
   private _totalEstimates: number;
   private _cachedPageHeights: {
@@ -102,7 +103,6 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
   };
   private _focusedIndex: number;
   private _scrollElement: HTMLElement;
-  private _scrollingToIndex: number;
   private _hasCompletedFirstRender: boolean;
 
   // surface rect relative to window
@@ -173,7 +173,6 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
     this._cachedPageHeights = {};
     this._estimatedPageHeight = 0;
     this._focusedIndex = -1;
-    this._scrollingToIndex = -1;
     this._pageCache = {};
   }
 
@@ -262,10 +261,12 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
 
     this._updatePages();
     this._measureVersion++;
-    this._scrollElement = findScrollableParent(this.refs.root) as HTMLElement;
+    this._scrollElement = findScrollableParent(this._root) as HTMLElement;
 
     this._events.on(window, 'resize', this._onAsyncResize);
-    this._events.on(this.refs.root, 'focus', this._onFocus, true);
+    if (this._root) {
+      this._events.on(this._root, 'focus', this._onFocus, true);
+    }
     if (this._scrollElement) {
       this._events.on(this._scrollElement, 'scroll', this._onScroll);
       this._events.on(this._scrollElement, 'scroll', this._onAsyncScroll);
@@ -289,8 +290,8 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
   }
 
   public shouldComponentUpdate(newProps: IListProps, newState: IListState) {
-    let { pages: oldPages } = this.state;
-    let { pages: newPages } = newState;
+    const { pages: oldPages } = this.state;
+    const { pages: newPages } = newState;
     let shouldComponentUpdate = false;
 
     // Update if the page stops scrolling
@@ -301,8 +302,8 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
     if (newProps.items === this.props.items &&
       oldPages!.length === newPages!.length) {
       for (let i = 0; i < oldPages!.length; i++) {
-        let oldPage = oldPages![i];
-        let newPage = newPages![i];
+        const oldPage = oldPages![i];
+        const newPage = newPages![i];
 
         if ((oldPage.key !== newPage.key ||
           oldPage.itemCount !== newPage.itemCount)) {
@@ -335,23 +336,21 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
     const {
       pages = []
     } = this.state;
-    let pageElements: JSX.Element[] = [];
-    let divProps = getNativeProps(this.props, divProperties);
+    const pageElements: JSX.Element[] = [];
+    const divProps = getNativeProps(this.props, divProperties);
 
     for (const page of pages) {
       pageElements.push(this._renderPage(page));
     }
 
-    // console.log(`Page elements ${pageElements.length}`);
-
     return (
       <div
-        ref='root'
+        ref={ this._resolveRef('_root') }
         { ...divProps }
         role={ (role === undefined) ? 'list' : role }
         className={ css('ms-List', className) }
       >
-        <div ref='surface' className={ css('ms-List-surface') } role='presentation'>
+        <div ref={ this._resolveRef('_surface') } className={ css('ms-List-surface') } role='presentation'>
           { pageElements }
         </div>
       </div>
@@ -373,7 +372,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
   }
 
   private _renderPage(page: IPage): JSX.Element {
-    let { usePageCache } = this.props;
+    const { usePageCache } = this.props;
     let cachedPage;
     // if usePageCache is set and cached page element can be found, just return cached page
     if (usePageCache) {
@@ -398,7 +397,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
       role: 'presentation'
     }, this._onRenderPage);
 
-    // cache the first page for now since it is re-rendered a lot times unncessarily.
+    // cache the first page for now since it is re-rendered a lot times unnecessarily.
     // todo: a more aggresive caching mechanism is to cache pages constaining the items not changed.
     // now we re-render pages too frequently, for example, props.items increased from 30 to 60, although the
     // first 30 items did not change, we still re-rendered all of them in this props.items change.
@@ -435,7 +434,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
     const {
       page: {
         items,
-      startIndex
+        startIndex
       },
       ...divProps
     } = pageProps;
@@ -478,8 +477,8 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
   private _onFocus(ev: any) {
     let target = ev.target as HTMLElement;
 
-    while (target !== this.refs.surface) {
-      let indexString = target.getAttribute('data-list-index');
+    while (target !== this._surface) {
+      const indexString = target.getAttribute('data-list-index');
 
       if (indexString) {
         this._focusedIndex = Number(indexString);
@@ -569,14 +568,16 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
       this._updateRenderRects(props);
     }
 
-    let newListState = this._buildPages(props);
-    let oldListPages = this.state.pages;
+    const newListState = this._buildPages(props);
+    const oldListPages = this.state.pages!;
+
+    this._notifyPageChanges(oldListPages, newListState.pages!);
 
     this.setState(newListState, () => {
       // If we weren't provided with the page height, measure the pages
       if (!props.getPageHeight) {
         // If measured version is invalid since we've updated the DOM
-        const heightsChanged = this._updatePageMeasurements(oldListPages as IPage[], newListState.pages as IPage[]);
+        const heightsChanged = this._updatePageMeasurements(newListState.pages!);
 
         // On first render, we should re-measure so that we don't get a visual glitch.
         if (heightsChanged) {
@@ -598,11 +599,48 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
     });
   }
 
-  private _updatePageMeasurements(oldPages: IPage[], newPages: IPage[]) {
-    const renderedIndexes: {
-      [index: number]: IPage;
-    } = {};
+  /**
+   * Notify consumers that the rendered pages have changed
+   * @param oldPages The old pages
+   * @param newPages The new pages
+   * @param props The props to use
+   */
+  private _notifyPageChanges(oldPages: IPage[], newPages: IPage[], props: IListProps = this.props) {
+    const {
+      onPageAdded,
+      onPageRemoved
+    } = props;
+
+    if (onPageAdded || onPageRemoved) {
+      const renderedIndexes: {
+        [index: number]: IPage;
+      } = {};
+
+      for (const page of oldPages) {
+        if (page.items) {
+          renderedIndexes[page.startIndex] = page;
+        }
+      }
+
+      for (const page of newPages) {
+        if (page.items) {
+          if (!renderedIndexes[page.startIndex]) {
+            this._onPageAdded(page);
+          } else {
+            delete renderedIndexes[page.startIndex];
+          }
+        }
+      }
 
+      for (const index in renderedIndexes) {
+        if (renderedIndexes.hasOwnProperty(index)) {
+          this._onPageRemoved(renderedIndexes[index]);
+        }
+      }
+    }
+  }
+
+  private _updatePageMeasurements(pages: IPage[]) {
     let heightChanged = false;
 
     // when not in virtualize mode, we render all the items without page measurement
@@ -610,31 +648,11 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
       return heightChanged;
     }
 
-    for (let i = 0; i < oldPages.length; i++) {
-      let page = oldPages[i];
-
-      if (page.items) {
-        renderedIndexes[page.startIndex] = page;
-      }
-    }
-
-    for (let i = 0; i < newPages.length; i++) {
-      let page = newPages[i];
+    for (let i = 0; i < pages.length; i++) {
+      const page = pages[i];
 
       if (page.items) {
         heightChanged = this._measurePage(page) || heightChanged;
-
-        if (!renderedIndexes[page.startIndex]) {
-          this._onPageAdded(page);
-        } else {
-          delete renderedIndexes[page.startIndex];
-        }
-      }
-    }
-
-    for (let index in renderedIndexes) {
-      if (renderedIndexes.hasOwnProperty(index)) {
-        this._onPageRemoved(renderedIndexes[index]);
       }
     }
 
@@ -647,13 +665,13 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
    */
   private _measurePage(page: IPage): boolean {
     let hasChangedHeight = false;
-    let pageElement = this.refs[page.key] as HTMLElement;
-    let cachedHeight = this._cachedPageHeights[page.startIndex];
+    const pageElement = this.refs[page.key] as HTMLElement;
+    const cachedHeight = this._cachedPageHeights[page.startIndex];
 
     // console.log('   * measure attempt', page.startIndex, cachedHeight);
 
     if (pageElement && this._shouldVirtualize() && (!cachedHeight || cachedHeight.measureVersion !== this._measureVersion)) {
-      let newClientRect = {
+      const newClientRect = {
         width: pageElement.clientWidth,
         height: pageElement.clientHeight
       };
@@ -683,7 +701,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
 
   /** Called when a page has been added to the DOM. */
   private _onPageAdded(page: IPage) {
-    let { onPageAdded } = this.props;
+    const { onPageAdded } = this.props;
 
     // console.log('page added', page.startIndex, this.state.pages.map(page => page.key).join(', '));
 
@@ -694,7 +712,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
 
   /** Called when a page has been removed from the DOM. */
   private _onPageRemoved(page: IPage) {
-    let { onPageRemoved } = this.props;
+    const { onPageRemoved } = this.props;
 
     // console.log('  --- page removed', page.startIndex, this.state.pages.map(page => page.key).join(', '));
 
@@ -705,7 +723,8 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
 
   /** Build up the pages that should be rendered. */
   private _buildPages(props: IListProps): IListState {
-    let { items, startIndex, renderCount, getPageHeight } = props;
+    let { renderCount } = props;
+    const { items, startIndex, getPageHeight } = props;
 
     renderCount = this._getRenderCount(props);
 
@@ -715,14 +734,14 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
     let itemsPerPage = 1;
     let pageTop = 0;
     let currentSpacer = null;
-    let focusedIndex = this._focusedIndex;
-    let endIndex = startIndex! + renderCount;
+    const focusedIndex = this._focusedIndex;
+    const endIndex = startIndex! + renderCount;
     const shouldVirtualize = this._shouldVirtualize(props);
 
     // First render is very important to track; when we render cells, we have no idea of estimated page height.
     // So we should default to rendering only the first page so that we can get information.
     // However if the user provides a measure function, let's just assume they know the right heights.
-    let isFirstRender = this._estimatedPageHeight === 0 && !getPageHeight;
+    const isFirstRender = this._estimatedPageHeight === 0 && !getPageHeight;
 
     const allowedRect = this._allowedRect;
 
@@ -734,14 +753,14 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
 
       itemsPerPage = pageSpecification.itemCount;
 
-      let pageBottom = pageTop + pageHeight - 1;
+      const pageBottom = pageTop + pageHeight - 1;
 
-      let isPageRendered = findIndex(this.state.pages as IPage[], (page: IPage) => !!page.items && page.startIndex === itemIndex) > -1;
-      let isPageInAllowedRange = !allowedRect || pageBottom >= allowedRect.top && pageTop <= allowedRect.bottom!;
-      let isPageInRequiredRange = !this._requiredRect || pageBottom >= this._requiredRect!.top && pageTop <= this._requiredRect!.bottom!;
-      let isPageVisible = !isFirstRender && (isPageInRequiredRange || (isPageInAllowedRange && isPageRendered)) || !shouldVirtualize;
-      let isPageFocused = focusedIndex >= itemIndex && focusedIndex < (itemIndex + itemsPerPage);
-      let isFirstPage = itemIndex === startIndex;
+      const isPageRendered = findIndex(this.state.pages as IPage[], (page: IPage) => !!page.items && page.startIndex === itemIndex) > -1;
+      const isPageInAllowedRange = !allowedRect || pageBottom >= allowedRect.top && pageTop <= allowedRect.bottom!;
+      const isPageInRequiredRange = !this._requiredRect || pageBottom >= this._requiredRect!.top && pageTop <= this._requiredRect!.bottom!;
+      const isPageVisible = !isFirstRender && (isPageInRequiredRange || (isPageInAllowedRange && isPageRendered)) || !shouldVirtualize;
+      const isPageFocused = focusedIndex >= itemIndex && focusedIndex < (itemIndex + itemsPerPage);
+      const isFirstPage = itemIndex === startIndex;
 
       // console.log('building page', itemIndex, 'pageTop: ' + pageTop, 'inAllowed: ' + isPageInAllowedRange, 'inRequired: ' + isPageInRequiredRange);
 
@@ -753,8 +772,8 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
           currentSpacer = null;
         }
 
-        let itemsInPage = Math.min(itemsPerPage, endIndex - itemIndex);
-        let newPage = this._createPage(key, items!.slice(itemIndex, itemIndex + itemsInPage), itemIndex, undefined, undefined, pageData);
+        const itemsInPage = Math.min(itemsPerPage, endIndex - itemIndex);
+        const newPage = this._createPage(key, items!.slice(itemIndex, itemIndex + itemsInPage), itemIndex, undefined, undefined, pageData);
 
         newPage.top = pageTop;
         newPage.height = pageHeight;
@@ -847,14 +866,14 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
     if (this.props.getPageHeight) {
       return this.props.getPageHeight(itemIndex, visibleRect);
     } else {
-      let cachedHeight = (this._cachedPageHeights[itemIndex]);
+      const cachedHeight = (this._cachedPageHeights[itemIndex]);
 
       return cachedHeight ? cachedHeight.height : (this._estimatedPageHeight || DEFAULT_PAGE_HEIGHT);
     }
   }
 
   private _getItemCountForPage(itemIndex: number, visibileRect: IRectangle): number {
-    let itemsPerPage = this.props.getItemCountForPage ? this.props.getItemCountForPage(itemIndex, visibileRect) : DEFAULT_ITEMS_PER_PAGE;
+    const itemsPerPage = this.props.getItemCountForPage ? this.props.getItemCountForPage(itemIndex, visibileRect) : DEFAULT_ITEMS_PER_PAGE;
 
     return itemsPerPage ? itemsPerPage : DEFAULT_ITEMS_PER_PAGE;
   }
@@ -886,7 +905,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
   }
 
   private _getRenderCount(props?: IListProps): number {
-    let { items, startIndex, renderCount } = props || this.props;
+    const { items, startIndex, renderCount } = props || this.props;
 
     return (renderCount === undefined ? (items ? items.length - startIndex! : 0) : renderCount);
   }
@@ -902,8 +921,8 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
     }
 
     let surfaceRect = this._surfaceRect;
-    let scrollHeight = this._scrollElement && this._scrollElement.scrollHeight;
-    let scrollTop = this._scrollElement ? this._scrollElement.scrollTop : 0;
+    const scrollHeight = this._scrollElement && this._scrollElement.scrollHeight;
+    const scrollTop = this._scrollElement ? this._scrollElement.scrollTop : 0;
 
     // WARNING: EXPENSIVE CALL! We need to know the surface top relative to the window.
     // This needs to be called to recalculate when new pages should be loaded.
@@ -915,7 +934,7 @@ export class List extends BaseComponent<IListProps, IListState> implements IList
       !scrollHeight ||
       scrollHeight !== this._scrollHeight ||
       Math.abs(this._scrollTop - scrollTop) > this._estimatedPageHeight / 3) {
-      surfaceRect = this._surfaceRect = _measureSurfaceRect(this.refs.surface);
+      surfaceRect = this._surfaceRect = _measureSurfaceRect(this._surface);
       this._scrollTop = scrollTop;
     }
 
diff --git a/packages/office-ui-fabric-react/src/components/List/ListPage.tsx b/packages/office-ui-fabric-react/src/components/List/ListPage.tsx
index 6f8a186ce1951..8f9ba43d51e08 100644
--- a/packages/office-ui-fabric-react/src/components/List/ListPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/List/ListPage.tsx
@@ -48,6 +48,7 @@ export class ListPage extends React.Component<IComponentDemoPageProps, {}> {
             </ExampleCard>
           </div>
         }
+        allowNativeProps={ true }
         propertiesTables={
           <PropertiesTableSet
             sources={ [
@@ -71,7 +72,7 @@ export class ListPage extends React.Component<IComponentDemoPageProps, {}> {
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...ListStatus}
+            { ...ListStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/List/examples/List.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/List/examples/List.Basic.Example.tsx
index 1801030ef64a6..a55ce1d62f309 100644
--- a/packages/office-ui-fabric-react/src/components/List/examples/List.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/List/examples/List.Basic.Example.tsx
@@ -29,9 +29,9 @@ export class ListBasicExample extends React.Component<IListBasicExampleProps, an
   }
 
   public render() {
-    let { items: originalItems } = this.props;
-    let { items } = this.state;
-    let resultCountText = items.length === originalItems.length ? '' : ` (${items.length} of ${originalItems.length} shown)`;
+    const { items: originalItems } = this.props;
+    const { items } = this.state;
+    const resultCountText = items.length === originalItems.length ? '' : ` (${items.length} of ${originalItems.length} shown)`;
 
     return (
       <FocusZone direction={ FocusZoneDirection.vertical }>
@@ -45,7 +45,7 @@ export class ListBasicExample extends React.Component<IListBasicExampleProps, an
   }
 
   private _onFilterChanged(text: string) {
-    let { items } = this.props;
+    const { items } = this.props;
 
     this.setState({
       filterText: text,
diff --git a/packages/office-ui-fabric-react/src/components/List/examples/List.Ghosting.Example.tsx b/packages/office-ui-fabric-react/src/components/List/examples/List.Ghosting.Example.tsx
index df36023f1ddb3..bff85a17d7a2c 100644
--- a/packages/office-ui-fabric-react/src/components/List/examples/List.Ghosting.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/List/examples/List.Ghosting.Example.tsx
@@ -17,7 +17,7 @@ export class ListGhostingExample extends React.Component<IListGhostingExamplePro
   }
 
   public render() {
-    let { items } = this.props;
+    const { items } = this.props;
 
     return (
       <FocusZone direction={ FocusZoneDirection.vertical }>
diff --git a/packages/office-ui-fabric-react/src/components/List/examples/List.Grid.Example.tsx b/packages/office-ui-fabric-react/src/components/List/examples/List.Grid.Example.tsx
index 46a1b2e75cc17..2b9b9f5bac47a 100644
--- a/packages/office-ui-fabric-react/src/components/List/examples/List.Grid.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/List/examples/List.Grid.Example.tsx
@@ -13,7 +13,6 @@ const ROWS_PER_PAGE = 3;
 const MAX_ROW_HEIGHT = 250;
 
 export class ListGridExample extends React.Component<IListGridExampleProps> {
-  private _positions: any;
   private _columnCount: number;
   private _columnWidth: number;
   private _rowHeight: number;
@@ -21,7 +20,6 @@ export class ListGridExample extends React.Component<IListGridExampleProps> {
   constructor(props: IListGridExampleProps) {
     super(props);
 
-    this._positions = {};
     this._getItemCountForPage = this._getItemCountForPage.bind(this);
     this._getPageHeight = this._getPageHeight.bind(this);
   }
diff --git a/packages/office-ui-fabric-react/src/components/List/examples/List.Scrolling.Example.tsx b/packages/office-ui-fabric-react/src/components/List/examples/List.Scrolling.Example.tsx
index 0ae19f07b449a..aabde8d0484f1 100644
--- a/packages/office-ui-fabric-react/src/components/List/examples/List.Scrolling.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/List/examples/List.Scrolling.Example.tsx
@@ -36,7 +36,7 @@ export class ListScrollingExample extends React.Component<IListScrollingExampleP
   }
 
   public render() {
-    let { items } = this.props;
+    const { items } = this.props;
 
     return (
       <FocusZone direction={ FocusZoneDirection.vertical }>
diff --git a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx
index 13450bab7b0ff..4ba53eb325c61 100644
--- a/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx
+++ b/packages/office-ui-fabric-react/src/components/MarqueeSelection/MarqueeSelection.tsx
@@ -38,11 +38,7 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
     isEnabled: true
   };
 
-  public refs: {
-    [key: string]: React.ReactInstance;
-    root: HTMLElement;
-  };
-
+  private _root: HTMLDivElement;
   private _dragOrigin: IPoint | undefined;
   private _rootRect: IRectangle;
   private _lastMouseEvent: MouseEvent | undefined;
@@ -64,11 +60,11 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
   }
 
   public componentDidMount() {
-    this._scrollableParent = findScrollableParent(this.refs.root) as HTMLElement;
+    this._scrollableParent = findScrollableParent(this._root) as HTMLElement;
     this._scrollableSurface = (this._scrollableParent === window as any) ? document.body : this._scrollableParent;
     // When scroll events come from window, we need to read scrollTop values from the body.
 
-    const hitTarget = this.props.isDraggingConstrainedToRoot ? this.refs.root : this._scrollableSurface;
+    const hitTarget = this.props.isDraggingConstrainedToRoot ? this._root : this._scrollableSurface;
 
     this._events.on(
       hitTarget,
@@ -93,8 +89,8 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
   }
 
   public render(): JSX.Element {
-    let { rootProps, children } = this.props;
-    let { dragRect } = this.state;
+    const { rootProps, children } = this.props;
+    const { dragRect } = this.state;
 
     return (
       <div
@@ -104,7 +100,7 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
           styles.root,
           rootProps && rootProps.className
         ) }
-        ref='root'
+        ref={ this._resolveRef('_root') }
       >
         { children }
         { dragRect && (<div className={ css('ms-MarqueeSelection-dragMask', styles.dragMask) } />) }
@@ -130,11 +126,11 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
 
   /** Determine if the mouse event occured on a scrollbar of the target element. */
   private _isMouseEventOnScrollbar(ev: MouseEvent) {
-    let targetElement = ev.target as HTMLElement;
-    let targetScrollbarWidth = (targetElement.offsetWidth - targetElement.clientWidth);
+    const targetElement = ev.target as HTMLElement;
+    const targetScrollbarWidth = (targetElement.offsetWidth - targetElement.clientWidth);
 
     if (targetScrollbarWidth) {
-      let targetRect = targetElement.getBoundingClientRect();
+      const targetRect = targetElement.getBoundingClientRect();
 
       // Check vertical scroll
       if (getRTL()) {
@@ -158,7 +154,7 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
 
   @autobind
   private _onMouseDown(ev: MouseEvent) {
-    let { isEnabled, onShouldStartSelection } = this.props;
+    const { isEnabled, onShouldStartSelection } = this.props;
 
     // Ensure the mousedown is within the boundaries of the target. If not, it may have been a click on a scrollbar.
     if (this._isMouseEventOnScrollbar(ev)) {
@@ -177,9 +173,9 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
         this._events.on(this._scrollableParent, 'scroll', this._onAsyncMouseMove);
         this._events.on(window, 'click', this._onMouseUp, true);
 
-        this._autoScroll = new AutoScroll(this.refs.root);
+        this._autoScroll = new AutoScroll(this._root);
         this._scrollTop = this._scrollableSurface.scrollTop;
-        this._rootRect = this.refs.root.getBoundingClientRect();
+        this._rootRect = this._root.getBoundingClientRect();
 
         this._onMouseMove(ev);
       }
@@ -233,8 +229,8 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
       this._lastMouseEvent = ev;
     }
 
-    let rootRect = this._getRootRect();
-    let currentPoint = { x: ev.clientX - rootRect.left, y: ev.clientY - rootRect.top };
+    const rootRect = this._getRootRect();
+    const currentPoint = { x: ev.clientX - rootRect.left, y: ev.clientY - rootRect.top };
 
     if (!this._dragOrigin) {
       this._dragOrigin = currentPoint;
@@ -252,7 +248,7 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
           this._preservedIndicies = selection && selection.getSelectedIndices && selection.getSelectedIndices();
         }
         // We need to constrain the current point to the rootRect boundaries.
-        let constrainedPoint = this.props.isDraggingConstrainedToRoot ? {
+        const constrainedPoint = this.props.isDraggingConstrainedToRoot ? {
           x: Math.max(0, Math.min(rootRect.width, this._lastMouseEvent!.clientX - rootRect.left)),
           y: Math.max(0, Math.min(rootRect.height, this._lastMouseEvent!.clientY - rootRect.top))
         } : {
@@ -260,7 +256,7 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
             y: this._lastMouseEvent!.clientY - rootRect.top
           };
 
-        let dragRect = {
+        const dragRect = {
           left: Math.min(this._dragOrigin.x, constrainedPoint.x),
           top: Math.min(this._dragOrigin.y, constrainedPoint.y),
           width: Math.abs(constrainedPoint.x - this._dragOrigin.x),
@@ -314,7 +310,7 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
       return false;
     }
 
-    const allElements = this.refs.root.querySelectorAll('[data-selection-index]');
+    const allElements = this._root.querySelectorAll('[data-selection-index]');
     for (let i = 0; i < allElements.length; i++) {
       const element = allElements[i];
       const index = Number(element.getAttribute('data-selection-index'));
@@ -332,7 +328,7 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
   private _isInSelectionToggle(ev: MouseEvent): boolean {
     let element: HTMLElement | null = ev.target as HTMLElement;
 
-    while (element && element !== this.refs.root) {
+    while (element && element !== this._root) {
       if (element.getAttribute('data-selection-toggle') === 'true') {
         return true;
       }
@@ -349,8 +345,8 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
       return;
     }
 
-    let { selection } = this.props;
-    let allElements = this.refs.root.querySelectorAll('[data-selection-index]');
+    const { selection } = this.props;
+    const allElements = this._root.querySelectorAll('[data-selection-index]');
 
     if (!this._itemRectCache) {
       this._itemRectCache = {};
@@ -361,8 +357,8 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
     selection.setAllSelected(false);
 
     for (let i = 0; i < allElements.length; i++) {
-      let element = allElements[i];
-      let index = element.getAttribute('data-selection-index') as string;
+      const element = allElements[i];
+      const index = element.getAttribute('data-selection-index') as string;
 
       // Pull the memoized rectangle for the item, or the get the rect and memoize.
       let itemRect = this._itemRectCache[index];
@@ -397,7 +393,7 @@ export class MarqueeSelection extends BaseComponent<IMarqueeSelectionProps, IMar
       }
     }
 
-    for (let index in this._selectedIndicies!) {
+    for (const index in this._selectedIndicies!) {
       if (this._selectedIndicies!.hasOwnProperty(index)) {
         selection.setIndexSelected(Number(index), true, false);
       }
diff --git a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.test.tsx b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.test.tsx
index 50816d1aa2cbe..bb9e3228c718e 100644
--- a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.test.tsx
@@ -8,7 +8,7 @@ import * as renderer from 'react-test-renderer';
 import { MessageBar } from './MessageBar';
 
 describe('MessageBar', () => {
-  let noop = () => {
+  const noop = () => {
     /* no-op */
   };
 
@@ -20,7 +20,7 @@ describe('MessageBar', () => {
 
   it('renders MessageBar correctly', () => {
     const component = renderer.create(<MessageBar>Message</MessageBar>);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
@@ -28,13 +28,13 @@ describe('MessageBar', () => {
     describe('single-line', () => {
       it('is present when onDismiss exists', () => {
         const renderedDOM: HTMLElement = renderIntoDocument(<MessageBar onDismiss={ noop } isMultiline={ false } />);
-        let dismissElement = renderedDOM.querySelector('.ms-MessageBar-dismissal');
+        const dismissElement = renderedDOM.querySelector('.ms-MessageBar-dismissal');
         expect(dismissElement).not.toBeNull();
       });
 
       it('is not present when onDismiss is missing', () => {
         const renderedDOM: HTMLElement = renderIntoDocument(<MessageBar isMultiline={ false } />);
-        let dismissElement = renderedDOM.querySelector('.ms-MessageBar-dismissal');
+        const dismissElement = renderedDOM.querySelector('.ms-MessageBar-dismissal');
         expect(dismissElement).toBeNull();
       });
     });
@@ -42,13 +42,13 @@ describe('MessageBar', () => {
     describe('multi-line', () => {
       it('is present when onDismiss exists', () => {
         const renderedDOM: HTMLElement = renderIntoDocument(<MessageBar onDismiss={ noop } isMultiline={ true } />);
-        let dismissElement = renderedDOM.querySelector('.ms-MessageBar-dismissal');
+        const dismissElement = renderedDOM.querySelector('.ms-MessageBar-dismissal');
         expect(dismissElement).not.toBeNull();
       });
 
       it('is not present when onDismiss is missing', () => {
         const renderedDOM: HTMLElement = renderIntoDocument(<MessageBar isMultiline={ true } />);
-        let dismissElement = renderedDOM.querySelector('.ms-MessageBar-dismissal');
+        const dismissElement = renderedDOM.querySelector('.ms-MessageBar-dismissal');
         expect(dismissElement).toBeNull();
       });
     });
@@ -57,13 +57,13 @@ describe('MessageBar', () => {
   describe('truncated', () => {
     it('is present when onDismiss exists', () => {
       const renderedDOM: HTMLElement = renderIntoDocument(<MessageBar truncated={ true } isMultiline={ false } />);
-      let expandElement = renderedDOM.querySelector('.ms-MessageBar-expand');
+      const expandElement = renderedDOM.querySelector('.ms-MessageBar-expand');
       expect(expandElement).not.toBeNull();
     });
 
     it('is not present when truncated is missing', () => {
       const renderedDOM: HTMLElement = renderIntoDocument(<MessageBar isMultiline={ false } />);
-      let expandElement = renderedDOM.querySelector('.ms-MessageBar-expand');
+      const expandElement = renderedDOM.querySelector('.ms-MessageBar-expand');
       expect(expandElement).toBeNull();
     });
   });
diff --git a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx
index 581ac17e72ccc..ee806b0537517 100644
--- a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx
+++ b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.tsx
@@ -47,7 +47,7 @@ export class MessageBar extends BaseComponent<IMessageBarProps, IMessageBarState
   }
 
   public render(): JSX.Element {
-    let { isMultiline } = this.props;
+    const { isMultiline } = this.props;
 
     return isMultiline ? this._renderMultiLine() : this._renderSingleLine();
   }
@@ -114,7 +114,7 @@ export class MessageBar extends BaseComponent<IMessageBarProps, IMessageBarState
             className={ css('ms-MessageBar-expand', styles.expand) }
             onClick={ this._onClick }
             iconProps={ { iconName: this.state.expandSingleLine ? 'DoubleChevronUp' : 'DoubleChevronDown' } }
-            ariaLabel={ this.props.dismissButtonAriaLabel }
+            ariaLabel={ this.props.overflowButtonAriaLabel }
           />
         </div>
       );
diff --git a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.types.ts b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.types.ts
index f294c9fddc90d..43922025a3822 100644
--- a/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.types.ts
+++ b/packages/office-ui-fabric-react/src/components/MessageBar/MessageBar.types.ts
@@ -33,7 +33,7 @@ export interface IMessageBarProps extends React.HTMLAttributes<HTMLElement> {
    * If null, we don't show a dismiss button.
    * @defaultvalue null
    */
-  onDismiss?: (ev?: React.MouseEvent<HTMLButtonElement | BaseButton | HTMLAnchorElement | Button>) => any;
+  onDismiss?: (ev?: React.MouseEvent<HTMLButtonElement | BaseButton | HTMLAnchorElement | HTMLDivElement | Button>) => any;
 
   /**
    * Determines if the message bar is multi lined.
@@ -54,6 +54,11 @@ export interface IMessageBarProps extends React.HTMLAttributes<HTMLElement> {
   * @defaultvalue false
   */
   truncated?: boolean;
+
+  /**
+  * Aria label on overflow button if truncated is defined.
+  */
+  overflowButtonAriaLabel?: string;
 }
 
 export enum MessageBarType {
diff --git a/packages/office-ui-fabric-react/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap b/packages/office-ui-fabric-react/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap
index 582e808dec4c9..c7ffb8da96dab 100644
--- a/packages/office-ui-fabric-react/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/MessageBar/__snapshots__/MessageBar.test.tsx.snap
@@ -14,7 +14,6 @@ exports[`MessageBar renders MessageBar correctly 1`] = `
     >
       <i
         aria-hidden={true}
-        aria-label={undefined}
         className=
 
             {
diff --git a/packages/office-ui-fabric-react/src/components/MessageBar/examples/MessageBar.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/MessageBar/examples/MessageBar.Basic.Example.tsx
index 1082a2ad73524..e484f8ac25c88 100644
--- a/packages/office-ui-fabric-react/src/components/MessageBar/examples/MessageBar.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/MessageBar/examples/MessageBar.Basic.Example.tsx
@@ -20,6 +20,7 @@ export const MessageBarBasicExample = () => (
       messageBarType={ MessageBarType.error }
       isMultiline={ false }
       onDismiss={ log('test') }
+      dismissButtonAriaLabel='Close'
     >
       Error lorem ipsum dolor sit amet, a elit sem interdum consectetur adipiscing elit. <Link href='www.bing.com'>Visit our website.</Link>
     </MessageBar>
@@ -29,7 +30,9 @@ export const MessageBarBasicExample = () => (
       messageBarType={ MessageBarType.blocked }
       isMultiline={ false }
       onDismiss={ log('test') }
+      dismissButtonAriaLabel='Close'
       truncated={ true }
+      overflowButtonAriaLabel='Overflow'
     >
       Blocked lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi luctus, purus a lobortis tristique, odio augue pharetra metus, ac placerat nunc mi nec dui. Vestibulum aliquam et nunc semper scelerisque. Curabitur vitae orci nec quam condimentum porttitor et sed lacus. Vivamus ac efficitur leo. Cras faucibus mauris libero, ac placerat erat euismod et. Donec pulvinar commodo odio sit amet faucibus. In hac habitasse platea dictumst. Duis eu ante commodo, condimentum nibh pellentesque, laoreet enim. Fusce massa lorem, ultrices eu mi a, fermentum suscipit magna. Integer porta purus pulvinar, hendrerit felis eget, condimentum mauris. <Link href='www.bing.com'>Visit our website.</Link>
     </MessageBar>
@@ -65,6 +68,7 @@ export const MessageBarBasicExample = () => (
     <Label>Warning MessageBar - defaults to multiline, with dismiss and action buttons</Label>
     <MessageBar
       onDismiss={ log('test') }
+      dismissButtonAriaLabel='Close'
       messageBarType={ MessageBarType.warning }
       ariaLabel='Aria help text here'
       actions={
diff --git a/packages/office-ui-fabric-react/src/components/Modal/Modal.tsx b/packages/office-ui-fabric-react/src/components/Modal/Modal.tsx
index 50a068c074b93..edcb7b28c59cd 100644
--- a/packages/office-ui-fabric-react/src/components/Modal/Modal.tsx
+++ b/packages/office-ui-fabric-react/src/components/Modal/Modal.tsx
@@ -81,7 +81,7 @@ export class Modal extends BaseComponent<IModalProps, IDialogState> implements I
   }
 
   public render(): JSX.Element | null {
-    let {
+    const {
       elementToFocusOnDismiss,
       firstFocusableSelector,
       forceFocusInsideTrap,
@@ -95,7 +95,7 @@ export class Modal extends BaseComponent<IModalProps, IDialogState> implements I
       titleAriaId,
       subtitleAriaId,
     } = this.props;
-    let { isOpen, isVisible } = this.state;
+    const { isOpen, isVisible } = this.state;
 
     const modalClassName = css(
       'ms-Modal',
diff --git a/packages/office-ui-fabric-react/src/components/Nav/Nav.base.tsx b/packages/office-ui-fabric-react/src/components/Nav/Nav.base.tsx
new file mode 100644
index 0000000000000..9f3171067c707
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Nav/Nav.base.tsx
@@ -0,0 +1,359 @@
+import * as React from 'react';
+import {
+  autobind,
+  BaseComponent,
+  classNamesFunction,
+  customizable,
+  divProperties,
+  getNativeProps
+} from '../../Utilities';
+import { FocusZone, FocusZoneDirection } from '../../FocusZone';
+import { ActionButton } from '../../Button';
+import { Icon } from '../../Icon';
+import { buttonStyles } from './Nav.styles';
+import {
+  INav,
+  INavProps,
+  INavLinkGroup,
+  INavLink,
+  INavStyles,
+  INavStyleProps
+} from './Nav.types';
+
+// The number pixels per indentation level for Nav links.
+const _indentationSize = 14;
+
+// The number of pixels of left margin
+const _baseIndent = 3;
+
+// global var used in _isLinkSelectedKey
+let _urlResolver: HTMLAnchorElement | undefined;
+
+export function isRelativeUrl(url: string): boolean {
+  // A URL is relative if it has no protocol.
+  return !!url && !/^[a-z0-9+-.]:\/\//i.test(url);
+}
+
+const getClassNames = classNamesFunction<INavStyleProps, INavStyles>();
+
+export interface INavState {
+  isGroupCollapsed?: { [key: string]: boolean };
+  isLinkExpandStateChanged?: boolean;
+  selectedKey?: string;
+}
+
+@customizable('Nav', ['theme'])
+export class NavBase extends BaseComponent<INavProps, INavState> implements INav {
+
+  public static defaultProps: INavProps = {
+    groups: null
+  };
+
+  constructor(props: INavProps) {
+    super(props);
+
+    this.state = {
+      isGroupCollapsed: {},
+      isLinkExpandStateChanged: false,
+      selectedKey: props.initialSelectedKey || props.selectedKey,
+    };
+
+    if (props.groups) {
+      for (const group of props.groups) {
+        if (group.collapseByDefault && group.name) {
+          this.state.isGroupCollapsed![group.name] = true;
+        }
+      }
+    }
+  }
+
+  public componentWillReceiveProps(newProps: INavProps) {
+    const newGroups = newProps.groups || [];
+    const isGroupCollapsed = this.state.isGroupCollapsed!;
+
+    // If the component's props were updated, new groups may have been added, which may have
+    // collapseByDefault set. Ensure that setting is respected for any new groups.
+    // (If isGroupCollapsed is already set for a group, don't overwrite that.)
+    let hasUpdated = false;
+    for (const newGroup of newGroups) {
+      if (newGroup.name && newGroup.collapseByDefault && !isGroupCollapsed.hasOwnProperty(newGroup.name)) {
+        isGroupCollapsed[newGroup.name] = true;
+        hasUpdated = true;
+      }
+    }
+
+    if (hasUpdated) {
+      this.setState({
+        isGroupCollapsed: isGroupCollapsed
+      });
+    }
+  }
+
+  public render(): JSX.Element | null {
+    const { getStyles, groups, className, isOnTop, theme } = this.props;
+
+    if (!groups) {
+      return null;
+    }
+
+    const groupElements: React.ReactElement<{}>[] = groups.map(this._renderGroup);
+
+    const classNames = getClassNames(getStyles!, { theme: theme!, className, isOnTop, groups });
+
+    return (
+      <FocusZone direction={ FocusZoneDirection.vertical }>
+        <nav
+          role='navigation'
+          className={ classNames.root }
+        >
+          { groupElements }
+        </nav>
+      </FocusZone>
+    );
+  }
+
+  public get selectedKey(): string | undefined {
+    return this.state.selectedKey;
+  }
+
+  @autobind
+  private _onRenderLink(link: INavLink) {
+    const { getStyles, groups, theme } = this.props;
+    const classNames = getClassNames(getStyles!, { theme: theme!, groups });
+    return (<div className={ classNames.linkText }>{ link.name }</div>);
+  }
+
+  private _renderNavLink(link: INavLink, linkIndex: number, nestingLevel: number) {
+    const {
+      getStyles,
+      groups,
+      theme,
+      onRenderLink = this._onRenderLink
+    } = this.props;
+
+    const classNames = getClassNames(getStyles!, {
+      theme: theme!,
+      isSelected: this._isLinkSelected(link),
+      isButtonEntry: link.onClick && !link.forceAnchor,
+      leftPadding: _indentationSize * nestingLevel + _baseIndent,
+      groups
+    });
+
+    // Prevent hijacking of the parent window if link.target is defined
+    const rel = link.url && link.target && !isRelativeUrl(link.url) ? 'noopener noreferrer' : undefined;
+
+    return (
+      <ActionButton
+        className={ classNames.link }
+        styles={ buttonStyles }
+        href={ link.url || (link.forceAnchor ? 'javascript:' : undefined) }
+        iconProps={ link.iconProps || { iconName: link.icon || '' } }
+        ariaDescription={ link.title || link.name }
+        onClick={ link.onClick ? this._onNavButtonLinkClicked.bind(this, link) : this._onNavAnchorLinkClicked.bind(this, link) }
+        title={ link.title || link.name }
+        target={ link.target }
+        rel={ rel }
+        aria-label={ link.ariaLabel }
+      >
+        { onRenderLink(link, this._onRenderLink) }
+      </ActionButton>);
+  }
+
+  private _renderCompositeLink(link: INavLink, linkIndex: number, nestingLevel: number): React.ReactElement<{}> {
+    const divProps: React.HTMLProps<HTMLDivElement> = { ...getNativeProps(link, divProperties, ['onClick']) };
+    const { getStyles, groups, theme } = this.props;
+    const classNames = getClassNames(getStyles!, {
+      theme: theme!,
+      isExpanded: !!link.isExpanded,
+      isSelected: this._isLinkSelected(link),
+      isLink: true,
+      position: _indentationSize * nestingLevel + 1,
+      groups
+    });
+
+    return (
+      <div
+        { ...divProps }
+        key={ link.key || linkIndex }
+        className={ classNames.compositeLink }
+      >
+        { (link.links && link.links.length > 0 ?
+          <button
+            className={ classNames.chevronButton }
+            onClick={ this._onLinkExpandClicked.bind(this, link) }
+            aria-label={ this.props.expandButtonAriaLabel }
+            aria-expanded={ link.isExpanded ? 'true' : 'false' }
+          >
+            <Icon
+              className={ classNames.chevronIcon }
+              iconName='ChevronDown'
+            />
+          </button> : null
+        ) }
+        { this._renderNavLink(link, linkIndex, nestingLevel) }
+      </div>
+    );
+  }
+
+  private _renderLink(link: INavLink, linkIndex: number, nestingLevel: number): React.ReactElement<{}> {
+    const { getStyles, groups, theme } = this.props;
+    const classNames = getClassNames(getStyles!, { theme: theme!, groups });
+
+    return (
+      <li key={ link.key || linkIndex } role='listitem' className={ classNames.navItem }>
+        { this._renderCompositeLink(link, linkIndex, nestingLevel) }
+        { (link.isExpanded ? this._renderLinks(link.links, ++nestingLevel) : null) }
+      </li>
+    );
+  }
+
+  private _renderLinks(links: INavLink[] | undefined, nestingLevel: number): React.ReactElement<{}> | null {
+    if (!links || !links.length) {
+      return null;
+    }
+    const linkElements: React.ReactElement<{}>[] = links.map(
+      (link: INavLink, linkIndex: number) => this._renderLink(link, linkIndex, nestingLevel));
+
+    const { getStyles, groups, theme } = this.props;
+    const classNames = getClassNames(getStyles!, { theme: theme!, groups });
+
+    return (
+      <ul role='list' aria-label={ this.props.ariaLabel } className={ classNames.navItems }>
+        { linkElements }
+      </ul>
+    );
+  }
+
+  @autobind
+  private _renderGroup(group: INavLinkGroup, groupIndex: number): React.ReactElement<{}> {
+    const { getStyles, groups, theme } = this.props;
+    const classNames = getClassNames(getStyles!, {
+      theme: theme!,
+      isGroup: true,
+      isExpanded: !this.state.isGroupCollapsed![group.name!],
+      groups
+    });
+
+    return (
+      <div
+        key={ groupIndex }
+        className={ classNames.group }
+      >
+        { (group.name ?
+          <button
+            className={ classNames.chevronButton }
+            onClick={ this._onGroupHeaderClicked.bind(this, group) }
+          >
+            <Icon
+              className={ classNames.chevronIcon }
+              iconName='ChevronDown'
+            />
+            { group.name }
+          </button> : null)
+        }
+        <div className={ classNames.groupContent }>
+          { this._renderLinks(group.links, 0 /* nestingLevel */) }
+        </div>
+      </div>
+    );
+  }
+
+  private _onGroupHeaderClicked(group: INavLinkGroup, ev: React.MouseEvent<HTMLElement>): void {
+    const { isGroupCollapsed } = this.state;
+    const groupKey = group.name!;
+    const isCollapsed = !isGroupCollapsed![groupKey];
+
+    if (group.onHeaderClick) {
+      group.onHeaderClick(ev, isCollapsed);
+    }
+
+    isGroupCollapsed![groupKey] = isCollapsed;
+    this.setState({ isGroupCollapsed: isGroupCollapsed });
+
+    ev.preventDefault();
+    ev.stopPropagation();
+  }
+
+  private _onLinkExpandClicked(link: INavLink, ev: React.MouseEvent<HTMLElement>): void {
+    const { onLinkExpandClick } = this.props;
+
+    if (onLinkExpandClick) {
+      onLinkExpandClick(ev, link);
+    }
+
+    if (!ev.defaultPrevented) {
+      link.isExpanded = !link.isExpanded;
+      this.setState({ isLinkExpandStateChanged: true });
+    }
+
+    ev.preventDefault();
+    ev.stopPropagation();
+  }
+
+  private _onNavAnchorLinkClicked(link: INavLink, ev: React.MouseEvent<HTMLElement>): void {
+    if (this.props.onLinkClick) {
+      this.props.onLinkClick(ev, link);
+    }
+    if (!link.url && link.links && link.links.length > 0) {
+      this._onLinkExpandClicked(link, ev);
+    }
+
+    this.setState({ selectedKey: link.key });
+  }
+
+  private _onNavButtonLinkClicked(link: INavLink, ev: React.MouseEvent<HTMLElement>): void {
+    if (link.onClick) {
+      link.onClick(ev, link);
+    }
+    if (!link.url && link.links && link.links.length > 0) {
+      this._onLinkExpandClicked(link, ev);
+    }
+
+    this.setState({ selectedKey: link.key });
+  }
+
+  private _isLinkSelected(link: INavLink): boolean {
+    // if caller passes in selectedKey, use it as first choice or
+    // if current state.selectedKey (from addressbar) is match to the link
+    if (this.props.selectedKey !== undefined) {
+      return link.key === this.props.selectedKey;
+    } else if (this.state.selectedKey !== undefined && link.key === this.state.selectedKey) {
+      return true;
+    }
+
+    // resolve is not supported for ssr
+    if (typeof (window) === 'undefined') {
+      return false;
+    }
+
+    if (!link.url) {
+      return false;
+    }
+
+    _urlResolver = _urlResolver || document.createElement('a');
+
+    _urlResolver.href = link.url || '';
+    const target: string = _urlResolver.href;
+
+    if (location.href === target) {
+      return true;
+    }
+
+    if (location.protocol + '//' + location.host + location.pathname === target) {
+      return true;
+    }
+
+    if (location.hash) {
+      // Match the hash to the url.
+      if (location.hash === link.url) {
+        return true;
+      }
+
+      // Match a rebased url. (e.g. #foo becomes http://hostname/foo)
+      _urlResolver.href = location.hash.substring(1);
+
+      return _urlResolver.href === target;
+    }
+    return false;
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/Nav/Nav.scss b/packages/office-ui-fabric-react/src/components/Nav/Nav.scss
deleted file mode 100644
index 8095e4a0383ee..0000000000000
--- a/packages/office-ui-fabric-react/src/components/Nav/Nav.scss
+++ /dev/null
@@ -1,196 +0,0 @@
-@import '../../common/common';
-
-$navnode-height: 36px;
-$hasExpandButtonLinkLeftPadding: 28px;
-$noExpandButtonLinkLeftPadding: 20px;
-$linkRightPadding: 20px;
-
-.root {
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-  user-select: none;
-}
-
-.rootIsOnTop {
-  position: absolute;
-}
-
-.navItems {
-  list-style-type: none;
-}
-
-.navItems,
-.navItems > .navItem {
-  padding: 0;
-}
-
-.groupContent {
-  display: none;
-  margin-bottom: 40px;
-}
-
-.group.groupIsExpanded .groupContent {
-  display: block;
-}
-
-.icon {
-  padding: 0px;
-  color: $ms-color-neutralPrimary;
-  background: $ms-color-neutralLighter;
-  transition: transform .1s linear;
-}
-
-.iconLink {
-  @include ms-margin-right(4px);
-}
-
-.chevronButton {
-  display: block;
-
-  font-weight: $ms-font-weight-regular;
-  font-size: $ms-font-size-s;
-
-  @include text-align(left);
-  line-height: $navnode-height;
-  margin: 5px 0;
-  @include padding(0px, $linkRightPadding, 0px, $hasExpandButtonLinkLeftPadding);
-  background: none;
-  border: none;
-
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-
-  cursor: pointer;
-
-  color: $bodyTextColor;
-  background: $bodyBackgroundColor;
-
-  &:visited {
-    color: inherit;
-  }
-
-  &:hover {
-    color: $bodyTextColor;
-    background: $ms-color-neutralLighterAlt;
-  }
-
-  &.chevronButtonIsGroup {
-    width: 100%;
-    height: $navnode-height;
-    border-bottom: 1px solid $bodyDividerColor;
-  }
-}
-
-.chevronIcon {
-  position: absolute;
-  @include ms-left(8px);
-  height: $navnode-height;
-  line-height: $navnode-height;
-  font-size: 12px;
-  transition: transform .1s linear;
-}
-
-.chevronIsExpanded {
-  transform: rotate(-180deg);
-}
-
-.linkText {
-  margin: 0 4px;
-  overflow: hidden;
-  vertical-align: middle;
-  text-overflow: ellipsis;
-}
-
-.compositeLink {
-  display: block;
-  position: relative;
-
-  .chevronButton.chevronButtonLink {
-    display: block;
-    width: $hasExpandButtonLinkLeftPadding - 2;
-    height: $navnode-height - 2;
-    position: absolute;
-    top: 1px;
-    z-index: 1;
-    padding: 0;
-    margin: 0;
-
-    .chevronIcon {
-      top: 0;
-    }
-  }
-
-  color: $bodyTextColor;
-  background: $bodyBackgroundColor;
-
-  &:hover {
-
-    & .link,
-    & .chevronButton {
-      background: $ms-color-neutralLighterAlt;
-      color: $bodyTextColor;
-    }
-  }
-
-  &.compositeLinkIsExpanded {
-    .chevronIcon {
-      transform: rotate(-180deg);
-    }
-  }
-
-  &.compositeLinkIsSelected {
-    & .link,
-    & .chevronButton {
-
-      color: $ms-color-themePrimary;
-      background: $ms-color-neutralLighter;
-
-      &:after {
-        @include border-left(2px, solid, $ms-color-themePrimary);
-
-        content: '';
-        position: absolute;
-        top: 0;
-        @include ms-right(0);
-        bottom: 0;
-        @include ms-left(0);
-      }
-    }
-  }
-}
-
-.link {
-  display: block;
-  position: relative;
-  height: $navnode-height;
-  width: 100%;
-  line-height: $navnode-height;
-  text-decoration: none;
-  cursor: pointer;
-  text-overflow: ellipsis;
-  text-decoration: none;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.buttonEntry {
-  color: $ms-color-themePrimary;
-}
-
-.groupHeaderFontSize {
-  @include ms-font-l;
-}
-
-.chevronButton,
-.chevronButtonGroup,
-.chevronButtonLink,
-.link {
-  @include focus-border();
-}
-
-.root .link {
-  :global(.ms-Button-label) {
-    @include ms-font-m;
-  }
-}
diff --git a/packages/office-ui-fabric-react/src/components/Nav/Nav.styles.ts b/packages/office-ui-fabric-react/src/components/Nav/Nav.styles.ts
new file mode 100644
index 0000000000000..cc80fb46bebd1
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Nav/Nav.styles.ts
@@ -0,0 +1,237 @@
+import { INavStyleProps, INavStyles } from './Nav.types';
+import { IButtonStyles } from '../../Button';
+import {
+  AnimationClassNames,
+  DefaultFontStyles,
+  getFocusStyle,
+  FontSizes,
+  FontWeights
+} from '../../Styling';
+
+export const buttonStyles: IButtonStyles = {
+  textContainer: {
+    overflow: 'hidden',
+  },
+  label: {
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    lineHeight: '36px'
+  }
+};
+
+export const getStyles = (
+  props: INavStyleProps
+): INavStyles => {
+  const {
+    className,
+    theme,
+    isOnTop,
+    isExpanded,
+    isGroup,
+    isLink,
+    isSelected,
+    isButtonEntry,
+    navHeight = 36,
+    position,
+    leftPadding = 20,
+    leftPaddingExpanded = 28,
+    rightPadding = 20
+  } = props;
+
+  const { palette, semanticColors } = theme;
+
+  return ({
+    root: [
+      'ms-Nav',
+      className,
+      {
+        overflowY: 'auto',
+        userSelect: 'none',
+        WebkitOverflowScrolling: 'touch'
+      },
+      isOnTop && [
+        {
+          position: 'absolute'
+        },
+        AnimationClassNames.slideRightIn40
+      ]
+    ],
+    linkText: [
+      'ms-Nav-linkText',
+      {
+        margin: '0 4px',
+        overflow: 'hidden',
+        verticalAlign: 'middle',
+        textOverflow: 'ellipsis'
+      }
+    ],
+    compositeLink: [
+      'ms-Nav-compositeLink',
+      {
+        display: 'block',
+        position: 'relative',
+        color: semanticColors.bodyText,
+        backgroundColor: semanticColors.bodyBackground,
+      },
+      isExpanded && 'is-expanded',
+      isSelected && 'is-selected'
+    ],
+    link: [
+      'ms-Nav-link',
+      getFocusStyle(theme),
+      {
+        display: 'block',
+        position: 'relative',
+        height: `${navHeight}px`,
+        width: '100%',
+        lineHeight: `${navHeight}px`,
+        textDecoration: 'none',
+        cursor: 'pointer',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        paddingLeft: leftPadding,
+        paddingRight: rightPadding,
+        selectors: {
+          '.ms-Nav-compositeLink:hover &': {
+            backgroundColor: palette.neutralLighterAlt,
+            color: semanticColors.bodyText
+          },
+        },
+      },
+      isSelected && {
+        color: palette.themePrimary,
+        backgroundColor: palette.neutralLighter,
+        selectors: {
+          '&:after': {
+            borderLeft: `2px solid ${palette.themePrimary}`,
+            content: '""',
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0
+          }
+        }
+      },
+      isButtonEntry && {
+        color: palette.themePrimary
+      }
+    ],
+    chevronButton: [
+      'ms-Nav-chevronButton',
+      getFocusStyle(theme),
+      {
+        display: 'block',
+        fontWeight: FontWeights.regular,
+        fontSize: FontSizes.small,
+        textAlign: 'left',
+        lineHeight: `${navHeight}px`,
+        margin: '5px 0',
+        padding: `0px, ${rightPadding}px, 0px, ${leftPaddingExpanded}px`,
+        border: 'none',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        cursor: 'pointer',
+        color: semanticColors.bodyText,
+        backgroundColor: 'transparent',
+        selectors: {
+          '&:visited': {
+            color: 'inherit'
+          },
+          '&:hover': {
+            color: semanticColors.bodyText,
+            backgroundColor: palette.neutralLighterAlt
+          },
+          '$compositeLink:hover &': {
+            color: semanticColors.bodyText,
+            backgroundColor: palette.neutralLighterAlt
+          },
+        }
+      },
+      isGroup && [
+        {
+          width: '100%',
+          height: `${navHeight}px`,
+          borderBottom: `1px solid ${semanticColors.bodyDivider}`
+        },
+        DefaultFontStyles.large
+      ],
+      isLink && [
+        {
+          display: 'block',
+          width: `${leftPaddingExpanded - 2}px`,
+          height: `${navHeight - 2}px`,
+          position: 'absolute',
+          top: '1px',
+          left: `${position}px`,
+          zIndex: 1,
+          padding: 0,
+          margin: 0
+        }
+      ],
+      isSelected && {
+        color: palette.themePrimary,
+        backgroundColor: palette.neutralLighterAlt,
+        selectors: {
+          '&:after': {
+            borderLeft: `2px solid ${palette.themePrimary}`,
+            content: '""',
+            position: 'absolute',
+            top: 0,
+            right: 0,
+            bottom: 0,
+            left: 0
+          }
+        }
+      }
+    ],
+    chevronIcon: [
+      'ms-Nav-chevron',
+      {
+        position: 'absolute',
+        left: '8px',
+        height: `${navHeight}px`,
+        lineHeight: `${navHeight}px`,
+        fontSize: '12px',
+        transition: 'transform .1s linear',
+      },
+      isExpanded && {
+        transform: 'rotate(-180deg)'
+      },
+      isLink && {
+        top: 0
+      }
+    ],
+    navItem: [
+      'ms-Nav-navItem',
+      {
+        padding: 0
+      }
+    ],
+    navItems: [
+      'ms-Nav-navItems',
+      {
+        listStyleType: 'none',
+        padding: 0
+      }
+    ],
+    group: [
+      'ms-Nav-group',
+      isExpanded && 'is-expanded'
+    ],
+    groupContent: [
+      'ms-Nav-groupContent',
+      {
+        display: 'none',
+        marginBottom: '40px'
+      },
+      AnimationClassNames.slideDownIn20,
+      isExpanded && {
+        display: 'block'
+      }
+    ]
+  });
+};
diff --git a/packages/office-ui-fabric-react/src/components/Nav/Nav.test.tsx b/packages/office-ui-fabric-react/src/components/Nav/Nav.test.tsx
index 13cd615147437..aec55d51ad990 100644
--- a/packages/office-ui-fabric-react/src/components/Nav/Nav.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Nav/Nav.test.tsx
@@ -1,7 +1,10 @@
 import * as React from 'react';
+
+import { mount } from 'enzyme';
 import * as renderer from 'react-test-renderer';
 
 import { Nav } from './Nav';
+import { NavBase } from './Nav.base';
 
 describe('Nav', () => {
   it('renders Nav correctly', () => {
@@ -17,7 +20,30 @@ describe('Nav', () => {
           }
         ] }
       />);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
-});
\ No newline at end of file
+
+  it('calls onClick() correctly', () => {
+    const handler = jest.fn();
+    const nav = mount<NavBase>(
+      <NavBase
+        groups={ [
+          {
+            links: [
+              {
+                name: 'foo',
+                url: 'http://example.com',
+                onClick: handler
+              }
+            ]
+          }
+        ] }
+      />
+    );
+
+    const link = nav.find('a.ms-Button');
+    link.simulate('click');
+    expect(handler.mock.calls.length).toBe(1);
+  });
+});
diff --git a/packages/office-ui-fabric-react/src/components/Nav/Nav.tsx b/packages/office-ui-fabric-react/src/components/Nav/Nav.tsx
index 7f55d49ec036c..857d638b9998f 100644
--- a/packages/office-ui-fabric-react/src/components/Nav/Nav.tsx
+++ b/packages/office-ui-fabric-react/src/components/Nav/Nav.tsx
@@ -1,381 +1,13 @@
-import * as React from 'react';
+import { styled } from '../../Utilities';
 import {
-  autobind,
-  BaseComponent,
-  css,
-  divProperties,
-  getNativeProps,
-  getRTL
-} from '../../Utilities';
-import { FocusZone, FocusZoneDirection } from '../../FocusZone';
-import { ActionButton, IButtonStyles } from '../../Button';
-import { Icon } from '../../Icon';
-import * as stylesImport from './Nav.scss';
-const styles: any = stylesImport;
-import { AnimationClassNames, mergeStyles } from '../../Styling';
-import {
-  INav,
   INavProps,
-  INavLinkGroup,
-  INavLink
+  INavStyleProps,
+  INavStyles
 } from './Nav.types';
+import { NavBase } from './Nav.base';
+import { getStyles } from './Nav.styles';
 
-// The number pixels per indentation level for Nav links.
-const _indentationSize: number = 14;
-
-// The number of pixels of left margin
-const _baseIndent: number = 3;
-
-// The number of pixels of padding to add to the far side of the button (allows ellipsis to happen)
-const _farSidePadding: number = 20;
-
-// global var used in _isLinkSelectedKey
-let _urlResolver: HTMLAnchorElement | undefined;
-
-export function isRelativeUrl(url: string): boolean {
-  // A URL is relative if it has no protocol.
-  return !!url && !/^[a-z0-9+-.]:\/\//i.test(url);
-}
-
-export interface INavState {
-  isGroupCollapsed?: { [key: string]: boolean };
-  isLinkExpandStateChanged?: boolean;
-  selectedKey?: string;
-}
-
-export class Nav extends BaseComponent<INavProps, INavState> implements INav {
-
-  public static defaultProps: INavProps = {
-    groups: null
-  };
-
-  private _hasExpandButton: boolean;
-
-  constructor(props: INavProps) {
-    super(props);
-
-    this.state = {
-      isGroupCollapsed: {},
-      isLinkExpandStateChanged: false,
-      selectedKey: props.initialSelectedKey || props.selectedKey,
-    };
-
-    if (props.groups) {
-      for (let group of props.groups) {
-        if (group.collapseByDefault && group.name) {
-          this.state.isGroupCollapsed![group.name] = true;
-        }
-      }
-    }
-    this._hasExpandButton = false;
-  }
-
-  public componentWillReceiveProps(newProps: INavProps) {
-    let newGroups = newProps.groups || [];
-    let isGroupCollapsed = this.state.isGroupCollapsed!;
-
-    // If the component's props were updated, new groups may have been added, which may have
-    // collapseByDefault set. Ensure that setting is respected for any new groups.
-    // (If isGroupCollapsed is already set for a group, don't overwrite that.)
-    let hasUpdated = false;
-    for (let newGroup of newGroups) {
-      if (newGroup.name && newGroup.collapseByDefault && !isGroupCollapsed.hasOwnProperty(newGroup.name)) {
-        isGroupCollapsed[newGroup.name] = true;
-        hasUpdated = true;
-      }
-    }
-
-    if (hasUpdated) {
-      this.setState({
-        isGroupCollapsed: isGroupCollapsed
-      });
-    }
-  }
-
-  public render(): JSX.Element | null {
-    const { groups, className, isOnTop } = this.props;
-
-    if (!groups) {
-      return null;
-    }
-
-    // When groups[x].name is specified or any of the links have children, the expand/collapse
-    // chevron button is shown and different padding is needed. _hasExpandButton marks this condition.
-    this._hasExpandButton = groups.some((group: INavLinkGroup) => {
-      return group ? !!group.name || (group.links && group.links.some((link: INavLink) => {
-        return !!(link && link.links && link.links.length);
-      })) : false;
-    });
-
-    const groupElements: React.ReactElement<{}>[] = groups.map(this._renderGroup);
-
-    return (
-      <FocusZone direction={ FocusZoneDirection.vertical }>
-        <nav
-          role='navigation'
-          className={ css(
-            'ms-Nav',
-            styles.root,
-            className,
-            isOnTop && css('is-onTop', styles.rootIsOnTop, AnimationClassNames.slideRightIn40)
-          ) }
-        >
-          { groupElements }
-        </nav>
-      </FocusZone>
-    );
-  }
-
-  public get selectedKey(): string | undefined {
-    return this.state.selectedKey;
-  }
-
-  private _onRenderLink(link: INavLink) {
-    return (<div className={ css('ms-Nav-linkText', styles.linkText) }>{ link.name }</div>);
-  }
-
-  private _renderNavLink(link: INavLink, linkIndex: number, nestingLevel: number) {
-    const isRtl: boolean = getRTL();
-    const paddingBefore = _indentationSize * nestingLevel + _baseIndent;
-    const buttonStyles: IButtonStyles = {
-      root: {
-        [isRtl ? 'paddingRight' : 'paddingLeft']: paddingBefore,
-        [isRtl ? 'paddingLeft' : 'paddingRight']: _farSidePadding,
-      },
-      textContainer: {
-        overflow: 'hidden',
-      },
-      label: {
-        whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        lineHeight: '36px'
-      }
-    };
-    let {
-      onRenderLink = this._onRenderLink
-    } = this.props;
-
-    // Prevent hijacking of the parent window if link.target is defined
-    const rel = link.url && link.target && !isRelativeUrl(link.url) ? 'noopener noreferrer' : undefined;
-
-    return (
-      <ActionButton
-        className={ mergeStyles(
-          'ms-Nav-link' + link.onClick && 'ms-Nav-linkButton',
-          styles.link,
-          link.onClick && !link.forceAnchor && styles.buttonEntry,
-          this._hasExpandButton && 'isOnExpanded') as string
-        }
-        styles={ buttonStyles }
-        href={ link.url || (link.forceAnchor ? 'javascript:' : undefined) }
-        iconProps={ { iconName: link.icon || '' } }
-        description={ link.title || link.name }
-        onClick={ link.onClick ? this._onNavButtonLinkClicked.bind(this, link) : this._onNavAnchorLinkClicked.bind(this, link) }
-        title={ link.title || link.name }
-        target={ link.target }
-        rel={ rel }
-        aria-label={ link.ariaLabel }
-      >
-        { onRenderLink(link, this._onRenderLink) }
-      </ActionButton>);
-  }
-
-  private _renderCompositeLink(link: INavLink, linkIndex: number, nestingLevel: number): React.ReactElement<{}> {
-    const isLinkSelected: boolean = this._isLinkSelected(link);
-    const isRtl: boolean = getRTL();
-    const absolutePositionString = `${_indentationSize * nestingLevel + 1}px`;
-
-    return (
-      <div
-        { ...getNativeProps(link, divProperties) }
-        key={ link.key || linkIndex }
-        className={ css(
-          'ms-Nav-compositeLink',
-          styles.compositeLink,
-          !!link.isExpanded && 'is-expanded',
-          isLinkSelected && 'is-selected',
-          !!link.isExpanded && styles.compositeLinkIsExpanded,
-          isLinkSelected && styles.compositeLinkIsSelected
-        ) }
-      >
-        { (link.links && link.links.length > 0 ?
-          <button
-            className={ mergeStyles(
-              'ms-Nav-chevronButton ms-Nav-chevronButton--link',
-              styles.chevronButton,
-              styles.chevronButtonLink,
-              isRtl && {
-                right: absolutePositionString,
-              },
-              !isRtl && {
-                left: absolutePositionString,
-              }) as string
-            }
-            onClick={ this._onLinkExpandClicked.bind(this, link) }
-            aria-label={ this.props.expandButtonAriaLabel }
-            aria-expanded={ link.isExpanded ? 'true' : 'false' }
-          >
-            <Icon
-              className={ css('ms-Nav-chevron', styles.chevronIcon, link.isExpanded) }
-              iconName='ChevronDown'
-            />
-          </button> : null
-        ) }
-        { this._renderNavLink(link, linkIndex, nestingLevel) }
-      </div>
-    );
-  }
-
-  private _renderLink(link: INavLink, linkIndex: number, nestingLevel: number): React.ReactElement<{}> {
-    return (
-      <li key={ link.key || linkIndex } role='listitem' className={ css(styles.navItem) }>
-        { this._renderCompositeLink(link, linkIndex, nestingLevel) }
-        { (link.isExpanded ? this._renderLinks(link.links, ++nestingLevel) : null) }
-      </li>
-    );
-  }
-
-  private _renderLinks(links: INavLink[] | undefined, nestingLevel: number): React.ReactElement<{}> | null {
-    if (!links || !links.length) {
-      return null;
-    }
-    const linkElements: React.ReactElement<{}>[] = links.map(
-      (link: INavLink, linkIndex: number) => this._renderLink(link, linkIndex, nestingLevel));
-
-    return (
-      <ul role='list' aria-label={ this.props.ariaLabel } className={ css(styles.navItems) }>
-        { linkElements }
-      </ul>
-    );
-  }
-
-  @autobind
-  private _renderGroup(group: INavLinkGroup, groupIndex: number): React.ReactElement<{}> {
-    const isGroupExpanded: boolean = !this.state.isGroupCollapsed![group.name!];
-
-    return (
-      <div
-        key={ groupIndex }
-        className={ css(
-          'ms-Nav-group',
-          styles.group,
-          isGroupExpanded && ('is-expanded ' + styles.groupIsExpanded)
-        ) }
-      >
-        { (group.name ?
-          <button
-            className={ css('ms-Nav-chevronButton ms-Nav-chevronButton--group ms-Nav-groupHeaderFontSize', styles.chevronButton, styles.chevronButtonIsGroup, styles.groupHeaderFontSize) }
-            onClick={ this._onGroupHeaderClicked.bind(this, group) }
-          >
-            <Icon
-              className={ css(
-                'ms-Nav-chevron',
-                styles.chevronIcon,
-                isGroupExpanded && styles.chevronIsExpanded
-              ) }
-              iconName='ChevronDown'
-            />
-            { group.name }
-          </button> : null)
-        }
-        <div className={ css('ms-Nav-groupContent', AnimationClassNames.slideDownIn20, styles.groupContent) }>
-          { this._renderLinks(group.links, 0 /* nestingLevel */) }
-        </div>
-      </div>
-    );
-  }
-
-  private _onGroupHeaderClicked(group: INavLinkGroup, ev: React.MouseEvent<HTMLElement>): void {
-    let { isGroupCollapsed } = this.state;
-    let groupKey = group.name!;
-    let isCollapsed = !isGroupCollapsed![groupKey];
-
-    if (group.onHeaderClick) {
-      group.onHeaderClick(ev, isCollapsed);
-    }
-
-    isGroupCollapsed![groupKey] = isCollapsed;
-    this.setState({ isGroupCollapsed: isGroupCollapsed });
-
-    ev.preventDefault();
-    ev.stopPropagation();
-  }
-
-  private _onLinkExpandClicked(link: INavLink, ev: React.MouseEvent<HTMLElement>): void {
-    const { onLinkExpandClick } = this.props;
-
-    if (onLinkExpandClick) {
-      onLinkExpandClick(ev, link);
-    }
-
-    if (!ev.defaultPrevented) {
-      link.isExpanded = !link.isExpanded;
-      this.setState({ isLinkExpandStateChanged: true });
-    }
-
-    ev.preventDefault();
-    ev.stopPropagation();
-  }
-
-  private _onNavAnchorLinkClicked(link: INavLink, ev: React.MouseEvent<HTMLElement>): void {
-    if (this.props.onLinkClick) {
-      this.props.onLinkClick(ev, link);
-    }
-
-    this.setState({ selectedKey: link.key });
-  }
-
-  private _onNavButtonLinkClicked(link: INavLink, ev: React.MouseEvent<HTMLElement>): void {
-    if (link.onClick) {
-      link.onClick(ev, link);
-    }
-
-    this.setState({ selectedKey: link.key });
-  }
-
-  private _isLinkSelected(link: INavLink): boolean {
-    // if caller passes in selectedKey, use it as first choice or
-    // if current state.selectedKey (from addressbar) is match to the link
-    if (this.props.selectedKey !== undefined) {
-      return link.key === this.props.selectedKey;
-    } else if (this.state.selectedKey !== undefined && link.key === this.state.selectedKey) {
-      return true;
-    }
-
-    // resolve is not supported for ssr
-    if (typeof (window) === 'undefined') {
-      return false;
-    }
-
-    if (!link.url) {
-      return false;
-    }
-
-    _urlResolver = _urlResolver || document.createElement('a');
-
-    _urlResolver.href = link.url || '';
-    const target: string = _urlResolver.href;
-
-    if (location.href === target) {
-      return true;
-    }
-
-    if (location.protocol + '//' + location.host + location.pathname === target) {
-      return true;
-    }
-
-    if (location.hash) {
-      // Match the hash to the url.
-      if (location.hash === link.url) {
-        return true;
-      }
-
-      // Match a rebased url. (e.g. #foo becomes http://hostname/foo)
-      _urlResolver.href = location.hash.substring(1);
-
-      return _urlResolver.href === target;
-    }
-    return false;
-  }
-}
+export const Nav = styled<INavProps, INavStyleProps, INavStyles>(
+  NavBase,
+  getStyles
+);
diff --git a/packages/office-ui-fabric-react/src/components/Nav/Nav.types.ts b/packages/office-ui-fabric-react/src/components/Nav/Nav.types.ts
index 200b55a318f21..d499f4bb52041 100644
--- a/packages/office-ui-fabric-react/src/components/Nav/Nav.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Nav/Nav.types.ts
@@ -1,5 +1,7 @@
 import * as React from 'react';
-import { IRenderFunction } from '../../Utilities';
+import { IStyle, ITheme } from '../../Styling';
+import { IRenderFunction, IStyleFunction } from '../../Utilities';
+import { IIconProps } from '../Icon/Icon.types';
 
 export interface INav {
   /**
@@ -19,15 +21,26 @@ export interface INavProps {
   componentRef?: (component: INav) => void;
 
   /**
-   * A collection of link groups to display in the navigation bar
+   * Call to provide customized styling that will layer on top of the variant rules
    */
-  groups: INavLinkGroup[] | null;
+  getStyles?: IStyleFunction<INavStyleProps, INavStyles>;
+
+  /**
+   * Theme provided by HOC.
+   */
+  theme?: ITheme;
 
   /**
-   * Optional class name to allow styling.
+   * Additional css class to apply to the Nav
+   * @defaultvalue undefined
    */
   className?: string;
 
+  /**
+   * A collection of link groups to display in the navigation bar
+   */
+  groups: INavLinkGroup[] | null;
+
   /**
    * Used to customize how content inside the link tag is rendered
    * @defaultvalue Default link rendering
@@ -146,6 +159,11 @@ export interface INavLink {
    */
   iconClassName?: string;
 
+  /**
+   * button icon props if applied
+   */
+  iconProps?: IIconProps;
+
   /**
    * Deprecated at v0.68.1 and will be removed at >= v1.0.0.
    * @deprecated
@@ -201,3 +219,131 @@ export interface INavLink {
    */
   [propertyName: string]: any;
 }
+
+export interface INavStyleProps {
+  /**
+   * Accept theme prop.
+   */
+  theme: ITheme;
+
+  /**
+   * Accept custom classNames
+   */
+  className?: string;
+
+  /**
+   * is element on top boolean
+   */
+  isOnTop?: boolean;
+
+  /**
+   * is element a link boolean
+   */
+  isLink?: boolean;
+
+  /**
+   * is element a group boolean
+   */
+  isGroup?: boolean;
+
+  /**
+   * is element expanded boolean
+   */
+  isExpanded?: boolean;
+
+  /**
+   * is element selected boolean
+   */
+  isSelected?: boolean;
+
+  /**
+   * is button
+   */
+  isButtonEntry?: boolean;
+
+  /**
+   * Nav height value
+   */
+  navHeight?: number;
+
+  /**
+   * left padding value
+   */
+  leftPadding?: number;
+
+  /**
+   * left padding when expanded value
+   */
+  leftPaddingExpanded?: number;
+
+  /**
+   * right padding value
+   */
+  rightPadding?: number;
+
+  /**
+   * position value
+   */
+  position?: number;
+
+  /**
+   * Inherited from INavProps
+   * A collection of link groups to display in the navigation bar
+   */
+  groups: INavLinkGroup[] | null;
+}
+
+export interface INavStyles {
+  /**
+   * Style set for the root element.
+   */
+  root: IStyle;
+
+  /**
+   * Style set for the link text container div element.
+   */
+  linkText: IStyle;
+
+  /**
+  * Style set for the link element extending the
+  * root style set for ActionButton component.
+  */
+  link: IStyle;
+
+  /**
+   * Style set for the composite link container div element
+   */
+  compositeLink: IStyle;
+
+  /**
+   * Style set for the chevron button inside the composite
+   * link and group elements.
+   */
+  chevronButton: IStyle;
+
+  /**
+   * Style set for the chevron icon inside the composite
+   * link and group elements.
+   */
+  chevronIcon: IStyle;
+
+  /**
+   * Style set for the nav links ul element.
+   */
+  navItems: IStyle;
+
+  /**
+   * Style set for the nav links li element.
+   */
+  navItem: IStyle;
+
+  /**
+   * Style set for the group root div.
+   */
+  group: IStyle;
+
+  /**
+   * Style set for the group content div inside group.
+   */
+  groupContent: IStyle;
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap
index 25e12db86478e..3da206e72ab4f 100644
--- a/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Nav/__snapshots__/Nav.test.tsx.snap
@@ -12,11 +12,20 @@ exports[`Nav renders Nav correctly 1`] = `
   role="presentation"
 >
   <nav
-    className="ms-Nav"
+    className=
+        ms-Nav
+        {
+          -webkit-overflow-scrolling: touch;
+          overflow-y: auto;
+          user-select: none;
+        }
     role="navigation"
   >
     <div
-      className="ms-Nav-group is-expanded undefined"
+      className=
+          ms-Nav-group
+          is-expanded
+
     >
       <div
         className=
@@ -26,19 +35,43 @@ exports[`Nav renders Nav correctly 1`] = `
               animation-fill-mode: both;
               animation-name: css-0,css-13;
               animation-timing-function: cubic-bezier(.1,.9,.2,1);
+              display: block;
+              margin-bottom: 40px;
             }
       >
         <ul
           aria-label={undefined}
-          className=""
+          className=
+              ms-Nav-navItems
+              {
+                list-style-type: none;
+                padding-bottom: 0px;
+                padding-left: 0px;
+                padding-right: 0px;
+                padding-top: 0px;
+              }
           role="list"
         >
           <li
-            className=""
+            className=
+                ms-Nav-navItem
+                {
+                  padding-bottom: 0px;
+                  padding-left: 0px;
+                  padding-right: 0px;
+                  padding-top: 0px;
+                }
             role="listitem"
           >
             <div
-              className="ms-Nav-compositeLink"
+              className=
+                  ms-Nav-compositeLink
+                  {
+                    background-color: #ffffff;
+                    color: #333333;
+                    display: block;
+                    position: relative;
+                  }
               name=""
             >
               <button
@@ -48,9 +81,9 @@ exports[`Nav renders Nav correctly 1`] = `
                 aria-pressed={undefined}
                 className=
                     ms-Button
+                    ms-Nav-link
                     ms-Button--action
                     ms-Button--command
-                    ms-Nav-linkButton
                     {
                       -moz-osx-font-smoothing: grayscale;
                       -webkit-font-smoothing: antialiased;
@@ -60,12 +93,14 @@ exports[`Nav renders Nav correctly 1`] = `
                       box-sizing: border-box;
                       color: #333333;
                       cursor: pointer;
-                      display: inline-block;
-                      font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                      display: block;
+                      font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                       font-size: 14px;
                       font-weight: 400;
-                      height: 40px;
+                      height: 36px;
+                      line-height: 36px;
                       outline: transparent;
+                      overflow: hidden;
                       padding-bottom: 0;
                       padding-left: 3px;
                       padding-right: 20px;
@@ -73,23 +108,30 @@ exports[`Nav renders Nav correctly 1`] = `
                       position: relative;
                       text-align: center;
                       text-decoration: none;
+                      text-overflow: ellipsis;
                       user-select: none;
                       vertical-align: top;
+                      white-space: nowrap;
+                      width: 100%;
                     }
                     &::-moz-focus-inner {
                       border: 0;
                     }
                     .ms-Fabric.is-focusVisible &:focus:after {
                       border: 1px solid #ffffff;
-                      bottom: 0px;
+                      bottom: 1px;
                       content: "";
-                      left: 0px;
+                      left: 1px;
                       outline: 1px solid #666666;
                       position: absolute;
-                      right: 0px;
-                      top: 0px;
+                      right: 1px;
+                      top: 1px;
                       z-index: 1;
                     }
+                    .ms-Nav-compositeLink:hover & {
+                      background-color: #f8f8f8;
+                      color: #333333;
+                    }
                     &:hover {
                       color: #0078d7;
                     }
@@ -122,7 +164,6 @@ exports[`Nav renders Nav correctly 1`] = `
                 >
                   <i
                     aria-hidden={true}
-                    aria-label={undefined}
                     className=
                         ms-Icon-placeHolder
                         ms-Button-icon
@@ -142,10 +183,21 @@ exports[`Nav renders Nav correctly 1`] = `
                           text-align: center;
                           vertical-align: middle;
                         }
+                    data-icon-name=""
                     role="presentation"
                   />
                   <div
-                    className="ms-Nav-linkText"
+                    className=
+                        ms-Nav-linkText
+                        {
+                          margin-bottom: 0;
+                          margin-left: 4px;
+                          margin-right: 4px;
+                          margin-top: 0;
+                          overflow: hidden;
+                          text-overflow: ellipsis;
+                          vertical-align: middle;
+                        }
                   >
                     
                   </div>
diff --git a/packages/office-ui-fabric-react/src/components/Nav/examples/Nav.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Nav/examples/Nav.Basic.Example.tsx
index a54d521da4ce5..2815526478277 100644
--- a/packages/office-ui-fabric-react/src/components/Nav/examples/Nav.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Nav/examples/Nav.Basic.Example.tsx
@@ -42,6 +42,13 @@ export class NavBasicExample extends React.Component<any, any> {
                     onClick: this._onClickHandler2,
                     icon: 'Edit',
                     key: 'key8'
+                  },
+                  {
+                    name: 'Delete',
+                    url: 'http://cnn.com',
+                    onClick: this._onClickHandler2,
+                    iconProps: { iconName: 'Delete' },
+                    key: 'key9'
                   }
                 ]
               }
diff --git a/packages/office-ui-fabric-react/src/components/Nav/index.ts b/packages/office-ui-fabric-react/src/components/Nav/index.ts
index b80f279c0d1f0..e9a8a31652a63 100644
--- a/packages/office-ui-fabric-react/src/components/Nav/index.ts
+++ b/packages/office-ui-fabric-react/src/components/Nav/index.ts
@@ -1,2 +1,3 @@
 export * from './Nav';
+export * from './Nav.base';
 export * from './Nav.types';
diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx
index e151126bddb1a..c2199b343799c 100644
--- a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx
+++ b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx
@@ -5,7 +5,7 @@ import {
   BaseComponent
 } from '../../Utilities';
 import { mergeStyles } from '../../Styling';
-import { IOverflowSet, IOverflowSetProps } from './OverflowSet.types';
+import { IOverflowSet, IOverflowSetProps, IOverflowSetItemProps } from './OverflowSet.types';
 import { FocusZone, FocusZoneDirection } from '../../FocusZone';
 
 import * as stylesImport from './OverflowSet.scss';
@@ -16,10 +16,9 @@ export class OverflowSet extends BaseComponent<IOverflowSetProps, {}> implements
   private _focusZone: FocusZone;
 
   public render() {
-    let {
+    const {
       items,
       overflowItems,
-      onRenderOverflowButton,
       className,
       focusZoneProps,
       vertical = false,
@@ -52,14 +51,12 @@ export class OverflowSet extends BaseComponent<IOverflowSetProps, {}> implements
   }
 
   @autobind
-  private _onRenderItems(items: any[]): JSX.Element[] {
+  private _onRenderItems(items: IOverflowSetItemProps[]): JSX.Element[] {
     return items.map((item, i) => {
-      let wrapperDivProps: React.HTMLProps<HTMLDivElement> = { className: css('ms-OverflowSet-item', styles.item) };
-      if (item.key) {
-        wrapperDivProps.key = item.key;
-      }
+      const wrapperDivProps: React.HTMLProps<HTMLDivElement> = { className: css('ms-OverflowSet-item', styles.item) };
+
       return (
-        <div {...wrapperDivProps}>
+        <div key={ item.key } { ...wrapperDivProps }>
           { this.props.onRenderItem(item) }
         </div>
       );
@@ -68,9 +65,9 @@ export class OverflowSet extends BaseComponent<IOverflowSetProps, {}> implements
 
   @autobind
   private _onRenderOverflowButtonWrapper(items: any[]): JSX.Element {
-    let wrapperDivProps: React.HTMLProps<HTMLDivElement> = { className: css('ms-OverflowSet-overflowButton', styles.item) };
+    const wrapperDivProps: React.HTMLProps<HTMLDivElement> = { className: css('ms-OverflowSet-overflowButton', styles.item) };
     return (
-      <div {...wrapperDivProps}>
+      <div { ...wrapperDivProps }>
         { this.props.onRenderOverflowButton(items) }
       </div>
     );
diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Custom.Example.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Custom.Example.tsx
index ce5992e638ca1..470d5d9501620 100644
--- a/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Custom.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Custom.Example.tsx
@@ -23,7 +23,7 @@ export class OverflowSetCustomExample extends BaseComponent<any, any> {
             onRender: (item: any) => {
               return (
                 <SearchBox
-                  labelText='Search'
+                  placeholder='Search'
                 />
               );
             }
@@ -141,4 +141,4 @@ export class OverflowSetCustomExample extends BaseComponent<any, any> {
       />
     );
   }
-}
\ No newline at end of file
+}
diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Vertical.Example.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Vertical.Example.tsx
index e46f7ec8d6610..a8d6b8571bf4e 100644
--- a/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Vertical.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/OverflowSet/examples/OverflowSet.Vertical.Example.tsx
@@ -1,8 +1,7 @@
 /* tslint:disable:no-unused-variable */
 import * as React from 'react';
 /* tslint:enable:no-unused-variable */
-import { BaseComponent, css } from 'office-ui-fabric-react/lib/Utilities';
-import { IconButton } from 'office-ui-fabric-react/lib/Button';
+import { BaseComponent } from 'office-ui-fabric-react/lib/Utilities';
 import { CommandBarButton } from 'office-ui-fabric-react/lib/Button';
 import { TooltipHost } from 'office-ui-fabric-react/lib/Tooltip';
 import { DirectionalHint } from 'office-ui-fabric-react/lib/common/DirectionalHint';
@@ -10,9 +9,8 @@ import {
   IOverflowSetItemProps,
   OverflowSet
 } from 'office-ui-fabric-react/lib/OverflowSet';
-
+/* tslint:disable-next-line:no-unused-variable */
 import * as stylesImport from './OverflowSet.Example.scss';
-const styles: any = stylesImport;
 
 export class OverflowSetVerticalExample extends BaseComponent<any, any> {
 
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.base.tsx b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.base.tsx
new file mode 100644
index 0000000000000..baa25fc6f8f53
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.base.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  customizable,
+  classNamesFunction,
+  getNativeProps,
+  divProperties,
+  enableBodyScroll,
+  disableBodyScroll
+} from '../../Utilities';
+import {
+  IOverlayProps,
+  IOverlayStyleProps,
+  IOverlayStyles,
+} from './Overlay.types';
+
+const getClassNames = classNamesFunction<IOverlayStyleProps, IOverlayStyles>();
+
+@customizable('Overlay', ['theme'])
+export class OverlayBase extends BaseComponent<IOverlayProps, {}> {
+
+  public componentDidMount() {
+    disableBodyScroll();
+  }
+
+  public componentWillUnmount() {
+    enableBodyScroll();
+  }
+
+  public render() {
+    const {
+      isDarkThemed: isDark,
+      className,
+      theme,
+      getStyles
+    } = this.props;
+
+    const divProps = getNativeProps(this.props, divProperties);
+
+    const classNames = getClassNames(getStyles!, {
+      theme: theme!,
+      className,
+      isDark,
+    });
+
+    return (
+      <div { ...divProps } className={ classNames.root } />
+    );
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.scss b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.scss
deleted file mode 100644
index 19c709336ac24..0000000000000
--- a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-@import '../../common/common';
-
-// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
-
-//
-// Office UI Fabric
-// --------------------------------------------------
-// Modal overlay styles
-
-.root {
-  background-color: $ms-color-whiteTranslucent40;
-  position: absolute;
-  bottom: 0;
-  left:   0;
-  right:  0;
-  top:    0;
-
-//== Modifier: Hidden overlay
-  //
-  &.rootIsNone {
-    visibility: hidden;
-  }
-
-  //== Modifier: Dark overlay
-  //
-  &.rootIsDark {
-    background-color: $ms-color-blackTranslucent40;
-  }
-
-  @include high-contrast {
-    border: 1px solid WindowText;
-  }
-}
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.styles.ts b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.styles.ts
new file mode 100644
index 0000000000000..4ef125c30226c
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.styles.ts
@@ -0,0 +1,48 @@
+import { IOverlayStyleProps, IOverlayStyles } from './Overlay.types';
+import { HighContrastSelector } from '../../Styling';
+
+export const getStyles = (
+  props: IOverlayStyleProps
+): IOverlayStyles => {
+  const {
+    className,
+    theme,
+    isNone,
+    isDark,
+  } = props;
+
+  const { palette } = theme;
+
+  return ({
+    root: [
+      'ms-Overlay',
+      {
+        backgroundColor: palette.whiteTranslucent40,
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0,
+        position: 'absolute',
+
+        selectors: {
+          [HighContrastSelector]: {
+            border: '1px solid WindowText',
+          }
+        }
+      },
+
+      isNone && {
+        visibility: 'hidden',
+      },
+
+      isDark && [
+        'ms-Overlay--dark',
+        {
+          backgroundColor: palette.blackTranslucent40,
+        }
+      ],
+
+      className
+    ],
+  });
+};
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.tsx b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.tsx
index a76d03bef5c66..508a171162fa9 100644
--- a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.tsx
+++ b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.tsx
@@ -1,41 +1,13 @@
-import * as React from 'react';
+import { styled } from '../../Utilities';
 import {
-  BaseComponent,
-  css,
-  getNativeProps,
-  divProperties,
-  enableBodyScroll,
-  disableBodyScroll
-} from '../../Utilities';
-import { IOverlayProps } from './Overlay.types';
-
-import * as stylesImport from './Overlay.scss';
-const styles: any = stylesImport;
-
-export class Overlay extends BaseComponent<IOverlayProps, {}> {
-
-  public componentDidMount() {
-    disableBodyScroll();
-  }
-
-  public componentWillUnmount() {
-    enableBodyScroll();
-  }
-
-  public render() {
-    let { isDarkThemed, className } = this.props;
-    let divProps = getNativeProps(this.props, divProperties);
-
-    let modifiedClassName = css(
-      'ms-Overlay',
-      styles.root,
-      className,
-      {
-        ['ms-Overlay--dark ' + styles.rootIsDark]: isDarkThemed,
-      });
-
-    return (
-      <div { ...divProps } className={ modifiedClassName } />
-    );
-  }
-}
+  IOverlayProps,
+  IOverlayStyleProps,
+  IOverlayStyles
+} from './Overlay.types';
+import { OverlayBase } from './Overlay.base';
+import { getStyles } from './Overlay.styles';
+
+export const Overlay = styled<IOverlayProps, IOverlayStyleProps, IOverlayStyles>(
+  OverlayBase,
+  getStyles
+);
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.types.ts b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.types.ts
index f93363283a0dd..c6e2810e8ea10 100644
--- a/packages/office-ui-fabric-react/src/components/Overlay/Overlay.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Overlay/Overlay.types.ts
@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { IStyle, ITheme } from '../../Styling';
+import { IStyleFunction } from '../../Utilities';
 
 export interface IOverlay {
 
@@ -6,14 +8,60 @@ export interface IOverlay {
 
 export interface IOverlayProps extends React.HTMLAttributes<HTMLElement> {
   /**
-   * Optional callback to access the IOverlay interface. Use this instead of ref for accessing
-   * the public methods and properties of the component.
+   * Gets the component ref.
    */
-  componentRef?: (component: IOverlay) => void;
+  componentRef?: (component: IOverlayProps) => void;
+
+  /**
+   * Call to provide customized styling that will layer on top of the variant rules
+   */
+  getStyles?: IStyleFunction<IOverlayStyleProps, IOverlayStyles>;
+
+  /**
+   * Theme provided by HOC.
+   */
+  theme?: ITheme;
+
+  /**
+   * Additional css class to apply to the Overlay
+   * @defaultvalue undefined
+   */
+  className?: string;
 
   /**
    * Whether to use the dark-themed overlay.
    * @defaultvalue false
    */
   isDarkThemed?: boolean;
-}
\ No newline at end of file
+
+  onClick?: () => void;
+}
+
+export interface IOverlayStyleProps {
+  /**
+   * Accept theme prop.
+   */
+  theme: ITheme;
+
+  /**
+   * Accept custom classNames
+   */
+  className?: string;
+
+  /**
+   * Is overlay visible
+   */
+  isNone?: boolean;
+
+  /**
+   * Is overlay dark themed
+   */
+  isDark?: boolean;
+}
+
+export interface IOverlayStyles {
+  /**
+   * Style for the root element.
+   */
+  root: IStyle;
+}
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/OverlayPage.tsx b/packages/office-ui-fabric-react/src/components/Overlay/OverlayPage.tsx
index 56c21085b6fd0..56b3d0c1ffaf6 100644
--- a/packages/office-ui-fabric-react/src/components/Overlay/OverlayPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Overlay/OverlayPage.tsx
@@ -29,6 +29,7 @@ export class OverlayPage extends React.Component<IComponentDemoPageProps, {}> {
             </ExampleCard>
           </div>
         }
+        allowNativeProps={ true }
         propertiesTables={
           <PropertiesTableSet
             sources={ [
@@ -64,7 +65,7 @@ export class OverlayPage extends React.Component<IComponentDemoPageProps, {}> {
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...OverlayStatus}
+            { ...OverlayStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx
index 7c0f82f43bbe2..5e232b15d8f3c 100644
--- a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx
@@ -1,9 +1,18 @@
 import * as React from 'react';
-import { autobind } from 'office-ui-fabric-react/lib/Utilities';
+import {
+  autobind,
+  IStyleFunction,
+  classNamesFunction
+} from '../../../Utilities';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
-import { Overlay } from 'office-ui-fabric-react/lib/Overlay';
 
-import './Overlay.Example.scss';
+import { Overlay } from '../Overlay';
+
+import { getStyles, IOverlayExampleStyles } from './Overlay.Example.styles';
+
+export interface IOverlayDarkExampleProps {
+  getStyles?: IStyleFunction<{}, IOverlayExampleStyles>;
+}
 
 export class OverlayDarkExample extends React.Component<{}, {
   isOverlayVisible: boolean;
@@ -15,7 +24,9 @@ export class OverlayDarkExample extends React.Component<{}, {
   }
 
   public render() {
-    let { isOverlayVisible } = this.state;
+    const { isOverlayVisible } = this.state;
+    const getClassNames = classNamesFunction<{}, IOverlayExampleStyles>();
+    const classNames = getClassNames(getStyles);
 
     return (
       <div>
@@ -28,7 +39,7 @@ export class OverlayDarkExample extends React.Component<{}, {
             isDarkThemed={ true }
             onClick={ this._setVisibilityFalse }
           >
-            <div className='OverlayExample-content'>
+            <div className={ classNames.root }>
               <p>I am content within the overlay.</p>
             </div>
           </Overlay>
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Example.scss b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Example.scss
deleted file mode 100644
index 7fe7f8a883af7..0000000000000
--- a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Example.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-:global {
-
-  .OverlayExample-content {
-    position: absolute;
-    background: blue;
-    color: white;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    padding: 10px;
-  }
-
-}
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Example.styles.ts b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Example.styles.ts
new file mode 100644
index 0000000000000..da0fa19e10345
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Example.styles.ts
@@ -0,0 +1,23 @@
+import { IStyle } from '../../../Styling';
+
+export interface IOverlayExampleStyles {
+  root: IStyle;
+}
+
+export const getStyles = (): IOverlayExampleStyles => {
+
+  return ({
+    root: [
+      'OverlayExample-content',
+      {
+        background: 'blue',
+        bottom: '0',
+        color: 'white',
+        left: '0',
+        padding: '10px',
+        position: 'absolute',
+        right: '0',
+      }
+    ]
+  });
+};
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx
index bbfd3f6889c87..b563f5cba3af6 100644
--- a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx
@@ -1,8 +1,18 @@
 import * as React from 'react';
+import {
+  autobind,
+  IStyleFunction,
+  classNamesFunction
+} from '../../../Utilities';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
-import { Overlay } from 'office-ui-fabric-react/lib/Overlay';
 
-import './Overlay.Example.scss';
+import { Overlay } from '../Overlay';
+
+import { getStyles, IOverlayExampleStyles } from './Overlay.Example.styles';
+
+export interface IOverlayLightExampleProps {
+  getStyles?: IStyleFunction<{}, IOverlayExampleStyles>;
+}
 
 export class OverlayLightExample extends React.Component<{}, {
   isOverlayVisible: boolean;
@@ -10,22 +20,23 @@ export class OverlayLightExample extends React.Component<{}, {
   constructor(props: {}) {
     super(props);
 
-    this._onClick = this._onClick.bind(this);
-
-    this.state = {
-      isOverlayVisible: false
-    };
+    this.state = { isOverlayVisible: false };
   }
 
   public render() {
-    let { isOverlayVisible } = this.state;
+    const { isOverlayVisible } = this.state;
+    const getClassNames = classNamesFunction<{}, IOverlayExampleStyles>();
+    const classNames = getClassNames(getStyles);
 
     return (
       <div>
-        <DefaultButton onClick={ this._onClick }>Show the overlay</DefaultButton>
+        <DefaultButton
+          onClick={ this._toggleOverlay }
+          text='Show the overlay'
+        />
         { isOverlayVisible && (
-          <Overlay onClick={ this._onClick }>
-            <div className='OverlayExample-content'>
+          <Overlay onClick={ this._setVisibilityFalse } >
+            <div className={ classNames.root }>
               <p>I am content within the overlay.</p>
             </div>
           </Overlay>
@@ -34,9 +45,13 @@ export class OverlayLightExample extends React.Component<{}, {
     );
   }
 
-  private _onClick() {
-    this.setState({
-      isOverlayVisible: !this.state.isOverlayVisible
-    });
+  @autobind
+  private _setVisibilityFalse(): void {
+    this.setState({ isOverlayVisible: false });
+  }
+
+  @autobind
+  private _toggleOverlay(): void {
+    this.setState({ isOverlayVisible: !this.state.isOverlayVisible });
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/index.ts b/packages/office-ui-fabric-react/src/components/Overlay/index.ts
index 34cc685fc4bb3..8dbb699616e0b 100644
--- a/packages/office-ui-fabric-react/src/components/Overlay/index.ts
+++ b/packages/office-ui-fabric-react/src/components/Overlay/index.ts
@@ -1,2 +1,3 @@
 export * from './Overlay';
+export * from './Overlay.base';
 export * from './Overlay.types';
diff --git a/packages/office-ui-fabric-react/src/components/Panel/Panel.test.tsx b/packages/office-ui-fabric-react/src/components/Panel/Panel.test.tsx
index 3b200ec3e7b1c..342b065e1f397 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/Panel.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/Panel.test.tsx
@@ -27,7 +27,7 @@ describe('Panel', () => {
       dismissedCalled = true;
     };
 
-    let panel: Panel = ReactDOM.render(
+    const panel: Panel = ReactDOM.render(
       <Panel
         isOpen={ true }
         onDismiss={ setDismissTrue }
diff --git a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
index d996d0a5b8c4c..baee354cc6acd 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/Panel.tsx
@@ -15,7 +15,7 @@ import { Layer } from '../Layer/Layer';
 import { Overlay } from '../../Overlay';
 import { Popup } from '../../Popup';
 import { IconButton } from '../../Button';
-import { AnimationClassNames, getTheme, FontSizes, IconFontSizes } from '../../Styling';
+import { AnimationClassNames, getTheme, IconFontSizes } from '../../Styling';
 import * as stylesImport from './Panel.scss';
 const styles: any = stylesImport;
 const theme = getTheme();
@@ -75,7 +75,7 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
   }
 
   public render() {
-    let {
+    const {
       className = '',
       elementToFocusOnDismiss,
       firstFocusableSelector,
@@ -96,10 +96,10 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
       onRenderBody = this._onRenderBody,
       onRenderFooter = this._onRenderFooter
     } = this.props;
-    let { isOpen, isAnimating, id } = this.state;
-    let isLeft = type === PanelType.smallFixedNear ? true : false;
-    let isRTL = getRTL();
-    let isOnRightSide = isRTL ? isLeft : !isLeft;
+    const { isOpen, isAnimating, id } = this.state;
+    const isLeft = type === PanelType.smallFixedNear ? true : false;
+    const isRTL = getRTL();
+    const isOnRightSide = isRTL ? isLeft : !isLeft;
     const headerTextId = id + '-headerText';
     const customWidthStyles = (type === PanelType.custom) ? { width: customWidth } : {};
     const renderProps: IPanelProps = { ...this.props, componentId: id };
@@ -290,8 +290,8 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
 
   @autobind
   private _onRenderFooter(props: IPanelProps): JSX.Element | null {
-    let { isFooterSticky } = this.state;
-    let { onRenderFooterContent = null } = this.props;
+    const { isFooterSticky } = this.state;
+    const { onRenderFooterContent = null } = this.props;
     if (onRenderFooterContent) {
       return (
         <div className={ css('ms-Panel-footer', styles.footer, isFooterSticky && styles.footerIsSticky) } >
@@ -305,10 +305,10 @@ export class Panel extends BaseComponent<IPanelProps, IPanelState> implements IP
   }
 
   private _updateFooterPosition() {
-    let _content = this._content;
+    const _content = this._content;
     if (_content) {
-      let height = _content.clientHeight;
-      let innerHeight = _content.scrollHeight;
+      const height = _content.clientHeight;
+      const innerHeight = _content.scrollHeight;
 
       this.setState({
         isFooterSticky: height < innerHeight ? true : false
diff --git a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.ExtraLarge.Example.tsx b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.ExtraLarge.Example.tsx
index 2ee4be0df9c0e..9269f6e81f9c1 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.ExtraLarge.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.ExtraLarge.Example.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { autobind } from 'office-ui-fabric-react/lib/Utilities';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';
 
diff --git a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Large.Example.tsx b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Large.Example.tsx
index ca15fbdc56500..8f1b57da41804 100644
--- a/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Large.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Panel/examples/Panel.Large.Example.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { autobind } from 'office-ui-fabric-react/lib/Utilities';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
 import { Panel, PanelType } from 'office-ui-fabric-react/lib/Panel';
 
diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx
new file mode 100644
index 0000000000000..35ba6e3fd38a1
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.base.tsx
@@ -0,0 +1,140 @@
+import * as React from 'react';
+import {
+  BaseComponent,
+  autobind,
+  css,
+  divProperties,
+  getNativeProps,
+  IRenderFunction
+} from '../../Utilities';
+import { TooltipHost, TooltipOverflowMode, DirectionalHint } from '../../Tooltip';
+import { PersonaCoin } from './PersonaCoin';
+import {
+  IPersonaProps,
+  PersonaPresence as PersonaPresenceEnum,
+  PersonaSize
+} from './Persona.types';
+import {
+  PERSONA_PRESENCE,
+  PERSONA_SIZE
+} from './PersonaConsts';
+import * as stylesImport from './Persona.scss';
+const styles: any = stylesImport;
+
+export class PersonaBase extends BaseComponent<IPersonaProps, {}> {
+  public static defaultProps: IPersonaProps = {
+    primaryText: '',
+    size: PersonaSize.size48,
+    presence: PersonaPresenceEnum.none,
+    imageAlt: ''
+  };
+
+  constructor(props: IPersonaProps) {
+    super(props);
+  }
+
+  public render() {
+    const {
+      hidePersonaDetails,
+      onRenderPrimaryText,
+      onRenderSecondaryText,
+      onRenderTertiaryText,
+      onRenderOptionalText,
+    } = this.props;
+    const size = this.props.size as PersonaSize;
+
+    // These properties are to be explicitly passed into PersonaCoin because they are the only props directly used
+    const {
+      className,
+      coinProps,
+      coinSize,
+      imageUrl,
+      imageAlt,
+      imageInitials,
+      initialsColor,
+      presence,
+      primaryText,
+      imageShouldFadeIn,
+      imageShouldStartVisible,
+      showSecondaryText,
+      onPhotoLoadingStateChange,
+      onRenderCoin
+    } = this.props;
+
+    const personaCoinProps = {
+      coinProps,
+      coinSize,
+      imageUrl,
+      imageAlt,
+      imageInitials,
+      initialsColor,
+      presence,
+      primaryText,
+      imageShouldFadeIn,
+      imageShouldStartVisible,
+      size,
+      onPhotoLoadingStateChange,
+      onRenderCoin
+    };
+
+    const divProps = getNativeProps(this.props, divProperties);
+    const personaDetails = (
+      <div className={ css('ms-Persona-details', styles.details) }>
+        { this._renderElement(
+          this.props.primaryText,
+          css('ms-Persona-primaryText', styles.primaryText),
+          onRenderPrimaryText) }
+        { this._renderElement(
+          this.props.secondaryText,
+          css('ms-Persona-secondaryText', styles.secondaryText),
+          onRenderSecondaryText) }
+        { this._renderElement(
+          this.props.tertiaryText,
+          css('ms-Persona-tertiaryText', styles.tertiaryText),
+          onRenderTertiaryText) }
+        { this._renderElement(
+          this.props.optionalText,
+          css('ms-Persona-optionalText', styles.optionalText),
+          onRenderOptionalText) }
+        { this.props.children }
+      </div>
+    );
+
+    return (
+      <div
+        { ...divProps }
+        className={
+          css('ms-Persona',
+            styles.root,
+            className,
+            PERSONA_SIZE[size],
+            PERSONA_PRESENCE[presence as PersonaPresenceEnum],
+            showSecondaryText && styles.showSecondaryText
+          )
+        }
+        style={ coinSize ? { height: coinSize, minWidth: coinSize } : undefined }
+      >
+        <PersonaCoin { ...personaCoinProps } />
+        { (!hidePersonaDetails || (size === PersonaSize.size10 || size === PersonaSize.tiny)) && personaDetails }
+      </div>
+    );
+  }
+
+  @autobind
+  private _renderElement(text: string | undefined, className: string, render?: IRenderFunction<IPersonaProps>): JSX.Element {
+    return (
+      <div className={ className }>
+        { render
+          ? render(this.props)
+          : text && (<TooltipHost
+            content={ text }
+            overflowMode={ TooltipOverflowMode.Parent }
+            directionalHint={ DirectionalHint.topLeftEdge }
+          >
+            { text }
+          </TooltipHost>)
+        }
+      </div>
+    );
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.scss b/packages/office-ui-fabric-react/src/components/Persona/Persona.scss
index ad5db01649bb7..24f15f0e191a9 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/Persona.scss
+++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.scss
@@ -51,7 +51,6 @@ $ms-Persona-presenceBorder: 2px;
   height: $ms-Persona-size48;
   display: flex;
   align-items: center;
-  overflow: hidden;
 
   .contextualHost {
     display: none;
@@ -64,18 +63,6 @@ $ms-Persona-presenceBorder: 2px;
   }
 }
 
-.imageArea {
-  position: relative;
-  text-align: center;
-  flex: 0 0 auto;
-  height: $ms-Persona-size48;
-  width: $ms-Persona-size48;
-
-  .image {
-    border: 0px;
-  }
-}
-
 //= Note: The doughboy placeholder is being deprecated.
 // The initials color block (.ms-Persona-initials) will be used going forward
 // as a fallback when the persona does not have an image.
@@ -89,39 +76,6 @@ $ms-Persona-presenceBorder: 2px;
   z-index: $ms-zIndex-middle;
 }
 
-.initials {
-  border-radius: 50%;
-  color: $ms-color-white;
-  font-size: $ms-font-size-l;
-  font-weight: $ms-font-weight-regular;
-  line-height: 46px;
-  height: $ms-Persona-size48;
-
-  @include high-contrast {
-    border: 1px solid WindowText;
-    -ms-high-contrast-adjust: none;
-    color: WindowText;
-    box-sizing: border-box;
-    // Using important to override all of the more specific initialsIsColor rules
-    background-color: Window !important;
-  }
-}
-
-.image {
-  @include ms-margin-right(10px);
-  position: absolute;
-  top: 0;
-  @include ms-left(0);
-  width: 100%;
-  height: 100%;
-  border-radius: 50%;
-  perspective: 1px;
-}
-
-.image[src=""] {
-  display: none;
-}
-
 .presence {
   background-color: $ms-color-presence-available;
   position: absolute;
@@ -202,13 +156,7 @@ $ms-Persona-presenceBorder: 2px;
   min-width: $ms-Persona-size10;
 }
 
-.rootIsSize10{
-  .imageArea {
-    overflow: visible;
-    background: transparent;
-    height: 0;
-    width: 0;
-  }
+.rootIsSize10 {
 
   .presence {
     @include ms-right(auto);
@@ -242,14 +190,6 @@ $ms-Persona-presenceBorder: 2px;
   }
 }
 
-.size10NoPresenceIcon {
-  font-size: 10px;
-  position: absolute;
-  top: 5px;
-  @include ms-right(auto);
-  @include ms-left(0);
-}
-
 //== Modifier: Size 10 Persona with read only state
 //
 // This variant includes a semicolon, and is
@@ -266,29 +206,17 @@ $ms-Persona-presenceBorder: 2px;
 //== Modifier: Size 16 Persona
 //
 .root.rootIsSize16 {
-  height: $ms-Persona-size16 + $ms-Persona-presenceBorder;
-  min-width: $ms-Persona-size16  + $ms-Persona-presenceBorder;
-  overflow: hidden;
+  height: $ms-Persona-size16;
+  min-width: $ms-Persona-size16;
 }
 
 .rootIsSize16 {
-  .imageArea,
-  .image {
-    height: $ms-Persona-size16;
-    width: $ms-Persona-size16;
-  }
 
   .placeholder {
     font-size: 18px;
     top: 4px;
   }
 
-  .initials {
-    font-size: $ms-font-size-xs;
-    height: $ms-Persona-size16;
-    line-height: $ms-Persona-size16;
-  }
-
   .presence {
     height: $ms-Persona-presenceSize6;
     width: $ms-Persona-presenceSize6;
@@ -312,28 +240,17 @@ $ms-Persona-presenceBorder: 2px;
 //== Modifier: Size 24 Persona
 //
 .root.rootIsSize24 {
-  height: $ms-Persona-size24 + $ms-Persona-presenceBorder;
-  min-width: $ms-Persona-size24 + $ms-Persona-presenceBorder;
+  height: $ms-Persona-size24;
+  min-width: $ms-Persona-size24;
 }
 
 .rootIsSize24 {
-  .imageArea,
-  .image {
-    height: $ms-Persona-size24;
-    width: $ms-Persona-size24;
-  }
 
   .placeholder {
     font-size: 18px;
     top: 4px;
   }
 
-  .initials {
-    font-size: $ms-font-size-xs;
-    height: $ms-Persona-size24;
-    line-height: $ms-Persona-size24;
-  }
-
   .presence {
     height: $ms-Persona-presenceSize8;
     width: $ms-Persona-presenceSize8;
@@ -372,33 +289,20 @@ $ms-Persona-presenceBorder: 2px;
   }
 }
 
-
 //== Modifier: Size 28 Persona
 //
 .root.rootIsSize28 {
-  height: $ms-Persona-size28 + $ms-Persona-presenceBorder;
-  min-width: $ms-Persona-size28 + $ms-Persona-presenceBorder;
-  overflow: hidden;
+  height: $ms-Persona-size28;
+  min-width: $ms-Persona-size28;
 }
 
 .rootIsSize28 {
-  .imageArea,
-  .image {
-    height: $ms-Persona-size28;
-    width: $ms-Persona-size28;
-  }
 
   .placeholder {
     font-size: 18px;
     top: 4px;
   }
 
-  .initials {
-    font-size: $ms-font-size-xs;
-    height: $ms-Persona-size28;
-    line-height: $ms-Persona-size28;
-  }
-
   .presence {
     height: $ms-Persona-presenceSize8;
     width: $ms-Persona-presenceSize8;
@@ -441,28 +345,17 @@ $ms-Persona-presenceBorder: 2px;
 //== Modifier: Size 32 Persona
 //
 .root.rootIsSize32 {
-  height: $ms-Persona-size32 + $ms-Persona-presenceBorder;
-  min-width: $ms-Persona-size32 + $ms-Persona-presenceBorder;
+  height: $ms-Persona-size32;
+  min-width: $ms-Persona-size32;
 }
 
 .rootIsSize32 {
-  .imageArea,
-  .image {
-    height: $ms-Persona-size32;
-    width: $ms-Persona-size32;
-  }
 
   .placeholder {
     font-size: 28px;
     top: 6px;
   }
 
-  .initials {
-    font-size: $ms-font-size-m;
-    height: $ms-Persona-size32;
-    line-height: $ms-Persona-size32;
-  }
-
   .presence {
     height: $ms-Persona-presenceSize8;
     width: $ms-Persona-presenceSize8;
@@ -495,28 +388,17 @@ $ms-Persona-presenceBorder: 2px;
 //== Modifier: Size 40 Persona
 //
 .root.rootIsSize40 {
-  height: $ms-Persona-size40 + $ms-Persona-presenceBorder;
-  min-width: $ms-Persona-size40 + $ms-Persona-presenceBorder;
+  height: $ms-Persona-size40;
+  min-width: $ms-Persona-size40;
 }
 
 .rootIsSize40 {
-  .imageArea,
-  .image {
-    height: $ms-Persona-size40;
-    width: $ms-Persona-size40;
-  }
 
   .placeholder {
     font-size: 38px;
     top: 5px;
   }
 
-  .initials {
-    font-size: $ms-font-size-m;
-    height: $ms-Persona-size40;
-    line-height: $ms-Persona-size40;
-  }
-
   .primaryText {
     font-size: $ms-font-size-m;
   }
@@ -526,28 +408,17 @@ $ms-Persona-presenceBorder: 2px;
 //== Modifier: Size 72 Persona
 //
 .root.rootIsSize72 {
-  height: $ms-Persona-size72 + $ms-Persona-presenceBorder;
-  min-width: $ms-Persona-size72 + $ms-Persona-presenceBorder;
+  height: $ms-Persona-size72;
+  min-width: $ms-Persona-size72;
 }
 
 .rootIsSize72 {
-  .imageArea,
-  .image {
-    height: $ms-Persona-size72;
-    width: $ms-Persona-size72;
-  }
 
   .placeholder {
     font-size: 67px;
     top: 10px;
   }
 
-  .initials {
-    font-size: $ms-font-size-xxl;
-    height: $ms-Persona-size72;
-    line-height: 70px;
-  }
-
   .presence {
     height: $ms-Persona-presenceSize20;
     width: $ms-Persona-presenceSize20;
@@ -575,28 +446,17 @@ $ms-Persona-presenceBorder: 2px;
 //== Modifier: Size 100 Persona
 //
 .root.rootIsSize100 {
-  height: $ms-Persona-size100 + $ms-Persona-presenceBorder;
-  min-width: $ms-Persona-size100 + $ms-Persona-presenceBorder;
+  height: $ms-Persona-size100;
+  min-width: $ms-Persona-size100;
 }
 
 .rootIsSize100 {
-  .imageArea,
-  .image {
-    height: $ms-Persona-size100;
-    width: $ms-Persona-size100;
-  }
 
   .placeholder {
     font-size: 95px;
     top: 12px;
   }
 
-  .initials {
-    font-size: $ms-font-size-su;
-    height: $ms-Persona-size100;
-    line-height: 96px;
-  }
-
   .presence {
     height: $ms-Persona-presenceSize28;
     width: $ms-Persona-presenceSize28;
diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts
new file mode 100644
index 0000000000000..61b84a0b2a2b5
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.styles.ts
@@ -0,0 +1,16 @@
+import { IPersonaStyleProps, IPersonaStyles } from './Persona.types';
+
+export const getStyles = (
+  props: IPersonaStyleProps
+): IPersonaStyles => {
+  return ({
+    root: [
+      'ms-Persona',
+      {
+        // Insert css properties
+      }
+    ],
+
+    // Insert className styles
+  });
+};
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.test.tsx b/packages/office-ui-fabric-react/src/components/Persona/Persona.test.tsx
index 180e8e2df2111..cd67d25d91603 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/Persona.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.test.tsx
@@ -3,7 +3,6 @@ import * as React from 'react';
 import * as renderer from 'react-test-renderer';
 import { setRTL } from '../../Utilities';
 import { Persona } from './Persona';
-import { PersonaInitialsColor } from './Persona.types';
 import { mount, ReactWrapper } from 'enzyme';
 
 const testImage1x1 = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQImWP4DwQACfsD/eNV8pwAAAAASUVORK5CYII=';
@@ -22,13 +21,13 @@ describe('Persona', () => {
 
   it('renders Persona correctly with initials', () => {
     const component = renderer.create(<Persona primaryText='Kat Larrson' />);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders Persona correctly with image', () => {
     const component = renderer.create(<Persona primaryText='Kat Larrson' imageUrl={ testImage1x1 } />);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
@@ -46,10 +45,10 @@ describe('Persona', () => {
       expect(result.text()).toEqual('DZ');
       wrapper.unmount();
 
-      wrapper = mount(<Persona primaryText='4lex 4loo' />);
+      wrapper = mount(<Persona primaryText='4lex 5loo' />);
       result = wrapper.find(STYLES.initials);
       expect(result).toHaveLength(1);
-      expect(result.text()).toEqual('44');
+      expect(result.text()).toEqual('45');
       wrapper.unmount();
 
       wrapper = mount(<Persona primaryText='David (The man) Goff' />);
@@ -61,7 +60,7 @@ describe('Persona', () => {
     it('calculates an expected initials in RTL if one was not specified', () => {
       setRTL(true);
       const wrapper = mount(<Persona primaryText='Kat Larrson' />);
-      let result = wrapper.find(STYLES.initials);
+      const result = wrapper.find(STYLES.initials);
       expect(result).toHaveLength(1);
       expect(result.text()).toEqual('LK');
 
@@ -71,7 +70,7 @@ describe('Persona', () => {
     it('uses provided initial', () => {
       setRTL(true);
       const wrapper = mount(<Persona primaryText='Kat Larrson' imageInitials='AT' />);
-      let result = wrapper.find(STYLES.initials);
+      const result = wrapper.find(STYLES.initials);
       expect(result).toHaveLength(1);
       expect(result.text()).toEqual('AT');
 
@@ -82,14 +81,14 @@ describe('Persona', () => {
   describe('image', () => {
     it('renders empty alt text by default', () => {
       const wrapper = mount(<Persona primaryText='Kat Larrson' imageUrl={ testImage1x1 } />);
-      const image: ReactWrapper<React.ImgHTMLAttributes<any>, any> = wrapper.find('Image');
+      const image: ReactWrapper<React.ImgHTMLAttributes<any>, any> = wrapper.find('ImageBase');
 
       expect(image.props().alt).toEqual('');
     });
 
     it('renders its given alt text', () => {
       const wrapper = mount(<Persona primaryText='Kat Larrson' imageUrl={ testImage1x1 } imageAlt='ALT TEXT' />);
-      const image: ReactWrapper<React.ImgHTMLAttributes<any>, any> = wrapper.find('Image');
+      const image: ReactWrapper<React.ImgHTMLAttributes<any>, any> = wrapper.find('ImageBase');
 
       expect(image.props().alt).toEqual('ALT TEXT');
     });
diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.tsx b/packages/office-ui-fabric-react/src/components/Persona/Persona.tsx
index e9e34a8f28424..89d1f91649fc8 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/Persona.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.tsx
@@ -1,140 +1,13 @@
-import * as React from 'react';
-import {
-  BaseComponent,
-  autobind,
-  css,
-  divProperties,
-  getNativeProps,
-  IRenderFunction
-} from '../../Utilities';
-import { TooltipHost, TooltipOverflowMode, DirectionalHint } from '../../Tooltip';
-import { PersonaCoin } from './PersonaCoin';
+import { styled } from '../../Utilities';
 import {
   IPersonaProps,
-  PersonaPresence as PersonaPresenceEnum,
-  PersonaSize
+  IPersonaStyleProps,
+  IPersonaStyles
 } from './Persona.types';
-import {
-  PERSONA_PRESENCE,
-  PERSONA_SIZE
-} from './PersonaConsts';
-import * as stylesImport from './Persona.scss';
-const styles: any = stylesImport;
-
-export class Persona extends BaseComponent<IPersonaProps, {}> {
-  public static defaultProps: IPersonaProps = {
-    primaryText: '',
-    size: PersonaSize.size48,
-    presence: PersonaPresenceEnum.none,
-    imageAlt: ''
-  };
-
-  constructor(props: IPersonaProps) {
-    super(props);
-  }
-
-  public render() {
-    let {
-      hidePersonaDetails,
-      onRenderPrimaryText,
-      onRenderSecondaryText,
-      onRenderTertiaryText,
-      onRenderOptionalText,
-    } = this.props;
-    let size = this.props.size as PersonaSize;
-
-    // These properties are to be explicitly passed into PersonaCoin because they are the only props directly used
-    let {
-      className,
-      coinProps,
-      coinSize,
-      imageUrl,
-      imageAlt,
-      imageInitials,
-      initialsColor,
-      presence,
-      primaryText,
-      imageShouldFadeIn,
-      imageShouldStartVisible,
-      showSecondaryText,
-      onPhotoLoadingStateChange,
-      onRenderCoin
-     } = this.props;
-
-    let personaCoinProps = {
-      coinProps,
-      coinSize,
-      imageUrl,
-      imageAlt,
-      imageInitials,
-      initialsColor,
-      presence,
-      primaryText,
-      imageShouldFadeIn,
-      imageShouldStartVisible,
-      size,
-      onPhotoLoadingStateChange,
-      onRenderCoin
-    };
-
-    let divProps = getNativeProps(this.props, divProperties);
-    let personaDetails = (
-      <div className={ css('ms-Persona-details', styles.details) }>
-        { this._renderElement(
-          this.props.primaryText,
-          css('ms-Persona-primaryText', styles.primaryText),
-          onRenderPrimaryText) }
-        { this._renderElement(
-          this.props.secondaryText,
-          css('ms-Persona-secondaryText', styles.secondaryText),
-          onRenderSecondaryText) }
-        { this._renderElement(
-          this.props.tertiaryText,
-          css('ms-Persona-tertiaryText', styles.tertiaryText),
-          onRenderTertiaryText) }
-        { this._renderElement(
-          this.props.optionalText,
-          css('ms-Persona-optionalText', styles.optionalText),
-          onRenderOptionalText) }
-        { this.props.children }
-      </div>
-    );
-
-    return (
-      <div
-        { ...divProps }
-        className={
-          css('ms-Persona',
-            styles.root,
-            className,
-            PERSONA_SIZE[size],
-            PERSONA_PRESENCE[presence as PersonaPresenceEnum],
-            showSecondaryText && styles.showSecondaryText
-          )
-        }
-        style={ coinSize ? { height: coinSize, minWidth: coinSize } : undefined }
-      >
-        <PersonaCoin { ...personaCoinProps } />
-        { (!hidePersonaDetails || (size === PersonaSize.size10 || size === PersonaSize.tiny)) && personaDetails }
-      </div>
-    );
-  }
+import { PersonaBase } from './Persona.base';
+import { getStyles } from './Persona.styles';
 
-  @autobind
-  private _renderElement(text: string | undefined, className: string, render?: IRenderFunction<IPersonaProps>): JSX.Element {
-    return (
-      <div className={ className }>
-        { render
-          ? render(this.props)
-          : text && (<TooltipHost
-            content={ text }
-            overflowMode={ TooltipOverflowMode.Parent }
-            directionalHint={ DirectionalHint.topLeftEdge }
-          >
-            { text }
-          </TooltipHost>)
-        }
-      </div>
-    );
-  }
-}
+export const Persona = styled<IPersonaProps, IPersonaStyleProps, IPersonaStyles>(
+  PersonaBase,
+  getStyles
+);
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts
index 78c8507daa729..eb0ee0d442acb 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts
+++ b/packages/office-ui-fabric-react/src/components/Persona/Persona.types.ts
@@ -1,13 +1,15 @@
 import * as React from 'react';
 import { IRenderFunction } from '../../Utilities';
-import { Persona } from './Persona';
+import { PersonaBase } from './Persona.base';
 import { ImageLoadState } from '../../Image';
+import { IStyle, ITheme } from '../../Styling';
+import { IStyleFunction } from '../../Utilities';
 
 export interface IPersona {
 
 }
 
-export interface IPersonaProps extends React.HTMLAttributes<Persona> {
+export interface IPersonaProps extends React.HTMLAttributes<PersonaBase> {
   /**
    * Optional callback to access the IPersona interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
@@ -139,6 +141,16 @@ export interface IPersonaProps extends React.HTMLAttributes<Persona> {
    * Optional HTML element props for Persona coin.
    */
   coinProps?: React.HTMLAttributes<HTMLDivElement>;
+
+  /**
+   * Call to provide customized styling that will layer on top of variant rules
+   */
+  getStyles?: IStyleFunction<IPersonaStyleProps, IPersonaStyles>;
+
+  /**
+   * Theme provided by HOC.
+   */
+  theme?: ITheme;
 }
 
 export enum PersonaSize {
@@ -224,3 +236,19 @@ export enum PersonaInitialsColor {
    */
   transparent = 15,
 }
+
+export interface IPersonaStyleProps {
+  /**
+   * Theme.
+   */
+  theme: ITheme;
+
+  /**
+   * Custom class name.
+   */
+  className?: string;
+}
+
+export interface IPersonaStyles {
+  root: IStyle;
+}
diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.scss b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.scss
new file mode 100644
index 0000000000000..132c5af27cec1
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.scss
@@ -0,0 +1,207 @@
+@import '../../common/common';
+
+// Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
+
+//
+// Office UI Fabric
+// --------------------------------------------------
+// Persona Coin styles
+
+// Persona Sizes
+$ms-Persona-size10:  20px;
+$ms-Persona-size16:  16px;
+$ms-Persona-size24:  24px;
+$ms-Persona-size28:  28px;
+$ms-Persona-size32:  32px;
+$ms-Persona-size40:  40px;
+$ms-Persona-size48:  48px;
+$ms-Persona-size72:  72px;
+$ms-Persona-size100: 100px;
+
+.imageArea {
+  position: relative;
+  text-align: center;
+  flex: 0 0 auto;
+  height: $ms-Persona-size48;
+  width: $ms-Persona-size48;
+
+  .image {
+    border: 0px;
+  }
+}
+
+.initials {
+  border-radius: 50%;
+  color: $ms-color-white;
+  font-size: $ms-font-size-l;
+  font-weight: $ms-font-weight-regular;
+  line-height: 46px;
+  height: $ms-Persona-size48;
+
+  @include high-contrast {
+    border: 1px solid WindowText;
+    -ms-high-contrast-adjust: none;
+    color: WindowText;
+    box-sizing: border-box;
+    // Using important to override all of the more specific initialsIsColor rules
+    background-color: Window !important;
+  }
+}
+
+.image {
+  @include ms-margin-right(10px);
+  position: absolute;
+  top: 0;
+  @include ms-left(0);
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  perspective: 1px;
+}
+
+.image[src=""] {
+  display: none;
+}
+
+//== Modifier: Size 10 Persona
+
+.rootIsSize10 {
+  .imageArea {
+    overflow: visible;
+    background: transparent;
+    height: 0;
+    width: 0;
+  }
+
+}
+
+.size10NoPresenceIcon {
+  font-size: 10px;
+  position: absolute;
+  top: 5px;
+  @include ms-right(auto);
+  @include ms-left(0);
+}
+
+//== Modifier: Size 16 Persona
+
+.rootIsSize16 {
+  .imageArea,
+  .image {
+    height: $ms-Persona-size16;
+    width: $ms-Persona-size16;
+  }
+
+  .initials {
+    font-size: $ms-font-size-xs;
+    height: $ms-Persona-size16;
+    line-height: $ms-Persona-size16;
+  }
+
+}
+
+//== Modifier: Size 24 Persona
+
+.rootIsSize24 {
+  .imageArea,
+  .image {
+    height: $ms-Persona-size24;
+    width: $ms-Persona-size24;
+  }
+
+  .initials {
+    font-size: $ms-font-size-xs;
+    height: $ms-Persona-size24;
+    line-height: $ms-Persona-size24;
+  }
+
+}
+
+//== Modifier: Size 28 Persona
+
+.rootIsSize28 {
+  .imageArea,
+  .image {
+    height: $ms-Persona-size28;
+    width: $ms-Persona-size28;
+  }
+
+  .initials {
+    font-size: $ms-font-size-xs;
+    height: $ms-Persona-size28;
+    line-height: $ms-Persona-size28;
+  }
+
+}
+
+
+//== Modifier: Size 32 Persona
+
+.rootIsSize32 {
+  .imageArea,
+  .image {
+    height: $ms-Persona-size32;
+    width: $ms-Persona-size32;
+  }
+
+  .initials {
+    font-size: $ms-font-size-m;
+    height: $ms-Persona-size32;
+    line-height: $ms-Persona-size32;
+  }
+
+}
+
+
+//== Modifier: Size 40 Persona
+
+.rootIsSize40 {
+  .imageArea,
+  .image {
+    height: $ms-Persona-size40;
+    width: $ms-Persona-size40;
+  }
+
+  .initials {
+    font-size: $ms-font-size-m;
+    height: $ms-Persona-size40;
+    line-height: $ms-Persona-size40;
+  }
+
+}
+
+
+//== Modifier: Size 72 Persona
+
+.rootIsSize72 {
+  .imageArea,
+  .image {
+    height: $ms-Persona-size72;
+    width: $ms-Persona-size72;
+  }
+
+  .initials {
+    font-size: $ms-font-size-xxl;
+    height: $ms-Persona-size72;
+    line-height: 70px;
+  }
+
+}
+
+
+//== Modifier: Size 100 Persona
+
+.rootIsSize100 {
+  .imageArea,
+  .image {
+    height: $ms-Persona-size100;
+    width: $ms-Persona-size100;
+  }
+
+  .initials {
+    font-size: $ms-font-size-su;
+    height: $ms-Persona-size100;
+    line-height: 96px;
+  }
+
+}
diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx
index cce51e3fb0ba9..d53682bb98268 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaCoin.tsx
@@ -12,16 +12,12 @@ import { PersonaPresence } from './PersonaPresence';
 import {
   IPersonaProps,
   PersonaPresence as PersonaPresenceEnum,
-  PersonaInitialsColor,
   PersonaSize
 } from './Persona.types';
-import {
-  PERSONA_SIZE
-} from './PersonaConsts';
 import {
   Icon
 } from '../../Icon';
-import * as stylesImport from './Persona.scss';
+import * as stylesImport from './PersonaCoin.scss';
 const styles: any = stylesImport;
 
 const SIZE_TO_PIXELS: { [key: number]: number } = {
@@ -45,6 +41,27 @@ const SIZE_TO_PIXELS: { [key: number]: number } = {
 import { mergeStyles } from '../../Styling';
 import { initialsColorPropToColorCode } from './PersonaInitialsColor';
 
+export const PERSONACOIN_SIZE: { [key: number]: string } = {
+  // All non-numerically named sizes are deprecated, use the numerically named classes below
+  [PersonaSize.tiny]: 'ms-Persona--tiny ' + styles.rootIsSize10,
+  [PersonaSize.extraExtraSmall]: 'ms-Persona--xxs ' + styles.rootIsSize24,
+  [PersonaSize.extraSmall]: 'ms-Persona--xs ' + styles.rootIsSize28,
+  [PersonaSize.small]: 'ms-Persona--sm ' + styles.rootIsSize40,
+  [PersonaSize.regular]: '',
+  [PersonaSize.large]: 'ms-Persona--lg ' + styles.rootIsSize72,
+  [PersonaSize.extraLarge]: 'ms-Persona--xl ' + styles.rootIsSize100,
+
+  [PersonaSize.size10]: 'ms-Persona--size10 ' + styles.rootIsSize10,
+  [PersonaSize.size16]: 'ms-Persona--size16 ' + styles.rootIsSize16,
+  [PersonaSize.size24]: 'ms-Persona--size24 ' + styles.rootIsSize24,
+  [PersonaSize.size28]: 'ms-Persona--size28 ' + styles.rootIsSize28,
+  [PersonaSize.size32]: 'ms-Persona--size32 ' + styles.rootIsSize32,
+  [PersonaSize.size40]: 'ms-Persona--size40 ' + styles.rootIsSize40,
+  [PersonaSize.size48]: 'ms-Persona--size48 ' + styles.rootIsSize48,
+  [PersonaSize.size72]: 'ms-Persona--size72 ' + styles.rootIsSize72,
+  [PersonaSize.size100]: 'ms-Persona--size100 ' + styles.rootIsSize100
+};
+
 export interface IPersonaState {
   isImageLoaded?: boolean;
   isImageError?: boolean;
@@ -68,27 +85,22 @@ export class PersonaCoin extends React.Component<IPersonaProps, IPersonaState> {
   }
 
   public render(): JSX.Element | null {
-    let {
+    const {
       coinProps,
       coinSize,
       imageUrl,
-      imageAlt,
-      initialsColor,
-      primaryText,
-      imageShouldFadeIn,
       onRenderCoin = this._onRenderCoin,
       onRenderInitials = this._onRenderInitials,
-      imageShouldStartVisible
-     } = this.props;
+    } = this.props;
 
-    let size = this.props.size as PersonaSize;
-    let divProps = getNativeProps(this.props, divProperties);
-    let coinSizeStyle = coinSize ? { width: coinSize, height: coinSize } : undefined;
+    const size = this.props.size as PersonaSize;
+    const divProps = getNativeProps(this.props, divProperties);
+    const coinSizeStyle = coinSize ? { width: coinSize, height: coinSize } : undefined;
 
     return (
       <div
         { ...divProps }
-        className={ css('ms-Persona-coin', PERSONA_SIZE[size], coinProps && coinProps.className) }
+        className={ css('ms-Persona-coin', PERSONACOIN_SIZE[size], coinProps && coinProps.className) }
       >
         { (size !== PersonaSize.size10 && size !== PersonaSize.tiny) ? (
           <div
@@ -136,7 +148,7 @@ export class PersonaCoin extends React.Component<IPersonaProps, IPersonaState> {
 
   @autobind
   private _onRenderCoin(props: IPersonaProps): JSX.Element | null {
-    let {
+    const {
       coinSize,
       imageUrl,
       imageAlt,
@@ -144,9 +156,9 @@ export class PersonaCoin extends React.Component<IPersonaProps, IPersonaState> {
       imageShouldStartVisible
     } = this.props;
 
-    let size = this.props.size as PersonaSize;
+    const size = this.props.size as PersonaSize;
 
-    return(
+    return (
       <Image
         className={ css('ms-Persona-image', styles.image) }
         imageFit={ ImageFit.cover }
@@ -163,12 +175,10 @@ export class PersonaCoin extends React.Component<IPersonaProps, IPersonaState> {
 
   @autobind
   private _onRenderInitials(props: IPersonaProps): JSX.Element {
-    let {
-      imageInitials,
-      primaryText
-    } = props;
+    let { imageInitials } = props;
+    const { primaryText } = props;
 
-    let isRTL = getRTL();
+    const isRTL = getRTL();
 
     imageInitials = imageInitials || getInitials(primaryText, isRTL);
 
diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.ts
index d7aa2355f4ed6..e2df04104471b 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.ts
+++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaConsts.ts
@@ -1,5 +1,4 @@
 import {
-  PersonaInitialsColor,
   PersonaPresence,
   PersonaSize
 } from './Persona.types';
diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaInitialsColor.ts b/packages/office-ui-fabric-react/src/components/Persona/PersonaInitialsColor.ts
index 0bbc1ed99de78..b934ecbd4b5da 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/PersonaInitialsColor.ts
+++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaInitialsColor.ts
@@ -82,7 +82,8 @@ function personaInitialsColorToHexCode(personaInitialsColor: PersonaInitialsColo
 }
 
 export function initialsColorPropToColorCode(props: IPersonaProps): string {
-  let { initialsColor, primaryText } = props;
+  const { primaryText } = props;
+  let { initialsColor } = props;
   let initialsColorCode: string;
   if (typeof initialsColor === 'string') {
     initialsColorCode = initialsColor;
diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPage.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaPage.tsx
index bcadebf3bbf87..b318f55c8012a 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPage.tsx
@@ -44,6 +44,7 @@ export class PersonaPage extends React.Component<IComponentDemoPageProps, {}> {
             </ExampleCard>
           </div>
         }
+        allowNativeProps={ true }
         propertiesTables={
           <PropertiesTableSet
             sources={ [
@@ -81,7 +82,7 @@ export class PersonaPage extends React.Component<IComponentDemoPageProps, {}> {
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...PersonaStatus}
+            { ...PersonaStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx
index 354ddf29ebef8..4e37187e95313 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence.tsx
@@ -47,7 +47,7 @@ export class PersonaPresence extends React.Component<IPersonaProps, {}> {
 
   @autobind
   private _determineIcon(): string | undefined {
-    let { presence } = this.props;
+    const { presence } = this.props;
 
     if (presence !== PersonaPresenceEnum.none) {
       let userPresence = PersonaPresenceEnum[presence as PersonaPresenceEnum];
diff --git a/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap
index 13ec48d656f4c..0353479d3e09e 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Persona/__snapshots__/Persona.test.tsx.snap
@@ -15,7 +15,12 @@ exports[`Persona renders Persona correctly with image 1`] = `
       style={undefined}
     >
       <div
-        className="ms-Image ms-Persona-image"
+        className=
+            ms-Image
+            ms-Persona-image
+            {
+              overflow: hidden;
+            }
         style={
           Object {
             "height": 48,
@@ -25,7 +30,22 @@ exports[`Persona renders Persona correctly with image 1`] = `
       >
         <img
           alt=""
-          className="ms-Image-image ms-Image-image--portrait undefined ms-Image-image--cover undefined is-notLoaded is-fadeIn"
+          className=
+              ms-Image-image
+              ms-Image-image--cover
+              ms-Image-image--portrait
+              is-notLoaded
+              is-fadeIn
+              {
+                display: block;
+                height: auto;
+                left: 50%;
+                opacity: 0;
+                position: relative;
+                top: 50%;
+                transform: translate(-50%,-50%);
+                width: 100%;
+              }
           onError={[Function]}
           onLoad={[Function]}
           role={undefined}
@@ -92,7 +112,12 @@ exports[`Persona renders Persona correctly with initials 1`] = `
         </span>
       </div>
       <div
-        className="ms-Image ms-Persona-image"
+        className=
+            ms-Image
+            ms-Persona-image
+            {
+              overflow: hidden;
+            }
         style={
           Object {
             "height": 48,
@@ -102,7 +127,22 @@ exports[`Persona renders Persona correctly with initials 1`] = `
       >
         <img
           alt=""
-          className="ms-Image-image ms-Image-image--portrait undefined ms-Image-image--cover undefined is-notLoaded is-fadeIn"
+          className=
+              ms-Image-image
+              ms-Image-image--cover
+              ms-Image-image--portrait
+              is-notLoaded
+              is-fadeIn
+              {
+                display: block;
+                height: auto;
+                left: 50%;
+                opacity: 0;
+                position: relative;
+                top: 50%;
+                transform: translate(-50%,-50%);
+                width: 100%;
+              }
           onError={[Function]}
           onLoad={[Function]}
           role={undefined}
diff --git a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Alternate.Example.tsx b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Alternate.Example.tsx
index 19c278e5734ce..ad08d5d1851fc 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Alternate.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Alternate.Example.tsx
@@ -28,7 +28,7 @@ export class PersonaAlternateExample extends React.Component<{}, {
   }
 
   public render() {
-    let { renderPersonaDetails } = this.state;
+    const { renderPersonaDetails } = this.state;
 
     return (
       <div className='ms-PersonaExample'>
diff --git a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Basic.Example.tsx
index 32aa9479c263d..6fa37608e63e8 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Basic.Example.tsx
@@ -32,7 +32,7 @@ export class PersonaBasicExample extends React.Component<{}, {
   }
 
   public render() {
-    let { renderPersonaDetails } = this.state;
+    const { renderPersonaDetails } = this.state;
 
     return (
       <div>
diff --git a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomCoinRender.Example.tsx b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomCoinRender.Example.tsx
index ce7618c9e61e1..ce4f245383207 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomCoinRender.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.CustomCoinRender.Example.tsx
@@ -6,7 +6,6 @@ import {
   PersonaSize,
   PersonaPresence
 } from 'office-ui-fabric-react/lib/Persona';
-import { Icon } from 'office-ui-fabric-react/lib/Icon';
 import { TestImages } from '../../../common/TestImages';
 import './PersonaExample.scss';
 import * as exampleStylesImport from '../../../common/_exampleStyles.scss';
@@ -40,7 +39,7 @@ export class PersonaCustomCoinRenderExample extends React.Component {
 
   @autobind
   private _onRenderCoin(props: IPersonaProps): JSX.Element {
-    let {
+    const {
       coinSize,
       imageUrl,
       imageAlt,
diff --git a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Initials.Example.tsx b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Initials.Example.tsx
index cba8dc222a5ea..549d016b6869b 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Initials.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Persona/examples/Persona.Initials.Example.tsx
@@ -29,6 +29,10 @@ export class PersonaInitialsExample extends React.Component<any, any> {
           { ...examplePersona  }
           primaryText='Annie Lindqvist'
         />
+        <Persona
+          { ...examplePersona  }
+          primaryText='+1 (555) 123-4567 X4567'
+        />
         <Persona
           { ...examplePersona  }
           primaryText='宋智洋'
diff --git a/packages/office-ui-fabric-react/src/components/Persona/index.ts b/packages/office-ui-fabric-react/src/components/Persona/index.ts
index 02000b4bd6c32..26d2f1fddaa4e 100644
--- a/packages/office-ui-fabric-react/src/components/Persona/index.ts
+++ b/packages/office-ui-fabric-react/src/components/Persona/index.ts
@@ -1,4 +1,5 @@
 export * from './Persona';
+export * from './Persona.base';
 export * from './Persona.types';
 export * from './PersonaConsts';
 export * from './PersonaCoin';
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.test.tsx b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.test.tsx
index 2f0951b9c4198..d205a76ad6fab 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.test.tsx
@@ -11,7 +11,7 @@ describe('Pivot', () => {
         <PivotItem linkText='' />
         <PivotItem linkText='' />
       </Pivot>);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 });
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx
index 042b75a0625c2..728d2cca54ec5 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx
+++ b/packages/office-ui-fabric-react/src/components/Pivot/Pivot.tsx
@@ -149,6 +149,7 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
         ariaLabel={ link.ariaLabel }
         role='tab'
         aria-selected={ this.state.selectedKey === itemKey }
+        name={ link.linkText }
       >
         { linkContent }
       </CommandButton>
@@ -182,7 +183,7 @@ export class Pivot extends BaseComponent<IPivotProps, IPivotState> {
 
     const itemKey: string = this.state.selectedKey;
     const index = this._keyToIndexMapping[itemKey];
-    let { selectedTabId } = this.state;
+    const { selectedTabId } = this.state;
 
     return (
       <div
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx b/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx
index cd09643857ae1..37c8c6a06ad37 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Pivot/PivotPage.tsx
@@ -69,10 +69,12 @@ export class PivotPage extends React.Component<IComponentDemoPageProps, {}> {
             </ExampleCard>
           </div>
         }
+        allowNativeProps={ 'PivotItem' }
         propertiesTables={
           <PropertiesTableSet
             sources={ [
-              require<string>('!raw-loader!office-ui-fabric-react/src/components/Pivot/Pivot.types.ts')
+              require<string>('!raw-loader!office-ui-fabric-react/src/components/Pivot/Pivot.types.ts'),
+              require<string>('!raw-loader!office-ui-fabric-react/src/components/Pivot/PivotItem.types.ts')
             ] }
           />
         }
@@ -118,7 +120,7 @@ export class PivotPage extends React.Component<IComponentDemoPageProps, {}> {
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...PivotStatus}
+            { ...PivotStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap
index 8058f2c9d08bd..264a0b9749676 100644
--- a/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap
@@ -24,11 +24,11 @@ exports[`Pivot renders Pivot correctly 1`] = `
         aria-selected={true}
         className=
             ms-Button
-            ms-Button--action
-            ms-Button--command
             ms-Pivot-link
             is-selected
             undefined
+            ms-Button--action
+            ms-Button--command
             {
               -moz-osx-font-smoothing: grayscale;
               -webkit-font-smoothing: antialiased;
@@ -39,7 +39,7 @@ exports[`Pivot renders Pivot correctly 1`] = `
               color: #333333;
               cursor: pointer;
               display: inline-block;
-              font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
               font-size: 14px;
               font-weight: 400;
               height: 40px;
@@ -83,6 +83,7 @@ exports[`Pivot renders Pivot correctly 1`] = `
         data-is-focusable={true}
         disabled={undefined}
         id="Pivot0-Tab0"
+        name=""
         onClick={[Function]}
         onKeyPress={[Function]}
         role="tab"
@@ -119,9 +120,9 @@ exports[`Pivot renders Pivot correctly 1`] = `
         aria-selected={false}
         className=
             ms-Button
+            ms-Pivot-link
             ms-Button--action
             ms-Button--command
-            ms-Pivot-link
             {
               -moz-osx-font-smoothing: grayscale;
               -webkit-font-smoothing: antialiased;
@@ -132,7 +133,7 @@ exports[`Pivot renders Pivot correctly 1`] = `
               color: #333333;
               cursor: pointer;
               display: inline-block;
-              font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
               font-size: 14px;
               font-weight: 400;
               height: 40px;
@@ -176,6 +177,7 @@ exports[`Pivot renders Pivot correctly 1`] = `
         data-is-focusable={true}
         disabled={undefined}
         id="Pivot0-Tab1"
+        name=""
         onClick={[Function]}
         onKeyPress={[Function]}
         role="tab"
diff --git a/packages/office-ui-fabric-react/src/components/Popup/Popup.tsx b/packages/office-ui-fabric-react/src/components/Popup/Popup.tsx
index 23cd996751eda..fbce41b190d11 100644
--- a/packages/office-ui-fabric-react/src/components/Popup/Popup.tsx
+++ b/packages/office-ui-fabric-react/src/components/Popup/Popup.tsx
@@ -19,10 +19,7 @@ export class Popup extends BaseComponent<IPopupProps, {}> {
     shouldRestoreFocus: true
   };
 
-  public refs: {
-    [key: string]: React.ReactInstance;
-    root: HTMLElement;
-  };
+  public _root: HTMLDivElement;
 
   private _originalFocusedElement: HTMLElement;
   private _containsFocus: boolean;
@@ -32,9 +29,9 @@ export class Popup extends BaseComponent<IPopupProps, {}> {
   }
 
   public componentDidMount(): void {
-    this._events.on(this.refs.root, 'focus', this._onFocus, true);
-    this._events.on(this.refs.root, 'blur', this._onBlur, true);
-    if (doesElementContainFocus(this.refs.root)) {
+    this._events.on(this._root, 'focus', this._onFocus, true);
+    this._events.on(this._root, 'blur', this._onBlur, true);
+    if (doesElementContainFocus(this._root)) {
       this._containsFocus = true;
     }
   }
@@ -55,16 +52,16 @@ export class Popup extends BaseComponent<IPopupProps, {}> {
   }
 
   public render() {
-    let { role, className, ariaLabel, ariaLabelledBy, ariaDescribedBy, style } = this.props;
+    const { role, className, ariaLabel, ariaLabelledBy, ariaDescribedBy, style } = this.props;
 
     let needsVerticalScrollBar = false;
-    if (this.refs.root && this.refs.root.firstElementChild) {
-      needsVerticalScrollBar = this.refs.root.firstElementChild.clientHeight > this.refs.root.clientHeight;
+    if (this._root && this._root.firstElementChild) {
+      needsVerticalScrollBar = this._root.firstElementChild.clientHeight > this._root.clientHeight;
     }
 
     return (
       <div
-        ref='root'
+        ref={ this._resolveRef('_root') }
         { ...getNativeProps(this.props, divProperties) }
         className={ className }
         role={ role }
diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.scss b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.scss
index c0a002d3bb8e7..c44a4f88888d6 100644
--- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.scss
+++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.scss
@@ -1,17 +1,12 @@
 @import '../../common/common';
-
 // Copyright (c) Microsoft. All rights reserved. Licensed under the MIT license. See LICENSE in the project root for license information.
-
 //
 // Office UI Fabric
 // --------------------------------------------------
 // ProgressIndicator Styles
-
-
 $ProgressIndicatorMarginBetweenText: 8px;
 $ProgressIndicatorButtonsWidth: 218px;
 $ProgressIndicatorTextHeight: 18px;
-
 .root {
   font-weight: $ms-font-weight-regular;
 }
@@ -34,6 +29,7 @@ $ProgressIndicatorTextHeight: 18px;
 
 .itemProgress {
   position: relative;
+  overflow: hidden;
   height: 2px;
   padding: $ProgressIndicatorMarginBetweenText 0;
 }
@@ -54,18 +50,15 @@ $ProgressIndicatorTextHeight: 18px;
   position: absolute;
   transition: width .3s ease;
   width: 0;
-
   &.indeterminate {
     position: absolute;
     min-width: 33%;
     background: linear-gradient(to right, transparent 0%, $ms-color-themePrimary 50%, transparent 100%);
     animation: indeterminateProgress 3s infinite;
   }
-
   @include high-contrast {
     background-color: WindowText;
   }
-
   @include RTL {
     &.indeterminate {
       animation: indeterminateProgressRTL 3s infinite;
diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx
index f4085b75881c2..1d141ee60b873 100644
--- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx
+++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/ProgressIndicator.tsx
@@ -31,7 +31,8 @@ export class ProgressIndicator extends BaseComponent<IProgressIndicatorProps, {}
   }
 
   public render() {
-    let { title, label, description, percentComplete, className, ariaValueText } = this.props;
+    const { title, description, className, ariaValueText } = this.props;
+    let { label, percentComplete } = this.props;
 
     // Handle deprecated value.
     if (title) {
diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/examples/ProgressIndicator.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/ProgressIndicator/examples/ProgressIndicator.Basic.Example.tsx
index a8a5c9fc121b1..d5c7a03d2487e 100644
--- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/examples/ProgressIndicator.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/examples/ProgressIndicator.Basic.Example.tsx
@@ -8,9 +8,9 @@ export interface IProgressIndicatorBasicExampleState {
   percentComplete: number;
 }
 
-const INTERVAL_DELAY: number = 100;
-const INTERVAL_INCREMENT: number = .01;
-const RESTART_WAIT_TIME: number = 2000;
+const INTERVAL_DELAY = 100;
+const INTERVAL_INCREMENT = .01;
+const RESTART_WAIT_TIME = 2000;
 
 export class ProgressIndicatorBasicExample extends React.Component<{}, IProgressIndicatorBasicExampleState> {
 
@@ -37,7 +37,7 @@ export class ProgressIndicatorBasicExample extends React.Component<{}, IProgress
   }
 
   public render() {
-    let { percentComplete } = this.state;
+    const { percentComplete } = this.state;
 
     return (
       <ProgressIndicator
diff --git a/packages/office-ui-fabric-react/src/components/ProgressIndicator/examples/ProgressIndicator.Indeterminate.Example.tsx b/packages/office-ui-fabric-react/src/components/ProgressIndicator/examples/ProgressIndicator.Indeterminate.Example.tsx
index 84408eaf4605c..77538f2d15eaf 100644
--- a/packages/office-ui-fabric-react/src/components/ProgressIndicator/examples/ProgressIndicator.Indeterminate.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ProgressIndicator/examples/ProgressIndicator.Indeterminate.Example.tsx
@@ -1,8 +1,5 @@
 import * as React from 'react';
-import {
-  ProgressIndicator
-} from 'office-ui-fabric-react/lib/ProgressIndicator';
-import { Async } from 'office-ui-fabric-react/lib/Utilities';
+import { ProgressIndicator } from 'office-ui-fabric-react/lib/ProgressIndicator';
 
 export class ProgressIndicatorIndeterminateExample extends React.Component<{}, {}> {
   constructor(props: {}) {
diff --git a/packages/office-ui-fabric-react/src/components/Rating/RatingBase.tsx b/packages/office-ui-fabric-react/src/components/Rating/Rating.base.tsx
similarity index 95%
rename from packages/office-ui-fabric-react/src/components/Rating/RatingBase.tsx
rename to packages/office-ui-fabric-react/src/components/Rating/Rating.base.tsx
index ae02307082db4..8344da7140f43 100644
--- a/packages/office-ui-fabric-react/src/components/Rating/RatingBase.tsx
+++ b/packages/office-ui-fabric-react/src/components/Rating/Rating.base.tsx
@@ -76,10 +76,10 @@ export class RatingBase extends BaseComponent<IRatingProps, IRatingState> {
   }
 
   public render() {
-    let id = this._id;
-    let stars = [];
-    let starIds = [];
-    let {
+    const id = this._id;
+    const stars = [];
+    const starIds = [];
+    const {
       disabled,
       getAriaLabel,
       getStyles,
@@ -97,7 +97,7 @@ export class RatingBase extends BaseComponent<IRatingProps, IRatingState> {
     });
 
     for (let i = min as number; i <= (max as number); i++) {
-      let ratingStarProps: IRatingStarProps = {
+      const ratingStarProps: IRatingStarProps = {
         fillPercentage: this._getFillingPercentage(i),
         disabled: disabled ? true : false,
         classNames: this._classNames
@@ -117,6 +117,7 @@ export class RatingBase extends BaseComponent<IRatingProps, IRatingState> {
           onFocus={ this._onFocus.bind(this, i) }
           disabled={ disabled || readOnly ? true : false }
           role='presentation'
+          type='button'
         >
           { this._getLabel(i) }
           <RatingStar key={ i + 'rating' }  {...ratingStarProps} />
@@ -188,7 +189,7 @@ export class RatingBase extends BaseComponent<IRatingProps, IRatingState> {
   }
 
   private _getFillingPercentage(starPosition: number): number {
-    let ceilValue = Math.ceil((this.state.rating as number));
+    const ceilValue = Math.ceil((this.state.rating as number));
     let fillPercentage = 100;
 
     if (starPosition === this.state.rating) {
diff --git a/packages/office-ui-fabric-react/src/components/Rating/Rating.styles.ts b/packages/office-ui-fabric-react/src/components/Rating/Rating.styles.ts
index d4b106e3bd988..d9e0861c57ab0 100644
--- a/packages/office-ui-fabric-react/src/components/Rating/Rating.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/Rating/Rating.styles.ts
@@ -3,7 +3,7 @@ import {
   hiddenContentStyle,
   HighContrastSelector,
 } from '../../Styling';
-import { RatingSize, IRatingStyleProps, IRatingStyles } from './Rating.types';
+import { IRatingStyleProps, IRatingStyles } from './Rating.types';
 
 export function getStyles(props: IRatingStyleProps): IRatingStyles {
   const {
diff --git a/packages/office-ui-fabric-react/src/components/Rating/Rating.test.tsx b/packages/office-ui-fabric-react/src/components/Rating/Rating.test.tsx
index 045a730bb1f0a..e4256622a2983 100644
--- a/packages/office-ui-fabric-react/src/components/Rating/Rating.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Rating/Rating.test.tsx
@@ -7,18 +7,17 @@ import * as ReactTestUtils from 'react-dom/test-utils';
 import * as renderer from 'react-test-renderer';
 
 import { Rating } from './Rating';
-import { RatingBase } from './RatingBase';
+import { RatingBase } from './Rating.base';
 import { getStyles } from './Rating.styles';
 
 describe('Rating', () => {
   it('Renders Rating correctly', () => {
     const component = renderer.create(<Rating />);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('Can change rating.', () => {
-    let exception;
     let threwException = false;
     let rating;
     try {
@@ -29,18 +28,17 @@ describe('Rating', () => {
         />
       );
     } catch (e) {
-      exception = e;
       threwException = true;
     }
     expect(threwException).toEqual(false);
-    let renderedDOM = ReactDOM.findDOMNode(rating as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(rating as React.ReactInstance);
 
-    let ratingButtons = renderedDOM.querySelectorAll('.ms-Rating-button');
-    let ratingFrontStars = renderedDOM.querySelectorAll('.ms-RatingStar-front');
+    const ratingButtons = renderedDOM.querySelectorAll('.ms-Rating-button');
+    const ratingFrontStars = renderedDOM.querySelectorAll('.ms-RatingStar-front');
 
     const checkState = (ratingToCheck: number, state: string) => {
-      let iconElement = ratingFrontStars[ratingToCheck - 1] as HTMLElement;
-      let width = iconElement.style.width;
+      const iconElement = ratingFrontStars[ratingToCheck - 1] as HTMLElement;
+      const width = iconElement.style.width;
       expect(width).toEqual(state);
     };
 
@@ -60,7 +58,6 @@ describe('Rating', () => {
   });
 
   it('Clamps input rating to allowed range.', () => {
-    let exception;
     let threwException = false;
     let rating;
     try {
@@ -71,18 +68,17 @@ describe('Rating', () => {
         />
       );
     } catch (e) {
-      exception = e;
       threwException = true;
     }
     expect(threwException).toEqual(false);
 
-    let renderedDOM = ReactDOM.findDOMNode(rating as React.ReactInstance);
+    const renderedDOM = ReactDOM.findDOMNode(rating as React.ReactInstance);
 
-    let ratingFrontStars = renderedDOM.querySelectorAll('.ms-RatingStar-front');
+    const ratingFrontStars = renderedDOM.querySelectorAll('.ms-RatingStar-front');
 
     const checkState = (ratingToCheck: number, state: string) => {
-      let iconElement = ratingFrontStars[ratingToCheck - 1] as HTMLElement;
-      let width = iconElement.style.width;
+      const iconElement = ratingFrontStars[ratingToCheck - 1] as HTMLElement;
+      const width = iconElement.style.width;
       expect(width).toEqual(state);
     };
 
@@ -96,7 +92,6 @@ describe('Rating', () => {
   });
 
   it('Half star is displayed when 2.5 value is passed.', () => {
-    let exception;
     let threwException = false;
     let rating;
     try {
@@ -107,17 +102,16 @@ describe('Rating', () => {
         />
       );
     } catch (e) {
-      exception = e;
       threwException = true;
     }
     expect(threwException).toEqual(false);
 
-    let renderedDOM = ReactDOM.findDOMNode(rating as React.ReactInstance);
-    let ratingFrontStars = renderedDOM.querySelectorAll('.ms-RatingStar-front');
+    const renderedDOM = ReactDOM.findDOMNode(rating as React.ReactInstance);
+    const ratingFrontStars = renderedDOM.querySelectorAll('.ms-RatingStar-front');
 
     const checkState = (ratingToCheck: number, state: string) => {
-      let iconElement = ratingFrontStars[ratingToCheck - 1] as HTMLElement;
-      let width = iconElement.style.width;
+      const iconElement = ratingFrontStars[ratingToCheck - 1] as HTMLElement;
+      const width = iconElement.style.width;
       expect(width).toEqual(state);
     };
 
@@ -130,7 +124,6 @@ describe('Rating', () => {
   });
 
   it('When rating is disabled cannot change rating', () => {
-    let exception;
     let threwException = false;
     let choiceGroup;
     try {
@@ -141,13 +134,12 @@ describe('Rating', () => {
         />
       );
     } catch (e) {
-      exception = e;
       threwException = true;
     }
     expect(threwException).toEqual(false);
 
-    let renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance);
-    let ratingButtons = renderedDOM.querySelectorAll('.ms-Rating-button');
+    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance);
+    const ratingButtons = renderedDOM.querySelectorAll('.ms-Rating-button');
     expect((ratingButtons[0] as HTMLButtonElement).disabled).toEqual(true);
     expect((ratingButtons[1] as HTMLButtonElement).disabled).toEqual(true);
     expect((ratingButtons[2] as HTMLButtonElement).disabled).toEqual(true);
@@ -157,7 +149,6 @@ describe('Rating', () => {
   });
 
   it('When rating is readonly cannot change rating', () => {
-    let exception;
     let threwException = false;
     let choiceGroup;
     try {
@@ -169,24 +160,23 @@ describe('Rating', () => {
         />
       );
     } catch (e) {
-      exception = e;
       threwException = true;
 
     }
     expect(threwException).toEqual(false);
 
-    let renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance);
-    let ratingButtons = renderedDOM.querySelectorAll('.ms-Rating-button');
+    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance);
+    const ratingButtons = renderedDOM.querySelectorAll('.ms-Rating-button');
     expect((ratingButtons[0] as HTMLButtonElement).disabled).toEqual(true);
     expect((ratingButtons[1] as HTMLButtonElement).disabled).toEqual(true);
     expect((ratingButtons[2] as HTMLButtonElement).disabled).toEqual(true);
     expect((ratingButtons[3] as HTMLButtonElement).disabled).toEqual(true);
     expect((ratingButtons[4] as HTMLButtonElement).disabled).toEqual(true);
 
-    let ratingFrontStars = renderedDOM.querySelectorAll('.ms-RatingStar-front');
+    const ratingFrontStars = renderedDOM.querySelectorAll('.ms-RatingStar-front');
     const checkState = (ratingToCheck: number, state: string) => {
-      let iconElement = ratingFrontStars[ratingToCheck - 1] as HTMLElement;
-      let width = iconElement.style.width;
+      const iconElement = ratingFrontStars[ratingToCheck - 1] as HTMLElement;
+      const width = iconElement.style.width;
       expect(width).toEqual(state);
     };
 
diff --git a/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx b/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx
index 373e57e06ef68..dec302bd0e019 100644
--- a/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx
+++ b/packages/office-ui-fabric-react/src/components/Rating/Rating.tsx
@@ -1,9 +1,10 @@
 import {
   styled
 } from '../../Utilities';
+// tslint:disable-next-line:no-unused-variable
 import { IRatingProps } from './Rating.types';
 import { getStyles } from './Rating.styles';
-import { RatingBase } from './RatingBase';
+import { RatingBase } from './Rating.base';
 
 export const Rating = styled(
   RatingBase,
diff --git a/packages/office-ui-fabric-react/src/components/Rating/__snapshots__/Rating.test.tsx.snap b/packages/office-ui-fabric-react/src/components/Rating/__snapshots__/Rating.test.tsx.snap
index fc292a8d5840e..686bdd8cd9267 100644
--- a/packages/office-ui-fabric-react/src/components/Rating/__snapshots__/Rating.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/Rating/__snapshots__/Rating.test.tsx.snap
@@ -72,6 +72,7 @@ exports[`Rating Renders Rating correctly 1`] = `
       id="Rating0-star-0"
       onFocus={[Function]}
       role="presentation"
+      type="button"
     >
       <span
         className=
@@ -105,7 +106,6 @@ exports[`Rating Renders Rating correctly 1`] = `
       >
         <i
           aria-hidden={true}
-          aria-label={undefined}
           className=
               ms-RatingStar-back
               {
@@ -120,7 +120,6 @@ exports[`Rating Renders Rating correctly 1`] = `
         />
         <i
           aria-hidden={true}
-          aria-label={undefined}
           className=
               ms-RatingStar-front
               {
@@ -196,6 +195,7 @@ exports[`Rating Renders Rating correctly 1`] = `
       id="Rating0-star-1"
       onFocus={[Function]}
       role="presentation"
+      type="button"
     >
       <span
         className=
@@ -229,7 +229,6 @@ exports[`Rating Renders Rating correctly 1`] = `
       >
         <i
           aria-hidden={true}
-          aria-label={undefined}
           className=
               ms-RatingStar-back
               {
@@ -244,7 +243,6 @@ exports[`Rating Renders Rating correctly 1`] = `
         />
         <i
           aria-hidden={true}
-          aria-label={undefined}
           className=
               ms-RatingStar-front
               {
@@ -320,6 +318,7 @@ exports[`Rating Renders Rating correctly 1`] = `
       id="Rating0-star-2"
       onFocus={[Function]}
       role="presentation"
+      type="button"
     >
       <span
         className=
@@ -353,7 +352,6 @@ exports[`Rating Renders Rating correctly 1`] = `
       >
         <i
           aria-hidden={true}
-          aria-label={undefined}
           className=
               ms-RatingStar-back
               {
@@ -368,7 +366,6 @@ exports[`Rating Renders Rating correctly 1`] = `
         />
         <i
           aria-hidden={true}
-          aria-label={undefined}
           className=
               ms-RatingStar-front
               {
@@ -444,6 +441,7 @@ exports[`Rating Renders Rating correctly 1`] = `
       id="Rating0-star-3"
       onFocus={[Function]}
       role="presentation"
+      type="button"
     >
       <span
         className=
@@ -477,7 +475,6 @@ exports[`Rating Renders Rating correctly 1`] = `
       >
         <i
           aria-hidden={true}
-          aria-label={undefined}
           className=
               ms-RatingStar-back
               {
@@ -492,7 +489,6 @@ exports[`Rating Renders Rating correctly 1`] = `
         />
         <i
           aria-hidden={true}
-          aria-label={undefined}
           className=
               ms-RatingStar-front
               {
@@ -568,6 +564,7 @@ exports[`Rating Renders Rating correctly 1`] = `
       id="Rating0-star-4"
       onFocus={[Function]}
       role="presentation"
+      type="button"
     >
       <span
         className=
@@ -601,7 +598,6 @@ exports[`Rating Renders Rating correctly 1`] = `
       >
         <i
           aria-hidden={true}
-          aria-label={undefined}
           className=
               ms-RatingStar-back
               {
@@ -616,7 +612,6 @@ exports[`Rating Renders Rating correctly 1`] = `
         />
         <i
           aria-hidden={true}
-          aria-label={undefined}
           className=
               ms-RatingStar-front
               {
diff --git a/packages/office-ui-fabric-react/src/components/Rating/index.ts b/packages/office-ui-fabric-react/src/components/Rating/index.ts
index cb6acba281af4..0f3fc18b47341 100644
--- a/packages/office-ui-fabric-react/src/components/Rating/index.ts
+++ b/packages/office-ui-fabric-react/src/components/Rating/index.ts
@@ -1,2 +1,3 @@
 export * from './Rating';
+export * from './Rating.base';
 export * from './Rating.types';
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.base.tsx b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.base.tsx
new file mode 100644
index 0000000000000..5e3db278b0373
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.base.tsx
@@ -0,0 +1,380 @@
+import * as React from 'react';
+import * as PropTypes from 'prop-types';
+import {
+  BaseComponent,
+  classNamesFunction,
+  customizable,
+  divProperties,
+  getNativeProps,
+  provideContext
+} from '../../Utilities';
+import {
+  IResizeGroupProps,
+  IResizeGroupStyles,
+  IResizeGroupStyleProps
+} from './ResizeGroup.types';
+
+const RESIZE_DELAY = 16;
+
+export interface IResizeGroupState {
+
+  /**
+   * Final data used to render proper sized component
+  */
+  renderedData?: any;
+
+  /**
+   * Data to render in a hidden div for measurement
+   */
+  dataToMeasure?: any;
+
+  /**
+   * Set to true when the content container might have new dimensions and should
+   * be remeasured.
+   */
+  measureContainer?: boolean;
+
+  /**
+   * Are we resizing to accommodate having more or less available space?
+   * The 'grow' direction is when the container may have more room than the last render,
+   * such as when a window resize occurs. This means we will try to fit more content in the window.
+   * The 'shrink' direction is when the contents don't fit in the container and we need
+   * to find a transformation of the data that makes everything fit.
+   */
+  resizeDirection?: 'grow' | 'shrink';
+}
+
+/**
+ * Returns a simple object is able to store measurements with a given key.
+ */
+export const getMeasurementCache = () => {
+  const measurementsCache: { [key: string]: number } = {};
+
+  return {
+    /**
+     * Checks if the provided data has a cacheKey. If it has a cacheKey and there is a
+     * corresponding entry in the measurementsCache, then it will return that value.
+     * Returns undefined otherwise.
+     */
+    getCachedMeasurement: (data: any): number | undefined => {
+      if (data && data.cacheKey && measurementsCache.hasOwnProperty(data.cacheKey)) {
+        return measurementsCache[data.cacheKey];
+      }
+
+      return undefined;
+    },
+    /**
+     * Should be called whenever there is a new measurement associated with a given data object.
+     * If the data has a cacheKey, store that measurement in the measurementsCache.
+     */
+    addMeasurementToCache: (data: any, measurement: number): void => {
+      if (data.cacheKey) {
+        measurementsCache[data.cacheKey] = measurement;
+      }
+    }
+  };
+};
+
+/**
+ * Returns a function that is able to compute the next state for the ResizeGroup given the current
+ * state and any measurement updates.
+ */
+export const getNextResizeGroupStateProvider = (measurementCache = getMeasurementCache()) => {
+  const _measurementCache = measurementCache;
+  let _containerWidth: number | undefined;
+
+  /**
+   * Gets the width of the data rendered in a hidden div.
+   * @param measuredData - The data corresponding to the measurement we wish to take.
+   * @param getElementToMeasureWidth - A function that returns the measurement of the rendered data. Only called when the measurement
+   * is not in the cache.
+   */
+  function _getMeasuredWidth(measuredData: any, getElementToMeasureWidth: () => number): number {
+    const cachedWidth = _measurementCache.getCachedMeasurement(measuredData);
+    if (cachedWidth !== undefined) {
+      return cachedWidth;
+    }
+
+    const measuredWidth = getElementToMeasureWidth();
+    _measurementCache.addMeasurementToCache(measuredData, measuredWidth);
+    return measuredWidth;
+  }
+
+  /**
+   * Will get the next IResizeGroupState based on the current data while trying to shrink contents
+   * to fit in the container.
+   * @param data - The initial data point to start measuring.
+   * @param onReduceData - Function that transforms the data into something that should render with less width.
+   * @param getElementToMeasureWidth - A function that returns the measurement of the rendered data. Only called when the measurement
+   * is not in the cache.
+   */
+  function _shrinkContentsUntilTheyFit(data: any,
+    onReduceData: (prevData: any) => any,
+    getElementToMeasureWidth: () => number): IResizeGroupState {
+    let dataToMeasure = data;
+    let measuredWidth: number | undefined = _getMeasuredWidth(data, getElementToMeasureWidth);
+
+    while (measuredWidth > _containerWidth!) {
+      const nextMeasuredData = onReduceData(dataToMeasure);
+
+      // We don't want to get stuck in an infinite render loop when there are no more
+      // scaling steps, so implementations of onReduceData should return undefined when
+      // there are no more scaling states to apply.
+      if (nextMeasuredData === undefined) {
+        return {
+          renderedData: dataToMeasure,
+          resizeDirection: undefined,
+          dataToMeasure: undefined
+        };
+      }
+
+      measuredWidth = _measurementCache.getCachedMeasurement(nextMeasuredData);
+
+      // If the measurement isn't in the cache, we need to rerender with some data in a hidden div
+      if (measuredWidth === undefined) {
+        return {
+          dataToMeasure: nextMeasuredData,
+          resizeDirection: 'shrink'
+        };
+      }
+
+      dataToMeasure = nextMeasuredData;
+    }
+
+    return {
+      renderedData: dataToMeasure,
+      resizeDirection: undefined,
+      dataToMeasure: undefined
+    };
+  }
+
+  /**
+   * This function should be called when the state changes in a manner that might allow for more content to fit
+   * on the screen, such as the window width growing.
+   * @param data - The initial data point to start measuring.
+   * @param onGrowData - Function that transforms the data into something that may take up more space when rendering.
+   * @param getElementToMeasureWidth - A function that returns the measurement of the rendered data. Only called when the measurement
+   * is not in the cache.
+   */
+  function _growDataUntilItDoesNotFit(data: any,
+    onGrowData: (prevData: any) => any,
+    getElementToMeasureWidth: () => number): IResizeGroupState {
+    let dataToMeasure = data;
+    let measuredWidth: number | undefined = _getMeasuredWidth(data, getElementToMeasureWidth);
+
+    while (measuredWidth < _containerWidth!) {
+      const nextMeasuredData = onGrowData(dataToMeasure);
+
+      // We don't want to get stuck in an infinite render loop when there are no more
+      // scaling steps, so implementations of onGrowData should return undefined when
+      // there are no more scaling states to apply.
+      if (nextMeasuredData === undefined) {
+        return {
+          renderedData: dataToMeasure,
+          resizeDirection: undefined,
+          dataToMeasure: undefined
+        };
+      }
+
+      measuredWidth = _measurementCache.getCachedMeasurement(nextMeasuredData);
+      // If the measurement isn't in the cache, we need to rerender with some data in a hidden div
+      if (measuredWidth === undefined) {
+        return {
+          dataToMeasure: nextMeasuredData
+        };
+      }
+
+      dataToMeasure = nextMeasuredData;
+    }
+
+    // Once the loop is done, we should now shrink until the contents fit.
+    return {
+      dataToMeasure,
+      resizeDirection: 'shrink'
+    };
+  }
+
+  /**
+   * Handles an update to the container width. Should only be called when we knew the previous container width.
+   * @param newWidth - The new width of the container.
+   * @param fullWidthData - The initial data passed in as a prop to resizeGroup.
+   * @param renderedData - The data that was rendered prior to the container size changing.
+   * @param onGrowData - Set to true if the Resize group has an onGrowData function.
+   */
+  function _updateContainerWidth(newWidth: number, fullWidthData: any, renderedData: any, onGrowData?: (prevData: any) => any): IResizeGroupState {
+    let nextState: IResizeGroupState;
+    if (newWidth > _containerWidth!) {
+      if (onGrowData) {
+        nextState = {
+          resizeDirection: 'grow',
+          dataToMeasure: onGrowData(renderedData)
+        };
+      } else {
+        nextState = {
+          resizeDirection: 'shrink',
+          dataToMeasure: fullWidthData
+        };
+      }
+    } else {
+      nextState = {
+        resizeDirection: 'shrink',
+        dataToMeasure: renderedData
+      };
+    }
+    _containerWidth = newWidth;
+    return { ...nextState, measureContainer: false };
+  }
+
+  function getNextState(props: IResizeGroupProps,
+    currentState: IResizeGroupState,
+    getElementToMeasureWidth: () => number,
+    newContainerWidth?: number): IResizeGroupState | undefined {
+    // If there is no new container width or data to measure, there is no need for a new state update
+    if (newContainerWidth === undefined && currentState.dataToMeasure === undefined) {
+      return undefined;
+    }
+
+    if (newContainerWidth) {
+      // If we know what the last container size was and we rendered data at that width, we can do an optimized render
+      if (_containerWidth && currentState.renderedData && !currentState.dataToMeasure) {
+        return { ...currentState, ..._updateContainerWidth(newContainerWidth, props.data, currentState.renderedData, props.onGrowData) };
+      }
+
+      // If we are just setting the container width for the first time, we can't do any optimizations
+      _containerWidth = newContainerWidth;
+    }
+
+    let nextState: IResizeGroupState = {
+      ...currentState,
+      measureContainer: false
+    };
+
+    if (currentState.dataToMeasure) {
+      if (currentState.resizeDirection === 'grow' && props.onGrowData) {
+        nextState = {
+          ...nextState,
+          ..._growDataUntilItDoesNotFit(currentState.dataToMeasure, props.onGrowData, getElementToMeasureWidth)
+        };
+      } else {
+        nextState = {
+          ...nextState,
+          ..._shrinkContentsUntilTheyFit(currentState.dataToMeasure, props.onReduceData, getElementToMeasureWidth)
+        };
+      }
+    }
+
+    return nextState;
+  }
+
+  function shouldRenderDataToMeasureInHiddenDiv(dataToMeasure: any | undefined): boolean {
+    if (!dataToMeasure || _measurementCache.getCachedMeasurement(dataToMeasure) !== undefined) {
+      return false;
+    }
+
+    return true;
+  }
+
+  return {
+    getNextState,
+    shouldRenderDataToMeasureInHiddenDiv
+  };
+};
+
+// Provides a context property that (if true) tells any child components that
+// they are only being used for measurement purposes and will not be visible.
+const MeasuredContext = provideContext({
+  isMeasured: PropTypes.bool
+}, () => {
+  return { isMeasured: true };
+});
+
+const getClassNames = classNamesFunction<IResizeGroupStyleProps, IResizeGroupStyles>();
+
+@customizable('ResizeGroup', ['theme'])
+export class ResizeGroupBase extends BaseComponent<IResizeGroupProps, IResizeGroupState> {
+  private _nextResizeGroupStateProvider = getNextResizeGroupStateProvider();
+  private _root: HTMLElement;
+  private _measured: HTMLElement;
+
+  constructor(props: IResizeGroupProps) {
+    super(props);
+    this.state = {
+      dataToMeasure: { ...this.props.data },
+      resizeDirection: 'grow',
+      measureContainer: true,
+    };
+  }
+
+  public render() {
+    const { onRenderData, className, getStyles, theme } = this.props;
+    const { dataToMeasure, renderedData } = this.state;
+    const divProps = getNativeProps(this.props, divProperties, ['data']);
+    const classNames = getClassNames(getStyles!, { theme: theme!, className });
+
+    return (
+      <div { ...divProps } className={ classNames.root } ref={ this._resolveRef('_root') }>
+        { this._nextResizeGroupStateProvider.shouldRenderDataToMeasureInHiddenDiv(dataToMeasure) && (
+          <div
+            style={ { position: 'fixed', visibility: 'hidden' } }
+            ref={ this._resolveRef('_measured') }
+          >
+            <MeasuredContext>{ onRenderData(dataToMeasure) }</MeasuredContext>
+          </div>
+        ) }
+
+        { renderedData && onRenderData(renderedData) }
+      </div>
+    );
+  }
+
+  public componentDidMount() {
+    this._afterComponentRendered();
+    this._events.on(window, 'resize', this._async.debounce(this._onResize, RESIZE_DELAY, { leading: true }));
+  }
+
+  public componentWillReceiveProps(nextProps: IResizeGroupProps) {
+    this.setState({
+      dataToMeasure: { ...nextProps.data },
+      resizeDirection: 'grow',
+      measureContainer: true // Receiving new props means the parent might rerender and the root width might change
+    });
+  }
+
+  public componentDidUpdate(prevProps: IResizeGroupProps) {
+    if (this.state.renderedData) {
+      if (this.props.dataDidRender) {
+        this.props.dataDidRender(this.state.renderedData);
+      }
+    }
+    this._afterComponentRendered();
+  }
+
+  public remeasure(): void {
+    if (this._root) {
+      this.setState({ measureContainer: true });
+    }
+  }
+
+  private _afterComponentRendered() {
+    this._async.requestAnimationFrame(() => {
+      let containerWidth = undefined;
+      if (this.state.measureContainer) {
+        containerWidth = this._root.getBoundingClientRect().width;
+      }
+      const nextState = this._nextResizeGroupStateProvider.getNextState(this.props,
+        this.state,
+        () => this._measured.scrollWidth,
+        containerWidth);
+
+      if (nextState) {
+        this.setState(nextState);
+      }
+    });
+  }
+
+  private _onResize() {
+    if (this._root) {
+      this.setState({ measureContainer: true });
+    }
+  }
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.scss b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.scss
deleted file mode 100644
index 01306c7f803c7..0000000000000
--- a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@import '../../common/common';
-
-.root {
-  display: block;
-  position: relative;
-}
-
-.measured {
-  position: fixed;
-  visibility: hidden;
-}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.styles.ts b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.styles.ts
new file mode 100644
index 0000000000000..a91a6ecf123f4
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.styles.ts
@@ -0,0 +1,20 @@
+import { IResizeGroupStyleProps, IResizeGroupStyles } from './ResizeGroup.types';
+
+export const getStyles = (
+  props: IResizeGroupStyleProps
+): IResizeGroupStyles => {
+  const {
+    className,
+  } = props;
+
+  return ({
+    root: [
+      'ms-ResizeGroup',
+      {
+        display: 'block',
+        position: 'relative'
+      },
+      className
+    ]
+  });
+};
diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.test.tsx b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.test.tsx
index d5d8e2e6305b6..8e04e842d4889 100644
--- a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.test.tsx
@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { shallow } from 'enzyme';
+import { shallowUntilTarget } from '../../common/shallowUntilTarget';
 
-import { ResizeGroup, IResizeGroupState, getNextResizeGroupStateProvider, getMeasurementCache } from './ResizeGroup';
+import { ResizeGroup } from './ResizeGroup';
+import { IResizeGroupState, getNextResizeGroupStateProvider, getMeasurementCache } from './ResizeGroup.base';
 import { IResizeGroupProps } from './ResizeGroup.types';
 import * as sinon from 'sinon';
 import * as renderer from 'react-test-renderer';
@@ -44,13 +45,13 @@ describe('ResizeGroup', () => {
     const renderedDataId = 'onRenderDataId';
     const onRenderData = (data: any) => <div id={ renderedDataId }> Rendered data: { data.content }</div >;
 
-    const wrapper = shallow<IResizeGroupProps, IResizeGroupState>(
+    const wrapper = shallowUntilTarget<IResizeGroupProps, IResizeGroupState>(
       <ResizeGroup
         data={ initialData }
         onReduceData={ onReduceScalingData }
         onRenderData={ onRenderData }
       />
-    );
+      , 'ResizeGroupBase');
 
     expect(wrapper.containsMatchingElement(onRenderData(initialData))).toEqual(true);
   });
@@ -62,7 +63,7 @@ describe('ResizeGroup', () => {
       const getNextResizeGroupState = getNextResizeGroupStateProvider().getNextState;
       const getMeasuredElementWidthStub = sinon.stub();
 
-      let result = getNextResizeGroupState(resizeGroupProps,
+      const result = getNextResizeGroupState(resizeGroupProps,
         resizeGroupState,
         getMeasuredElementWidthStub);
 
@@ -78,7 +79,7 @@ describe('ResizeGroup', () => {
       const getMeasuredElementWidthStub = sinon.stub();
       getMeasuredElementWidthStub.returns(25);
 
-      let result = getNextResizeGroupState(resizeGroupProps,
+      const result = getNextResizeGroupState(resizeGroupProps,
         resizeGroupState,
         getMeasuredElementWidthStub,
         50);
@@ -101,7 +102,7 @@ describe('ResizeGroup', () => {
       const getMeasuredElementWidthStub = sinon.stub();
       getMeasuredElementWidthStub.returns(25);
 
-      let result = getNextResizeGroupState(resizeGroupProps,
+      const result = getNextResizeGroupState(resizeGroupProps,
         resizeGroupState,
         getMeasuredElementWidthStub,
         10);
@@ -117,7 +118,7 @@ describe('ResizeGroup', () => {
     it('does not call getMeasuredElementBounds when the data has already been cached', () => {
       const dataToMeasure = { index: 5, cacheKey: 'foo' };
 
-      let measurementCache = getMeasurementCache();
+      const measurementCache = getMeasurementCache();
       measurementCache.addMeasurementToCache(dataToMeasure, 40);
       const getNextResizeGroupState = getNextResizeGroupStateProvider(measurementCache).getNextState;
 
@@ -125,7 +126,7 @@ describe('ResizeGroup', () => {
       const resizeGroupState: IResizeGroupState = { dataToMeasure, resizeDirection: 'shrink' };
       const measuredElementWidthStub = sinon.stub();
 
-      let result = getNextResizeGroupState(resizeGroupProps,
+      const result = getNextResizeGroupState(resizeGroupProps,
         resizeGroupState,
         measuredElementWidthStub,
         100);
@@ -144,7 +145,7 @@ describe('ResizeGroup', () => {
       { cacheKey: '4' },
       { cacheKey: '3' }];
 
-      let measurementCache = getMeasurementCache();
+      const measurementCache = getMeasurementCache();
       measurementCache.addMeasurementToCache(dataArray[0], 50);
       measurementCache.addMeasurementToCache(dataArray[1], 40);
       measurementCache.addMeasurementToCache(dataArray[2], 5);
@@ -157,7 +158,7 @@ describe('ResizeGroup', () => {
       const resizeGroupState: IResizeGroupState = { dataToMeasure: dataArray[0], resizeDirection: 'shrink' };
       const measuredElementWidthStub = sinon.stub();
 
-      let result = getNextResizeGroupState(resizeGroupProps,
+      const result = getNextResizeGroupState(resizeGroupProps,
         resizeGroupState,
         measuredElementWidthStub,
         10);
@@ -175,7 +176,7 @@ describe('ResizeGroup', () => {
       const dataArray = [{ cacheKey: '5' },
       { cacheKey: '4' }];
 
-      let measurementCache = getMeasurementCache();
+      const measurementCache = getMeasurementCache();
       measurementCache.addMeasurementToCache(dataArray[0], 50);
       const getNextResizeGroupState = getNextResizeGroupStateProvider(measurementCache).getNextState;
 
@@ -185,7 +186,7 @@ describe('ResizeGroup', () => {
       const resizeGroupState: IResizeGroupState = { dataToMeasure: dataArray[0], resizeDirection: 'shrink' };
       const measuredElementWidthStub = sinon.stub();
 
-      let result = getNextResizeGroupState(resizeGroupProps,
+      const result = getNextResizeGroupState(resizeGroupProps,
         resizeGroupState,
         measuredElementWidthStub,
         10);
@@ -210,7 +211,7 @@ describe('ResizeGroup', () => {
       const getMeasuredElementWidthStub = sinon.stub();
       getMeasuredElementWidthStub.returns(25);
 
-      let result = getNextResizeGroupState(resizeGroupProps,
+      const result = getNextResizeGroupState(resizeGroupProps,
         resizeGroupState,
         getMeasuredElementWidthStub,
         10);
@@ -228,7 +229,7 @@ describe('ResizeGroup', () => {
       const dataArray = [{ cacheKey: '5' },
       { cacheKey: '4' }];
 
-      let measurementCache = getMeasurementCache();
+      const measurementCache = getMeasurementCache();
       measurementCache.addMeasurementToCache(dataArray[0], 50);
       measurementCache.addMeasurementToCache(dataArray[1], 40);
       const getNextResizeGroupState = getNextResizeGroupStateProvider(measurementCache).getNextState;
@@ -240,7 +241,7 @@ describe('ResizeGroup', () => {
       const resizeGroupState: IResizeGroupState = { dataToMeasure: dataArray[0], resizeDirection: 'shrink' };
       const measuredElementWidthStub = sinon.stub();
 
-      let result = getNextResizeGroupState(resizeGroupProps,
+      const result = getNextResizeGroupState(resizeGroupProps,
         resizeGroupState,
         measuredElementWidthStub,
         10);
@@ -259,7 +260,7 @@ describe('ResizeGroup', () => {
       const getNextResizeGroupState = getNextResizeGroupStateProvider().getNextState;
       const getMeasuredElementWidthStub = sinon.stub();
 
-      let result = getNextResizeGroupState(resizeGroupProps,
+      const result = getNextResizeGroupState(resizeGroupProps,
         {},
         getMeasuredElementWidthStub,
         50);
@@ -285,11 +286,11 @@ describe('ResizeGroup', () => {
         initialWidth);
 
       // Pass in a state that reflects some rendered data
-      let currentState = {
+      const currentState = {
         renderedData: renderedData
       };
 
-      let result = getNextResizeGroupState(resizeGroupProps,
+      const result = getNextResizeGroupState(resizeGroupProps,
         currentState,
         getMeasuredElementWidthStub,
         reducedWidth);
@@ -320,11 +321,11 @@ describe('ResizeGroup', () => {
         initialWidth);
 
       // Pass in a state that reflects some rendered data
-      let currentState = {
+      const currentState = {
         renderedData: renderedData
       };
 
-      let result = getNextResizeGroupState(resizeGroupProps,
+      const result = getNextResizeGroupState(resizeGroupProps,
         currentState,
         getMeasuredElementWidthStub,
         increasedWidth);
@@ -346,7 +347,7 @@ describe('ResizeGroup', () => {
       const getMeasuredElementWidthStub = sinon.stub();
       getMeasuredElementWidthStub.returns(25);
 
-      let result = getNextResizeGroupState(resizeGroupProps,
+      const result = getNextResizeGroupState(resizeGroupProps,
         resizeGroupState,
         getMeasuredElementWidthStub,
         50);
@@ -369,7 +370,7 @@ describe('ResizeGroup', () => {
       const getMeasuredElementWidthStub = sinon.stub();
       getMeasuredElementWidthStub.returns(100);
 
-      let result = getNextResizeGroupState(resizeGroupProps,
+      const result = getNextResizeGroupState(resizeGroupProps,
         resizeGroupState,
         getMeasuredElementWidthStub,
         72);
@@ -393,7 +394,7 @@ describe('ResizeGroup', () => {
       const getMeasuredElementWidthStub = sinon.stub();
       getMeasuredElementWidthStub.returns(25);
 
-      let result = getNextResizeGroupState(resizeGroupProps,
+      const result = getNextResizeGroupState(resizeGroupProps,
         resizeGroupState,
         getMeasuredElementWidthStub,
         50);
@@ -416,7 +417,7 @@ describe('ResizeGroup', () => {
       const getMeasuredElementWidthStub = sinon.stub();
       getMeasuredElementWidthStub.returns(75);
 
-      let result = getNextResizeGroupState(resizeGroupProps,
+      const result = getNextResizeGroupState(resizeGroupProps,
         resizeGroupState,
         getMeasuredElementWidthStub,
         40);
@@ -441,7 +442,7 @@ describe('ResizeGroup', () => {
       const getMeasuredElementWidthStub = sinon.stub();
       getMeasuredElementWidthStub.returns(25);
 
-      let result = getNextResizeGroupState(resizeGroupProps,
+      const result = getNextResizeGroupState(resizeGroupProps,
         resizeGroupState,
         getMeasuredElementWidthStub,
         40);
@@ -474,11 +475,11 @@ describe('ResizeGroup', () => {
         initialWidth);
 
       // Pass in a state that reflects some rendered data
-      let currentState = {
+      const currentState = {
         renderedData: renderedData
       };
 
-      let result = getNextResizeGroupState(resizeGroupProps,
+      const result = getNextResizeGroupState(resizeGroupProps,
         currentState,
         getMeasuredElementWidthStub,
         increasedWidth);
@@ -505,7 +506,7 @@ describe('ResizeGroup', () => {
       const resizeGroupState: IResizeGroupState = { dataToMeasure, resizeDirection: 'grow' };
       const measuredElementWidthStub = sinon.stub();
 
-      let result = getNextResizeGroupState(resizeGroupProps,
+      const result = getNextResizeGroupState(resizeGroupProps,
         resizeGroupState,
         measuredElementWidthStub,
         100);
@@ -538,7 +539,7 @@ describe('ResizeGroup', () => {
       const resizeGroupState: IResizeGroupState = { dataToMeasure: dataArray[0], resizeDirection: 'grow' };
       const measuredElementWidthStub = sinon.stub();
 
-      let result = getNextResizeGroupState(resizeGroupProps,
+      const result = getNextResizeGroupState(resizeGroupProps,
         resizeGroupState,
         measuredElementWidthStub,
         100);
@@ -555,7 +556,7 @@ describe('ResizeGroup', () => {
       const dataArray = [{ cacheKey: '5' },
       { cacheKey: '6' }];
 
-      let measurementCache = getMeasurementCache();
+      const measurementCache = getMeasurementCache();
       measurementCache.addMeasurementToCache(dataArray[0], 40);
       const getNextResizeGroupState = getNextResizeGroupStateProvider(measurementCache).getNextState;
 
@@ -566,7 +567,7 @@ describe('ResizeGroup', () => {
       const resizeGroupState: IResizeGroupState = { dataToMeasure: dataArray[0], resizeDirection: 'grow' };
       const measuredElementWidthStub = sinon.stub();
 
-      let result = getNextResizeGroupState(resizeGroupProps,
+      const result = getNextResizeGroupState(resizeGroupProps,
         resizeGroupState,
         measuredElementWidthStub,
         100);
@@ -595,7 +596,7 @@ describe('ResizeGroup', () => {
       initialWidth);
 
     // Pass in a state that reflects some rendered data
-    let currentState: IResizeGroupState = {
+    const currentState: IResizeGroupState = {
       renderedData: renderedData,
       dataToMeasure: { index: 8 },
       resizeDirection: 'grow'
@@ -603,7 +604,7 @@ describe('ResizeGroup', () => {
 
     resizeGroupProps.onReduceData.returns({ index: 7 });
 
-    let result = getNextResizeGroupState(resizeGroupProps,
+    const result = getNextResizeGroupState(resizeGroupProps,
       currentState,
       getMeasuredElementWidthStub,
       initialWidth);
@@ -623,7 +624,7 @@ describe('ResizeGroup', () => {
   it('does not render to the hidden div when there is no dataToMeasure', () => {
     const resizeGroupStateProvider = getNextResizeGroupStateProvider();
 
-    let result = resizeGroupStateProvider.shouldRenderDataToMeasureInHiddenDiv(undefined);
+    const result = resizeGroupStateProvider.shouldRenderDataToMeasureInHiddenDiv(undefined);
 
     expect(result).toEqual(false);
   });
@@ -631,18 +632,18 @@ describe('ResizeGroup', () => {
   it('does render to the hidden div when there is dataToMeasure', () => {
     const resizeGroupStateProvider = getNextResizeGroupStateProvider();
 
-    let result = resizeGroupStateProvider.shouldRenderDataToMeasureInHiddenDiv({ index: 18 });
+    const result = resizeGroupStateProvider.shouldRenderDataToMeasureInHiddenDiv({ index: 18 });
 
     expect(result).toEqual(true);
   });
 
   it('does not render to the hidden div when there is dataToMeasure that is in the cache', () => {
-    let data = { index: 8, cacheKey: 'myCoolCacheKey' };
+    const data = { index: 8, cacheKey: 'myCoolCacheKey' };
     const measurementCache = getMeasurementCache();
     measurementCache.addMeasurementToCache(data, 12);
     const resizeGroupStateProvider = getNextResizeGroupStateProvider(measurementCache);
 
-    let result = resizeGroupStateProvider.shouldRenderDataToMeasureInHiddenDiv(data);
+    const result = resizeGroupStateProvider.shouldRenderDataToMeasureInHiddenDiv(data);
 
     expect(result).toEqual(false);
   });
diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.tsx b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.tsx
index c8c486a47f3ea..2fe73d8f2d5de 100644
--- a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.tsx
+++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.tsx
@@ -1,369 +1,13 @@
-import * as React from 'react';
-import * as PropTypes from 'prop-types';
+import { styled } from '../../Utilities';
 import {
-  BaseComponent,
-  css,
-  divProperties,
-  getNativeProps
-} from '../../Utilities';
-import { provideContext } from '@uifabric/utilities/lib/Context';
-import { IResizeGroupProps } from './ResizeGroup.types';
-import * as styles from './ResizeGroup.scss';
-
-const RESIZE_DELAY = 16;
-
-export interface IResizeGroupState {
-
-  /**
-   * Final data used to render proper sized component
-  */
-  renderedData?: any;
-
-  /**
-   * Data to render in a hidden div for measurement
-   */
-  dataToMeasure?: any;
-
-  /**
-   * Set to true when the content container might have new dimensions and should
-   * be remeasured.
-   */
-  measureContainer?: boolean;
-
-  /**
-   * Are we resizing to accommodate having more or less available space?
-   * The 'grow' direction is when the container may have more room than the last render,
-   * such as when a window resize occurs. This means we will try to fit more content in the window.
-   * The 'shrink' direction is when the contents don't fit in the container and we need
-   * to find a transformation of the data that makes everything fit.
-   */
-  resizeDirection?: 'grow' | 'shrink';
-}
-
-/**
- * Returns a simple object is able to store measurements with a given key.
- */
-export const getMeasurementCache = () => {
-  const measurementsCache: { [key: string]: number } = {};
-
-  return {
-    /**
-     * Checks if the provided data has a cacheKey. If it has a cacheKey and there is a
-     * corresponding entry in the measurementsCache, then it will return that value.
-     * Returns undefined otherwise.
-     */
-    getCachedMeasurement: (data: any): number | undefined => {
-      if (data && data.cacheKey && measurementsCache.hasOwnProperty(data.cacheKey)) {
-        return measurementsCache[data.cacheKey];
-      }
-
-      return undefined;
-    },
-    /**
-     * Should be called whenever there is a new measurement associated with a given data object.
-     * If the data has a cacheKey, store that measurement in the measurementsCache.
-     */
-    addMeasurementToCache: (data: any, measurement: number): void => {
-      if (data.cacheKey) {
-        measurementsCache[data.cacheKey] = measurement;
-      }
-    }
-  };
-};
-
-/**
- * Returns a function that is able to compute the next state for the ResizeGroup given the current
- * state and any measurement updates.
- */
-export const getNextResizeGroupStateProvider = (measurementCache = getMeasurementCache()) => {
-  const _measurementCache = measurementCache;
-  let _containerWidth: number | undefined;
-
-  /**
-   * Gets the width of the data rendered in a hidden div.
-   * @param measuredData - The data corresponding to the measurement we wish to take.
-   * @param getElementToMeasureWidth - A function that returns the measurement of the rendered data. Only called when the measurement
-   * is not in the cache.
-   */
-  function _getMeasuredWidth(measuredData: any, getElementToMeasureWidth: () => number): number {
-    let cachedWidth = _measurementCache.getCachedMeasurement(measuredData);
-    if (cachedWidth !== undefined) {
-      return cachedWidth;
-    }
-
-    let measuredWidth = getElementToMeasureWidth();
-    _measurementCache.addMeasurementToCache(measuredData, measuredWidth);
-    return measuredWidth;
-  }
-
-  /**
-   * Will get the next IResizeGroupState based on the current data while trying to shrink contents
-   * to fit in the container.
-   * @param data - The initial data point to start measuring.
-   * @param onReduceData - Function that transforms the data into something that should render with less width.
-   * @param getElementToMeasureWidth - A function that returns the measurement of the rendered data. Only called when the measurement
-   * is not in the cache.
-   */
-  function _shrinkContentsUntilTheyFit(data: any,
-    onReduceData: (prevData: any) => any,
-    getElementToMeasureWidth: () => number): IResizeGroupState {
-    let dataToMeasure = data;
-    let measuredWidth: number | undefined = _getMeasuredWidth(data, getElementToMeasureWidth);
-
-    while (measuredWidth > _containerWidth!) {
-      let nextMeasuredData = onReduceData(dataToMeasure);
-
-      // We don't want to get stuck in an infinite render loop when there are no more
-      // scaling steps, so implementations of onReduceData should return undefined when
-      // there are no more scaling states to apply.
-      if (nextMeasuredData === undefined) {
-        return {
-          renderedData: dataToMeasure,
-          resizeDirection: undefined,
-          dataToMeasure: undefined
-        };
-      }
-
-      measuredWidth = _measurementCache.getCachedMeasurement(nextMeasuredData);
-
-      // If the measurement isn't in the cache, we need to rerender with some data in a hidden div
-      if (measuredWidth === undefined) {
-        return {
-          dataToMeasure: nextMeasuredData,
-          resizeDirection: 'shrink'
-        };
-      }
-
-      dataToMeasure = nextMeasuredData;
-    }
-
-    return {
-      renderedData: dataToMeasure,
-      resizeDirection: undefined,
-      dataToMeasure: undefined
-    };
-  }
-
-  /**
-   * This function should be called when the state changes in a manner that might allow for more content to fit
-   * on the screen, such as the window width growing.
-   * @param data - The initial data point to start measuring.
-   * @param onGrowData - Function that transforms the data into something that may take up more space when rendering.
-   * @param getElementToMeasureWidth - A function that returns the measurement of the rendered data. Only called when the measurement
-   * is not in the cache.
-   */
-  function _growDataUntilItDoesNotFit(data: any,
-    onGrowData: (prevData: any) => any,
-    getElementToMeasureWidth: () => number): IResizeGroupState {
-    let dataToMeasure = data;
-    let measuredWidth: number | undefined = _getMeasuredWidth(data, getElementToMeasureWidth);
-
-    while (measuredWidth < _containerWidth!) {
-      let nextMeasuredData = onGrowData(dataToMeasure);
-
-      // We don't want to get stuck in an infinite render loop when there are no more
-      // scaling steps, so implementations of onGrowData should return undefined when
-      // there are no more scaling states to apply.
-      if (nextMeasuredData === undefined) {
-        return {
-          renderedData: dataToMeasure,
-          resizeDirection: undefined,
-          dataToMeasure: undefined
-        };
-      }
-
-      measuredWidth = _measurementCache.getCachedMeasurement(nextMeasuredData);
-      // If the measurement isn't in the cache, we need to rerender with some data in a hidden div
-      if (measuredWidth === undefined) {
-        return {
-          dataToMeasure: nextMeasuredData
-        };
-      }
-
-      dataToMeasure = nextMeasuredData;
-    }
-
-    // Once the loop is done, we should now shrink until the contents fit.
-    return {
-      dataToMeasure,
-      resizeDirection: 'shrink'
-    };
-  }
-
-  /**
-   * Handles an update to the container width. Should only be called when we knew the previous container width.
-   * @param newWidth - The new width of the container.
-   * @param fullWidthData - The initial data passed in as a prop to resizeGroup.
-   * @param renderedData - The data that was rendered prior to the container size changing.
-   * @param onGrowData - Set to true if the Resize group has an onGrowData function.
-   */
-  function _updateContainerWidth(newWidth: number, fullWidthData: any, renderedData: any, onGrowData?: (prevData: any) => any): IResizeGroupState {
-    let nextState: IResizeGroupState;
-    if (newWidth > _containerWidth!) {
-      if (onGrowData) {
-        nextState = {
-          resizeDirection: 'grow',
-          dataToMeasure: onGrowData(renderedData)
-        };
-      } else {
-        nextState = {
-          resizeDirection: 'shrink',
-          dataToMeasure: fullWidthData
-        };
-      }
-    } else {
-      nextState = {
-        resizeDirection: 'shrink',
-        dataToMeasure: renderedData
-      };
-    }
-    _containerWidth = newWidth;
-    return { ...nextState, measureContainer: false };
-  }
-
-  function getNextState(props: IResizeGroupProps,
-    currentState: IResizeGroupState,
-    getElementToMeasureWidth: () => number,
-    newContainerWidth?: number): IResizeGroupState | undefined {
-    // If there is no new container width or data to measure, there is no need for a new state update
-    if (newContainerWidth === undefined && currentState.dataToMeasure === undefined) {
-      return undefined;
-    }
-
-    if (newContainerWidth) {
-      // If we know what the last container size was and we rendered data at that width, we can do an optimized render
-      if (_containerWidth && currentState.renderedData && !currentState.dataToMeasure) {
-        return { ...currentState, ..._updateContainerWidth(newContainerWidth, props.data, currentState.renderedData, props.onGrowData) };
-      }
-
-      // If we are just setting the container width for the first time, we can't do any optimizations
-      _containerWidth = newContainerWidth;
-    }
-
-    let nextState: IResizeGroupState = {
-      ...currentState,
-      measureContainer: false
-    };
-
-    if (currentState.dataToMeasure) {
-      if (currentState.resizeDirection === 'grow' && props.onGrowData) {
-        nextState = {
-          ...nextState,
-          ..._growDataUntilItDoesNotFit(currentState.dataToMeasure, props.onGrowData, getElementToMeasureWidth)
-        };
-      } else {
-        nextState = {
-          ...nextState,
-          ..._shrinkContentsUntilTheyFit(currentState.dataToMeasure, props.onReduceData, getElementToMeasureWidth)
-        };
-      }
-    }
-
-    return nextState;
-  }
-
-  function shouldRenderDataToMeasureInHiddenDiv(dataToMeasure: any | undefined): boolean {
-    if (!dataToMeasure || _measurementCache.getCachedMeasurement(dataToMeasure) !== undefined) {
-      return false;
-    }
-
-    return true;
-  }
-
-  return {
-    getNextState,
-    shouldRenderDataToMeasureInHiddenDiv
-  };
-};
-
-// Provides a context property that (if true) tells any child components that
-// they are only being used for measurement purposes and will not be visible.
-const MeasuredContext = provideContext({
-  isMeasured: PropTypes.bool
-}, () => {
-  return { isMeasured: true };
-});
-
-export class ResizeGroup extends BaseComponent<IResizeGroupProps, IResizeGroupState> {
-  private _nextResizeGroupStateProvider = getNextResizeGroupStateProvider();
-  private _root: HTMLElement;
-  private _measured: HTMLElement;
-
-  constructor(props: IResizeGroupProps) {
-    super(props);
-    this.state = {
-      dataToMeasure: { ...this.props.data },
-      resizeDirection: 'grow',
-      measureContainer: true,
-    };
-  }
-
-  public render() {
-    const { onRenderData, className } = this.props;
-    const { dataToMeasure, renderedData } = this.state;
-    const divProps = getNativeProps(this.props, divProperties, ['data']);
-
-    return (
-      <div {...divProps} className={ css('ms-ResizeGroup', className) } ref={ this._resolveRef('_root') }>
-        { this._nextResizeGroupStateProvider.shouldRenderDataToMeasureInHiddenDiv(dataToMeasure) && (
-          <div className={ css(styles.measured) } ref={ this._resolveRef('_measured') }>
-            <MeasuredContext>{ onRenderData(dataToMeasure) }</MeasuredContext>
-          </div>
-        ) }
-
-        { renderedData && onRenderData(renderedData) }
-      </div>
-    );
-  }
-
-  public componentDidMount() {
-    this._afterComponentRendered();
-    this._events.on(window, 'resize', this._async.debounce(this._onResize, RESIZE_DELAY, { leading: true }));
-  }
-
-  public componentWillReceiveProps(nextProps: IResizeGroupProps) {
-    this.setState({
-      dataToMeasure: { ...nextProps.data },
-      resizeDirection: 'grow',
-      measureContainer: true // Receiving new props means the parent might rerender and the root width might change
-    });
-  }
-
-  public componentDidUpdate(prevProps: IResizeGroupProps) {
-    if (this.state.renderedData) {
-      if (this.props.dataDidRender) {
-        this.props.dataDidRender(this.state.renderedData);
-      }
-    }
-    this._afterComponentRendered();
-  }
-
-  public remeasure(): void {
-    if (this._root) {
-      this.setState({ measureContainer: true });
-    }
-  }
-
-  private _afterComponentRendered() {
-    this._async.requestAnimationFrame(() => {
-      let containerWidth = undefined;
-      if (this.state.measureContainer) {
-        containerWidth = this._root.getBoundingClientRect().width;
-      }
-      let nextState = this._nextResizeGroupStateProvider.getNextState(this.props,
-        this.state,
-        () => this._measured.scrollWidth,
-        containerWidth);
-
-      if (nextState) {
-        this.setState(nextState);
-      }
-    });
-  }
-
-  private _onResize() {
-    if (this._root) {
-      this.setState({ measureContainer: true });
-    }
-  }
-}
\ No newline at end of file
+  IResizeGroupProps,
+  IResizeGroupStyleProps,
+  IResizeGroupStyles
+} from './ResizeGroup.types';
+import { ResizeGroupBase } from './ResizeGroup.base';
+import { getStyles } from './ResizeGroup.styles';
+
+export const ResizeGroup = styled<IResizeGroupProps, IResizeGroupStyleProps, IResizeGroupStyles>(
+  ResizeGroupBase,
+  getStyles
+);
diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.types.ts b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.types.ts
index dec502a0d4dfc..c65d6d3418748 100644
--- a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroup.types.ts
@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { ResizeGroup } from './ResizeGroup';
-
+import { ResizeGroupBase } from './ResizeGroup.base';
+import { IStyle, ITheme } from '../../Styling';
+import { IStyleFunction } from '../../Utilities';
 export interface IResizeGroup {
   /**
    * Remeasures the available space.
@@ -8,7 +9,7 @@ export interface IResizeGroup {
   remeasure(): void;
 }
 
-export interface IResizeGroupProps extends React.HTMLAttributes<ResizeGroup | HTMLElement> {
+export interface IResizeGroupProps extends React.HTMLAttributes<ResizeGroupBase | HTMLElement> {
 
   /**
    * Optional callback to access the IResizeGroup interface. Use this instead of ref for accessing
@@ -16,6 +17,22 @@ export interface IResizeGroupProps extends React.HTMLAttributes<ResizeGroup | HT
    */
   componentRef?: (component: IResizeGroup) => void;
 
+  /**
+   * Call to provide customized styling that will layer on top of the variant rules
+   */
+  getStyles?: IStyleFunction<IResizeGroupStyleProps, IResizeGroupStyles>;
+
+  /**
+   * Theme provided by HOC.
+   */
+  theme?: ITheme;
+
+  /**
+   * Additional css class to apply to the Component
+   * @defaultvalue undefined
+   */
+  className?: string;
+
   /**
    * Initial data to be passed to the onRenderData function. When there is no onGrowData provided, this data should represent what should
    * be passed to the render function when the parent container of the ResizeGroup is at it's maximum supported width. A cacheKey property
@@ -52,3 +69,22 @@ export interface IResizeGroupProps extends React.HTMLAttributes<ResizeGroup | HT
    */
   dataDidRender?: (renderedData: any) => void;
 }
+
+export interface IResizeGroupStyleProps {
+  /**
+   * Accept theme prop.
+   */
+  theme: ITheme;
+
+  /**
+   * Accept custom classNames
+   */
+  className?: string;
+}
+
+export interface IResizeGroupStyles {
+  /**
+   * Style for the root element.
+   */
+  root: IStyle;
+}
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroupPage.tsx b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroupPage.tsx
index 3a0e3ba50ddea..060046c5fad27 100644
--- a/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroupPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/ResizeGroupPage.tsx
@@ -10,6 +10,7 @@ import { ResizeGroupOverflowSetExample } from './examples/ResizeGroup.OverflowSe
 import { FlexBoxResizeGroupExample } from './examples/ResizeGroup.FlexBox.Example';
 import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
 import { ResizeGroupStatus } from './ResizeGroup.checklist';
+import { MessageBar } from '../../MessageBar';
 
 const ResizeGroupBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ResizeGroup/examples/ResizeGroup.OverflowSet.Example.tsx') as string;
 
@@ -31,6 +32,7 @@ export class ResizeGroupPage extends React.Component<IComponentDemoPageProps, an
             </ExampleCard>
           </LayerHost>
         }
+        allowNativeProps={ true }
         propertiesTables={
           <PropertiesTableSet
             sources={ [
@@ -103,7 +105,7 @@ export class ResizeGroupPage extends React.Component<IComponentDemoPageProps, an
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...ResizeGroupStatus}
+            { ...ResizeGroupStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/__snapshots__/ResizeGroup.test.tsx.snap b/packages/office-ui-fabric-react/src/components/ResizeGroup/__snapshots__/ResizeGroup.test.tsx.snap
index 4cfbc5ed5880d..a52674c25e684 100644
--- a/packages/office-ui-fabric-react/src/components/ResizeGroup/__snapshots__/ResizeGroup.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/__snapshots__/ResizeGroup.test.tsx.snap
@@ -2,10 +2,21 @@
 
 exports[`ResizeGroup renders the ResizeGroup correctly 1`] = `
 <div
-  className="ms-ResizeGroup TestClassName"
+  className=
+      ms-ResizeGroup
+      TestClassName
+      {
+        display: block;
+        position: relative;
+      }
 >
   <div
-    className=""
+    style={
+      Object {
+        "position": "fixed",
+        "visibility": "hidden",
+      }
+    }
   >
     <div
       id="onRenderDataId"
diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/examples/ResizeGroup.FlexBox.Example.tsx b/packages/office-ui-fabric-react/src/components/ResizeGroup/examples/ResizeGroup.FlexBox.Example.tsx
index c524b669e938a..f92c0febb1428 100644
--- a/packages/office-ui-fabric-react/src/components/ResizeGroup/examples/ResizeGroup.FlexBox.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/examples/ResizeGroup.FlexBox.Example.tsx
@@ -39,7 +39,7 @@ const BoxWithLabel: React.StatelessComponent<IBoxWithLabelProps> =
   (props: IBoxWithLabelProps) => (<div className={ getNumberedBoxClassName(props.backgroundColor) } >{ props.label }</div >);
 
 function renderBoxWithLabels(count: number, backgroundColor: string): JSX.Element[] {
-  let result: JSX.Element[] = [];
+  const result: JSX.Element[] = [];
   for (let i = 1; i <= count; i += 1) {
     result.push(
       <BoxWithLabel
@@ -82,7 +82,7 @@ function onReduceData(props: ILeftRightBoxSetProps): ILeftRightBoxSetProps | und
 
 export class FlexBoxResizeGroupExample extends BaseComponent<{}, {}> {
   public render() {
-    let data: ILeftRightBoxSetProps = { leftCount: 5, rightCount: 5, cacheKey: '10' };
+    const data: ILeftRightBoxSetProps = { leftCount: 5, rightCount: 5, cacheKey: '10' };
     return (
       <ResizeGroup
         data={ data }
diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/examples/ResizeGroup.OverflowSet.Example.tsx b/packages/office-ui-fabric-react/src/components/ResizeGroup/examples/ResizeGroup.OverflowSet.Example.tsx
index 0888d19501e45..196ab527f905e 100644
--- a/packages/office-ui-fabric-react/src/components/ResizeGroup/examples/ResizeGroup.OverflowSet.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/examples/ResizeGroup.OverflowSet.Example.tsx
@@ -18,10 +18,10 @@ export interface IOverflowData {
 
 function generateData(count: number, cachingEnabled: boolean, checked: boolean): IOverflowData {
   const icons = ['Add', 'Share', 'Upload'];
-  let dataItems = [];
+  const dataItems = [];
   let cacheKey = '';
   for (let index = 0; index < count; index++) {
-    let item = {
+    const item = {
       key: `item${index}`,
       name: `Item ${index}`,
       icon: icons[index % icons.length],
@@ -70,8 +70,8 @@ export class ResizeGroupOverflowSetExample extends BaseComponent<{}, IResizeGrou
   }
 
   public render() {
-    let { numberOfItems, cachingEnabled, buttonsChecked, short, onGrowDataEnabled } = this.state;
-    let dataToRender = generateData(numberOfItems, cachingEnabled, buttonsChecked);
+    const { numberOfItems, cachingEnabled, buttonsChecked, short, onGrowDataEnabled } = this.state;
+    const dataToRender = generateData(numberOfItems, cachingEnabled, buttonsChecked);
     return (
       <div className={ short ? styles.resizeIsShort : 'notResized' }>
         <ResizeGroup
@@ -137,8 +137,8 @@ export class ResizeGroupOverflowSetExample extends BaseComponent<{}, IResizeGrou
       return undefined;
     }
 
-    let overflow = [...currentData.primary.slice(-1), ...currentData.overflow];
-    let primary = currentData.primary.slice(0, -1);
+    const overflow = [...currentData.primary.slice(-1), ...currentData.overflow];
+    const primary = currentData.primary.slice(0, -1);
 
     let cacheKey = undefined;
     if (this.state.cachingEnabled) {
@@ -153,8 +153,8 @@ export class ResizeGroupOverflowSetExample extends BaseComponent<{}, IResizeGrou
       return undefined;
     }
 
-    let overflow = currentData.overflow.slice(1);
-    let primary = [...currentData.primary, ...currentData.overflow.slice(0, 1)];
+    const overflow = currentData.overflow.slice(1);
+    const primary = [...currentData.primary, ...currentData.overflow.slice(0, 1)];
 
     let cacheKey = undefined;
     if (this.state.cachingEnabled) {
diff --git a/packages/office-ui-fabric-react/src/components/ResizeGroup/index.ts b/packages/office-ui-fabric-react/src/components/ResizeGroup/index.ts
index 40c9ea942c650..6384dae9307d6 100644
--- a/packages/office-ui-fabric-react/src/components/ResizeGroup/index.ts
+++ b/packages/office-ui-fabric-react/src/components/ResizeGroup/index.ts
@@ -1,2 +1,3 @@
 export * from './ResizeGroup';
+export * from './ResizeGroup.base';
 export * from './ResizeGroup.types';
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx
new file mode 100644
index 0000000000000..79f32b9657e1c
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.base.tsx
@@ -0,0 +1,236 @@
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+/* tslint:enable:no-unused-variable */
+import * as PropTypes from 'prop-types';
+import {
+  autobind,
+  BaseComponent,
+  classNamesFunction,
+  customizable,
+  divProperties,
+  getNativeProps
+} from '../../Utilities';
+import {
+  IScrollablePane,
+  IScrollablePaneProps,
+  IScrollablePaneStyles,
+  IScrollablePaneStyleProps
+} from './ScrollablePane.types';
+import { Sticky } from '../../Sticky';
+
+export interface IScrollablePaneContext {
+  scrollablePane: PropTypes.Requireable<object>;
+}
+
+const getClassNames = classNamesFunction<IScrollablePaneStyleProps, IScrollablePaneStyles>();
+
+@customizable('ScrollablePane', ['theme'])
+export class ScrollablePaneBase extends BaseComponent<IScrollablePaneProps, {}> implements IScrollablePane {
+  public static childContextTypes: React.ValidationMap<IScrollablePaneContext> = {
+    scrollablePane: PropTypes.object
+  };
+
+  public root: HTMLElement;
+  public stickyAbove: HTMLElement;
+  public stickyBelow: HTMLElement;
+  private _subscribers: Set<Function>;
+  private _stickyAbove: Set<Sticky>;
+  private _stickyBelow: Set<Sticky>;
+
+  constructor(props: IScrollablePaneProps) {
+    super(props);
+    this._subscribers = new Set<Function>();
+    this._stickyAbove = new Set<Sticky>();
+    this._stickyBelow = new Set<Sticky>();
+  }
+
+  public getChildContext() {
+    return {
+      scrollablePane: {
+        subscribe: this.subscribe,
+        unsubscribe: this.unsubscribe,
+        addStickyHeader: this.addStickyHeader,
+        removeStickyHeader: this.removeStickyHeader,
+        addStickyFooter: this.addStickyFooter,
+        removeStickyFooter: this.removeStickyFooter,
+        notifySubscribers: this.notifySubscribers
+      }
+    };
+  }
+
+  public componentDidMount() {
+    this._events.on(this.root, 'scroll', this.notifySubscribers);
+    this._events.on(window, 'resize', this._onWindowResize);
+  }
+
+  public componentWillUnmount() {
+    this._events.off(this.root);
+    this._events.off(window);
+  }
+
+  public componentDidUpdate(prevProps: IScrollablePaneProps) {
+    const initialScrollPosition = this.props.initialScrollPosition;
+    if (initialScrollPosition && prevProps.initialScrollPosition !== initialScrollPosition) {
+      this.root.scrollTop = initialScrollPosition;
+    }
+  }
+
+  public render() {
+    const { className, theme, getStyles } = this.props;
+    const classNames = getClassNames(getStyles!,
+      {
+        theme: theme!,
+        className
+      }
+    );
+
+    return (
+      <div
+        { ...getNativeProps(this.props, divProperties) }
+        ref={ this._resolveRef('root') }
+        className={ classNames.root }
+      >
+        <div ref={ this._resolveRef('stickyAbove') } className={ classNames.stickyAbove } />
+        <div ref={ this._resolveRef('stickyBelow') } className={ classNames.stickyBelow } />
+        <div data-is-scrollable={ true }>
+          { this.props.children }
+        </div>
+      </div>
+    );
+  }
+
+  public forceLayoutUpdate() {
+    this._onWindowResize();
+  }
+
+  @autobind
+  public subscribe(handler: (headerBound: ClientRect, footerBound: ClientRect) => void) {
+    this._subscribers.add(handler);
+  }
+
+  @autobind
+  public unsubscribe(handler: (headerBound: ClientRect, footerBound: ClientRect) => void) {
+    this._subscribers.delete(handler);
+  }
+
+  @autobind
+  public addStickyHeader(sticky: Sticky) {
+    this._addSticky(sticky, this._stickyAbove, this.stickyAbove, () => {
+      this.stickyAbove.appendChild(sticky.content);
+    });
+  }
+
+  @autobind
+  public addStickyFooter(sticky: Sticky) {
+    this._addSticky(sticky, this._stickyBelow, this.stickyBelow, () => {
+      this.stickyBelow.insertBefore(sticky.content, this.stickyBelow.firstChild);
+    });
+  }
+
+  @autobind
+  public removeStickyHeader(sticky: Sticky) {
+    this._removeSticky(sticky, this._stickyAbove, this.stickyAbove);
+  }
+
+  @autobind
+  public removeStickyFooter(sticky: Sticky) {
+    this._removeSticky(sticky, this._stickyBelow, this.stickyBelow);
+  }
+
+  @autobind
+  public notifySubscribers(sort?: boolean): void {
+    this._subscribers.forEach((handle) => {
+      handle(this.stickyAbove.getBoundingClientRect(), this.stickyBelow.getBoundingClientRect());
+    });
+    if (this._stickyAbove.size > 1) {
+      this._sortStickies(this._stickyAbove, this.stickyAbove);
+    }
+    if (this._stickyBelow.size > 1) {
+      this._sortStickies(this._stickyBelow, this.stickyBelow);
+    }
+  }
+
+  @autobind
+  public getScrollPosition(): number {
+    return this.root.scrollTop;
+  }
+
+  private _addSticky(sticky: Sticky, stickyList: Set<Sticky>, container: HTMLElement, addStickyToContainer: () => void) {
+    if (!stickyList.has(sticky)) {
+      stickyList.add(sticky);
+      addStickyToContainer();
+      sticky.content.addEventListener('transitionend',
+        this._setPlaceholderHeights.bind(null, stickyList),
+        false);
+      if (sticky.props.stickyClassName) {
+        this._async.setTimeout(() => {
+          if (sticky.props.stickyClassName) {
+            sticky.content.children[0].classList.add(sticky.props.stickyClassName);
+          }
+        }, 1);
+      }
+      this._setPlaceholderHeights(stickyList);
+    }
+  }
+
+  private _removeSticky(sticky: Sticky, stickyList: Set<Sticky>, container: HTMLElement) {
+    if (stickyList.has(sticky)) {
+      sticky.content.removeEventListener('transitionend',
+        this._setPlaceholderHeights.bind(null, stickyList, container));
+      stickyList.delete(sticky);
+    }
+  }
+
+  private _onWindowResize() {
+    this._async.setTimeout(() => {
+      this.notifySubscribers();
+      this._setPlaceholderHeights(this._stickyAbove);
+      this._setPlaceholderHeights(this._stickyBelow);
+    }, 5);
+  }
+
+  @autobind
+  private _setPlaceholderHeights(stickies: Set<Sticky>) {
+    stickies.forEach((sticky, idx) => {
+      sticky.setPlaceholderHeight(sticky.content.clientHeight);
+    });
+  }
+
+  private _sortStickies(stickyList: Set<Sticky>, container: HTMLElement): void {
+    let stickyArr = Array.from(stickyList);
+    stickyArr = stickyArr.sort((a, b) => {
+      const aOffset = this._calculateOffsetParent(a.root);
+      const bOffset = this._calculateOffsetParent(b.root);
+      return aOffset - bOffset;
+    });
+    // Get number of elements that is already in order.
+    let elementsInOrder = 0;
+    while (elementsInOrder < container.children.length && elementsInOrder < stickyArr.length) {
+      if (container.children[elementsInOrder] === stickyArr[elementsInOrder].content) {
+        ++elementsInOrder;
+      } else {
+        break;
+      }
+    }
+    // Remove elements that is not in order if exist.
+    for (let i = container.children.length - 1; i >= elementsInOrder; --i) {
+      container.removeChild(container.children[i]);
+    }
+    // Append further elements if needed.
+    for (let i = elementsInOrder; i < stickyArr.length; ++i) {
+      container.appendChild(stickyArr[i].content);
+    }
+  }
+
+  private _calculateOffsetParent(ele: HTMLElement): number {
+    let offset = 0;
+    while (ele.offsetParent !== this.root.offsetParent) {
+      offset += ele.offsetTop;
+      if (ele.parentElement) {
+        ele = ele.parentElement;
+      }
+    }
+    return offset;
+  }
+}
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.scss b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.scss
index 43cc1c7576648..51378c8ce9e20 100644
--- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.scss
+++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.scss
@@ -7,12 +7,6 @@
   -webkit-overflow-scrolling: touch;
 }
 
-.stickyContainer {
-  overflow: hidden;
-  position: absolute;
-  pointer-events: none;
-}
-
 .stickyAbove,
 .stickyBelow {
   position: absolute;
@@ -35,4 +29,4 @@
   @include high-contrast {
     border-top: 1px solid WindowText;
   }
-}
\ No newline at end of file
+}
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts
new file mode 100644
index 0000000000000..b89f518d1728c
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.styles.ts
@@ -0,0 +1,53 @@
+import { IScrollablePaneStyleProps, IScrollablePaneStyles } from './ScrollablePane.types';
+import {
+  HighContrastSelector,
+  IStyle
+} from '../../Styling';
+
+export const getStyles = (
+  props: IScrollablePaneStyleProps
+): IScrollablePaneStyles => {
+  const { className } = props;
+
+  const AboveAndBelowStyles: IStyle = {
+    position: 'absolute',
+    pointerEvents: 'auto',
+    width: '100%',
+    zIndex: 1
+  };
+
+  return ({
+    root: [
+      'ms-ScrollablePane',
+      {
+        overflowY: 'auto',
+        maxHeight: 'inherit',
+        height: 'inherit',
+        WebkitOverflowScrolling: 'touch'
+      },
+      className
+    ],
+    stickyAbove: [
+      {
+        top: 0,
+        selectors: {
+          [HighContrastSelector]: {
+            borderBottom: '1px solid WindowText'
+          }
+        }
+      },
+      AboveAndBelowStyles
+    ],
+    stickyBelow: [
+      {
+        bottom: 0,
+        selectors: {
+          [HighContrastSelector]: {
+            borderTop: '1px solid WindowText'
+          }
+        }
+      },
+      AboveAndBelowStyles
+    ]
+  });
+};
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.tsx b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.tsx
index 5641de3d0b3a0..89350f8afb7e4 100644
--- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.tsx
+++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.tsx
@@ -1,234 +1,13 @@
-/* tslint:disable:no-unused-variable */
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-/* tslint:enable:no-unused-variable */
-import * as PropTypes from 'prop-types';
+import { styled } from '../../Utilities';
 import {
-  autobind,
-  BaseComponent,
-  css
-} from '../../Utilities';
-import { IScrollablePane, IScrollablePaneProps } from './ScrollablePane.types';
-import { Sticky } from '../../Sticky';
-import * as stylesImport from './ScrollablePane.scss';
-const styles: any = stylesImport;
-
-export interface IScrollablePaneContext {
-  scrollablePane: PropTypes.Requireable<object>;
-}
-
-export class ScrollablePane extends BaseComponent<IScrollablePaneProps, {}> implements IScrollablePane {
-  public static childContextTypes: IScrollablePaneContext = {
-    scrollablePane: PropTypes.object
-  };
-
-  public refs: {
-    root: HTMLElement;
-    stickyContainer: HTMLElement;
-    stickyAbove: HTMLElement;
-    stickyBelow: HTMLElement;
-  };
-
-  private _subscribers: Set<Function>;
-  private _stickyAbove: Set<Sticky>;
-  private _stickyBelow: Set<Sticky>;
-
-  constructor(props: IScrollablePaneProps) {
-    super(props);
-    this._subscribers = new Set<Function>();
-    this._stickyAbove = new Set<Sticky>();
-    this._stickyBelow = new Set<Sticky>();
-  }
-
-  public getChildContext() {
-    return {
-      scrollablePane: {
-        subscribe: this.subscribe,
-        unsubscribe: this.unsubscribe,
-        addStickyHeader: this.addStickyHeader,
-        removeStickyHeader: this.removeStickyHeader,
-        addStickyFooter: this.addStickyFooter,
-        removeStickyFooter: this.removeStickyFooter,
-        notifySubscribers: this.notifySubscribers
-      }
-    };
-  }
-
-  public componentDidMount() {
-    const { root, stickyContainer } = this.refs;
-
-    this._events.on(root, 'scroll', this.notifySubscribers);
-    this._events.on(window, 'resize', this._onWindowResize);
-    setTimeout(() => {
-      this._resizeContainer();
-      if (stickyContainer.parentElement && root.parentElement) {
-        stickyContainer.parentElement.removeChild(stickyContainer);
-        root.parentElement.insertBefore(stickyContainer, root.nextSibling);
-        this.notifySubscribers();
-      }
-    }, 500);
-  }
-
-  public componentWillUnmount() {
-    const { stickyContainer } = this.refs;
-    this._events.off(this.refs.root);
-    this._events.off(window);
-    if (stickyContainer.parentElement) {
-      stickyContainer.parentElement.removeChild(stickyContainer);
-    }
-  }
-
-  public render() {
-    const { className } = this.props;
-
-    return (
-      <div
-        ref='root'
-        className={ css('ms-ScrollablePane', styles.root, className) }
-        data-is-scrollable={ true }
-      >
-        <div ref='stickyContainer' className={ styles.stickyContainer }>
-          <div ref='stickyAbove' className={ styles.stickyAbove } />
-          <div ref='stickyBelow' className={ styles.stickyBelow } />
-        </div>
-        { this.props.children }
-      </div>
-    );
-  }
-
-  public forceLayoutUpdate() {
-    this._onWindowResize();
-  }
-
-  @autobind
-  public subscribe(handler: (headerBound: ClientRect, footerBound: ClientRect) => void) {
-    this._subscribers.add(handler);
-  }
-
-  @autobind
-  public unsubscribe(handler: (headerBound: ClientRect, footerBound: ClientRect) => void) {
-    this._subscribers.delete(handler);
-  }
-
-  @autobind
-  public addStickyHeader(sticky: Sticky) {
-    const { stickyAbove } = this.refs;
-    this._addSticky(sticky, this._stickyAbove, stickyAbove, () => {
-      stickyAbove.appendChild(sticky.content);
-    });
-  }
-
-  @autobind
-  public addStickyFooter(sticky: Sticky) {
-    const { stickyBelow } = this.refs;
-    this._addSticky(sticky, this._stickyBelow, stickyBelow, () => {
-      stickyBelow.insertBefore(sticky.content, stickyBelow.firstChild);
-    });
-  }
-
-  @autobind
-  public removeStickyHeader(sticky: Sticky) {
-    this._removeSticky(sticky, this._stickyAbove, this.refs.stickyAbove);
-  }
-
-  @autobind
-  public removeStickyFooter(sticky: Sticky) {
-    this._removeSticky(sticky, this._stickyBelow, this.refs.stickyBelow);
-  }
-
-  @autobind
-  public notifySubscribers(sort?: boolean): void {
-    const { stickyAbove, stickyBelow } = this.refs;
-    this._subscribers.forEach((handle) => {
-      handle(stickyAbove.getBoundingClientRect(), stickyBelow.getBoundingClientRect());
-    });
-    if (this._stickyAbove.size > 1) {
-      this._sortStickies(this._stickyAbove, stickyAbove);
-    }
-    if (this._stickyBelow.size > 1) {
-      this._sortStickies(this._stickyBelow, stickyBelow);
-    }
-  }
-
-  private _addSticky(sticky: Sticky, stickyList: Set<Sticky>, container: HTMLElement, addStickyToContainer: () => void) {
-    if (!stickyList.has(sticky)) {
-      stickyList.add(sticky);
-      addStickyToContainer();
-      sticky.content.addEventListener('transitionend',
-        this._setPlaceholderHeights.bind(null, stickyList),
-        false);
-      if (sticky.props.stickyClassName) {
-        setTimeout(() => {
-          if (sticky.props.stickyClassName) {
-            sticky.content.children[0].classList.add(sticky.props.stickyClassName);
-          }
-        }, 1);
-      }
-      this.notifySubscribers();
-      this._setPlaceholderHeights(stickyList);
-    }
-  }
-
-  private _removeSticky(sticky: Sticky, stickyList: Set<Sticky>, container: HTMLElement) {
-    if (stickyList.has(sticky)) {
-      sticky.content.removeEventListener('transitionend',
-        this._setPlaceholderHeights.bind(null, stickyList, container));
-      stickyList.delete(sticky);
-    }
-  }
-
-  private _onWindowResize() {
-    setTimeout(() => {
-      this._resizeContainer();
-      this.notifySubscribers();
-      this._setPlaceholderHeights(this._stickyAbove);
-      this._setPlaceholderHeights(this._stickyBelow);
-    }, 5);
-  }
-
-  private _resizeContainer() {
-    const { stickyContainer, root } = this.refs;
-    const { borderTopWidth, borderLeftWidth } = getComputedStyle(root);
-    stickyContainer.style.height = root.clientHeight + 'px';
-    stickyContainer.style.width = root.clientWidth + 'px';
-    if (borderTopWidth) {
-      stickyContainer.style.top = root.offsetTop + parseInt(borderTopWidth, 10) + 'px';
-    }
-    if (borderLeftWidth) {
-      stickyContainer.style.left = root.offsetLeft + parseInt(borderLeftWidth, 10) + 'px';
-    }
-  }
-
-  @autobind
-  private _setPlaceholderHeights(stickies: Set<Sticky>) {
-    stickies.forEach((sticky, idx) => {
-      sticky.setPlaceholderHeight(sticky.content.clientHeight);
-    });
-  }
-
-  private _sortStickies(stickyList: Set<Sticky>, container: HTMLElement): void {
-    let stickyArr = Array.from(stickyList);
-    stickyArr = stickyArr.sort((a, b) => {
-      const aOffset = this._calculateOffsetParent(a.refs.root);
-      const bOffset = this._calculateOffsetParent(b.refs.root);
-      return aOffset - bOffset;
-    });
-    while (container.lastChild) {
-      container.removeChild(container.lastChild);
-    }
-    stickyArr.forEach((sticky) => {
-      container.appendChild(sticky.content);
-    });
-  }
-
-  private _calculateOffsetParent(ele: HTMLElement): number {
-    let offset = 0;
-    while (ele.offsetParent !== this.refs.root.offsetParent) {
-      offset += ele.offsetTop;
-      if (ele.parentElement) {
-        ele = ele.parentElement;
-      }
-    }
-    return offset;
-  }
-}
\ No newline at end of file
+  IScrollablePaneProps,
+  IScrollablePaneStyleProps,
+  IScrollablePaneStyles
+} from './ScrollablePane.types';
+import { ScrollablePaneBase } from './ScrollablePane.base';
+import { getStyles } from './ScrollablePane.styles';
+
+export const ScrollablePane = styled<IScrollablePaneProps, IScrollablePaneStyleProps, IScrollablePaneStyles>(
+  ScrollablePaneBase,
+  getStyles
+);
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.types.ts b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.types.ts
index c55e41bd2d365..b1b432bb068ff 100644
--- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.types.ts
+++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.types.ts
@@ -1,12 +1,17 @@
 import * as React from 'react';
-import { ScrollablePane } from './ScrollablePane';
+import { ScrollablePaneBase } from './ScrollablePane.base';
+import { IStyle, ITheme } from '../../Styling';
+import { IStyleFunction } from '../../Utilities';
 
 export interface IScrollablePane {
   /** Triggers a layout update for the pane. */
   forceLayoutUpdate(): void;
+  /** Gets the current scroll position of the scrollable pane */
+  getScrollPosition(): number;
 }
 
-export interface IScrollablePaneProps extends React.HTMLAttributes<HTMLElement | ScrollablePane> {
+export interface IScrollablePaneProps extends React.HTMLAttributes<HTMLElement | ScrollablePaneBase> {
+  // export interface IScrollablePaneProps extends React.Props<ScrollablePaneBase> {
   /**
    * Optional callback to access the IScrollablePane interface. Use this instead of ref for accessing
    * the public methods and properties of the component.
@@ -14,7 +19,53 @@ export interface IScrollablePaneProps extends React.HTMLAttributes<HTMLElement |
   componentRef?: (component: IScrollablePane) => void;
 
   /**
-   * Class name to apply to the root in addition to ms-ScrollablePane.
-  */
+   * Call to provide customized styling that will layer on top of the variant rules
+   */
+  getStyles?: IStyleFunction<IScrollablePaneStyleProps, IScrollablePaneStyles>;
+
+  /**
+   * Theme provided by HOC.
+   */
+  theme?: ITheme;
+
+  /**
+   * Additional css class to apply to the ScrollablePane
+   * @defaultvalue undefined
+   */
   className?: string;
-}
\ No newline at end of file
+
+  /**
+   * Sets the initial scroll position of the ScrollablePane
+   */
+  initialScrollPosition?: number;
+}
+
+export interface IScrollablePaneStyleProps {
+  /**
+   * Accept theme prop.
+   */
+  theme: ITheme;
+
+  /**
+   * Accept custom classNames
+   */
+  className?: string;
+
+  // Insert ScrollablePane style props below
+
+}
+
+export interface IScrollablePaneStyles {
+  /**
+   * Style set for the root element.
+   */
+  root: IStyle;
+  /**
+   * Style set for the stickyAbove element.
+   */
+  stickyAbove: IStyle;
+  /**
+   * Style set for the stickyAbove element.
+   */
+  stickyBelow: IStyle;
+}
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePanePage.tsx b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePanePage.tsx
index badfb5bbd4124..6029411f7fbc1 100644
--- a/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePanePage.tsx
+++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/ScrollablePanePage.tsx
@@ -9,6 +9,7 @@ import { ScrollablePaneDefaultExample } from './examples/ScrollablePane.Default.
 import { ScrollablePaneDetailsListExample } from './examples/ScrollablePane.DetailsList.Example';
 import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
 import { ScrollablePaneStatus } from './ScrollablePane.checklist';
+import { MessageBar } from '../../MessageBar';
 
 const ScrollablePaneDefaultExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/ScrollablePane/examples/ScrollablePane.Default.Example.tsx') as string;
 
@@ -30,13 +31,17 @@ export class ScrollablePanePage extends React.Component<IComponentDemoPageProps,
             </ExampleCard>
           </div>
         }
+        allowNativeProps={ true }
+        nativePropsElement={ ['a', 'button'] }
         propertiesTables={
-          <PropertiesTableSet
-            sources={ [
-              require<string>('!raw-loader!office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.types.ts'),
-              require<string>('!raw-loader!office-ui-fabric-react/src/components/Sticky/Sticky.types.ts')
-            ] }
-          />
+          <div>
+            <PropertiesTableSet
+              sources={ [
+                require<string>('!raw-loader!office-ui-fabric-react/src/components/ScrollablePane/ScrollablePane.types.ts'),
+                require<string>('!raw-loader!office-ui-fabric-react/src/components/Sticky/Sticky.types.ts')
+              ] }
+            />
+          </div>
         }
         overview={
           <div>
@@ -67,7 +72,7 @@ export class ScrollablePanePage extends React.Component<IComponentDemoPageProps,
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...ScrollablePaneStatus}
+            { ...ScrollablePaneStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/examples/ScrollablePane.Default.Example.tsx b/packages/office-ui-fabric-react/src/components/ScrollablePane/examples/ScrollablePane.Default.Example.tsx
index 2d5df4ba126d1..f2ca794437da9 100644
--- a/packages/office-ui-fabric-react/src/components/ScrollablePane/examples/ScrollablePane.Default.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/examples/ScrollablePane.Default.Example.tsx
@@ -7,7 +7,7 @@ import './ScrollablePane.Example.scss';
 export class ScrollablePaneDefaultExample extends React.Component {
 
   public render() {
-    let contentAreas: JSX.Element[] = [];
+    const contentAreas: JSX.Element[] = [];
     for (let i = 0; i < 4; i++) {
       contentAreas.push(this._createContentArea(i));
     }
@@ -22,7 +22,7 @@ export class ScrollablePaneDefaultExample extends React.Component {
   }
 
   private _getRandomColor() {
-    let letters = 'BCDEF'.split('');
+    const letters = 'BCDEF'.split('');
     let color = '#';
     for (let i = 0; i < 6; i++) {
       color += letters[Math.floor(Math.random() * letters.length)];
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/examples/ScrollablePane.DetailsList.Example.tsx b/packages/office-ui-fabric-react/src/components/ScrollablePane/examples/ScrollablePane.DetailsList.Example.tsx
index cf360d711d8ae..d03049bf316b0 100644
--- a/packages/office-ui-fabric-react/src/components/ScrollablePane/examples/ScrollablePane.DetailsList.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/examples/ScrollablePane.DetailsList.Example.tsx
@@ -24,13 +24,13 @@ import {
 } from 'office-ui-fabric-react/lib/Sticky';
 import { MarqueeSelection } from 'office-ui-fabric-react/lib/MarqueeSelection';
 
-let _items: {
+const _items: {
   key: number,
   name: string,
   value: number
 }[] = [];
 
-let _columns: IColumn[] = [
+const _columns: IColumn[] = [
   {
     key: 'column1',
     name: 'Name',
@@ -82,7 +82,7 @@ export class ScrollablePaneDetailsListExample extends React.Component<{}, {
   }
 
   public render() {
-    let { items, selectionDetails } = this.state;
+    const { items, selectionDetails } = this.state;
 
     return (
       <ScrollablePane>
@@ -124,7 +124,7 @@ export class ScrollablePaneDetailsListExample extends React.Component<{}, {
   }
 
   private _getSelectionDetails(): string {
-    let selectionCount = this._selection.getSelectedCount();
+    const selectionCount = this._selection.getSelectedCount();
 
     switch (selectionCount) {
       case 0:
diff --git a/packages/office-ui-fabric-react/src/components/ScrollablePane/index.ts b/packages/office-ui-fabric-react/src/components/ScrollablePane/index.ts
index cbbef7d04f0e7..de05800a56cc2 100644
--- a/packages/office-ui-fabric-react/src/components/ScrollablePane/index.ts
+++ b/packages/office-ui-fabric-react/src/components/ScrollablePane/index.ts
@@ -1,2 +1,3 @@
 export * from './ScrollablePane';
+export * from './ScrollablePane.base';
 export * from './ScrollablePane.types';
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx
index 956f56893e608..51fbeb97f084a 100644
--- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.base.tsx
@@ -3,7 +3,6 @@ import { ISearchBoxProps, ISearchBoxStyleProps, ISearchBoxStyles } from './Searc
 import {
   BaseComponent,
   autobind,
-  css,
   getId,
   KeyCodes,
   customizable,
@@ -13,8 +12,6 @@ import {
 import { IconButton } from '../../Button';
 import { Icon } from '../../Icon';
 
-import { FocusZone } from '../../FocusZone';
-
 const getClassNames = classNamesFunction<ISearchBoxStyleProps, ISearchBoxStyles>();
 
 export interface ISearchBoxState {
@@ -25,10 +22,6 @@ export interface ISearchBoxState {
 
 @customizable('SearchBox', ['theme'])
 export class SearchBoxBase extends BaseComponent<ISearchBoxProps, ISearchBoxState> {
-  public static defaultProps: ISearchBoxProps = {
-    labelText: 'Search',
-  };
-
   private _rootElement: HTMLElement;
   private _inputElement: HTMLInputElement;
   private _latestValue: string;
@@ -36,6 +29,10 @@ export class SearchBoxBase extends BaseComponent<ISearchBoxProps, ISearchBoxStat
   public constructor(props: ISearchBoxProps) {
     super(props);
 
+    this._warnDeprecations({
+      'labelText': 'placeholder'
+    });
+
     this._latestValue = props.value || '';
 
     this.state = {
@@ -55,8 +52,19 @@ export class SearchBoxBase extends BaseComponent<ISearchBoxProps, ISearchBoxStat
   }
 
   public render() {
-    let { labelText, className, disabled, underlined, getStyles, theme } = this.props;
-    let { value, hasFocus, id } = this.state;
+    const {
+      ariaLabel,
+      placeholder,
+      className,
+      disabled,
+      underlined,
+      getStyles,
+      labelText,
+      theme,
+      clearButtonProps
+    } = this.props;
+    const { value, hasFocus, id } = this.state;
+    const placeholderValue = labelText === undefined ? placeholder : labelText;
 
     const classNames = getClassNames(getStyles!, {
       theme: theme!,
@@ -79,18 +87,23 @@ export class SearchBoxBase extends BaseComponent<ISearchBoxProps, ISearchBoxStat
         <input
           id={ id }
           className={ classNames.field }
-          placeholder={ labelText }
+          placeholder={ placeholderValue }
           onChange={ this._onInputChange }
           onInput={ this._onInputChange }
           onKeyDown={ this._onKeyDown }
           value={ value }
           disabled={ this.props.disabled }
-          aria-label={ this.props.ariaLabel ? this.props.ariaLabel : this.props.labelText }
+          aria-label={ ariaLabel ? ariaLabel : placeholder }
           ref={ this._resolveRef('_inputElement') }
         />
         { value!.length > 0 &&
           <div className={ classNames.clearButton }>
-            <IconButton styles={ { root: { height: 'auto' }, icon: { fontSize: '12px' } } } onClick={ this._onClearClick } iconProps={ { iconName: 'Clear' } } />
+            <IconButton
+              styles={ { root: { height: 'auto' }, icon: { fontSize: '12px' } } }
+              iconProps={ { iconName: 'Clear' } }
+              { ...clearButtonProps }
+              onClick={ this._onClearClick }
+            />
           </div>
         }
       </div>
@@ -136,7 +149,15 @@ export class SearchBoxBase extends BaseComponent<ISearchBoxProps, ISearchBoxStat
 
   @autobind
   private _onClearClick(ev: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>) {
-    this._onClear(ev);
+    const { clearButtonProps } = this.props;
+
+    if (clearButtonProps && clearButtonProps.onClick) {
+      clearButtonProps.onClick(ev);
+    }
+
+    if (!ev.defaultPrevented) {
+      this._onClear(ev);
+    }
   }
 
   @autobind
@@ -184,7 +205,8 @@ export class SearchBoxBase extends BaseComponent<ISearchBoxProps, ISearchBoxStat
 
   @autobind
   private _onInputChange(ev: React.ChangeEvent<HTMLInputElement>) {
-    const value = this._inputElement.value;
+    const value = ev.target.value;
+
     if (value === this._latestValue) {
       return;
     }
@@ -195,7 +217,7 @@ export class SearchBoxBase extends BaseComponent<ISearchBoxProps, ISearchBoxStat
   }
 
   private _callOnChange(newValue: string): void {
-    let { onChange, onChanged } = this.props;
+    const { onChange, onChanged } = this.props;
 
     // Call @deprecated method.
     if (onChanged) {
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx
index 440765ee9d6ab..0a26b34ca8be1 100644
--- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.styles.tsx
@@ -1,13 +1,9 @@
 import {
-  FontSizes,
   HighContrastSelector,
-  ScreenWidthMaxMedium,
-  ScreenWidthMaxSmall,
   AnimationVariables,
   normalize
 } from '../../Styling';
-import { SearchBoxBase } from './SearchBox.base';
-import { ISearchBoxProps, ISearchBoxStyleProps, ISearchBoxStyles } from './SearchBox.types';
+import { ISearchBoxStyleProps, ISearchBoxStyles } from './SearchBox.types';
 
 export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles {
   const { theme, underlined, disabled, hasFocus, className, hasInput } = props;
@@ -33,12 +29,9 @@ export function getStyles(props: ISearchBoxStyleProps): ISearchBoxStyles {
           },
           ':hover': {
             borderColor: palette.neutralDark,
-            $label: {
-              color: palette.black,
-              $iconContainer: {
-                color: palette.themeDark
-              }
-            }
+          },
+          ':hover $iconContainer': {
+            color: palette.themeDark
           }
         }
       },
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.test.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.test.tsx
index cf002263cafea..e3ceb42150d54 100644
--- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.test.tsx
@@ -1,15 +1,38 @@
-import { Promise } from 'es6-promise';
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
-import * as ReactTestUtils from 'react-dom/test-utils';
 import * as renderer from 'react-test-renderer';
+import { mount } from 'enzyme';
 import { SearchBox } from './SearchBox';
 
+// tslint:disable:jsx-no-lambda
+
 describe('SearchBox', () => {
 
   it('renders SearchBox correctly', () => {
     const component = renderer.create(<SearchBox />);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
+
+  it('can execute an onClick on clear button', () => {
+    let clickExecuted = false;
+    const component = mount(
+      <SearchBox
+        clearButtonProps={ {
+          onClick: () => clickExecuted = true
+        } }
+      />
+    );
+
+    expect(component.find('input').prop('value')).toEqual('');
+
+    component.find('input').simulate('change', { target: { value: 'New value' } });
+
+    expect(component.find('input').prop('value')).toEqual('New value');
+
+    component.find('button').simulate('click');
+
+    expect(clickExecuted).toEqual(true);
+
+    expect(component.find('input').prop('value')).toEqual('');
+  });
 });
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx
index 45ac52526fb2e..9aa88d92d513e 100644
--- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.tsx
@@ -1,5 +1,6 @@
 import { styled } from '../../Utilities';
 import { SearchBoxBase } from './SearchBox.base';
+// tslint:disable-next-line:no-unused-variable
 import { ISearchBoxProps } from './SearchBox.types';
 import { getStyles } from './SearchBox.styles';
 
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.types.ts b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.types.ts
index 41a04bb516b4a..3054f77998fad 100644
--- a/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.types.ts
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/SearchBox.types.ts
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { ITheme, IStyle } from '../../Styling';
 import { IStyleFunction } from '../../Utilities';
+import { IButtonProps } from '../Button';
 
 export interface ISearchBox {
   /**
@@ -17,8 +18,13 @@ export interface ISearchBoxProps extends React.InputHTMLAttributes<HTMLInputElem
   componentRef?: (component: ISearchBox) => void;
 
   /**
-  * Label text for the SearchBox.
-  * @default "Search"
+   * Placeholder for the search box.
+   */
+  placeholder?: string;
+
+  /**
+  * Deprecated. Use placeholder instead.
+  * @deprecated
   */
   labelText?: string;
 
@@ -49,10 +55,15 @@ export interface ISearchBoxProps extends React.InputHTMLAttributes<HTMLInputElem
   onChanged?: (newValue: any) => void;
 
   /**
-  * The value of the text in the SearchBox.
-  */
+   * The value of the text in the SearchBox.
+   */
   value?: string;
 
+  /**
+   * The default value of the text in the SearchBox, in the case of an uncontrolled component.
+   */
+  defaultValue?: string;
+
   /**
   * CSS class to apply to the SearchBox.
   */
@@ -60,10 +71,15 @@ export interface ISearchBoxProps extends React.InputHTMLAttributes<HTMLInputElem
 
   /**
    * The aria label of the SearchBox for the benefit of screen readers.
-   * @defaultvalue labelText
+   * @defaultvalue placeholder
    */
   ariaLabel?: string;
 
+  /**
+   * The props for the clear button.
+   */
+  clearButtonProps?: IButtonProps;
+
   /**
    * Whether or not the SearchBox is underlined.
    * @default false
@@ -78,7 +94,7 @@ export interface ISearchBoxProps extends React.InputHTMLAttributes<HTMLInputElem
   /**
    * Call to provide customized styling that will layer on top of the variant rules.
    */
-  getStyles?: IStyleFunction<ISearchBoxProps, ISearchBoxStyles>;
+  getStyles?: IStyleFunction<ISearchBoxStyleProps, ISearchBoxStyles>;
 }
 
 export interface ISearchBoxStyleProps {
@@ -96,4 +112,4 @@ export interface ISearchBoxStyles {
   icon?: IStyle;
   field?: IStyle;
   clearButton?: IStyle;
-}
\ No newline at end of file
+}
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap
index 13129de5ee23a..a440cb5d7a379 100644
--- a/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/__snapshots__/SearchBox.test.tsx.snap
@@ -15,7 +15,7 @@ exports[`SearchBox renders SearchBox correctly 1`] = `
         display: flex;
         flex-direction: row;
         flex-wrap: nowrap;
-        font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+        font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
         font-size: 14px;
         font-weight: 400;
         height: 32px;
@@ -32,9 +32,11 @@ exports[`SearchBox renders SearchBox correctly 1`] = `
         border: 1px solid WindowText;
       }
       &:hover {
-        $label: [object Object];
         border-color: #212121;
       }
+      &:hover $iconContainer {
+        color: #005a9e;
+      }
   onFocusCapture={[Function]}
 >
   <div
@@ -54,7 +56,6 @@ exports[`SearchBox renders SearchBox correctly 1`] = `
   >
     <i
       aria-hidden={true}
-      aria-label={undefined}
       className=
           ms-SearchBox-icon
           {
@@ -69,7 +70,7 @@ exports[`SearchBox renders SearchBox correctly 1`] = `
     />
   </div>
   <input
-    aria-label="Search"
+    aria-label={undefined}
     className=
         ms-SearchBox-field
         {
@@ -109,7 +110,7 @@ exports[`SearchBox renders SearchBox correctly 1`] = `
     onChange={[Function]}
     onInput={[Function]}
     onKeyDown={[Function]}
-    placeholder="Search"
+    placeholder={undefined}
     value=""
   />
 </div>
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Disabled.Example.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Disabled.Example.tsx
index c37fd61d5e401..0bc20e5cd2df6 100644
--- a/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Disabled.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Disabled.Example.tsx
@@ -9,12 +9,14 @@ export class SearchBoxDisabledExample extends React.Component<any, any> {
     return (
       <div className='ms-SearchBoxExample'>
         <SearchBox
+          placeholder='Search'
           onFocus={ () => console.log('onFocus called') }
           onBlur={ () => console.log('onBlur called') }
           disabled
         />
 
         <SearchBox
+          placeholder='Search'
           onFocus={ () => console.log('onFocus called') }
           onBlur={ () => console.log('onBlur called') }
           underlined={ true }
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.FullSize.Example.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.FullSize.Example.tsx
index 8e044a01cc86b..1d4683d080eba 100644
--- a/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.FullSize.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.FullSize.Example.tsx
@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { SearchBox } from 'office-ui-fabric-react/lib/SearchBox';
 
+// tslint:disable:jsx-no-lambda
+
 export class SearchBoxFullSizeExample extends React.Component<any, any> {
   public render() {
     return (
       <SearchBox
-        // tslint:disable:jsx-no-lambda
+        placeholder='Search'
         onFocus={ () => console.log('onFocus called') }
         onBlur={ () => console.log('onBlur called') }
         onChange={ () => console.log('onChange called') }
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Small.Example.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Small.Example.tsx
index 94c75240b32e9..c979689353ff0 100644
--- a/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Small.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Small.Example.tsx
@@ -10,6 +10,7 @@ export class SearchBoxSmallExample extends React.Component<any, any> {
     return (
       <div className='ms-SearchBoxSmallExample'>
         <SearchBox
+          placeholder='Search'
           onEscape={ (ev) => {
             console.log('Custom onEscape Called');
           } }
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Underlined.Example.tsx b/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Underlined.Example.tsx
index 25c1d9c6368de..45a9a321d4f04 100644
--- a/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Underlined.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/examples/SearchBox.Underlined.Example.tsx
@@ -7,6 +7,7 @@ export class SearchBoxUnderlinedExample extends React.Component<any, any> {
   public render() {
     return (
       <SearchBox
+        placeholder='Search'
         onFocus={ () => console.log('onFocus called') }
         onBlur={ () => console.log('onBlur called') }
         underlined={ true }
diff --git a/packages/office-ui-fabric-react/src/components/SearchBox/index.ts b/packages/office-ui-fabric-react/src/components/SearchBox/index.ts
index 47af0244f9f49..4f122e6c354ff 100644
--- a/packages/office-ui-fabric-react/src/components/SearchBox/index.ts
+++ b/packages/office-ui-fabric-react/src/components/SearchBox/index.ts
@@ -1,2 +1,3 @@
 export * from './SearchBox';
+export * from './SearchBox.base';
 export * from './SearchBox.types';
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Slider/Slider.test.tsx b/packages/office-ui-fabric-react/src/components/Slider/Slider.test.tsx
index e5969c31c6c9e..147ad56e7e29e 100644
--- a/packages/office-ui-fabric-react/src/components/Slider/Slider.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Slider/Slider.test.tsx
@@ -13,34 +13,34 @@ describe('Slider', () => {
 
   it('renders Slider correctly', () => {
     const component = renderer.create(<Slider />);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders a slider', () => {
-    let component = ReactTestUtils.renderIntoDocument(
+    const component = ReactTestUtils.renderIntoDocument(
       <Slider label='slider' />
     );
-    let renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
-    let labelElement = renderedDOM.querySelector('.ms-Label') as HTMLElement;
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const labelElement = renderedDOM.querySelector('.ms-Label') as HTMLElement;
 
     expect(labelElement.textContent).toEqual('slider');
   });
 
   it('can slide to default min/max and execute onChange', () => {
     let changedValue;
-    let onChange = (val: any) => {
+    const onChange = (val: any) => {
       changedValue = val;
     };
-    let component = ReactTestUtils.renderIntoDocument<React.ReactInstance>(
+    const component = ReactTestUtils.renderIntoDocument<React.ReactInstance>(
       <Slider
         onChange={ onChange }
       />
     );
 
-    let renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
-    let sliderLine = renderedDOM.querySelector('.ms-Slider-line') as HTMLElement;
-    let sliderThumb = renderedDOM.querySelector('.ms-Slider-slideBox') as HTMLElement;
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const sliderLine = renderedDOM.querySelector('.ms-Slider-line') as HTMLElement;
+    const sliderThumb = renderedDOM.querySelector('.ms-Slider-slideBox') as HTMLElement;
 
     sliderLine.getBoundingClientRect = () => ({
       left: 0,
@@ -71,15 +71,15 @@ describe('Slider', () => {
   });
 
   it('has type=button on all buttons', () => {
-    let component = ReactTestUtils.renderIntoDocument<React.ReactInstance>(
+    const component = ReactTestUtils.renderIntoDocument<React.ReactInstance>(
       <Slider />
     );
 
-    let renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
-    let allButtons = renderedDOM.querySelectorAll('button');
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const allButtons = renderedDOM.querySelectorAll('button');
 
     for (let i = 0; i < allButtons.length; i++) {
-      let button = allButtons[i];
+      const button = allButtons[i];
 
       expect(button.getAttribute('type')).toEqual('button');
     }
diff --git a/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx b/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx
index afde5e2399d8c..b4303db6412e4 100644
--- a/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx
+++ b/packages/office-ui-fabric-react/src/components/Slider/Slider.tsx
@@ -34,13 +34,8 @@ export class Slider extends BaseComponent<ISliderProps, ISliderState> implements
     buttonProps: {}
   };
 
-  public refs: {
-    [key: string]: React.ReactInstance,
-    root: HTMLElement,
-    sliderLine: HTMLElement,
-    thumb: HTMLElement
-  };
-
+  private _sliderLine: HTMLDivElement;
+  private _thumb: HTMLSpanElement;
   private _id: string;
 
   constructor(props: ISliderProps) {
@@ -52,7 +47,7 @@ export class Slider extends BaseComponent<ISliderProps, ISliderState> implements
 
     this._id = getId('Slider');
 
-    let value = props.value || props.defaultValue || props.min;
+    const value = props.value || props.defaultValue || props.min;
 
     this.state = {
       value: value,
@@ -66,7 +61,7 @@ export class Slider extends BaseComponent<ISliderProps, ISliderState> implements
   public componentWillReceiveProps(newProps: ISliderProps): void {
 
     if (newProps.value !== undefined) {
-      let value = Math.max(newProps.min as number, Math.min(newProps.max as number, newProps.value));
+      const value = Math.max(newProps.min as number, Math.min(newProps.max as number, newProps.value));
 
       this.setState({
         value: value,
@@ -102,7 +97,6 @@ export class Slider extends BaseComponent<ISliderProps, ISliderState> implements
           ['ms-Slider-row ' + styles.rootIsHorizontal]: !vertical,
           ['ms-Slider-column ' + styles.rootIsVertical]: vertical
         }) }
-        ref='root'
       >
         { label && (
           <Label className={ styles.titleLabel } { ...ariaLabel ? {} : { 'htmlFor': this._id } }>
@@ -133,11 +127,11 @@ export class Slider extends BaseComponent<ISliderProps, ISliderState> implements
             role='slider'
           >
             <div
-              ref='sliderLine'
+              ref={ this._resolveRef('_sliderLine') }
               className={ css('ms-Slider-line', styles.line) }
             >
               <span
-                ref='thumb'
+                ref={ this._resolveRef('_thumb') }
                 className={ css('ms-Slider-thumb', styles.thumb) }
                 style={ this._getThumbStyle(vertical, thumbOffsetPercent) }
               />
@@ -157,8 +151,8 @@ export class Slider extends BaseComponent<ISliderProps, ISliderState> implements
     ) as React.ReactElement<{}>;
   }
   public focus(): void {
-    if (this.refs.thumb) {
-      this.refs.thumb.focus();
+    if (this._thumb) {
+      this._thumb.focus();
     }
   }
 
@@ -174,7 +168,7 @@ export class Slider extends BaseComponent<ISliderProps, ISliderState> implements
   }
 
   private _getThumbStyle(vertical: boolean | undefined, thumbOffsetPercent: number): any {
-    let direction: string = vertical ? 'bottom' : (getRTL() ? 'right' : 'left');
+    const direction: string = vertical ? 'bottom' : (getRTL() ? 'right' : 'left');
     return {
       [direction]: thumbOffsetPercent + '%'
     };
@@ -196,18 +190,18 @@ export class Slider extends BaseComponent<ISliderProps, ISliderState> implements
   private _onMouseMoveOrTouchMove(event: MouseEvent | TouchEvent, suppressEventCancelation?: boolean): void {
     const { max, min, step } = this.props;
     const steps: number = (max! - min!) / step!;
-    const sliderPositionRect: ClientRect = this.refs.sliderLine.getBoundingClientRect();
+    const sliderPositionRect: ClientRect = this._sliderLine.getBoundingClientRect();
     const sliderLength: number = !this.props.vertical ? sliderPositionRect.width : sliderPositionRect.height;
     const stepLength: number = sliderLength / steps;
     let currentSteps: number | undefined;
     let distance: number | undefined;
 
     if (!this.props.vertical) {
-      let left: number | undefined = this._getPosition(event, this.props.vertical);
+      const left: number | undefined = this._getPosition(event, this.props.vertical);
       distance = getRTL() ? sliderPositionRect.right - left! : left! - sliderPositionRect.left;
       currentSteps = distance / stepLength;
     } else {
-      let bottom: number | undefined = this._getPosition(event, this.props.vertical);
+      const bottom: number | undefined = this._getPosition(event, this.props.vertical);
       distance = sliderPositionRect.bottom - bottom!;
       currentSteps = distance / stepLength;
     }
@@ -248,11 +242,11 @@ export class Slider extends BaseComponent<ISliderProps, ISliderState> implements
     return currentPosition;
   }
   private _updateValue(value: number, renderedValue: number) {
-    let interval: number = 1.0 / this.props.step!;
+    const interval: number = 1.0 / this.props.step!;
     // Make sure value has correct number of decimal places based on steps without JS's floating point issues
-    let roundedValue: number = Math.round(value * interval) / interval;
+    const roundedValue: number = Math.round(value * interval) / interval;
 
-    let valueChanged = roundedValue !== this.state.value;
+    const valueChanged = roundedValue !== this.state.value;
 
     this.setState({
       value: roundedValue,
@@ -310,5 +304,4 @@ export class Slider extends BaseComponent<ISliderProps, ISliderState> implements
     event.preventDefault();
     event.stopPropagation();
   }
-
 }
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.styles.ts b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.styles.ts
index 3bcf63e9f2a39..b1540d651c2ab 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.styles.ts
@@ -36,12 +36,16 @@ export const getArrowButtonStyles = memoizeFunction((
   customSpecificArrowStyles?: Partial<IButtonStyles>,
 ): IButtonStyles => {
 
-  const { palette } = theme;
+  const {
+    semanticColors
+  } = theme;
 
-  const ArrowButtonTextColor = palette.neutralPrimary;
-  const ArrowButtonTextColorPressed = palette.white;
-  const ArrowButtonBackgroundHovered = palette.neutralLight;
-  const ArrowButtonBackgroundPressed = palette.themePrimary;
+  const ArrowButtonTextColor = semanticColors.buttonText;
+  const ArrowButtonTextColorHovered = semanticColors.buttonTextHovered;
+  const ArrowButtonTextColorPressed = semanticColors.buttonTextChecked;
+
+  const ArrowButtonBackgroundHovered = semanticColors.buttonBackgroundHovered;
+  const ArrowButtonBackgroundPressed = semanticColors.buttonBackgroundChecked;
 
   const defaultArrowButtonStyles: IButtonStyles = {
     root: {
@@ -49,17 +53,15 @@ export const getArrowButtonStyles = memoizeFunction((
       display: 'block',
       height: '50%',
       width: '14px',
-      paddingTop: '0',
-      paddingRight: '0',
-      paddingBottom: '0',
-      paddingLeft: '0',
+      padding: '0',
       backgroundColor: 'transparent',
       textAlign: 'center',
       cursor: 'default',
       color: ArrowButtonTextColor
     },
     rootHovered: {
-      backgroundColor: ArrowButtonBackgroundHovered
+      backgroundColor: ArrowButtonBackgroundHovered,
+      color: ArrowButtonTextColorHovered
     },
     rootChecked: {
       backgroundColor: ArrowButtonBackgroundPressed,
@@ -119,14 +121,14 @@ export const getStyles = memoizeFunction((
   theme: ITheme,
   customStyles?: Partial<ISpinButtonStyles>
 ): ISpinButtonStyles => {
-  const { fonts, palette, semanticColors } = theme;
+  const { palette, semanticColors } = theme;
 
-  const SpinButtonRootBorderColor = palette.neutralTertiaryAlt;
-  const SpinButtonRootBorderColorHovered = palette.neutralSecondary;
-  const SpinButtonRootBorderColorFocused = palette.themePrimary;
+  const SpinButtonRootBorderColor = semanticColors.inputBorder;
+  const SpinButtonRootBorderColorHovered = semanticColors.inputBorderHovered;
+  const SpinButtonRootBorderColorFocused = semanticColors.inputFocusBorderAlt;
 
-  const SpinButtonTextColorDisabled = palette.neutralTertiaryAlt;
-  const SpinButtonInputTextColor = palette.neutralPrimary;
+  const SpinButtonTextColorDisabled = semanticColors.disabledText;
+  const SpinButtonInputTextColor = semanticColors.bodyText;
   const SpinButtonInputTextColorSelected = palette.white;
   const SpinButtonInputBackgroundColorSelected = palette.themePrimary;
 
@@ -137,11 +139,7 @@ export const getStyles = memoizeFunction((
       outline: 'none',
       fontSize: FontSizes.medium,
       width: '100%',
-      minWidth: '86px',
-      paddingTop: '2px',
-      paddingRight: '2px',
-      paddingBottom: '2px',
-      paddingLeft: '2px',
+      minWidth: '86px'
     },
     labelWrapper: {
       display: 'inline-flex'
@@ -161,11 +159,7 @@ export const getStyles = memoizeFunction((
       marginTop: '10px'
     },
     icon: {
-      paddingTop: '2px',
-      paddingRight: '5px',
-      paddingBottom: '2px',
-      paddingLeft: '5px',
-
+      padding: '2px 5px',
       fontSize: '20px'
     },
     iconDisabled: {
@@ -173,10 +167,7 @@ export const getStyles = memoizeFunction((
     },
     label: {
       pointerEvents: 'none',
-      paddingTop: '2px',
-      paddingRight: '0',
-      paddingBottom: '2px',
-      paddingLeft: '0',
+      padding: '2px 0',
     },
     labelDisabled: {
       cursor: 'default',
@@ -189,7 +180,8 @@ export const getStyles = memoizeFunction((
     },
     spinButtonWrapper: {
       display: 'flex',
-      height: '26px',
+      boxSizing: 'border-box',
+      height: '32px',
       minWidth: '86px',
       borderWidth: '1px',
       borderStyle: 'solid',
@@ -228,10 +220,7 @@ export const getStyles = memoizeFunction((
       fontSize: FontSizes.medium,
       color: SpinButtonInputTextColor,
       height: '100%',
-      paddingTop: '3px',
-      paddingRight: '3px',
-      paddingBottom: '4px',
-      paddingLeft: '4px',
+      padding: '0 12px',
       outline: '0',
       textOverflow: 'ellipsis',
       display: 'block',
@@ -261,10 +250,7 @@ export const getStyles = memoizeFunction((
       float: 'left',
       height: '100%',
       cursor: 'default',
-      paddingTop: '0',
-      paddingRight: '0',
-      paddingBottom: '0',
-      paddingLeft: '0',
+      padding: '0',
       boxSizing: 'border-box'
     },
     arrowButtonsContainerDisabled: _getDisabledStyles(theme),
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.test.tsx b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.test.tsx
index 095d02bb483f0..c7b3ee3d1763f 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.test.tsx
@@ -21,15 +21,15 @@ describe('SpinButton', () => {
 
   it('renders SpinButton correctly', () => {
     const component = renderer.create(<SpinButton label='label' />);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('should render a spinner with the default value on the input element', () => {
-    const exampleLabelValue: string = 'SpinButton';
-    const exampleMinValue: number = 2;
-    const exampleMaxValue: number = 22;
-    const exampleDefaultValue: string = '12';
+    const exampleLabelValue = 'SpinButton';
+    const exampleMinValue = 2;
+    const exampleMaxValue = 22;
+    const exampleDefaultValue = '12';
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <SpinButton
@@ -56,10 +56,10 @@ describe('SpinButton', () => {
   });
 
   it('should increment the value in the spin button via the up button', () => {
-    const exampleLabelValue: string = 'SpinButton';
-    const exampleMinValue: number = 2;
-    const exampleMaxValue: number = 22;
-    const exampleDefaultValue: string = '12';
+    const exampleLabelValue = 'SpinButton';
+    const exampleMinValue = 2;
+    const exampleMaxValue = 22;
+    const exampleDefaultValue = '12';
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <SpinButton
@@ -98,10 +98,10 @@ describe('SpinButton', () => {
   });
 
   it('should decrement the value in the spin button by the down button', () => {
-    const exampleLabelValue: string = 'SpinButton';
-    const exampleMinValue: number = 2;
-    const exampleMaxValue: number = 22;
-    const exampleDefaultValue: string = '12';
+    const exampleLabelValue = 'SpinButton';
+    const exampleMinValue = 2;
+    const exampleMaxValue = 22;
+    const exampleDefaultValue = '12';
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <SpinButton
@@ -140,10 +140,10 @@ describe('SpinButton', () => {
   });
 
   it('should increment the value in the spin button by the up arrow', () => {
-    const exampleLabelValue: string = 'SpinButton';
-    const exampleMinValue: number = 2;
-    const exampleMaxValue: number = 22;
-    const exampleDefaultValue: string = '12';
+    const exampleLabelValue = 'SpinButton';
+    const exampleMinValue = 2;
+    const exampleMaxValue = 22;
+    const exampleDefaultValue = '12';
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <SpinButton
@@ -175,10 +175,10 @@ describe('SpinButton', () => {
   });
 
   it('should decrement the value in the spin button by the down arrow', () => {
-    const exampleLabelValue: string = 'SpinButton';
-    const exampleMinValue: number = 2;
-    const exampleMaxValue: number = 22;
-    const exampleDefaultValue: string = '12';
+    const exampleLabelValue = 'SpinButton';
+    const exampleMinValue = 2;
+    const exampleMaxValue = 22;
+    const exampleDefaultValue = '12';
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <SpinButton
@@ -210,10 +210,10 @@ describe('SpinButton', () => {
   });
 
   it('should increment the value in the spin button by a step value of 2', () => {
-    const exampleLabelValue: string = 'SpinButton';
-    const exampleMinValue: number = 2;
-    const exampleMaxValue: number = 22;
-    const exampleDefaultValue: string = '12';
+    const exampleLabelValue = 'SpinButton';
+    const exampleMinValue = 2;
+    const exampleMaxValue = 22;
+    const exampleDefaultValue = '12';
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <SpinButton
@@ -246,10 +246,10 @@ describe('SpinButton', () => {
   });
 
   it('should decrement the value in the spin button by a step value of 2', () => {
-    const exampleLabelValue: string = 'SpinButton';
-    const exampleMinValue: number = 2;
-    const exampleMaxValue: number = 22;
-    const exampleDefaultValue: string = '12';
+    const exampleLabelValue = 'SpinButton';
+    const exampleMinValue = 2;
+    const exampleMaxValue = 22;
+    const exampleDefaultValue = '12';
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <SpinButton
@@ -282,11 +282,11 @@ describe('SpinButton', () => {
   });
 
   it('should set the value of the spin button by manual entry', () => {
-    const exampleLabelValue: string = 'SpinButton';
-    const exampleMinValue: number = 2;
-    const exampleMaxValue: number = 22;
-    const exampleDefaultValue: string = '12';
-    const exampleNewValue: string = '21';
+    const exampleLabelValue = 'SpinButton';
+    const exampleMinValue = 2;
+    const exampleMaxValue = 22;
+    const exampleDefaultValue = '12';
+    const exampleNewValue = '21';
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <SpinButton
@@ -309,11 +309,11 @@ describe('SpinButton', () => {
   });
 
   it('should reset the value of the spin button with invalid manual entry', () => {
-    const exampleLabelValue: string = 'SpinButton';
-    const exampleMinValue: number = 2;
-    const exampleMaxValue: number = 22;
-    const exampleDefaultValue: string = '12';
-    const exampleNewValue: string = 'garbage';
+    const exampleLabelValue = 'SpinButton';
+    const exampleMinValue = 2;
+    const exampleMaxValue = 22;
+    const exampleDefaultValue = '12';
+    const exampleNewValue = 'garbage';
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <SpinButton
@@ -336,11 +336,11 @@ describe('SpinButton', () => {
   });
 
   it('should revert to max value when input value is higher than the max of the spin button', () => {
-    const exampleLabelValue: string = 'SpinButton';
-    const exampleMinValue: number = 2;
-    const exampleMaxValue: number = 22;
-    const exampleDefaultValue: string = '12';
-    const exampleNewValue: string = '23';
+    const exampleLabelValue = 'SpinButton';
+    const exampleMinValue = 2;
+    const exampleMaxValue = 22;
+    const exampleDefaultValue = '12';
+    const exampleNewValue = '23';
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <SpinButton
@@ -363,11 +363,11 @@ describe('SpinButton', () => {
   });
 
   it('should revert existing value when input value is lower than the min of the spin button', () => {
-    const exampleLabelValue: string = 'SpinButton';
-    const exampleMinValue: number = 2;
-    const exampleMaxValue: number = 22;
-    const exampleDefaultValue: string = '12';
-    const exampleNewValue: string = '0';
+    const exampleLabelValue = 'SpinButton';
+    const exampleMinValue = 2;
+    const exampleMaxValue = 22;
+    const exampleDefaultValue = '12';
+    const exampleNewValue = '0';
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <SpinButton
@@ -390,12 +390,12 @@ describe('SpinButton', () => {
   });
 
   it('should use validator passed to the spin button (with valid input)', () => {
-    const errorMessage: string = 'The value is invalid';
-    const exampleLabelValue: string = 'SpinButton';
-    const exampleMinValue: number = 2;
-    const exampleMaxValue: number = 22;
-    const exampleDefaultValue: string = '12';
-    const exampleNewValue: string = '21';
+    const errorMessage = 'The value is invalid';
+    const exampleLabelValue = 'SpinButton';
+    const exampleMinValue = 2;
+    const exampleMaxValue = 22;
+    const exampleDefaultValue = '12';
+    const exampleNewValue = '21';
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <SpinButton
@@ -405,7 +405,7 @@ describe('SpinButton', () => {
         defaultValue={ exampleDefaultValue }
         // tslint:disable-next-line:jsx-no-lambda
         onValidate={ (newValue: string): string => {
-          let numberValue: number = +newValue;
+          const numberValue: number = +newValue;
           return (!isNaN(numberValue) && numberValue >= exampleMinValue && numberValue <= exampleMaxValue) ? newValue : errorMessage;
         } }
       />
@@ -423,12 +423,12 @@ describe('SpinButton', () => {
   });
 
   it('should use validator passed to the spin button', () => {
-    const errorMessage: string = 'The value is invalid';
-    const exampleLabelValue: string = 'SpinButton';
-    const exampleMinValue: number = 2;
-    const exampleMaxValue: number = 22;
-    const exampleDefaultValue: string = '12';
-    const exampleNewValue: string = '100';
+    const errorMessage = 'The value is invalid';
+    const exampleLabelValue = 'SpinButton';
+    const exampleMinValue = 2;
+    const exampleMaxValue = 22;
+    const exampleDefaultValue = '12';
+    const exampleNewValue = '100';
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <SpinButton
@@ -438,7 +438,7 @@ describe('SpinButton', () => {
         value={ exampleDefaultValue }
         // tslint:disable-next-line:jsx-no-lambda
         onValidate={ (newValue: string): string => {
-          let numberValue: number = Number(newValue);
+          const numberValue: number = Number(newValue);
           return (!isNaN(numberValue) && numberValue >= exampleMinValue && numberValue <= exampleMaxValue) ? newValue : errorMessage;
         } }
       />
@@ -456,11 +456,11 @@ describe('SpinButton', () => {
   });
 
   it('should have correct value after increment and using defaultValue', () => {
-    const exampleLabelValue: string = 'SpinButton';
-    const exampleMinValue: number = 2;
-    const exampleMaxValue: number = 22;
-    const exampleDefaultValue: string = '12';
-    const exampleStepValue: number = 2;
+    const exampleLabelValue = 'SpinButton';
+    const exampleMinValue = 2;
+    const exampleMaxValue = 22;
+    const exampleDefaultValue = '12';
+    const exampleStepValue = 2;
     const exampleNewValue: string = String(Number(exampleDefaultValue) + exampleStepValue);
 
     const renderedDOM: HTMLElement = renderIntoDocument(
@@ -486,11 +486,11 @@ describe('SpinButton', () => {
   });
 
   it('should have correct value after decrement and using defaultValue', () => {
-    const exampleLabelValue: string = 'SpinButton';
-    const exampleMinValue: number = 2;
-    const exampleMaxValue: number = 22;
-    const exampleDefaultValue: string = '12';
-    const exampleStepValue: number = 2;
+    const exampleLabelValue = 'SpinButton';
+    const exampleMinValue = 2;
+    const exampleMaxValue = 22;
+    const exampleDefaultValue = '12';
+    const exampleStepValue = 2;
     const exampleNewValue: string = String(Number(exampleDefaultValue) - exampleStepValue);
 
     const renderedDOM: HTMLElement = renderIntoDocument(
@@ -516,10 +516,10 @@ describe('SpinButton', () => {
   });
 
   it('should use min as defaultvalue if neither value nor defaultValue are passed', () => {
-    const exampleLabelValue: string = 'SpinButton';
-    const exampleMinValue: number = 2;
-    const exampleMaxValue: number = 22;
-    const exampleStepValue: number = 2;
+    const exampleLabelValue = 'SpinButton';
+    const exampleMinValue = 2;
+    const exampleMaxValue = 22;
+    const exampleStepValue = 2;
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <SpinButton
@@ -540,7 +540,7 @@ describe('SpinButton', () => {
   });
 
   it('should use 0 as defaultvalue if neither value, defaultValue nor min are passed', () => {
-    const exampleLabelValue: string = 'SpinButton';
+    const exampleLabelValue = 'SpinButton';
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <SpinButton
@@ -556,7 +556,7 @@ describe('SpinButton', () => {
   });
 
   it('should use the default onIncrement function when no value, defaultValue nor onIncrement function is passed', () => {
-    const exampleLabelValue: string = 'SpinButton';
+    const exampleLabelValue = 'SpinButton';
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <SpinButton
@@ -575,10 +575,10 @@ describe('SpinButton', () => {
   });
 
   it('should stop spinning if text field is focused while actively spinning', () => {
-    const exampleLabelValue: string = 'SpinButton';
-    const exampleMinValue: number = 2;
-    const exampleMaxValue: number = 22;
-    const exampleDefaultValue: string = '12';
+    const exampleLabelValue = 'SpinButton';
+    const exampleMinValue = 2;
+    const exampleMaxValue = 22;
+    const exampleDefaultValue = '12';
 
     function delay(millisecond: number): Promise<string> {
       return new Promise<string>((resolve) => setTimeout(resolve, millisecond));
@@ -608,13 +608,13 @@ describe('SpinButton', () => {
 
     delay(500).then(() => ReactTestUtils.Simulate.focus(inputDOM));
 
-    let currentValue = inputDOM.value;
+    const currentValue = inputDOM.value;
     expect(currentValue).not.toEqual('2');
     expect(inputDOM.getAttribute('aria-valuemin')).toEqual(String(exampleMinValue));
     expect(inputDOM.getAttribute('aria-valuemax')).toEqual(String(exampleMaxValue));
     expect(inputDOM.getAttribute('aria-valuenow')).toEqual(currentValue);
 
-    let newCurrentValue = inputDOM.value;
+    const newCurrentValue = inputDOM.value;
     expect(currentValue).toEqual(newCurrentValue);
   });
 
@@ -630,8 +630,6 @@ describe('SpinButton', () => {
       />
     );
 
-    // Assert on the input element.
-    const inputDOM: HTMLInputElement = renderedDOM.getElementsByTagName('input')[0];
     const buttonDOM: Element = renderedDOM.getElementsByClassName('ms-UpButton')[0];
 
     ReactTestUtils.Simulate.mouseDown(buttonDOM,
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx
index 5292a2e5b4b28..8057bb0474ef0 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.tsx
@@ -7,7 +7,9 @@ import {
   getId,
   KeyCodes,
   autobind,
-  customizable
+  customizable,
+  calculatePrecision,
+  precisionRound
 } from '../../Utilities';
 import {
   ISpinButton,
@@ -40,6 +42,11 @@ export interface ISpinButtonState {
    * as active when up/down arrow is pressed
    */
   keyboardSpinDirection: KeyboardSpinDirection;
+
+  /**
+   * The calculated precision for the value.
+   */
+  precision: number;
 }
 
 @customizable('SpinButton', ['theme'])
@@ -77,13 +84,17 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
       'value': 'defaultValue'
     });
 
-    let value = props.value || props.defaultValue || String(props.min) || '0';
+    const value = props.value || props.defaultValue || String(props.min) || '0';
     this._lastValidValue = value;
 
+    // Ensure that the autocalculated precision is not negative.
+    const precision = props.precision || Math.max(calculatePrecision(props.step!), 0);
+
     this.state = {
       isFocused: false,
       value: value,
-      keyboardSpinDirection: KeyboardSpinDirection.notSpinning
+      keyboardSpinDirection: KeyboardSpinDirection.notSpinning,
+      precision
     };
 
     this._currentStepFunctionHandle = -1;
@@ -113,7 +124,8 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
     }
 
     this.setState({
-      value: value
+      value: value,
+      precision: newProps.precision || this.state.precision
     });
   }
 
@@ -134,7 +146,9 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
       styles: customStyles,
       upArrowButtonStyles: customUpArrowButtonStyles,
       downArrowButtonStyles: customDownArrowButtonStyles,
-      theme
+      theme,
+      ariaPositionInSet,
+      ariaSetSize
     } = this.props;
 
     const {
@@ -143,13 +157,20 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
       keyboardSpinDirection
     } = this.state;
 
-    const classNames = getClassNames(
-      getStyles(theme!, customStyles),
-      !!disabled,
-      !!isFocused,
-      keyboardSpinDirection,
-      labelPosition
-    );
+    const classNames = this.props.getClassNames ?
+      this.props.getClassNames(
+        theme!,
+        !!disabled,
+        !!isFocused,
+        keyboardSpinDirection,
+        labelPosition
+      ) : getClassNames(
+        getStyles(theme!, customStyles),
+        !!disabled,
+        !!isFocused,
+        keyboardSpinDirection,
+        labelPosition
+      );
 
     return (
       <div className={ classNames.root }>
@@ -169,6 +190,8 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
           className={ classNames.spinButtonWrapper }
           title={ title && title }
           aria-label={ ariaLabel && ariaLabel }
+          aria-posinset={ ariaPositionInSet }
+          aria-setsize={ ariaSetSize }
         >
           <input
             value={ value }
@@ -287,16 +310,18 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
   /**
    * Increment function to use if one is not passed in
    */
-  private _defaultOnIncrement = (value: string) => {
-    let newValue = Math.min(Number(value) + (this.props.step as number), this.props.max as number);
+  private _defaultOnIncrement = (value: string): string | void => {
+    let newValue: number = Math.min(Number(value) + Number(this.props.step)!, this.props.max!);
+    newValue = precisionRound(newValue, this.state.precision);
     return String(newValue);
   }
 
   /**
    * Increment function to use if one is not passed in
    */
-  private _defaultOnDecrement = (value: string) => {
-    let newValue = Math.max(Number(value) - (this.props.step as number), this.props.min as number);
+  private _defaultOnDecrement = (value: string): string | void => {
+    let newValue: number = Math.max(Number(value) - Number(this.props.step)!, this.props.min!);
+    newValue = precisionRound(newValue, this.state.precision);
     return String(newValue);
   }
 
@@ -350,8 +375,8 @@ export class SpinButton extends BaseComponent<ISpinButtonProps, ISpinButtonState
    * @param stepFunction - function to use to step by
    */
   @autobind
-  private _updateValue(shouldSpin: boolean, stepDelay: number, stepFunction: (string: string) => string | void) {
-    const newValue = stepFunction(this.state.value as string);
+  private _updateValue(shouldSpin: boolean, stepDelay: number, stepFunction: (value: string) => string | void) {
+    const newValue: string | void = stepFunction(this.state.value);
     if (newValue) {
       this._lastValidValue = newValue;
       this.setState({ value: newValue });
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.types.ts b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.types.ts
index 513085a989290..9320fccd84435 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.types.ts
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/SpinButton.types.ts
@@ -2,6 +2,8 @@ import * as React from 'react';
 import { Position } from '../../utilities/positioning';
 import { IIconProps } from '../../Icon';
 import { ITheme, IStyle } from '../../Styling';
+import { ISpinButtonClassNames } from './SpinButton.classNames';
+import { KeyboardSpinDirection } from './SpinButton';
 import { IButtonStyles } from '../../Button';
 
 export interface ISpinButton {
@@ -51,6 +53,9 @@ export interface ISpinButtonProps {
 
   /**
    * The difference between the two adjacent values of the SpinButton.
+   * This value is sued to calculate the precision of the input if no
+   * precision is given. The precision calculated this way will always
+   * be >= 0.
    * @default 1
    */
   step?: number;
@@ -133,6 +138,18 @@ export interface ISpinButtonProps {
    */
   styles?: Partial<ISpinButtonStyles>;
 
+  /**
+   * Custom function for providing the classNames for the spinbutton. Can be used to provide
+   * all styles for the component instead of applying them on top of the default styles.
+   */
+  getClassNames?: (
+    theme: ITheme,
+    disabled: boolean,
+    isFocused: boolean,
+    keyboardSpinDirection: KeyboardSpinDirection,
+    labelPosition?: Position
+  ) => ISpinButtonClassNames;
+
   /**
    * Custom styles for the upArrow button.
    *
@@ -157,14 +174,31 @@ export interface ISpinButtonProps {
   theme?: ITheme;
 
   /**
-   * Accessibility label text for the increment button for the benefit of the screen reader.
+   * Accessibile label text for the increment button for the benefit of the screen reader.
    */
   incrementButtonAriaLabel?: string;
 
   /**
-   * Accessibility label text for the decrement button for the benefit of the screen reader.
+   * Accessibile label text for the decrement button for the benefit of the screen reader.
    */
   decrementButtonAriaLabel?: string;
+
+  /**
+   * To how many decimal places the value should be rounded to.
+   * The default value is calculated based on the precision of step.
+   * IE: if step = 1, precision = 0. step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2.
+   */
+  precision?: number;
+
+  /**
+   * The position in the parent set (if in a set) for aria-posinset.
+   */
+  ariaPositionInSet?: number;
+
+  /**
+  * The total size of the parent set (if in a set) for aria-setsize.
+  */
+  ariaSetSize?: number;
 }
 
 export interface ISpinButtonStyles {
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap
index 928e00cac02cf..3b37ceae167ca 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/__snapshots__/SpinButton.test.tsx.snap
@@ -8,10 +8,6 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
         font-size: 14px;
         min-width: 86px;
         outline: none;
-        padding-bottom: 2px;
-        padding-left: 2px;
-        padding-right: 2px;
-        padding-top: 2px;
         width: 100%;
       }
 >
@@ -52,18 +48,21 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
   </div>
   <div
     aria-label={undefined}
+    aria-posinset={undefined}
+    aria-setsize={undefined}
     className=
 
         {
-          border-color: #c8c8c8;
+          border-color: #a6a6a6;
           border-style: solid;
           border-width: 1px;
+          box-sizing: border-box;
           display: flex;
-          height: 26px;
+          height: 32px;
           min-width: 86px;
         }
         &:hover {
-          border-color: #666666;
+          border-color: #212121;
           outline: 2px dashed transparent;
         }
         @media screen and (-ms-high-contrast: active){&:hover {
@@ -96,10 +95,10 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
             min-width: 72px;
             outline: 0;
             overflow: hidden;
-            padding-bottom: 4px;
-            padding-left: 4px;
-            padding-right: 3px;
-            padding-top: 3px;
+            padding-bottom: 0;
+            padding-left: 12px;
+            padding-right: 12px;
+            padding-top: 0;
             text-overflow: ellipsis;
             user-select: text;
             width: calc(100% - 14px);
@@ -152,8 +151,8 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
         checked={false}
         className=
             ms-Button
-            ms-Button--icon
             ms-UpButton
+            ms-Button--icon
             {
               -moz-osx-font-smoothing: grayscale;
               -webkit-font-smoothing: antialiased;
@@ -164,7 +163,7 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
               color: #333333;
               cursor: default;
               display: block;
-              font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
               font-size: 14px;
               font-weight: 400;
               height: 50%;
@@ -196,11 +195,11 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
             }
             &:hover {
               background-color: #eaeaea;
-              color: #004578;
+              color: #000000;
             }
             &:active {
-              background-color: #0078d7;
-              color: #ffffff;
+              background-color: #c8c8c8;
+              color: #212121;
             }
             @media screen and (-ms-high-contrast: active){&:active {
               background-color: Highlight;
@@ -227,7 +226,6 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
         >
           <i
             aria-hidden={true}
-            aria-label={undefined}
             className=
                 ms-Button-icon
                 {
@@ -258,8 +256,8 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
         checked={false}
         className=
             ms-Button
-            ms-Button--icon
             ms-DownButton
+            ms-Button--icon
             {
               -moz-osx-font-smoothing: grayscale;
               -webkit-font-smoothing: antialiased;
@@ -270,7 +268,7 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
               color: #333333;
               cursor: default;
               display: block;
-              font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+              font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
               font-size: 14px;
               font-weight: 400;
               height: 50%;
@@ -302,11 +300,11 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
             }
             &:hover {
               background-color: #eaeaea;
-              color: #004578;
+              color: #000000;
             }
             &:active {
-              background-color: #0078d7;
-              color: #ffffff;
+              background-color: #c8c8c8;
+              color: #212121;
             }
             @media screen and (-ms-high-contrast: active){&:active {
               background-color: Highlight;
@@ -333,7 +331,6 @@ exports[`SpinButton renders SpinButton correctly 1`] = `
         >
           <i
             aria-hidden={true}
-            aria-label={undefined}
             className=
                 ms-Button-icon
                 {
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.Basic.Example.tsx
index 170847ae76046..0b5eaf10976f7 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.Basic.Example.tsx
@@ -15,6 +15,15 @@ export class SpinButtonBasicExample extends React.Component<any, any> {
           onFocus={ () => console.log('onFocus called') }
           onBlur={ () => console.log('onBlur called') }
         />
+        <SpinButton
+          defaultValue='0'
+          label={ 'Decimal SpinButton:' }
+          min={ 0 }
+          max={ 10 }
+          step={ 0.1 }
+          onFocus={ () => console.log('onFocus called') }
+          onBlur={ () => console.log('onBlur called') }
+        />
       </div>
     );
   }
diff --git a/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.Stateful.Example.tsx b/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.Stateful.Example.tsx
index ce9639fbbb178..85bc98d29a718 100644
--- a/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.Stateful.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/SpinButton/examples/SpinButton.Stateful.Example.tsx
@@ -4,7 +4,7 @@ import { SpinButton } from 'office-ui-fabric-react/lib/SpinButton';
 // tslint:disable:jsx-no-lambda
 export class SpinButtonStatefulExample extends React.Component<any, any> {
   public render() {
-    let suffix = ' cm';
+    const suffix = ' cm';
 
     return (
       <div style={ { width: '400px' } }>
@@ -34,16 +34,16 @@ export class SpinButtonStatefulExample extends React.Component<any, any> {
     );
   }
 
-  private _hasSuffix(string: string, suffix: string): Boolean {
-    let subString = string.substr(string.length - suffix.length);
+  private _hasSuffix(value: string, suffix: string): Boolean {
+    const subString = value.substr(value.length - suffix.length);
     return subString === suffix;
   }
 
-  private _removeSuffix(string: string, suffix: string): string {
-    if (!this._hasSuffix(string, suffix)) {
-      return string;
+  private _removeSuffix(value: string, suffix: string): string {
+    if (!this._hasSuffix(value, suffix)) {
+      return value;
     }
 
-    return string.substr(0, string.length - suffix.length);
+    return value.substr(0, value.length - suffix.length);
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.scss b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.scss
index 124073248b58b..e5a2b7581fd87 100644
--- a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.scss
+++ b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.scss
@@ -12,10 +12,10 @@ $borderSize: 1.5px;
 
 @keyframes spinAnimation {
   0% {
-    transform: rotate(0deg);
+    transform: rotateZ(0deg);
   }
   100% {
-    transform: rotate(360deg);
+    transform: rotateZ(360deg);
   }
 }
 
diff --git a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.tsx b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.tsx
index 31f5477d95b08..292534cd0efb5 100644
--- a/packages/office-ui-fabric-react/src/components/Spinner/Spinner.tsx
+++ b/packages/office-ui-fabric-react/src/components/Spinner/Spinner.tsx
@@ -11,7 +11,7 @@ export class Spinner extends BaseComponent<ISpinnerProps, any> {
   };
 
   public render() {
-    let { type, size, label, className, ariaLive, ariaLabel } = this.props; // TODO remove deprecated type property at >= 2.0.0
+    const { type, size, label, className, ariaLive, ariaLabel } = this.props; // TODO remove deprecated type property at >= 2.0.0
     const statusMessage = ariaLabel || label;
 
     return (
diff --git a/packages/office-ui-fabric-react/src/components/Sticky/Sticky.tsx b/packages/office-ui-fabric-react/src/components/Sticky/Sticky.tsx
index 02ecf1817ce41..be825b12e4bfa 100644
--- a/packages/office-ui-fabric-react/src/components/Sticky/Sticky.tsx
+++ b/packages/office-ui-fabric-react/src/components/Sticky/Sticky.tsx
@@ -29,11 +29,6 @@ export class Sticky extends BaseComponent<IStickyProps, IStickyState> {
     scrollablePane: PropTypes.object
   };
 
-  public refs: {
-    root: HTMLElement;
-    placeholder: HTMLElement;
-  };
-
   public context: {
     scrollablePane: {
       subscribe: (handler: Function) => void;
@@ -47,6 +42,7 @@ export class Sticky extends BaseComponent<IStickyProps, IStickyState> {
   };
 
   public content: HTMLElement;
+  public root: HTMLElement;
 
   constructor(props: IStickyProps) {
     super(props);
@@ -66,7 +62,7 @@ export class Sticky extends BaseComponent<IStickyProps, IStickyState> {
     this.content = document.createElement('div');
     this.content.style.background = this.props.stickyBackgroundColor || this._getBackground();
     ReactDOM.render(<div>{ this.props.children }</div>, this.content);
-    this.refs.root.appendChild(this.content);
+    this.root.appendChild(this.content);
     this.context.scrollablePane.notifySubscribers(true);
   }
 
@@ -134,23 +130,23 @@ export class Sticky extends BaseComponent<IStickyProps, IStickyState> {
     const isSticky = isStickyTop || isStickyBottom;
 
     return (
-      <div ref='root'>
-        <div ref='placeholder' style={ { height: (isSticky ? placeholderHeight : 0) } } />
+      <div ref={ this._resolveRef('root') }>
+        <div style={ { height: (isSticky ? placeholderHeight : 0) } } />
       </div>
     );
   }
 
   @autobind
   private _onScrollEvent(headerBound: ClientRect, footerBound: ClientRect) {
-    const { top, bottom } = this.refs.root.getBoundingClientRect();
+    const { top, bottom } = this.root.getBoundingClientRect();
     const { isStickyTop, isStickyBottom } = this.state;
     const { stickyPosition } = this.props;
     const canStickyHeader = stickyPosition === StickyPositionType.Both || stickyPosition === StickyPositionType.Header;
     const canStickyFooter = stickyPosition === StickyPositionType.Both || stickyPosition === StickyPositionType.Footer;
 
     this.setState({
-      isStickyTop: canStickyHeader && ((!isStickyTop && top <= headerBound.bottom) || (isStickyTop && bottom < headerBound.bottom)),
-      isStickyBottom: canStickyFooter && ((!isStickyBottom && bottom >= footerBound.top) || (isStickyBottom && top > footerBound.top))
+      isStickyTop: canStickyHeader && ((top <= headerBound.bottom) || (isStickyTop && bottom < headerBound.bottom)),
+      isStickyBottom: canStickyFooter && ((bottom >= footerBound.top) || (isStickyBottom && top > footerBound.top))
     });
   }
 
@@ -162,7 +158,7 @@ export class Sticky extends BaseComponent<IStickyProps, IStickyState> {
   }
 
   private _resetSticky(callback: () => void) {
-    this.refs.root.appendChild(this.content);
+    this.root.appendChild(this.content);
     setTimeout(() => {
       if (this.props.stickyClassName) {
         this.content.children[0].classList.remove(this.props.stickyClassName);
@@ -173,7 +169,7 @@ export class Sticky extends BaseComponent<IStickyProps, IStickyState> {
 
   // Gets background of nearest parent element that has a declared background-color attribute
   private _getBackground(): string | null {
-    let curr = this.refs.root;
+    let curr = this.root;
     while (window.getComputedStyle(curr).getPropertyValue('background-color') === 'rgba(0, 0, 0, 0)' ||
       window.getComputedStyle(curr).getPropertyValue('background-color') === 'transparent') {
       if (curr.tagName === 'HTML') {
diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.base.tsx b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.base.tsx
index f15f4b52a1333..c412598f6e82d 100644
--- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.base.tsx
@@ -34,14 +34,23 @@ export class ColorPickerGridCellBase extends React.Component<IColorPickerGridCel
   private _classNames: {[key in keyof IColorPickerGridCellStyles]: string };
 
   public render() {
-    let {
+    const {
       item,
       id,
       selected,
       disabled,
       getStyles,
       theme,
-      circle
+      circle,
+      color,
+      onClick,
+      onHover,
+      onFocus,
+      onMouseEnter,
+      onMouseMove,
+      onMouseLeave,
+      onWheel,
+      onKeyDown
     } = this.props;
 
     this._classNames = getClassNames(
@@ -51,25 +60,31 @@ export class ColorPickerGridCellBase extends React.Component<IColorPickerGridCel
         disabled,
         selected,
         circle,
-        isWhite: this._isWhiteCell(this.props.color)
+        isWhite: this._isWhiteCell(color)
       }
     );
 
     return (
       <ColorCell
         item={ item }
-        id={ id }
+        id={ `${id}-${item.id}-${item.index}` }
         key={ item.id }
         disabled={ disabled }
         role={ 'gridcell' }
         onRenderItem={ this._onRenderColorOption }
         selected={ selected }
-        onClick={ this.props.onClick }
-        onHover={ this.props.onHover }
-        onFocus={ this.props.onFocus }
+        onClick={ onClick }
+        onHover={ onHover }
+        onFocus={ onFocus }
         label={ item.label }
         className={ this._classNames.colorCell }
         getClassNames={ this._getClassNames }
+        index={ item.index }
+        onMouseEnter={ onMouseEnter }
+        onMouseMove={ onMouseMove }
+        onMouseLeave={ onMouseLeave }
+        onWheel={ onWheel }
+        onKeyDown={ onKeyDown }
       />
     );
   }
@@ -92,11 +107,11 @@ export class ColorPickerGridCellBase extends React.Component<IColorPickerGridCel
     );
   }
 
-  /**
-* Validate if the cell's color is white or not to apply whiteCell style
-* @param inputColor - The color of the current cell
-* @returns - Whether the cell's color is white or not.
-*/
+ /**
+  * Validate if the cell's color is white or not to apply whiteCell style
+  * @param inputColor - The color of the current cell
+  * @returns - Whether the cell's color is white or not.
+  */
   private _isWhiteCell(inputColor: string | undefined): boolean {
     return inputColor!.toLocaleLowerCase() === '#ffffff';
   }
@@ -115,7 +130,7 @@ export class ColorPickerGridCellBase extends React.Component<IColorPickerGridCel
     checked: boolean,
     expanded: boolean,
     isSplit: boolean | undefined): IButtonClassNames {
-    let styles = getActionButtonStyles(theme);
+    const styles = getActionButtonStyles(theme);
     return mergeStyleSets(this._classNames as {}, {
       root: [
         'ms-Button',
diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.styles.ts b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.styles.ts
index 643fa8b18d70a..52a197c9b7df6 100644
--- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.styles.ts
@@ -1,8 +1,4 @@
-import {
-  IRawStyle,
-  getFocusStyle,
-  HighContrastSelector,
-} from '../../Styling';
+import { IRawStyle, HighContrastSelector } from '../../Styling';
 import { IColorPickerGridCellStyleProps, IColorPickerGridCellStyles } from './ColorPickerGridCell.types';
 
 const ACTIVE_BORDER_COLOR = '#969696';
@@ -28,7 +24,7 @@ export const getStyles = (props: IColorPickerGridCellStyleProps): IColorPickerGr
     isWhite
   } = props;
 
-  const { semanticColors, fonts } = theme;
+  const { semanticColors } = theme;
   return {
     colorCell: [
       {
diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.tsx b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.tsx
index b9c0d47e8598e..6aede2a65e56c 100644
--- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.tsx
+++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.tsx
@@ -1,9 +1,8 @@
-import * as React from 'react';
 import {
-  IStyleFunction,
   styled
 } from '../../Utilities';
 import { ColorPickerGridCellBase } from './ColorPickerGridCell.base';
+// tslint:disable-next-line:no-unused-variable
 import { IColorPickerGridCellProps } from './ColorPickerGridCell.types';
 import { getStyles } from './ColorPickerGridCell.styles';
 
diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.types.ts b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.types.ts
index 1ead8620b299f..0ba24c2f0cfd2 100644
--- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.types.ts
+++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/ColorPickerGridCell.types.ts
@@ -68,6 +68,33 @@ export interface IColorPickerGridCellProps {
   * Optional styles for the component.
   */
   getStyles?: IStyleFunction<IColorPickerGridCellStyleProps, IColorPickerGridCellStyles>;
+
+  /**
+   * Optional, mouseEnter handler.
+   * @returns true if the event should be processed, false otherwise
+   */
+  onMouseEnter?: (ev: React.MouseEvent<HTMLButtonElement>) => boolean;
+
+  /**
+   * Optional, mouseMove handler
+   * @returns true if the event should be processed, false otherwise
+   */
+  onMouseMove?: (ev: React.MouseEvent<HTMLButtonElement>) => boolean;
+
+  /**
+   * Optional, mouseLeave handler
+   */
+  onMouseLeave?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Optional, onWheel handler
+   */
+  onWheel?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Optional, onkeydown handler
+   */
+  onKeyDown?: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
 }
 
 export interface IColorCellProps {
diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx
index 2ca8484c3df25..55b6d77c10274 100644
--- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.base.tsx
@@ -1,13 +1,13 @@
 import * as React from 'react';
 import {
+  Async,
   autobind,
   BaseComponent,
-  findIndex,
-  getId,
-  customizable,
   classNamesFunction,
-  getNativeProps,
-  htmlElementProperties
+  customizable,
+  findIndex,
+  KeyCodes,
+  getId
 } from '../../Utilities';
 import {
   ISwatchColorPicker,
@@ -18,7 +18,6 @@ import {
 import { Grid } from '../../utilities/grid/Grid';
 import { IColorCellProps } from './ColorPickerGridCell.types';
 import { ColorPickerGridCell } from './ColorPickerGridCell';
-import { mergeStyleSets } from '../../Styling';
 
 export interface ISwatchColorPickerState {
   selectedIndex?: number;
@@ -36,12 +35,31 @@ export class SwatchColorPickerBase extends BaseComponent<ISwatchColorPickerProps
   } as ISwatchColorPickerProps;
 
   private _id: string;
+  private _cellFocused: boolean;
+
+  private navigationIdleTimeoutId: number | undefined;
+  private isNavigationIdle: boolean;
+  private readonly navigationIdleDelay: number = 250 /* ms */;
+  private async: Async;
 
   constructor(props: ISwatchColorPickerProps) {
     super(props);
 
     this._id = props.id || getId('swatchColorPicker');
 
+    this._warnMutuallyExclusive({
+      'focusOnHover': 'onHover'
+    });
+
+    this._warnConditionallyRequiredProps(
+      ['focusOnHover'],
+      'mouseLeaveParentSelector',
+      !!this.props.mouseLeaveParentSelector
+    );
+
+    this.isNavigationIdle = true;
+    this.async = new Async(this);
+
     let selectedIndex: number | undefined;
     if (props.selectedId) {
       selectedIndex = this._getSelectedIndex(props.colorCells, props.selectedId);
@@ -66,8 +84,15 @@ export class SwatchColorPickerBase extends BaseComponent<ISwatchColorPickerProps
     }
   }
 
+  public componentWillUnmount() {
+    if (this.props.onCellFocused && this._cellFocused) {
+      this._cellFocused = false;
+      this.props.onCellFocused();
+    }
+  }
+
   public render() {
-    let {
+    const {
       colorCells,
       columnCount,
       positionInSet,
@@ -75,7 +100,6 @@ export class SwatchColorPickerBase extends BaseComponent<ISwatchColorPickerProps
       shouldFocusCircularNavigate,
       className,
       doNotContainWithinFocusZone,
-      disabled,
       getStyles,
     } = this.props;
 
@@ -92,8 +116,8 @@ export class SwatchColorPickerBase extends BaseComponent<ISwatchColorPickerProps
     }
     return (
       <Grid
-        {...this.props}
-        items={ colorCells.map((item, index) => { return { ...item, index }; }) }
+        { ...this.props }
+        items={ colorCells.map((item, index) => { return { ...item, index: index }; }) }
         columnCount={ columnCount }
         onRenderItem={ this._renderOption }
         positionInSet={ positionInSet && positionInSet }
@@ -118,6 +142,7 @@ export class SwatchColorPickerBase extends BaseComponent<ISwatchColorPickerProps
   @autobind
   private _onSwatchColorPickerBlur() {
     if (this.props.onCellFocused) {
+      this._cellFocused = false;
       this.props.onCellFocused();
     }
   }
@@ -129,14 +154,10 @@ export class SwatchColorPickerBase extends BaseComponent<ISwatchColorPickerProps
    * @returns {number} - The index of the selected item's id, -1 if there was no match
    */
   private _getSelectedIndex(items: IColorCellProps[], selectedId: string): number | undefined {
-    let selectedIndex = findIndex(items, (item => (item.id === selectedId)));
+    const selectedIndex = findIndex(items, (item => (item.id === selectedId)));
     return selectedIndex >= 0 ? selectedIndex : undefined;
   }
 
-  private _isSelected(index: number): boolean {
-    return this.state.selectedIndex !== undefined && (this.state.selectedIndex === index);
-  }
-
   /**
    * Render a color cell
    * @param item - The item to render
@@ -144,7 +165,7 @@ export class SwatchColorPickerBase extends BaseComponent<ISwatchColorPickerProps
    */
   @autobind
   private _renderOption(item: IColorCellProps): JSX.Element {
-    let id = this._id;
+    const id = this._id;
 
     return (
       <ColorPickerGridCell
@@ -159,21 +180,148 @@ export class SwatchColorPickerBase extends BaseComponent<ISwatchColorPickerProps
         selected={ this.state.selectedIndex !== undefined && (this.state.selectedIndex === item.index) }
         circle={ this.props.cellShape === 'circle' }
         label={ item.label }
+        onMouseEnter={ this._onMouseEnter }
+        onMouseMove={ this._onMouseMove }
+        onMouseLeave={ this._onMouseLeave }
+        onWheel={ this._onWheel }
+        onKeyDown={ this._onKeyDown }
       />
     );
   }
 
+  /**
+   * Callback passed to the GridCell that will manage triggering the onCellHovered callback for mouseEnter
+   */
+  @autobind
+  private _onMouseEnter(ev: React.MouseEvent<HTMLButtonElement>): boolean {
+
+    if (!this.props.focusOnHover) {
+      if (!this.isNavigationIdle || this.props.disabled) {
+        return true;
+      }
+
+      return false;
+    }
+
+    if (this.isNavigationIdle && !this.props.disabled) {
+      ev.currentTarget.focus();
+    }
+
+    return true;
+  }
+
+  /**
+   * Callback passed to the GridCell that will manage Hover/Focus updates
+   */
+  @autobind
+  private _onMouseMove(ev: React.MouseEvent<HTMLButtonElement>): boolean {
+
+    if (!this.props.focusOnHover) {
+      if (!this.isNavigationIdle || this.props.disabled) {
+        return true;
+      }
+
+      return false;
+    }
+
+    const targetElement = ev.currentTarget as HTMLElement;
+
+    // If navigation is idle and the targetElement is the focused element bail out
+    // if (!this.isNavigationIdle || (document && targetElement === (document.activeElement as HTMLElement))) {
+    if (this.isNavigationIdle && !(document && targetElement === (document.activeElement as HTMLElement))) {
+      targetElement.focus();
+    }
+
+    return true;
+  }
+
+  /**
+   * Callback passed to the GridCell that will manage Hover/Focus updates
+   */
+  @autobind
+  private _onMouseLeave(ev: React.MouseEvent<HTMLButtonElement>): void {
+
+    const parentSelector = this.props.mouseLeaveParentSelector;
+
+    if (!this.props.focusOnHover ||
+      !parentSelector ||
+      !this.isNavigationIdle ||
+      this.props.disabled) {
+      return;
+    }
+
+    // Get the the elements that math the given selector
+    const elements = document.querySelectorAll(parentSelector);
+
+    // iterate over the elements return to make sure it is a parent of the target and focus it
+    for (let index = 0; index < elements.length; index += 1) {
+      if (elements[index].contains(ev.currentTarget)) {
+        /**
+         * IE11 focus() method forces parents to scroll to top of element.
+         * Edge and IE expose a setActive() function for focusable divs that
+         * sets the page focus but does not scroll the parent element.
+         */
+        if ((elements[index] as any).setActive) {
+          (elements[index] as any).setActive();
+        } else {
+          (elements[index] as HTMLElement).focus();
+        }
+
+        break;
+      }
+    }
+  }
+
+  /**
+   * Callback to make sure we don't update the hovered element during mouse wheel
+   */
+  @autobind
+  private _onWheel(): void {
+    this.setNavigationTimeout();
+  }
+
+  /**
+   * Callback that
+   */
+  @autobind
+  private _onKeyDown(ev: React.KeyboardEvent<HTMLButtonElement>): void {
+    if (
+      ev.which === KeyCodes.up ||
+      ev.which === KeyCodes.down ||
+      ev.which === KeyCodes.left ||
+      ev.which === KeyCodes.right
+    ) {
+      this.setNavigationTimeout();
+    }
+  }
+
+  /**
+   * Sets a timeout so we won't process any mouse "hover" events
+   * while navigating (via mouseWheel or arrowKeys)
+   */
+  private setNavigationTimeout = () => {
+    if (!this.isNavigationIdle && this.navigationIdleTimeoutId !== undefined) {
+      this.async.clearTimeout(this.navigationIdleTimeoutId);
+      this.navigationIdleTimeoutId = undefined;
+    } else {
+      this.isNavigationIdle = false;
+    }
+
+    this.navigationIdleTimeoutId = this.async.setTimeout(() => {
+      this.isNavigationIdle = true;
+    }, this.navigationIdleDelay);
+  }
+
   /**
    * Callback passed to the GridCell class that will trigger the onCellHovered callback of the SwatchColorPicker
+   * NOTE: This will not be triggered if shouldFocusOnHover === true
    */
   @autobind
   private _onGridCellHovered(item?: IColorCellProps): void {
-    if (this.props && this.props.onCellHovered) {
-      if (item) {
-        this.props.onCellHovered(item.id, item.color);
-      } else {
-        this.props.onCellHovered();
-      }
+    const { onCellHovered } = this.props;
+
+    if (onCellHovered) {
+      return item ? onCellHovered(item.id, item.color) : onCellHovered();
     }
   }
 
@@ -182,11 +330,14 @@ export class SwatchColorPickerBase extends BaseComponent<ISwatchColorPickerProps
    */
   @autobind
   private _onGridCellFocused(item?: IColorCellProps): void {
-    if (this.props && this.props.onCellFocused) {
+    const { onCellFocused } = this.props;
+    if (onCellFocused) {
       if (item) {
-        this.props.onCellFocused(item.id, item.color);
+        this._cellFocused = true;
+        return onCellFocused(item.id, item.color);
       } else {
-        this.props.onCellFocused();
+        this._cellFocused = false;
+        return onCellFocused();
       }
     }
   }
@@ -201,11 +352,17 @@ export class SwatchColorPickerBase extends BaseComponent<ISwatchColorPickerProps
       return;
     }
 
-    let index = item.index as number;
+    const index = item.index as number;
 
     // If we have a valid index and it is not already
     // selected, select it
     if (index >= 0 && index !== this.state.selectedIndex) {
+
+      if (this.props.onCellFocused && this._cellFocused) {
+        this._cellFocused = false;
+        this.props.onCellFocused();
+      }
+
       if (this.props.onColorChanged) {
         this.props.onColorChanged(item.id, item.color);
       }
diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.styles.ts b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.styles.ts
index 08a3c546af9fb..e92a869d37aea 100644
--- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.styles.ts
+++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.styles.ts
@@ -2,12 +2,7 @@
 import { ISwatchColorPickerStyleProps, ISwatchColorPickerStyles } from './SwatchColorPicker.types';
 
 export const getStyles = (props: ISwatchColorPickerStyleProps): ISwatchColorPickerStyles => {
-  const {
-    theme,
-    className,
-  } = props;
-
-  const { semanticColors, fonts } = theme;
+  const { className } = props;
 
   return {
     root: {
diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.test.tsx b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.test.tsx
index 6e74d6d8406ff..c53a847113d19 100644
--- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.test.tsx
@@ -2,7 +2,6 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 /* tslint:enable:no-unused-variable */
-import * as ReactTestUtils from 'react-dom/test-utils';
 import * as renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
 import { SwatchColorPickerBase } from './SwatchColorPicker.base';
@@ -34,7 +33,7 @@ describe('SwatchColorPicker', () => {
         columnCount={ 4 }
         getStyles={ getStyles }
       />);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.tsx b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.tsx
index 26b58d029ebe3..ac4c76b3f5348 100644
--- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.tsx
@@ -1,9 +1,6 @@
-import * as React from 'react';
-import {
-  IStyleFunction,
-  styled
-} from '../../Utilities';
+import { styled } from '../../Utilities';
 import { SwatchColorPickerBase } from './SwatchColorPicker.base';
+// tslint:disable-next-line:no-unused-variable
 import { ISwatchColorPickerProps } from './SwatchColorPicker.types';
 import { getStyles } from './SwatchColorPicker.styles';
 
diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.types.ts b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.types.ts
index c2fc67fcb3f42..b624363d295fb 100644
--- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.types.ts
+++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/SwatchColorPicker.types.ts
@@ -101,6 +101,18 @@ export interface ISwatchColorPickerProps {
   * Optional styles for the component.
   */
   getColorGridCellStyles?: IStyleFunction<IColorPickerGridCellStyleProps, IColorPickerGridCellStyles>;
+
+  /**
+   * Optional, whether to update focus when a cell is hovered.
+   * @default false
+   */
+  focusOnHover?: boolean;
+
+  /**
+   * Selector to focus on mouseLeave
+   * SHOULD ONLY BE USED IN CONJUNCTION WITH focusOnHover
+   */
+  mouseLeaveParentSelector?: string | undefined;
 }
 
 /**
diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap
index 8310a30440fa9..836f6122dc63b 100644
--- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/__snapshots__/SwatchColorPicker.test.tsx.snap
@@ -71,7 +71,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   color: #333333;
                   cursor: pointer;
                   display: inline-block;
-                  font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
                   height: 40px;
@@ -176,14 +176,15 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &:active {
                   color: #000000;
                 }
-            data-index={undefined}
+            data-index={0}
             data-is-focusable={true}
             disabled={undefined}
-            id="swatchColorPicker1-itemundefined"
+            id="swatchColorPicker1-a-0"
             onClick={[Function]}
             onFocus={[Function]}
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
+            onMouseMove={[Function]}
             role="gridcell"
             title="green"
             type="button"
@@ -255,7 +256,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   color: #333333;
                   cursor: pointer;
                   display: inline-block;
-                  font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
                   height: 40px;
@@ -360,14 +361,15 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &:active {
                   color: #000000;
                 }
-            data-index={undefined}
+            data-index={1}
             data-is-focusable={true}
             disabled={undefined}
-            id="swatchColorPicker1-itemundefined"
+            id="swatchColorPicker1-b-1"
             onClick={[Function]}
             onFocus={[Function]}
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
+            onMouseMove={[Function]}
             role="gridcell"
             title="orange"
             type="button"
@@ -439,7 +441,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   color: #333333;
                   cursor: pointer;
                   display: inline-block;
-                  font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
                   height: 40px;
@@ -544,14 +546,15 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &:active {
                   color: #000000;
                 }
-            data-index={undefined}
+            data-index={2}
             data-is-focusable={true}
             disabled={undefined}
-            id="swatchColorPicker1-itemundefined"
+            id="swatchColorPicker1-c-2"
             onClick={[Function]}
             onFocus={[Function]}
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
+            onMouseMove={[Function]}
             role="gridcell"
             title="blue"
             type="button"
@@ -623,7 +626,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   color: #333333;
                   cursor: pointer;
                   display: inline-block;
-                  font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
                   height: 40px;
@@ -728,14 +731,15 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &:active {
                   color: #000000;
                 }
-            data-index={undefined}
+            data-index={3}
             data-is-focusable={true}
             disabled={undefined}
-            id="swatchColorPicker1-itemundefined"
+            id="swatchColorPicker1-d-3"
             onClick={[Function]}
             onFocus={[Function]}
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
+            onMouseMove={[Function]}
             role="gridcell"
             title="red"
             type="button"
@@ -811,7 +815,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   color: #333333;
                   cursor: pointer;
                   display: inline-block;
-                  font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
                   height: 40px;
@@ -916,14 +920,15 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &:active {
                   color: #000000;
                 }
-            data-index={undefined}
+            data-index={4}
             data-is-focusable={true}
             disabled={undefined}
-            id="swatchColorPicker1-itemundefined"
+            id="swatchColorPicker1-g-4"
             onClick={[Function]}
             onFocus={[Function]}
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
+            onMouseMove={[Function]}
             role="gridcell"
             title="green"
             type="button"
@@ -995,7 +1000,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   color: #333333;
                   cursor: pointer;
                   display: inline-block;
-                  font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
                   height: 40px;
@@ -1100,14 +1105,15 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &:active {
                   color: #000000;
                 }
-            data-index={undefined}
+            data-index={5}
             data-is-focusable={true}
             disabled={undefined}
-            id="swatchColorPicker1-itemundefined"
+            id="swatchColorPicker1-h-5"
             onClick={[Function]}
             onFocus={[Function]}
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
+            onMouseMove={[Function]}
             role="gridcell"
             title="orange"
             type="button"
@@ -1179,7 +1185,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   color: #333333;
                   cursor: pointer;
                   display: inline-block;
-                  font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
                   height: 40px;
@@ -1284,14 +1290,15 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &:active {
                   color: #000000;
                 }
-            data-index={undefined}
+            data-index={6}
             data-is-focusable={true}
             disabled={undefined}
-            id="swatchColorPicker1-itemundefined"
+            id="swatchColorPicker1-i-6"
             onClick={[Function]}
             onFocus={[Function]}
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
+            onMouseMove={[Function]}
             role="gridcell"
             title="blue"
             type="button"
@@ -1363,7 +1370,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   color: #333333;
                   cursor: pointer;
                   display: inline-block;
-                  font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
                   height: 40px;
@@ -1468,14 +1475,15 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &:active {
                   color: #000000;
                 }
-            data-index={undefined}
+            data-index={7}
             data-is-focusable={true}
             disabled={undefined}
-            id="swatchColorPicker1-itemundefined"
+            id="swatchColorPicker1-j-7"
             onClick={[Function]}
             onFocus={[Function]}
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
+            onMouseMove={[Function]}
             role="gridcell"
             title="red"
             type="button"
@@ -1551,7 +1559,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   color: #333333;
                   cursor: pointer;
                   display: inline-block;
-                  font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
                   height: 40px;
@@ -1656,14 +1664,15 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &:active {
                   color: #000000;
                 }
-            data-index={undefined}
+            data-index={8}
             data-is-focusable={true}
             disabled={undefined}
-            id="swatchColorPicker1-itemundefined"
+            id="swatchColorPicker1-k-8"
             onClick={[Function]}
             onFocus={[Function]}
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
+            onMouseMove={[Function]}
             role="gridcell"
             title="black"
             type="button"
@@ -1735,7 +1744,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   color: #333333;
                   cursor: pointer;
                   display: inline-block;
-                  font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
                   height: 40px;
@@ -1840,14 +1849,15 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &:active {
                   color: #000000;
                 }
-            data-index={undefined}
+            data-index={9}
             data-is-focusable={true}
             disabled={undefined}
-            id="swatchColorPicker1-itemundefined"
+            id="swatchColorPicker1-l-9"
             onClick={[Function]}
             onFocus={[Function]}
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
+            onMouseMove={[Function]}
             role="gridcell"
             title="grey"
             type="button"
@@ -1919,7 +1929,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   color: #333333;
                   cursor: pointer;
                   display: inline-block;
-                  font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
                   height: 40px;
@@ -2024,14 +2034,15 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &:active {
                   color: #000000;
                 }
-            data-index={undefined}
+            data-index={10}
             data-is-focusable={true}
             disabled={undefined}
-            id="swatchColorPicker1-itemundefined"
+            id="swatchColorPicker1-m-10"
             onClick={[Function]}
             onFocus={[Function]}
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
+            onMouseMove={[Function]}
             role="gridcell"
             title="purple"
             type="button"
@@ -2103,7 +2114,7 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                   color: #333333;
                   cursor: pointer;
                   display: inline-block;
-                  font-family: 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
+                  font-family: 'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif;
                   font-size: 14px;
                   font-weight: 400;
                   height: 40px;
@@ -2208,14 +2219,15 @@ exports[`SwatchColorPicker renders SwatchColorPicker correctly 1`] = `
                 &:active {
                   color: #000000;
                 }
-            data-index={undefined}
+            data-index={11}
             data-is-focusable={true}
             disabled={undefined}
-            id="swatchColorPicker1-itemundefined"
+            id="swatchColorPicker1-n-11"
             onClick={[Function]}
             onFocus={[Function]}
             onMouseEnter={[Function]}
             onMouseLeave={[Function]}
+            onMouseMove={[Function]}
             role="gridcell"
             title="yellow"
             type="button"
diff --git a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/examples/SwatchColorPicker.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/examples/SwatchColorPicker.Basic.Example.tsx
index 98fb9ceafa264..c02edf71a529b 100644
--- a/packages/office-ui-fabric-react/src/components/SwatchColorPicker/examples/SwatchColorPicker.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/SwatchColorPicker/examples/SwatchColorPicker.Basic.Example.tsx
@@ -4,6 +4,8 @@ import { SwatchColorPicker } from 'office-ui-fabric-react/lib/SwatchColorPicker'
 export interface IBasicSwatchColorPickerExampleState {
   color: string | undefined;
   previewColor: string | undefined;
+  color2: string | undefined;
+  previewColor2: string | undefined;
 }
 
 export class SwatchColorPickerBasicExample extends React.Component<any, IBasicSwatchColorPickerExampleState> {
@@ -12,7 +14,9 @@ export class SwatchColorPickerBasicExample extends React.Component<any, IBasicSw
 
     this.state = {
       color: undefined,
-      previewColor: undefined
+      previewColor: undefined,
+      color2: undefined,
+      previewColor2: undefined
     };
   }
   public render() {
@@ -90,6 +94,38 @@ export class SwatchColorPickerBasicExample extends React.Component<any, IBasicSw
             ]
           }
         />
+        <div id='foo' tab-index='-1'>
+          <div>Simple swatch color picker with multiple rows that updates it's icon color and shows a preview color:</div>
+          <div style={ { color: this.state.previewColor2 ? this.state.previewColor2 : this.state.color2 ? this.state.color2 : null, fontSize: '24px' } } >Sample Text</div>
+          <SwatchColorPicker
+            focusOnHover={ true }
+            mouseLeaveParentSelector={ '#foo' }
+            // tslint:disable:jsx-no-lambda
+            onCellHovered={ (id, color) => this.setState({ previewColor2: color! }) }
+            onCellFocused={ (id, color) => this.setState({ previewColor2: color! }) }
+            onColorChanged={ (id, newColor) => this.setState({ color2: newColor }) }
+            // tslint:enable:jsx-no-lambda
+            columnCount={ 4 }
+            cellShape={ 'circle' }
+            colorCells={
+              [
+                { id: 'a', label: 'green', color: '#00ff00' },
+                { id: 'b', label: 'orange', color: '#ffa500' },
+                { id: 'c', label: 'blue', color: '#0000ff' },
+                { id: 'd', label: 'red', color: '#ff0000' },
+                { id: 'g', label: 'green', color: 'green' },
+                { id: 'h', label: 'orange', color: 'orange' },
+                { id: 'i', label: 'blue', color: 'blue' },
+                { id: 'j', label: 'red', color: 'red' },
+                { id: 'k', label: 'black', color: 'black' },
+                { id: 'l', label: 'grey', color: 'grey' },
+                { id: 'm', label: 'purple', color: 'purple' },
+                { id: 'n', label: 'yellow', color: 'yellow' }
+
+              ]
+            }
+          />
+        </div>
       </div>
     );
   }
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss
index 54c4ce0011edf..113d36a6e24d0 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss
@@ -7,11 +7,64 @@
 // --------------------------------------------------
 // Teaching Bubble styles
 
+@keyframes bounceAnimation {
+  0% { transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  1.7% { transform: matrix3d(0.658, 0, 0, 0, 0, 0.703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  2.35% { transform: matrix3d(0.725, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  3.4% { transform: matrix3d(0.83, 0, 0, 0, 0, 0.946, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  4.7% { transform: matrix3d(0.942, 0, 0, 0, 0, 1.084, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  5.11% { transform: matrix3d(0.971, 0, 0, 0, 0, 1.113, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  6.81% { transform: matrix3d(1.062, 0, 0, 0, 0, 1.166, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  7.06% { transform: matrix3d(1.07, 0, 0, 0, 0, 1.165, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  8.76% { transform: matrix3d(1.104, 0, 0, 0, 0, 1.12, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  9.36% { transform: matrix3d(1.106, 0, 0, 0, 0, 1.094, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  10.66% { transform: matrix3d(1.098, 0, 0, 0, 0, 1.035, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  12.16% { transform: matrix3d(1.075, 0, 0, 0, 0, 0.98, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  12.61% { transform: matrix3d(1.067, 0, 0, 0, 0, 0.969, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  14.51% { transform: matrix3d(1.031, 0, 0, 0, 0, 0.948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  14.96% { transform: matrix3d(1.024, 0, 0, 0, 0, 0.949, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  17.77% { transform: matrix3d(0.99, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  18.37% { transform: matrix3d(0.986, 0, 0, 0, 0, 0.989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  20.52% { transform: matrix3d(0.98, 0, 0, 0, 0, 1.011, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  22.22% { transform: matrix3d(0.983, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  26.08% { transform: matrix3d(0.996, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  29.93% { transform: matrix3d(1.003, 0, 0, 0, 0, 0.995, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  31.63% { transform: matrix3d(1.004, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  37.64% { transform: matrix3d(1.001, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  42.74% { transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  45.35% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  49.9% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  50% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  52.15% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  54.3% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  56.46% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  58.61% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  64.16% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  69.72% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  80.83% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  91.99% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
+}
+
+@keyframes opacityFadeIn {
+  0% {
+    opacity: 0;
+    animation-timing-function: $ms-animation-ease-2;
+  }
+  26.26% { opacity: 1; }
+  100% { opacity: 1; }
+}
+
 .root {
   display: block;
   max-width: 364px;
   border: 0;
   box-shadow: none !important;
+
+  animation-name: (bounceAnimation, opacityFadeIn);
+  animation-duration: 2000ms;
+  animation-timing-function: linear;
+  animation-fill-mode: both;
 }
 
 .bodyContent {
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.test.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.test.tsx
index 963a3cc0d6c49..44e7c76f8f332 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.test.tsx
@@ -12,25 +12,39 @@ describe('TeachingBubble', () => {
 
   it('renders TeachingBubble correctly', () => {
     const component = renderer.create(<TeachingBubble>Content</TeachingBubble>);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
 
     const componentContent = renderer.create(<TeachingBubbleContent headline='Title'>Content</TeachingBubbleContent>);
-    let treeContent = componentContent.toJSON();
+    const treeContent = componentContent.toJSON();
     expect(treeContent).toMatchSnapshot();
   });
 
   // <Layer> components will lead ReactDOM.findDOMNode(test_component) return null, so the test is based on the teaching bubble content.
   it('renders a label', () => {
-    let component = ReactTestUtils.renderIntoDocument(
+    const component = ReactTestUtils.renderIntoDocument(
       <TeachingBubbleContent
         headline='Title'
       />
     );
-    let renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
-    let titleElement = renderedDOM.querySelector('.ms-TeachingBubble-headline');
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const titleElement = renderedDOM.querySelector('.ms-TeachingBubble-headline');
 
     expect(titleElement!.textContent).toEqual('Title');
   });
 
+  it('merges callout classNames', () => {
+    ReactTestUtils.renderIntoDocument<TeachingBubbleContent>(
+      <TeachingBubbleContent
+        headline='Title'
+        calloutProps={ { className: 'foo' } }
+      />
+    );
+    setTimeout(() => {
+      const callout = document.querySelector('.ms-Callout') as HTMLElement;
+      expect(callout).toBeDefined();
+      expect(callout.classList.contains('ms-TeachingBubble')).toBeTruthy();
+      expect(callout.classList.contains('foo')).toBeTruthy();
+    }, 0);
+  });
 });
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
index c872fd13a0577..8bd786aca93be 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.tsx
@@ -47,17 +47,17 @@ export class TeachingBubble extends BaseComponent<ITeachingBubbleProps, ITeachin
     };
   }
 
-  public render() {
-    let { calloutProps: setCalloutProps, targetElement, onDismiss } = this.props;
+  public render(): JSX.Element {
+    const { calloutProps: setCalloutProps, targetElement, onDismiss } = this.props;
     const calloutProps = { ...this._defaultCalloutProps, ...setCalloutProps };
 
     return (
       <Callout
-        className={ css('ms-TeachingBubble', styles.root, this.props.isWide ? styles.wideCallout : null) }
         ref={ this._resolveRef('_callout') }
         target={ targetElement }
         onDismiss={ onDismiss }
-        {...calloutProps}
+        { ...calloutProps }
+        className={ css('ms-TeachingBubble', styles.root, this.props.isWide ? styles.wideCallout : null, calloutProps ? calloutProps.className : undefined) }
       >
         <TeachingBubbleContent { ...this.props } />
       </Callout>
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx
index ccbe99d2bbdcb..79fb4ae674373 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx
@@ -1,11 +1,7 @@
 /* tslint:disable:no-unused-variable */
 import * as React from 'react';
 /* tslint:enable:no-unused-variable */
-import {
-  BaseComponent,
-  css,
-  getId
-} from '../../Utilities';
+import { BaseComponent, css } from '../../Utilities';
 import { ITeachingBubbleProps } from './TeachingBubble.types';
 import { ITeachingBubbleState } from './TeachingBubble';
 import { PrimaryButton, DefaultButton, IconButton } from '../../Button';
@@ -25,20 +21,15 @@ export class TeachingBubbleContent extends BaseComponent<ITeachingBubbleProps, I
     }
   };
 
-  // Specify any private variables
-  private _id: string;
-
-  // Constructor
   constructor(props: ITeachingBubbleProps) {
     super(props);
 
-    this._id = getId('TeachingBubble');
     this.state = {
     };
   }
 
   public render() {
-    let { illustrationImage, primaryButtonProps, secondaryButtonProps, headline, hasCondensedHeadline, hasCloseIcon, onDismiss, closeButtonAriaLabel, hasSmallHeadline } = this.props;
+    const { illustrationImage, primaryButtonProps, secondaryButtonProps, headline, hasCondensedHeadline, hasCloseIcon, onDismiss, closeButtonAriaLabel, hasSmallHeadline } = this.props;
 
     let imageContent;
     let headerContent;
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Basic.Example.tsx
index c2ef38380e8a2..91bd4ec369aca 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Basic.Example.tsx
@@ -23,11 +23,11 @@ export class TeachingBubbleBasicExample extends React.Component<{}, ITeachingBub
   }
 
   public render() {
-    let { isTeachingBubbleVisible } = this.state;
-    let examplePrimaryButton: IButtonProps = {
+    const { isTeachingBubbleVisible } = this.state;
+    const examplePrimaryButton: IButtonProps = {
       children: 'Try it out'
     };
-    let exampleSecondaryButtonProps: IButtonProps = {
+    const exampleSecondaryButtonProps: IButtonProps = {
       children: 'Maybe later',
       onClick: this._onDismiss
     };
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Condensed.Example.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Condensed.Example.tsx
index 90034fe746df6..bdfc2d2a27c65 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Condensed.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Condensed.Example.tsx
@@ -22,7 +22,7 @@ export class TeachingBubbleCondensedExample extends React.Component<{}, ITeachin
   }
 
   public render() {
-    let { isTeachingBubbleVisible } = this.state;
+    const { isTeachingBubbleVisible } = this.state;
 
     return (
       <div className='ms-TeachingBubbleExample'>
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Illustration.Example.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Illustration.Example.tsx
index a59f5d022b077..7293397f80aaf 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Illustration.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Illustration.Example.tsx
@@ -24,12 +24,12 @@ export class TeachingBubbleIllustrationExample extends React.Component<{}, ITeac
   }
 
   public render() {
-    let { isTeachingBubbleVisible } = this.state;
-    let exampleImageProps: IImageProps = { src: 'http://placehold.it/364x140' };
-    let examplePrimaryButton: IButtonProps = {
+    const { isTeachingBubbleVisible } = this.state;
+    const exampleImageProps: IImageProps = { src: 'http://placehold.it/364x140' };
+    const examplePrimaryButton: IButtonProps = {
       children: 'Try it out',
     };
-    let exampleSecondaryButtonProps: IButtonProps = {
+    const exampleSecondaryButtonProps: IButtonProps = {
       children: 'May be later',
       onClick: this._onDismiss
     };
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.SmallHeadline.Example.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.SmallHeadline.Example.tsx
index fbd6617a7c02a..aed369491e492 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.SmallHeadline.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.SmallHeadline.Example.tsx
@@ -22,8 +22,8 @@ export class TeachingBubbleSmallHeadlineExample extends React.Component<{}, ITea
   }
 
   public render() {
-    let { isTeachingBubbleVisible } = this.state;
-    let examplePrimaryButton: IButtonProps = {
+    const { isTeachingBubbleVisible } = this.state;
+    const examplePrimaryButton: IButtonProps = {
       children: 'Try it out',
     };
 
diff --git a/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.WideIllustration.Example.tsx b/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.WideIllustration.Example.tsx
index 6713a5439bfb5..7448ab573a9b3 100644
--- a/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.WideIllustration.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.WideIllustration.Example.tsx
@@ -25,12 +25,12 @@ export class TeachingBubbleWideIllustrationExample extends React.Component<{}, I
   }
 
   public render() {
-    let { isTeachingBubbleVisible } = this.state;
-    let exampleImageProps: IImageProps = { src: 'http://placehold.it/364x140' };
-    let examplePrimaryButton: IButtonProps = {
+    const { isTeachingBubbleVisible } = this.state;
+    const exampleImageProps: IImageProps = { src: 'http://placehold.it/364x140' };
+    const examplePrimaryButton: IButtonProps = {
       children: 'Try it out',
     };
-    let exampleSecondaryButtonProps: IButtonProps = {
+    const exampleSecondaryButtonProps: IButtonProps = {
       children: 'May be later',
       onClick: this._onDismiss
     };
diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.scss b/packages/office-ui-fabric-react/src/components/TextField/TextField.scss
index 43b076b98c360..8a940db798450 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextField.scss
+++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.scss
@@ -10,7 +10,7 @@
 @import '../Label/LabelMixins.scss';
 
 // component slots
-$field-background-color: $bodyBackgroundColor;
+$field-background-color: $inputBackgroundColor;
 $field-background-disabled-color: $disabledBackgroundColor;
 
 $field-border-color: $inputBorderColor;
@@ -28,6 +28,17 @@ $field-placeholder-disabled-color: $disabledTextColor;
 $field-description-color: $bodySubtextColor;
 $field-error-color: $errorTextColor;
 
+// Mixin for focus border, including high contrast
+@mixin fieldFocusBorder {
+  border-color: $field-border-focus-color;
+  @include high-contrast {
+    border-width: 2px;
+    .field {
+      @include ms-padding(0, 11px, 0, 11px);
+    }
+  }
+}
+
 // the box containing the label and input field
 .root {
   @include ms-normalize;
@@ -54,7 +65,7 @@ $field-error-color: $errorTextColor;
   }
 
   &.fieldGroupIsFocused {
-    border-color: $field-border-focus-color;
+    @include fieldFocusBorder();
   }
 
   &.fieldGroupIsFocused {
@@ -66,8 +77,6 @@ $field-error-color: $errorTextColor;
   .rootIsDisabled & {
     background-color: $field-background-disabled-color;
     border-color: $field-border-disabled-color;
-    pointer-events: none;
-    cursor: default;
   }
 
   &:hover,
@@ -93,8 +102,6 @@ $field-error-color: $errorTextColor;
   :global(.field) {
     background-color: $field-background-disabled-color;
     border-color: $field-border-disabled-color;
-    pointer-events: none;
-    cursor: default;
   }
 }
 
@@ -117,6 +124,12 @@ $field-error-color: $errorTextColor;
   color: $field-text-color;
   @include ms-padding(0, 12px, 0, 12px);
   width: 100%;
+  /**
+   * min-width is set to 1 in order to tell the browser to ignore the
+   * default value calculated from the size attribute and respect the
+   * width set on parent elements.
+   */
+  min-width: 0;
   text-overflow: ellipsis;
   outline: 0;
   &:active,
@@ -131,8 +144,6 @@ $field-error-color: $errorTextColor;
   &[disabled] {
     background-color: transparent;
     border-color: transparent;
-    pointer-events: none;
-    cursor: default;
   }
 
   .field {
@@ -163,7 +174,7 @@ $field-error-color: $errorTextColor;
 
 //= State: An active textfield
 .root.rootIsActive {
-  border-color: $field-border-focus-color;
+  @include fieldFocusBorder();
 }
 
 .icon {
@@ -241,7 +252,7 @@ $field-error-color: $errorTextColor;
   }
 
   &.rootIsActive {
-    border-color: $field-border-focus-color;
+    @include fieldFocusBorder();
   }
 
   &:hover:not(.rootIsDisabled),
diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx
index 883c7f5866cfc..02710758b5a48 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.test.tsx
@@ -26,18 +26,18 @@ describe('TextField', () => {
 
   it('renders TextField correctly', () => {
     const component = renderer.create(<TextField label='Label' />);
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('should render label and value to input element', () => {
-    const exampleLabel: string = 'this is label';
-    const exampleValue: string = 'this is value';
+    const exampleLabel = 'this is label';
+    const exampleValue = 'this is value';
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <TextField
         label={ exampleLabel }
-        defaultValue={ exampleValue }
+        value={ exampleValue }
       />
     );
 
@@ -51,7 +51,7 @@ describe('TextField', () => {
   });
 
   it('should render prefix in input element', () => {
-    const examplePrefix: string = 'this is a prefix';
+    const examplePrefix = 'this is a prefix';
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <TextField
@@ -65,7 +65,7 @@ describe('TextField', () => {
   });
 
   it('should render suffix in input element', () => {
-    const exampleSuffix: string = 'this is a suffix';
+    const exampleSuffix = 'this is a suffix';
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <TextField
@@ -79,8 +79,8 @@ describe('TextField', () => {
   });
 
   it('should render both prefix and suffix in input element', () => {
-    const examplePrefix: string = 'this is a prefix';
-    const exampleSuffix: string = 'this is a suffix';
+    const examplePrefix = 'this is a prefix';
+    const exampleSuffix = 'this is a suffix';
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <TextField
@@ -98,7 +98,7 @@ describe('TextField', () => {
 
   it('should render multiline as text area element', () => {
     const renderedDOM: HTMLElement = renderIntoDocument(
-      <TextField defaultValue='This\nIs\nMultiline\nText\n' multiline />
+      <TextField value='This\nIs\nMultiline\nText\n' multiline />
     );
 
     // Assert on the input element.
@@ -110,7 +110,7 @@ describe('TextField', () => {
     const renderedDOM: HTMLElement = renderIntoDocument(
       <TextField
         label='text-field-label'
-        defaultValue='whatever value'
+        value='whatever value'
       />
     );
 
@@ -133,7 +133,7 @@ describe('TextField', () => {
   });
 
   describe('error message', () => {
-    const errorMessage: string = 'The string is too long, should not exceed 3 characters.';
+    const errorMessage = 'The string is too long, should not exceed 3 characters.';
 
     function assertErrorMessage(renderedDOM: HTMLElement, expectedErrorMessage: string | boolean): void {
       const errorMessageDOM: HTMLElement =
@@ -154,7 +154,7 @@ describe('TextField', () => {
       const renderedDOM: HTMLElement = renderIntoDocument(
         <TextField
           label='text-field-label'
-          defaultValue='whatever value'
+          value='whatever value'
           onGetErrorMessage={ validator }
         />
       );
@@ -174,7 +174,7 @@ describe('TextField', () => {
       const renderedDOM: HTMLElement = renderIntoDocument(
         <TextField
           label='text-field-label'
-          defaultValue='whatever value'
+          value='whatever value'
           onGetErrorMessage={ validator }
         />
       );
@@ -190,7 +190,7 @@ describe('TextField', () => {
       const renderedDOM: HTMLElement = renderIntoDocument(
         <TextField
           label='text-field-label'
-          defaultValue='whatever value'
+          value='whatever value'
           // tslint:disable-next-line:jsx-no-lambda
           onGetErrorMessage={ () => errorMessage }
         />
@@ -203,7 +203,7 @@ describe('TextField', () => {
       const renderedDOM: HTMLElement = renderIntoDocument(
         <TextField
           label='text-field-label'
-          defaultValue='whatever value'
+          value='whatever value'
           // tslint:disable-next-line:jsx-no-lambda
           onGetErrorMessage={ () => Promise.resolve(errorMessage) }
         />
@@ -217,7 +217,7 @@ describe('TextField', () => {
       const renderedDOM: HTMLElement = renderIntoDocument(
         <TextField
           label='text-field-label'
-          defaultValue='whatever value'
+          value='whatever value'
           // tslint:disable-next-line:jsx-no-lambda
           onGetErrorMessage={ () => '' }
         />
@@ -268,14 +268,14 @@ describe('TextField', () => {
 
     it('should trigger validation only on focus', () => {
       let validationCallCount = 0;
-      let validatorSpy = (value: string) => {
+      const validatorSpy = (value: string) => {
         validationCallCount++;
         return value.length > 3 ? errorMessage : '';
       };
 
       const renderedDOM: HTMLElement = renderIntoDocument(
         <TextField
-          defaultValue='initial value'
+          value='initial value'
           onGetErrorMessage={ validatorSpy }
           validateOnFocusIn
         />
@@ -287,42 +287,52 @@ describe('TextField', () => {
 
       ReactTestUtils.Simulate.focus(inputDOM);
       expect(validationCallCount).toEqual(2);
+
+      ReactTestUtils.Simulate.input(inputDOM, mockEvent('the input '));
+      ReactTestUtils.Simulate.input(inputDOM, mockEvent('the input value'));
+      ReactTestUtils.Simulate.focus(inputDOM);
+      expect(validationCallCount).toEqual(3);
     });
 
     it('should trigger validation only on blur', () => {
       let validationCallCount = 0;
-      let validatorSpy = (value: string) => {
+      const validatorSpy = (value: string) => {
         validationCallCount++;
         return value.length > 3 ? errorMessage : '';
       };
 
       const renderedDOM: HTMLElement = renderIntoDocument(
         <TextField
-          defaultValue='initial value'
+          value='initial value'
           onGetErrorMessage={ validatorSpy }
           validateOnFocusOut
         />
       );
 
       const inputDOM: HTMLInputElement = renderedDOM.getElementsByTagName('input')[0];
-      ReactTestUtils.Simulate.focus(inputDOM);
       ReactTestUtils.Simulate.input(inputDOM, mockEvent('the input value'));
       expect(validationCallCount).toEqual(1);
 
       ReactTestUtils.Simulate.blur(inputDOM);
       expect(validationCallCount).toEqual(2);
+
+      ReactTestUtils.Simulate.input(inputDOM, mockEvent('the input va'));
+      ReactTestUtils.Simulate.input(inputDOM, mockEvent('the input value'));
+
+      ReactTestUtils.Simulate.blur(inputDOM);
+      expect(validationCallCount).toEqual(3);
     });
 
     it('should trigger validation on both blur and focus', () => {
       let validationCallCount = 0;
-      let validatorSpy = (value: string) => {
+      const validatorSpy = (value: string) => {
         validationCallCount++;
         return value.length > 3 ? errorMessage : '';
       };
 
       const renderedDOM: HTMLElement = renderIntoDocument(
         <TextField
-          defaultValue='initial value'
+          value='initial value'
           onGetErrorMessage={ validatorSpy }
           validateOnFocusOut
           validateOnFocusIn
@@ -335,21 +345,32 @@ describe('TextField', () => {
 
       ReactTestUtils.Simulate.focus(inputDOM);
       expect(validationCallCount).toEqual(2);
+
+      ReactTestUtils.Simulate.input(inputDOM, mockEvent('value before foc'));
+      ReactTestUtils.Simulate.input(inputDOM, mockEvent('value before focus'));
+      ReactTestUtils.Simulate.focus(inputDOM);
+      expect(validationCallCount).toEqual(3);
+
       ReactTestUtils.Simulate.input(inputDOM, mockEvent('value before blur'));
       ReactTestUtils.Simulate.blur(inputDOM);
-      expect(validationCallCount).toEqual(3);
+      expect(validationCallCount).toEqual(4);
+
+      ReactTestUtils.Simulate.input(inputDOM, mockEvent('value before bl'));
+      ReactTestUtils.Simulate.input(inputDOM, mockEvent('value before blur'));
+      ReactTestUtils.Simulate.blur(inputDOM);
+      expect(validationCallCount).toEqual(5);
     });
 
     it('should not trigger validation on component mount', () => {
       let validationCallCount = 0;
-      let validatorSpy = (value: string) => {
+      const validatorSpy = (value: string) => {
         validationCallCount++;
         return '';
       };
 
       renderIntoDocument(
         <TextField
-          defaultValue='initial value'
+          value='initial value'
           onGetErrorMessage={ validatorSpy }
           validateOnLoad={ false }
         />
@@ -381,7 +402,7 @@ describe('TextField', () => {
 
   it('should call onChanged handler for input change', () => {
     let callCount = 0;
-    let onChangedSpy = (value: string) => { callCount++; };
+    const onChangedSpy = (value: string) => { callCount++; };
 
     const renderedDOM: HTMLElement = renderIntoDocument(
       <TextField
@@ -404,6 +425,24 @@ describe('TextField', () => {
     expect(callCount).toEqual(2);
   });
 
+  it('should not call onChanged when initial value is undefined and input change is an empty string', () => {
+    let callCount = 0;
+    const onChangedSpy = (value: string) => { callCount++; };
+
+    const renderedDOM: HTMLElement = renderIntoDocument(
+      <TextField
+        onChanged={ onChangedSpy }
+      />
+    );
+
+    expect(callCount).toEqual(0);
+    const inputDOM: HTMLInputElement = renderedDOM.getElementsByTagName('input')[0];
+
+    ReactTestUtils.Simulate.input(inputDOM, mockEvent(''));
+    ReactTestUtils.Simulate.change(inputDOM, mockEvent(''));
+    expect(callCount).toEqual(0);
+  });
+
   it('should select a range of text', () => {
     let textField: TextField | undefined;
     const initialValue = 'initial value';
diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
index 3222f58884723..8962b4c61e680 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.tsx
@@ -55,7 +55,6 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
   private _latestValue: string | undefined;
   private _latestValidateValue: string | undefined;
   private _isDescriptionAvailable: boolean;
-  private _isControlled: boolean;
   private _textElement: HTMLTextAreaElement;
 
   public constructor(props: ITextFieldProps) {
@@ -74,8 +73,10 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
     this._id = getId('TextField');
     this._descriptionId = getId('TextFieldDescription');
 
+    this._latestValue = props.value || props.defaultValue || '';
+
     this.state = {
-      value: props.value || props.defaultValue || '',
+      value: this._latestValue,
       isFocused: false,
       errorMessage: ''
     };
@@ -87,7 +88,6 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
     this._delayedValidate = this._async.debounce(this._validate, this.props.deferredValidationTime);
     this._lastValidation = 0;
     this._isDescriptionAvailable = false;
-    this._isControlled = typeof props.value !== 'string';
   }
 
   /**
@@ -118,7 +118,10 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
       this.setState({
         value: newProps.value,
         errorMessage: ''
-      } as ITextFieldState);
+      } as ITextFieldState,
+        () => {
+          this._adjustInputHeight();
+        });
 
       this._delayedValidate(newProps.value);
     }
@@ -129,7 +132,7 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
   }
 
   public render() {
-    let {
+    const {
       className,
       description,
       disabled,
@@ -147,7 +150,7 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
       onRenderSuffix = this._onRenderSuffix,
       onRenderLabel = this._onRenderLabel
     } = this.props;
-    let { isFocused } = this.state;
+    const { isFocused } = this.state;
     const errorMessage = this._errorMessage;
     this._isDescriptionAvailable = Boolean(description || errorMessage);
     const renderProps: ITextFieldProps = { ...this.props, componentId: this._id };
@@ -293,7 +296,7 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
     const {
       label,
       componentId
-     } = props;
+    } = props;
     if (label) {
       return (<Label htmlFor={ componentId }>{ label }</Label>);
     }
@@ -302,21 +305,21 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
 
   // @deprecated
   private _onRenderAddon(props: ITextFieldProps): JSX.Element {
-    let { addonString } = props;
+    const { addonString } = props;
     return (
       <span style={ { paddingBottom: '1px' } }>{ addonString }</span>
     );
   }
 
   private _onRenderPrefix(props: ITextFieldProps): JSX.Element {
-    let { prefix } = props;
+    const { prefix } = props;
     return (
       <span style={ { paddingBottom: '1px' } }>{ prefix }</span>
     );
   }
 
   private _onRenderSuffix(props: ITextFieldProps): JSX.Element {
-    let { suffix } = props;
+    const { suffix } = props;
     return (
       <span style={ { paddingBottom: '1px' } }>{ suffix }</span>
     );
@@ -346,7 +349,7 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
   }
 
   private _renderTextArea(): React.ReactElement<React.HTMLAttributes<HTMLAreaElement>> {
-    let textAreaProps = getNativeProps(this.props, textAreaProperties, ['defaultValue']);
+    const textAreaProps = getNativeProps(this.props, textAreaProperties, ['defaultValue']);
 
     return (
       <textarea
@@ -354,9 +357,8 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
         { ...textAreaProps }
         ref={ this._resolveRef('_textElement') }
         value={ this.state.value }
-        onInput={ this._isControlled ? this._onInputChange : undefined }
-        onChange={ this._isControlled ? this._onInputChange : undefined }
-        readOnly={ !this._isControlled }
+        onInput={ this._onInputChange }
+        onChange={ this._onInputChange }
         className={ this._getTextElementClassName() }
         aria-describedby={ this._isDescriptionAvailable ? this._descriptionId : null }
         aria-invalid={ !!this.state.errorMessage }
@@ -368,7 +370,7 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
   }
 
   private _renderInput(): React.ReactElement<React.HTMLAttributes<HTMLInputElement>> {
-    let inputProps = getNativeProps<React.HTMLAttributes<HTMLInputElement>>(this.props, inputProperties, ['defaultValue']);
+    const inputProps = getNativeProps<React.HTMLAttributes<HTMLInputElement>>(this.props, inputProperties, ['defaultValue']);
 
     return (
       <input
@@ -377,9 +379,8 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
         { ...inputProps }
         ref={ this._resolveRef('_textElement') }
         value={ this.state.value }
-        onInput={ this._isControlled ? this._onInputChange : undefined }
-        onChange={ this._isControlled ? this._onInputChange : undefined }
-        readOnly={ !this._isControlled }
+        onInput={ this._onInputChange }
+        onChange={ this._onInputChange }
         className={ this._getTextElementClassName() }
         aria-label={ this.props.ariaLabel }
         aria-describedby={ this._isDescriptionAvailable ? this._descriptionId : null }
@@ -422,14 +423,16 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
   }
 
   private _validate(value: string | undefined): void {
+    const { validateOnFocusIn, validateOnFocusOut } = this.props;
+
     // In case of _validate called multi-times during executing validate logic with promise return.
-    if (this._latestValidateValue === value) {
+    if (this._latestValidateValue === value && !(validateOnFocusIn || validateOnFocusOut)) {
       return;
     }
 
     this._latestValidateValue = value;
-    let onGetErrorMessage = this.props.onGetErrorMessage as (value: string) => string | PromiseLike<string> | undefined;
-    let result = onGetErrorMessage(value || '');
+    const onGetErrorMessage = this.props.onGetErrorMessage as (value: string) => string | PromiseLike<string> | undefined;
+    const result = onGetErrorMessage(value || '');
 
     if (result !== undefined) {
       if (typeof result === 'string') {
@@ -438,7 +441,7 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
         } as ITextFieldState);
         this._notifyAfterValidate(value, result);
       } else {
-        let currentValidation: number = ++this._lastValidation;
+        const currentValidation: number = ++this._lastValidation;
 
         result.then((errorMessage: string) => {
           if (this._isMounted && currentValidation === this._lastValidation) {
@@ -464,7 +467,7 @@ export class TextField extends BaseComponent<ITextFieldProps, ITextFieldState> i
     if (this._textElement && this.props.autoAdjustHeight && this.props.multiline) {
       const textField = this._textElement as HTMLElement;
       textField.style.height = '';
-      let scrollHeight = textField.scrollHeight + 2; // +2 to avoid vertical scroll bars
+      const scrollHeight = textField.scrollHeight + 2; // +2 to avoid vertical scroll bars
       textField.style.height = scrollHeight + 'px';
     }
   }
diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.types.ts b/packages/office-ui-fabric-react/src/components/TextField/TextField.types.ts
index ca25da994a6df..7f32537bc68d4 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextField.types.ts
+++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.types.ts
@@ -132,7 +132,7 @@ export interface ITextFieldProps extends React.AllHTMLAttributes<HTMLInputElemen
 
   /**
    * Current value of the textfield. Only provide this if the textfield is a controlled component where you
-   * are maintaining its current state; otherwise, use the "defaultValue" property. User can't edit if supplied.
+   * are maintaining its current state; otherwise, use the "defaultValue" property.
    */
   value?: string;
 
diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx
index 68251f037c2ab..15ebbbd00d519 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/TextFieldPage.tsx
@@ -119,6 +119,8 @@ export class TextFieldPage extends React.Component<IComponentDemoPageProps, {}>
             </ExampleCard>
           </div>
         }
+        allowNativeProps={ true }
+        nativePropsElement={ ['input', 'textarea'] }
         propertiesTables={
           <PropertiesTableSet
             sources={ [
@@ -168,7 +170,7 @@ export class TextFieldPage extends React.Component<IComponentDemoPageProps, {}>
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...TextFieldStatus}
+            { ...TextFieldStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap b/packages/office-ui-fabric-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
index de2efec846269..5fb70d8366cdf 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/TextField/__snapshots__/TextField.test.tsx.snap
@@ -43,7 +43,6 @@ exports[`TextField renders TextField correctly 1`] = `
         onChange={[Function]}
         onFocus={[Function]}
         onInput={[Function]}
-        readOnly={false}
         type="text"
         value=""
       />
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/NumberTextField.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/NumberTextField.tsx
index 34ad4ead87cef..899829d9ce115 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/examples/NumberTextField.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/NumberTextField.tsx
@@ -30,7 +30,7 @@ export class NumberTextField extends React.Component<INumberTextFieldProps, INum
         <TextField
           className='NumberTextField-textField'
           label={ this.props.label }
-          defaultValue={ this.state.value }
+          value={ this.state.value }
           onChanged={ this._onChanged }
           onGetErrorMessage={ this._validateNumber }
         />
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Basic.Example.tsx
index 658e203cd2bb1..0413006a10d4f 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Basic.Example.tsx
@@ -9,21 +9,6 @@ export class TextFieldBasicExample extends React.Component<any, any> {
         <TextField
           label='Standard'
         />
-        <TextField
-          label='Standard with a blank value attribute'
-          value=''
-          description='Can not be edited by the user.'
-        />
-        <TextField
-          label='Standard with value attribute'
-          value='With a set value.'
-          description='Can not be edited by the user.'
-        />
-        <TextField
-          label='Standard with defaultValue attribute'
-          defaultValue='With a set defaultValue.'
-          description='Can be edited by the user.'
-        />
         <TextField
           label='Disabled'
           disabled={ true }
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.CustomRender.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.CustomRender.Example.tsx
index 4ff3434b21c6c..818f76a8c9b48 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.CustomRender.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.CustomRender.Example.tsx
@@ -30,7 +30,7 @@ export class TextFieldCustomRenderExample extends React.Component<{}, {
   @autobind
   private _onRenderLabel(props: ITextFieldProps): JSX.Element {
 
-    let { isCalloutVisible } = this.state;
+    const { isCalloutVisible } = this.state;
     return (
       <div className='ms-CustomRenderExample' style={ { display: 'flex', alignItems: 'center' } }>
         <span>TextField with custom label render</span>
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.ErrorMessage.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.ErrorMessage.Example.tsx
index fb70dca88a381..a9b365f259e13 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.ErrorMessage.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.ErrorMessage.Example.tsx
@@ -25,23 +25,23 @@ export class TextFieldErrorMessageExample extends React.Component<{}, {}> {
         />
         <TextField
           label='TextField with a string-based validator. Hint: the length of the input string must be less than 3.'
-          defaultValue='It should show an error message under this error message on render.'
+          value='It should show an error message under this error message on render.'
           onGetErrorMessage={ this._getErrorMessage }
         />
         <TextField
           label='TextField with a string-based validator. Hint: the length of the input string must be less than 3.'
-          defaultValue='It will run validation only on input change and not on render.'
+          value='It will run validation only on input change and not on render.'
           onGetErrorMessage={ this._getErrorMessage }
           validateOnLoad={ false }
         />
         <TextField
           label='TextField with a Promise-based validator. Hint: the length of the input string must be less than 3.'
-          defaultValue='It should show an error message under this error message 5 seconds after render.'
+          value='It should show an error message under this error message 5 seconds after render.'
           onGetErrorMessage={ this._getErrorMessagePromise }
         />
         <TextField
           label='TextField has both description and error message.'
-          defaultValue='It should show description and error message on render at the same time.'
+          value='It should show description and error message on render at the same time.'
           description='This field has description and error message both under the input box.'
           onGetErrorMessage={ this._getErrorMessage }
         />
diff --git a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Multiline.Example.tsx b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Multiline.Example.tsx
index b15fe8d8929ee..480dabd284aa0 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Multiline.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/examples/TextField.Multiline.Example.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { TextField } from 'office-ui-fabric-react/lib/TextField';
 import './TextField.Examples.scss';
+import { lorem } from '@uifabric/example-app-base';
 
 export class TextFieldMultilineExample extends React.Component<any, any> {
   public render() {
@@ -16,6 +17,7 @@ export class TextFieldMultilineExample extends React.Component<any, any> {
           multiline
           rows={ 4 }
           disabled={ true }
+          value={ lorem(100) }
         />
         <TextField
           label='Required'
diff --git a/packages/office-ui-fabric-react/src/components/Theme/ThemePage.tsx b/packages/office-ui-fabric-react/src/components/Theme/ThemePage.tsx
index 05e8b1e9654b9..2f3dcf4f309b8 100644
--- a/packages/office-ui-fabric-react/src/components/Theme/ThemePage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Theme/ThemePage.tsx
@@ -5,7 +5,8 @@ import { defaultTheme } from './defaultTheme';
 import { Callout } from 'office-ui-fabric-react/lib/Callout';
 import { DetailsList, DetailsListLayoutMode as LayoutMode } from 'office-ui-fabric-react/lib/DetailsList';
 import { SelectionMode } from 'office-ui-fabric-react/lib/Selection';
-import { ColorPicker, IColorPickerProps } from 'office-ui-fabric-react/lib/ColorPicker';
+import { ColorPicker } from 'office-ui-fabric-react/lib/ColorPicker';
+import { autobind } from '../../Utilities';
 import './ThemePage.scss';
 const ThemeCodeExample = require('!raw-loader!office-ui-fabric-react/src/components/Theme/examples/ThemeCode.Example.tsx');
 
@@ -22,11 +23,7 @@ export class ThemePage extends React.Component<IComponentDemoPageProps, {
     index: number;
   };
 }> {
-
-  public refs: {
-    [key: string]: React.ReactInstance;
-    list: DetailsList;
-  };
+  private _list: DetailsList;
 
   constructor(props: {}) {
     super(props);
@@ -45,7 +42,7 @@ export class ThemePage extends React.Component<IComponentDemoPageProps, {
   }
 
   public render() {
-    let { colors, colorPickerProps } = this.state;
+    const { colors, colorPickerProps } = this.state;
 
     return (
       <div className='Themes'>
@@ -60,7 +57,7 @@ export class ThemePage extends React.Component<IComponentDemoPageProps, {
         <h1 className={ FontClassNames.xLarge }>Define a theme</h1>
         <div>
           <DetailsList
-            ref='list'
+            ref={ this._createDetailsListRef }
             items={ colors }
             selectionMode={ SelectionMode.none }
             layoutMode={ LayoutMode.fixedColumns }
@@ -115,6 +112,11 @@ export class ThemePage extends React.Component<IComponentDemoPageProps, {
     );
   }
 
+  @autobind
+  private _createDetailsListRef(component: DetailsList) {
+    this._list = component;
+  }
+
   private _onSwatchClicked(item: any, index: number, ev: React.MouseEvent<HTMLElement>) {
     this.setState({
       colorPickerProps: {
@@ -126,14 +128,14 @@ export class ThemePage extends React.Component<IComponentDemoPageProps, {
   }
 
   private _onColorChanged(index: number, newColor: string) {
-    let { colors } = this.state;
-    let color = colors[index];
-    let palette: Partial<IPalette> = {};
+    const { colors } = this.state;
+    const color = colors[index];
+    const palette: Partial<IPalette> = {};
 
     color.value = newColor;
 
     for (let i = 0; i < colors.length; i++) {
-      let themeColor = colors[i];
+      const themeColor = colors[i];
 
       (palette as any)[themeColor.key] = themeColor.value;
     }
@@ -141,7 +143,7 @@ export class ThemePage extends React.Component<IComponentDemoPageProps, {
     loadTheme({ palette });
 
     // The theme has changed values, but color state is the same. Force an update on the list.
-    this.refs.list.forceUpdate();
+    this._list.forceUpdate();
   }
 
   private _onPickerDismiss() {
diff --git a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGenerator.ts b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGenerator.ts
index dcf94446fc274..97fe626291e40 100644
--- a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGenerator.ts
+++ b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGenerator.ts
@@ -55,9 +55,9 @@ export class ThemeGenerator {
    */
   public static insureSlots(slotRules: IThemeRules, isInverted: boolean) {
     // Get all the "root" rules, the ones which don't inherit. Then "set" them to trigger updating dependent slots.
-    for (let ruleName in slotRules) {
+    for (const ruleName in slotRules) {
       if (slotRules.hasOwnProperty(ruleName)) {
-        let rule: IThemeSlotRule = slotRules[ruleName];
+        const rule: IThemeSlotRule = slotRules[ruleName];
         if (!rule.inherits && !rule.value) {
           if (!rule.color) {
             throw 'A color slot rule that does not inherit must provide its own color.';
@@ -75,10 +75,10 @@ export class ThemeGenerator {
    *   ... }
    */
   public static getThemeAsJson(slotRules: IThemeRules): any {
-    let theme: any = {};
-    for (let ruleName in slotRules) {
+    const theme: any = {};
+    for (const ruleName in slotRules) {
       if (slotRules.hasOwnProperty(ruleName)) {
-        let rule: IThemeSlotRule = slotRules[ruleName];
+        const rule: IThemeSlotRule = slotRules[ruleName];
         theme[rule.name] = rule.color ? rule.color.str : rule.value || '';
       }
     }
@@ -91,13 +91,13 @@ export class ThemeGenerator {
    * ...
    */
   public static getThemeAsSass(slotRules: IThemeRules): any {
-    let sassVarTemplate = '${0}Color: "[theme: {1}, default: {2}]";\n';
+    const sassVarTemplate = '${0}Color: "[theme: {1}, default: {2}]";\n';
     let output = '';
 
-    for (let ruleName in slotRules) {
+    for (const ruleName in slotRules) {
       if (slotRules.hasOwnProperty(ruleName)) {
-        let rule: IThemeSlotRule = slotRules[ruleName];
-        let camelCasedName = rule.name.charAt(0).toLowerCase() + rule.name.slice(1);
+        const rule: IThemeSlotRule = slotRules[ruleName];
+        const camelCasedName = rule.name.charAt(0).toLowerCase() + rule.name.slice(1);
         output += format(sassVarTemplate,
           camelCasedName,
           camelCasedName,
@@ -115,17 +115,17 @@ export class ThemeGenerator {
    * }
    */
   public static getThemeForPowerShell(slotRules: IThemeRules): any {
-    let psVarTemplate = '"{0}" = "{1}";\n';
+    const psVarTemplate = '"{0}" = "{1}";\n';
     let output = '';
 
-    for (let ruleName in slotRules) {
+    for (const ruleName in slotRules) {
       if (slotRules.hasOwnProperty(ruleName)) {
-        let rule: IThemeSlotRule = slotRules[ruleName];
+        const rule: IThemeSlotRule = slotRules[ruleName];
         if (rule.value) {
           // skip this one, it's not a color
           continue;
         }
-        let camelCasedName = rule.name.charAt(0).toLowerCase() + rule.name.slice(1);
+        const camelCasedName = rule.name.charAt(0).toLowerCase() + rule.name.slice(1);
         let outputColor = rule.color ? '#' + rule.color.hex : rule.value || '';
         // powershell endpoint uses the RGBA format
         if (rule.color && rule.color.a && rule.color.a !== 100) {
@@ -170,7 +170,7 @@ export class ThemeGenerator {
       }
 
       // then update dependent colors
-      for (let ruleToUpdate of rule.dependentRules) {
+      for (const ruleToUpdate of rule.dependentRules) {
         ThemeGenerator._setSlot(ruleToUpdate, rule.color, isInverted, false, overwriteCustomColor);
       }
     }
diff --git a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.scss b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.scss
index a03b7501d462b..f6fe372072610 100644
--- a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.scss
+++ b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.scss
@@ -1,70 +1,73 @@
 @import '../../common/common';
 :global {
-
-.ms-themer {
-  padding: 12px;
-  h2, h3, h4 {
-    color: $ms-color-black;
+  .overview .themeGeneratorPageLink {
+    color: $ms-color-themePrimary;
   }
-}
-.ms-themer h3 {
-  margin: 0;
-}
 
-.ms-themer-paletteSlot {
-  text-align: center;
-  padding: 16px;
-}
+  .ms-themer {
+    padding: 12px;
+    h2, h3, h4 {
+      color: $ms-color-black;
+    }
+  }
+  .ms-themer h3 {
+    margin: 0;
+  }
 
-.ms-themer-swatch {
-  display: inline-block;
-  flex-shrink: 0;
-  height: 36px;
-  width: 36px;
-  margin: 4px;
-}
+  .ms-themer-paletteSlot {
+    text-align: center;
+    padding: 16px;
+  }
 
-.ms-themer-swatchBg {
-  padding: 4px;
-  font-size: 0;
   .ms-themer-swatch {
-    height: 28px;
-    width: 28px;
-    margin: 2px;
+    display: inline-block;
+    flex-shrink: 0;
+    height: 36px;
+    width: 36px;
+    margin: 4px;
   }
-}
 
-.ms-themer-example {
-  padding: 20px;
-  max-width: 40%;
-}
+  .ms-themer-swatchBg {
+    padding: 4px;
+    font-size: 0;
+    .ms-themer-swatch {
+      height: 28px;
+      width: 28px;
+      margin: 2px;
+    }
+  }
 
-.ms-themer-fabricPalette-root {
-  display: flex;
-  > div {
-    padding-left: 20px;
+  .ms-themer-example {
+    padding: 20px;
+    max-width: 40%;
   }
-}
 
-.ms-themer-accessibilityTable td {
-  padding: 4px;
-  text-align: center;
-}
+  .ms-themer-fabricPalette-root {
+    display: flex;
+    > div {
+      padding-left: 20px;
+    }
+  }
+
+  .ms-themer-accessibilityTable td {
+    padding: 4px;
+    text-align: center;
+  }
 
-.ms-themer-slot {
-  display: flex;
-  align-items: center;
-  overflow: auto;
-}
+  .ms-themer-slot {
+    display: flex;
+    align-items: center;
+    overflow: auto;
+  }
 
-.ms-themer-output-root {
-  display: flex;
-  textarea {
-    height: 400px;
-    width: 280px;
-    margin-right: 28px;
-    background-color: white;
-    color: #333;
+  .ms-themer-output-root {
+    display: flex;
+    textarea {
+      height: 400px;
+      width: 280px;
+      margin-right: 28px;
+      background-color: white;
+      color: #333;
+    }
   }
-}
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx
index fbbe633f9bdd1..2f30f2ad6dd9c 100644
--- a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeGeneratorPage.tsx
@@ -5,7 +5,9 @@ import {
   autobind
 } from 'office-ui-fabric-react/lib/Utilities';
 
-import { loadTheme } from 'office-ui-fabric-react/lib/Styling';
+import {
+  loadTheme
+} from 'office-ui-fabric-react/lib/Styling';
 import {
   IColor,
   getContrastRatio,
@@ -49,7 +51,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
   constructor(props: {}) {
     super(props);
 
-    let themeRules = themeRulesStandardCreator();
+    const themeRules = themeRulesStandardCreator();
     ThemeGenerator.insureSlots(themeRules, isDark(themeRules[BaseSlots[BaseSlots.backgroundColor]].color!));
 
     this.state = {
@@ -62,7 +64,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
 
   public componentWillUnmount(): void {
     // remove temp styles
-    let root = document.querySelector('.App-content') as HTMLElement;
+    const root = document.querySelector('.App-content') as HTMLElement;
     if (root) {
       root.style.backgroundColor = '';
       root.style.color = '';
@@ -71,15 +73,15 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
     document.body.style.color = '';
 
     // and apply the default theme to overwrite any existing custom theme
-    let themeRules = themeRulesStandardCreator();
+    const themeRules = themeRulesStandardCreator();
     ThemeGenerator.insureSlots(themeRules, false);
     loadTheme({ palette: themeRules });
   }
 
   public render() {
-    let { colorPickerVisible, colorPickerSlotRule, colorPickerElement } = this.state;
+    const { colorPickerVisible, colorPickerSlotRule, colorPickerElement } = this.state;
 
-    let fabricThemeSlots =
+    const fabricThemeSlots =
       [this._fabricSlotWidget(FabricSlots.themeDarker),
       this._fabricSlotWidget(FabricSlots.themeDark),
       this._fabricSlotWidget(FabricSlots.themeDarkAlt),
@@ -89,14 +91,15 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
       this._fabricSlotWidget(FabricSlots.themeLight),
       this._fabricSlotWidget(FabricSlots.themeLighter),
       this._fabricSlotWidget(FabricSlots.themeLighterAlt)];
-    let fabricNeutralForegroundSlots =
+    const fabricNeutralForegroundSlots =
       [this._fabricSlotWidget(FabricSlots.black),
       this._fabricSlotWidget(FabricSlots.neutralDark),
       this._fabricSlotWidget(FabricSlots.neutralPrimary),
+      this._fabricSlotWidget(FabricSlots.neutralPrimaryAlt),
       this._fabricSlotWidget(FabricSlots.neutralSecondary),
       this._fabricSlotWidget(FabricSlots.neutralTertiary)
       ];
-    let fabricNeutralBackgroundSlots =
+    const fabricNeutralBackgroundSlots =
       [this._fabricSlotWidget(FabricSlots.neutralTertiaryAlt),
       this._fabricSlotWidget(FabricSlots.neutralQuaternary),
       this._fabricSlotWidget(FabricSlots.neutralQuaternaryAlt),
@@ -107,13 +110,13 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
 
     return (
       <div className='ms-themer'>
-        <p>
-          This tool helps you easily create all the shades and slots for a custom theme.
-          The theme can be used by Fabric React's styling package, see the <a href='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/styling'>documentation</a>.
+        <div className='overview'>
+          <h2 id='Overview'>Overview</h2>
+          <p>This tool helps you easily create all the shades and slots for a custom theme.
+          The theme can be used by Fabric React's styling package, see the <a className={ 'themeGeneratorPageLink' } href='https://github.com/OfficeDev/office-ui-fabric-react/tree/master/packages/styling'>documentation</a>.
           <br />
-          As you modify one of the three base colors, the theme will update automatically based on predefined rules. You can modify each individual slot below as well.
-        </p>
-
+            As you modify one of the three base colors, the theme will update automatically based on predefined rules. You can modify each individual slot below as well.</p>
+        </div>
         {/* Hello! You've found hidden functionality for generating a theme from an image. This uses Microsoft's
           * Cognitive Vision API, documented here:
           * https://docs.microsoft.com/en-us/azure/cognitive-services/computer-vision/quickstarts/javascript
@@ -158,7 +161,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
         { this._outputSection() }
         <br />
 
-        <h2>Fabric Palette</h2>
+        <h2 id='Fabric palette'>Fabric palette</h2>
         <p>The original Fabric palette slots. These are raw colors with no prescriptive uses. Each one is a shade or tint of a base color.</p>
         <div className={ 'ms-themer-fabricPalette-root' }>
           <div>{ fabricThemeSlots }</div>
@@ -173,7 +176,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
         </div>
         <br />
 
-        <h3>Samples</h3>
+        <h2 id='Samples'>Samples</h2>
         { <div style={ { display: 'flex', flexDirection: 'row' } }>
           <div className='ms-themer-example'>
             <TextFieldBasicExample />
@@ -193,7 +196,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
                 }] }
               label='Pick one'
               required={ true }
-            />,
+            />
             <ChoiceGroup
               options={ [
                 {
@@ -218,7 +221,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
           </div>
         </div> }
 
-        <h3>Accessibility</h3>
+        <h2 id='Accessibility'>Accessibility</h2>
         <p>Each pair of colors below should produce legible text and have a minimum contrast ratio of 4.5.</p>
         <table className='ms-themer-accessibilityTable'>
           <thead>
@@ -242,7 +245,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
     (document.getElementById('imagePreview') as HTMLImageElement).src = this._imgUrl;
 
     if (this._imgUrl) {
-      let xhr = new XMLHttpRequest();
+      const xhr = new XMLHttpRequest();
       xhr.addEventListener('load', this._cognitiveVisionCallback.bind(this));
       // you may need to change the URL here
       xhr.open('POST', 'https://westus.api.cognitive.microsoft.com/vision/v1.0/analyze?visualFeatures=Description%2CColor&details=&language=en');
@@ -252,7 +255,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
       xhr.send('{ "url": "' + this._imgUrl + '" }');
     } else {
       // remove related properties from theme
-      let { themeRules } = this.state;
+      const { themeRules } = this.state;
       if (themeRules.hasOwnProperty(BackgroundImageUriKey)) {
         delete themeRules[BackgroundImageUriKey];
       }
@@ -298,7 +301,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
         return '#fff';
       };
 
-      let { themeRules } = this.state;
+      const { themeRules } = this.state;
       const bgColor = getHexFromColor(response.color.dominantColorBackground, true);
       const bgColorIsDark = isDark(getColorFromString(bgColor)!);
       ThemeGenerator.setSlot(
@@ -349,7 +352,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
       clearTimeout(this._semanticSlotColorChangeTimeout);
     }
     this._semanticSlotColorChangeTimeout = this._async.setTimeout(() => {
-      let { themeRules } = this.state;
+      const { themeRules } = this.state;
 
       ThemeGenerator.setSlot(slotRule, color, isDark(themeRules[BaseSlots[BaseSlots.backgroundColor]].color!), true, true);
       this.setState({ themeRules: themeRules }, this._makeNewTheme);
@@ -360,7 +363,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
 
   @autobind
   private _onSwatchClick(slotRule: IThemeSlotRule, ev: React.MouseEvent<HTMLElement>) {
-    let { colorPickerSlotRule, colorPickerElement } = this.state;
+    const { colorPickerSlotRule, colorPickerElement } = this.state;
 
     if (colorPickerSlotRule !== null && colorPickerSlotRule !== undefined && !!colorPickerElement && colorPickerSlotRule === slotRule && colorPickerElement === ev.target) { // same one, close it
       this.setState({ colorPickerVisible: false, colorPickerSlotRule: null, colorPickerElement: null });
@@ -402,11 +405,11 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
 
   @autobind
   private _accessibilityRow(foreground: FabricSlots, background: FabricSlots) {
-    let themeRules = this.state.themeRules;
-    let bgc: IColor = themeRules[FabricSlots[background]].color!;
-    let fgc: IColor = themeRules[FabricSlots[foreground]].color!;
+    const themeRules = this.state.themeRules;
+    const bgc: IColor = themeRules[FabricSlots[background]].color!;
+    const fgc: IColor = themeRules[FabricSlots[foreground]].color!;
 
-    let contrastRatio = getContrastRatio(bgc, fgc);
+    const contrastRatio = getContrastRatio(bgc, fgc);
     let contrastRatioString = String(contrastRatio);
     contrastRatioString = contrastRatioString.substr(0, contrastRatioString.indexOf('.') + 3);
     if (contrastRatio < 4.5) {
@@ -427,8 +430,8 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
     const themeRules = this.state.themeRules;
 
     // strip out the unnecessary shade slots from the final output theme
-    let abridgedTheme: IThemeRules = {};
-    for (let ruleName in themeRules) {
+    const abridgedTheme: IThemeRules = {};
+    for (const ruleName in themeRules) {
       if (themeRules.hasOwnProperty(ruleName)) {
         if (ruleName.indexOf('ColorShade') === -1 && ruleName !== 'primaryColor' && ruleName !== 'backgroundColor' && ruleName !== 'foregroundColor') {
           abridgedTheme[ruleName] = themeRules[ruleName];
@@ -438,7 +441,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
 
     return (
       <div>
-        <h2>Output</h2>
+        <h2 id='Output'>Output</h2>
         <div className={ 'ms-themer-output-root' }>
           <div>
             <h3>JSON</h3>
@@ -471,17 +474,23 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
 
   @autobind
   private _makeNewTheme() {
-    let themeAsJson: { [key: string]: string } = ThemeGenerator.getThemeAsJson(this.state.themeRules);
+    const themeAsJson: { [key: string]: string } = ThemeGenerator.getThemeAsJson(this.state.themeRules);
     console.log('New theme...', themeAsJson);
 
-    let root = document.querySelector('.App-content') as HTMLElement;
+    const finalTheme = loadTheme({
+      ...{ palette: themeAsJson },
+      isInverted: isDark(this.state.themeRules[BaseSlots[BaseSlots.backgroundColor]].color!)
+    });
+
+    const root = document.querySelector('.App-content') as HTMLElement;
     if (root) {
-      root.style.backgroundColor = themeAsJson.backgroundColor;
-      root.style.color = themeAsJson.bodyText;
+      root.style.backgroundColor = finalTheme.semanticColors.bodyBackground;
+      root.style.color = finalTheme.semanticColors.bodyText;
     }
-    document.body.style.backgroundColor = themeAsJson.backgroundColor;
-    document.body.style.color = themeAsJson.bodyText;
-    console.log('Full theme... ', loadTheme({ palette: themeAsJson }));
+
+    document.body.style.backgroundColor = finalTheme.semanticColors.bodyBackground;
+    document.body.style.color = finalTheme.semanticColors.bodyText;
+    console.log('New theme:', finalTheme);
   }
 
   @autobind
@@ -493,7 +502,7 @@ export class ThemeGeneratorPage extends BaseComponent<{}, IThemeGeneratorPageSta
         clearTimeout(colorChangeTimeout);
       }
       colorChangeTimeout = this._async.setTimeout(() => {
-        let themeRules = this.state.themeRules;
+        const themeRules = this.state.themeRules;
         const currentIsDark = isDark(themeRules[BaseSlots[BaseSlots.backgroundColor]].color!);
         ThemeGenerator.setSlot(
           themeRules[BaseSlots[baseSlot]],
diff --git a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeRulesStandard.ts b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeRulesStandard.ts
index 38a122110f205..be99ff5655af2 100644
--- a/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeRulesStandard.ts
+++ b/packages/office-ui-fabric-react/src/components/ThemeGenerator/ThemeRulesStandard.ts
@@ -59,7 +59,7 @@ export enum SemanticColorSlots {
 }
 
 export function themeRulesStandardCreator() {
-  let slotRules: IThemeRules = {};
+  const slotRules: IThemeRules = {};
 
   /*** BASE COLORS and their SHADES */
   // iterate through each base slot and make the SlotRules for those
@@ -76,8 +76,8 @@ export function themeRulesStandardCreator() {
       if (shadeName === Shade[Shade.Unshaded]) {
         return;
       }
-      let inherits = slotRules[baseSlot];
-      let thisSlotRule = {
+      const inherits = slotRules[baseSlot];
+      const thisSlotRule = {
         name: baseSlot + shadeName,
         inherits: slotRules[baseSlot],
         asShade: shadeValue,
@@ -120,8 +120,8 @@ export function themeRulesStandardCreator() {
   slotRules[BaseSlots[BaseSlots.foregroundColor] + Shade[Shade.Shade8]].color = getColorFromString('#000000');
 
   function _makeFabricSlotRule(slotName: string, inheritedBase: BaseSlots, inheritedShade: Shade, isBackgroundShade = false) {
-    let inherits = slotRules[BaseSlots[inheritedBase]];
-    let thisSlotRule = {
+    const inherits = slotRules[BaseSlots[inheritedBase]];
+    const thisSlotRule = {
       name: slotName,
       inherits: inherits,
       asShade: inheritedShade,
@@ -149,8 +149,8 @@ export function themeRulesStandardCreator() {
   _makeFabricSlotRule(FabricSlots[FabricSlots.neutralQuaternary], BaseSlots.backgroundColor, Shade.Shade5, true);
   _makeFabricSlotRule(FabricSlots[FabricSlots.neutralTertiaryAlt], BaseSlots.backgroundColor, Shade.Shade6, true); // bg6 or fg2
   _makeFabricSlotRule(FabricSlots[FabricSlots.neutralTertiary], BaseSlots.foregroundColor, Shade.Shade3);
-  _makeFabricSlotRule(FabricSlots[FabricSlots.neutralSecondary], BaseSlots.foregroundColor, Shade.Shade5);
-  _makeFabricSlotRule(FabricSlots[FabricSlots.neutralPrimaryAlt], BaseSlots.foregroundColor, Shade.Shade6);
+  _makeFabricSlotRule(FabricSlots[FabricSlots.neutralSecondary], BaseSlots.foregroundColor, Shade.Shade4);
+  _makeFabricSlotRule(FabricSlots[FabricSlots.neutralPrimaryAlt], BaseSlots.foregroundColor, Shade.Shade5);
   _makeFabricSlotRule(FabricSlots[FabricSlots.neutralPrimary], BaseSlots.foregroundColor, Shade.Unshaded);
   _makeFabricSlotRule(FabricSlots[FabricSlots.neutralDark], BaseSlots.foregroundColor, Shade.Shade7);
 
@@ -176,7 +176,7 @@ export function themeRulesStandardCreator() {
   slotRules[FabricSlots[FabricSlots.themeDarker]].isCustomized = true;
 
   // todo: can remove this once we remove these outdated slots from the product
-  let primaryBackground = 'primaryBackground';
+  const primaryBackground = 'primaryBackground';
   slotRules[primaryBackground] = {
     name: primaryBackground,
     inherits: slotRules[FabricSlots[FabricSlots.white]],
@@ -185,7 +185,7 @@ export function themeRulesStandardCreator() {
   };
   slotRules[FabricSlots[FabricSlots.white]].dependentRules.push(slotRules[primaryBackground]);
 
-  let primaryText = 'primaryText';
+  const primaryText = 'primaryText';
   slotRules[primaryText] = {
     name: primaryText,
     inherits: slotRules[FabricSlots[FabricSlots.neutralPrimary]],
@@ -197,8 +197,8 @@ export function themeRulesStandardCreator() {
   /*** SEMANTIC SLOTS */
   // create the SlotRule for a semantic slot
   function _makeSemanticSlotRule(semanticSlot: SemanticColorSlots, inheritedFabricSlot: FabricSlots) {
-    let inherits = slotRules[FabricSlots[inheritedFabricSlot]];
-    let thisSlotRule = {
+    const inherits = slotRules[FabricSlots[inheritedFabricSlot]];
+    const thisSlotRule = {
       name: SemanticColorSlots[semanticSlot],
       inherits: slotRules[FabricSlots[inheritedFabricSlot]],
       isCustomized: false,
diff --git a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.classNames.ts b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.classNames.ts
index 922df3b113f30..5bc01a79fb4f3 100644
--- a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.classNames.ts
+++ b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.classNames.ts
@@ -27,15 +27,15 @@ export const getClassNames = memoizeFunction((
   const pillUncheckedBackground = semanticColors.bodyBackground;
   const pillCheckedBackground = semanticColors.inputBackgroundChecked;
   const pillCheckedHoveredBackground = semanticColors.inputBackgroundCheckedHovered;
-  const pillCheckedDisabledBackground = semanticColors.disabledText;
+  const pillCheckedDisabledBackground = semanticColors.disabledBodyText;
   const thumbBackground = semanticColors.inputBorderHovered;
   const thumbCheckedBackground = semanticColors.inputForegroundChecked;
-  const thumbDisabledBackground = semanticColors.disabledText;
+  const thumbDisabledBackground = semanticColors.disabledBodyText;
   const thumbCheckedDisabledBackground = semanticColors.disabledBackground;
   const pillBorderColor = semanticColors.smallInputBorder;
   const pillBorderHoveredColor = semanticColors.inputBorderHovered;
-  const pillBorderDisabledColor = semanticColors.disabledText;
-  const textDisabledColor = semanticColors.disabledBodyText;
+  const pillBorderDisabledColor = semanticColors.disabledBodyText;
+  const textDisabledColor = semanticColors.disabledText;
 
   styles = styles || {};
 
diff --git a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.test.tsx b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.test.tsx
index 6ffbae2bcb77d..007fc3c7b5fb2 100644
--- a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.test.tsx
@@ -12,13 +12,13 @@ import { Toggle } from './Toggle';
 describe('Toggle', () => {
 
   it('renders a label', () => {
-    let component = ReactTestUtils.renderIntoDocument(
+    const component = ReactTestUtils.renderIntoDocument(
       <Toggle
         label='Label'
       />
     );
-    let renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
-    let labelElement = renderedDOM.querySelector('.ms-Toggle-label') as Element;
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const labelElement = renderedDOM.querySelector('.ms-Toggle-label') as Element;
 
     expect(labelElement.textContent).toEqual('Label');
   });
@@ -29,26 +29,26 @@ describe('Toggle', () => {
         label='Label'
       />
     );
-    let tree = component.toJSON();
+    const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
   it('renders aria-label', () => {
-    let component = ReactTestUtils.renderIntoDocument(
+    const component = ReactTestUtils.renderIntoDocument(
       <Toggle
         label='Label'
         offAriaLabel='offLabel'
       />
     );
-    let renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
-    let labelElement = renderedDOM.querySelector('button') as Element;
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const labelElement = renderedDOM.querySelector('button') as Element;
 
     expect(labelElement.getAttribute('aria-label')).toEqual('offLabel');
   });
 
   it('can call the callback on a change of toggle', () => {
     let isToggledValue;
-    let callback = (isToggled: boolean) => {
+    const callback = (isToggled: boolean) => {
       isToggledValue = isToggled;
     };
     let component: any;
@@ -61,8 +61,8 @@ describe('Toggle', () => {
         onChanged={ callback }
       />
     );
-    let renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
-    let button = renderedDOM.querySelector('button') as HTMLButtonElement;
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const button = renderedDOM.querySelector('button') as HTMLButtonElement;
 
     ReactTestUtils.Simulate.click(button);
     expect(isToggledValue).toEqual(true);
@@ -80,8 +80,8 @@ describe('Toggle', () => {
         checked={ false }
       />
     );
-    let renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
-    let button = renderedDOM.querySelector('button') as HTMLButtonElement;
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const button = renderedDOM.querySelector('button') as HTMLButtonElement;
 
     ReactTestUtils.Simulate.click(button);
 
@@ -89,13 +89,13 @@ describe('Toggle', () => {
   });
 
   it(`doesn't render a label element if none is provided`, () => {
-    let component = ReactTestUtils.renderIntoDocument(
+    const component = ReactTestUtils.renderIntoDocument(
       <Toggle
         checked={ false }
       />
     );
-    let renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
-    let label = renderedDOM.querySelector('label');
+    const renderedDOM = ReactDOM.findDOMNode(component as React.ReactInstance);
+    const label = renderedDOM.querySelector('label');
 
     // tslint:disable-next-line:no-unused-expression
     expect(label).toBeNull();
@@ -121,7 +121,7 @@ describe('Toggle', () => {
         />
       </form>
     );
-    let button: any = wrapper.find('button');
+    const button: any = wrapper.find('button');
     // simulate to change toggle state
     button.simulate('click');
     expect((component as React.Component<any, any>).state.isChecked).toEqual(true);
diff --git a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx
index 6d6472a830337..13ad62e49a8fd 100644
--- a/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx
+++ b/packages/office-ui-fabric-react/src/components/Toggle/Toggle.tsx
@@ -61,7 +61,7 @@ export class Toggle extends BaseComponent<IToggleProps, IToggleState> implements
     // In the future when more screenreaders support aria-pressed it would be a good idea to change this control back to using it as it is
     // more semantically correct.
 
-    let {
+    const {
       className,
       theme,
       styles: customStyles,
@@ -72,8 +72,8 @@ export class Toggle extends BaseComponent<IToggleProps, IToggleState> implements
       onAriaLabel,
       onText
       } = this.props;
-    let { isChecked } = this.state;
-    let stateText = isChecked ? onText : offText;
+    const { isChecked } = this.state;
+    const stateText = isChecked ? onText : offText;
     const ariaLabel = isChecked ? onAriaLabel : offAriaLabel;
     const toggleNativeProps = getNativeProps(this.props, inputProperties, ['defaultChecked']);
     const classNames = getClassNames(
@@ -124,8 +124,8 @@ export class Toggle extends BaseComponent<IToggleProps, IToggleState> implements
 
   @autobind
   private _onClick(ev: React.MouseEvent<HTMLElement>) {
-    let { disabled, checked, onChanged, onClick } = this.props;
-    let { isChecked } = this.state;
+    const { disabled, checked, onChanged, onClick } = this.props;
+    const { isChecked } = this.state;
 
     if (!disabled) {
       // Only update the state if the user hasn't provided it.
diff --git a/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.tsx b/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.tsx
index 7172e73c5c6ea..2373ebbf3031b 100644
--- a/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Toggle/TogglePage.tsx
@@ -36,6 +36,8 @@ export class TogglePage extends React.Component<IComponentDemoPageProps, {}> {
             </ExampleCard>
           </div>
         }
+        allowNativeProps={ true }
+        nativePropsElement={ 'input' }
         propertiesTables={
           <PropertiesTableSet
             sources={ [
@@ -84,7 +86,7 @@ export class TogglePage extends React.Component<IComponentDemoPageProps, {}> {
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...ToggleStatus}
+            { ...ToggleStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.scss b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.scss
index 34c9bd6c04168..567120d040ce7 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.scss
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.scss
@@ -8,4 +8,8 @@
 
 .host {
   display: inline-block;
+}
+
+.hostOverflow {
+  display: inline;
 }
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx
index 7a2ef55eee8cf..549019c510b50 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipHost.tsx
@@ -43,21 +43,27 @@ export class TooltipHost extends BaseComponent<ITooltipHostProps, ITooltipHostSt
   public render() {
     const {
       calloutProps,
-      tooltipProps,
-      content,
       children,
+      content,
+      delay,
       directionalHint,
       directionalHintForRTL,
-      delay,
+      hostClassName,
       id,
+      overflowMode,
       setAriaDescribedBy = true,
-      hostClassName
+      tooltipProps
     } = this.props;
     const { isTooltipVisible } = this.state;
     const tooltipId = id || getId('tooltip');
+
     return (
       <div
-        className={ css('ms-TooltipHost', styles.host, hostClassName) }
+        className={ css('ms-TooltipHost',
+          styles.host,
+          hostClassName,
+          overflowMode !== undefined && styles.hostOverflow
+        ) }
         ref={ this._resolveRef('_tooltipHost') }
         { ...{ onFocusCapture: this._onTooltipMouseEnter } }
         { ...{ onBlurCapture: this._onTooltipMouseLeave } }
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.tsx
index 35937c34431b8..a70b8579a4f0f 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.tsx
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/TooltipPage.tsx
@@ -40,6 +40,7 @@ export class TooltipPage extends React.Component<IComponentDemoPageProps, any> {
             </ExampleCard>
           </LayerHost>
         }
+        allowNativeProps={ true }
         propertiesTables={
           <PropertiesTableSet
             sources={ [
@@ -56,7 +57,7 @@ export class TooltipPage extends React.Component<IComponentDemoPageProps, any> {
         isHeaderVisible={ this.props.isHeaderVisible }
         componentStatus={
           <ComponentStatus
-            {...TooltipStatus}
+            { ...TooltipStatus }
           />
         }
       />
diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Overflow.Example.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Overflow.Example.tsx
index c6338df2b0bcb..6bfdbe2e5c776 100644
--- a/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Overflow.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/Tooltip/examples/Tooltip.Overflow.Example.tsx
@@ -58,4 +58,4 @@ export class TooltipOverflowExample extends BaseComponent<{}, ITooltipOverflowEx
       </div>
     );
   }
-}
\ No newline at end of file
+}
diff --git a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx
index 72e5b83f51a1e..e03bbf9b3d234 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.tsx
@@ -1,280 +1,2 @@
-import * as React from 'react';
-import { IBaseAutoFillProps, IBaseAutoFill } from './BaseAutoFill.types';
-import {
-  BaseComponent,
-  KeyCodes,
-  autobind,
-  getNativeProps,
-  inputProperties
-} from '../../../Utilities';
-
-export interface IBaseAutoFillState {
-  displayValue?: string;
-}
-
-const SELECTION_FORWARD = 'forward';
-const SELECTION_BACKWARD = 'backward';
-
-export class BaseAutoFill extends BaseComponent<IBaseAutoFillProps, IBaseAutoFillState> implements IBaseAutoFill {
-
-  public static defaultProps = {
-    enableAutoFillOnKeyPress: [KeyCodes.down, KeyCodes.up]
-  };
-
-  private _inputElement: HTMLInputElement;
-  private _autoFillEnabled: boolean = true;
-  private _value: string;
-
-  constructor(props: IBaseAutoFillProps) {
-    super(props);
-    this._value = '';
-    this.state = {
-      displayValue: props.defaultVisibleValue || ''
-    };
-  }
-
-  public get cursorLocation(): number {
-    if (this._inputElement) {
-      let inputElement = this._inputElement;
-      if (inputElement.selectionDirection !== SELECTION_FORWARD) {
-        return inputElement.selectionEnd;
-      } else {
-        return inputElement.selectionStart;
-      }
-    } else {
-      return -1;
-    }
-  }
-
-  public get isValueSelected(): boolean {
-    return this.inputElement.selectionStart !== this.inputElement.selectionEnd;
-  }
-
-  public get value(): string {
-    return this._value;
-  }
-
-  public get selectionStart(): number {
-    return this._inputElement ? this._inputElement.selectionStart : -1;
-  }
-
-  public get selectionEnd(): number {
-    return this._inputElement ? this._inputElement.selectionEnd : -1;
-  }
-
-  public get inputElement(): HTMLInputElement {
-    return this._inputElement;
-  }
-
-  public componentWillReceiveProps(nextProps: IBaseAutoFillProps) {
-    let newValue;
-
-    if (this.props.updateValueInWillReceiveProps) {
-      newValue = this.props.updateValueInWillReceiveProps();
-    }
-
-    newValue = this._getDisplayValue(newValue ? newValue : this._value, nextProps.suggestedDisplayValue);
-
-    if (typeof newValue === 'string') {
-      this.setState({ displayValue: newValue });
-    }
-  }
-
-  public componentDidUpdate() {
-    let value = this._value;
-    let {
-      suggestedDisplayValue,
-      shouldSelectFullInputValueInComponentDidUpdate
-    } = this.props;
-    let differenceIndex = 0;
-
-    if (this._autoFillEnabled && value && suggestedDisplayValue && this._doesTextStartWith(suggestedDisplayValue, value)) {
-      let shouldSelectFullRange = false;
-
-      if (shouldSelectFullInputValueInComponentDidUpdate) {
-        shouldSelectFullRange = shouldSelectFullInputValueInComponentDidUpdate();
-      }
-
-      if (shouldSelectFullRange) {
-        this._inputElement.setSelectionRange(0, suggestedDisplayValue.length, SELECTION_BACKWARD);
-      } else {
-        while (differenceIndex < value.length && value[differenceIndex].toLocaleLowerCase() === suggestedDisplayValue[differenceIndex].toLocaleLowerCase()) {
-          differenceIndex++;
-        }
-        if (differenceIndex > 0) {
-          this._inputElement.setSelectionRange(differenceIndex, suggestedDisplayValue.length, SELECTION_BACKWARD);
-        }
-      }
-    }
-  }
-
-  public render() {
-    let {
-      displayValue
-    } = this.state;
-
-    const nativeProps = getNativeProps(this.props, inputProperties);
-    return (
-      <input
-        { ...nativeProps }
-        ref={ this._resolveRef('_inputElement') }
-        value={ displayValue }
-        autoCapitalize={ 'off' }
-        autoComplete={ 'off' }
-        onCompositionStart={ this._onCompositionStart }
-        onCompositionEnd={ this._onCompositionEnd }
-        onChange={ this._onChange }
-        onKeyDown={ this._onKeyDown }
-        onClick={ this.props.onClick ? this.props.onClick : this._onClick }
-        data-lpignore={ true }
-      />
-    );
-  }
-
-  public focus() {
-    this._inputElement.focus();
-  }
-
-  public clear() {
-    this._autoFillEnabled = true;
-    this._updateValue('');
-    this._inputElement.setSelectionRange(0, 0);
-  }
-
-  // Composition events are used when the character/text requires several keystrokes to be completed.
-  // Some examples of this are mobile text input and langauges like Japanese or Arabic.
-  // Find out more at https://developer.mozilla.org/en-US/docs/Web/Events/compositionstart
-  @autobind
-  private _onCompositionStart(ev: React.CompositionEvent<HTMLInputElement>) {
-    this._autoFillEnabled = false;
-  }
-
-  // Composition events are used when the character/text requires several keystrokes to be completed.
-  // Some examples of this are mobile text input and langauges like Japanese or Arabic.
-  // Find out more at https://developer.mozilla.org/en-US/docs/Web/Events/compositionstart
-  @autobind
-  private _onCompositionEnd(ev: React.CompositionEvent<HTMLInputElement>) {
-    let inputValue = this._getCurrentInputValue();
-    this._tryEnableAutofill(inputValue, this.value, false, true);
-    // Due to timing, this needs to be async, otherwise no text will be selected.
-    this._async.setTimeout(() => this._updateValue(inputValue), 0);
-  }
-
-  @autobind
-  private _onClick() {
-    if (this._value && this._value !== '' && this._autoFillEnabled) {
-      this._autoFillEnabled = false;
-    }
-  }
-
-  @autobind
-  private _onKeyDown(ev: React.KeyboardEvent<HTMLInputElement>) {
-    if (this.props.onKeyDown) {
-      this.props.onKeyDown(ev);
-    }
-
-    // If the event is actively being composed, then don't alert autofill.
-    // Right now typing does not have isComposing, once that has been fixed any should be removed.
-    if (!(ev.nativeEvent as any).isComposing) {
-      switch (ev.which) {
-        case KeyCodes.backspace:
-          this._autoFillEnabled = false;
-          break;
-        case KeyCodes.left:
-        case KeyCodes.right:
-          if (this._autoFillEnabled) {
-            this._value = this.state.displayValue!;
-            this._autoFillEnabled = false;
-          }
-          break;
-        default:
-          if (!this._autoFillEnabled) {
-            if (this.props.enableAutoFillOnKeyPress!.indexOf(ev.which) !== -1) {
-              this._autoFillEnabled = true;
-            }
-          }
-          break;
-      }
-    }
-  }
-
-  @autobind
-  private _onChange(ev: React.FormEvent<HTMLElement>) {
-    let value: string = this._getCurrentInputValue(ev);
-    // Right now typing does not have isComposing, once that has been fixed any should be removed.
-    this._tryEnableAutofill(value, this._value, (ev.nativeEvent as any).isComposing);
-    this._updateValue(value);
-  }
-
-  private _getCurrentInputValue(ev?: React.FormEvent<HTMLElement>): string {
-    if (ev && ev.target && (ev.target as any).value) {
-      return (ev.target as any).value;
-    } else {
-      return this._inputElement.value;
-    }
-  }
-
-  /**
-   * Attempts to enable autofill. Whether or not autofill is enabled depends on the input value,
-   * whether or not any text is selected, and only if the new input value is longer than the old input value.
-   * Autofill should never be set to true if the value is composing. Once compositionEnd is called, then
-   * it should be completed.
-   * See https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent for more information on composition.
-   * @param newValue
-   * @param oldValue
-   * @param isComposing if true then the text is actively being composed and it has not completed.
-   * @param isComposed if the text is a composed text value.
-   */
-  private _tryEnableAutofill(newValue: string, oldValue: string, isComposing?: boolean, isComposed?: boolean) {
-    if (!isComposing
-      && newValue
-      && this._inputElement.selectionStart === newValue.length
-      && !this._autoFillEnabled
-      && (newValue.length > oldValue.length || isComposed)) {
-      this._autoFillEnabled = true;
-    }
-  }
-
-  private _notifyInputChange(newValue: string) {
-    if (this.props.onInputValueChange) {
-      this.props.onInputValueChange(newValue);
-    }
-  }
-
-  /**
-   * Updates the current input value as well as getting a new display value.
-   * @param newValue The new value from the input
-   */
-  @autobind
-  private _updateValue(newValue: string) {
-    this._value = this.props.onInputChange ? this.props.onInputChange(newValue) : newValue;
-    this.setState({
-      displayValue: this._getDisplayValue(this._value, this.props.suggestedDisplayValue)
-    }, () => this._notifyInputChange(this._value));
-  }
-
-  /**
-   * Returns a string that should be used as the display value.
-   * It evaluates this based on whether or not the suggested value starts with the input value
-   * and whether or not autofill is enabled.
-   * @param inputValue the value that the input currently has.
-   * @param suggestedDisplayValue the possible full value
-   */
-  private _getDisplayValue(inputValue: string, suggestedDisplayValue?: string) {
-    let displayValue = inputValue;
-    if (suggestedDisplayValue
-      && inputValue
-      && this._doesTextStartWith(suggestedDisplayValue, displayValue)
-      && this._autoFillEnabled) {
-      displayValue = suggestedDisplayValue;
-    }
-    return displayValue;
-  }
-
-  private _doesTextStartWith(text: string, startWith: string) {
-    if (!text || !startWith) {
-      return false;
-    }
-    return text.toLocaleLowerCase().indexOf(startWith.toLocaleLowerCase()) === 0;
-  }
-}
\ No newline at end of file
+// Deprecated, import directly from the component folder now.
+export * from '../../Autofill/Autofill';
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.types.ts b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.types.ts
index 80fdb4d2f021b..cd9fc8b68cc37 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.types.ts
+++ b/packages/office-ui-fabric-react/src/components/pickers/AutoFill/BaseAutoFill.types.ts
@@ -1,96 +1,2 @@
-import * as React from 'react';
-import { BaseAutoFill } from './BaseAutoFill';
-import { KeyCodes } from '../../../Utilities';
-export interface IBaseAutoFill {
-
-  /**
-   * The current index of the cursor in the input area. Returns -1 if the input element
-   * is not ready.
-   */
-  cursorLocation: number;
-  /**
-   * A boolean for whether or not there is a value selected in the input area.
-   */
-  isValueSelected: boolean;
-  /**
-   * The current text value that the user has entered.
-   */
-  value: string;
-  /**
-   * The current index of where the selection starts. Returns -1 if the input element
-   * is not ready.
-   */
-  selectionStart: number;
-  /**
-   * the current index of where the selection ends. Returns -1 if the input element
-   * is not ready.
-   */
-  selectionEnd: number;
-  /**
-   * The current input element.
-   */
-  inputElement: HTMLInputElement;
-  /**
-   * Focus the input element.
-   */
-  focus(): void;
-  /**
-   * Clear all text in the input. Sets value to '';
-   */
-  clear(): void;
-}
-
-export interface IBaseAutoFillProps extends
-  React.InputHTMLAttributes<HTMLInputElement | BaseAutoFill> {
-  /**
-   * Gets the compoonent ref.
-   */
-  componentRef?: (componentRef?: IBaseAutoFill) => void;
-
-  /**
-   * The suggested autofill value that will display.
-   */
-  suggestedDisplayValue?: string;
-
-  /**
-   * A callback for when the current input value changes.
-   */
-  onInputValueChange?: (newValue?: string) => void;
-
-  /**
-   * When the user uses left arrow, right arrow, clicks, or deletes text autofill is disabled
-   * Since the user has taken control. It is automatically reenabled when the user enters text and the
-   * cursor is at the end of the text in the input box. This specifies other key presses that will reenabled
-   * autofill.
-   * @default [KeyCodes.down, KeyCodes.up]
-   */
-  enableAutoFillOnKeyPress?: KeyCodes[];
-
-  /**
-   * the default value to be visible
-   */
-  defaultVisibleValue?: string;
-
-  /**
-   * Handler for checking and updating the value if needed
-   *  in componentWillReceiveProps
-   *
-   * @param {IBaseAutoFillProps} defaultVisibleValue - the defaultVisibleValue that got passed
-   *  in to the auto fill's componentWillReceiveProps
-   * @returns {string} - the updated value to set, if needed
-   */
-  updateValueInWillReceiveProps?: () => string | null;
-
-  /**
-   * Handler for checking if the full value of the input should
-   * be seleced in componentDidUpdate
-   *
-   * @returns {boolean} - should the full value of the input be selected?
-   */
-  shouldSelectFullInputValueInComponentDidUpdate?: () => boolean;
-
-  /**
-   * A callback used to modify the input string.
-   */
-  onInputChange?: (value: string) => string;
-}
\ No newline at end of file
+// Deprecated, import directly from the component folder now.
+export * from '../../Autofill/Autofill.types';
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.test.tsx b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.test.tsx
index 21ec922691e74..c984c30e5b123 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.test.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.test.tsx
@@ -63,14 +63,14 @@ describe('Pickers', () => {
           onRenderSuggestionsItem={ basicSuggestionRenderer }
         />
       );
-      let tree = component.toJSON();
+      const tree = component.toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('can provide custom renderers', () => {
-      let root = document.createElement('div');
+      const root = document.createElement('div');
       document.body.appendChild(root);
-      let picker: TypedBasePicker = ReactDOM.render(
+      const picker: TypedBasePicker = ReactDOM.render(
         <BasePickerWithType
           onResolveSuggestions={ onResolveSuggestions }
           onRenderItem={ onRenderItem }
@@ -78,16 +78,16 @@ describe('Pickers', () => {
         />,
         root
       ) as TypedBasePicker;
-      let input = document.querySelector('.ms-BasePicker-input') as HTMLInputElement;
+      const input = document.querySelector('.ms-BasePicker-input') as HTMLInputElement;
       input.focus();
       input.value = 'bl';
 
-      ReactTestUtils.Simulate.change(input);
+      ReactTestUtils.Simulate.input(input);
 
-      let suggestions = document.querySelector('.ms-Suggestions') as HTMLInputElement;
+      const suggestions = document.querySelector('.ms-Suggestions') as HTMLInputElement;
 
       expect(suggestions).toBeDefined();
-      let suggestionOptions = document.querySelectorAll('.ms-Suggestions-itemButton');
+      const suggestionOptions = document.querySelectorAll('.ms-Suggestions-itemButton');
 
       expect(suggestionOptions.length).toEqual(2);
       ReactTestUtils.Simulate.click(suggestionOptions[0]);
@@ -100,9 +100,9 @@ describe('Pickers', () => {
     });
 
     it('can will not render input when items reach itemLimit', () => {
-      let root = document.createElement('div');
+      const root = document.createElement('div');
       document.body.appendChild(root);
-      let picker: TypedBasePicker = ReactDOM.render(
+      const picker: TypedBasePicker = ReactDOM.render(
         <BasePickerWithType
           onResolveSuggestions={ onResolveSuggestions }
           onRenderItem={ onRenderItem }
@@ -114,9 +114,9 @@ describe('Pickers', () => {
       let input = document.querySelector('.ms-BasePicker-input') as HTMLInputElement;
       input.focus();
       input.value = 'bl';
-      ReactTestUtils.Simulate.change(input);
+      ReactTestUtils.Simulate.input(input);
 
-      let suggestionOptions = document.querySelectorAll('.ms-Suggestions-itemButton');
+      const suggestionOptions = document.querySelectorAll('.ms-Suggestions-itemButton');
       ReactTestUtils.Simulate.click(suggestionOptions[0]);
       expect(picker.items.length).toEqual(1);
       input = document.querySelector('.ms-BasePicker-input') as HTMLInputElement;
@@ -126,7 +126,7 @@ describe('Pickers', () => {
     });
 
     it('will still render with itemLimit set to 0', () => {
-      let root = document.createElement('div');
+      const root = document.createElement('div');
       document.body.appendChild(root);
       ReactDOM.render(
         <BasePickerWithType
@@ -138,16 +138,16 @@ describe('Pickers', () => {
         root
       ) as TypedBasePicker;
 
-      let input = document.querySelector('.ms-BasePicker-input') as HTMLInputElement;
+      const input = document.querySelector('.ms-BasePicker-input') as HTMLInputElement;
       expect(input).toBeNull();
 
       ReactDOM.unmountComponentAtNode(root);
     });
 
     it('can be set with selectedItems and a lower itemLimit', () => {
-      let root = document.createElement('div');
+      const root = document.createElement('div');
       document.body.appendChild(root);
-      let picker: TypedBasePicker = ReactDOM.render(
+      const picker: TypedBasePicker = ReactDOM.render(
         <BasePickerWithType
           selectedItems={ [{ key: '1', name: 'blue' }, { key: '2', name: 'black' }] }
           onResolveSuggestions={ onResolveSuggestions }
@@ -158,7 +158,7 @@ describe('Pickers', () => {
         root
       ) as TypedBasePicker;
 
-      let input = document.querySelector('.ms-BasePicker-input') as HTMLInputElement;
+      const input = document.querySelector('.ms-BasePicker-input') as HTMLInputElement;
       expect(input).toBeNull();
       expect(picker.items.length).toEqual(2);
 
@@ -174,29 +174,29 @@ describe('Pickers', () => {
           onResolveSuggestions={ onResolveSuggestions }
         />
       );
-      let tree = component.toJSON();
+      const tree = component.toJSON();
       expect(tree).toMatchSnapshot();
     });
 
     it('can search for and select tags', () => {
-      let root = document.createElement('div');
+      const root = document.createElement('div');
       document.body.appendChild(root);
-      let picker: TagPicker = ReactDOM.render(
+      const picker: TagPicker = ReactDOM.render(
         <TagPicker
           onResolveSuggestions={ onResolveSuggestions }
         />,
         root
       ) as TagPicker;
-      let input = document.querySelector('.ms-BasePicker-input') as HTMLInputElement;
+      const input = document.querySelector('.ms-BasePicker-input') as HTMLInputElement;
       input.focus();
       input.value = 'bl';
 
-      ReactTestUtils.Simulate.change(input);
+      ReactTestUtils.Simulate.input(input);
 
-      let suggestions = document.querySelector('.ms-Suggestions') as HTMLInputElement;
+      const suggestions = document.querySelector('.ms-Suggestions') as HTMLInputElement;
 
       expect(suggestions).toBeDefined();
-      let suggestionOptions = document.querySelectorAll('.ms-Suggestions-itemButton');
+      const suggestionOptions = document.querySelectorAll('.ms-Suggestions-itemButton');
 
       expect(suggestionOptions.length).toEqual(2);
       ReactTestUtils.Simulate.click(suggestionOptions[0]);
@@ -208,7 +208,7 @@ describe('Pickers', () => {
     });
 
     it('can be a controlled component', () => {
-      let root = document.createElement('div');
+      const root = document.createElement('div');
       document.body.appendChild(root);
       let picker: TagPicker = ReactDOM.render(
         <TagPicker
@@ -217,13 +217,13 @@ describe('Pickers', () => {
         />,
         root
       ) as TagPicker;
-      let input = document.querySelector('.ms-BasePicker-input') as HTMLInputElement;
+      const input = document.querySelector('.ms-BasePicker-input') as HTMLInputElement;
 
       input.focus();
       input.value = 'bl';
-      ReactTestUtils.Simulate.change(input);
+      ReactTestUtils.Simulate.input(input);
 
-      let suggestionOptions = document.querySelectorAll('.ms-Suggestions-itemButton');
+      const suggestionOptions = document.querySelectorAll('.ms-Suggestions-itemButton');
 
       ReactTestUtils.Simulate.click(suggestionOptions[0]);
 
@@ -242,7 +242,7 @@ describe('Pickers', () => {
       ReactDOM.unmountComponentAtNode(root);
     });
     it('fires change events correctly for controlled components', (done) => {
-      let root = document.createElement('div');
+      const root = document.createElement('div');
       document.body.appendChild(root);
       const onChange = (items: ITag[] | undefined): void => {
         expect(items!.length).toBe(1);
@@ -258,13 +258,13 @@ describe('Pickers', () => {
         />,
         root
       ) as TagPicker;
-      let input = document.querySelector('.ms-BasePicker-input') as HTMLInputElement;
+      const input = document.querySelector('.ms-BasePicker-input') as HTMLInputElement;
 
       input.focus();
       input.value = 'bl';
-      ReactTestUtils.Simulate.change(input);
+      ReactTestUtils.Simulate.input(input);
 
-      let suggestionOptions = document.querySelectorAll('.ms-Suggestions-itemButton');
+      const suggestionOptions = document.querySelectorAll('.ms-Suggestions-itemButton');
 
       ReactTestUtils.Simulate.click(suggestionOptions[0]);
 
diff --git a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx
index dd4d6a2900bfb..9351ba8ac6769 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.tsx
@@ -10,9 +10,9 @@ import { Callout, DirectionalHint } from '../../Callout';
 import { Selection, SelectionZone, SelectionMode } from '../../utilities/selection/index';
 import { Suggestions } from './Suggestions/Suggestions';
 import { ISuggestionsProps } from './Suggestions/Suggestions.types';
-import { SuggestionsController, ISuggestionModel } from './Suggestions/SuggestionsController';
+import { SuggestionsController } from './Suggestions/SuggestionsController';
 import { IBasePicker, IBasePickerProps, ValidationState } from './BasePicker.types';
-import { BaseAutoFill } from './AutoFill/BaseAutoFill';
+import { Autofill } from '../Autofill/Autofill';
 import { IPickerItemProps } from './PickerItem.types';
 import { IPersonaProps } from '../Persona/Persona.types';
 import * as stylesImport from './BasePicker.scss';
@@ -35,7 +35,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
   protected selection: Selection;
 
   protected root: HTMLElement;
-  protected input: BaseAutoFill;
+  protected input: Autofill;
   protected focusZone: FocusZone;
   protected suggestionElement: Suggestions<T>;
 
@@ -47,7 +47,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
   constructor(basePickerProps: P) {
     super(basePickerProps);
 
-    let items: T[] = basePickerProps.selectedItems || basePickerProps.defaultSelectedItems || [];
+    const items: T[] = basePickerProps.selectedItems || basePickerProps.defaultSelectedItems || [];
 
     this.suggestionStore = new SuggestionsController<T>();
     this.selection = new Selection({ onSelectionChanged: () => this.onSelectionChange() });
@@ -74,10 +74,11 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
 
   public componentDidMount() {
     this.selection.setItems(this.state.items);
+    this._onResolveSuggestions = this._async.debounce(this._onResolveSuggestions, this.props.resolveDelay);
   }
 
   public componentWillReceiveProps(newProps: P) {
-    let newItems = newProps.selectedItems;
+    const newItems = newProps.selectedItems;
 
     if (newItems) {
       let focusIndex: number;
@@ -120,7 +121,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
 
   @autobind
   public dismissSuggestions(ev?: any) {
-    let selectItemFunction = () => {
+    const selectItemFunction = () => {
       if (this.props.onDismiss) {
         this.props.onDismiss(
           ev,
@@ -155,16 +156,18 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
   @autobind
   public refocusSuggestions(keyCode: KeyCodes) {
     this.resetFocus();
-    if (keyCode === KeyCodes.up) {
-      this.suggestionStore.setSelectedSuggestion(this.suggestionStore.suggestions.length - 1);
-    } else if (keyCode === KeyCodes.down) {
-      this.suggestionStore.setSelectedSuggestion(0);
+    if (this.suggestionStore.suggestions && this.suggestionStore.suggestions.length > 0) {
+      if (keyCode === KeyCodes.up) {
+        this.suggestionStore.setSelectedSuggestion(this.suggestionStore.suggestions.length - 1);
+      } else if (keyCode === KeyCodes.down) {
+        this.suggestionStore.setSelectedSuggestion(0);
+      }
     }
   }
 
   public render() {
-    let { suggestedDisplayValue } = this.state;
-    let {
+    const { suggestedDisplayValue } = this.state;
+    const {
       className,
       inputProps,
       disabled
@@ -173,6 +176,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     const currentIndex = this.suggestionStore.currentIndex;
     const selectedSuggestion = currentIndex > -1 ? this.suggestionStore.getSuggestionAtIndex(this.suggestionStore.currentIndex) : undefined;
     const selectedSuggestionAlert = selectedSuggestion ? selectedSuggestion.ariaLabel : undefined;
+    const activeDescendant = currentIndex > -1 ? 'sug-' + currentIndex : undefined;
 
     return (
       <div
@@ -191,7 +195,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
           <SelectionZone selection={ this.selection } selectionMode={ SelectionMode.multiple }>
             <div className={ css('ms-BasePicker-text', styles.pickerText, this.state.isFocused && styles.inputFocused) } role={ 'list' }>
               { this.renderItems() }
-              { this.canAddItems() && (<BaseAutoFill
+              { this.canAddItems() && (<Autofill
                 { ...inputProps as any }
                 className={ css('ms-BasePicker-input', styles.pickerInput) }
                 ref={ this._resolveRef('input') }
@@ -199,7 +203,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
                 onBlur={ this.onInputBlur }
                 onInputValueChange={ this.onInputChange }
                 suggestedDisplayValue={ suggestedDisplayValue }
-                aria-activedescendant={ 'sug-' + this.suggestionStore.currentIndex }
+                aria-activedescendant={ activeDescendant }
                 aria-owns='suggestion-list'
                 aria-expanded={ !!this.state.suggestionsVisible }
                 aria-haspopup='true'
@@ -225,7 +229,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
   }
 
   protected renderSuggestions(): JSX.Element | null {
-    let TypedSuggestion = this.SuggestionOfProperType;
+    const TypedSuggestion = this.SuggestionOfProperType;
     return this.state.suggestionsVisible ? (
       <Callout
         isBeakVisible={ false }
@@ -255,10 +259,10 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
   }
 
   protected renderItems(): JSX.Element[] {
-    let { disabled, removeButtonAriaLabel } = this.props;
-    let onRenderItem = this.props.onRenderItem as (props: IPickerItemProps<T>) => JSX.Element;
+    const { disabled, removeButtonAriaLabel } = this.props;
+    const onRenderItem = this.props.onRenderItem as (props: IPickerItemProps<T>) => JSX.Element;
 
-    let { items } = this.state;
+    const { items } = this.state;
     return items.map((item: any, index: number) => onRenderItem({
       item,
       index,
@@ -272,10 +276,10 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
   }
 
   protected resetFocus(index?: number) {
-    let { items } = this.state;
+    const { items } = this.state;
 
     if (items.length && index! >= 0) {
-      let newEl: HTMLElement = this.root.querySelectorAll('[data-selection-index]')[Math.min(index!, items.length - 1)] as HTMLElement;
+      const newEl: HTMLElement = this.root.querySelectorAll('[data-selection-index]')[Math.min(index!, items.length - 1)] as HTMLElement;
       if (newEl) {
         this.focusZone.focusElement(newEl);
       }
@@ -289,8 +293,8 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
 
   protected onSuggestionSelect() {
     if (this.suggestionStore.currentSuggestion) {
-      let currentValue: string = this.input.value;
-      let itemValue: string = this._getTextFromItem(this.suggestionStore.currentSuggestion.item, currentValue);
+      const currentValue: string = this.input.value;
+      const itemValue: string = this._getTextFromItem(this.suggestionStore.currentSuggestion.item, currentValue);
       this.setState({ suggestedDisplayValue: itemValue });
     }
   }
@@ -305,19 +309,18 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
   }
 
   protected onEmptyInputFocus() {
-    let onEmptyInputFocus = this.props.onEmptyInputFocus as (selectedItems?: T[]) => T[] | PromiseLike<T[]>;
-    let suggestions: T[] | PromiseLike<T[]> = onEmptyInputFocus(this.state.items);
+    const onEmptyInputFocus = this.props.onEmptyInputFocus as (selectedItems?: T[]) => T[] | PromiseLike<T[]>;
+    const suggestions: T[] | PromiseLike<T[]> = onEmptyInputFocus(this.state.items);
     this.updateSuggestionsList(suggestions);
   }
 
   protected updateValue(updatedValue: string) {
-    let suggestions: T[] | PromiseLike<T[]> = this.props.onResolveSuggestions(updatedValue, this.state.items);
-    this.updateSuggestionsList(suggestions, updatedValue);
+    this._onResolveSuggestions(updatedValue);
   }
 
   protected updateSuggestionsList(suggestions: T[] | PromiseLike<T[]>, updatedValue?: string) {
-    let suggestionsArray: T[] = suggestions as T[];
-    let suggestionsPromiseLike: PromiseLike<T[]> = suggestions as PromiseLike<T[]>;
+    const suggestionsArray: T[] = suggestions as T[];
+    const suggestionsPromiseLike: PromiseLike<T[]> = suggestions as PromiseLike<T[]>;
 
     // Check to see if the returned value is an array, if it is then just pass it into the next function.
     // If the returned value is not an array then check to see if it's a promise or PromiseLike. If it is then resolve it asynchronously.
@@ -350,7 +353,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
       }
 
       // Ensure that the promise will only use the callback if it was the most recent one.
-      let promise: PromiseLike<T[]> = this.currentPromise = suggestionsPromiseLike;
+      const promise: PromiseLike<T[]> = this.currentPromise = suggestionsPromiseLike;
       promise.then((newSuggestions: T[]) => {
         if (promise === this.currentPromise) {
           if (updatedValue !== undefined) {
@@ -415,7 +418,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
   }
 
   @autobind
-  protected onInputFocus(ev: React.FocusEvent<HTMLInputElement | BaseAutoFill>) {
+  protected onInputFocus(ev: React.FocusEvent<HTMLInputElement | Autofill>) {
     this.setState({ isFocused: true });
     this.selection.setAllSelected(false);
     if (this.input && this.input.value === '' && this.props.onEmptyInputFocus) {
@@ -437,13 +440,17 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
   }
 
   @autobind
-  protected onInputBlur(ev: React.FocusEvent<HTMLInputElement | BaseAutoFill>) {
+  protected onInputBlur(ev: React.FocusEvent<HTMLInputElement | Autofill>) {
     this.setState({ isFocused: false });
+    if (this.props.inputProps && this.props.inputProps.onBlur) {
+      this.props.inputProps.onBlur(ev as React.FocusEvent<HTMLInputElement>);
+    }
   }
 
   @autobind
   protected onKeyDown(ev: React.KeyboardEvent<HTMLElement>) {
-    switch (ev.which) {
+    const keyCode = ev.which;
+    switch (keyCode) {
       case KeyCodes.escape:
         if (this.state.suggestionsVisible) {
           this.setState({ suggestionsVisible: false });
@@ -454,7 +461,9 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
 
       case KeyCodes.tab:
       case KeyCodes.enter:
-        if (!ev.shiftKey && this.suggestionStore.hasSelectedSuggestion() && this.state.suggestionsVisible) {
+        if (this.suggestionElement && this.suggestionElement.hasSuggestedActionSelected()) {
+          this.suggestionElement.executeSelectedAction();
+        } else if (!ev.shiftKey && this.suggestionStore.hasSelectedSuggestion() && this.state.suggestionsVisible) {
           this.completeSuggestion();
           ev.preventDefault();
           ev.stopPropagation();
@@ -488,15 +497,22 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
 
       case KeyCodes.up:
         if (ev.target === this.input.inputElement && this.state.suggestionsVisible) {
-          if (this.state.moreSuggestionsAvailable && this.suggestionElement.props.searchForMoreText && this.suggestionStore.currentIndex === 0) {
-            this.suggestionElement.focusSearchForMoreButton();
-            this.suggestionStore.deselectAllSuggestions();
-            this.forceUpdate();
+          if (this.suggestionElement.tryHandleKeyDown(keyCode, this.suggestionStore.currentIndex)) {
+            ev.preventDefault();
+            ev.stopPropagation();
           } else {
-            if (this.suggestionStore.previousSuggestion()) {
+            if (this.suggestionElement.hasSuggestedAction() && this.suggestionStore.currentIndex === 0) {
               ev.preventDefault();
               ev.stopPropagation();
-              this.onSuggestionSelect();
+              this.suggestionElement.focusAboveSuggestions();
+              this.suggestionStore.deselectAllSuggestions();
+              this.forceUpdate();
+            } else {
+              if (this.suggestionStore.previousSuggestion()) {
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.onSuggestionSelect();
+              }
             }
           }
         }
@@ -504,18 +520,24 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
 
       case KeyCodes.down:
         if (ev.target === this.input.inputElement && this.state.suggestionsVisible) {
-          if (this.state.moreSuggestionsAvailable && this.suggestionElement.props.searchForMoreText && (this.suggestionStore.currentIndex + 1) === this.suggestionStore.suggestions.length) {
-            this.suggestionElement.focusSearchForMoreButton();
-            this.suggestionStore.deselectAllSuggestions();
-            this.forceUpdate();
+          if (this.suggestionElement.tryHandleKeyDown(keyCode, this.suggestionStore.currentIndex)) {
+            ev.preventDefault();
+            ev.stopPropagation();
           } else {
-            if (this.suggestionStore.nextSuggestion()) {
+            if (this.suggestionElement.hasSuggestedAction() && (this.suggestionStore.currentIndex + 1) === this.suggestionStore.suggestions.length) {
               ev.preventDefault();
               ev.stopPropagation();
-              this.onSuggestionSelect();
+              this.suggestionElement.focusBelowSuggestions();
+              this.suggestionStore.deselectAllSuggestions();
+              this.forceUpdate();
+            } else {
+              if (this.suggestionStore.nextSuggestion()) {
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.onSuggestionSelect();
+              }
             }
           }
-
         }
         break;
     }
@@ -523,10 +545,10 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
 
   @autobind
   protected onItemChange(changedItem: T, index: number) {
-    let { items } = this.state;
+    const { items } = this.state;
 
     if (index >= 0) {
-      let newItems: T[] = items;
+      const newItems: T[] = items;
       newItems[index] = changedItem;
 
       this._updateSelectedItems(newItems);
@@ -539,9 +561,9 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
       isSearching: true
     }, () => {
       if (this.props.onGetMoreResults) {
-        let suggestions: T[] | PromiseLike<T[]> = (this.props.onGetMoreResults as any)(this.input.value, this.state.items);
-        let suggestionsArray: T[] = suggestions as T[];
-        let suggestionsPromiseLike: PromiseLike<T[]> = suggestions as PromiseLike<T[]>;
+        const suggestions: T[] | PromiseLike<T[]> = (this.props.onGetMoreResults as any)(this.input.value, this.state.items);
+        const suggestionsArray: T[] = suggestions as T[];
+        const suggestionsPromiseLike: PromiseLike<T[]> = suggestions as PromiseLike<T[]>;
 
         if (Array.isArray(suggestionsArray)) {
           this.updateSuggestions(suggestionsArray);
@@ -574,18 +596,23 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
 
   @autobind
   protected addItem(item: T) {
-    let processedItem: T | PromiseLike<T> = this.props.onItemSelected ? (this.props.onItemSelected as any)(item) : item;
+    const processedItem: T | PromiseLike<T> | null =
+      this.props.onItemSelected ? (this.props.onItemSelected as any)(item) : item;
 
-    let processedItemObject: T = processedItem as T;
-    let processedItemPromiseLike: PromiseLike<T> = processedItem as PromiseLike<T>;
+    if (processedItem === null) {
+      return;
+    }
+
+    const processedItemObject: T = processedItem as T;
+    const processedItemPromiseLike: PromiseLike<T> = processedItem as PromiseLike<T>;
 
     if (processedItemPromiseLike && processedItemPromiseLike.then) {
       processedItemPromiseLike.then((resolvedProcessedItem: T) => {
-        let newItems: T[] = this.state.items.concat([resolvedProcessedItem]);
+        const newItems: T[] = this.state.items.concat([resolvedProcessedItem]);
         this._updateSelectedItems(newItems);
       });
     } else {
-      let newItems: T[] = this.state.items.concat([processedItemObject]);
+      const newItems: T[] = this.state.items.concat([processedItemObject]);
       this._updateSelectedItems(newItems);
     }
     this.setState({ suggestedDisplayValue: '' });
@@ -593,21 +620,21 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
 
   @autobind
   protected removeItem(item: IPickerItemProps<T>) {
-    let { items } = this.state;
-    let index: number = items.indexOf(item);
+    const { items } = this.state;
+    const index: number = items.indexOf(item);
 
     if (index >= 0) {
-      let newItems: T[] = items.slice(0, index).concat(items.slice(index + 1));
+      const newItems: T[] = items.slice(0, index).concat(items.slice(index + 1));
       this._updateSelectedItems(newItems);
     }
   }
 
   @autobind
   protected removeItems(itemsToRemove: any[]) {
-    let { items } = this.state;
-    let newItems: T[] = items.filter((item: any) => itemsToRemove.indexOf(item) === -1);
-    let firstItemToRemove = itemsToRemove[0];
-    let index: number = items.indexOf(firstItemToRemove);
+    const { items } = this.state;
+    const newItems: T[] = items.filter((item: any) => itemsToRemove.indexOf(item) === -1);
+    const firstItemToRemove = itemsToRemove[0];
+    const index: number = items.indexOf(firstItemToRemove);
 
     this._updateSelectedItems(newItems, index);
   }
@@ -626,7 +653,7 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
 
   @autobind
   protected _isFocusZoneInnerKeystroke(ev: React.KeyboardEvent<HTMLElement>): boolean {
-    // If suggestions are shown let up/down keys control them, otherwise allow them through to control the focusZone.
+    // If suggestions are shown const up/down keys control them, otherwise allow them through to control the focusZone.
     if (this.state.suggestionsVisible) {
       switch (ev.which) {
         case KeyCodes.up:
@@ -662,9 +689,17 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
     this.onChange(items);
   }
 
+  private _onResolveSuggestions(updatedValue: string): void {
+    const suggestions: T[] | PromiseLike<T[]> | null = this.props.onResolveSuggestions(updatedValue, this.state.items);
+
+    if (suggestions !== null) {
+      this.updateSuggestionsList(suggestions, updatedValue);
+    }
+  }
+
   private _onValidateInput() {
     if (this.props.onValidateInput && (this.props.onValidateInput as any)(this.input.value) !== ValidationState.invalid && this.props.createGenericItem) {
-      let itemToConvert = this.props.createGenericItem(this.input.value, this.props.onValidateInput(this.input.value));
+      const itemToConvert = this.props.createGenericItem(this.input.value, this.props.onValidateInput(this.input.value));
       this.suggestionStore.createGenericSuggestion(itemToConvert);
       this.completeSuggestion();
     }
@@ -681,8 +716,8 @@ export class BasePicker<T, P extends IBasePickerProps<T>> extends BaseComponent<
 
 export class BasePickerListBelow<T, P extends IBasePickerProps<T>> extends BasePicker<T, P> {
   public render() {
-    let { suggestedDisplayValue } = this.state;
-    let {
+    const { suggestedDisplayValue } = this.state;
+    const {
       className,
       inputProps,
       disabled
@@ -700,7 +735,7 @@ export class BasePickerListBelow<T, P extends IBasePickerProps<T>> extends BaseP
             selectionMode={ SelectionMode.multiple }
           >
             <div className={ css('ms-BasePicker-text', styles.pickerText, this.state.isFocused && styles.inputFocused) }>
-              <BaseAutoFill
+              <Autofill
                 { ...inputProps as any }
                 className={ css('ms-BasePicker-input', styles.pickerInput) }
                 ref={ this._resolveRef('input') }
diff --git a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.types.ts b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.types.ts
index 4e15c252db4ca..50fa5c174c9a7 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/BasePicker.types.ts
+++ b/packages/office-ui-fabric-react/src/components/pickers/BasePicker.types.ts
@@ -33,8 +33,15 @@ export interface IBasePickerProps<T> extends React.Props<any> {
   /**
    * A callback for what should happen when a person types text into the input.
    * Returns the already selected items so the resolver can filter them out.
+   * If used in conjunction with resolveDelay this will ony kick off after the delay throttle.
    */
   onResolveSuggestions: (filter: string, selectedItems?: T[]) => T[] | PromiseLike<T[]>;
+  /**
+   * The delay time in ms before resolving suggestions, which is kicked off when input has been cahnged.
+   * e.g. If a second input change happens within the resolveDelay time, the timer will start over.
+   * Only until after the timer completes will onResolveSuggestions be called.
+   */
+  resolveDelay?: number;
   /**
    * A callback for what should happen when a user clicks the input.
    */
@@ -112,9 +119,10 @@ export interface IBasePickerProps<T> extends React.Props<any> {
    */
   removeButtonAriaLabel?: string;
   /**
-   * A callback to process a selection after the user selects something from the picker.
+   * A callback to process a selection after the user selects something from the picker. If the callback returns null,
+   * the item will not be added to the picker.
    */
-  onItemSelected?: (selectedItem?: T) => T | PromiseLike<T>;
+  onItemSelected?: (selectedItem?: T) => T | PromiseLike<T> | null;
   /**
    * The items that the base picker should currently display as selected. If this is provided then the picker will act as a controlled component.
    */
@@ -162,6 +170,10 @@ export interface IBasePickerSuggestionsProps {
    * The text that should appear on the button to search for more.
    */
   searchForMoreText?: string;
+  /**
+   * The text that appears indicating to the use to force resolve the input
+   */
+  forceResolveText?: string;
   /**
    * The text to display while the results are loading.
    */
diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePicker.tsx b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePicker.tsx
index 28a3ed191c1e3..826640d46ab9e 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePicker.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePicker.tsx
@@ -53,7 +53,7 @@ export class ListPeoplePicker extends MemberListPeoplePicker {
 }
 
 export function createGenericItem(name: string, currentValidationState: ValidationState) {
-  let personaToConvert = {
+  const personaToConvert = {
     key: name,
     primaryText: name,
     imageInitials: '!',
diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/PickerItemsDefault.scss b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/PickerItemsDefault.scss
index 464c0279e07fc..be82562459d81 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/PickerItemsDefault.scss
+++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/PickerItemsDefault.scss
@@ -87,9 +87,11 @@
     flex: 0 1 auto;
     min-width: 0px;
 
-    /** CSS below is needed for IE 11 to properly truncate long persona names in the picker **/
+    /** CSS below is needed for IE 11 to properly truncate long persona names in the picker
+     ** and to clip the presence indicator (in all browsers)
+     **/
     max-width: 100%;
-    overflow-x: hidden;
+    overflow: hidden;
   }
 
   .removeButton {
diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx
index b8deb62126cea..e1aa84a1b9ca9 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemDefault.tsx
@@ -10,7 +10,7 @@ import * as stylesImport from './PickerItemsDefault.scss';
 const styles: any = stylesImport;
 
 export const SelectedItemDefault: (props: IPeoplePickerItemProps) => JSX.Element = (peoplePickerItemProps: IPeoplePickerItemProps) => {
-  let {
+  const {
     item,
     onRemoveItem,
     index,
diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx
index 68ab0222c49a6..aec95c5743a6a 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/PeoplePickerItems/SelectedItemWithMenu.tsx
@@ -17,16 +17,17 @@ export interface IPeoplePickerItemState {
 export class SelectedItemWithMenu extends BaseComponent<IPeoplePickerItemWithMenuProps, IPeoplePickerItemState> {
   public refs: {
     [key: string]: any,
-    ellipsisRef: HTMLElement
   };
 
+  private _ellipsisRef: HTMLElement;
+
   constructor(props: IPeoplePickerItemWithMenuProps) {
     super(props);
     this.state = { contextualMenuVisible: false };
   }
 
   public render() {
-    let {
+    const {
       item,
       onRemoveItem,
       removeButtonAriaLabel
@@ -40,7 +41,7 @@ export class SelectedItemWithMenu extends BaseComponent<IPeoplePickerItemWithMen
               presence={ item.presence !== undefined ? item.presence : PersonaPresence.none }
             />
           </div>
-          <div ref='ellipsisRef' className={ css('ms-PickerItem-content', styles.itemContent) }>
+          <div ref={ this._resolveRef('_ellipsisRef') } className={ css('ms-PickerItem-content', styles.itemContent) }>
             <IconButton
               iconProps={ { iconName: 'More' } }
               onClick={ this._onContextualMenu }
@@ -57,7 +58,7 @@ export class SelectedItemWithMenu extends BaseComponent<IPeoplePickerItemWithMen
             <ContextualMenu
               items={ item.menuItems! }
               shouldFocusOnMount={ true }
-              target={ this.refs.ellipsisRef }
+              target={ this._ellipsisRef }
               onDismiss={ this._onCloseContextualMenu }
               directionalHint={ DirectionalHint.bottomAutoEdge }
             />)
diff --git a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx
index d2fe5f67ef39e..c6057aa9bdece 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/PeoplePicker/examples/PeoplePicker.Types.Example.tsx
@@ -55,9 +55,9 @@ export class PeoplePickerTypesExample extends BaseComponent<any, IPeoplePickerEx
 
   constructor(props: {}) {
     super(props);
-    let peopleList: IPersonaWithMenu[] = [];
+    const peopleList: IPersonaWithMenu[] = [];
     people.forEach((persona: IPersonaProps) => {
-      let target: IPersonaWithMenu = {};
+      const target: IPersonaWithMenu = {};
 
       assign(target, persona);
       peopleList.push(target);
@@ -151,6 +151,7 @@ export class PeoplePickerTypesExample extends BaseComponent<any, IPeoplePickerEx
           'aria-label': 'People Picker'
         } }
         componentRef={ this._resolveRef('_picker') }
+        resolveDelay={ 300 }
       />
     );
   }
@@ -174,6 +175,7 @@ export class PeoplePickerTypesExample extends BaseComponent<any, IPeoplePickerEx
         } }
         componentRef={ this._resolveRef('_picker') }
         onInputChange={ this._onInputChange }
+        resolveDelay={ 300 }
       />
     );
   }
@@ -194,6 +196,7 @@ export class PeoplePickerTypesExample extends BaseComponent<any, IPeoplePickerEx
           'aria-label': 'People Picker'
         } }
         componentRef={ this._resolveRef('_picker') }
+        resolveDelay={ 300 }
       />
     );
   }
@@ -216,6 +219,7 @@ export class PeoplePickerTypesExample extends BaseComponent<any, IPeoplePickerEx
           'aria-label': 'People Picker'
         } }
         componentRef={ this._resolveRef('_picker') }
+        resolveDelay={ 300 }
       />
     );
   }
@@ -238,6 +242,7 @@ export class PeoplePickerTypesExample extends BaseComponent<any, IPeoplePickerEx
           'aria-label': 'People Picker'
         } }
         componentRef={ this._resolveRef('_picker') }
+        resolveDelay={ 300 }
       />
     );
   }
@@ -260,14 +265,15 @@ export class PeoplePickerTypesExample extends BaseComponent<any, IPeoplePickerEx
           'aria-label': 'People Picker'
         } }
         componentRef={ this._resolveRef('_picker') }
+        resolveDelay={ 300 }
       />
     );
   }
 
   private _renderControlledPicker() {
-    let controlledItems = [];
+    const controlledItems = [];
     for (let i = 0; i < 5; i++) {
-      let item = this.state.peopleList[i];
+      const item = this.state.peopleList[i];
       if (this.state.currentSelectedItems!.indexOf(item) === -1) {
         controlledItems.push(this.state.peopleList[i]);
       }
@@ -287,9 +293,10 @@ export class PeoplePickerTypesExample extends BaseComponent<any, IPeoplePickerEx
             onFocus: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onFocus called')
           } }
           componentRef={ this._resolveRef('_picker') }
+          resolveDelay={ 300 }
         />
         <label> Click to Add a person </label>
-        { controlledItems.map(item => <div>
+        { controlledItems.map((item, index) => <div key={ index }>
           <DefaultButton
             className='controlledPickerButton'
             // tslint:disable-next-line:jsx-no-lambda
@@ -299,7 +306,7 @@ export class PeoplePickerTypesExample extends BaseComponent<any, IPeoplePickerEx
               });
             } }
           >
-            <Persona { ...item} />
+            <Persona { ...item } />
           </DefaultButton>
         </div>) }
       </div>
@@ -327,17 +334,17 @@ export class PeoplePickerTypesExample extends BaseComponent<any, IPeoplePickerEx
 
   @autobind
   private _onRemoveSuggestion(item: IPersonaProps): void {
-    let { peopleList, mostRecentlyUsed: mruState } = this.state;
-    let indexPeopleList: number = peopleList.indexOf(item);
-    let indexMostRecentlyUsed: number = mruState.indexOf(item);
+    const { peopleList, mostRecentlyUsed: mruState } = this.state;
+    const indexPeopleList: number = peopleList.indexOf(item);
+    const indexMostRecentlyUsed: number = mruState.indexOf(item);
 
     if (indexPeopleList >= 0) {
-      let newPeople: IPersonaProps[] = peopleList.slice(0, indexPeopleList).concat(peopleList.slice(indexPeopleList + 1));
+      const newPeople: IPersonaProps[] = peopleList.slice(0, indexPeopleList).concat(peopleList.slice(indexPeopleList + 1));
       this.setState({ peopleList: newPeople });
     }
 
     if (indexMostRecentlyUsed >= 0) {
-      let newSuggestedPeople: IPersonaProps[] = mruState.slice(0, indexMostRecentlyUsed).concat(mruState.slice(indexMostRecentlyUsed + 1));
+      const newSuggestedPeople: IPersonaProps[] = mruState.slice(0, indexMostRecentlyUsed).concat(mruState.slice(indexMostRecentlyUsed + 1));
       this.setState({ mostRecentlyUsed: newSuggestedPeople });
     }
   }
diff --git a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.scss b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.scss
index 350d4ca0aa812..c8a4d6fe6eb52 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.scss
+++ b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.scss
@@ -61,7 +61,7 @@
   }
 }
 
-.searchMoreButton {
+.actionButton {
   background: none;
   border: 0;
   cursor: pointer;
@@ -93,6 +93,10 @@
   }
 }
 
+.buttonSelected {
+  background-color: $ms-color-themeLight;
+}
+
 .suggestionsTitle {
   padding: 0 12px;
   color: $ms-color-themePrimary;
diff --git a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx
index cf07bd537d4df..d39d62bce8d7d 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.tsx
@@ -11,9 +11,19 @@ import { ISuggestionItemProps, ISuggestionsProps } from './Suggestions.types';
 import * as stylesImport from './Suggestions.scss';
 const styles: any = stylesImport;
 
+export enum SuggestionActionType {
+  none,
+  forceResolve,
+  searchMore,
+}
+
+export interface ISuggestionsState {
+  selectedActionType: SuggestionActionType;
+}
+
 export class SuggestionsItem<T> extends BaseComponent<ISuggestionItemProps<T>, {}> {
   public render() {
-    let {
+    const {
       suggestionModel,
       RenderSuggestion,
       onClick,
@@ -51,14 +61,18 @@ export class SuggestionsItem<T> extends BaseComponent<ISuggestionItemProps<T>, {
   }
 }
 
-export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, {}> {
+export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, ISuggestionsState> {
 
+  protected _forceResolveButton: IButton;
   protected _searchForMoreButton: IButton;
   protected _selectedElement: HTMLDivElement;
   private SuggestionsItemOfProperType = SuggestionsItem as new (props: ISuggestionItemProps<T>) => SuggestionsItem<T>;
 
   constructor(suggestionsProps: ISuggestionsProps<T>) {
     super(suggestionsProps);
+    this.state = {
+      selectedActionType: SuggestionActionType.none,
+    };
   }
 
   public componentDidUpdate() {
@@ -66,7 +80,8 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, {}> {
   }
 
   public render() {
-    let {
+    const {
+      forceResolveText,
       mostRecentlyUsedHeaderText,
       searchForMoreText,
       className,
@@ -83,10 +98,10 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, {}> {
       resultsFooterFull,
       resultsFooter,
       suggestionsAvailableAlertText,
-      suggestionsHeaderText
+      suggestionsHeaderText,
     } = this.props;
 
-    let noResults = () => {
+    const noResults = () => {
       return noResultsFoundText ?
         (
           <div role='alert' className={ css('ms-Suggestions-none', styles.suggestionsNone) }>
@@ -99,7 +114,8 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, {}> {
     if (isMostRecentlyUsedVisible && mostRecentlyUsedHeaderText) {
       headerText = mostRecentlyUsedHeaderText;
     }
-    let footerTitle = (suggestions.length >= (resultsMaximumNumber as number)) ? resultsFooterFull : resultsFooter;
+    const footerTitle = (suggestions.length >= (resultsMaximumNumber as number)) ? resultsFooterFull : resultsFooter;
+    const hasNoSuggestions = (!suggestions || !suggestions.length) && !isLoading;
     return (
       <div
         className={ css(
@@ -111,22 +127,41 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, {}> {
           (<div className={ css('ms-Suggestions-title', styles.suggestionsTitle) }>
             { headerText }
           </div>) : (null) }
+        { forceResolveText && this._shouldShowForceResolve() && (
+          <CommandButton
+            componentRef={ this._resolveRef('_forceResolveButton') }
+            className={ css(
+              'ms-forceResolve-button',
+              styles.actionButton,
+              {
+                ['is-selected ' + styles.buttonSelected]:
+                this.state.selectedActionType === SuggestionActionType.forceResolve
+              }) }
+            onClick={ this._forceResolve }
+          >
+            { forceResolveText }
+          </CommandButton>
+        ) }
         { isLoading && (
           <Spinner
             className={ css('ms-Suggestions-spinner', styles.suggestionsSpinner) }
             label={ loadingText }
           />) }
-        { (!suggestions || !suggestions.length) && !isLoading ?
+        { hasNoSuggestions ?
           (onRenderNoResultFound ? onRenderNoResultFound(undefined, noResults) : noResults()) :
           this._renderSuggestions()
         }
         { searchForMoreText && moreSuggestionsAvailable && (
           <CommandButton
             componentRef={ this._resolveRef('_searchForMoreButton') }
-            className={ css('ms-SearchMore-button', styles.searchMoreButton) }
+            className={ css('ms-SearchMore-button',
+              styles.actionButton,
+              {
+                ['is-selected ' + styles.buttonSelected]:
+                this.state.selectedActionType === SuggestionActionType.searchMore
+              }) }
             iconProps={ { iconName: 'Search' } }
             onClick={ this._getMoreResults }
-            onKeyDown={ this._onKeyDown }
           >
             { searchForMoreText }
           </CommandButton>
@@ -155,6 +190,112 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, {}> {
     );
   }
 
+  /**
+   * Returns true if the event was handled, false otherwise
+   */
+  @autobind
+  public tryHandleKeyDown(keyCode: number, currentSuggestionIndex: number): boolean {
+    let isEventHandled = false;
+    let newSelectedActionType = null;
+    const currentSelectedAction = this.state.selectedActionType;
+    const suggestionLength = this.props.suggestions.length;
+    if (keyCode === KeyCodes.down) {
+      switch (currentSelectedAction) {
+        case SuggestionActionType.forceResolve:
+          if (suggestionLength > 0) {
+            this._refocusOnSuggestions(keyCode);
+            newSelectedActionType = SuggestionActionType.none;
+          } else if (this._searchForMoreButton) {
+            newSelectedActionType = SuggestionActionType.searchMore;
+          } else {
+            newSelectedActionType = SuggestionActionType.forceResolve;
+          }
+          break;
+        case SuggestionActionType.searchMore:
+          if (this._forceResolveButton) {
+            newSelectedActionType = SuggestionActionType.forceResolve;
+          } else if (suggestionLength > 0) {
+            this._refocusOnSuggestions(keyCode);
+            newSelectedActionType = SuggestionActionType.none;
+          } else {
+            newSelectedActionType = SuggestionActionType.searchMore;
+          }
+          break;
+        case SuggestionActionType.none:
+          if (currentSuggestionIndex === -1 && this._forceResolveButton) {
+            newSelectedActionType = SuggestionActionType.forceResolve;
+          }
+          break;
+      }
+    } else if (keyCode === KeyCodes.up) {
+      switch (currentSelectedAction) {
+        case SuggestionActionType.forceResolve:
+          if (this._searchForMoreButton) {
+            newSelectedActionType = SuggestionActionType.searchMore;
+          } else if (suggestionLength > 0) {
+            this._refocusOnSuggestions(keyCode);
+            newSelectedActionType = SuggestionActionType.none;
+          }
+          break;
+        case SuggestionActionType.searchMore:
+          if (suggestionLength > 0) {
+            this._refocusOnSuggestions(keyCode);
+            newSelectedActionType = SuggestionActionType.none;
+          } else if (this._forceResolveButton) {
+            newSelectedActionType = SuggestionActionType.forceResolve;
+          }
+          break;
+        case SuggestionActionType.none:
+          if (currentSuggestionIndex === -1 && this._searchForMoreButton) {
+            newSelectedActionType = SuggestionActionType.searchMore;
+          }
+          break;
+      }
+    }
+
+    if (newSelectedActionType !== null) {
+      this.setState({ selectedActionType: newSelectedActionType });
+      isEventHandled = true;
+    }
+
+    return isEventHandled;
+  }
+
+  public hasSuggestedAction(): boolean {
+    return this._searchForMoreButton !== undefined || this._forceResolveButton !== undefined;
+  }
+
+  public hasSuggestedActionSelected(): boolean {
+    return (this.state.selectedActionType !== SuggestionActionType.none);
+  }
+
+  public executeSelectedAction(): void {
+    switch (this.state.selectedActionType) {
+      case SuggestionActionType.forceResolve:
+        this._forceResolve();
+        break;
+      case SuggestionActionType.searchMore:
+        this._getMoreResults();
+        break;
+    }
+  }
+
+  public focusAboveSuggestions(): void {
+    if (this._forceResolveButton) {
+      this.setState({ selectedActionType: SuggestionActionType.forceResolve });
+    } else if (this._searchForMoreButton) {
+      this.setState({ selectedActionType: SuggestionActionType.searchMore });
+    }
+  }
+
+  public focusBelowSuggestions(): void {
+    if (this._searchForMoreButton) {
+      this.setState({ selectedActionType: SuggestionActionType.searchMore });
+    } else if (this._forceResolveButton) {
+      this.setState({ selectedActionType: SuggestionActionType.forceResolve });
+    }
+  }
+
   public focusSearchForMoreButton() {
     if (this._searchForMoreButton) {
       this._searchForMoreButton.focus();
@@ -163,20 +304,20 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, {}> {
 
   // TODO get the element to scroll into view properly regardless of direction.
   public scrollSelected() {
-    if (this._selectedElement) {
+    if (this._selectedElement && this._selectedElement.scrollIntoView !== undefined) {
       this._selectedElement.scrollIntoView(false);
     }
   }
 
   private _renderSuggestions(): JSX.Element {
-    let {
-      suggestions,
+    const {
       onRenderSuggestion,
       suggestionsItemClassName,
       resultsMaximumNumber,
       showRemoveButtons,
       suggestionsContainerAriaLabel } = this.props;
-    let TypedSuggestionsItem = this.SuggestionsItemOfProperType;
+    let { suggestions } = this.props;
+    const TypedSuggestionsItem = this.SuggestionsItemOfProperType;
 
     if (resultsMaximumNumber) {
       suggestions = suggestions.slice(0, resultsMaximumNumber);
@@ -218,6 +359,18 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, {}> {
     }
   }
 
+  @autobind
+  private _forceResolve() {
+    if (this.props.createGenericItem) {
+      this.props.createGenericItem();
+    }
+  }
+
+  @autobind
+  private _shouldShowForceResolve() {
+    return this.props.showForceResolve ? this.props.showForceResolve() : false;
+  }
+
   @autobind
   private _onClickTypedSuggestionsItem(item: T, index: number): (ev: React.MouseEvent<HTMLElement>) => void {
     return (ev: React.MouseEvent<HTMLElement>): void => {
@@ -226,16 +379,16 @@ export class Suggestions<T> extends BaseComponent<ISuggestionsProps<T>, {}> {
   }
 
   @autobind
-  private _onKeyDown(ev: React.KeyboardEvent<HTMLButtonElement>) {
-    if ((ev.keyCode === KeyCodes.up || ev.keyCode === KeyCodes.down) && typeof this.props.refocusSuggestions === 'function') {
-      this.props.refocusSuggestions(ev.keyCode);
+  private _refocusOnSuggestions(keyCode: number): void {
+    if (typeof this.props.refocusSuggestions === 'function') {
+      this.props.refocusSuggestions(keyCode);
     }
   }
 
   @autobind
   private _onRemoveTypedSuggestionsItem(item: T, index: number): (ev: React.MouseEvent<HTMLElement>) => void {
     return (ev: React.MouseEvent<HTMLElement>): void => {
-      let onSuggestionRemove = this.props.onSuggestionRemove!;
+      const onSuggestionRemove = this.props.onSuggestionRemove!;
       onSuggestionRemove(ev, item, index);
       ev.stopPropagation();
     };
diff --git a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.types.ts b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.types.ts
index 7874e3626641d..10f711966da78 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.types.ts
+++ b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/Suggestions.types.ts
@@ -41,6 +41,18 @@ export interface ISuggestionsProps<T> extends React.Props<any> {
    * The callback that should be called when the user attempts to get more results
    */
   onGetMoreResults?: () => void;
+  /**
+   * The text that appears indicating to the use to force resolve the input
+   */
+  forceResolveText?: string;
+  /**
+   * The callback that should be called to see if the force resolve command should be shown
+   */
+  showForceResolve?: () => boolean;
+  /**
+   * The callback that should be called when the user attempts to use the input text as as item
+   */
+  createGenericItem?: () => void;
   /**
    * The CSS classname of the suggestions list.
    */
diff --git a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/SuggestionsController.ts b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/SuggestionsController.ts
index d6f1ddae8ddaf..4b4e47c92db52 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/Suggestions/SuggestionsController.ts
+++ b/packages/office-ui-fabric-react/src/components/pickers/Suggestions/SuggestionsController.ts
@@ -86,7 +86,7 @@ export class SuggestionsController<T> {
   }
 
   public createGenericSuggestion(itemToConvert: ISuggestionModel<T>) {
-    let itemToAdd = this.convertSuggestionsToSuggestionItems([itemToConvert])[0];
+    const itemToAdd = this.convertSuggestionsToSuggestionItems([itemToConvert])[0];
     this.currentSuggestion = itemToAdd;
   }
 
@@ -97,8 +97,10 @@ export class SuggestionsController<T> {
   }
 
   public deselectAllSuggestions(): void {
-    this.currentIndex = -1;
-    this.suggestions[this.currentIndex].selected = false;
+    if (this.currentIndex > -1) {
+      this.suggestions[this.currentIndex].selected = false;
+      this.currentIndex = -1;
+    }
   }
 
   public setSelectedSuggestion(index: number): void {
diff --git a/packages/office-ui-fabric-react/src/components/pickers/__snapshots__/BasePicker.test.tsx.snap b/packages/office-ui-fabric-react/src/components/pickers/__snapshots__/BasePicker.test.tsx.snap
index f6694b3f2bc5e..6ed2487d4f220 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/__snapshots__/BasePicker.test.tsx.snap
+++ b/packages/office-ui-fabric-react/src/components/pickers/__snapshots__/BasePicker.test.tsx.snap
@@ -40,7 +40,7 @@ exports[`Pickers BasePicker renders BasePicker correctly 1`] = `
         role="list"
       >
         <input
-          aria-activedescendant="sug--1"
+          aria-activedescendant={undefined}
           aria-controls="selected-suggestion-alert"
           aria-expanded={false}
           aria-haspopup="true"
@@ -56,6 +56,7 @@ exports[`Pickers BasePicker renders BasePicker correctly 1`] = `
           onCompositionEnd={[Function]}
           onCompositionStart={[Function]}
           onFocus={[Function]}
+          onInput={[Function]}
           onKeyDown={[Function]}
           role="combobox"
           value=""
@@ -106,7 +107,7 @@ exports[`Pickers TagPicker renders TagPicker correctly 1`] = `
         role="list"
       >
         <input
-          aria-activedescendant="sug--1"
+          aria-activedescendant={undefined}
           aria-controls="selected-suggestion-alert"
           aria-expanded={false}
           aria-haspopup="true"
@@ -122,6 +123,7 @@ exports[`Pickers TagPicker renders TagPicker correctly 1`] = `
           onCompositionEnd={[Function]}
           onCompositionStart={[Function]}
           onFocus={[Function]}
+          onInput={[Function]}
           onKeyDown={[Function]}
           role="combobox"
           value=""
diff --git a/packages/office-ui-fabric-react/src/components/pickers/examples/Picker.CustomResult.Example.tsx b/packages/office-ui-fabric-react/src/components/pickers/examples/Picker.CustomResult.Example.tsx
index 27992cf64646a..99795d8ac93cd 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/examples/Picker.CustomResult.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/examples/Picker.CustomResult.Example.tsx
@@ -282,7 +282,7 @@ export const SuggestedDocumentItem: (documentProps: IFullDocumentCardProps) => J
 };
 
 export const SuggestedBigItem: (documentProps: IFullDocumentCardProps, itemProps: ISuggestionItemProps<any>) => JSX.Element = (documentProps: IFullDocumentCardProps, itemProps: ISuggestionItemProps<any>) => {
-  let {
+  const {
     documentPreviewProps,
     documentTitleProps
   } = documentProps;
@@ -297,13 +297,13 @@ export const SuggestedBigItem: (documentProps: IFullDocumentCardProps, itemProps
 };
 
 export const SelectedDocumentItem: (documentProps: IPickerItemProps<IFullDocumentCardProps>) => JSX.Element = (documentProps: IPickerItemProps<IFullDocumentCardProps>) => {
-  let {
+  const {
     documentActionsProps,
     documentPreviewProps,
     documentActivityProps,
     documentTitleProps
   } = documentProps.item;
-  let actions: IButtonProps[] = [];
+  const actions: IButtonProps[] = [];
   if (documentActionsProps) {
     documentActionsProps.actions.forEach((action: IButtonProps) => actions.push(action));
     actions.push({
@@ -392,7 +392,7 @@ export class PickerCustomResultExample extends React.Component<{}, IPeoplePicker
     if (!items || !items.length || items.length === 0) {
       return false;
     }
-    let documentTitle = document.documentTitleProps && document.documentTitleProps.title;
+    const documentTitle = document.documentTitleProps && document.documentTitleProps.title;
     return items.filter(item => (item.documentTitleProps && item.documentTitleProps.title) === documentTitle).length > 0;
   }
 }
diff --git a/packages/office-ui-fabric-react/src/components/pickers/examples/TagPicker.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/pickers/examples/TagPicker.Basic.Example.tsx
index 092c23623a903..9a92e82bbd00f 100644
--- a/packages/office-ui-fabric-react/src/components/pickers/examples/TagPicker.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/components/pickers/examples/TagPicker.Basic.Example.tsx
@@ -1,12 +1,15 @@
 import * as React from 'react';
-import { autobind } from '../../../Utilities';
+import {
+  autobind,
+  BaseComponent
+} from '../../../Utilities';
 import { TagPicker } from 'office-ui-fabric-react/lib/components/pickers/TagPicker/TagPicker';
 import { Checkbox } from 'office-ui-fabric-react/lib/Checkbox';
 import { ITagPickerDemoPageState } from 'office-ui-fabric-react/lib/components/pickers/examples/ITagPickerDemoPageState';
 import * as exampleStylesImport from '../../../common/_exampleStyles.scss';
 const exampleStyles: any = exampleStylesImport;
 
-let _testTags = [
+const _testTags = [
   'black',
   'blue',
   'brown',
@@ -24,7 +27,9 @@ let _testTags = [
   'yellow'
 ].map(item => ({ key: item, name: item }));
 
-export class TagPickerBasicExample extends React.Component<{}, ITagPickerDemoPageState> {
+export class TagPickerBasicExample extends BaseComponent<{}, ITagPickerDemoPageState> {
+  private _picker: TagPicker;
+
   constructor(props: {}) {
     super(props);
     this.state = {
@@ -41,8 +46,8 @@ export class TagPickerBasicExample extends React.Component<{}, ITagPickerDemoPag
           checked={ this.state.isPickerDisabled }
           onChange={ this._onDisabledButtonClick }
         />
+        Filter items in suggestions: This picker will filter added items from the search suggestions.
         <TagPicker
-          ref='tagPicker'
           onResolveSuggestions={ this._onFilterChanged }
           getTextFromItem={ this._getTextFromItem }
           pickerSuggestionsProps={
@@ -59,6 +64,27 @@ export class TagPickerBasicExample extends React.Component<{}, ITagPickerDemoPag
             'aria-label': 'Tag Picker'
           } }
         />
+        <br />
+        Filter items on selected: This picker will show already-added suggestions but will not add duplicate tags.
+        <TagPicker
+          componentRef={ this._resolveRef('_picker') }
+          onResolveSuggestions={ this._onFilterChangedNoFilter }
+          onItemSelected={ this._onItemSelected }
+          getTextFromItem={ this._getTextFromItem }
+          pickerSuggestionsProps={
+            {
+              suggestionsHeaderText: 'Suggested Tags',
+              noResultsFoundText: 'No Color Tags Found'
+            }
+          }
+          itemLimit={ 2 }
+          disabled={ this.state.isPickerDisabled }
+          inputProps={ {
+            onBlur: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onBlur called'),
+            onFocus: (ev: React.FocusEvent<HTMLInputElement>) => console.log('onFocus called'),
+            'aria-label': 'Tag Picker'
+          } }
+        />
       </div>
     );
   }
@@ -76,7 +102,21 @@ export class TagPickerBasicExample extends React.Component<{}, ITagPickerDemoPag
 
   @autobind
   private _onFilterChanged(filterText: string, tagList: { key: string, name: string }[]) {
-    return filterText ? _testTags.filter(tag => tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0).filter(item => !this._listContainsDocument(item, tagList)) : [];
+    return filterText ? _testTags.filter(tag => tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0)
+      .filter(tag => !this._listContainsDocument(tag, tagList)) : [];
+  }
+
+  @autobind
+  private _onFilterChangedNoFilter(filterText: string, tagList: { key: string, name: string }[]) {
+    return filterText ? _testTags.filter(tag => tag.name.toLowerCase().indexOf(filterText.toLowerCase()) === 0) : [];
+  }
+
+  @autobind
+  private _onItemSelected(item: any) {
+    if (this._listContainsDocument(item, this._picker.items)) {
+      return null;
+    }
+    return item;
   }
 
   private _listContainsDocument(tag: { key: string, name: string }, tagList: { key: string, name: string }[]) {
diff --git a/packages/office-ui-fabric-react/src/demo/AppDefinition.tsx b/packages/office-ui-fabric-react/src/demo/AppDefinition.tsx
index 8af25e6e9211d..c4d075aaf7ad8 100644
--- a/packages/office-ui-fabric-react/src/demo/AppDefinition.tsx
+++ b/packages/office-ui-fabric-react/src/demo/AppDefinition.tsx
@@ -52,6 +52,12 @@ export const AppDefinition: IAppDefinition = {
           name: 'Checkbox',
           url: '#/examples/checkbox'
         },
+        {
+          component: require<any>('../components/Coachmark/CoachmarkPage').CoachmarkPage,
+          key: 'Coachmark',
+          name: 'Coachmark',
+          url: '#/examples/coachmark'
+        },
         {
           component: require<any>('../components/ChoiceGroup/ChoiceGroupPage').ChoiceGroupPage,
           key: 'ChoiceGroup',
@@ -353,8 +359,8 @@ export const AppDefinition: IAppDefinition = {
         {
           component: require<any>('../components/ThemeGenerator/ThemeGeneratorPage').ThemeGeneratorPage,
           key: 'Theme Generator',
-          name: 'Beta Theme Generator',
-          url: '#examples/themeGenerator'
+          name: 'Theme Generator',
+          url: '#examples/themegenerator'
         },
         {
           component: require<any>('./ComponentStatus/ComponentStatusPage').ComponentStatusPage,
diff --git a/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatus.tsx b/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatus.tsx
index a54fa10602999..70e8c9b23e998 100644
--- a/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatus.tsx
+++ b/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatus.tsx
@@ -59,6 +59,7 @@ export class ComponentStatus extends React.Component<IComponentStatusProps, {}>
   private _colorForComponentStateStatus(testCoverageStatus: ChecklistStatus | undefined): string {
     switch (testCoverageStatus) {
       case ChecklistStatus.unknown:
+      case ChecklistStatus.notApplicable:
         return 'lightgrey';
       case ChecklistStatus.fail:
       case ChecklistStatus.none:
diff --git a/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatus.types.ts b/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatus.types.ts
index 7388bad06d88d..31320904cd1df 100644
--- a/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatus.types.ts
+++ b/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatus.types.ts
@@ -8,9 +8,10 @@ export interface IComponentStatusProps {
 
 export enum ChecklistStatus {
   unknown = 'Unknown',
+  notApplicable = 'Not applicable',
   pass = 'Pass',
   fail = 'Fail',
-  none = 'No Tests',
+  none = 'No tests',
   poor = 'Poor',
   fair = 'Fair',
   good = 'Good'
diff --git a/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatusPage.tsx b/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatusPage.tsx
index 7e3983cea2f9d..f8711dae7a53b 100644
--- a/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatusPage.tsx
+++ b/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatusPage.tsx
@@ -8,7 +8,7 @@ import './ComponentStatusPage.scss';
 
 export class ComponentStatusPage extends React.Component<{}, {}> {
   public render() {
-    let sections: [IComponentPageSection] = [{ title: 'Badges', section: this._renderStatusesInfo() }, { title: 'Status', section: this._renderComponents() }];
+    const sections: IComponentPageSection[] = [{ title: 'Badges', section: this._renderStatusesInfo() }, { title: 'Status', section: this._renderComponents() }];
 
     return (
       <ComponentPage
@@ -43,12 +43,12 @@ export class ComponentStatusPage extends React.Component<{}, {}> {
   }
 
   private _renderComponent(componentName: string): JSX.Element {
-    let component = AllComponentsStatus[componentName];
+    const component = AllComponentsStatus[componentName];
     return (
       <tr key={ componentName + '-key' }>
         <th className='componentCells'><h3>{ componentName } </h3> </th>
         <td className='componentBadgeCell'><ComponentStatus
-          {...component}
+          { ...component }
         /></td>
       </tr >
     );
diff --git a/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatusState.tsx b/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatusState.tsx
index eaa20549e9edf..9ab588dd6f1c6 100644
--- a/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatusState.tsx
+++ b/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatusState.tsx
@@ -10,7 +10,7 @@ export interface InformationLink {
   renderedText: string;
 }
 
-export const ComponentStatusInfoState: [IComponentStatusInfoState] = [
+export const ComponentStatusInfoState: IComponentStatusInfoState[] = [
   {
     name: 'Keyboard Accessibility Support',
     description: 'Components should be fully usable with the keyboard.',
diff --git a/packages/office-ui-fabric-react/src/demo/index.tsx b/packages/office-ui-fabric-react/src/demo/index.tsx
index 54d15e9e76fd3..23e30f0ccfa08 100644
--- a/packages/office-ui-fabric-react/src/demo/index.tsx
+++ b/packages/office-ui-fabric-react/src/demo/index.tsx
@@ -23,7 +23,7 @@ let rootElement: HTMLElement | null;
 
 // Return the anchor link from the URL without the hash
 function _extractAnchorLink(path: string) {
-  let index = path.lastIndexOf('#');
+  const index = path.lastIndexOf('#');
   if (index >= 0) {
     path = path.substr(index + 1, path.length - index);
   }
@@ -32,7 +32,7 @@ function _extractAnchorLink(path: string) {
 
 function _scrollAnchorLink() {
   if ((window.location.hash.match(/#/g) || []).length > 1) {
-    let anchor = _extractAnchorLink(window.location.hash);
+    const anchor = _extractAnchorLink(window.location.hash);
     document.getElementById(anchor)!.scrollIntoView();
   }
 }
@@ -50,8 +50,8 @@ function _onLoad() {
 }
 
 function _getRoutes() {
-  let routes = AppDefinition.testPages.map(page => <Route key={ page.key } path={ page.url } component={ page.component } />);
-  let appRoutes: JSX.Element[] = [];
+  const routes = AppDefinition.testPages.map(page => <Route key={ page.key } path={ page.url } component={ page.component } />);
+  const appRoutes: JSX.Element[] = [];
 
   AppDefinition.examplePages.forEach(group => {
     group.links
@@ -89,7 +89,7 @@ function _onUnload() {
   }
 }
 
-let isReady = document.readyState === 'interactive' || document.readyState === 'complete';
+const isReady = document.readyState === 'interactive' || document.readyState === 'complete';
 
 if (isReady) {
   _onLoad();
diff --git a/packages/office-ui-fabric-react/src/utilities/color/colors.ts b/packages/office-ui-fabric-react/src/utilities/color/colors.ts
index 3ae8159acb0cf..f7b08e9ab90a6 100644
--- a/packages/office-ui-fabric-react/src/utilities/color/colors.ts
+++ b/packages/office-ui-fabric-react/src/utilities/color/colors.ts
@@ -156,14 +156,14 @@ export function hsv2rgb(h: number, s: number, v: number): IRGB {
 }
 
 export function getColorFromString(inputColor: string): IColor | undefined {
-  let color = cssColor(inputColor);
+  const color = cssColor(inputColor);
 
   if (!color) {
     return;
   }
 
-  let { a, b, g, r } = color;
-  let { h, s, v } = rgb2hsv(r, g, b);
+  const { a, b, g, r } = color;
+  const { h, s, v } = rgb2hsv(r, g, b);
 
   return {
     a: a,
@@ -179,10 +179,10 @@ export function getColorFromString(inputColor: string): IColor | undefined {
 }
 
 export function getColorFromRGBA(rgba: { r: number, g: number, b: number, a: number }): IColor {
-  let { a, b, g, r } = rgba;
-  let { h, s, v } = rgb2hsv(r, g, b);
+  const { a, b, g, r } = rgba;
+  const { h, s, v } = rgb2hsv(r, g, b);
 
-  let hex = rgb2hex(r, g, b);
+  const hex = rgb2hex(r, g, b);
   return {
     a: a,
     b: b,
@@ -201,8 +201,8 @@ export function getFullColorString(color: IColor): string {
 }
 
 export function updateSV(color: IColor, s: number, v: number): IColor {
-  let { r, g, b } = hsv2rgb(color.h, s, v);
-  let hex = rgb2hex(r, g, b);
+  const { r, g, b } = hsv2rgb(color.h, s, v);
+  const hex = rgb2hex(r, g, b);
 
   return {
     a: color.a,
@@ -218,8 +218,8 @@ export function updateSV(color: IColor, s: number, v: number): IColor {
 }
 
 export function updateH(color: IColor, h: number): IColor {
-  let { r, g, b } = hsv2rgb(h, color.s, color.v);
-  let hex = rgb2hex(r, g, b);
+  const { r, g, b } = hsv2rgb(h, color.s, color.v);
+  const hex = rgb2hex(r, g, b);
 
   return {
     a: color.a,
diff --git a/packages/office-ui-fabric-react/src/utilities/color/shades.ts b/packages/office-ui-fabric-react/src/utilities/color/shades.ts
index 8a5178887ca35..49d5bbd437fa7 100644
--- a/packages/office-ui-fabric-react/src/utilities/color/shades.ts
+++ b/packages/office-ui-fabric-react/src/utilities/color/shades.ts
@@ -19,12 +19,12 @@ const WhiteShadeTable = [.463, .651, .784, .816, .855, .918, .957, .973]; // whi
 const BlackTintTable = [.463, .55, .651, .784, .816, .855, .918, .957]; // black fg
 const LumTintTable = [.12, .23, .34, .45, .56, .67, .78, .89]; // light (strongen all)
 const LumShadeTable = [.89, .78, .67, .56, .45, .34, .23, .12]; // dark (soften all)
-const ColorTintTable = [.050, .100, .200, .42, .90]; // default soften
-const ColorShadeTable = [.90, .70, .550]; // default strongen
+const ColorTintTable = [.07, .18, .436, .751, .956]; // default soften
+const ColorShadeTable = [.90, .64, .550]; // default strongen
 
 // If the given shade's luminance is below/above these values, we'll swap to using the White/Black tables above
-const c_LuminanceLow = 0.2;
-const c_LuminanceHigh = 0.8;
+const LowLuminanceThreshold = 0.2;
+const HighLuminanceThreshold = 0.8;
 
 /** Shades of a given color, from softest to strongest. */
 export enum Shade {
@@ -105,7 +105,7 @@ export function getShade(color: IColor, shade: Shade, isInverted = false) {
   }
 
   let hsl = Colors.hsv2hsl(color.h, color.s, color.v);
-  let tableIndex = shade - 1;
+  const tableIndex = shade - 1;
   let _soften = _lighten;
   let _strongen = _darken;
   if (isInverted) {
@@ -117,9 +117,9 @@ export function getShade(color: IColor, shade: Shade, isInverted = false) {
     hsl = _darken(hsl, WhiteShadeTable[tableIndex]);
   } else if (_isBlack(color)) { // black
     hsl = _lighten(hsl, BlackTintTable[tableIndex]);
-  } else if (hsl.l / 100 > c_LuminanceHigh) { // light
+  } else if (hsl.l / 100 > HighLuminanceThreshold) { // light
     hsl = _strongen(hsl, LumShadeTable[tableIndex]);
-  } else if (hsl.l / 100 < c_LuminanceLow) { // dark
+  } else if (hsl.l / 100 < LowLuminanceThreshold) { // dark
     hsl = _soften(hsl, LumTintTable[tableIndex]);
   } else { // default
     if (tableIndex < ColorTintTable.length) {
@@ -146,7 +146,7 @@ export function getBackgroundShade(color: IColor, shade: Shade, isInverted = fal
   }
 
   let hsl = Colors.hsv2hsl(color.h, color.s, color.v);
-  let tableIndex = shade - 1;
+  const tableIndex = shade - 1;
   if (!isInverted) { // lightish
     hsl = _darken(hsl, WhiteShadeTableBG[tableIndex]);
   } else { // default: if (hsl.l / 100 < .5) { // darkish
@@ -173,19 +173,19 @@ export function getContrastRatio(color1: IColor, color2: IColor) {
     }
   }
 
-  let r1 = _getThing(color1.r / MAX_COLOR_RGBA);
-  let g1 = _getThing(color1.g / MAX_COLOR_RGBA);
-  let b1 = _getThing(color1.b / MAX_COLOR_RGBA);
+  const r1 = _getThing(color1.r / MAX_COLOR_RGBA);
+  const g1 = _getThing(color1.g / MAX_COLOR_RGBA);
+  const b1 = _getThing(color1.b / MAX_COLOR_RGBA);
   let L1 = (.2126 * r1) + (.7152 * g1) + (.0722 * b1); // relative luminance of first color
   L1 += .05;
 
-  let r2 = _getThing(color2.r / MAX_COLOR_RGBA);
-  let g2 = _getThing(color2.g / MAX_COLOR_RGBA);
-  let b2 = _getThing(color2.b / MAX_COLOR_RGBA);
+  const r2 = _getThing(color2.r / MAX_COLOR_RGBA);
+  const g2 = _getThing(color2.g / MAX_COLOR_RGBA);
+  const b2 = _getThing(color2.b / MAX_COLOR_RGBA);
   let L2 = (.2126 * r2) + (.7152 * g2) + (.0722 * b2); // relative luminance of second color
   L2 += .05;
 
   // return the lighter color divided by darker
   return L1 / L2 > 1 ?
     L1 / L2 : L2 / L1;
-}
\ No newline at end of file
+}
diff --git a/packages/office-ui-fabric-react/src/utilities/contextualMenu/contextualMenuUtility.test.ts b/packages/office-ui-fabric-react/src/utilities/contextualMenu/contextualMenuUtility.test.ts
new file mode 100644
index 0000000000000..6a1d579d3275d
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/utilities/contextualMenu/contextualMenuUtility.test.ts
@@ -0,0 +1,96 @@
+import { getIsChecked, hasSubmenu } from './contextualMenuUtility';
+import { IContextualMenuItem } from '../..';
+
+describe('getIsChecked', () => {
+  describe('when item can be checked', () => {
+    let menuItem: IContextualMenuItem;
+
+    beforeEach(() => {
+      menuItem = { key: '123', canCheck: true };
+    });
+
+    it('returns true when isChecked', () => {
+      menuItem.isChecked = true;
+      expect(getIsChecked(menuItem)).toBe(true);
+    });
+
+    it('returns true when checked', () => {
+      menuItem.checked = true;
+      expect(getIsChecked(menuItem)).toBe(true);
+    });
+  });
+
+  describe('when item isChecked', () => {
+    let menuItem: IContextualMenuItem;
+
+    beforeEach(() => {
+      menuItem = { key: '123', isChecked: true };
+    });
+
+    it('returns true', () => {
+      expect(getIsChecked(menuItem)).toBe(true);
+    });
+  });
+
+  describe('when item checked flag is true', () => {
+    let menuItem: IContextualMenuItem;
+
+    beforeEach(() => {
+      menuItem = { key: '123', checked: true };
+    });
+
+    it('returns true', () => {
+      expect(getIsChecked(menuItem)).toBe(true);
+    });
+  });
+
+  describe('when it is not checked', () => {
+    let menuItem: IContextualMenuItem;
+
+    beforeEach(() => {
+      menuItem = { key: '123' };
+    });
+
+    it('returns false', () => {
+      expect(getIsChecked(menuItem)).toBeFalsy();
+    });
+  });
+});
+
+describe('hasSubmenu', () => {
+  describe('when there is a submenu props', () => {
+    let menuItem: IContextualMenuItem;
+
+    beforeEach(() => {
+      menuItem = { key: '123', subMenuProps: { items: [] } };
+    });
+
+    it('returns true', () => {
+      expect(hasSubmenu(menuItem)).toBe(true);
+    });
+  });
+
+  describe('when there are items', () => {
+    let menuItem: IContextualMenuItem;
+
+    beforeEach(() => {
+      menuItem = { key: '123', items: [] };
+    });
+
+    it('returns true', () => {
+      expect(hasSubmenu(menuItem)).toBe(true);
+    });
+  });
+
+  describe('when there are no submenu items', () => {
+    let menuItem: IContextualMenuItem;
+
+    beforeEach(() => {
+      menuItem = { key: '123' };
+    });
+
+    it('returns false', () => {
+      expect(hasSubmenu(menuItem)).toBe(false);
+    });
+  });
+});
diff --git a/packages/office-ui-fabric-react/src/utilities/contextualMenu/contextualMenuUtility.ts b/packages/office-ui-fabric-react/src/utilities/contextualMenu/contextualMenuUtility.ts
new file mode 100644
index 0000000000000..e296244f73c73
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/utilities/contextualMenu/contextualMenuUtility.ts
@@ -0,0 +1,30 @@
+import { IContextualMenuItem } from '../..';
+
+/**
+ * Determines the effective checked state of a menu item.
+ *
+ * @param item {IContextualMenuItem} to get the check state of.
+ * @returns {true} if the item is checked.
+ * @returns {false} if the item is unchecked.
+ * @returns {null} if the item is not checkable.
+ */
+export function getIsChecked(item: IContextualMenuItem): boolean | null {
+  if (item.canCheck) {
+    return !!(item.isChecked || item.checked);
+  }
+
+  if (typeof item.isChecked === 'boolean') {
+    return item.isChecked;
+  }
+
+  if (typeof item.checked === 'boolean') {
+    return item.checked;
+  }
+
+  // Item is not checkable.
+  return null;
+}
+
+export function hasSubmenu(item: IContextualMenuItem) {
+  return !!(item.subMenuProps || item.items);
+}
diff --git a/packages/office-ui-fabric-react/src/utilities/contextualMenu/index.ts b/packages/office-ui-fabric-react/src/utilities/contextualMenu/index.ts
new file mode 100644
index 0000000000000..5ab11502d63a0
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/utilities/contextualMenu/index.ts
@@ -0,0 +1 @@
+export * from './contextualMenuUtility';
diff --git a/packages/office-ui-fabric-react/src/utilities/dateMath/DateMath.test.ts b/packages/office-ui-fabric-react/src/utilities/dateMath/DateMath.test.ts
index e6ac56c83b57e..4e977978f3306 100644
--- a/packages/office-ui-fabric-react/src/utilities/dateMath/DateMath.test.ts
+++ b/packages/office-ui-fabric-react/src/utilities/dateMath/DateMath.test.ts
@@ -19,39 +19,39 @@ enum Months {
 describe('DateMath', () => {
 
   it('can add days', () => {
-    let startDate = new Date(2016, Months.Apr, 1);
-    let result = DateMath.addDays(startDate, 5);
-    let expected = new Date(2016, Months.Apr, 6);
+    const startDate = new Date(2016, Months.Apr, 1);
+    const result = DateMath.addDays(startDate, 5);
+    const expected = new Date(2016, Months.Apr, 6);
 
     expect(result.getTime()).toEqual(expected.getTime());
   });
 
   it('can add days across a month boundary', () => {
-    let startDate = new Date(2016, Months.Mar, 30);
-    let result = DateMath.addDays(startDate, 5);
-    let expected = new Date(2016, Months.Apr, 4);
+    const startDate = new Date(2016, Months.Mar, 30);
+    const result = DateMath.addDays(startDate, 5);
+    const expected = new Date(2016, Months.Apr, 4);
 
     expect(result.getTime()).toEqual(expected.getTime());
   });
 
   it('can add days across multiple month boundaries', () => {
-    let startDate = new Date(2016, Months.Mar, 31);
-    let result = DateMath.addDays(startDate, 65);
-    let expected = new Date(2016, Months.Jun, 4);
+    const startDate = new Date(2016, Months.Mar, 31);
+    const result = DateMath.addDays(startDate, 65);
+    const expected = new Date(2016, Months.Jun, 4);
 
     expect(result.getTime()).toEqual(expected.getTime());
   });
 
   it('can add days across leap day boundaries', () => {
-    let startDate = new Date(2016, Months.Feb, 28);
-    let result = DateMath.addDays(startDate, 2);
-    let expected = new Date(2016, Months.Mar, 1);
+    const startDate = new Date(2016, Months.Feb, 28);
+    const result = DateMath.addDays(startDate, 2);
+    const expected = new Date(2016, Months.Mar, 1);
 
     expect(result.getTime()).toEqual(expected.getTime());
   });
 
   it('can add months', () => {
-    let startDate = new Date(2015, Months.Dec, 31);
+    const startDate = new Date(2015, Months.Dec, 31);
 
     let result = DateMath.addMonths(startDate, 1);
     let expected = new Date(2016, Months.Jan, 31);
@@ -127,39 +127,39 @@ describe('DateMath', () => {
   });
 
   it('can subtract days', () => {
-    let startDate = new Date(2016, Months.Apr, 30);
-    let result = DateMath.addDays(startDate, -5);
-    let expected = new Date(2016, Months.Apr, 25);
+    const startDate = new Date(2016, Months.Apr, 30);
+    const result = DateMath.addDays(startDate, -5);
+    const expected = new Date(2016, Months.Apr, 25);
 
     expect(result.getTime()).toEqual(expected.getTime());
   });
 
   it('can subtract days across a month boundry', () => {
-    let startDate = new Date(2016, Months.Apr, 1);
-    let result = DateMath.addDays(startDate, -5);
-    let expected = new Date(2016, Months.Mar, 27);
+    const startDate = new Date(2016, Months.Apr, 1);
+    const result = DateMath.addDays(startDate, -5);
+    const expected = new Date(2016, Months.Mar, 27);
 
     expect(result.getTime()).toEqual(expected.getTime());
   });
 
   it('can subtract days across multiple month boundaries', () => {
-    let startDate = new Date(2016, Months.Jul, 4);
-    let result = DateMath.addDays(startDate, -65);
-    let expected = new Date(2016, Months.Apr, 30);
+    const startDate = new Date(2016, Months.Jul, 4);
+    const result = DateMath.addDays(startDate, -65);
+    const expected = new Date(2016, Months.Apr, 30);
 
     expect(result.getTime()).toEqual(expected.getTime());
   });
 
   it('can subtract days across leap day boundaries', () => {
-    let startDate = new Date(2016, Months.Mar, 1);
-    let result = DateMath.addDays(startDate, -2);
-    let expected = new Date(2016, Months.Feb, 28);
+    const startDate = new Date(2016, Months.Mar, 1);
+    const result = DateMath.addDays(startDate, -2);
+    const expected = new Date(2016, Months.Feb, 28);
 
     expect(result.getTime()).toEqual(expected.getTime());
   });
 
   it('can subtract months', () => {
-    let startDate = new Date(2016, Months.Dec, 31);
+    const startDate = new Date(2016, Months.Dec, 31);
 
     let result = DateMath.addMonths(startDate, -12);
     let expected = new Date(2015, Months.Dec, 31);
@@ -269,7 +269,7 @@ describe('DateMath', () => {
   });
 
   it('can get date range array', () => {
-    let date = new Date(2017, 2, 16);
+    const date = new Date(2017, 2, 16);
 
     // Date range: day
     let dateRangeArray = DateMath.getDateRangeArray(date, DateRangeType.Day, DayOfWeek.Sunday);
@@ -282,7 +282,7 @@ describe('DateMath', () => {
     Array(7).forEach((val, i) => expect(DateMath.compareDates(dateRangeArray[i], expectedDates[i])).toBe(true));
 
     // Date range: work week
-    let workWeekDays = [
+    const workWeekDays = [
       DayOfWeek.Monday,
       DayOfWeek.Tuesday,
       DayOfWeek.Thursday,
@@ -464,7 +464,7 @@ describe('DateMath', () => {
   });
 
   it('can get the month start and end', () => {
-    let date = new Date('Dec 15 2017');
+    const date = new Date('Dec 15 2017');
 
     // First day of month
     expect(DateMath.compareDates(new Date('Dec 1 2017'), DateMath.getMonthStart(date))).toBe(true);
@@ -474,7 +474,7 @@ describe('DateMath', () => {
   });
 
   it('can get the year start and end', () => {
-    let date = new Date('Dec 15 2017');
+    const date = new Date('Dec 15 2017');
 
     // First day of year
     expect(DateMath.compareDates(new Date('Jan 1 2017'), DateMath.getYearStart(date))).toBe(true);
diff --git a/packages/office-ui-fabric-react/src/utilities/dateMath/DateMath.ts b/packages/office-ui-fabric-react/src/utilities/dateMath/DateMath.ts
index 8e45f1af1cd7c..7f797273c78cf 100644
--- a/packages/office-ui-fabric-react/src/utilities/dateMath/DateMath.ts
+++ b/packages/office-ui-fabric-react/src/utilities/dateMath/DateMath.ts
@@ -9,7 +9,7 @@ import { assertNever } from '../../Utilities';
  * @return {Date} A new Date object offset from the origin date by the given number of days
  */
 export function addDays(date: Date, days: number): Date {
-  let result = new Date(date.getTime());
+  const result = new Date(date.getTime());
   result.setDate(result.getDate() + days);
   return result;
 }
@@ -34,7 +34,7 @@ export function addWeeks(date: Date, weeks: number): Date {
  */
 export function addMonths(date: Date, months: number): Date {
   let result = new Date(date.getTime());
-  let newMonth = result.getMonth() + months;
+  const newMonth = result.getMonth() + months;
   result.setMonth(newMonth);
 
   // We want to maintain the same day-of-month, but that may not be possible if the new month doesn't have enough days.
@@ -152,7 +152,7 @@ export function compareDatePart(date1: Date, date2: Date): Number {
  * @returns {Date[]} An array of dates representing the date range containing the specified date.
  */
 export function getDateRangeArray(date: Date, dateRangeType: DateRangeType, firstDayOfWeek: DayOfWeek, workWeekDays?: DayOfWeek[]): Date[] {
-  let datesArray = new Array<Date>();
+  const datesArray = new Array<Date>();
   let startDate: Date;
   let endDate = null;
 
@@ -204,7 +204,7 @@ export function getDateRangeArray(date: Date, dateRangeType: DateRangeType, firs
  * @returns {bool} True if the date matches one of the dates in the specified array, false otherwise.
  */
 export function isInDateRangeArray(date: Date, dateRange: Date[]): boolean {
-  for (let dateInRange of dateRange) {
+  for (const dateInRange of dateRange) {
     if (compareDates(date, dateInRange)) {
       return true;
     }
@@ -225,17 +225,17 @@ export function getWeekNumbersInMonth(
   firstDayOfWeek: DayOfWeek,
   firstWeekOfYear: FirstWeekOfYear,
   navigatedDate: Date) {
-  let selectedYear = navigatedDate.getFullYear();
-  let selectedMonth = navigatedDate.getMonth();
+  const selectedYear = navigatedDate.getFullYear();
+  const selectedMonth = navigatedDate.getMonth();
   let dayOfMonth = 1;
-  let fistDayOfMonth = new Date(selectedYear, selectedMonth, dayOfMonth);
-  let endOfFirstWeek = dayOfMonth
+  const fistDayOfMonth = new Date(selectedYear, selectedMonth, dayOfMonth);
+  const endOfFirstWeek = dayOfMonth
     + (firstDayOfWeek + TimeConstants.DaysInOneWeek - 1)
     - adjustWeekDay(firstDayOfWeek, fistDayOfMonth.getDay());
   let endOfWeekRange = new Date(selectedYear, selectedMonth, endOfFirstWeek);
   dayOfMonth = endOfWeekRange.getDate();
 
-  let weeksArray = [];
+  const weeksArray = [];
   for (let i = 0; i < weeksInMonth; i++) {
     // Get week number for end of week
     weeksArray.push(getWeekNumber(endOfWeekRange, firstDayOfWeek, firstWeekOfYear));
@@ -313,14 +313,11 @@ function getDatePartHashValue(date: Date) {
 * @return {Number} The week's number in the year.
 */
 function getWeekOfYearFullDays(date: Date, firstDayOfWeek: DayOfWeek, numberOfFullDays: number) {
-  let dayOfYear = getDayOfYear(date) - 1;
-  let dateWeekDay = date.getDay();
+  const dayOfYear = getDayOfYear(date) - 1;
   let num = (date.getDay()) - (dayOfYear % TimeConstants.DaysInOneWeek);
 
-  let lastDayOfPrevYear = new Date(date.getFullYear() - 1, MonthOfYear.December, 31);
-  let daysInYear = getDayOfYear(lastDayOfPrevYear) - 1;
-
-  let adjustedWeekDay = adjustWeekDay(firstDayOfWeek, dateWeekDay);
+  const lastDayOfPrevYear = new Date(date.getFullYear() - 1, MonthOfYear.December, 31);
+  const daysInYear = getDayOfYear(lastDayOfPrevYear) - 1;
 
   let num2 = ((firstDayOfWeek - num) + (2 * TimeConstants.DaysInOneWeek)) % TimeConstants.DaysInOneWeek;
   if ((num2 !== 0) && (num2 >= numberOfFullDays)) {
@@ -349,9 +346,9 @@ function getWeekOfYearFullDays(date: Date, firstDayOfWeek: DayOfWeek, numberOfFu
 * @return {Number} The week's number in the year.
 */
 function getFirstDayWeekOfYear(date: Date, firstDayOfWeek: number) {
-  let num = getDayOfYear(date) - 1;
-  let num2 = (date.getDay()) - (num % TimeConstants.DaysInOneWeek);
-  let num3 = ((num2 - firstDayOfWeek) + 2 * TimeConstants.DaysInOneWeek) % TimeConstants.DaysInOneWeek;
+  const num = getDayOfYear(date) - 1;
+  const num2 = (date.getDay()) - (num % TimeConstants.DaysInOneWeek);
+  const num3 = ((num2 - firstDayOfWeek) + 2 * TimeConstants.DaysInOneWeek) % TimeConstants.DaysInOneWeek;
 
   return Math.floor(((num + num3) / TimeConstants.DaysInOneWeek) + 1);
 }
@@ -375,8 +372,8 @@ function adjustWeekDay(firstDayOfWeek: DayOfWeek, dateWeekDay: DayOfWeek) {
  * @return {Number} The day's number in the year.
  */
 function getDayOfYear(date: Date) {
-  let month = date.getMonth();
-  let year = date.getFullYear();
+  const month = date.getMonth();
+  const year = date.getFullYear();
   let daysUntilDate = 0;
 
   for (let i = 0; i < month; i++) {
diff --git a/packages/office-ui-fabric-react/src/utilities/dateValues/TimeConstants.ts b/packages/office-ui-fabric-react/src/utilities/dateValues/TimeConstants.ts
index b81095d5c4af0..78057a176776d 100644
--- a/packages/office-ui-fabric-react/src/utilities/dateValues/TimeConstants.ts
+++ b/packages/office-ui-fabric-react/src/utilities/dateValues/TimeConstants.ts
@@ -1,7 +1,7 @@
 /**
  * Common constants and methods
  */
-let TimeConstants = {
+const TimeConstants = {
   MillisecondsInOneDay: 86400000,
   MillisecondsIn1Sec: 1000,
   MillisecondsIn1Min: 60000,
diff --git a/packages/office-ui-fabric-react/src/utilities/decorators/withContainsFocus.tsx b/packages/office-ui-fabric-react/src/utilities/decorators/withContainsFocus.tsx
index f2325ce53dd34..339e8b16d5d1d 100644
--- a/packages/office-ui-fabric-react/src/utilities/decorators/withContainsFocus.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/decorators/withContainsFocus.tsx
@@ -4,10 +4,6 @@ import { BaseDecorator } from './BaseDecorator';
 export function withContainsFocus<TProps extends { containsFocus?: boolean }, S>(ComposedComponent: (new (props: TProps, ...args: any[]) => (React.Component<TProps, S>))): any {
 
   return class WithContainsFocusComponent extends BaseDecorator<TProps & { containsFocus?: boolean }, { containsFocus?: boolean }> {
-    public refs: {
-      [key: string]: React.ReactInstance,
-    };
-
     private _newContainsFocus: boolean;
     private _delayedSetContainsFocus: () => void;
 
@@ -29,10 +25,10 @@ export function withContainsFocus<TProps extends { containsFocus?: boolean }, S>
     }
 
     public render() {
-      let { containsFocus } = this.state;
+      const { containsFocus } = this.state;
 
       return (
-        <div ref='root' onFocus={ this._handleFocus } onBlur={ this._handleBlur }>
+        <div onFocus={ this._handleFocus } onBlur={ this._handleBlur }>
           <ComposedComponent
             ref={ this._updateComposedComponentRef }
             containsFocus={ containsFocus }
diff --git a/packages/office-ui-fabric-react/src/utilities/decorators/withResponsiveMode.tsx b/packages/office-ui-fabric-react/src/utilities/decorators/withResponsiveMode.tsx
index ba4fc1a55e618..9196a7431f13b 100644
--- a/packages/office-ui-fabric-react/src/utilities/decorators/withResponsiveMode.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/decorators/withResponsiveMode.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { BaseDecorator } from './BaseDecorator';
-import { getWindow } from '../../Utilities';
+import { getWindow, hoistStatics } from '../../Utilities';
 
 export interface IWithResponsiveModeState {
   responsiveMode?: ResponsiveMode;
@@ -35,7 +35,7 @@ export function setResponsiveMode(responsiveMode: ResponsiveMode | undefined) {
 
 export function withResponsiveMode<TProps extends { responsiveMode?: ResponsiveMode }, TState>(ComposedComponent: (new (props: TProps, ...args: any[]) => React.Component<TProps, TState>)): any {
 
-  return class WithResponsiveMode extends BaseDecorator<TProps, IWithResponsiveModeState> {
+  const resultClass = class WithResponsiveMode extends BaseDecorator<TProps, IWithResponsiveModeState> {
 
     constructor(props: TProps) {
       super(props);
@@ -48,7 +48,7 @@ export function withResponsiveMode<TProps extends { responsiveMode?: ResponsiveM
 
     public componentDidMount() {
       this._events.on(window, 'resize', () => {
-        let responsiveMode = this._getResponsiveMode();
+        const responsiveMode = this._getResponsiveMode();
 
         if (responsiveMode !== this.state.responsiveMode) {
           this.setState({
@@ -63,7 +63,7 @@ export function withResponsiveMode<TProps extends { responsiveMode?: ResponsiveM
     }
 
     public render() {
-      let { responsiveMode } = this.state;
+      const { responsiveMode } = this.state;
 
       return (
         <ComposedComponent ref={ this._updateComposedComponentRef } responsiveMode={ responsiveMode } { ...this.props as any } />
@@ -72,7 +72,7 @@ export function withResponsiveMode<TProps extends { responsiveMode?: ResponsiveM
 
     private _getResponsiveMode(): ResponsiveMode {
       let responsiveMode = ResponsiveMode.small;
-      let win = getWindow();
+      const win = getWindow();
 
       if (typeof win !== 'undefined') {
         try {
@@ -96,5 +96,7 @@ export function withResponsiveMode<TProps extends { responsiveMode?: ResponsiveM
 
       return responsiveMode;
     }
+
   };
+  return hoistStatics(ComposedComponent, resultClass);
 }
diff --git a/packages/office-ui-fabric-react/src/utilities/decorators/withViewport.tsx b/packages/office-ui-fabric-react/src/utilities/decorators/withViewport.tsx
index f7a3519f2d678..146431253953f 100644
--- a/packages/office-ui-fabric-react/src/utilities/decorators/withViewport.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/decorators/withViewport.tsx
@@ -24,10 +24,7 @@ const MAX_RESIZE_ATTEMPTS = 3;
 export function withViewport<TProps extends { viewport?: IViewport }, TState>(ComposedComponent: (new (props: TProps, ...args: any[]) => React.Component<TProps, TState>)): any {
 
   return class WithViewportComponent extends BaseDecorator<TProps, IWithViewportState> {
-    public refs: {
-      [key: string]: React.ReactInstance;
-    };
-
+    private _root: HTMLDivElement;
     private _resizeAttempts: number;
 
     constructor(props: TProps) {
@@ -64,14 +61,14 @@ export function withViewport<TProps extends { viewport?: IViewport }, TState>(Co
     }
 
     public render() {
-      let { viewport } = this.state;
+      const { viewport } = this.state;
       const {
         skipViewportMeasures
       } = this.props as IWithViewportProps;
-      let isViewportVisible = skipViewportMeasures || (viewport!.width > 0 && viewport!.height > 0);
+      const isViewportVisible = skipViewportMeasures || (viewport!.width > 0 && viewport!.height > 0);
 
       return (
-        <div className='ms-Viewport' ref='root' style={ { minWidth: 1, minHeight: 1 } }>
+        <div className='ms-Viewport' ref={ this._resolveRef('_root') } style={ { minWidth: 1, minHeight: 1 } }>
           { isViewportVisible && (
             <ComposedComponent ref={ this._updateComposedComponentRef } viewport={ viewport } { ...this.props as any } />
           ) }
@@ -89,18 +86,18 @@ export function withViewport<TProps extends { viewport?: IViewport }, TState>(Co
 
     /* Note: using lambda here because decorators don't seem to work in decorators. */
     private _updateViewport = (withForceUpdate?: boolean) => {
-      let { viewport } = this.state;
-      let viewportElement = (this.refs as any).root;
-      let scrollElement = findScrollableParent(viewportElement);
-      let scrollRect = getRect(scrollElement);
-      let clientRect = getRect(viewportElement);
-      let updateComponent = () => {
+      const { viewport } = this.state;
+      const viewportElement = this._root;
+      const scrollElement = findScrollableParent(viewportElement);
+      const scrollRect = getRect(scrollElement);
+      const clientRect = getRect(viewportElement);
+      const updateComponent = () => {
         if (withForceUpdate && this._composedComponentInstance) {
           this._composedComponentInstance.forceUpdate();
         }
       };
 
-      let isSizeChanged = (
+      const isSizeChanged = (
         (clientRect && clientRect.width) !== viewport!.width ||
         (scrollRect && scrollRect.height) !== viewport!.height);
 
diff --git a/packages/office-ui-fabric-react/src/utilities/dragdrop/DragDropHelper.tsx b/packages/office-ui-fabric-react/src/utilities/dragdrop/DragDropHelper.tsx
index 0f56b7d7da29a..625d6505a221b 100644
--- a/packages/office-ui-fabric-react/src/utilities/dragdrop/DragDropHelper.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/dragdrop/DragDropHelper.tsx
@@ -238,7 +238,7 @@ export class DragDropHelper implements IDragDropHelper {
   }
 
   private _onDragEnd(target: IDragDropTarget, event: DragEvent) {
-    let { options } = target;
+    const { options } = target;
     if (options.onDragEnd) {
       options.onDragEnd(options.context.data, event);
     }
@@ -283,7 +283,7 @@ export class DragDropHelper implements IDragDropHelper {
    * The target will handle style change on dragenter and dragleave events.
    */
   private _onMouseMove(target: IDragDropTarget, event: MouseEvent) {
-    let {
+    const {
       // use buttons property here since ev.button in some edge case is not updating well during the move.
       // but firefox doesn't support it, so we set the default value when it is not defined.
       buttons = MOUSEMOVE_PRIMARY_BUTTON
@@ -295,7 +295,7 @@ export class DragDropHelper implements IDragDropHelper {
       return;
     }
 
-    let { root, options, key } = target;
+    const { root, options, key } = target;
     if (this._isDragging) {
       if (this._isDroppable(target)) {
         // we can have nested drop targets in the DOM, like a folder inside a group. In that case, when we drag into
@@ -319,8 +319,8 @@ export class DragDropHelper implements IDragDropHelper {
       }
     } else if (this._dragData) {
       if (this._isDraggable(target)) {
-        let xDiff = this._dragData.clientX - event.clientX;
-        let yDiff = this._dragData.clientY - event.clientY;
+        const xDiff = this._dragData.clientX - event.clientX;
+        const yDiff = this._dragData.clientY - event.clientY;
         if (xDiff * xDiff + yDiff * yDiff >= this._distanceSquaredForDrag) {
           if (this._dragData.dragTarget) {
             this._isDragging = true;
@@ -378,7 +378,7 @@ export class DragDropHelper implements IDragDropHelper {
    * determine whether the child target is a descendant of the parent
    */
   private _isChild(parent: React.ReactInstance, child: React.ReactInstance): boolean {
-    let parentElement = ReactDOM.findDOMNode(parent);
+    const parentElement = ReactDOM.findDOMNode(parent);
     let childElement = ReactDOM.findDOMNode(child);
     while (childElement && childElement.parentElement) {
       if (childElement.parentElement === parentElement) {
@@ -390,14 +390,14 @@ export class DragDropHelper implements IDragDropHelper {
   }
 
   private _isDraggable(target: IDragDropTarget): boolean {
-    let { options } = target;
+    const { options } = target;
     return !!(options.canDrag && options.canDrag(options.context.data));
   }
 
   private _isDroppable(target: IDragDropTarget): boolean {
     // TODO: take the drag item into consideration to prevent dragging an item into the same group
-    let { options } = target;
-    let dragContext = this._dragData && this._dragData.dragTarget ? this._dragData.dragTarget.options.context : undefined;
+    const { options } = target;
+    const dragContext = this._dragData && this._dragData.dragTarget ? this._dragData.dragTarget.options.context : undefined;
     return !!(options.canDrop && options.canDrop(options.context, dragContext));
   }
 }
diff --git a/packages/office-ui-fabric-react/src/utilities/grid/Grid.base.tsx b/packages/office-ui-fabric-react/src/utilities/grid/Grid.base.tsx
index 4a1672fcff08d..eb445c226724e 100644
--- a/packages/office-ui-fabric-react/src/utilities/grid/Grid.base.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/grid/Grid.base.tsx
@@ -22,7 +22,7 @@ export class GridBase extends BaseComponent<IGridProps, {}> implements IGrid {
   }
 
   public render() {
-    let {
+    const {
       items,
       columnCount,
       onRenderItem,
@@ -36,9 +36,9 @@ export class GridBase extends BaseComponent<IGridProps, {}> implements IGrid {
     const classNames = getClassNames(getStyles!, { theme: this.props.theme! });
 
     // Array to store the cells in the correct row index
-    let rowsOfItems: any[][] = toMatrix(items, columnCount);
+    const rowsOfItems: any[][] = toMatrix(items, columnCount);
 
-    let content = (
+    const content = (
       <table
         {...htmlProps}
         aria-posinset={ positionInSet }
@@ -49,7 +49,7 @@ export class GridBase extends BaseComponent<IGridProps, {}> implements IGrid {
       >
         <tbody>
           {
-            rowsOfItems.map((rows: any[], rowIndex) => {
+            rowsOfItems.map((rows: any[], rowIndex: any) => {
               return (
                 <tr
                   role={ 'row' }
diff --git a/packages/office-ui-fabric-react/src/utilities/grid/Grid.test.tsx b/packages/office-ui-fabric-react/src/utilities/grid/Grid.test.tsx
index 1f0281f717e6d..feb7945da8ddd 100644
--- a/packages/office-ui-fabric-react/src/utilities/grid/Grid.test.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/grid/Grid.test.tsx
@@ -21,7 +21,7 @@ const DEFAULT_ITEMS: any[] = [
 describe('Grid', () => {
 
   it('Can render a grid with width of four', () => {
-    let wrapper = shallow(
+    const wrapper = shallow(
       <GridBase
         items={ DEFAULT_ITEMS }
         columnCount={ 4 }
@@ -37,7 +37,7 @@ describe('Grid', () => {
     expect(wrapper.find('[aria-setsize]').length).toEqual(0);
   });
   it('Can render a grid with width of 2', () => {
-    let wrapper = shallow(
+    const wrapper = shallow(
       <GridBase
         items={ DEFAULT_ITEMS }
         columnCount={ 2 }
@@ -53,7 +53,7 @@ describe('Grid', () => {
     expect(wrapper.find('[aria-setsize]').length).toEqual(0);
   });
   it('Can render a grid with posInSet and setSize', () => {
-    let wrapper = shallow(
+    const wrapper = shallow(
       <GridBase
         items={ DEFAULT_ITEMS }
         columnCount={ 2 }
diff --git a/packages/office-ui-fabric-react/src/utilities/grid/Grid.tsx b/packages/office-ui-fabric-react/src/utilities/grid/Grid.tsx
index 503908da33ba2..335f88b11d05d 100644
--- a/packages/office-ui-fabric-react/src/utilities/grid/Grid.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/grid/Grid.tsx
@@ -1,8 +1,8 @@
-import * as React from 'react';
 import {
   styled
 } from '../../Utilities';
 import { GridBase } from './Grid.base';
+// tslint:disable-next-line:no-unused-variable
 import { IGridProps } from './Grid.types';
 import { getStyles } from './Grid.styles';
 
diff --git a/packages/office-ui-fabric-react/src/utilities/grid/GridCell.tsx b/packages/office-ui-fabric-react/src/utilities/grid/GridCell.tsx
index dbc8cb0df7472..b5e8ac9a4a94f 100644
--- a/packages/office-ui-fabric-react/src/utilities/grid/GridCell.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/grid/GridCell.tsx
@@ -15,7 +15,7 @@ export class GridCell<T, P extends IGridCellProps<T>> extends React.Component<P,
   };
 
   public render() {
-    let {
+    const {
       item,
       id,
       className,
@@ -32,7 +32,7 @@ export class GridCell<T, P extends IGridCellProps<T>> extends React.Component<P,
 
     return (
       <CommandButton
-        id={ id + '-item' + index }
+        id={ id }
         data-index={ index }
         data-is-focusable={ true }
         disabled={ disabled }
@@ -44,6 +44,7 @@ export class GridCell<T, P extends IGridCellProps<T>> extends React.Component<P,
         ) }
         onClick={ this._onClick }
         onMouseEnter={ this._onMouseEnter }
+        onMouseMove={ this._onMouseMove }
         onMouseLeave={ this._onMouseLeave }
         onFocus={ this._onFocus }
         role={ role }
@@ -59,11 +60,11 @@ export class GridCell<T, P extends IGridCellProps<T>> extends React.Component<P,
 
   @autobind
   private _onClick() {
-    let {
+    const {
       onClick,
       disabled,
       item
-      } = this.props as P;
+    } = this.props as P;
 
     if (onClick && !disabled) {
       onClick(item);
@@ -71,37 +72,59 @@ export class GridCell<T, P extends IGridCellProps<T>> extends React.Component<P,
   }
 
   @autobind
-  private _onMouseEnter() {
-    let {
+  private _onMouseEnter(ev: React.MouseEvent<HTMLButtonElement>) {
+    const {
       onHover,
       disabled,
-      item
-      } = this.props as P;
+      item,
+      onMouseEnter
+    } = this.props as P;
 
-    if (onHover && !disabled) {
+    const didUpdateOnEnter = onMouseEnter && onMouseEnter(ev);
+
+    if (!didUpdateOnEnter && onHover && !disabled) {
       onHover(item);
     }
   }
 
   @autobind
-  private _onMouseLeave() {
-    let {
+  private _onMouseMove(ev: React.MouseEvent<HTMLButtonElement>) {
+    const {
       onHover,
-      disabled
-      } = this.props as P;
+      disabled,
+      item,
+      onMouseMove
+    } = this.props as P;
+
+    const didUpdateOnMove = onMouseMove && onMouseMove(ev);
+
+    if (!didUpdateOnMove && onHover && !disabled) {
+      onHover(item);
+    }
+  }
+
+  @autobind
+  private _onMouseLeave(ev: React.MouseEvent<HTMLButtonElement>) {
+    const {
+      onHover,
+      disabled,
+      onMouseLeave
+    } = this.props as P;
+
+    const didUpdateOnLeave = onMouseLeave && onMouseLeave(ev);
 
-    if (onHover && !disabled) {
+    if (!didUpdateOnLeave && onHover && !disabled) {
       onHover();
     }
   }
 
   @autobind
   private _onFocus() {
-    let {
+    const {
       onFocus,
       disabled,
       item
-      } = this.props as P;
+    } = this.props as P;
 
     if (onFocus && !disabled) {
       onFocus(item);
diff --git a/packages/office-ui-fabric-react/src/utilities/grid/GridCell.types.ts b/packages/office-ui-fabric-react/src/utilities/grid/GridCell.types.ts
index 1cf5b9e3c38b3..bcd95716584ed 100644
--- a/packages/office-ui-fabric-react/src/utilities/grid/GridCell.types.ts
+++ b/packages/office-ui-fabric-react/src/utilities/grid/GridCell.types.ts
@@ -89,4 +89,31 @@ export interface IGridCellProps<T> {
     checked: boolean,
     expanded: boolean,
     isSplit: boolean | undefined) => IButtonClassNames;
+
+  /**
+  * Optional, mouseEnter handler.
+  * @returns true if the event should be processed, false otherwise
+  */
+  onMouseEnter?: (ev: React.MouseEvent<HTMLButtonElement>) => boolean;
+
+  /**
+   * Optional, mouseMove handler
+   * @returns true if the event should be processed, false otherwise
+   */
+  onMouseMove?: (ev: React.MouseEvent<HTMLButtonElement>) => boolean;
+
+  /**
+   * Optional, mouseLeave handler
+   */
+  onMouseLeave?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Optional, onWheel handler
+   */
+  onWheel?: (ev: React.MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Optional, onkeydown handler
+   */
+  onKeyDown?: (ev: React.KeyboardEvent<HTMLButtonElement>) => void;
 }
diff --git a/packages/office-ui-fabric-react/src/utilities/groupedList/GroupedListUtility.test.tsx b/packages/office-ui-fabric-react/src/utilities/groupedList/GroupedListUtility.test.tsx
new file mode 100644
index 0000000000000..557f6148e6ec7
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/utilities/groupedList/GroupedListUtility.test.tsx
@@ -0,0 +1,58 @@
+import { IGroup } from '../../components/GroupedList/GroupedList.types';
+import { GetGroupCount } from './GroupedListUtility';
+
+const G = (children: IGroup[] = []): IGroup => {
+  return { key: 'Key', name: 'Group', startIndex: 0, count: 0, children };
+};
+
+describe('GroupedListUtility', () => {
+  describe('GetGroupCount', () => {
+    it('Accepts undefined', () => {
+      expect(GetGroupCount(undefined)).toEqual(0);
+    });
+
+    it('Counts single group', () => {
+      expect(GetGroupCount([G()])).toEqual(1);
+    });
+
+    it('Counts flat groups 1', () => {
+      const groups: IGroup[] = [
+        G(),
+        G(),
+        G()
+      ];
+      expect(GetGroupCount(groups)).toEqual(3);
+    });
+
+    it('Counts flat groups 2', () => {
+      const groups: IGroup[] = [];
+      const amount = 10;
+      for (let i = 0; i < amount; ++i) {
+        groups.push(G());
+      }
+      expect(GetGroupCount(groups)).toEqual(amount);
+    });
+
+    it('Counts nested groups 1', () => {
+      expect(GetGroupCount([G([G()])])).toEqual(2);
+    });
+
+    it('Counts nested groups 2', () => {
+      const groups: IGroup[] = [
+        G(), // 1
+        G([ // 1
+          G([G()]), // 2
+          G(), // 1
+          G([ // 1
+            G([G()]), // 2
+            G([G(), G(), G()]), // 4
+            G([G(), G(), G()]) // 4
+          ])
+        ]),
+        G([G(), G()]), // 3
+        G() // 1
+      ];
+      expect(GetGroupCount(groups)).toEqual(20);
+    });
+  });
+});
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/utilities/groupedList/GroupedListUtility.tsx b/packages/office-ui-fabric-react/src/utilities/groupedList/GroupedListUtility.tsx
new file mode 100644
index 0000000000000..e2c9ca50c58ca
--- /dev/null
+++ b/packages/office-ui-fabric-react/src/utilities/groupedList/GroupedListUtility.tsx
@@ -0,0 +1,26 @@
+import { IGroup } from '../../components/GroupedList/GroupedList.types';
+
+/**
+ * Takes an array of groups and returns a count of the groups and all descendant groups.
+ * @param groups - The array of groups to count.
+ */
+export const GetGroupCount = (groups: IGroup[] | undefined): number => {
+  let total = 0;
+
+  if (groups) {
+    const remainingGroups = [...groups];
+    let currentGroup: IGroup;
+
+    while (remainingGroups && remainingGroups.length > 0) {
+      ++total;
+
+      currentGroup = remainingGroups.pop() as IGroup;
+
+      if (currentGroup && currentGroup.children) {
+        remainingGroups.push(...currentGroup.children);
+      }
+    }
+  }
+
+  return total;
+};
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/utilities/positioning.test.ts b/packages/office-ui-fabric-react/src/utilities/positioning.test.ts
index ab77bcc2b842f..7cb5696286fb9 100644
--- a/packages/office-ui-fabric-react/src/utilities/positioning.test.ts
+++ b/packages/office-ui-fabric-react/src/utilities/positioning.test.ts
@@ -13,16 +13,12 @@ interface ITestValues {
   beakWidth: number;
 }
 
-function stringifyResults(expected: any, actual: any) {
-  return 'expected was: ' + JSON.stringify(expected) + ' actual was: ' + JSON.stringify(actual);
-}
-
 function positionCalloutTest(testValues: ITestValues, alignment: DirectionalHint, validate: ITestValidation) {
-  let { callout, target, bounds, beakWidth } = testValues;
-  let gap: number = positioningFunctions._calculateActualBeakWidthInPixels(beakWidth) / 2;
-  let result: positioningFunctions.IElementPosition = positioningFunctions._positionElementWithinBounds(callout, target, bounds, positioningFunctions._getPositionData(alignment), gap);
+  const { callout, target, bounds, beakWidth } = testValues;
+  const gap: number = positioningFunctions._calculateActualBeakWidthInPixels(beakWidth) / 2;
+  const result: positioningFunctions.IElementPosition = positioningFunctions._positionElementWithinBounds(callout, target, bounds, positioningFunctions._getPositionData(alignment), gap);
 
-  let beak = positioningFunctions._positionBeak(beakWidth, { ...result, targetRectangle: target });
+  const beak = positioningFunctions._positionBeak(beakWidth, { ...result, targetRectangle: target });
 
   expect(result.elementRectangle).toEqual(validate.callout);
 
@@ -37,8 +33,8 @@ function positionCalloutTest(testValues: ITestValues, alignment: DirectionalHint
 }
 
 function validateNoBeakTest(testValues: ITestValues, alignment: DirectionalHint, validate: ITestValidation) {
-  let { callout, target, bounds, beakWidth } = testValues;
-  let result: positioningFunctions.IElementPosition = positioningFunctions._positionElementWithinBounds(callout, target, bounds, positioningFunctions._getPositionData(alignment), beakWidth);
+  const { callout, target, bounds, beakWidth } = testValues;
+  const result: positioningFunctions.IElementPosition = positioningFunctions._positionElementWithinBounds(callout, target, bounds, positioningFunctions._getPositionData(alignment), beakWidth);
 
   expect(result.elementRectangle).toEqual(validate.callout);
 }
@@ -46,24 +42,24 @@ function validateNoBeakTest(testValues: ITestValues, alignment: DirectionalHint,
 describe('Callout Positioning', () => {
   it('Correctly positions the callout without beak', () => {
 
-    let noBeakTestCase: ITestValues = {
+    const noBeakTestCase: ITestValues = {
       callout: new Rectangle(0, 300, 0, 300),
       target: new Rectangle(400, 800, 400, 800),
       bounds: new Rectangle(0, 1600, 0, 1600),
       beakWidth: 0,
     };
 
-    let validateNoBeakBottomLeft: ITestValidation = {
+    const validateNoBeakBottomLeft: ITestValidation = {
       callout: new Rectangle(400, 700, 800, 1100),
       beak: null
     };
 
-    let validateNoBeakLeft: ITestValidation = {
+    const validateNoBeakLeft: ITestValidation = {
       callout: new Rectangle(100, 400, 400, 700),
       beak: null
     };
 
-    let validateNoBeakTop: ITestValidation = {
+    const validateNoBeakTop: ITestValidation = {
       callout: new Rectangle(400, 700, 100, 400),
       beak: null
     };
@@ -77,24 +73,24 @@ describe('Callout Positioning', () => {
 
   it('Correctly positions the callout with the beak', () => {
 
-    let basicTestCase: ITestValues = {
+    const basicTestCase: ITestValues = {
       callout: new Rectangle(0, 300, 0, 300),
       target: new Rectangle(400, 800, 400, 800),
       bounds: new Rectangle(0, 1600, 0, 1600),
       beakWidth: 16,
     };
 
-    let validateBottomLeft: ITestValidation = {
+    const validateBottomLeft: ITestValidation = {
       callout: new Rectangle(400, 700, 800 + positioningFunctions._calculateActualBeakWidthInPixels(8), 1100 + positioningFunctions._calculateActualBeakWidthInPixels(8)),
       beak: new Rectangle(192, 208, -8, 8)
     };
 
-    let validateBottomCenter: ITestValidation = {
+    const validateBottomCenter: ITestValidation = {
       callout: new Rectangle(450, 750, 800 + positioningFunctions._calculateActualBeakWidthInPixels(8), 1100 + positioningFunctions._calculateActualBeakWidthInPixels(8)),
       beak: new Rectangle(142, 158, -8, 8)
     };
 
-    let validateBottomRight: ITestValidation = {
+    const validateBottomRight: ITestValidation = {
       callout: new Rectangle(500, 800, 800 + positioningFunctions._calculateActualBeakWidthInPixels(8), 1100 + positioningFunctions._calculateActualBeakWidthInPixels(8)),
       beak: new Rectangle(92, 108, -8, 8)
     };
@@ -107,13 +103,13 @@ describe('Callout Positioning', () => {
   });
 
   it('Correctly determines max height', () => {
-    let getMaxHeight = positioningFunctions._getMaxHeightFromTargetRectangle;
+    const getMaxHeight = positioningFunctions._getMaxHeightFromTargetRectangle;
     let targetTop;
     let targetBot;
-    let targetRight = targetBot = 20;
-    let targetLeft = targetTop = 10;
-    let targetRectangle = new Rectangle(targetLeft, targetRight, targetTop, targetBot);
-    let bounds = new Rectangle(0, 1000, 0, 1000);
+    const targetRight = targetBot = 20;
+    const targetLeft = targetTop = 10;
+    const targetRectangle = new Rectangle(targetLeft, targetRight, targetTop, targetBot);
+    const bounds = new Rectangle(0, 1000, 0, 1000);
 
     let testMax = getMaxHeight(targetRectangle, DirectionalHint.bottomCenter, 0, bounds);
     // Test for maxHeight from bottom of target to bottom of bounds
@@ -129,14 +125,14 @@ describe('Callout Positioning', () => {
   });
 
   it('Correctly determines max height with a gapSpace included', () => {
-    let getMaxHeight = positioningFunctions._getMaxHeightFromTargetRectangle;
+    const getMaxHeight = positioningFunctions._getMaxHeightFromTargetRectangle;
     let targetTop;
     let targetBot;
-    let targetRight = targetBot = 200;
-    let targetLeft = targetTop = 100;
-    let targetRectangle = new Rectangle(targetLeft, targetRight, targetTop, targetBot);
-    let bounds = new Rectangle(0, 1000, 0, 1000);
-    let gapSpace = 10;
+    const targetRight = targetBot = 200;
+    const targetLeft = targetTop = 100;
+    const targetRectangle = new Rectangle(targetLeft, targetRight, targetTop, targetBot);
+    const bounds = new Rectangle(0, 1000, 0, 1000);
+    const gapSpace = 10;
 
     let testMax = getMaxHeight(targetRectangle, DirectionalHint.bottomCenter, gapSpace, bounds);
 
@@ -151,5 +147,4 @@ describe('Callout Positioning', () => {
     // Test for maxHeight from top of target to bottom of bounds
     expect(testMax).toBe(1000 - targetTop - gapSpace);
   });
-
 });
\ No newline at end of file
diff --git a/packages/office-ui-fabric-react/src/utilities/positioning/positioning.ts b/packages/office-ui-fabric-react/src/utilities/positioning/positioning.ts
index 342e10776f883..e2bd20e71a83d 100644
--- a/packages/office-ui-fabric-react/src/utilities/positioning/positioning.ts
+++ b/packages/office-ui-fabric-react/src/utilities/positioning/positioning.ts
@@ -34,7 +34,7 @@ function _createPositionData(
 }
 
 // Currently the beakPercent is set to 50 for all positions meaning that it should tend to the center of the target
-let DirectionalDictionary: { [key: number]: IPositionDirectionalHintData } = {
+const DirectionalDictionary: { [key: number]: IPositionDirectionalHintData } = {
   [DirectionalHint.topLeftEdge]: _createPositionData(RectangleEdge.top, RectangleEdge.left),
   [DirectionalHint.topCenter]: _createPositionData(RectangleEdge.top),
   [DirectionalHint.topRightEdge]: _createPositionData(RectangleEdge.top, RectangleEdge.right),
@@ -64,7 +64,7 @@ const SLIDE_ANIMATIONS: { [key: number]: string; } = {
  * Do not call methods from this directly, use either positionCallout or positionElement or make another function that
  * utilizes them.
  */
-export module positioningFunctions {
+export namespace positioningFunctions {
 
   export interface IElementPosition {
     elementRectangle: Rectangle;
@@ -104,7 +104,7 @@ export module positioningFunctions {
    * If there are no out of bounds edges it returns an empty array.
    */
   function _getOutOfBoundsEdges(rect: Rectangle, boundingRect: Rectangle): RectangleEdge[] {
-    let outOfBounds: RectangleEdge[] = new Array<RectangleEdge>();
+    const outOfBounds: RectangleEdge[] = new Array<RectangleEdge>();
 
     if (rect.top < boundingRect.top) {
       outOfBounds.push(RectangleEdge.top);
@@ -250,7 +250,7 @@ export module positioningFunctions {
     bounding: Rectangle,
     positionData: IPositionDirectionalHintData,
     gap: number = 0, ): IElementPosition {
-    let directions: RectangleEdge[] = [RectangleEdge.left, RectangleEdge.right, RectangleEdge.bottom, RectangleEdge.top];
+    const directions: RectangleEdge[] = [RectangleEdge.left, RectangleEdge.right, RectangleEdge.bottom, RectangleEdge.top];
     let currentEstimate = rect;
     let currentEdge = positionData.targetEdge;
     let currentAlignment = positionData.alignmentEdge;
@@ -302,7 +302,7 @@ export module positioningFunctions {
     directionalHintFixed?: boolean,
     coverTarget?: boolean): IElementPosition {
 
-    let {
+    const {
       alignmentEdge
     } = positionData;
     let elementEstimate: IElementPosition = {
@@ -315,7 +315,7 @@ export module positioningFunctions {
       elementEstimate = _flipToFit(element, target, bounding, positionData, gap);
     }
 
-    let outOfBounds = _getOutOfBoundsEdges(element, bounding);
+    const outOfBounds = _getOutOfBoundsEdges(element, bounding);
 
     for (const direction of outOfBounds) {
       elementEstimate.elementRectangle = _alignEdges(elementEstimate.elementRectangle, bounding, direction);
@@ -360,7 +360,7 @@ export module positioningFunctions {
     coverTarget?: boolean
   ): Rectangle {
     let estimatedElementPosition: Rectangle;
-    let {
+    const {
       alignmentEdge,
       targetEdge
     } = positionData;
@@ -419,9 +419,9 @@ export module positioningFunctions {
     targetEdge: RectangleEdge,
     alignmentEdge?: RectangleEdge
   ): IPartialIRectangle {
-    let returnValue: IPartialIRectangle = {};
+    const returnValue: IPartialIRectangle = {};
 
-    const hostRect: Rectangle = _getRectangleFromHTMLElement(hostElement);
+    const hostRect: Rectangle = _getRectangleFromElement(hostElement);
     const elementEdge = targetEdge * -1;
     const elementEdgeString = RectangleEdge[elementEdge];
     const returnEdge = alignmentEdge ? alignmentEdge : _getFlankingEdges(targetEdge).positiveEdge;
@@ -453,11 +453,14 @@ export module positioningFunctions {
     directionalHint: DirectionalHint = DirectionalHint.bottomAutoEdge,
     directionalHintForRTL?: DirectionalHint
   ): IPositionDirectionalHintData {
-    let positionInformation: IPositionDirectionalHintData = { ...DirectionalDictionary[directionalHint] };
+    const positionInformation: IPositionDirectionalHintData = { ...DirectionalDictionary[directionalHint] };
     if (getRTL()) {
+
       // If alignment edge exists and that alignment edge is -2 or 2, right or left, then flip it.
-      positionInformation.alignmentEdge = positionInformation.alignmentEdge && positionInformation.alignmentEdge % 2 === 0
-        ? positionInformation.alignmentEdge * -1 : undefined;
+      if (positionInformation.alignmentEdge && positionInformation.alignmentEdge % 2 === 0) {
+        positionInformation.alignmentEdge = positionInformation.alignmentEdge * -1;
+      }
+
       return directionalHintForRTL !== undefined ?
         DirectionalDictionary[directionalHintForRTL] :
         positionInformation;
@@ -503,7 +506,7 @@ export module positioningFunctions {
     gap: number,
     directionalHintFixed?: boolean,
     coverTarget?: boolean): IElementPosition {
-    let estimatedElementPosition: Rectangle = _estimatePosition(elementToPosition, target, positionData, gap, coverTarget);
+    const estimatedElementPosition: Rectangle = _estimatePosition(elementToPosition, target, positionData, gap, coverTarget);
     if (_isRectangleWithinBounds(estimatedElementPosition, bounding)) {
       return {
         elementRectangle: estimatedElementPosition,
@@ -521,7 +524,7 @@ export module positioningFunctions {
     // The "host" element that we will use to help position the beak.
     const actualElement = new Rectangle(0, elementPosition.elementRectangle.width, 0, elementPosition.elementRectangle.height);
     const returnEdge = elementPosition.alignmentEdge ? elementPosition.alignmentEdge : _getFlankingEdges(targetEdge).positiveEdge;
-    let returnValue: IPartialIRectangle = {};
+    const returnValue: IPartialIRectangle = {};
 
     returnValue[RectangleEdge[targetEdge]] = _getEdgeValue(positionedBeak, targetEdge);
     returnValue[RectangleEdge[returnEdge]] = _getRelativeEdgeDifference(positionedBeak, actualElement, returnEdge);
@@ -563,8 +566,8 @@ export module positioningFunctions {
     return beakPositon;
   }
 
-  export function _getRectangleFromHTMLElement(element: HTMLElement): Rectangle {
-    let clientRect: ClientRect = element.getBoundingClientRect();
+  export function _getRectangleFromElement(element: Element): Rectangle {
+    const clientRect: ClientRect = element.getBoundingClientRect();
 
     return new Rectangle(clientRect.left, clientRect.right, clientRect.top, clientRect.bottom);
   }
@@ -573,24 +576,24 @@ export module positioningFunctions {
     return new Rectangle(rect.left, rect.right, rect.top, rect.bottom);
   }
 
-  export function _getTargetRect(bounds: Rectangle, target: HTMLElement | MouseEvent | IPoint | undefined) {
+  export function _getTargetRect(bounds: Rectangle, target: Element | MouseEvent | IPoint | undefined) {
     let targetRectangle: Rectangle;
     if (target) {
       if ((target as MouseEvent).preventDefault) {
-        let ev: MouseEvent = target as MouseEvent;
+        const ev = target as MouseEvent;
         targetRectangle = new Rectangle(ev.clientX, ev.clientX, ev.clientY, ev.clientY);
-      } else if ((target as HTMLElement).getBoundingClientRect) {
-        targetRectangle = _getRectangleFromHTMLElement(target as HTMLElement);
+      } else if ((target as Element).getBoundingClientRect) {
+        targetRectangle = _getRectangleFromElement(target as Element);
         // HTMLImgElements can have x and y values. The check for it being a point must go last.
       } else {
-        let point: IPoint = target as IPoint;
+        const point: IPoint = target as IPoint;
         targetRectangle = new Rectangle(point.x, point.x, point.y, point.y);
       }
 
       if (!_isRectangleWithinBounds(targetRectangle, bounds)) {
-        let outOfBounds: RectangleEdge[] = _getOutOfBoundsEdges(targetRectangle, bounds);
+        const outOfBounds: RectangleEdge[] = _getOutOfBoundsEdges(targetRectangle, bounds);
 
-        for (let direction of outOfBounds) {
+        for (const direction of outOfBounds) {
           (targetRectangle as any)[RectangleEdge[direction]] = (bounds as any)[RectangleEdge[direction]];
         }
       }
@@ -643,7 +646,7 @@ export module positioningFunctions {
       boundingRect,
       props.coverTarget);
     const positionedElement: IElementPosition = _positionElementWithinBounds(
-      _getRectangleFromHTMLElement(elementToPosition),
+      _getRectangleFromElement(elementToPosition),
       targetRect,
       boundingRect,
       positionData,
@@ -677,7 +680,7 @@ export module positioningFunctions {
     callout: HTMLElement): ICalloutPositionedInfo {
     const beakWidth: number = !props.isBeakVisible ? 0 : (props.beakWidth || 0);
     const gap: number = _calculateActualBeakWidthInPixels(beakWidth) / 2 + (props.gapSpace ? props.gapSpace : 0);
-    let positionProps: IPositionProps = props;
+    const positionProps: IPositionProps = props;
     positionProps.gapSpace = gap;
     const positionedElement: IElementPositionInfo = _positionElementRelative(positionProps, hostElement, callout);
     const beakPositioned: Rectangle = _positionBeak(
@@ -759,12 +762,12 @@ export function positionCallout(props: IPositionProps,
  * of the target given.
  * If no bounds are provided then the window is treated as the bounds.
  */
-export function getMaxHeight(target: HTMLElement | MouseEvent | IPoint, targetEdge: DirectionalHint, gapSpace: number = 0, bounds?: IRectangle) {
-  let mouseTarget: MouseEvent = target as MouseEvent;
-  let elementTarget: HTMLElement = target as HTMLElement;
-  let pointTarget: IPoint = target as IPoint;
+export function getMaxHeight(target: Element | MouseEvent | IPoint, targetEdge: DirectionalHint, gapSpace: number = 0, bounds?: IRectangle) {
+  const mouseTarget: MouseEvent = target as MouseEvent;
+  const elementTarget: Element = target as Element;
+  const pointTarget: IPoint = target as IPoint;
   let targetRect: Rectangle;
-  let boundingRectangle = bounds ?
+  const boundingRectangle = bounds ?
     positioningFunctions._getRectangleFromIRect(bounds) :
     new Rectangle(0, window.innerWidth - getScrollbarWidth(), 0, window.innerHeight);
 
@@ -773,7 +776,7 @@ export function getMaxHeight(target: HTMLElement | MouseEvent | IPoint, targetEd
   } else if (pointTarget.x !== undefined && pointTarget.y !== undefined) {
     targetRect = new Rectangle(pointTarget.x, pointTarget.x, pointTarget.y, pointTarget.y);
   } else {
-    targetRect = positioningFunctions._getRectangleFromHTMLElement(elementTarget);
+    targetRect = positioningFunctions._getRectangleFromElement(elementTarget);
   }
 
   return positioningFunctions._getMaxHeightFromTargetRectangle(targetRect, targetEdge, gapSpace, boundingRectangle);
diff --git a/packages/office-ui-fabric-react/src/utilities/positioning/positioning.types.ts b/packages/office-ui-fabric-react/src/utilities/positioning/positioning.types.ts
index 247ad444ce729..831c57988c324 100644
--- a/packages/office-ui-fabric-react/src/utilities/positioning/positioning.types.ts
+++ b/packages/office-ui-fabric-react/src/utilities/positioning/positioning.types.ts
@@ -17,7 +17,7 @@ export enum Position {
   end = 3
 }
 export interface IPositionProps {
-  target?: HTMLElement | MouseEvent | IPoint;
+  target?: Element | MouseEvent | IPoint;
   /** how the element should be positioned */
   directionalHint?: DirectionalHint;
   /**
diff --git a/packages/office-ui-fabric-react/src/utilities/router/Router.tsx b/packages/office-ui-fabric-react/src/utilities/router/Router.tsx
index 83564f8b77ede..b200d640c24c6 100644
--- a/packages/office-ui-fabric-react/src/utilities/router/Router.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/router/Router.tsx
@@ -26,9 +26,9 @@ export class Router extends BaseComponent<IRouterProps, {}> {
   }
 
   private _getPath() {
-    let path = location.hash,
-      hashIndex = path.lastIndexOf('#'),
-      questionMarkIndex = path.indexOf('?');
+    let path = location.hash;
+    const hashIndex = path.lastIndexOf('#'),
+          questionMarkIndex = path.indexOf('?');
 
     // Look for the start of a query in the currentPath, then strip out the query to find the correct page to render
     if (questionMarkIndex > -1) {
@@ -46,13 +46,14 @@ export class Router extends BaseComponent<IRouterProps, {}> {
     path = path || this._getPath();
     children = children || this.props.children;
 
-    let routes = React.Children.toArray(children);
+    const routes = React.Children.toArray(children);
 
     for (let i = 0; i < routes.length; i++) {
-      let route: any = routes[i];
+      const route: any = routes[i];
 
       if (_match(path, route)) {
-        let { component, getComponent } = route.props;
+        const { getComponent } = route.props;
+        let { component } = route.props;
 
         if (getComponent) {
           let asynchronouslyResolved = false;
@@ -73,7 +74,7 @@ export class Router extends BaseComponent<IRouterProps, {}> {
         }
 
         if (component) {
-          let componentChildren = this._resolveRoute(path, route.props.children || []);
+          const componentChildren = this._resolveRoute(path, route.props.children || []);
 
           if (componentChildren) {
             return React.createElement(component, { key: route.key }, componentChildren) as React.DOMElement<any, any>;
diff --git a/packages/office-ui-fabric-react/src/utilities/selection/Selection.test.ts b/packages/office-ui-fabric-react/src/utilities/selection/Selection.test.ts
index fb4845b2e17d6..434f112874bdf 100644
--- a/packages/office-ui-fabric-react/src/utilities/selection/Selection.test.ts
+++ b/packages/office-ui-fabric-react/src/utilities/selection/Selection.test.ts
@@ -1,14 +1,14 @@
 import { Selection } from './Selection';
 import { IObjectWithKey } from './interfaces';
 
-let setA = [{ key: 'a' }, { key: 'b' }, { key: 'c' }];
-let setB = [{ key: 'a' }, { key: 'd' }, { key: 'b' }];
+const setA = [{ key: 'a' }, { key: 'b' }, { key: 'c' }];
+const setB = [{ key: 'a' }, { key: 'd' }, { key: 'b' }];
 
 describe('Selection', () => {
 
   it('fires change events only when selection changes occur', () => {
     let changeCount = 0;
-    let selection = new Selection({ onSelectionChanged: () => changeCount++ });
+    const selection = new Selection({ onSelectionChanged: () => changeCount++ });
 
     selection.setItems(setA, false);
     expect(changeCount).toEqual(0);
@@ -53,7 +53,7 @@ describe('Selection', () => {
 
   it('returns false on isAllSelected when no items are selectable', () => {
     let changeEvents = 0;
-    let selection = new Selection({
+    const selection = new Selection({
       canSelectItem: (item: IObjectWithKey) => false,
       onSelectionChanged: () => changeEvents++
     });
@@ -71,7 +71,7 @@ describe('Selection', () => {
 
   it('resets unselectable count on setting new items', () => {
     let canSelect = false;
-    let selection = new Selection({
+    const selection = new Selection({
       canSelectItem: (item: IObjectWithKey) => canSelect
     });
 
diff --git a/packages/office-ui-fabric-react/src/utilities/selection/Selection.ts b/packages/office-ui-fabric-react/src/utilities/selection/Selection.ts
index f7e6b55ba664c..ca3bba566df62 100644
--- a/packages/office-ui-fabric-react/src/utilities/selection/Selection.ts
+++ b/packages/office-ui-fabric-react/src/utilities/selection/Selection.ts
@@ -107,8 +107,8 @@ export class Selection implements ISelection {
    * cleared.
    */
   public setItems(items: IObjectWithKey[], shouldClear = true) {
-    let newKeyToIndexMap: { [key: string]: number } = {};
-    let newUnselectableIndices: { [key: string]: boolean } = {};
+    const newKeyToIndexMap: { [key: string]: number } = {};
+    const newUnselectableIndices: { [key: string]: boolean } = {};
     let hasSelectionChanged = false;
 
     this.setChangeEvents(false);
@@ -118,7 +118,7 @@ export class Selection implements ISelection {
 
     // Build lookup table for quick selection evaluation.
     for (let i = 0; i < items.length; i++) {
-      let item = items[i];
+      const item = items[i];
 
       if (item) {
         const key = this.getKey(item, i);
@@ -139,14 +139,14 @@ export class Selection implements ISelection {
     }
 
     // Check the exemption list for discrepencies.
-    let newExemptedIndicies: { [key: string]: boolean } = {};
+    const newExemptedIndicies: { [key: string]: boolean } = {};
 
-    for (let indexProperty in this._exemptedIndices) {
+    for (const indexProperty in this._exemptedIndices) {
       if (this._exemptedIndices.hasOwnProperty(indexProperty)) {
-        let index = Number(indexProperty);
-        let item = this._items[index];
-        let exemptKey = item ? this.getKey(item, Number(index)) : undefined;
-        let newIndex = exemptKey ? newKeyToIndexMap[exemptKey] : index;
+        const index = Number(indexProperty);
+        const item = this._items[index];
+        const exemptKey = item ? this.getKey(item, Number(index)) : undefined;
+        const newIndex = exemptKey ? newKeyToIndexMap[exemptKey] : index;
 
         if (newIndex === undefined) {
           // We don't know the index of the item any more so it's either moved or removed.
@@ -223,7 +223,7 @@ export class Selection implements ISelection {
       return false;
     }
 
-    let endIndex = fromIndex + count;
+    const endIndex = fromIndex + count;
 
     for (let i = fromIndex; i < endIndex; i++) {
       if (!this.isIndexSelected(i)) {
@@ -249,7 +249,7 @@ export class Selection implements ISelection {
   }
 
   public isKeySelected(key: string): boolean {
-    let index = this._keyToIndexMap[key];
+    const index = this._keyToIndexMap[key];
 
     return this.isIndexSelected(index);
   }
@@ -266,7 +266,7 @@ export class Selection implements ISelection {
       return;
     }
 
-    let selectableCount = this._items ? (this._items.length - this._unselectableCount) : 0;
+    const selectableCount = this._items ? (this._items.length - this._unselectableCount) : 0;
 
     this.setChangeEvents(false);
 
@@ -286,7 +286,7 @@ export class Selection implements ISelection {
   }
 
   public setKeySelected(key: string, isSelected: boolean, shouldAnchor: boolean): void {
-    let index = this._keyToIndexMap[key];
+    const index = this._keyToIndexMap[key];
 
     if (index >= 0) {
       this.setIndexSelected(index, isSelected, shouldAnchor);
@@ -308,9 +308,8 @@ export class Selection implements ISelection {
 
     this.setChangeEvents(false);
 
-    let isExempt = this._exemptedIndices[index];
-    let hasChanged = false;
-    let canSelect = !this._unselectableIndices[index];
+    const isExempt = this._exemptedIndices[index];
+    const canSelect = !this._unselectableIndices[index];
 
     if (canSelect) {
       if (isSelected && this.mode === SelectionMode.single) {
@@ -323,7 +322,6 @@ export class Selection implements ISelection {
         (isSelected && this._isAllSelected) ||
         (!isSelected && !this._isAllSelected)
       )) {
-        hasChanged = true;
         delete this._exemptedIndices[index];
         this._exemptedCount--;
       }
@@ -333,7 +331,6 @@ export class Selection implements ISelection {
         (isSelected && !this._isAllSelected) ||
         (!isSelected && this._isAllSelected)
       )) {
-        hasChanged = true;
         this._exemptedIndices[index] = true;
         this._exemptedCount++;
       }
@@ -362,9 +359,9 @@ export class Selection implements ISelection {
       return;
     }
 
-    let anchorIndex = this._anchoredIndex || 0;
+    const anchorIndex = this._anchoredIndex || 0;
     let startIndex = Math.min(index, anchorIndex);
-    let endIndex = Math.max(index, anchorIndex);
+    const endIndex = Math.max(index, anchorIndex);
 
     this.setChangeEvents(false);
 
@@ -396,8 +393,8 @@ export class Selection implements ISelection {
       return;
     }
 
-    let isRangeSelected = this.isRangeSelected(fromIndex, count);
-    let endIndex = fromIndex + count;
+    const isRangeSelected = this.isRangeSelected(fromIndex, count);
+    const endIndex = fromIndex + count;
 
     if (this.mode === SelectionMode.single && count > 1) {
       return;
diff --git a/packages/office-ui-fabric-react/src/utilities/selection/SelectionLayout.ts b/packages/office-ui-fabric-react/src/utilities/selection/SelectionLayout.ts
deleted file mode 100644
index 24d8707c0155d..0000000000000
--- a/packages/office-ui-fabric-react/src/utilities/selection/SelectionLayout.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import {
-  ISelectionLayout,
-  SelectionDirection
-} from './interfaces';
-
-export class SelectionLayout implements ISelectionLayout {
-  private _direction: SelectionDirection;
-
-  constructor(direction: SelectionDirection) {
-    this._direction = direction;
-  }
-
-  public getItemIndexAbove(focusIndex: number, items: any[]): number {
-    return (this._direction === SelectionDirection.vertical) ? Math.max(0, focusIndex - 1) : focusIndex;
-  }
-
-  public getItemIndexBelow(focusIndex: number, items: any[]): number {
-    return (this._direction === SelectionDirection.vertical) ? Math.min(items.length - 1, focusIndex + 1) : focusIndex;
-  }
-
-  public getItemIndexLeft(focusIndex: number, items: any[]): number {
-    return (this._direction === SelectionDirection.vertical) ? focusIndex : Math.max(0, focusIndex - 1);
-  }
-
-  public getItemIndexRight(focusIndex: number, items: any[]): number {
-    return (this._direction === SelectionDirection.vertical) ? focusIndex : Math.min(items.length - 1, focusIndex + 1);
-  }
-}
diff --git a/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.test.tsx b/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.test.tsx
index 42dfb6d0c2007..6ca9e43284457 100644
--- a/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.test.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.test.tsx
@@ -19,9 +19,7 @@ let _surface0: Element;
 let _invoke0: Element;
 let _toggle0: Element;
 let _surface1: Element;
-let _invoke1: Element;
 let _toggle1: Element;
-let _invoke2: Element;
 let _toggle2: Element;
 let _surface3: Element;
 
@@ -66,9 +64,7 @@ function _initializeSelection(selectionMode = SelectionMode.multiple) {
   _invoke0 = _componentElement.querySelector('#invoke0')!;
   _toggle0 = _componentElement.querySelector('#toggle0')!;
   _surface1 = _componentElement.querySelector('#surface1')!;
-  _invoke1 = _componentElement.querySelector('#invoke1')!;
   _toggle1 = _componentElement.querySelector('#toggle1')!;
-  _invoke2 = _componentElement.querySelector('#invoke2')!;
   _toggle2 = _componentElement.querySelector('#toggle2')!;
   _surface3 = _componentElement.querySelector('#surface3')!;
 
diff --git a/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx b/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx
index 4e2fb23369619..e350b7466eb59 100644
--- a/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/selection/SelectionZone.tsx
@@ -10,11 +10,8 @@ import {
   getWindow,
   isElementTabbable
 } from '../../Utilities';
-import { SelectionLayout } from './SelectionLayout';
 import {
   ISelection,
-  ISelectionLayout,
-  SelectionDirection,
   SelectionMode
 } from './interfaces';
 
@@ -42,7 +39,10 @@ const SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME = 'data-selection-all-toggle';
 export interface ISelectionZoneProps extends React.Props<SelectionZone> {
   componentRef?: () => void;
   selection: ISelection;
-  layout?: ISelectionLayout;
+  /**
+   * @deprecated No longer in use, focus is now managed by FocusZone
+   */
+  layout?: {};
   selectionMode?: SelectionMode;
   selectionPreservedOnEmptyClick?: boolean;
   enterModalOnTouch?: boolean;
@@ -53,17 +53,12 @@ export interface ISelectionZoneProps extends React.Props<SelectionZone> {
 
 export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
   public static defaultProps = {
-    layout: new SelectionLayout(SelectionDirection.vertical),
     isMultiSelectEnabled: true,
     isSelectedOnFocus: true,
     selectionMode: SelectionMode.multiple
   };
 
-  public refs: {
-    [key: string]: React.ReactInstance,
-    root: HTMLElement
-  };
-
+  private _root: HTMLDivElement;
   private _isCtrlPressed: boolean;
   private _isShiftPressed: boolean;
   private _isMetaPressed: boolean;
@@ -73,8 +68,8 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
   private _isTouchTimeoutId: number | undefined;
 
   public componentDidMount() {
-    let win = getWindow(this.refs.root);
-    let scrollElement = findScrollableParent(this.refs.root);
+    const win = getWindow(this._root);
+    const scrollElement = findScrollableParent(this._root);
 
     // Track the latest modifier keys globally.
     this._events.on(win, 'keydown, keyup', this._updateModifiers, true);
@@ -87,7 +82,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     return (
       <div
         className='ms-SelectionZone'
-        ref='root'
+        ref={ this._resolveRef('_root') }
         onKeyDown={ this._onKeyDown }
         onMouseDown={ this._onMouseDown }
         onKeyDownCapture={ this._onKeyDownCapture }
@@ -124,13 +119,13 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
       return;
     }
 
-    if (!elementContains(ev.target, this.refs.root)) {
+    if (!elementContains(ev.target, this._root)) {
       return;
     }
 
     let target = ev.target as HTMLElement;
 
-    while (target !== this.refs.root) {
+    while (target !== this._root) {
       if (this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {
         this.ignoreNextFocus();
         break;
@@ -147,18 +142,18 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
    */
   @autobind
   private _onFocus(ev: React.FocusEvent<HTMLElement>) {
-    let target = ev.target as HTMLElement;
-    let { selection } = this.props;
-    let isToggleModifierPressed = this._isCtrlPressed || this._isMetaPressed;
+    const target = ev.target as HTMLElement;
+    const { selection } = this.props;
+    const isToggleModifierPressed = this._isCtrlPressed || this._isMetaPressed;
 
     const selectionMode = this._getSelectionMode();
 
     if (this._shouldHandleFocus && selectionMode !== SelectionMode.none) {
-      let isToggle = this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME);
-      let itemRoot = this._findItemRoot(target);
+      const isToggle = this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME);
+      const itemRoot = this._findItemRoot(target);
 
       if (!isToggle && itemRoot) {
-        let index = this._getItemIndex(itemRoot);
+        const index = this._getItemIndex(itemRoot);
 
         if (isToggleModifierPressed) {
           // set anchor only.
@@ -183,9 +178,14 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     this._updateModifiers(ev);
 
     let target = ev.target as HTMLElement;
-    let itemRoot = this._findItemRoot(target);
+    const itemRoot = this._findItemRoot(target);
 
-    while (target !== this.refs.root) {
+    // No-op if selection is disabled
+    if (this._isSelectionDisabled(target)) {
+      return;
+    }
+
+    while (target !== this._root) {
       if (this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) {
         break;
       } else if (itemRoot) {
@@ -213,19 +213,19 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     this._updateModifiers(ev);
 
     let target = ev.target as HTMLElement;
-    let itemRoot = this._findItemRoot(target);
+    const itemRoot = this._findItemRoot(target);
 
     // No-op if selection is disabled
     if (this._isSelectionDisabled(target)) {
       return;
     }
 
-    while (target !== this.refs.root) {
+    while (target !== this._root) {
       if (this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) {
         this._onToggleAllClick(ev);
         break;
       } else if (itemRoot) {
-        let index = this._getItemIndex(itemRoot);
+        const index = this._getItemIndex(itemRoot);
 
         if (this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) {
           if (this._isShiftPressed) {
@@ -270,7 +270,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
   }
 
   private _isSelectionDisabled(target: HTMLElement): boolean {
-    while (target !== this.refs.root) {
+    while (target !== this._root) {
       if (this._hasAttribute(target, SELECTION_DISABLED_ATTRIBUTE_NAME)) {
         return true;
       }
@@ -292,15 +292,15 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
       return;
     }
 
-    let { onItemInvoked } = this.props;
-    let itemRoot = this._findItemRoot(target);
+    const { onItemInvoked } = this.props;
+    const itemRoot = this._findItemRoot(target);
 
     const selectionMode = this._getSelectionMode();
 
     if (itemRoot && onItemInvoked && selectionMode !== SelectionMode.none && !this._isInputElement(target)) {
-      let index = this._getItemIndex(itemRoot);
+      const index = this._getItemIndex(itemRoot);
 
-      while (target !== this.refs.root) {
+      while (target !== this._root) {
         if (
           this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME) ||
           this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {
@@ -334,9 +334,9 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
       return;
     }
 
-    let { selection } = this.props;
-    let isSelectAllKey = ev.which === KeyCodes.a && (this._isCtrlPressed || this._isMetaPressed);
-    let isClearSelectionKey = ev.which === KeyCodes.escape;
+    const { selection } = this.props;
+    const isSelectAllKey = ev.which === KeyCodes.a && (this._isCtrlPressed || this._isMetaPressed);
+    const isClearSelectionKey = ev.which === KeyCodes.escape;
 
     // Ignore key downs from input elements.
     if (this._isInputElement(target)) {
@@ -362,13 +362,13 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
       return;
     }
 
-    let itemRoot = this._findItemRoot(target);
+    const itemRoot = this._findItemRoot(target);
 
     // If a key was pressed within an item, we should treat "enters" as invokes and "space" as toggle
     if (itemRoot) {
-      let index = this._getItemIndex(itemRoot);
+      const index = this._getItemIndex(itemRoot);
 
-      while (target !== this.refs.root) {
+      while (target !== this._root) {
         if (this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) {
           // For toggle elements, assuming they are rendered as buttons, they will generate a click event,
           // so we can no-op for any keydowns in this case.
@@ -395,7 +395,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
   }
 
   private _onToggleAllClick(ev: React.MouseEvent<HTMLElement>) {
-    let { selection } = this.props;
+    const { selection } = this.props;
 
     const selectionMode = this._getSelectionMode();
 
@@ -407,7 +407,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
   }
 
   private _onToggleClick(ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, index: number) {
-    let { selection } = this.props;
+    const { selection } = this.props;
 
     const selectionMode = this._getSelectionMode();
 
@@ -421,7 +421,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
     if (selectionMode === SelectionMode.multiple) {
       selection.toggleIndexSelected(index);
     } else if (selectionMode === SelectionMode.single) {
-      let isSelected = selection.isIndexSelected(index);
+      const isSelected = selection.isIndexSelected(index);
       selection.setAllSelected(false);
       selection.setIndexSelected(index, !isSelected, true);
     } else {
@@ -438,7 +438,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
   }
 
   private _onInvokeClick(ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, index: number) {
-    let { selection, onItemInvoked } = this.props;
+    const { selection, onItemInvoked } = this.props;
 
     if (onItemInvoked) {
       onItemInvoked(selection.getItems()[index], index, ev.nativeEvent);
@@ -448,8 +448,8 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
   }
 
   private _onItemSurfaceClick(ev: React.SyntheticEvent<HTMLElement>, index: number) {
-    let { selection } = this.props;
-    let isToggleModifierPressed = this._isCtrlPressed || this._isMetaPressed;
+    const { selection } = this.props;
+    const isToggleModifierPressed = this._isCtrlPressed || this._isMetaPressed;
 
     const selectionMode = this._getSelectionMode();
 
@@ -467,7 +467,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
   }
 
   private _onInvokeMouseDown(ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, index: number) {
-    let { selection } = this.props;
+    const { selection } = this.props;
 
     // Only do work if item is not selected.
     if (selection.isIndexSelected(index)) {
@@ -487,8 +487,8 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
   }
 
   private _clearAndSelectIndex(index: number) {
-    let { selection } = this.props;
-    let isAlreadySingleSelected = selection.getSelectedCount() === 1 && selection.isIndexSelected(index);
+    const { selection } = this.props;
+    const isAlreadySingleSelected = selection.getSelectedCount() === 1 && selection.isIndexSelected(index);
 
     if (!isAlreadySingleSelected) {
       selection.setChangeEvents(false);
@@ -513,11 +513,11 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
   }
 
   private _findItemRoot(target: HTMLElement): HTMLElement | undefined {
-    let { selection } = this.props;
+    const { selection } = this.props;
 
-    while (target !== this.refs.root) {
-      let indexValue = target.getAttribute(SELECTION_INDEX_ATTRIBUTE_NAME);
-      let index = Number(indexValue);
+    while (target !== this._root) {
+      const indexValue = target.getAttribute(SELECTION_INDEX_ATTRIBUTE_NAME);
+      const index = Number(indexValue);
 
       if (indexValue !== null && index >= 0 && index < selection.getItems().length) {
         break;
@@ -526,7 +526,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
       target = getParent(target) as HTMLElement;
     }
 
-    if (target === this.refs.root) {
+    if (target === this._root) {
       return undefined;
     }
 
@@ -540,7 +540,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
   private _hasAttribute(element: HTMLElement, attributeName: string): boolean {
     let isToggle = false;
 
-    while (!isToggle && element !== this.refs.root) {
+    while (!isToggle && element !== this._root) {
       isToggle = element.getAttribute(attributeName) === 'true';
       element = getParent(element) as HTMLElement;
     }
@@ -553,7 +553,7 @@ export class SelectionZone extends BaseComponent<ISelectionZoneProps, {}> {
   }
 
   private _isNonHandledClick(element: HTMLElement): boolean {
-    let doc = getDocument();
+    const doc = getDocument();
 
     if (doc && element) {
       while (element && element !== doc.documentElement) {
diff --git a/packages/office-ui-fabric-react/src/utilities/selection/examples/Selection.Basic.Example.tsx b/packages/office-ui-fabric-react/src/utilities/selection/examples/Selection.Basic.Example.tsx
index 5ff1fa25d8d13..e0b1e06df8b38 100644
--- a/packages/office-ui-fabric-react/src/utilities/selection/examples/Selection.Basic.Example.tsx
+++ b/packages/office-ui-fabric-react/src/utilities/selection/examples/Selection.Basic.Example.tsx
@@ -35,7 +35,7 @@ export interface ISelectionItemExampleProps {
  */
 export class SelectionItemExample extends React.Component<ISelectionItemExampleProps, {}> {
   public render() {
-    let { item, itemIndex, selection } = this.props;
+    const { item, itemIndex, selection } = this.props;
     let isSelected = false;
 
     if (selection && itemIndex !== undefined) {
@@ -87,7 +87,7 @@ export class SelectionBasicExample extends React.Component<{}, ISelectionBasicEx
   }
 
   public render() {
-    let { items, selection } = this.state;
+    const { items, selection } = this.state;
 
     return (
       <div className='ms-SelectionBasicExample'>
@@ -120,13 +120,13 @@ export class SelectionBasicExample extends React.Component<{}, ISelectionBasicEx
   }
 
   private _onToggleSelectAll() {
-    let { selection } = this.state;
+    const { selection } = this.state;
     selection.toggleAllSelected();
   }
 
   private _onSelectionModeChanged(ev: React.MouseEvent<HTMLElement>, menuItem: IContextualMenuItem) {
     this.setState((previousState: ISelectionBasicExampleState) => {
-      let newSelection = new Selection({
+      const newSelection = new Selection({
         onSelectionChanged: this._onSelectionChanged,
         canSelectItem: previousState.canSelect === 'vowels' ? this._canSelectItem : undefined,
         selectionMode: menuItem.data
@@ -140,10 +140,10 @@ export class SelectionBasicExample extends React.Component<{}, ISelectionBasicEx
   }
 
   private _onCanSelectChanged(ev: React.MouseEvent<HTMLElement>, menuItem: IContextualMenuItem) {
-    let canSelectItem = (menuItem.data === 'vowels') ? this._canSelectItem : undefined;
+    const canSelectItem = (menuItem.data === 'vowels') ? this._canSelectItem : undefined;
 
     this.setState((previousState: ISelectionBasicExampleState) => {
-      let newSelection = new Selection({ onSelectionChanged: this._onSelectionChanged, canSelectItem: canSelectItem, selectionMode: previousState.selection.mode });
+      const newSelection = new Selection({ onSelectionChanged: this._onSelectionChanged, canSelectItem: canSelectItem, selectionMode: previousState.selection.mode });
       newSelection.setItems(previousState.items as IObjectWithKey[], false);
       return {
         selection: newSelection,
@@ -157,7 +157,7 @@ export class SelectionBasicExample extends React.Component<{}, ISelectionBasicEx
   }
 
   private _getCommandItems(): IContextualMenuItem[] {
-    let { selection, canSelect } = this.state;
+    const { selection, canSelect } = this.state;
 
     return [
       {
diff --git a/packages/office-ui-fabric-react/src/utilities/selection/index.ts b/packages/office-ui-fabric-react/src/utilities/selection/index.ts
index c3ca5de5938f9..db1d88f010b13 100644
--- a/packages/office-ui-fabric-react/src/utilities/selection/index.ts
+++ b/packages/office-ui-fabric-react/src/utilities/selection/index.ts
@@ -1,4 +1,3 @@
 export * from './interfaces';
 export * from './Selection';
-export * from './SelectionLayout';
 export * from './SelectionZone';
diff --git a/packages/office-ui-fabric-react/src/utilities/selection/interfaces.ts b/packages/office-ui-fabric-react/src/utilities/selection/interfaces.ts
index 58434ad2ea950..10e9e004d4566 100644
--- a/packages/office-ui-fabric-react/src/utilities/selection/interfaces.ts
+++ b/packages/office-ui-fabric-react/src/utilities/selection/interfaces.ts
@@ -58,13 +58,6 @@ export interface ISelection {
   toggleRangeSelected(fromIndex: number, count: number): void;
 }
 
-export interface ISelectionLayout {
-  getItemIndexAbove(index: number, items: any[]): number;
-  getItemIndexBelow(index: number, items: any[]): number;
-  getItemIndexLeft(index: number, items: any[]): number;
-  getItemIndexRight(index: number, items: any[]): number;
-}
-
 export enum SelectionDirection {
   horizontal = 0,
   vertical = 1
diff --git a/packages/office-ui-fabric-react/tslint.json b/packages/office-ui-fabric-react/tslint.json
index cbaba79e30a85..7d6cf89d5c8c0 100644
--- a/packages/office-ui-fabric-react/tslint.json
+++ b/packages/office-ui-fabric-react/tslint.json
@@ -3,24 +3,15 @@
     "office-ui-fabric-react-tslint"
   ],
   "rules": {
-    "jsx-no-string-ref": false,
-    "jsx-key": false,
-    "jsx-boolean-value": false,
     "jsx-ban-props": false,
     "max-line-length": [
       false,
       140
     ],
+    "no-unused-variable": false,
     "no-any": false,
-    "variable-name": false,
-    "no-internal-module": false,
-    "prefer-const": false,
     "typedef": [
       false
-    ],
-    "no-inferrable-types": [
-      false
-    ],
-    "no-unused-variable": false
+    ]
   }
-}
\ No newline at end of file
+}
diff --git a/packages/styling/CHANGELOG.json b/packages/styling/CHANGELOG.json
index d0e363eea13c8..8d9af4459486f 100644
--- a/packages/styling/CHANGELOG.json
+++ b/packages/styling/CHANGELOG.json
@@ -1,6 +1,75 @@
 {
   "name": "@uifabric/styling",
   "entries": [
+    {
+      "version": "5.19.1",
+      "tag": "@uifabric/styling_v5.19.1",
+      "date": "Mon, 12 Mar 2018 06:29:20 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Christian Gonzalez <christianjordangonzalez@gmail.com>",
+            "commit": "a3841913dd420f50f9a04cdd56676aa9f4f0fd89",
+            "comment": "By default, try to use the system font before downloading a web font"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.17.1 <6.0.0` to `>=5.18.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.19.0",
+      "tag": "@uifabric/styling_v5.19.0",
+      "date": "Fri, 23 Feb 2018 03:05:53 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Philip Kuo <phkuo@microsoft.com>",
+            "commit": "ebe601051c081838ae9d029e1020f316258d148a",
+            "comment": "add preliminary support for variant theming, add bodyLink slot"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.18.1",
+      "tag": "@uifabric/styling_v5.18.1",
+      "date": "Sat, 17 Feb 2018 21:29:00 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Jordan Janzen <jordancjanzen@gmail.com>",
+            "commit": "1f1db9da4f7368806e1a819e75d7685ec7b73f04",
+            "comment": "Add whiteTranslucent40 to palette"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.18.0",
+      "tag": "@uifabric/styling_v5.18.0",
+      "date": "Wed, 14 Feb 2018 22:10:50 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Mark Polak <mark@thedutchies.com>",
+            "commit": "8b573a64f3d9f4e3dbd17b1f90788ab8fffd6185",
+            "comment": "Adjusting IColorClassNames and IFontStyles to remove the optional part for the members, to make the interfaces easier to consume."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/utilities\" from `>=5.10.3 <6.0.0` to `>=5.11.0 <6.0.0`"
+          },
+          {
+            "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.11.2 <6.0.0` to `>=5.12.0 <6.0.0`"
+          }
+        ]
+      }
+    },
     {
       "version": "5.17.0",
       "tag": "@uifabric/styling_v5.17.0",
diff --git a/packages/styling/CHANGELOG.md b/packages/styling/CHANGELOG.md
index e44bb6fb9b021..02849f835b9bb 100644
--- a/packages/styling/CHANGELOG.md
+++ b/packages/styling/CHANGELOG.md
@@ -1,6 +1,34 @@
 # Change Log - @uifabric/styling
 
-This log was last generated on Thu, 25 Jan 2018 11:23:06 GMT and should not be manually modified.
+This log was last generated on Mon, 12 Mar 2018 06:29:20 GMT and should not be manually modified.
+
+## 5.19.1
+Mon, 12 Mar 2018 06:29:20 GMT
+
+### Patches
+
+- By default, try to use the system font before downloading a web font
+
+## 5.19.0
+Fri, 23 Feb 2018 03:05:53 GMT
+
+### Minor changes
+
+- add preliminary support for variant theming, add bodyLink slot
+
+## 5.18.1
+Sat, 17 Feb 2018 21:29:00 GMT
+
+### Patches
+
+- Add whiteTranslucent40 to palette
+
+## 5.18.0
+Wed, 14 Feb 2018 22:10:50 GMT
+
+### Minor changes
+
+- Adjusting IColorClassNames and IFontStyles to remove the optional part for the members, to make the interfaces easier to consume.
 
 ## 5.17.0
 Thu, 25 Jan 2018 11:23:06 GMT
diff --git a/packages/styling/package.json b/packages/styling/package.json
index 5c9edbcaea5f1..bbd9ca0d6eb16 100644
--- a/packages/styling/package.json
+++ b/packages/styling/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uifabric/styling",
-  "version": "5.17.0",
+  "version": "5.19.1",
   "description": "Defines the core Office UI Fabric styles through a JavaScript interface.",
   "repository": {
     "type": "git",
@@ -13,7 +13,8 @@
     "build": "node ../../scripts/build.js",
     "clean": "node ../../scripts/clean.js",
     "start": "node ../../scripts/start.js",
-    "start-test": "node ../../scripts/start-test.js"
+    "start-test": "node ../../scripts/start-test.js",
+    "update-snapshots": "node ../../scripts/build.js jest -u"
   },
   "devDependencies": {
     "@types/webpack-env": "1.13.0",
@@ -27,8 +28,8 @@
   },
   "dependencies": {
     "@microsoft/load-themed-styles": "^1.7.13",
-    "@uifabric/utilities": ">=5.9.0 <6.0.0",
-    "@uifabric/merge-styles": ">=5.11.0 <6.0.0",
+    "@uifabric/utilities": ">=5.18.2 <6.0.0",
+    "@uifabric/merge-styles": ">=5.13.0 <6.0.0",
     "tslib": "^1.7.1"
   }
 }
\ No newline at end of file
diff --git a/packages/styling/src/classNames/ColorClassNames.ts b/packages/styling/src/classNames/ColorClassNames.ts
index 44ed67ef8bf6a..eec694625c47e 100644
--- a/packages/styling/src/classNames/ColorClassNames.ts
+++ b/packages/styling/src/classNames/ColorClassNames.ts
@@ -6,297 +6,297 @@ import { DefaultPalette } from '../styles/DefaultPalette';
 import { getTheme } from '../styles/index';
 
 export interface IColorClassNames {
-  themeDarker?: string;
-  themeDarkerHover?: string;
-  themeDarkerBackground?: string;
-  themeDarkerBackgroundHover?: string;
-  themeDarkerBorder?: string;
-  themeDarkerBorderHover?: string;
-  themeDark?: string;
-  themeDarkHover?: string;
-  themeDarkBackground?: string;
-  themeDarkBackgroundHover?: string;
-  themeDarkBorder?: string;
-  themeDarkBorderHover?: string;
-  themeDarkAlt?: string;
-  themeDarkAltHover?: string;
-  themeDarkAltBackground?: string;
-  themeDarkAltBackgroundHover?: string;
-  themeDarkAltBorder?: string;
-  themeDarkAltBorderHover?: string;
-  themePrimary?: string;
-  themePrimaryHover?: string;
-  themePrimaryBackground?: string;
-  themePrimaryBackgroundHover?: string;
-  themePrimaryBorder?: string;
-  themePrimaryBorderHover?: string;
-  themeSecondary?: string;
-  themeSecondaryHover?: string;
-  themeSecondaryBackground?: string;
-  themeSecondaryBackgroundHover?: string;
-  themeSecondaryBorder?: string;
-  themeSecondaryBorderHover?: string;
-  themeTertiary?: string;
-  themeTertiaryHover?: string;
-  themeTertiaryBackground?: string;
-  themeTertiaryBackgroundHover?: string;
-  themeTertiaryBorder?: string;
-  themeTertiaryBorderHover?: string;
-  themeLight?: string;
-  themeLightHover?: string;
-  themeLightBackground?: string;
-  themeLightBackgroundHover?: string;
-  themeLightBorder?: string;
-  themeLightBorderHover?: string;
-  themeLighter?: string;
-  themeLighterHover?: string;
-  themeLighterBackground?: string;
-  themeLighterBackgroundHover?: string;
-  themeLighterBorder?: string;
-  themeLighterBorderHover?: string;
-  themeLighterAlt?: string;
-  themeLighterAltHover?: string;
-  themeLighterAltBackground?: string;
-  themeLighterAltBackgroundHover?: string;
-  themeLighterAltBorder?: string;
-  themeLighterAltBorderHover?: string;
-  black?: string;
-  blackHover?: string;
-  blackBackground?: string;
-  blackBackgroundHover?: string;
-  blackBorder?: string;
-  blackBorderHover?: string;
-  blackTranslucent40?: string;
-  blackTranslucent40Hover?: string;
-  blackTranslucent40Background?: string;
-  blackTranslucent40BackgroundHover?: string;
-  blackTranslucent40Border?: string;
-  blackTranslucent40BorderHover?: string;
-  neutralDark?: string;
-  neutralDarkHover?: string;
-  neutralDarkBackground?: string;
-  neutralDarkBackgroundHover?: string;
-  neutralDarkBorder?: string;
-  neutralDarkBorderHover?: string;
-  neutralPrimary?: string;
-  neutralPrimaryHover?: string;
-  neutralPrimaryBackground?: string;
-  neutralPrimaryBackgroundHover?: string;
-  neutralPrimaryBorder?: string;
-  neutralPrimaryBorderHover?: string;
-  neutralPrimaryAlt?: string;
-  neutralPrimaryAltHover?: string;
-  neutralPrimaryAltBackground?: string;
-  neutralPrimaryAltBackgroundHover?: string;
-  neutralPrimaryAltBorder?: string;
-  neutralPrimaryAltBorderHover?: string;
-  neutralSecondary?: string;
-  neutralSecondaryHover?: string;
-  neutralSecondaryBackground?: string;
-  neutralSecondaryBackgroundHover?: string;
-  neutralSecondaryBorder?: string;
-  neutralSecondaryBorderHover?: string;
-  neutralSecondaryAlt?: string;
-  neutralSecondaryAltHover?: string;
-  neutralSecondaryAltBackground?: string;
-  neutralSecondaryAltBackgroundHover?: string;
-  neutralSecondaryAltBorder?: string;
-  neutralSecondaryAltBorderHover?: string;
-  neutralTertiary?: string;
-  neutralTertiaryHover?: string;
-  neutralTertiaryBackground?: string;
-  neutralTertiaryBackgroundHover?: string;
-  neutralTertiaryBorder?: string;
-  neutralTertiaryBorderHover?: string;
-  neutralTertiaryAlt?: string;
-  neutralTertiaryAltHover?: string;
-  neutralTertiaryAltBackground?: string;
-  neutralTertiaryAltBackgroundHover?: string;
-  neutralTertiaryAltBorder?: string;
-  neutralTertiaryAltBorderHover?: string;
-  neutralQuaternary?: string;
-  neutralQuaternaryHover?: string;
-  neutralQuaternaryBackground?: string;
-  neutralQuaternaryBackgroundHover?: string;
-  neutralQuaternaryBorder?: string;
-  neutralQuaternaryBorderHover?: string;
-  neutralQuaternaryAlt?: string;
-  neutralQuaternaryAltHover?: string;
-  neutralQuaternaryAltBackground?: string;
-  neutralQuaternaryAltBackgroundHover?: string;
-  neutralQuaternaryAltBorder?: string;
-  neutralQuaternaryAltBorderHover?: string;
-  neutralLight?: string;
-  neutralLightHover?: string;
-  neutralLightBackground?: string;
-  neutralLightBackgroundHover?: string;
-  neutralLightBorder?: string;
-  neutralLightBorderHover?: string;
-  neutralLighter?: string;
-  neutralLighterHover?: string;
-  neutralLighterBackground?: string;
-  neutralLighterBackgroundHover?: string;
-  neutralLighterBorder?: string;
-  neutralLighterBorderHover?: string;
-  neutralLighterAlt?: string;
-  neutralLighterAltHover?: string;
-  neutralLighterAltBackground?: string;
-  neutralLighterAltBackgroundHover?: string;
-  neutralLighterAltBorder?: string;
-  neutralLighterAltBorderHover?: string;
-  white?: string;
-  whiteHover?: string;
-  whiteBackground?: string;
-  whiteBackgroundHover?: string;
-  whiteBorder?: string;
-  whiteBorderHover?: string;
-  whiteTranslucent40?: string;
-  whiteTranslucent40Hover?: string;
-  whiteTranslucent40Background?: string;
-  whiteTranslucent40BackgroundHover?: string;
-  whiteTranslucent40Border?: string;
-  whiteTranslucent40BorderHover?: string;
-  yellow?: string;
-  yellowHover?: string;
-  yellowBackground?: string;
-  yellowBackgroundHover?: string;
-  yellowBorder?: string;
-  yellowBorderHover?: string;
-  yellowLight?: string;
-  yellowLightHover?: string;
-  yellowLightBackground?: string;
-  yellowLightBackgroundHover?: string;
-  yellowLightBorder?: string;
-  yellowLightBorderHover?: string;
-  orange?: string;
-  orangeHover?: string;
-  orangeBackground?: string;
-  orangeBackgroundHover?: string;
-  orangeBorder?: string;
-  orangeBorderHover?: string;
-  orangeLight?: string;
-  orangeLightHover?: string;
-  orangeLightBackground?: string;
-  orangeLightBackgroundHover?: string;
-  orangeLightBorder?: string;
-  orangeLightBorderHover?: string;
-  orangeLighter?: string;
-  orangeLighterHover?: string;
-  orangeLighterBackground?: string;
-  orangeLighterBackgroundHover?: string;
-  orangeLighterBorder?: string;
-  orangeLighterBorderHover?: string;
-  redDark?: string;
-  redDarkHover?: string;
-  redDarkBackground?: string;
-  redDarkBackgroundHover?: string;
-  redDarkBorder?: string;
-  redDarkBorderHover?: string;
-  red?: string;
-  redHover?: string;
-  redBackground?: string;
-  redBackgroundHover?: string;
-  redBorder?: string;
-  redBorderHover?: string;
-  magentaDark?: string;
-  magentaDarkHover?: string;
-  magentaDarkBackground?: string;
-  magentaDarkBackgroundHover?: string;
-  magentaDarkBorder?: string;
-  magentaDarkBorderHover?: string;
-  magenta?: string;
-  magentaHover?: string;
-  magentaBackground?: string;
-  magentaBackgroundHover?: string;
-  magentaBorder?: string;
-  magentaBorderHover?: string;
-  magentaLight?: string;
-  magentaLightHover?: string;
-  magentaLightBackground?: string;
-  magentaLightBackgroundHover?: string;
-  magentaLightBorder?: string;
-  magentaLightBorderHover?: string;
-  purpleDark?: string;
-  purpleDarkHover?: string;
-  purpleDarkBackground?: string;
-  purpleDarkBackgroundHover?: string;
-  purpleDarkBorder?: string;
-  purpleDarkBorderHover?: string;
-  purple?: string;
-  purpleHover?: string;
-  purpleBackground?: string;
-  purpleBackgroundHover?: string;
-  purpleBorder?: string;
-  purpleBorderHover?: string;
-  purpleLight?: string;
-  purpleLightHover?: string;
-  purpleLightBackground?: string;
-  purpleLightBackgroundHover?: string;
-  purpleLightBorder?: string;
-  purpleLightBorderHover?: string;
-  blueDark?: string;
-  blueDarkHover?: string;
-  blueDarkBackground?: string;
-  blueDarkBackgroundHover?: string;
-  blueDarkBorder?: string;
-  blueDarkBorderHover?: string;
-  blueMid?: string;
-  blueMidHover?: string;
-  blueMidBackground?: string;
-  blueMidBackgroundHover?: string;
-  blueMidBorder?: string;
-  blueMidBorderHover?: string;
-  blue?: string;
-  blueHover?: string;
-  blueBackground?: string;
-  blueBackgroundHover?: string;
-  blueBorder?: string;
-  blueBorderHover?: string;
-  blueLight?: string;
-  blueLightHover?: string;
-  blueLightBackground?: string;
-  blueLightBackgroundHover?: string;
-  blueLightBorder?: string;
-  blueLightBorderHover?: string;
-  tealDark?: string;
-  tealDarkHover?: string;
-  tealDarkBackground?: string;
-  tealDarkBackgroundHover?: string;
-  tealDarkBorder?: string;
-  tealDarkBorderHover?: string;
-  teal?: string;
-  tealHover?: string;
-  tealBackground?: string;
-  tealBackgroundHover?: string;
-  tealBorder?: string;
-  tealBorderHover?: string;
-  tealLight?: string;
-  tealLightHover?: string;
-  tealLightBackground?: string;
-  tealLightBackgroundHover?: string;
-  tealLightBorder?: string;
-  tealLightBorderHover?: string;
-  greenDark?: string;
-  greenDarkHover?: string;
-  greenDarkBackground?: string;
-  greenDarkBackgroundHover?: string;
-  greenDarkBorder?: string;
-  greenDarkBorderHover?: string;
-  green?: string;
-  greenHover?: string;
-  greenBackground?: string;
-  greenBackgroundHover?: string;
-  greenBorder?: string;
-  greenBorderHover?: string;
-  greenLight?: string;
-  greenLightHover?: string;
-  greenLightBackground?: string;
-  greenLightBackgroundHover?: string;
-  greenLightBorder?: string;
-  greenLightBorderHover?: string;
+  themeDarker: string;
+  themeDarkerHover: string;
+  themeDarkerBackground: string;
+  themeDarkerBackgroundHover: string;
+  themeDarkerBorder: string;
+  themeDarkerBorderHover: string;
+  themeDark: string;
+  themeDarkHover: string;
+  themeDarkBackground: string;
+  themeDarkBackgroundHover: string;
+  themeDarkBorder: string;
+  themeDarkBorderHover: string;
+  themeDarkAlt: string;
+  themeDarkAltHover: string;
+  themeDarkAltBackground: string;
+  themeDarkAltBackgroundHover: string;
+  themeDarkAltBorder: string;
+  themeDarkAltBorderHover: string;
+  themePrimary: string;
+  themePrimaryHover: string;
+  themePrimaryBackground: string;
+  themePrimaryBackgroundHover: string;
+  themePrimaryBorder: string;
+  themePrimaryBorderHover: string;
+  themeSecondary: string;
+  themeSecondaryHover: string;
+  themeSecondaryBackground: string;
+  themeSecondaryBackgroundHover: string;
+  themeSecondaryBorder: string;
+  themeSecondaryBorderHover: string;
+  themeTertiary: string;
+  themeTertiaryHover: string;
+  themeTertiaryBackground: string;
+  themeTertiaryBackgroundHover: string;
+  themeTertiaryBorder: string;
+  themeTertiaryBorderHover: string;
+  themeLight: string;
+  themeLightHover: string;
+  themeLightBackground: string;
+  themeLightBackgroundHover: string;
+  themeLightBorder: string;
+  themeLightBorderHover: string;
+  themeLighter: string;
+  themeLighterHover: string;
+  themeLighterBackground: string;
+  themeLighterBackgroundHover: string;
+  themeLighterBorder: string;
+  themeLighterBorderHover: string;
+  themeLighterAlt: string;
+  themeLighterAltHover: string;
+  themeLighterAltBackground: string;
+  themeLighterAltBackgroundHover: string;
+  themeLighterAltBorder: string;
+  themeLighterAltBorderHover: string;
+  black: string;
+  blackHover: string;
+  blackBackground: string;
+  blackBackgroundHover: string;
+  blackBorder: string;
+  blackBorderHover: string;
+  blackTranslucent40: string;
+  blackTranslucent40Hover: string;
+  blackTranslucent40Background: string;
+  blackTranslucent40BackgroundHover: string;
+  blackTranslucent40Border: string;
+  blackTranslucent40BorderHover: string;
+  neutralDark: string;
+  neutralDarkHover: string;
+  neutralDarkBackground: string;
+  neutralDarkBackgroundHover: string;
+  neutralDarkBorder: string;
+  neutralDarkBorderHover: string;
+  neutralPrimary: string;
+  neutralPrimaryHover: string;
+  neutralPrimaryBackground: string;
+  neutralPrimaryBackgroundHover: string;
+  neutralPrimaryBorder: string;
+  neutralPrimaryBorderHover: string;
+  neutralPrimaryAlt: string;
+  neutralPrimaryAltHover: string;
+  neutralPrimaryAltBackground: string;
+  neutralPrimaryAltBackgroundHover: string;
+  neutralPrimaryAltBorder: string;
+  neutralPrimaryAltBorderHover: string;
+  neutralSecondary: string;
+  neutralSecondaryHover: string;
+  neutralSecondaryBackground: string;
+  neutralSecondaryBackgroundHover: string;
+  neutralSecondaryBorder: string;
+  neutralSecondaryBorderHover: string;
+  neutralSecondaryAlt: string;
+  neutralSecondaryAltHover: string;
+  neutralSecondaryAltBackground: string;
+  neutralSecondaryAltBackgroundHover: string;
+  neutralSecondaryAltBorder: string;
+  neutralSecondaryAltBorderHover: string;
+  neutralTertiary: string;
+  neutralTertiaryHover: string;
+  neutralTertiaryBackground: string;
+  neutralTertiaryBackgroundHover: string;
+  neutralTertiaryBorder: string;
+  neutralTertiaryBorderHover: string;
+  neutralTertiaryAlt: string;
+  neutralTertiaryAltHover: string;
+  neutralTertiaryAltBackground: string;
+  neutralTertiaryAltBackgroundHover: string;
+  neutralTertiaryAltBorder: string;
+  neutralTertiaryAltBorderHover: string;
+  neutralQuaternary: string;
+  neutralQuaternaryHover: string;
+  neutralQuaternaryBackground: string;
+  neutralQuaternaryBackgroundHover: string;
+  neutralQuaternaryBorder: string;
+  neutralQuaternaryBorderHover: string;
+  neutralQuaternaryAlt: string;
+  neutralQuaternaryAltHover: string;
+  neutralQuaternaryAltBackground: string;
+  neutralQuaternaryAltBackgroundHover: string;
+  neutralQuaternaryAltBorder: string;
+  neutralQuaternaryAltBorderHover: string;
+  neutralLight: string;
+  neutralLightHover: string;
+  neutralLightBackground: string;
+  neutralLightBackgroundHover: string;
+  neutralLightBorder: string;
+  neutralLightBorderHover: string;
+  neutralLighter: string;
+  neutralLighterHover: string;
+  neutralLighterBackground: string;
+  neutralLighterBackgroundHover: string;
+  neutralLighterBorder: string;
+  neutralLighterBorderHover: string;
+  neutralLighterAlt: string;
+  neutralLighterAltHover: string;
+  neutralLighterAltBackground: string;
+  neutralLighterAltBackgroundHover: string;
+  neutralLighterAltBorder: string;
+  neutralLighterAltBorderHover: string;
+  white: string;
+  whiteHover: string;
+  whiteBackground: string;
+  whiteBackgroundHover: string;
+  whiteBorder: string;
+  whiteBorderHover: string;
+  whiteTranslucent40: string;
+  whiteTranslucent40Hover: string;
+  whiteTranslucent40Background: string;
+  whiteTranslucent40BackgroundHover: string;
+  whiteTranslucent40Border: string;
+  whiteTranslucent40BorderHover: string;
+  yellow: string;
+  yellowHover: string;
+  yellowBackground: string;
+  yellowBackgroundHover: string;
+  yellowBorder: string;
+  yellowBorderHover: string;
+  yellowLight: string;
+  yellowLightHover: string;
+  yellowLightBackground: string;
+  yellowLightBackgroundHover: string;
+  yellowLightBorder: string;
+  yellowLightBorderHover: string;
+  orange: string;
+  orangeHover: string;
+  orangeBackground: string;
+  orangeBackgroundHover: string;
+  orangeBorder: string;
+  orangeBorderHover: string;
+  orangeLight: string;
+  orangeLightHover: string;
+  orangeLightBackground: string;
+  orangeLightBackgroundHover: string;
+  orangeLightBorder: string;
+  orangeLightBorderHover: string;
+  orangeLighter: string;
+  orangeLighterHover: string;
+  orangeLighterBackground: string;
+  orangeLighterBackgroundHover: string;
+  orangeLighterBorder: string;
+  orangeLighterBorderHover: string;
+  redDark: string;
+  redDarkHover: string;
+  redDarkBackground: string;
+  redDarkBackgroundHover: string;
+  redDarkBorder: string;
+  redDarkBorderHover: string;
+  red: string;
+  redHover: string;
+  redBackground: string;
+  redBackgroundHover: string;
+  redBorder: string;
+  redBorderHover: string;
+  magentaDark: string;
+  magentaDarkHover: string;
+  magentaDarkBackground: string;
+  magentaDarkBackgroundHover: string;
+  magentaDarkBorder: string;
+  magentaDarkBorderHover: string;
+  magenta: string;
+  magentaHover: string;
+  magentaBackground: string;
+  magentaBackgroundHover: string;
+  magentaBorder: string;
+  magentaBorderHover: string;
+  magentaLight: string;
+  magentaLightHover: string;
+  magentaLightBackground: string;
+  magentaLightBackgroundHover: string;
+  magentaLightBorder: string;
+  magentaLightBorderHover: string;
+  purpleDark: string;
+  purpleDarkHover: string;
+  purpleDarkBackground: string;
+  purpleDarkBackgroundHover: string;
+  purpleDarkBorder: string;
+  purpleDarkBorderHover: string;
+  purple: string;
+  purpleHover: string;
+  purpleBackground: string;
+  purpleBackgroundHover: string;
+  purpleBorder: string;
+  purpleBorderHover: string;
+  purpleLight: string;
+  purpleLightHover: string;
+  purpleLightBackground: string;
+  purpleLightBackgroundHover: string;
+  purpleLightBorder: string;
+  purpleLightBorderHover: string;
+  blueDark: string;
+  blueDarkHover: string;
+  blueDarkBackground: string;
+  blueDarkBackgroundHover: string;
+  blueDarkBorder: string;
+  blueDarkBorderHover: string;
+  blueMid: string;
+  blueMidHover: string;
+  blueMidBackground: string;
+  blueMidBackgroundHover: string;
+  blueMidBorder: string;
+  blueMidBorderHover: string;
+  blue: string;
+  blueHover: string;
+  blueBackground: string;
+  blueBackgroundHover: string;
+  blueBorder: string;
+  blueBorderHover: string;
+  blueLight: string;
+  blueLightHover: string;
+  blueLightBackground: string;
+  blueLightBackgroundHover: string;
+  blueLightBorder: string;
+  blueLightBorderHover: string;
+  tealDark: string;
+  tealDarkHover: string;
+  tealDarkBackground: string;
+  tealDarkBackgroundHover: string;
+  tealDarkBorder: string;
+  tealDarkBorderHover: string;
+  teal: string;
+  tealHover: string;
+  tealBackground: string;
+  tealBackgroundHover: string;
+  tealBorder: string;
+  tealBorderHover: string;
+  tealLight: string;
+  tealLightHover: string;
+  tealLightBackground: string;
+  tealLightBackgroundHover: string;
+  tealLightBorder: string;
+  tealLightBorderHover: string;
+  greenDark: string;
+  greenDarkHover: string;
+  greenDarkBackground: string;
+  greenDarkBackgroundHover: string;
+  greenDarkBorder: string;
+  greenDarkBorderHover: string;
+  green: string;
+  greenHover: string;
+  greenBackground: string;
+  greenBackgroundHover: string;
+  greenBorder: string;
+  greenBorderHover: string;
+  greenLight: string;
+  greenLightHover: string;
+  greenLightBackground: string;
+  greenLightBackgroundHover: string;
+  greenLightBorder: string;
+  greenLightBorderHover: string;
 }
 
-export const ColorClassNames: IColorClassNames = {};
+export const ColorClassNames: IColorClassNames = {} as IColorClassNames;
 
 for (const colorName in DefaultPalette) {
   if (DefaultPalette.hasOwnProperty(colorName)) {
diff --git a/packages/styling/src/interfaces/IFontStyles.ts b/packages/styling/src/interfaces/IFontStyles.ts
index d72169280cdd7..2fd5d6d46be9b 100644
--- a/packages/styling/src/interfaces/IFontStyles.ts
+++ b/packages/styling/src/interfaces/IFontStyles.ts
@@ -4,15 +4,15 @@ import { IRawStyle } from '@uifabric/merge-styles/lib/index';
  * UI Fabric font set.
  */
 export interface IFontStyles {
-  tiny?: IRawStyle;
-  xSmall?: IRawStyle;
-  small?: IRawStyle;
-  smallPlus?: IRawStyle;
-  medium?: IRawStyle;
-  mediumPlus?: IRawStyle;
-  large?: IRawStyle;
-  xLarge?: IRawStyle;
-  xxLarge?: IRawStyle;
-  superLarge?: IRawStyle;
-  mega?: IRawStyle;
+  tiny: IRawStyle;
+  xSmall: IRawStyle;
+  small: IRawStyle;
+  smallPlus: IRawStyle;
+  medium: IRawStyle;
+  mediumPlus: IRawStyle;
+  large: IRawStyle;
+  xLarge: IRawStyle;
+  xxLarge: IRawStyle;
+  superLarge: IRawStyle;
+  mega: IRawStyle;
 }
diff --git a/packages/styling/src/interfaces/IPalette.ts b/packages/styling/src/interfaces/IPalette.ts
index e7e19aa3b3785..95aa41a0a1b7f 100644
--- a/packages/styling/src/interfaces/IPalette.ts
+++ b/packages/styling/src/interfaces/IPalette.ts
@@ -123,6 +123,11 @@ export interface IPalette {
    */
   white: string;
 
+  /**
+   * Color code for whiteTranslucent40
+   */
+  whiteTranslucent40: string;
+
   /**
    * Color code for yellow.
    */
diff --git a/packages/styling/src/interfaces/ISemanticColors.ts b/packages/styling/src/interfaces/ISemanticColors.ts
index 257f5f31513de..2574465261467 100644
--- a/packages/styling/src/interfaces/ISemanticColors.ts
+++ b/packages/styling/src/interfaces/ISemanticColors.ts
@@ -138,15 +138,21 @@ export interface ISemanticColors {
    * The border of a large input control in its resting, state; e.g. the box of dropdown.
    */
   inputBorder: string;
+
+  /** The border of a small input control in its resting unchecked state; e.g. the box of an unchecked checkbox.
+  *
+  */
+  smallInputBorder: string;
+
   /**
    * The border color of a large hovered input control, such as textbox.
    */
   inputBorderHovered: string;
 
   /**
-* The border of a small input control in its resting unchecked state; e.g. the box of an unchecked checkbox.
-*/
-  smallInputBorder: string;
+   * The background color of an input, e.g. textbox background.
+   */
+  inputBackground: string;
 
   /**
    * The background of a checked control; e.g. checked radio button's dot, checked toggle's background.
@@ -265,6 +271,16 @@ export interface ISemanticColors {
    */
   listItemBackgroundCheckedHovered: string;
 
+  /**
+   * The color of a link.
+   */
+  link: string;
+
+  /**
+   * The color of a hovered link. Also used when the link is active.
+   */
+  linkHovered: string;
+
   //// DEPRECATED SLOTS
   // Do not use these slots, they are only maintained for backwards compatibility.
 
diff --git a/packages/styling/src/styles/DefaultFontStyles.ts b/packages/styling/src/styles/DefaultFontStyles.ts
index 6e086a503ac93..cea5135d3e0a9 100644
--- a/packages/styling/src/styles/DefaultFontStyles.ts
+++ b/packages/styling/src/styles/DefaultFontStyles.ts
@@ -18,13 +18,17 @@ export const DefaultFontStyles: IFontStyles = createFontStyles(getLanguage());
 function _registerFontFace(
   fontFamily: string,
   url: string,
-  fontWeight?: IFontWeight
+  fontWeight?: IFontWeight,
+  localFontName?: string
 ): void {
   fontFamily = `'${fontFamily}'`;
 
+  const localFontSrc = localFontName !== undefined ? `local('${localFontName}'),` : '';
+
   fontFace({
     fontFamily,
     src:
+      localFontSrc +
       `url('${url}.woff2') format('woff2'),` +
       `url('${url}.woff') format('woff')`,
     fontWeight,
@@ -36,14 +40,15 @@ function _registerFontFaceSet(
   baseUrl: string,
   fontFamily: string,
   cdnFolder: string,
-  cdnFontName: string = 'segoeui'
+  cdnFontName: string = 'segoeui',
+  localFontName?: string
 ): void {
   const urlBase = `${baseUrl}/${cdnFolder}/${cdnFontName}`;
 
-  _registerFontFace(fontFamily, urlBase + '-light', FontWeights.light);
-  _registerFontFace(fontFamily, urlBase + '-semilight', FontWeights.semilight);
-  _registerFontFace(fontFamily, urlBase + '-regular', FontWeights.regular);
-  _registerFontFace(fontFamily, urlBase + '-semibold', FontWeights.semibold);
+  _registerFontFace(fontFamily, urlBase + '-light', FontWeights.light, localFontName && localFontName + ' Light');
+  _registerFontFace(fontFamily, urlBase + '-semilight', FontWeights.semilight, localFontName && localFontName + ' SemiLight');
+  _registerFontFace(fontFamily, urlBase + '-regular', FontWeights.regular, localFontName);
+  _registerFontFace(fontFamily, urlBase + '-semibold', FontWeights.semibold, localFontName && localFontName + ' SemiBold');
 }
 
 export function registerDefaultFontFaces(baseUrl: string): void {
@@ -58,7 +63,7 @@ export function registerDefaultFontFaces(baseUrl: string): void {
     _registerFontFaceSet(fontUrl, LocalizedFontNames.Greek, 'segoeui-greek');
     _registerFontFaceSet(fontUrl, LocalizedFontNames.Hebrew, 'segoeui-hebrew');
     _registerFontFaceSet(fontUrl, LocalizedFontNames.Vietnamese, 'segoeui-vietnamese');
-    _registerFontFaceSet(fontUrl, LocalizedFontNames.WestEuropean, 'segoeui-westeuropean');
+    _registerFontFaceSet(fontUrl, LocalizedFontNames.WestEuropean, 'segoeui-westeuropean', 'segoeui', 'Segoe UI');
     _registerFontFaceSet(fontUrl, LocalizedFontFamilies.Selawik, 'selawik', 'selawik');
 
     // Leelawadee UI (Thai) does not have a 'light' weight, so we override
diff --git a/packages/styling/src/styles/DefaultPalette.ts b/packages/styling/src/styles/DefaultPalette.ts
index ad3e0825cc3a4..1a7fd7802cf6a 100644
--- a/packages/styling/src/styles/DefaultPalette.ts
+++ b/packages/styling/src/styles/DefaultPalette.ts
@@ -1,5 +1,6 @@
 import { IPalette } from '../interfaces/index';
 
+// When adding or removing a color, make sure you keep this consistent with IColorClassNames by adding the color variants.
 export const DefaultPalette: IPalette = {
   themeDarker: '#004578',
   themeDark: '#005a9e',
@@ -25,6 +26,7 @@ export const DefaultPalette: IPalette = {
   neutralLighterAlt: '#f8f8f8',
   accent: '#0078d7',
   white: '#ffffff',
+  whiteTranslucent40: 'rgba(255,255,255,.4)',
   yellow: '#ffb900',
   yellowLight: '#fff100',
   orange: '#d83b01',
diff --git a/packages/styling/src/styles/__snapshots__/fonts.test.ts.snap b/packages/styling/src/styles/__snapshots__/fonts.test.ts.snap
new file mode 100644
index 0000000000000..15a77d38d6077
--- /dev/null
+++ b/packages/styling/src/styles/__snapshots__/fonts.test.ts.snap
@@ -0,0 +1,247 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`fonts tests creates the correct font styles for ar 1`] = `
+Object {
+  "large": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (Arabic)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "17px",
+    "fontWeight": 300,
+  },
+  "medium": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (Arabic)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "14px",
+    "fontWeight": 400,
+  },
+  "mediumPlus": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (Arabic)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "15px",
+    "fontWeight": 400,
+  },
+  "mega": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (Arabic)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "72px",
+    "fontWeight": 100,
+  },
+  "small": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (Arabic)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "12px",
+    "fontWeight": 400,
+  },
+  "smallPlus": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (Arabic)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "13px",
+    "fontWeight": 400,
+  },
+  "superLarge": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (Arabic)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "42px",
+    "fontWeight": 100,
+  },
+  "tiny": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (Arabic)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "10px",
+    "fontWeight": 600,
+  },
+  "xLarge": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (Arabic)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "21px",
+    "fontWeight": 100,
+  },
+  "xSmall": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (Arabic)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "11px",
+    "fontWeight": 400,
+  },
+  "xxLarge": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (Arabic)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "28px",
+    "fontWeight": 100,
+  },
+}
+`;
+
+exports[`fonts tests creates the correct font styles for en 1`] = `
+Object {
+  "large": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "17px",
+    "fontWeight": 300,
+  },
+  "medium": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "14px",
+    "fontWeight": 400,
+  },
+  "mediumPlus": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "15px",
+    "fontWeight": 400,
+  },
+  "mega": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "72px",
+    "fontWeight": 100,
+  },
+  "small": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "12px",
+    "fontWeight": 400,
+  },
+  "smallPlus": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "13px",
+    "fontWeight": 400,
+  },
+  "superLarge": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "42px",
+    "fontWeight": 100,
+  },
+  "tiny": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "10px",
+    "fontWeight": 600,
+  },
+  "xLarge": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "21px",
+    "fontWeight": 100,
+  },
+  "xSmall": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "11px",
+    "fontWeight": 400,
+  },
+  "xxLarge": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Segoe UI', 'Segoe UI Web (West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "28px",
+    "fontWeight": 100,
+  },
+}
+`;
+
+exports[`fonts tests creates the correct font styles for ja 1`] = `
+Object {
+  "large": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "17px",
+    "fontWeight": 300,
+  },
+  "medium": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "14px",
+    "fontWeight": 400,
+  },
+  "mediumPlus": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "15px",
+    "fontWeight": 400,
+  },
+  "mega": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "72px",
+    "fontWeight": 100,
+  },
+  "small": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "12px",
+    "fontWeight": 400,
+  },
+  "smallPlus": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "13px",
+    "fontWeight": 400,
+  },
+  "superLarge": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "42px",
+    "fontWeight": 100,
+  },
+  "tiny": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "10px",
+    "fontWeight": 600,
+  },
+  "xLarge": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "21px",
+    "fontWeight": 100,
+  },
+  "xSmall": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "11px",
+    "fontWeight": 400,
+  },
+  "xxLarge": Object {
+    "MozOsxFontSmoothing": "grayscale",
+    "WebkitFontSmoothing": "antialiased",
+    "fontFamily": "'Yu Gothic UI', 'Meiryo UI', Meiryo, 'MS Pgothic', Osaka, 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', sans-serif",
+    "fontSize": "28px",
+    "fontWeight": 100,
+  },
+}
+`;
diff --git a/packages/styling/src/styles/fonts.test.ts b/packages/styling/src/styles/fonts.test.ts
new file mode 100644
index 0000000000000..b2794ae4b0796
--- /dev/null
+++ b/packages/styling/src/styles/fonts.test.ts
@@ -0,0 +1,15 @@
+import { createFontStyles } from './fonts';
+
+describe('fonts tests', () => {
+  it('creates the correct font styles for en', () => {
+    expect(createFontStyles('en')).toMatchSnapshot();
+  });
+
+  it('creates the correct font styles for ar', () => {
+    expect(createFontStyles('ar')).toMatchSnapshot();
+  });
+
+  it('creates the correct font styles for ja', () => {
+    expect(createFontStyles('ja')).toMatchSnapshot();
+  });
+});
\ No newline at end of file
diff --git a/packages/styling/src/styles/fonts.ts b/packages/styling/src/styles/fonts.ts
index 8f796040dc7ec..25194c5aa90c7 100644
--- a/packages/styling/src/styles/fonts.ts
+++ b/packages/styling/src/styles/fonts.ts
@@ -40,6 +40,10 @@ export namespace LocalizedFontFamilies {
   export const WestEuropean = `'${LocalizedFontNames.WestEuropean}'`;
 }
 
+// By default, we favor system fonts for the default.
+// All localized fonts use a web font and never use the system font.
+const defaultFontFamily = `'Segoe UI', '${LocalizedFontNames.WestEuropean}'`;
+
 // Mapping of language prefix to to font family.
 const LanguageToFontMap = {
   'ar': LocalizedFontFamilies.Arabic,
@@ -101,39 +105,54 @@ export namespace IconFontSizes {
   export const large = '20px';
 }
 
+function _fontFamilyWithFallbacks(fontFamily: string): string {
+  return `${fontFamily}, ${FontFamilyFallbacks}`;
+}
+
 export function createFontStyles(localeCode: string | null): IFontStyles {
-  return {
-    tiny: _createFont(FontSizes.mini, FontWeights.semibold, localeCode),
-    xSmall: _createFont(FontSizes.xSmall, FontWeights.regular, localeCode),
-    small: _createFont(FontSizes.small, FontWeights.regular, localeCode),
-    smallPlus: _createFont(FontSizes.smallPlus, FontWeights.regular, localeCode),
-    medium: _createFont(FontSizes.medium, FontWeights.regular, localeCode),
-    mediumPlus: _createFont(FontSizes.mediumPlus, FontWeights.regular, localeCode),
-    large: _createFont(FontSizes.large, FontWeights.semilight, localeCode),
-    xLarge: _createFont(FontSizes.xLarge, FontWeights.light, localeCode),
-    xxLarge: _createFont(FontSizes.xxLarge, FontWeights.light, localeCode),
-    superLarge: _createFont(FontSizes.superLarge, FontWeights.light, localeCode),
-    mega: _createFont(FontSizes.mega, FontWeights.light, localeCode)
+  const localizedFont = _getLocalizedFontFamily(localeCode);
+  let fontFamilyWithFallback = _fontFamilyWithFallbacks(localizedFont);
+  let semilightFontFamilyWithFallback = fontFamilyWithFallback;
+
+  // Chrome has a bug where it does not render Segoe UI Semilight correctly, so we force the webfont to be used in that case
+  if (localizedFont === defaultFontFamily) {
+    semilightFontFamilyWithFallback = _fontFamilyWithFallbacks(LocalizedFontFamilies.WestEuropean);
+  }
+
+  const fontStyles = {
+    tiny: _createFont(FontSizes.mini, FontWeights.semibold, fontFamilyWithFallback),
+    xSmall: _createFont(FontSizes.xSmall, FontWeights.regular, fontFamilyWithFallback),
+    small: _createFont(FontSizes.small, FontWeights.regular, fontFamilyWithFallback),
+    smallPlus: _createFont(FontSizes.smallPlus, FontWeights.regular, fontFamilyWithFallback),
+    medium: _createFont(FontSizes.medium, FontWeights.regular, fontFamilyWithFallback),
+    mediumPlus: _createFont(FontSizes.mediumPlus, FontWeights.regular, fontFamilyWithFallback),
+    large: _createFont(FontSizes.large, FontWeights.semilight, semilightFontFamilyWithFallback),
+    xLarge: _createFont(FontSizes.xLarge, FontWeights.light, fontFamilyWithFallback),
+    xxLarge: _createFont(FontSizes.xxLarge, FontWeights.light, fontFamilyWithFallback),
+    superLarge: _createFont(FontSizes.superLarge, FontWeights.light, fontFamilyWithFallback),
+    mega: _createFont(FontSizes.mega, FontWeights.light, fontFamilyWithFallback)
   };
-}
 
-function _getFontFamily(language: string | null): string {
-  let fontFamily = LocalizedFontFamilies.WestEuropean;
+  return fontStyles;
+}
 
+/**
+ * If there is a localized font for this language, return that. Returns undefined if there is no localized font for that language.
+ */
+function _getLocalizedFontFamily(language: string | null): string {
   for (let lang in LanguageToFontMap) {
     if (LanguageToFontMap.hasOwnProperty(lang) && language && lang.indexOf(language) === 0) {
       // tslint:disable-next-line:no-any
-      fontFamily = (LanguageToFontMap as any)[lang];
-      break;
+      return (LanguageToFontMap as any)[lang];
     }
   }
 
-  return `${fontFamily}, ${FontFamilyFallbacks}`;
+  return defaultFontFamily;
 }
 
-function _createFont(size: string, weight: IFontWeight, localeCode: string | null): IRawStyle {
+function _createFont(size: string, weight: IFontWeight, fontFamily: string): IRawStyle {
   return {
-    fontFamily: _getFontFamily(localeCode),
+    fontFamily: fontFamily,
     MozOsxFontSmoothing: 'grayscale',
     WebkitFontSmoothing: 'antialiased',
     fontSize: size,
diff --git a/packages/styling/src/styles/theme.ts b/packages/styling/src/styles/theme.ts
index ae34f0f6f1d8d..2611df309824f 100644
--- a/packages/styling/src/styles/theme.ts
+++ b/packages/styling/src/styles/theme.ts
@@ -142,6 +142,7 @@ function _makeSemanticColorsFromPalette(p: IPalette, isInverted: boolean): ISema
 
     inputBorder: p.neutralTertiary,
     inputBorderHovered: p.neutralDark,
+    inputBackground: p.white,
     inputBackgroundChecked: p.themePrimary,
     inputBackgroundCheckedHovered: p.themeDarkAlt,
     inputForegroundChecked: p.white,
@@ -170,6 +171,9 @@ function _makeSemanticColorsFromPalette(p: IPalette, isInverted: boolean): ISema
     listItemBackgroundChecked: p.neutralLight,
     listItemBackgroundCheckedHovered: p.neutralQuaternaryAlt,
 
+    link: p.themePrimary,
+    linkHovered: p.themeDarker,
+
     // Deprecated slots, fixed by _fixDeprecatedSlots()
     listTextColor: ''
   };
diff --git a/packages/styling/tslint.json b/packages/styling/tslint.json
index 621ee6ba04605..672d9eba8927e 100644
--- a/packages/styling/tslint.json
+++ b/packages/styling/tslint.json
@@ -2,5 +2,7 @@
   "extends": [
     "office-ui-fabric-react-tslint"
   ],
-  "rules": {}
+  "rules": {
+    "prefer-const": false
+  }
 }
\ No newline at end of file
diff --git a/packages/utilities/CHANGELOG.json b/packages/utilities/CHANGELOG.json
index 43df62c0fd494..df3b5f3dfd80b 100644
--- a/packages/utilities/CHANGELOG.json
+++ b/packages/utilities/CHANGELOG.json
@@ -1,6 +1,293 @@
 {
   "name": "@uifabric/utilities",
   "entries": [
+    {
+      "version": "5.18.2",
+      "tag": "@uifabric/utilities_v5.18.2",
+      "date": "Thu, 15 Mar 2018 02:42:27 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Jon Schectman <joschect@microsoft.com>",
+            "commit": "3cd823b02aadb1e66f9b6221d4d32bafbe895386",
+            "comment": "Revert focus changes"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.18.1",
+      "tag": "@uifabric/utilities_v5.18.1",
+      "date": "Tue, 13 Mar 2018 10:17:37 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Jon Schectman <joschect@microsoft.com>",
+            "commit": "298ac062041a2323afb25027867b70f12870aa8f",
+            "comment": "Customizable: Fix hoist/customizations import so it doesn't break amd"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.18.0",
+      "tag": "@uifabric/utilities_v5.18.0",
+      "date": "Mon, 12 Mar 2018 06:29:20 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Spencer Lynn <sllynn8907@gmail.com>",
+            "commit": "699fa697ae829e756108ce2b6725084d27e93f7e",
+            "comment": "Focus utility getPreviousElement did not correctly consider the tabbable argument when considering the current node. This can affect how FocusZones are processed, since only one element in a zone will have tab index set. This, in turn, affects how FocusTrapZone traps focus, since getPreviousElement is used during trapping focus."
+          },
+          {
+            "author": "erichdev <a.erich@gmail.com>",
+            "commit": "feb4db4410cdd49d5df8a50fcef138fbcd324dc2",
+            "comment": "Styled: Add display name to styled wrapper"
+          }
+        ],
+        "minor": [
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "494d1258ce23505c8e5a4d1565ff5a2451048162",
+            "comment": "added hoistStatics function for use with decorators to fix broken statics issue, and added the fuction to the customizable decorator"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.17.1",
+      "tag": "@uifabric/utilities_v5.17.1",
+      "date": "Fri, 09 Mar 2018 15:07:28 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "jspurlin <jspurlin@microsoft.com>",
+            "commit": "4fc956a30e82d90fe405def0f9434ffdb0d407ab",
+            "comment": "Focus: Update getPreviousElement to traverse a potential childMatch's parent siblings  (which was previously being skipped)"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.17.0",
+      "tag": "@uifabric/utilities_v5.17.0",
+      "date": "Fri, 09 Mar 2018 11:13:58 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Jordan Janzen <jordancjanzen@gmail.com>",
+            "commit": "b410f6b9a328dd4ad24cbaa739156c23880e44e4",
+            "comment": "Add hoistStatics function to withResponsiveMode decorator."
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.16.0",
+      "tag": "@uifabric/utilities_v5.16.0",
+      "date": "Thu, 08 Mar 2018 11:27:24 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Brian Garland <brian@efelle.com>",
+            "commit": "61c7a055825c41f828c416e5370212804f71d05c",
+            "comment": "Added hoistStatics function to @customizable decorator so static methods work properly"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.15.0",
+      "tag": "@uifabric/utilities_v5.15.0",
+      "date": "Tue, 06 Mar 2018 11:13:36 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Mark Polak <mark@thedutchies.com>",
+            "commit": "25e736fb4506e1021274c420283338e499388477",
+            "comment": "Adds createRef polyfil to prepare for object refs."
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.14.1",
+      "tag": "@uifabric/utilities_v5.14.1",
+      "date": "Tue, 06 Mar 2018 02:06:59 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "lynamemi <lynam.emily@gmail.com>",
+            "commit": "8a4dc859a5f8016b630220775caa98691ddf5345",
+            "comment": "Replaced PureComponent with Component to appease website's UHF react version."
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.14.0",
+      "tag": "@uifabric/utilities_v5.14.0",
+      "date": "Fri, 02 Mar 2018 11:25:35 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Christian Gonzalez <christianjordangonzalez@gmail.com>",
+            "commit": "77c1e54e140be51f9c7f252748bb5f868f957919",
+            "comment": "Upgrade to TypeScript 2.7.2"
+          },
+          {
+            "author": "Kelsey Young <kelseyyoung4@gmail.com>",
+            "commit": "44ca7b84a94649581e68a693971891fb1a834720",
+            "comment": "Update KeyCodes enum to include all key codes"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.12.2 <6.0.0` to `>=5.13.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.13.0",
+      "tag": "@uifabric/utilities_v5.13.0",
+      "date": "Thu, 22 Feb 2018 11:15:23 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "jspurlin <jspurlin@microsoft.com>",
+            "commit": "b0550145231d18adea954f56be47967ab04cb19d",
+            "comment": "Focus/DOM: add the ability to find if an element (or any ancestor) contains a given attribute. Also, add a shouldrWapFocus function to the focus utility (which leverages the fild element attribute just described) which returns true if the given no wrap data attribute (data-no-vertical-wrap OR data-no-horizontal-wrap) exists and is set to true"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.12.1",
+      "tag": "@uifabric/utilities_v5.12.1",
+      "date": "Wed, 21 Feb 2018 11:12:11 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "jijizz <liu_zhi8@hotmail.com>",
+            "commit": "0661239920ded0ecfce53788322b4bc5b21860e1",
+            "comment": "fix bug in IE that IE does not support Number.IsInteger"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.12.1 <6.0.0` to `>=5.12.2 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.12.0",
+      "tag": "@uifabric/utilities_v5.12.0",
+      "date": "Fri, 16 Feb 2018 11:23:29 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "John Miller <rubixws@gmail.com>",
+            "commit": "44b167af31b9b6dd079359209f101f1af10762a5",
+            "comment": "Added a triangle abstraction class"
+          }
+        ],
+        "patch": [
+          {
+            "author": "jspurlin <jspurlin@microsoft.com>",
+            "commit": "f0c4c5cfd1d20ea16af3378bf68e05269653d321",
+            "comment": "Focus: Fix getPreviousElement to correctly walk across previous siblings if a potential child match was found"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.12.0 <6.0.0` to `>=5.12.1 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.11.0",
+      "tag": "@uifabric/utilities_v5.11.0",
+      "date": "Wed, 14 Feb 2018 22:10:50 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "David Zearing <dzearing@microsoft.com>",
+            "commit": "69854e90a1bc2eb447087df89f5276c166a9d766",
+            "comment": "BaseComponent.onError default implementation removed, exceptions now simply bubble out which lets partners use React 16 error handling."
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.11.2 <6.0.0` to `>=5.12.0 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.10.3",
+      "tag": "@uifabric/utilities_v5.10.3",
+      "date": "Tue, 13 Feb 2018 11:24:05 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Jordan Janzen <jordancjanzen@gmail.com>",
+            "commit": "938be5b0904db106f39b5afdc0bd6a79a78462cd",
+            "comment": "Export IClassNames fro Utilities for creating private getClassNames methods"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.10.2",
+      "tag": "@uifabric/utilities_v5.10.2",
+      "date": "Thu, 08 Feb 2018 11:13:51 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Kristian Halle <khalle@microsoft.com>",
+            "commit": "77a0be82fb6c440fa7ec6f4e80efed7d67f007c1",
+            "comment": "Return empty initials for phone numbers"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.10.1",
+      "tag": "@uifabric/utilities_v5.10.1",
+      "date": "Wed, 07 Feb 2018 11:23:59 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Serkan Inci <serkan.inci@hotmail.com>",
+            "commit": "48700c65292e57126b95be80c3092a39c6e171d0",
+            "comment": "Fixing direct reference to @uifabric/utilities/lib from ResizeGroup"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/merge-styles\" from `>=5.11.1 <6.0.0` to `>=5.11.2 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.10.0",
+      "tag": "@uifabric/utilities_v5.10.0",
+      "date": "Mon, 05 Feb 2018 11:24:23 GMT",
+      "comments": {
+        "minor": [
+          {
+            "author": "Lambert Wang <lambert.ww@gmail.com>",
+            "commit": "fe1c0f061947e66f1a3c63b168cdfecdc282b39b",
+            "comment": "[Math] implemented precision rounding functions"
+          }
+        ]
+      }
+    },
     {
       "version": "5.9.0",
       "tag": "@uifabric/utilities_v5.9.0",
diff --git a/packages/utilities/CHANGELOG.md b/packages/utilities/CHANGELOG.md
index 3f4b42b99f7fe..ce8163fa50382 100644
--- a/packages/utilities/CHANGELOG.md
+++ b/packages/utilities/CHANGELOG.md
@@ -1,6 +1,135 @@
 # Change Log - @uifabric/utilities
 
-This log was last generated on Mon, 29 Jan 2018 11:23:40 GMT and should not be manually modified.
+This log was last generated on Thu, 15 Mar 2018 02:42:27 GMT and should not be manually modified.
+
+## 5.18.2
+Thu, 15 Mar 2018 02:42:27 GMT
+
+### Patches
+
+- Revert focus changes
+
+## 5.18.1
+Tue, 13 Mar 2018 10:17:37 GMT
+
+### Patches
+
+- Customizable: Fix hoist/customizations import so it doesn't break amd
+
+## 5.18.0
+Mon, 12 Mar 2018 06:29:20 GMT
+
+### Minor changes
+
+- added hoistStatics function for use with decorators to fix broken statics issue, and added the fuction to the customizable decorator
+
+### Patches
+
+- Focus utility getPreviousElement did not correctly consider the tabbable argument when considering the current node. This can affect how FocusZones are processed, since only one element in a zone will have tab index set. This, in turn, affects how FocusTrapZone traps focus, since getPreviousElement is used during trapping focus.
+- Styled: Add display name to styled wrapper
+
+## 5.17.1
+Fri, 09 Mar 2018 15:07:28 GMT
+
+### Patches
+
+- Focus: Update getPreviousElement to traverse a potential childMatch's parent siblings  (which was previously being skipped)
+
+## 5.17.0
+Fri, 09 Mar 2018 11:13:58 GMT
+
+### Minor changes
+
+- Add hoistStatics function to withResponsiveMode decorator.
+
+## 5.16.0
+Thu, 08 Mar 2018 11:27:24 GMT
+
+### Minor changes
+
+- Added hoistStatics function to @customizable decorator so static methods work properly
+
+## 5.15.0
+Tue, 06 Mar 2018 11:13:36 GMT
+
+### Minor changes
+
+- Adds createRef polyfil to prepare for object refs.
+
+## 5.14.1
+Tue, 06 Mar 2018 02:06:59 GMT
+
+### Patches
+
+- Replaced PureComponent with Component to appease website's UHF react version.
+
+## 5.14.0
+Fri, 02 Mar 2018 11:25:35 GMT
+
+### Minor changes
+
+- Upgrade to TypeScript 2.7.2
+- Update KeyCodes enum to include all key codes
+
+## 5.13.0
+Thu, 22 Feb 2018 11:15:23 GMT
+
+### Minor changes
+
+- Focus/DOM: add the ability to find if an element (or any ancestor) contains a given attribute. Also, add a shouldrWapFocus function to the focus utility (which leverages the fild element attribute just described) which returns true if the given no wrap data attribute (data-no-vertical-wrap OR data-no-horizontal-wrap) exists and is set to true
+
+## 5.12.1
+Wed, 21 Feb 2018 11:12:11 GMT
+
+### Patches
+
+- fix bug in IE that IE does not support Number.IsInteger
+
+## 5.12.0
+Fri, 16 Feb 2018 11:23:29 GMT
+
+### Minor changes
+
+- Added a triangle abstraction class
+
+### Patches
+
+- Focus: Fix getPreviousElement to correctly walk across previous siblings if a potential child match was found
+
+## 5.11.0
+Wed, 14 Feb 2018 22:10:50 GMT
+
+### Minor changes
+
+- BaseComponent.onError default implementation removed, exceptions now simply bubble out which lets partners use React 16 error handling.
+
+## 5.10.3
+Tue, 13 Feb 2018 11:24:05 GMT
+
+### Patches
+
+- Export IClassNames fro Utilities for creating private getClassNames methods
+
+## 5.10.2
+Thu, 08 Feb 2018 11:13:51 GMT
+
+### Patches
+
+- Return empty initials for phone numbers
+
+## 5.10.1
+Wed, 07 Feb 2018 11:23:59 GMT
+
+### Patches
+
+- Fixing direct reference to @uifabric/utilities/lib from ResizeGroup
+
+## 5.10.0
+Mon, 05 Feb 2018 11:24:23 GMT
+
+### Minor changes
+
+- [Math] implemented precision rounding functions
 
 ## 5.9.0
 Mon, 29 Jan 2018 11:23:40 GMT
diff --git a/packages/utilities/package.json b/packages/utilities/package.json
index f0afb8f04b651..2a0cc6a337bda 100644
--- a/packages/utilities/package.json
+++ b/packages/utilities/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@uifabric/utilities",
-  "version": "5.9.0",
+  "version": "5.18.2",
   "description": "Office UI Fabric utilities for building React components.",
   "main": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -36,7 +36,7 @@
   },
   "dependencies": {
     "@microsoft/load-themed-styles": "^1.7.13",
-    "@uifabric/merge-styles": ">=5.11.0 <6.0.0",
+    "@uifabric/merge-styles": ">=5.13.0 <6.0.0",
     "prop-types": "^15.5.10",
     "tslib": "^1.7.1"
   },
diff --git a/packages/utilities/src/BaseComponent.test.tsx b/packages/utilities/src/BaseComponent.test.tsx
index bed1d511f4d9f..75562ec33f226 100644
--- a/packages/utilities/src/BaseComponent.test.tsx
+++ b/packages/utilities/src/BaseComponent.test.tsx
@@ -5,68 +5,7 @@ import * as React from 'react';
 import * as ReactTestUtils from 'react-dom/test-utils';
 import { BaseComponent } from './BaseComponent';
 
-let _originalOnError = BaseComponent.onError;
-
-class TestComponent extends BaseComponent<{}, {}> {
-
-  public componentWillMount(): void {
-    this._createNullRef();
-  }
-
-  public componentDidMount(): void {
-    this._createNullRef();
-  }
-
-  public shouldComponentUpdate(nextProps?: {}, nextState?: {}): boolean {
-    this._createNullRef();
-
-    return true;
-  }
-
-  public componentWillUpdate(): void {
-    this._createNullRef();
-  }
-
-  public componentWillReceiveProps(): void {
-    this._createNullRef();
-  }
-
-  public render(): JSX.Element | null {
-    this._createNullRef();
-    return null;
-  }
-
-  public componentDidUpdate(): void {
-    this._createNullRef();
-  }
-
-  public componentWillUnmount(): void {
-    this._createNullRef();
-  }
-
-  private _createNullRef(): void {
-    // tslint:disable-next-line:no-any
-    let foo: any = null;
-
-    // Calling a null
-    foo();
-  }
-}
-
 describe('BaseComponent', () => {
-  afterEach(() => {
-    BaseComponent.onError = _originalOnError;
-  });
-
-  _buildTestFor('componentWillMount');
-  _buildTestFor('componentDidMount');
-  _buildTestFor('shouldComponentUpdate');
-  _buildTestFor('componentWillUpdate');
-  _buildTestFor('componentWillReceiveProps');
-  _buildTestFor('render');
-  _buildTestFor('componentDidUpdate');
-  _buildTestFor('componentWillUnmount');
-
   it('can resolve refs', () => {
     class Foo extends BaseComponent<{}, {}> {
       public root: HTMLElement;
@@ -84,18 +23,3 @@ describe('BaseComponent', () => {
     expect(component.root).toBeDefined();
   });
 });
-
-function _buildTestFor(methodName: string): void {
-  it(`calls the error logger on ${methodName} exception`, () => {
-    let lastErrorMessage;
-
-    BaseComponent.onError = (errorMessage: string | undefined) => lastErrorMessage = errorMessage;
-
-    let c = new TestComponent({});
-
-    // tslint:disable-next-line:no-any
-    (c as any)[methodName]();
-
-    expect(lastErrorMessage).toBeDefined();
-  });
-}
\ No newline at end of file
diff --git a/packages/utilities/src/BaseComponent.ts b/packages/utilities/src/BaseComponent.ts
index 915e2840fd549..0cfa0445e3cd0 100644
--- a/packages/utilities/src/BaseComponent.ts
+++ b/packages/utilities/src/BaseComponent.ts
@@ -21,8 +21,7 @@ export interface IBaseProps<T = any> {
  */
 export class BaseComponent<P extends IBaseProps = {}, S = {}> extends React.Component<P, S> {
   /**
-   * External consumers should override BaseComponent.onError to hook into error messages that occur from
-   * exceptions thrown from within components.
+   * @deprecated Use React's error boundaries instead.
    */
   // tslint:disable-next-line:no-any
   public static onError: ((errorMessage?: string, ex?: any) => void);
@@ -241,19 +240,11 @@ function _makeSafe(obj: BaseComponent<{}, {}>, prototype: Object, methodName: st
     (obj as any)[methodName] = function (): any {
       let retVal;
 
-      try {
-        if (prototypeMethod) {
-          retVal = prototypeMethod.apply(this, arguments);
-        }
-        if (classMethod !== prototypeMethod) {
-          retVal = classMethod.apply(this, arguments);
-        }
-      } catch (e) {
-        const errorMessage = `Exception in ${obj.className}.${methodName}(): ${typeof e === 'string' ? e : e.stack}`;
-
-        if (BaseComponent.onError) {
-          BaseComponent.onError(errorMessage, e);
-        }
+      if (prototypeMethod) {
+        retVal = prototypeMethod.apply(this, arguments);
+      }
+      if (classMethod !== prototypeMethod) {
+        retVal = classMethod.apply(this, arguments);
       }
 
       return retVal;
@@ -261,11 +252,6 @@ function _makeSafe(obj: BaseComponent<{}, {}>, prototype: Object, methodName: st
   }
 }
 
-BaseComponent.onError = (errorMessage: string) => {
-  console.error(errorMessage);
-  throw errorMessage;
-};
-
 /**
  * Simple constant function for returning null, used to render empty templates in JSX.
  *
diff --git a/packages/utilities/src/Context.tsx b/packages/utilities/src/Context.tsx
index d0361465a0a8c..f145cae8c7b56 100644
--- a/packages/utilities/src/Context.tsx
+++ b/packages/utilities/src/Context.tsx
@@ -6,7 +6,7 @@ export function provideContext<TContext, TProps>(
   contextTypes: PropTypes.ValidationMap<TContext>,
   mapPropsToContext: (props: TProps) => TContext
 ): React.ComponentType<TProps & React.Props<{}>> {
-  class Provider extends React.PureComponent<TProps> {
+  class Provider extends React.Component<TProps> {
     public static readonly childContextTypes: PropTypes.ValidationMap<TContext> = contextTypes;
 
     public getChildContext(): TContext {
diff --git a/packages/utilities/src/DelayedRender.tsx b/packages/utilities/src/DelayedRender.tsx
index cef9fa5b35bea..5d3f74d003fd3 100644
--- a/packages/utilities/src/DelayedRender.tsx
+++ b/packages/utilities/src/DelayedRender.tsx
@@ -32,7 +32,6 @@ export interface IDelayedRenderState {
  * @public
  */
 export class DelayedRender extends React.Component<IDelayedRenderProps, IDelayedRenderState> {
-  // tslint:disable-next-line:typedef
   public static defaultProps = {
     delay: 0
   };
diff --git a/packages/utilities/src/FabricPerformance.ts b/packages/utilities/src/FabricPerformance.ts
index 3fba65ed999ba..4554b63a7485c 100644
--- a/packages/utilities/src/FabricPerformance.ts
+++ b/packages/utilities/src/FabricPerformance.ts
@@ -50,7 +50,7 @@ export class FabricPerformance {
    * @param func - The logic to be measured for execution time
    */
   public static measure(name: string, func: () => void): void {
-    if (Number.isInteger(FabricPerformance._timeoutId)) {
+    if (FabricPerformance._timeoutId) {
       FabricPerformance.setPeriodicReset();
     }
     const start = now();
diff --git a/packages/utilities/src/KeyCodes.ts b/packages/utilities/src/KeyCodes.ts
index 1c84163588a27..08cbbd19d3297 100644
--- a/packages/utilities/src/KeyCodes.ts
+++ b/packages/utilities/src/KeyCodes.ts
@@ -4,22 +4,103 @@
  * @public
  */
 export const enum KeyCodes {
-  a = 65,
-  c = 67,
   backspace = 8,
-  comma = 188,
-  del = 46,
-  down = 40,
-  end = 35,
+  tab = 9,
   enter = 13,
+  shift = 16,
+  ctrl = 17,
+  alt = 18,
+  pauseBreak = 19,
+  capslock = 20,
   escape = 27,
+  space = 32,
+  pageUp = 33,
+  pageDown = 34,
+  end = 35,
   home = 36,
   left = 37,
-  pageDown = 34,
-  pageUp = 33,
+  up = 38,
   right = 39,
+  down = 40,
+  insert = 45,
+  del = 46,
+  zero = 48,
+  one = 49,
+  two = 50,
+  three = 51,
+  four = 52,
+  five = 53,
+  six = 54,
+  seven = 55,
+  eight = 56,
+  nine = 57,
+  a = 65,
+  b = 66,
+  c = 67,
+  d = 68,
+  e = 69,
+  f = 70,
+  g = 71,
+  h = 72,
+  i = 73,
+  j = 74,
+  k = 75,
+  l = 76,
+  m = 77,
+  n = 78,
+  o = 79,
+  p = 80,
+  q = 81,
+  r = 82,
+  s = 83,
+  t = 84,
+  u = 85,
+  v = 86,
+  w = 87,
+  x = 88,
+  y = 89,
+  z = 90,
+  leftWindow = 91,
+  rightWindow = 92,
+  select = 93,
+  zero_numpad = 96,
+  one_numpad = 97,
+  two_numpad = 98,
+  three_numpad = 99,
+  four_numpad = 100,
+  five_numpad = 101,
+  six_numpad = 102,
+  seven_numpad = 103,
+  eight_numpad = 104,
+  nine_numpad = 105,
+  multiply = 106,
+  add = 107,
+  subtract = 109,
+  decimalPoint = 110,
+  divide = 111,
+  f1 = 112,
+  f2 = 113,
+  f3 = 114,
+  f4 = 115,
+  f5 = 116,
+  f6 = 117,
+  f7 = 118,
+  f8 = 119,
+  f9 = 120,
+  f10 = 121,
+  f11 = 122,
+  f12 = 123,
+  numlock = 144,
+  scrollLock = 145,
   semicolon = 186,
-  space = 32,
-  tab = 9,
-  up = 38
+  equalSign = 187,
+  comma = 188,
+  dash = 189,
+  period = 190,
+  forwardSlash = 191,
+  graveAccent = 192,
+  openBracket = 219,
+  backSlash = 220,
+  closeBracket = 221,
+  singleQuote = 222
 }
\ No newline at end of file
diff --git a/packages/utilities/src/classNamesFunction.ts b/packages/utilities/src/classNamesFunction.ts
index e77a42777208e..a973855d255d5 100644
--- a/packages/utilities/src/classNamesFunction.ts
+++ b/packages/utilities/src/classNamesFunction.ts
@@ -1,4 +1,4 @@
-import { mergeStyleSets } from '@uifabric/merge-styles/lib/index';
+import { mergeStyleSets, IStyle } from '@uifabric/merge-styles/lib/index';
 import { IClassNames } from './IClassNames';
 import { IStyleFunction } from './IStyleFunction';
 
@@ -6,7 +6,7 @@ import { IStyleFunction } from './IStyleFunction';
  * Creates a getClassNames function which calls getStyles given the props, and injects them
  * into mergeStyleSets.
  */
-export function classNamesFunction<TStyleProps extends {}, TStyles extends {}>(): (
+export function classNamesFunction<TStyleProps extends {}, TStyles extends {[P in keyof TStyles]: IStyle}>(): (
   getStyles?: IStyleFunction<TStyleProps, TStyles>,
   styleProps?: TStyleProps
 ) => IClassNames<TStyles> {
diff --git a/packages/utilities/src/createRef.test.ts b/packages/utilities/src/createRef.test.ts
new file mode 100644
index 0000000000000..ba1c9130c8b44
--- /dev/null
+++ b/packages/utilities/src/createRef.test.ts
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { createRef } from './createRef';
+
+describe('createRef', () => {
+  it('to have a value prop that is null on creation', () => {
+    expect(createRef().value).toEqual(null);
+  });
+
+  it('when called with ReactElement it sets the value to the passed component', () => {
+    const component = React.createElement('span');
+    const refObject = createRef<React.ReactElement<{}>>();
+
+    refObject(component);
+
+    expect(refObject.value).toBe(component);
+  });
+
+  it('when called with HTMLElement it sets the value to the passed element', () => {
+    const component = document.createElement('span');
+    const refObject = createRef();
+
+    refObject(component);
+
+    expect(refObject.value).toBe(component);
+  });
+});
diff --git a/packages/utilities/src/createRef.ts b/packages/utilities/src/createRef.ts
new file mode 100644
index 0000000000000..0f145b9ed9439
--- /dev/null
+++ b/packages/utilities/src/createRef.ts
@@ -0,0 +1,13 @@
+export type RefObject<T> = {
+  (component: T): void;
+  value: T | null;
+};
+
+export function createRef<T>(): RefObject<T> {
+  const refObject = ((element: T | null): void => {
+    refObject.value = element;
+  }) as RefObject<T>;
+  refObject.value = null;
+
+  return refObject;
+}
\ No newline at end of file
diff --git a/packages/utilities/src/customizable.tsx b/packages/utilities/src/customizable.tsx
index 962bde6e14252..a4a036b8e178a 100644
--- a/packages/utilities/src/customizable.tsx
+++ b/packages/utilities/src/customizable.tsx
@@ -1,6 +1,11 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { Customizations } from './Customizations';
+import {
+  Customizations,
+} from './Customizations';
+import {
+  hoistStatics
+} from './hoistStatics';
 
 export function customizable(
   scope: string,
@@ -14,14 +19,14 @@ export function customizable(
     ComposedComponent: (new (props: P, ...args: any[]) => React.Component<P, S>)
     // tslint:disable-next-line:no-any
   ): any {
-    return class ComponentWithInjectedProps extends React.Component<P, {}> {
+    const resultClass = class ComponentWithInjectedProps extends React.Component<P, {}> {
       public static displayName: string = 'Customized' + scope;
 
       public static contextTypes: {
         customizations: PropTypes.Requireable<{}>;
       } = {
-        customizations: PropTypes.object
-      };
+          customizations: PropTypes.object
+        };
 
       // tslint:disable-next-line:no-any
       constructor(props: P, context: any) {
@@ -52,5 +57,7 @@ export function customizable(
       }
 
     };
+
+    return hoistStatics(ComposedComponent, resultClass);
   };
 }
diff --git a/packages/utilities/src/dom.ts b/packages/utilities/src/dom.ts
index a4ead03438601..b1091c89562e5 100644
--- a/packages/utilities/src/dom.ts
+++ b/packages/utilities/src/dom.ts
@@ -151,7 +151,7 @@ export function setSSR(isEnabled: boolean): void {
  *
  * @public
  */
-export function getWindow(rootElement?: HTMLElement): Window | undefined {
+export function getWindow(rootElement?: Element): Window | undefined {
   if (_isSSR || typeof window === 'undefined') {
     return undefined;
   } else {
@@ -204,6 +204,31 @@ export function getRect(element: HTMLElement | Window | null): IRectangle | unde
   return rect;
 }
 
+/**
+ * Finds the first parent element where the matchFunction returns true
+ * @param element element to start searching at
+ * @param matchFunction the function that determines if the element is a match
+ * @returns the matched element or null no match was found
+ */
+export function findElementRecursive(element: HTMLElement | null, matchFunction: (element: HTMLElement) => boolean): HTMLElement | null {
+  if (!element || element === document.body) {
+    return null;
+  }
+
+  return matchFunction(element) ? element : findElementRecursive(getParent(element), matchFunction);
+}
+
+/**
+ * Determines if an element, or any of its ancestors, contian the given attribute
+ * @param element - element to start searching at
+ * @param attribute - the attribute to search for
+ * @returns the value of the first instance found
+ */
+export function elementContainsAttribute(element: HTMLElement, attribute: string): string | null {
+  let elementMatch = findElementRecursive(element, (testElement: HTMLElement) => testElement.hasAttribute(attribute));
+  return elementMatch && elementMatch.getAttribute(attribute);
+}
+
 /**
  * Determines whether or not an element has the virtual hierarchy extension.
  *
diff --git a/packages/utilities/src/focus.ts b/packages/utilities/src/focus.ts
index 984e3a3562d56..c2dc853c6932c 100644
--- a/packages/utilities/src/focus.ts
+++ b/packages/utilities/src/focus.ts
@@ -1,6 +1,6 @@
 /* tslint:disable:no-string-literal */
 
-import { elementContains, getDocument } from './dom';
+import { elementContains, getDocument, elementContainsAttribute } from './dom';
 
 const IS_FOCUSABLE_ATTRIBUTE = 'data-is-focusable';
 const IS_VISIBLE_ATTRIBUTE = 'data-is-visible';
@@ -99,8 +99,49 @@ export function getPreviousElement(
       allowFocusRoot,
       tabbable);
 
-    if (childMatch && ((tabbable && (isElementTabbable(childMatch, true))) || !tabbable)) {
-      return childMatch;
+    if (childMatch) {
+      if ((tabbable && (isElementTabbable(childMatch, true))) || !tabbable) {
+        return childMatch;
+      }
+
+      const childMatchSiblingMatch = getPreviousElement(
+        rootElement,
+        childMatch.previousElementSibling as HTMLElement,
+        true,
+        true,
+        true,
+        includeElementsInFocusZones,
+        allowFocusRoot,
+        tabbable
+      );
+      if (childMatchSiblingMatch) {
+        return childMatchSiblingMatch;
+      }
+
+      let childMatchParent = childMatch.parentElement;
+
+      // At this point if we have not found any potential matches
+      // start looking at the rest of the subtree under the currentParent.
+      // NOTE: We do not want to recurse here because doing so could
+      // cause elements to get skipped.
+      while (childMatchParent && childMatchParent !== currentElement) {
+        const childMatchParentMatch = getPreviousElement(
+          rootElement,
+          childMatchParent.previousElementSibling as HTMLElement,
+          true,
+          true,
+          true,
+          includeElementsInFocusZones,
+          allowFocusRoot,
+          tabbable
+        );
+
+        if (childMatchParentMatch) {
+          return childMatchParentMatch;
+        }
+
+        childMatchParent = childMatchParent.parentElement;
+      }
     }
   }
 
@@ -299,3 +340,14 @@ export function doesElementContainFocus(element: HTMLElement): boolean {
   }
   return false;
 }
+
+/**
+ * Determines if an, or any of its ancestors, sepcificies that it doesn't want focus to wrap
+ * @param element - element to start searching from
+ * @param noWrapDataAttribute - the no wrap data attribute to match (either)
+ * @returns true if focus should wrap, false otherwise
+ */
+export function shouldWrapFocus(element: HTMLElement, noWrapDataAttribute: 'data-no-vertical-wrap' | 'data-no-horizontal-wrap'): boolean {
+
+  return elementContainsAttribute(element, noWrapDataAttribute) === 'true' ? false : true;
+}
diff --git a/packages/utilities/src/hoistStatics.ts b/packages/utilities/src/hoistStatics.ts
new file mode 100644
index 0000000000000..42b5d3ada01d8
--- /dev/null
+++ b/packages/utilities/src/hoistStatics.ts
@@ -0,0 +1,21 @@
+/**
+ * Allows you to hoist static functions in components.
+ * Created for the purpose of fixing broken static functions in classes
+ * that utilize decorators.
+ *
+ * @public
+ * @param source - The object where the methods are hoisted from.
+ * @param dest - The object to hoist the methods onto.
+ * @returns The dest object with methods added
+ */
+
+export function hoistStatics<TSource, TDest>(source: TSource, dest: TDest): TDest {
+  for (const name in source) {
+    if (source.hasOwnProperty(name)) {
+      // tslint:disable-next-line:no-any
+      (dest as any)[name] = source[name];
+    }
+  }
+
+  return dest;
+}
\ No newline at end of file
diff --git a/packages/utilities/src/index.ts b/packages/utilities/src/index.ts
index 0a81bde68bc5d..f4df49c0063b7 100644
--- a/packages/utilities/src/index.ts
+++ b/packages/utilities/src/index.ts
@@ -1,12 +1,14 @@
 export * from './Async';
 export * from './AutoScroll';
 export * from './BaseComponent';
+export * from './Context';
 export * from './Customizations';
 export * from './Customizer';
 export * from './DelayedRender';
 export * from './EventGroup';
 export * from './FabricPerformance';
 export * from './GlobalSettings';
+export * from './IClassNames';
 export * from './IDisposable';
 export * from './IPoint';
 export * from './IRectangle';
@@ -24,6 +26,7 @@ export * from './customizable';
 export * from './dom';
 export * from './focus';
 export * from './hoist';
+export * from './hoistStatics';
 export * from './initials';
 export * from './language';
 export * from './math';
@@ -37,3 +40,4 @@ export * from './scroll';
 export * from './string';
 export * from './styled';
 export * from './warn';
+export * from './createRef';
\ No newline at end of file
diff --git a/packages/utilities/src/initials.test.ts b/packages/utilities/src/initials.test.ts
index 9d76d15b22e14..9a5a6e3f1580f 100644
--- a/packages/utilities/src/initials.test.ts
+++ b/packages/utilities/src/initials.test.ts
@@ -28,8 +28,8 @@ describe('getInitials', () => {
   });
 
   it('calculates an expected initials in LTR with numbers', () => {
-    let result = getInitials('4lex 4loo', false);
-    expect(result).toEqual('44');
+    let result = getInitials('4lex 5loo', false);
+    expect(result).toEqual('45');
   });
 
   it('calculates an expected initials in LTR with parentheses', () => {
@@ -99,4 +99,32 @@ describe('getInitials', () => {
     expect(result).toEqual('');
   });
 
+  it('calculates expected initials for phone numbers', () => {
+    let result = getInitials('12345678', false);
+    expect(result).toEqual('');
+
+    result = getInitials('+1 (555) 123-4567 ext.4567', false);
+    expect(result).toEqual('');
+
+    result = getInitials('+47 12 34 56 78 (X 5678)', false);
+    expect(result).toEqual('');
+
+    result = getInitials('1 Ext 2', false);
+    expect(result).toEqual('');
+
+    result = getInitials('James Ext 2', false);
+    expect(result).toEqual('J2');
+
+    result = getInitials('1x1', false);
+    expect(result).toEqual('');
+
+    result = getInitials('1y1', false);
+    expect(result).toEqual('1');
+
+    result = getInitials('1', false);
+    expect(result).toEqual('1');
+
+    result = getInitials('A 2', false);
+    expect(result).toEqual('A2');
+  });
 });
diff --git a/packages/utilities/src/initials.ts b/packages/utilities/src/initials.ts
index f85a2704637ea..387495adf4482 100644
--- a/packages/utilities/src/initials.ts
+++ b/packages/utilities/src/initials.ts
@@ -5,6 +5,12 @@
  */
 const UNWANTED_CHARS_REGEX: RegExp = /\([^)]*\)|[\0-\u001F\!-/:-@\[-`\{-\u00BF\u0250-\u036F\uD800-\uFFFF]/g;
 
+/**
+ * Regular expression matching phone numbers. Applied after chars matching UNWANTED_CHARS_REGEX have been removed
+ * and number has been trimmed for whitespaces
+ */
+const PHONENUMBER_REGEX: RegExp = /^\d+[\d\s]*(:?ext|x|)\s*\d+$/i;
+
 /** Regular expression matching one or more spaces. */
 const MULTIPLE_WHITESPACES_REGEX: RegExp = /\s+/g;
 
@@ -61,7 +67,8 @@ export function getInitials(displayName: string | undefined | null, isRtl: boole
 
   displayName = cleanupDisplayName(displayName);
 
-  if (UNSUPPORTED_TEXT_REGEX.test(displayName)) {
+  // For names containing CJK characters, and phone numbers, we don't display initials
+  if (UNSUPPORTED_TEXT_REGEX.test(displayName) || PHONENUMBER_REGEX.test(displayName)) {
     return '';
   }
 
diff --git a/packages/utilities/src/math.test.ts b/packages/utilities/src/math.test.ts
index a3a8f0b705682..63256b6f6b028 100644
--- a/packages/utilities/src/math.test.ts
+++ b/packages/utilities/src/math.test.ts
@@ -1,4 +1,8 @@
-import { fitContentToBounds } from './math';
+import {
+  fitContentToBounds,
+  calculatePrecision,
+  precisionRound
+} from './math';
 
 describe('math', () => {
   describe('#fitContentToBounds', () => {
@@ -144,4 +148,46 @@ describe('math', () => {
       });
     });
   });
+
+  describe('#calculatePrecision', () => {
+    it('caluclatePrecision should work as intended', () => {
+      expect(calculatePrecision(0)).toEqual(0);
+      expect(calculatePrecision(1)).toEqual(0);
+      expect(calculatePrecision('1')).toEqual(0);
+
+      expect(calculatePrecision(200)).toEqual(-2);
+      expect(calculatePrecision(32100012300000)).toEqual(-5);
+
+      expect(calculatePrecision(231.00)).toEqual(0);
+      expect(calculatePrecision('231.00')).toEqual(2);
+      expect(calculatePrecision(321.00002)).toEqual(5);
+      expect(calculatePrecision('321.00002')).toEqual(5);
+
+      expect(calculatePrecision(.002)).toEqual(3);
+      expect(calculatePrecision('.002')).toEqual(3);
+    });
+  });
+
+  describe('#precisionRound', () => {
+    it('precisionRound should work as intended', () => {
+      expect(precisionRound(1234, 0)).toEqual(1234);
+      expect(precisionRound(1234, -1)).toEqual(1230);
+      expect(precisionRound(1234, -3)).toEqual(1000);
+
+      expect(precisionRound(1234.5678, 0)).toEqual(1235);
+      expect(precisionRound(1234.5678, 1)).toEqual(1234.6);
+      expect(precisionRound(1234.5678, 5)).toEqual(1234.5678);
+
+      expect(precisionRound(1234.555, 2)).toEqual(1234.56);
+      expect(precisionRound(1234.554, 2)).toEqual(1234.55);
+      expect(precisionRound(1250, -2)).toEqual(1300);
+      expect(precisionRound(1249, -2)).toEqual(1200);
+
+      // Different bases
+      expect(precisionRound(1234.5, -2, 2)).toEqual(1236);
+      expect(precisionRound(1234.5, -2, 16)).toEqual(1280);
+      expect(precisionRound(1234.5, -2, 8)).toEqual(1216);
+      expect(precisionRound(1234.5, -2, 7)).toEqual(1225);
+    });
+  });
 });
diff --git a/packages/utilities/src/math.ts b/packages/utilities/src/math.ts
index 2eae208b5490e..c1288a4828075 100644
--- a/packages/utilities/src/math.ts
+++ b/packages/utilities/src/math.ts
@@ -93,3 +93,40 @@ export function fitContentToBounds(options: IFitContentToBoundsOptions): ISize {
     height: contentSize.height * finalScale
   };
 }
+
+/**
+ * Calculates a number's precision based on the number of trailing
+ * zeros if the number does not have a decimal indicated by a negative
+ * precision. Otherwise, it calculates the number of digits after
+ * the decimal point indicated by a positive precision.
+ * @param value
+ */
+export function calculatePrecision(value: number | string): number {
+  /**
+   * Group 1:
+   * [1-9]([0]+$) matches trailing zeros
+   * Group 2:
+   * \.([0-9]*) matches all digits after a decimal point.
+   */
+  const groups = /[1-9]([0]+$)|\.([0-9]*)/.exec(String(value));
+  if (!groups) {
+    return 0;
+  }
+  if (groups[1]) {
+    return -groups[1].length;
+  }
+  if (groups[2]) {
+    return groups[2].length;
+  }
+  return 0;
+}
+
+/**
+ * Rounds a number to a certain level of precision. Accepts negative precision.
+ * @param value The value that is being rounded.
+ * @param precision The number of decimal places to round the number to
+ */
+export function precisionRound(value: number, precision: number, base: number = 10): number {
+  const exp = Math.pow(base, precision);
+  return Math.round(value * exp) / exp;
+}
diff --git a/packages/utilities/src/rtl.ts b/packages/utilities/src/rtl.ts
index feffb62defd0a..e549957da406e 100644
--- a/packages/utilities/src/rtl.ts
+++ b/packages/utilities/src/rtl.ts
@@ -1,6 +1,7 @@
 import { KeyCodes } from './KeyCodes';
 import { getDocument } from './dom';
 import { getItem, setItem } from './sessionStorage';
+import { setRTL as mergeStylesSetRTL } from '@uifabric/merge-styles/lib/transforms/rtlifyRules';
 
 const RTL_LOCAL_STORAGE_KEY = 'isRTL';
 
@@ -22,6 +23,7 @@ export function getRTL(): boolean {
     let doc = getDocument();
     if (_isRTL === undefined && doc) {
       _isRTL = doc.documentElement.getAttribute('dir') === 'rtl';
+      mergeStylesSetRTL(_isRTL);
     }
   }
 
@@ -42,6 +44,7 @@ export function setRTL(isRTL: boolean, persistSetting: boolean = false): void {
   }
 
   _isRTL = isRTL;
+  mergeStylesSetRTL(_isRTL);
 }
 
 /**
diff --git a/packages/utilities/src/styled.tsx b/packages/utilities/src/styled.tsx
index ea65583e4cedc..db5e525ee0061 100644
--- a/packages/utilities/src/styled.tsx
+++ b/packages/utilities/src/styled.tsx
@@ -9,6 +9,11 @@ export interface IPropsWithStyles<TStyleProps, TStyles> {
   };
 }
 
+interface IWrappedComponent<P> {
+  (props: P): JSX.Element;
+  displayName: string;
+}
+
 /**
  * The styled HOC wrapper allows you to create a functional wrapper around a given component which will resolve
  * getStyles functional props, and mix customized props passed in using concatStyleSets. Example:
@@ -29,7 +34,7 @@ export function styled<TComponentProps extends IPropsWithStyles<TStyleProps, TSt
   getProps?: (props: TComponentProps) => Partial<TComponentProps>
 ): (props: TComponentProps) => JSX.Element {
 
-  return (componentProps: TComponentProps) => {
+  const Wrapped = ((componentProps: TComponentProps) => {
     const getStyles = (
       styleProps: TStyleProps
     ) => concatStyleSets(
@@ -45,5 +50,8 @@ export function styled<TComponentProps extends IPropsWithStyles<TStyleProps, TSt
         getStyles={ getStyles }
       />
     );
-  };
+  }) as IWrappedComponent<TComponentProps>;
+
+  Wrapped.displayName = `Styled${Component.displayName || Component.name}`;
+  return Wrapped;
 }
diff --git a/packages/utilities/tslint.json b/packages/utilities/tslint.json
index 621ee6ba04605..672d9eba8927e 100644
--- a/packages/utilities/tslint.json
+++ b/packages/utilities/tslint.json
@@ -2,5 +2,7 @@
   "extends": [
     "office-ui-fabric-react-tslint"
   ],
-  "rules": {}
+  "rules": {
+    "prefer-const": false
+  }
 }
\ No newline at end of file
diff --git a/packages/variants/.npmignore b/packages/variants/.npmignore
new file mode 100644
index 0000000000000..b632939d809a6
--- /dev/null
+++ b/packages/variants/.npmignore
@@ -0,0 +1,22 @@
+*.config.js
+*.nuspec
+*.yml
+*.test.*
+.editorconfig
+.gitattributes
+.gitignore
+.vscode
+coverage
+dist/*.stats.html
+dist/demo*.*
+gulpfile.js
+index.html
+jsconfig.json
+karma.config.js
+node_modules
+src
+tsconfig.json
+tsd.json
+tslint.json
+typings
+webpack.config.js
diff --git a/packages/variants/.npmrc b/packages/variants/.npmrc
new file mode 100644
index 0000000000000..825c83e09df4d
--- /dev/null
+++ b/packages/variants/.npmrc
@@ -0,0 +1,2 @@
+registry=https://registry.npmjs.org/
+
diff --git a/packages/variants/CHANGELOG.json b/packages/variants/CHANGELOG.json
new file mode 100644
index 0000000000000..4cdd64ec5aad8
--- /dev/null
+++ b/packages/variants/CHANGELOG.json
@@ -0,0 +1,55 @@
+{
+  "name": "@uifabric/variants",
+  "entries": [
+    {
+      "version": "5.0.2",
+      "tag": "@uifabric/variants_v5.0.2",
+      "date": "Wed, 14 Mar 2018 10:28:26 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Philip Kuo <phkuo@microsoft.com>",
+            "commit": "20d3b5f8cadc5051a1a002d2af6e90d015aa2191",
+            "comment": "add a usage example to the readme"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.0.1",
+      "tag": "@uifabric/variants_v5.0.1",
+      "date": "Mon, 12 Mar 2018 06:29:20 GMT",
+      "comments": {
+        "patch": [
+          {
+            "author": "Philip Kuo <phkuo@microsoft.com>",
+            "commit": "bc0d12b6c5952b22f079e9e09ec31654726f9a37",
+            "comment": "fix version for variants package"
+          },
+          {
+            "author": "Philip Kuo <phkuo@microsoft.com>",
+            "commit": "9076096e7fc955b21ea01665d2b513034ac3c651",
+            "comment": "update readme"
+          }
+        ],
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/styling\" from `>=5.19.0 <6.0.0` to `>=5.19.1 <6.0.0`"
+          }
+        ]
+      }
+    },
+    {
+      "version": "5.11.2",
+      "tag": "@uifabric/variants_v5.11.2",
+      "date": "Fri, 23 Feb 2018 03:05:53 GMT",
+      "comments": {
+        "dependency": [
+          {
+            "comment": "Updating dependency \"@uifabric/styling\" from `>=5.17.0 <6.0.0` to `>=5.19.0 <6.0.0`"
+          }
+        ]
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/packages/variants/CHANGELOG.md b/packages/variants/CHANGELOG.md
new file mode 100644
index 0000000000000..d6d478b04032e
--- /dev/null
+++ b/packages/variants/CHANGELOG.md
@@ -0,0 +1,24 @@
+# Change Log - @uifabric/variants
+
+This log was last generated on Wed, 14 Mar 2018 10:28:26 GMT and should not be manually modified.
+
+## 5.0.2
+Wed, 14 Mar 2018 10:28:26 GMT
+
+### Patches
+
+- add a usage example to the readme
+
+## 5.0.1
+Mon, 12 Mar 2018 06:29:20 GMT
+
+### Patches
+
+- fix version for variants package
+- update readme
+
+## 5.11.2
+Fri, 23 Feb 2018 03:05:53 GMT
+
+*Initial release*
+
diff --git a/packages/variants/LICENSE b/packages/variants/LICENSE
new file mode 100644
index 0000000000000..df603c06ed23c
--- /dev/null
+++ b/packages/variants/LICENSE
@@ -0,0 +1,15 @@
+Office UI Fabric React - variants
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Office UI Fabric is subject to the terms listed at http://aka.ms/fabric-assets-license
\ No newline at end of file
diff --git a/packages/variants/README.md b/packages/variants/README.md
new file mode 100644
index 0000000000000..c9f76c4e3d4bb
--- /dev/null
+++ b/packages/variants/README.md
@@ -0,0 +1,26 @@
+# [variants](http://dev.office.com/fabric)
+
+Variants are [themes](https://github.com/OfficeDev/office-ui-fabric-react/blob/master/ghdocs/Theming.md) generated from an existing theme, as opposed to [from raw colors](https://developer.microsoft.com/en-us/fabric#/styles/themegenerator). A variant will share the same colors as the original theme it was generated from, but will use those colors differently. For example, the background color and text color might be swapped. Variants can be used to highlight or de-emphasize portions of the page.
+
+Example of normal, soft, and strong variants:
+
+![example of variants](https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/variants/example.png)
+
+This project provides helper functions to create variants of a given theme, which can be used with the [Customizer](https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/utilities/src/Customizer.tsx) component to theme a specific portion of the page. Each function takes in an [IPartialTheme](https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/styling/src/interfaces/ITheme.ts) and returns an [ITheme](https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/styling/src/interfaces/ITheme.ts).
+
+The following example uses [getTheme()](https://github.com/OfficeDev/office-ui-fabric-react/blob/master/packages/styling/src/styles/theme.ts) to grab the current global theme, then creates a strong variant of the that theme, and applies that strong variant to the components wrapped by Customizer.
+
+```
+<Customizer settings={ { theme: getStrongVariant(getTheme()) } }>
+  <components... />
+</Customizer>
+```
+
+The available variants are:
+
+* ``` getNeutralVariant(theme: IPartialTheme): ITheme ```
+  * Neutral - a soft neutral color is used as the background (light gray in the default theme), most other colors are changed very little or not at all
+* ``` getSoftVariant(theme: IPartialTheme): ITheme ```
+  * Soft - a soft shade of the primary color is used as the background (light blue in the default theme), most other colors are changed very little or not at all, but input controls look different
+* ``` getStrongVariant(theme: IPartialTheme): ITheme ```
+  * Strong - a strong shade of the primary color is used as the background (blue in the default theme), almost all colors are changed
diff --git a/packages/variants/example.png b/packages/variants/example.png
new file mode 100644
index 0000000000000..6ddd3f0c6297b
Binary files /dev/null and b/packages/variants/example.png differ
diff --git a/packages/variants/jest.config.js b/packages/variants/jest.config.js
new file mode 100644
index 0000000000000..a92c71220a900
--- /dev/null
+++ b/packages/variants/jest.config.js
@@ -0,0 +1,3 @@
+let { createConfig } = require('../../scripts/tasks/jest-resources');
+
+module.exports = createConfig();
diff --git a/packages/variants/package.json b/packages/variants/package.json
new file mode 100644
index 0000000000000..036fd326e0a1b
--- /dev/null
+++ b/packages/variants/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "@uifabric/variants",
+  "version": "5.0.2",
+  "description": "Office UI Fabric subtheme generator.",
+  "main": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/OfficeDev/office-ui-fabric-react"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "node ../../scripts/build.js",
+    "clean": "node ../../scripts/clean.js",
+    "start-test": "node ../../scripts/start-test.js"
+  },
+  "disabledTasks": [
+    "copy",
+    "sass",
+    "karma"
+  ],
+  "devDependencies": {
+    "@types/jest": "21.1.8",
+    "office-ui-fabric-react-tslint": ">=5.0.0 <6.0.0"
+  },
+  "dependencies": {
+    "tslib": "^1.7.1",
+    "@uifabric/styling": ">=5.19.1 <6.0.0"
+  }
+}
\ No newline at end of file
diff --git a/packages/variants/src/index.ts b/packages/variants/src/index.ts
new file mode 100644
index 0000000000000..be17c8aeb847a
--- /dev/null
+++ b/packages/variants/src/index.ts
@@ -0,0 +1,4 @@
+export {
+  getSoftVariant,
+  getStrongVariant
+} from './variants';
diff --git a/packages/variants/src/variants.ts b/packages/variants/src/variants.ts
new file mode 100644
index 0000000000000..a645fdcbcee64
--- /dev/null
+++ b/packages/variants/src/variants.ts
@@ -0,0 +1,139 @@
+import {
+  IPalette,
+  ISemanticColors,
+  ITheme,
+  IPartialTheme
+} from '@uifabric/styling';
+import { createTheme } from '@uifabric/styling';
+
+/* Variants
+ * Variants are themes based off the current theme.
+ * Each variant is a subset of the current theme, rearranging slots to create a theme of a different style.
+ * Variants are meant to be applied to sections of a page, not the entire page.
+ * They can be used to highlight or de-emphasize sections of a page.
+ *
+ * Variants are still under development.
+ */
+
+/**
+ * A variant where the background a softer version of the primary color. Most other colors remain unchanged.
+ *
+ * @export
+ * @param {IPartialTheme} theme the theme for which to build a variant for
+ * @returns {ITheme} the variant theme
+ */
+export function getSoftVariant(theme: IPartialTheme): ITheme {
+  const fullTheme = createTheme(theme);
+  const p = fullTheme.palette;
+
+  // commented lines are unchanged, but left in for tracking purposes
+  // in a tint variant, most colors remain unchanged
+  const partialPalette: Partial<IPalette> = {
+    // theme
+    // themeDarker: '#004578',
+    // themeDark: '#005a9e',
+    // themeDarkAlt: '#106ebe',
+    // themePrimary: '#0078d7',
+    // themeSecondary: '#2b88d8',
+    // themeTertiary: '#71afe5',
+    // themeLight: '#c7e0f4',
+    // themeLighter: '#deecf9',
+    // themeLighterAlt: '#eff6fc',
+
+    // foregrounds
+    // black: '#000000',
+    // neutralDark: '#212121',
+    // neutralPrimary: '#333333',
+    // neutralPrimaryAlt: '#3c3c3c',
+    // neutralSecondary: '#666666',
+    // neutralTertiary: '#a6a6a6',
+
+    // backgrounds
+    // neutralTertiaryAlt: '#c8c8c8', // themeLighter?
+    // neutralQuaternary: '#d0d0d0',
+    // neutralQuaternaryAlt: '#dadada',
+    // neutralLight: '#eaeaea',
+    // neutralLighter: '#f4f4f4',
+    // neutralLighterAlt: '#f8f8f8',
+    white: p.themeLighterAlt
+  };
+
+  const partialSemantic: Partial<ISemanticColors> = {
+    bodyBackground: p.themeLighterAlt,
+
+    inputBorder: p.themeLighter,
+    // inputBorderHovered: p.neutralPrimary,
+    inputBackground: p.themeLighter,
+    // inputBackgroundChecked: p.themePrimary,
+    // inputBackgroundCheckedHovered: p.themeDarkAlt,
+    inputForegroundChecked: p.themeLighterAlt,
+    // inputFocusBorderAlt: p.themePrimary,
+  };
+
+  return createTheme({ ...theme, ...{ palette: partialPalette, semanticColors: partialSemantic } });
+}
+
+/**
+ * A variant where the background is a strong version of the primary color. All colors change.
+ * The background becomes shades of the primary color.
+ * The foreground/text becomes shades of the background color.
+ * The primary color becomes shades of the background.
+ *
+ * @export
+ * @param {IPartialTheme} theme the theme for which to build a variant for
+ * @returns {ITheme} the variant theme
+ */
+export function getStrongVariant(theme: IPartialTheme): ITheme {
+  const fullTheme = createTheme(theme);
+  const p = fullTheme.palette;
+
+  // dirty algorithm:
+  // in a tricolor theme, foreground doesn't get used?
+  // theme colors -> background shades
+  // foregrounds -> background shades
+  // backgrounds -> theme colors
+  const partialPalette: Partial<IPalette> = {
+    // theme
+    themeDarker: p.white,
+    themeDark: p.neutralLighterAlt,
+    themeDarkAlt: p.neutralLighterAlt,
+    themePrimary: p.white,
+    themeSecondary: p.neutralLighter,
+    themeTertiary: p.neutralLight,
+    themeLight: p.neutralQuaternaryAlt,
+    themeLighter: p.neutralQuaternary,
+    themeLighterAlt: p.neutralTertiaryAlt,
+
+    // foregrounds
+    black: p.neutralLighterAlt,
+    neutralDark: p.neutralLighter,
+    neutralPrimary: p.white,
+    neutralPrimaryAlt: p.neutralLight,
+    neutralSecondary: p.neutralQuaternaryAlt,
+    neutralTertiary: p.neutralQuaternary,
+
+    // backgrounds
+    neutralTertiaryAlt: p.themeLighterAlt,
+    neutralQuaternary: p.themeLighter,
+    neutralQuaternaryAlt: p.themeLight,
+    neutralLight: p.themeTertiary,
+    neutralLighter: p.themeSecondary,
+    neutralLighterAlt: p.themePrimary,
+    white: p.themeDarkAlt
+  };
+
+  const partialSemantic: Partial<ISemanticColors> = {
+    bodyBackground: p.themeDarkAlt,
+    bodyText: p.white,
+
+    inputBorder: p.themeDark,
+    // inputBorderHovered: p.neutralPrimary,
+    inputBackground: p.themeDark,
+    inputBackgroundChecked: p.white,
+    // inputBackgroundCheckedHovered: p.themeDarkAlt,
+    inputForegroundChecked: p.themeDark,
+    // inputFocusBorderAlt: p.themePrimary,
+  };
+
+  return createTheme({ ...theme, ...{ palette: partialPalette, semanticColors: partialSemantic } });
+}
\ No newline at end of file
diff --git a/packages/variants/tsconfig.json b/packages/variants/tsconfig.json
new file mode 100644
index 0000000000000..93c5fccb2af87
--- /dev/null
+++ b/packages/variants/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "outDir": "lib",
+    "module": "commonjs",
+    "lib": [
+      "es2017",
+      "dom"
+    ],
+    "jsx": "react",
+    "declaration": true,
+    "sourceMap": true,
+    "experimentalDecorators": true,
+    "importHelpers": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "moduleResolution": "node",
+    "preserveConstEnums": true,
+    "types": [
+      "jest"
+    ]
+  },
+  "include": [
+    "src"
+  ]
+}
\ No newline at end of file
diff --git a/packages/variants/tslint.json b/packages/variants/tslint.json
new file mode 100644
index 0000000000000..009d06e3cf447
--- /dev/null
+++ b/packages/variants/tslint.json
@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "office-ui-fabric-react-tslint"
+  ],
+  "rules": {
+    "prefer-const": true
+  }
+}
\ No newline at end of file
diff --git a/packages/variants/webpack.config.js b/packages/variants/webpack.config.js
new file mode 100644
index 0000000000000..7afd83dd05841
--- /dev/null
+++ b/packages/variants/webpack.config.js
@@ -0,0 +1,20 @@
+const path = require('path');
+const resources = require('../../scripts/tasks/webpack-resources');
+const webpack = resources.webpack;
+
+const BUNDLE_NAME = 'variants';
+
+module.exports = resources.createConfig(
+  BUNDLE_NAME,
+  true,
+  {
+    entry: {
+      [BUNDLE_NAME]: './lib/index.js'
+    },
+
+    output: {
+      libraryTarget: 'var',
+      library: 'Variants'
+    }
+  }
+);
diff --git a/rush.json b/rush.json
index bb4ca448d4cf5..9e5da8c53945d 100644
--- a/rush.json
+++ b/rush.json
@@ -1,6 +1,6 @@
 {
   "npmVersion": "5.3.0",
-  "rushVersion": "4.1.0",
+  "rushVersion": "4.3.0",
   "repository": {
     "url": "https://github.com/OfficeDev/office-ui-fabric-react.git"
   },
@@ -9,27 +9,32 @@
     {
       "packageName": "office-ui-fabric-react",
       "projectFolder": "packages/office-ui-fabric-react",
-      "versionPolicyName": "lockedMajor"
+      "versionPolicyName": "lockedMajor",
+      "shouldPublish": true
     },
     {
       "packageName": "@uifabric/experiments",
       "projectFolder": "packages/experiments",
-      "versionPolicyName": "lockedMajor"
+      "versionPolicyName": "lockedMajor",
+      "shouldPublish": true
     },
     {
       "packageName": "@uifabric/merge-styles",
       "projectFolder": "packages/merge-styles",
-      "versionPolicyName": "lockedMajor"
+      "versionPolicyName": "lockedMajor",
+      "shouldPublish": true
     },
     {
       "packageName": "@uifabric/jest-serializer-merge-styles",
       "projectFolder": "packages/jest-serializer-merge-styles",
-      "versionPolicyName": "lockedMajor"
+      "versionPolicyName": "lockedMajor",
+      "shouldPublish": true
     },
     {
       "packageName": "@uifabric/utilities",
       "projectFolder": "packages/utilities",
-      "versionPolicyName": "lockedMajor"
+      "versionPolicyName": "lockedMajor",
+      "shouldPublish": true
     },
     {
       "packageName": "@uifabric/example-app-base",
@@ -37,7 +42,8 @@
       "versionPolicyName": "lockedMajor",
       "cyclicDependencyProjects": [
         "office-ui-fabric-react"
-      ]
+      ],
+      "shouldPublish": true
     },
     {
       "packageName": "@uifabric/styling",
@@ -46,52 +52,68 @@
       "cyclicDependencyProjects": [
         "office-ui-fabric-react",
         "@uifabric/example-app-base"
-      ]
+      ],
+      "shouldPublish": true
+    },
+    {
+      "packageName": "@uifabric/variants",
+      "projectFolder": "packages/variants",
+      "versionPolicyName": "lockedMajor",
+      "shouldPublish": true
     },
     {
       "packageName": "@uifabric/file-type-icons",
       "projectFolder": "packages/file-type-icons",
+      "versionPolicyName": "lockedMajor",
       "shouldPublish": true
     },
     {
       "packageName": "@uifabric/icons",
       "projectFolder": "packages/icons",
-      "versionPolicyName": "lockedMajor"
+      "versionPolicyName": "lockedMajor",
+      "shouldPublish": true
     },
     {
       "packageName": "@uifabric/build",
       "projectFolder": "scripts",
+      "versionPolicyName": "lockedMajor",
       "shouldPublish": false
     },
     {
       "packageName": "ssr-tests",
       "projectFolder": "apps/ssr-tests",
+      "versionPolicyName": "lockedMajor",
       "shouldPublish": false
     },
     {
       "packageName": "vr-tests",
       "projectFolder": "apps/vr-tests",
+      "versionPolicyName": "lockedMajor",
       "shouldPublish": false
     },
     {
       "packageName": "todo-app",
       "projectFolder": "apps/todo-app",
+      "versionPolicyName": "lockedMajor",
       "shouldPublish": false
     },
     {
       "packageName": "@uifabric/fabric-website",
       "projectFolder": "apps/fabric-website",
-      "versionPolicyName": "lockedMajor"
+      "versionPolicyName": "lockedMajor",
+      "shouldPublish": true
     },
     {
       "packageName": "test-bundle-button",
       "projectFolder": "apps/test-bundle-button",
+      "versionPolicyName": "lockedMajor",
       "shouldPublish": false
     },
     {
       "packageName": "office-ui-fabric-react-tslint",
       "projectFolder": "packages/office-ui-fabric-react-tslint",
+      "versionPolicyName": "lockedMajor",
       "shouldPublish": false
     }
   ]
-}
+}
\ No newline at end of file
diff --git a/scripts/package.json b/scripts/package.json
index 1b2a4ceeec5cd..2f249ee3e8b65 100644
--- a/scripts/package.json
+++ b/scripts/package.json
@@ -11,7 +11,7 @@
     "@microsoft/api-extractor": "^4.2.6",
     "@microsoft/load-themed-styles": "^1.7.13",
     "@microsoft/loader-load-themed-styles": "^1.6.0",
-    "@uifabric/merge-styles": ">=5.11.0 <6.0.0",
+    "@uifabric/merge-styles": ">=5.13.0 <6.0.0",
     "autoprefixer": "^7.1.5",
     "awesome-typescript-loader": "^3.2.3",
     "bundlesize": "^0.15.2",
@@ -38,7 +38,7 @@
     "style-loader": "^0.19.0",
     "tslint": "^5.7.0",
     "tslint-microsoft-contrib": "^5.0.1",
-    "typescript": "2.6.2",
+    "typescript": "2.7.2",
     "uglifyjs-webpack-plugin": "^0.4.6",
     "webpack": "^3.7.1",
     "webpack-bundle-analyzer": "^2.9.0",
@@ -49,7 +49,7 @@
   "bundlesize": [
     {
       "path": "../apps/test-bundle-button/dist/main.min.js",
-      "maxSize": "42.8 kB"
+      "maxSize": "45.0 kB"
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/scripts/tasks/jest-mock.js b/scripts/tasks/jest-mock.js
index dce535c5c08d4..2c5ba89b2d1a6 100644
--- a/scripts/tasks/jest-mock.js
+++ b/scripts/tasks/jest-mock.js
@@ -1,23 +1,105 @@
 const KeyCodes = {
-  a: 65,
   backspace: 8,
-  comma: 188,
-  del: 46,
-  down: 40,
-  end: 35,
+  tab: 9,
   enter: 13,
+  shift: 16,
+  ctrl: 17,
+  alt: 18,
+  pauseBreak: 19,
+  capslock: 20,
   escape: 27,
+  space: 32,
+  pageUp: 33,
+  pageDown: 34,
+  end: 35,
   home: 36,
   left: 37,
-  pageDown: 34,
-  pageUp: 33,
+  up: 38,
   right: 39,
+  down: 40,
+  insert: 45,
+  del: 46,
+  zero: 48,
+  one: 49,
+  two: 50,
+  three: 51,
+  four: 52,
+  five: 53,
+  six: 54,
+  seven: 55,
+  eight: 56,
+  nine: 57,
+  a: 65,
+  b: 66,
+  c: 67,
+  d: 68,
+  e: 69,
+  f: 70,
+  g: 71,
+  h: 72,
+  i: 73,
+  j: 74,
+  k: 75,
+  l: 76,
+  m: 77,
+  n: 78,
+  o: 79,
+  p: 80,
+  q: 81,
+  r: 82,
+  s: 83,
+  t: 84,
+  u: 85,
+  v: 86,
+  w: 87,
+  x: 88,
+  y: 89,
+  z: 90,
+  leftWindow: 91,
+  rightWindow: 92,
+  select: 93,
+  zero_numpad: 96,
+  one_numpad: 97,
+  two_numpad: 98,
+  three_numpad: 99,
+  four_numpad: 100,
+  five_numpad: 101,
+  six_numpad: 102,
+  seven_numpad: 103,
+  eight_numpad: 104,
+  nine_numpad: 105,
+  multiply: 106,
+  add: 107,
+  subtract: 109,
+  decimalPoint: 110,
+  divide: 111,
+  f1: 112,
+  f2: 113,
+  f3: 114,
+  f4: 115,
+  f5: 116,
+  f6: 117,
+  f7: 118,
+  f8: 119,
+  f9: 120,
+  f10: 121,
+  f11: 122,
+  f12: 123,
+  numlock: 144,
+  scrollLock: 145,
   semicolon: 186,
-  space: 32,
-  tab: 9,
-  up: 38,
+  equalSign: 187,
+  comma: 188,
+  dash: 189,
+  period: 190,
+  forwardSlash: 191,
+  graveAccent: 192,
+  openBracket: 219,
+  backSlash: 220,
+  closeBracket: 221,
+  singleQuote: 222
 };
 
 module.exports = {
   KeyCodes
-};
+};
\ No newline at end of file
diff --git a/scripts/tasks/jest-resources.js b/scripts/tasks/jest-resources.js
index bd08e5432b443..6dbee44865c50 100644
--- a/scripts/tasks/jest-resources.js
+++ b/scripts/tasks/jest-resources.js
@@ -51,4 +51,4 @@ const styleMockPath =
         }
 
       }, customConfig)
-  };
+  };
\ No newline at end of file
diff --git a/scripts/tasks/webpack-resources.js b/scripts/tasks/webpack-resources.js
index 91adf80278493..49eff5d00ccbe 100644
--- a/scripts/tasks/webpack-resources.js
+++ b/scripts/tasks/webpack-resources.js
@@ -74,7 +74,7 @@ module.exports = {
       {
         devServer: {
           inline: true,
-          port: 4322,
+          port: 4322
         },
 
         resolveLoader: {
@@ -187,4 +187,4 @@ function getPlugins(
   }
 
   return plugins;
-}
\ No newline at end of file
+}
diff --git a/scripts/updateReleaseNotes.js b/scripts/updateReleaseNotes.js
index d89bfa30a35a2..e3c3e3abdf22d 100644
--- a/scripts/updateReleaseNotes.js
+++ b/scripts/updateReleaseNotes.js
@@ -68,13 +68,13 @@ function forEachFileRecursive(folder, fileName, cb) {
 /**
  * Build up the markdown from the entry description.
  */
-function getMarkdownForEntry(entry) {
+async function getMarkdownForEntry(entry) {
   let markdown = '';
   let comments = '';
 
-  comments += getChangeComments('Breaking changes', entry.comments.major);
-  comments += getChangeComments('Minor changes', entry.comments.minor);
-  comments += getChangeComments('Patches', entry.comments.patch);
+  comments += await getChangeComments('Breaking changes', entry.comments.major);
+  comments += await getChangeComments('Minor changes', entry.comments.minor);
+  comments += await getChangeComments('Patches', entry.comments.patch);
 
   if (!comments) {
     markdown += '*Changes not tracked*' +
@@ -90,18 +90,60 @@ function getMarkdownForEntry(entry) {
 /**
  * From a comment array, conditionally returns a section of markdown.
  */
-function getChangeComments(title, commentsArray) {
+async function getChangeComments(title, commentsArray) {
   var comments = '';
   if (commentsArray) {
     comments = "# " + title + (EOL + EOL);
-    commentsArray.forEach(function (comment) {
-      comments += "- " + comment.comment + EOL;
-    });
+
+    for (let i = 0; i < commentsArray.length; i++) {
+      var comment = commentsArray[i];
+      var searchResult;
+
+      comments += `- ${comment.comment}`;
+      if (comment.commit) {
+        comments += ` ([commit](https://github.com/${REPO_DETAILS.owner}/${REPO_DETAILS.repo}/commit/${comment.commit})`;
+        searchResult = await getPullRequest(comment.commit);
+
+        if (searchResult) {
+          comments += ` by [${searchResult.author}](${searchResult.authorUrl}), pr [#${searchResult.number}](${searchResult.url})`;
+        }
+
+        comments += `)`;
+      }
+      comments += EOL;
+    }
     comments += EOL;
   }
   return comments;
 };
 
+function getPullRequest(commitHash) {
+  return new Promise((resolve, reject) => {
+
+    github.search.issues({ q: commitHash }, (response, result) => {
+      if (result && result.items && result.items.length >= 1) {
+        var item = result.items.find(
+          item => item.repository_url === `https://api.github.com/repos/${REPO_DETAILS.owner}/${REPO_DETAILS.repo}`
+        );
+
+        if (item) {
+          resolve({
+            number: item.number,
+            url: item.html_url,
+            author: item.user.login,
+            authorUrl: item.user.html_url
+          });
+
+          return;
+        }
+      }
+
+      resolve(null);
+    });
+
+  });
+}
+
 /**
  * Builds a map of changelog tags to entries defined in CHANGELOG.json files.
  */
@@ -112,7 +154,6 @@ function getChangelogTagMap() {
     let changelog = JSON.parse(result.content);
     changelog.entries.forEach(entry => {
       entry.name = changelog.name;
-      entry.body = getMarkdownForEntry(entry);
       map.set(entry.tag, entry);
     });
   });
@@ -180,7 +221,7 @@ function updateReleaseNotes(shouldPatchChangelog) {
   getReleases((releases) => {
     let count = 0;
 
-    publishedTags.forEach(tag => {
+    publishedTags.forEach(async tag => {
       let entry = changelogEntries.get(tag);
       let hasBeenReleased = releases.has(tag);
 
@@ -197,6 +238,8 @@ function updateReleaseNotes(shouldPatchChangelog) {
           console.log(`Creating release notes for ${entry.name} ${entry.version}`);
           count++;
 
+          releaseDetails.body = await getMarkdownForEntry(entry);
+
           if (SHOULD_APPLY) {
             github.repos.createRelease(releaseDetails, (err, cb) => {
               if (err) {
@@ -212,6 +255,8 @@ function updateReleaseNotes(shouldPatchChangelog) {
 
           if (SHOULD_APPLY) {
             releaseDetails.id = releases.get(tag).id;
+            releaseDetails.body = await getMarkdownForEntry(entry);
+
             github.repos.editRelease(releaseDetails, (err, cb) => {
               if (err) {
                 throw new Error(`Failed to commit release notes for ${entry.name} ${entry.version}.${EOL}${err}`);